refactor: update app.vue and various components to improve routing paths, enhance UI consistency, and streamline layout for better user experience

pages/tools/dashboard-simple.vue

@@ -0,0 +1,87 @@
+<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-neutral-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-neutral-600">Runway</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-blue-600">{{ coverageDisplay }}</div>
+          <div class="text-sm text-neutral-600">Coverage</div>
+        </div>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-purple-600">{{ streamCount }}</div>
+          <div class="text-sm text-neutral-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-neutral-200 rounded">
+          <span class="font-medium">{{ member.name }}</span>
+          <span class="text-sm text-neutral-600">{{ member.relationship }}</span>
+        </div>
+        <div v-if="memberCount === 0" class="text-sm text-neutral-500 italic p-4">
+          No members configured yet.
+        </div>
+      </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 = 'target' // Simplified - always use target mode
+    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>