refactor: enhance routing and state management in CoopBuilder, add migration checks on startup, and update Tailwind configuration for improved component styling

components/WizardCostsStep.vue

@@ -18,6 +18,27 @@
       </div>
     </div>
 
+    <!-- Operating Mode Toggle -->
+    <div class="p-4 border-3 border-black rounded-xl bg-white shadow-md">
+      <div class="flex items-center justify-between">
+        <div>
+          <h4 class="font-bold text-sm">Operating Mode</h4>
+          <p class="text-xs text-gray-600 mt-1">
+            Choose between minimum needs or target pay for payroll calculations
+          </p>
+        </div>
+        <UToggle
+          v-model="useTargetMode"
+          @update:model-value="updateOperatingMode"
+          :ui="{ active: 'bg-success-500' }"
+        />
+      </div>
+      <div class="mt-2 text-xs font-medium">
+        {{ useTargetMode ? '🎯 Target Mode' : '⚡ Minimum Mode' }}:
+        {{ useTargetMode ? 'Uses target pay allocations' : 'Uses minimum needs allocations' }}
+      </div>
+    </div>
+
     <!-- Overhead Costs -->
     <div class="space-y-4">
       <div
@@ -130,14 +151,26 @@
 
 <script setup lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { storeToRefs } from "pinia";
 const emit = defineEmits<{
   "save-status": [status: "saving" | "saved" | "error"];
 }>();
 
 // Store
-const budgetStore = useBudgetStore();
-const { overheadCosts } = storeToRefs(budgetStore);
+const coop = useCoopBuilder();
+
+// Get the store directly for overhead costs
+const store = useCoopBuilderStore();
+
+// Computed for overhead costs (from store)
+const overheadCosts = computed(() => store.overheadCosts || []);
+
+// Operating mode toggle
+const useTargetMode = ref(coop.operatingMode.value === 'target');
+
+function updateOperatingMode(value: boolean) {
+  coop.setOperatingMode(value ? 'target' : 'min');
+  emit("save-status", "saved");
+}
 
 // Category options
 const categoryOptions = [
@@ -168,13 +201,8 @@ const debouncedSave = useDebounceFn((cost: any) => {
   emit("save-status", "saving");
 
   try {
-    // Find and update existing cost
-    const existingCost = overheadCosts.value.find((c) => c.id === cost.id);
-    if (existingCost) {
-      // Store will handle reactivity through the ref
-      Object.assign(existingCost, cost);
-    }
-
+    // Use store's upsert method
+    store.upsertOverheadCost(cost);
     emit("save-status", "saved");
   } catch (error) {
     console.error("Failed to save cost:", error);
@@ -204,15 +232,13 @@ function addOverheadCost() {
     recurring: true,
   };
 
-  budgetStore.addOverheadLine({
-    name: newCost.name,
-    amountMonthly: newCost.amount,
-    category: newCost.category,
-  });
+  store.addOverheadCost(newCost);
+  emit("save-status", "saved");
 }
 
 function removeCost(id: string) {
-  budgetStore.removeOverheadLine(id);
+  store.removeOverheadCost(id);
+  emit("save-status", "saved");
 }
 
 function exportCosts() {