refactor: remove deprecated components and streamline member coverage calculations, enhance budget management with improved payroll handling, and update UI elements for better clarity

pages/mix.vue

@@ -1,7 +1,17 @@
 <template>
   <section class="py-8 space-y-6">
     <div class="flex items-center justify-between">
-      <h2 class="text-2xl font-semibold">Revenue Mix Planner</h2>
+      <div>
+        <h2 class="text-2xl font-semibold">Revenue Mix Planner</h2>
+        <div v-if="isSetupComplete" class="flex items-center gap-2 mt-1">
+          <UBadge color="green" variant="subtle" size="xs">
+            Synchronized with Setup
+          </UBadge>
+          <UButton variant="ghost" size="xs" @click="goToSetup">
+            Edit in Setup
+          </UButton>
+        </div>
+      </div>
       <UButton color="primary" @click="sendToBudget">
         Send to Budget & Scenarios
       </UButton>
@@ -169,9 +179,19 @@
 <script setup lang="ts">
 const { $format } = useNuxtApp();
 
-// Use real store data instead of fixtures
+// Use synchronized store data - setup is the source of truth
+const { initSync, getStreams, unifiedStreams } = useStoreSync();
+const { isSetupComplete, goToSetup } = useSetupState();
 const streamsStore = useStreamsStore();
-const { streams } = storeToRefs(streamsStore);
+const coopStore = useCoopBuilderStore();
+
+// Initialize synchronization on mount
+onMounted(async () => {
+  await initSync();
+});
+
+// Use reactive synchronized streams data
+const streams = unifiedStreams;
 
 const columns = [
   { id: "name", key: "name", label: "Stream" },
@@ -184,8 +204,15 @@ const columns = [
   { id: "actions", key: "actions", label: "" },
 ];
 
-const totalTargetPct = computed(() => streamsStore.totalTargetPct);
-const totalMonthlyAmount = computed(() => streamsStore.totalMonthlyAmount);
+const totalTargetPct = computed(() => {
+  // Calculate from the unified streams data
+  return streams.value.reduce((sum, stream) => sum + (stream.targetPct || 0), 0);
+});
+
+const totalMonthlyAmount = computed(() => {
+  // Calculate from the unified streams data
+  return streams.value.reduce((sum, stream) => sum + (stream.targetMonthlyAmount || stream.monthly || 0), 0);
+});
 
 // Calculate concentration metrics
 const topSourcePct = computed(() => {
@@ -244,16 +271,41 @@ function getRowActions(row: any) {
 }
 
 function updateStream(id: string, field: string, value: any) {
-  const stream = streams.value.find((s) => s.id === id);
-  if (stream) {
-    stream[field] = Number(value) || value;
-    streamsStore.upsertStream(stream);
+  // Update the primary CoopBuilder store (source of truth)
+  const coopStream = coopStore.streams.find((s) => s.id === id);
+  if (coopStream) {
+    if (field === 'targetMonthlyAmount') {
+      coopStream.monthly = Number(value) || 0;
+    } else {
+      coopStream[field] = Number(value) || value;
+    }
+    coopStore.upsertStream(coopStream);
+  }
+  
+  // Also update the legacy store for backward compatibility
+  const legacyStream = streams.value.find((s) => s.id === id);
+  if (legacyStream) {
+    legacyStream[field] = Number(value) || value;
+    streamsStore.upsertStream(legacyStream);
   }
 }
 
 function addStream() {
-  const newStream = {
-    id: Date.now().toString(),
+  const newStreamId = Date.now().toString();
+  
+  // Add to CoopBuilder store first (primary source)
+  const coopStream = {
+    id: newStreamId,
+    label: "",
+    monthly: 0,
+    category: "games",
+    certainty: "Aspirational",
+  };
+  coopStore.upsertStream(coopStream);
+  
+  // Add to legacy store for compatibility
+  const legacyStream = {
+    id: newStreamId,
     name: "",
     category: "games",
     subcategory: "",
@@ -268,7 +320,7 @@ function addStream() {
     seasonalityWeights: new Array(12).fill(1),
     effortHoursPerMonth: 0,
   };
-  streamsStore.upsertStream(newStream);
+  streamsStore.upsertStream(legacyStream);
 }
 
 function editStream(row: any) {
@@ -282,6 +334,8 @@ function duplicateStream(row: any) {
 }
 
 function removeStream(row: any) {
+  // Remove from both stores to maintain sync
+  coopStore.removeStream(row.id);
   streamsStore.removeStream(row.id);
 }