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

components/CoverageChip.vue

@@ -1,11 +1,6 @@
 <template>
   <UTooltip :text="tooltipText">
-    <UBadge
-      :color="badgeColor"
-      variant="solid"
-      size="sm"
-      class="font-medium"
-    >
+    <UBadge :color="badgeColor" variant="solid" size="sm" class="font-medium">
       <UIcon :name="iconName" class="w-3 h-3 mr-1" />
       {{ displayText }}
     </UBadge>
@@ -14,44 +9,46 @@
 
 <script setup lang="ts">
 interface Props {
-  coverageMinPct?: number
-  coverageTargetPct?: number
-  memberName?: string
-  warnIfUnder?: number
+  coveragePct?: number;
+  memberName?: string;
+  warnIfUnder?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   warnIfUnder: 100,
-  memberName: 'member'
-})
+  memberName: "member",
+});
 
-const coverage = computed(() => props.coverageMinPct || 0)
+const coverage = computed(() => props.coveragePct || 0);
 
 const badgeColor = computed(() => {
-  if (coverage.value >= 100) return 'success'
-  if (coverage.value >= 80) return 'warning'
-  return 'error'
-})
+  if (!props.coveragePct) return "neutral";
+  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'
-})
+  if (!props.coveragePct) return "i-heroicons-cog-6-tooth";
+  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`
-})
+  if (!props.coveragePct) return "Set needs";
+  if (coverage.value === 0) return "No coverage";
+  return `${Math.round(coverage.value)}% covered`;
+});
 
 const tooltipText = computed(() => {
-  if (!props.coverageMinPct) {
-    return `${props.memberName} hasn't set their minimum needs yet`
+  if (!props.coveragePct) {
+    return `Click 'Set minimum needs' to enable coverage tracking for ${props.memberName}`;
   }
-  
-  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>
+
+  const percent = Math.round(coverage.value);
+  const status = coverage.value >= 100 ? "meets" : "covers";
+
+  return `Co-op pay ${status} ${percent}% of ${props.memberName}'s minimum needs`;
+});
+</script>