37 lines
No EOL
1.2 KiB
Vue
37 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<div class="hidden" data-ui="needs_coverage_card_v1" />
|
|
<UCard class="min-h-[140px] shadow-sm rounded-xl">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-user-group" class="h-5 w-5" />
|
|
<h3 class="font-semibold">Members covered</h3>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="text-center space-y-6">
|
|
<div class="text-2xl font-semibold" :class="statusColor">
|
|
{{ pctCovered }}%
|
|
</div>
|
|
<div class="text-sm text-gray-600">
|
|
Median {{ median }}%
|
|
</div>
|
|
<div v-if="stats.under100 > 0" class="flex items-center justify-center gap-1 text-xs text-amber-600 mt-3">
|
|
<span>⚠</span>
|
|
<span>{{ stats.under100 }} under 100%</span>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { members, teamCoverageStats } = useCoopBuilder()
|
|
const stats = computed(() => teamCoverageStats())
|
|
const pctCovered = computed(() => Math.round(stats.value.over100Pct || 0))
|
|
const median = computed(() => Math.round(stats.value.median ?? 0))
|
|
|
|
const statusColor = computed(() => {
|
|
if (pctCovered.value >= 100) return 'text-green-600'
|
|
if (pctCovered.value >= 80) return 'text-amber-600'
|
|
return 'text-red-600'
|
|
})
|
|
</script> |