117 lines
3 KiB
Vue
117 lines
3 KiB
Vue
<template>
|
|
<UCard>
|
|
<div class="text-center space-y-3">
|
|
<div class="text-3xl font-bold" :class="textColorClass">
|
|
{{ progressPct }}%
|
|
</div>
|
|
<div class="text-sm text-neutral-600">{{ label }}</div>
|
|
<UProgress
|
|
:value="progressPct"
|
|
:max="100"
|
|
:color="progressColor"
|
|
class="mt-2"
|
|
: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">
|
|
{{ statusText }}
|
|
</UBadge>
|
|
<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-neutral-500 mt-2">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
currentSavings: number;
|
|
savingsTargetMonths: number;
|
|
monthlyBurn: number;
|
|
label?: string;
|
|
description?: string;
|
|
showAmounts?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
label: "Savings Progress",
|
|
showAmounts: true,
|
|
});
|
|
|
|
const { analyzeReserveProgress } = useReserveProgress();
|
|
|
|
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 progressColor = computed(() => {
|
|
switch (status.value) {
|
|
case "green":
|
|
return "green";
|
|
case "yellow":
|
|
return "yellow";
|
|
case "red":
|
|
return "red";
|
|
default:
|
|
return "neutral";
|
|
}
|
|
});
|
|
|
|
const badgeColor = computed(() => {
|
|
switch (status.value) {
|
|
case "green":
|
|
return "green";
|
|
case "yellow":
|
|
return "yellow";
|
|
case "red":
|
|
return "red";
|
|
default:
|
|
return "neutral";
|
|
}
|
|
});
|
|
|
|
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-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";
|
|
}
|
|
});
|
|
</script>
|