refactor: update routing paths in app.vue, enhance AnnualBudget component layout, and streamline dashboard and budget pages for improved user experience

components/NeedsCoverageBars.vue

@@ -48,20 +48,43 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
-const membersStore = useMembersStore()
-const { members, teamStats } = storeToRefs(membersStore)
+// Use coopBuilder store which has the actual data
+const coopStore = useCoopBuilderStore()
+const { members, equalHourlyWage } = storeToRefs(coopStore)
 
 const membersWithCoverage = computed(() => {
   return members.value.map(member => {
-    const coverage = membersStore.getMemberCoverage(member.id)
+    // Calculate coverage based on member hours vs pay
+    const hourlyWage = equalHourlyWage.value || 50
+    const monthlyHours = member.hoursPerMonth || 0
+    const expectedPay = monthlyHours * hourlyWage
+    const actualPay = member.monthlyPayPlanned || 0
+    
+    const coverageMinPct = expectedPay > 0 ? Math.min(100, (actualPay / expectedPay) * 100) : 0
+    
     return {
       ...member,
-      coverageMinPct: coverage.minPct,
-      coverageTargetPct: coverage.targetPct
+      displayName: member.name,
+      coverageMinPct: coverageMinPct,
+      coverageTargetPct: coverageMinPct // Same for now since we don't have separate min/target
     }
   })
 })
 
+const teamStats = computed(() => {
+  const coverageValues = membersWithCoverage.value.map(m => m.coverageMinPct).filter(v => v !== undefined)
+  
+  if (coverageValues.length === 0) {
+    return { under100: 0, median: 0 }
+  }
+  
+  const sorted = [...coverageValues].sort((a, b) => a - b)
+  const median = sorted[Math.floor(sorted.length / 2)]
+  const under100 = coverageValues.filter(v => v < 100).length
+  
+  return { under100, median }
+})
+
 function getBarColor(coverage: number | undefined) {
   const pct = coverage || 0
   if (pct >= 100) return 'bg-green-500'