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

components/dashboard/NeedsCoverageCard.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="hidden" data-ui="needs_coverage_card_v1" />
+  <UCard class="min-h-[140px] shadow-sm rounded-xl">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-user-group" class="h-5 w-5" />
+        <h3 class="font-semibold">Members covered</h3>
+      </div>
+    </template>
+    
+    <div class="text-center space-y-6">
+      <div class="text-2xl font-semibold" :class="statusColor">
+        {{ pctCovered }}%
+      </div>
+      <div class="text-sm text-gray-600">
+        Median {{ median }}%
+      </div>
+      <div v-if="stats.under100 > 0" class="flex items-center justify-center gap-1 text-xs text-amber-600 mt-3">
+        <span>⚠</span>
+        <span>{{ stats.under100 }} under 100%</span>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { members, teamCoverageStats } = useCoopBuilder()
+const stats = computed(() => teamCoverageStats())
+const pctCovered = computed(() => Math.round(stats.value.over100Pct || 0))
+const median = computed(() => Math.round(stats.value.median ?? 0))
+
+const statusColor = computed(() => {
+  if (pctCovered.value >= 100) return 'text-green-600'
+  if (pctCovered.value >= 80) return 'text-amber-600'
+  return 'text-red-600'
+})
+</script>