feat: add initial application structure with configuration, UI components, and state management

components/CoverageMeter.vue

@@ -0,0 +1,101 @@
+<template>
+  <UCard>
+    <div class="text-center space-y-3">
+      <div class="text-3xl font-bold" :class="textColorClass">
+        {{ coveragePct }}%
+      </div>
+      <div class="text-sm text-gray-600">{{ label }}</div>
+      <UProgress 
+        :value="coveragePct" 
+        :max="100" 
+        :color="progressColor" 
+        class="mt-2"
+        :ui="{ progress: { background: 'bg-gray-200' } }"
+        :aria-label="`Coverage progress: ${coveragePct}% of target hours funded`"
+        role="progressbar"
+        :aria-valuenow="coveragePct"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuetext="`${coveragePct}% coverage, ${statusText.toLowerCase()} funding level`"
+      />
+      <UBadge 
+        :color="badgeColor" 
+        variant="subtle" 
+        class="text-xs"
+      >
+        {{ statusText }}
+      </UBadge>
+      <div v-if="showHours" class="text-xs text-gray-500 space-y-1">
+        <div>Funded: {{ fundedHours }}h</div>
+        <div>Target: {{ targetHours }}h</div>
+        <div v-if="gapHours > 0">Gap: {{ gapHours }}h</div>
+      </div>
+      <p v-if="description" class="text-xs text-gray-500 mt-2">
+        {{ description }}
+      </p>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  fundedPaidHours: number
+  targetHours: number
+  label?: string
+  description?: string
+  showHours?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Coverage vs Capacity',
+  showHours: true
+})
+
+const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()
+
+const coveragePct = computed(() => 
+  Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
+)
+
+const status = computed(() => getCoverageStatus(coveragePct.value))
+
+const fundedHours = computed(() => Math.round(props.fundedPaidHours))
+const targetHours = computed(() => Math.round(props.targetHours))
+const gapHours = computed(() => Math.max(0, targetHours.value - fundedHours.value))
+
+const progressColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow' 
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const badgeColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow'
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const textColorClass = computed(() => {
+  switch (status.value) {
+    case 'green': return 'text-green-600'
+    case 'yellow': return 'text-yellow-600'
+    case 'red': return 'text-red-600'
+    default: return 'text-gray-600'
+  }
+})
+
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'green': return 'Well Funded'
+    case 'yellow': return 'Moderate'
+    case 'red': return 'Underfunded'
+    default: return 'Unknown'
+  }
+})
+</script>