54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<template>
|
|
<UTooltip :text="tooltipText">
|
|
<UBadge :color="badgeColor" variant="solid" size="sm" class="font-medium">
|
|
<UIcon :name="iconName" class="w-3 h-3 mr-1" />
|
|
{{ displayText }}
|
|
</UBadge>
|
|
</UTooltip>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
coveragePct?: number;
|
|
memberName?: string;
|
|
warnIfUnder?: number;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
warnIfUnder: 100,
|
|
memberName: "member",
|
|
});
|
|
|
|
const coverage = computed(() => props.coveragePct || 0);
|
|
|
|
const badgeColor = computed(() => {
|
|
if (!props.coveragePct) return "neutral";
|
|
if (coverage.value >= 100) return "success";
|
|
if (coverage.value >= 80) return "warning";
|
|
return "error";
|
|
});
|
|
|
|
const iconName = computed(() => {
|
|
if (!props.coveragePct) return "i-heroicons-cog-6-tooth";
|
|
if (coverage.value >= 100) return "i-heroicons-check-circle";
|
|
if (coverage.value >= 80) return "i-heroicons-exclamation-triangle";
|
|
return "i-heroicons-x-circle";
|
|
});
|
|
|
|
const displayText = computed(() => {
|
|
if (!props.coveragePct) return "Set needs";
|
|
if (coverage.value === 0) return "No coverage";
|
|
return `${Math.round(coverage.value)}% covered`;
|
|
});
|
|
|
|
const tooltipText = computed(() => {
|
|
if (!props.coveragePct) {
|
|
return `Click 'Set minimum needs' to enable coverage tracking for ${props.memberName}`;
|
|
}
|
|
|
|
const percent = Math.round(coverage.value);
|
|
const status = coverage.value >= 100 ? "meets" : "covers";
|
|
|
|
return `Co-op pay ${status} ${percent}% of ${props.memberName}'s minimum needs`;
|
|
});
|
|
</script>
|