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

components/CoverageChip.vue

@@ -0,0 +1,57 @@
+<template>
+  <UTooltip :text="tooltipText">
+    <UBadge
+      :color="badgeColor"
+      variant="solid"
+      size="sm"
+      class="font-medium"
+    >
+      <UIcon :name="iconName" class="w-3 h-3 mr-1" />
+      {{ displayText }}
+    </UBadge>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  coverageMinPct?: number
+  coverageTargetPct?: number
+  memberName?: string
+  warnIfUnder?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  warnIfUnder: 100,
+  memberName: 'member'
+})
+
+const coverage = computed(() => props.coverageMinPct || 0)
+
+const badgeColor = computed(() => {
+  if (coverage.value >= 100) return 'success'
+  if (coverage.value >= 80) return 'warning'
+  return 'error'
+})
+
+const iconName = computed(() => {
+  if (coverage.value >= 100) return 'i-heroicons-check-circle'
+  if (coverage.value >= 80) return 'i-heroicons-exclamation-triangle'
+  return 'i-heroicons-x-circle'
+})
+
+const displayText = computed(() => {
+  if (!props.coverageMinPct) return 'No needs set'
+  return `${Math.round(coverage.value)}% coverage`
+})
+
+const tooltipText = computed(() => {
+  if (!props.coverageMinPct) {
+    return `${props.memberName} hasn't set their minimum needs yet`
+  }
+  
+  const percent = Math.round(coverage.value)
+  const status = coverage.value >= 100 ? 'meets' : 'covers'
+  
+  return `${status} ${percent}% of ${props.memberName}'s minimum needs (incl. external income)`
+})
+</script>