refactor: remove deprecated components and streamline member coverage calculations, enhance budget management with improved payroll handling, and update UI elements for better clarity

components/dashboard/NeedsCoverageCard.vue

@@ -1,37 +1,165 @@
 <template>
-  <div class="hidden" data-ui="needs_coverage_card_v1" />
+  <div class="hidden" data-ui="needs_coverage_card_v2" />
   <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 class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-user-group" class="h-5 w-5" />
+          <h3 class="font-semibold">Member Needs Coverage</h3>
+        </div>
+        <UTooltip text="Shows how well the co-op can meet each member's stated financial needs">
+          <UIcon name="i-heroicons-information-circle" class="h-4 w-4 text-gray-400 hover:text-gray-600 cursor-help" />
+        </UTooltip>
       </div>
     </template>
     
-    <div class="text-center space-y-6">
-      <div class="text-2xl font-semibold" :class="statusColor">
-        {{ pctCovered }}%
+    <div v-if="hasMembers" class="space-y-4">
+      <!-- Team Summary -->
+      <div class="text-center">
+        <div class="text-2xl font-semibold" :class="statusColor">
+          {{ fullyCoveredCount }} of {{ totalMembers }}
+        </div>
+        <div class="text-sm text-gray-600">
+          members fully covered
+        </div>
       </div>
-      <div class="text-sm text-gray-600">
-        Median {{ median }}%
+
+      <!-- Coverage Stats -->
+      <div class="flex justify-between text-sm">
+        <div class="text-center">
+          <div class="font-medium">{{ median }}%</div>
+          <div class="text-gray-600">Median</div>
+        </div>
+        <div class="text-center">
+          <div class="font-medium" :class="underCoveredColor">{{ stats.under100 }}</div>
+          <div class="text-gray-600">Under 100%</div>
+        </div>
+        <div class="text-center">
+          <div class="font-medium">{{ formatCurrency(availablePayroll) }}</div>
+          <div class="text-gray-600">Available</div>
+        </div>
       </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>
+
+      <!-- Intelligent Financial Analysis -->
+      <div v-if="hasMembers" class="space-y-2">
+        <!-- Coverage gap analysis -->
+        <div v-if="stats.under100 > 0" class="text-xs bg-amber-50 p-3 rounded border-l-4 border-amber-400">
+          <div class="flex items-start gap-2">
+            <UIcon name="i-heroicons-exclamation-triangle" class="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
+            <div class="space-y-1">
+              <p class="font-medium text-amber-800">Coverage Gap Analysis</p>
+              <p class="text-amber-700">
+                To meet member needs, you need <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their stated requirements, 
+                but you have <strong>{{ formatCurrency(availablePayroll) }}</strong> available for payroll.
+              </p>
+              <p class="text-amber-600">
+                <strong>Shortfall: {{ formatCurrency(Math.max(0, totalNeeds - availablePayroll)) }}</strong>
+              </p>
+              <p class="text-xs text-amber-600 mt-2">
+                💡 Note: This reflects member-stated needs. Check your Budget page for detailed payroll planning.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Surplus analysis -->
+        <div v-else-if="availablePayroll > totalNeeds && totalNeeds > 0" class="text-xs bg-green-50 p-3 rounded border-l-4 border-green-400">
+          <div class="flex items-start gap-2">
+            <UIcon name="i-heroicons-check-circle" class="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
+            <div class="space-y-1">
+              <p class="font-medium text-green-800">Healthy Coverage</p>
+              <p class="text-green-700">
+                You have <strong>{{ formatCurrency(availablePayroll) }}</strong> available to cover 
+                <strong>{{ formatCurrency(totalNeeds) }}</strong> in member needs.
+              </p>
+              <p class="text-green-600">
+                <strong>Surplus: {{ formatCurrency(availablePayroll - totalNeeds) }}</strong>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- No payroll available -->
+        <div v-else-if="availablePayroll === 0 && totalNeeds > 0" class="text-xs bg-red-50 p-3 rounded border-l-4 border-red-400">
+          <div class="flex items-start gap-2">
+            <UIcon name="i-heroicons-x-circle" class="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
+            <div class="space-y-1">
+              <p class="font-medium text-red-800">No Funds for Payroll</p>
+              <p class="text-red-700">
+                Member needs total <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their stated requirements, 
+                but current revenue minus costs leaves $0 for payroll.
+              </p>
+              <p class="text-red-600">
+                Consider increasing revenue or reducing overhead costs.
+              </p>
+              <p class="text-xs text-red-600 mt-2">
+                💡 Note: This reflects member-stated needs. Your Budget page may show different payroll amounts.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+
+    <!-- Empty State -->
+    <div v-else class="text-center py-6 text-gray-500">
+      <UIcon name="i-heroicons-users" class="h-8 w-8 mx-auto mb-2 opacity-50" />
+      <p class="text-sm">Add members in setup to see coverage</p>
+    </div>
   </UCard>
 </template>
 
 <script setup lang="ts">
-const { members, teamCoverageStats } = useCoopBuilder()
+const { members, teamCoverageStats, allocatePayroll, streams } = useCoopBuilder()
+const coopStore = useCoopBuilderStore()
+
 const stats = computed(() => teamCoverageStats())
-const pctCovered = computed(() => Math.round(stats.value.over100Pct || 0))
+const allocatedMembers = computed(() => allocatePayroll())
 const median = computed(() => Math.round(stats.value.median ?? 0))
 
+// Team-level calculations
+const hasMembers = computed(() => members.value.length > 0)
+const totalMembers = computed(() => members.value.length)
+const fullyCoveredCount = computed(() => totalMembers.value - stats.value.under100)
+
+// Financial calculations
+const totalNeeds = computed(() => 
+  allocatedMembers.value.reduce((sum, m) => sum + (m.minMonthlyNeeds || 0), 0)
+)
+
+const totalRevenue = computed(() => 
+  streams.value.reduce((sum, s) => sum + (s.monthly || 0), 0)
+)
+
+const overheadCosts = computed(() => 
+  coopStore.overheadCosts.reduce((sum, c) => sum + (c.amount || 0), 0)
+)
+
+const availablePayroll = computed(() => 
+  Math.max(0, totalRevenue.value - overheadCosts.value)
+)
+
+// Status colors based on coverage
 const statusColor = computed(() => {
-  if (pctCovered.value >= 100) return 'text-green-600'
-  if (pctCovered.value >= 80) return 'text-amber-600'
+  const ratio = fullyCoveredCount.value / Math.max(1, totalMembers.value)
+  if (ratio === 1) return 'text-green-600'
+  if (ratio >= 0.8) return 'text-amber-600'
   return 'text-red-600'
 })
+
+const underCoveredColor = computed(() => {
+  if (stats.value.under100 === 0) return 'text-green-600'
+  if (stats.value.under100 <= Math.ceil(totalMembers.value * 0.2)) return 'text-amber-600'
+  return 'text-red-600'
+})
+
+// Currency formatting
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount)
+}
 </script>