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

pages/dashboard-simple.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="space-y-8">
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-semibold">Dashboard</h1>
+      <div class="text-sm text-gray-600">
+        Mode: {{ currentMode }}
+      </div>
+    </div>
+
+    <!-- Simple Core Metrics -->
+    <UCard>
+      <template #header>
+        <h3 class="text-lg font-medium">Core Metrics</h3>
+      </template>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="text-center">
+          <div class="text-3xl font-bold text-green-600">{{ runwayDisplay }}</div>
+          <div class="text-sm text-gray-600">Runway</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-blue-600">{{ coverageDisplay }}</div>
+          <div class="text-sm text-gray-600">Coverage</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-purple-600">{{ streamCount }}</div>
+          <div class="text-sm text-gray-600">Revenue Streams</div>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Simple Member List -->
+    <UCard>
+      <template #header>
+        <h3 class="text-lg font-medium">Members ({{ memberCount }})</h3>
+      </template>
+      <div class="space-y-2">
+        <div v-for="(member, index) in membersList" :key="index" class="flex items-center justify-between p-2 border border-gray-200 rounded">
+          <span class="font-medium">{{ member.name }}</span>
+          <span class="text-sm text-gray-600">{{ member.relationship }}</span>
+        </div>
+        <div v-if="memberCount === 0" class="text-sm text-gray-500 italic p-4">
+          No members configured yet.
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Value Accounting Section -->
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-medium">Value Accounting</h3>
+          <UBadge color="blue" variant="subtle">January 2024</UBadge>
+        </div>
+      </template>
+      
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm text-gray-600 mb-2">
+            Next Value Session due January 2024
+          </p>
+          <div class="flex items-center gap-4">
+            <UProgress :value="50" :max="100" color="blue" class="w-32" />
+            <span class="text-sm text-gray-600">2/4 prep steps done</span>
+          </div>
+        </div>
+        <UButton color="primary" @click="navigateTo('/session')">
+          Start Session
+        </UButton>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Simple reactive data without complex computations
+const currentMode = ref('minimum')
+const runwayDisplay = ref('∞')
+const coverageDisplay = ref('100%')
+const streamCount = ref(0)
+const memberCount = ref(0)
+const membersList = ref([])
+
+// Try to initialize with store data
+onMounted(async () => {
+  try {
+    // Simple store access without composable
+    const membersStore = useMembersStore()
+    const streamsStore = useStreamsStore()
+    const policiesStore = usePoliciesStore()
+    
+    // Update reactive values
+    currentMode.value = policiesStore.operatingMode || 'minimum'
+    memberCount.value = membersStore.members?.length || 0
+    streamCount.value = streamsStore.streams?.length || 0
+    
+    // Simple member list
+    membersList.value = membersStore.members?.map(m => ({
+      name: m.displayName || 'Unknown',
+      relationship: m.payRelationship || 'Unknown'
+    })) || []
+    
+    console.log('Dashboard initialized:', {
+      mode: currentMode.value,
+      members: memberCount.value,
+      streams: streamCount.value
+    })
+    
+  } catch (error) {
+    console.error('Error initializing simple dashboard:', error)
+  }
+})
+</script>