refactor: update membership agreement and conflict resolution framework templates to utilize centralized cooperative information, enhance decision framework handling, and improve overall layout for better user experience

pages/templates/conflict-resolution-framework.vue

@@ -16,7 +16,7 @@
           <div class="text-center mb-8">
             <h1
               class="text-3xl md:text-5xl font-bold uppercase m-0 py-4 border-t-2 border-b-2 text-black dark:text-white border-black dark:border-white"
-              :data-org-name="formData.orgName || 'Organization'">
+              :data-org-name="getOrgName()">
               CONFLICT RESOLUTION
             </h1>
           </div>
@@ -895,6 +895,9 @@
 <script setup>
 import { ref, watch, computed, onMounted } from "vue";
 
+// Import centralized coop info
+const { coopInfo, updateCoopInfo, getOrgName } = useCoopInfo();
+
 definePageMeta({
   layout: false,
 });
@@ -1429,6 +1432,27 @@ function debounce(func, wait) {
   };
 }
 
+// Sync with centralized coop info
+watch(
+  () => coopInfo.value,
+  (newCoopInfo) => {
+    if (newCoopInfo.cooperativeName) {
+      formData.value.orgName = newCoopInfo.cooperativeName;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// Update centralized store when org name changes
+watch(
+  () => formData.value.orgName,
+  (newOrgName) => {
+    if (newOrgName && newOrgName !== coopInfo.value.cooperativeName) {
+      updateCoopInfo({ cooperativeName: newOrgName });
+    }
+  }
+);
+
 // Watch for changes and auto-save
 watch(
   [
@@ -1450,7 +1474,7 @@ watch(
 // Export data for the ExportOptions component
 const exportData = computed(() => ({
   formData: formData.value,
-  orgName: formData.value.orgName || "Organization",
+  orgName: getOrgName(),
   orgType: formData.value.orgType,
   memberCount: formData.value.memberCount,
   sectionsEnabled: sectionsEnabled.value,