101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<template>
|
|
<UCard>
|
|
<div class="text-center space-y-3">
|
|
<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"
|
|
class="mt-2"
|
|
:ui="{ progress: { background: 'bg-gray-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"
|
|
>
|
|
{{ statusText }}
|
|
</UBadge>
|
|
<div v-if="showHours" class="text-xs text-gray-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">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
fundedPaidHours: number
|
|
targetHours: number
|
|
label?: string
|
|
description?: string
|
|
showHours?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
label: 'Coverage vs Capacity',
|
|
showHours: true
|
|
})
|
|
|
|
const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()
|
|
|
|
const coveragePct = computed(() =>
|
|
Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
|
|
)
|
|
|
|
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 progressColor = computed(() => {
|
|
switch (status.value) {
|
|
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'
|
|
}
|
|
})
|
|
|
|
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'
|
|
}
|
|
})
|
|
|
|
const statusText = computed(() => {
|
|
switch (status.value) {
|
|
case 'green': return 'Well Funded'
|
|
case 'yellow': return 'Moderate'
|
|
case 'red': return 'Underfunded'
|
|
default: return 'Unknown'
|
|
}
|
|
})
|
|
</script>
|