jennie/app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-16 08:13:35 +01:00
parent 0af6b17792
commit 37ab8d7bab
54 changed files with 23293 additions and 1666 deletions
Download patch file Download diff file Expand all files Collapse all files

113
components/CoverageMeter.vue
View file

@ -4,33 +4,28 @@
<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"
<div class="text-sm text-neutral-600">{{ label }}</div>
<UProgress
:value="coveragePct"
:max="100"
:color="progressColor"
class="mt-2"
:ui="{ progress: { background: 'bg-gray-200' } }"
:ui="{ progress: { background: 'bg-neutral-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"
>
: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 v-if="showHours" class="text-xs text-neutral-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">
<p v-if="description" class="text-xs text-neutral-500 mt-2">
{{ description }}
</p>
</div>
@ -39,63 +34,81 @@
<script setup lang="ts">
interface Props {
fundedPaidHours: number
targetHours: number
label?: string
description?: string
showHours?: boolean
fundedPaidHours: number;
targetHours: number;
label?: string;
description?: string;
showHours?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
label: 'Coverage vs Capacity',
showHours: true
})
label: "Coverage vs Capacity",
showHours: true,
});
const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()
const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage();
const coveragePct = computed(() =>
const coveragePct = computed(() =>
Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
)
);
const status = computed(() => getCoverageStatus(coveragePct.value))
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 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'
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 'Well Funded'
case 'yellow': return 'Moderate'
case 'red': return 'Underfunded'
default: return 'Unknown'
case "green":
return "Well Funded";
case "yellow":
return "Moderate";
case "red":
return "Underfunded";
default:
return "Unknown";
}
})
});
</script>