chore: update application configuration and UI components for improved styling and functionality

components/ReserveMeter.vue

@@ -4,33 +4,28 @@
       <div class="text-3xl font-bold" :class="textColorClass">
         {{ progressPct }}%
       </div>
-      <div class="text-sm text-gray-600">{{ label }}</div>
-      <UProgress 
-        :value="progressPct" 
-        :max="100" 
-        :color="progressColor" 
+      <div class="text-sm text-neutral-600">{{ label }}</div>
+      <UProgress
+        :value="progressPct"
+        :max="100"
+        :color="progressColor"
         class="mt-2"
-        :ui="{ progress: { background: 'bg-gray-200' } }"
+        :ui="{ progress: { background: 'bg-neutral-200' } }"
         :aria-label="`Savings progress: ${progressPct}% of target reached`"
         role="progressbar"
         :aria-valuenow="progressPct"
         aria-valuemin="0"
         aria-valuemax="100"
-        :aria-valuetext="`${progressPct}% of savings target, ${statusText.toLowerCase()} status`"
-      />
-      <UBadge 
-        :color="badgeColor" 
-        variant="subtle" 
-        class="text-xs"
-      >
+        :aria-valuetext="`${progressPct}% of savings target, ${statusText.toLowerCase()} status`" />
+      <UBadge :color="badgeColor" variant="subtle" class="text-xs">
         {{ statusText }}
       </UBadge>
-      <div v-if="showAmounts" class="text-xs text-gray-500 space-y-1">
+      <div v-if="showAmounts" class="text-xs text-neutral-500 space-y-1">
         <div>Current: €{{ currentSavings.toLocaleString() }}</div>
         <div>Target: €{{ targetAmount.toLocaleString() }}</div>
         <div v-if="shortfall > 0">Need: €{{ shortfall.toLocaleString() }}</div>
       </div>
-      <p v-if="description" class="text-xs text-gray-500 mt-2">
+      <p v-if="description" class="text-xs text-neutral-500 mt-2">
         {{ description }}
       </p>
     </div>
@@ -39,64 +34,84 @@
 
 <script setup lang="ts">
 interface Props {
-  currentSavings: number
-  savingsTargetMonths: number
-  monthlyBurn: number
-  label?: string
-  description?: string
-  showAmounts?: boolean
+  currentSavings: number;
+  savingsTargetMonths: number;
+  monthlyBurn: number;
+  label?: string;
+  description?: string;
+  showAmounts?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  label: 'Savings Progress',
-  showAmounts: true
-})
+  label: "Savings Progress",
+  showAmounts: true,
+});
 
-const { analyzeReserveProgress } = useReserveProgress()
+const { analyzeReserveProgress } = useReserveProgress();
 
-const analysis = computed(() => 
-  analyzeReserveProgress(props.currentSavings, props.savingsTargetMonths, props.monthlyBurn)
-)
+const analysis = computed(() =>
+  analyzeReserveProgress(
+    props.currentSavings,
+    props.savingsTargetMonths,
+    props.monthlyBurn
+  )
+);
 
-const progressPct = computed(() => analysis.value.progressPct)
-const status = computed(() => analysis.value.status)
-const targetAmount = computed(() => analysis.value.targetAmount)
-const shortfall = computed(() => analysis.value.shortfall)
-const currentSavings = computed(() => props.currentSavings)
+const progressPct = computed(() => analysis.value.progressPct);
+const status = computed(() => analysis.value.status);
+const targetAmount = computed(() => analysis.value.targetAmount);
+const shortfall = computed(() => analysis.value.shortfall);
+const currentSavings = computed(() => props.currentSavings);
 
 const progressColor = computed(() => {
   switch (status.value) {
-    case 'green': return 'green'
-    case 'yellow': return 'yellow' 
-    case 'red': return 'red'
-    default: return 'gray'
+    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'
+    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'
+    case "green":
+      return "text-green-600";
+    case "yellow":
+      return "text-yellow-600";
+    case "red":
+      return "text-red-600";
+    default:
+      return "text-neutral-600";
   }
-})
+});
 
 const statusText = computed(() => {
   switch (status.value) {
-    case 'green': return 'On Track'
-    case 'yellow': return 'Building'
-    case 'red': return 'Below Target'
-    default: return 'Unknown'
+    case "green":
+      return "On Track";
+    case "yellow":
+      return "Building";
+    case "red":
+      return "Below Target";
+    default:
+      return "Unknown";
   }
-})
+});
 </script>