34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { Badge } from '@/components/ui/badge';
|
|
import { SlaBucket, SlaStatusSnapshot } from '@/services/sla.service';
|
|
|
|
const BUCKET_CLASS: Record<SlaBucket, string> = {
|
|
healthy: 'bg-emerald-100 text-emerald-800 border-emerald-200',
|
|
warning: 'bg-red-50 text-red-800 border-red-200',
|
|
critical: 'bg-orange-100 text-orange-800 border-orange-200',
|
|
breached: 'bg-red-100 text-red-800 border-red-200'
|
|
};
|
|
|
|
const BUCKET_LABEL: Record<SlaBucket, string> = {
|
|
healthy: 'On track',
|
|
warning: 'Due soon',
|
|
critical: 'At risk',
|
|
breached: 'Breached'
|
|
};
|
|
|
|
export function SlaBadge({ status, compact }: { status: SlaStatusSnapshot | null | undefined; compact?: boolean }) {
|
|
if (!status) return null;
|
|
|
|
const bucket = status.isPaused ? 'warning' : status.bucket;
|
|
const label = status.isPaused ? 'Paused' : BUCKET_LABEL[status.bucket];
|
|
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className={`text-[10px] font-semibold ${BUCKET_CLASS[bucket]} ${compact ? 'px-1.5' : ''}`}
|
|
title={`${status.stageName} · ${status.remainingLabel} (${status.percentUsed}% of TAT)`}
|
|
>
|
|
{compact ? label : `${label} · ${status.remainingLabel}`}
|
|
</Badge>
|
|
);
|
|
}
|