Tola Leng
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
|
import {
|
|
AlertCircle,
|
|
CheckCircle,
|
|
Gauge,
|
|
Search,
|
|
Wrench,
|
|
LucideIcon
|
|
} from 'lucide-react';
|
|
|
|
interface IncidentStatusBadgeProps {
|
|
status: string;
|
|
}
|
|
|
|
type StatusConfig = {
|
|
label: string;
|
|
variant: 'outline' | 'default' | 'secondary' | 'destructive';
|
|
icon: LucideIcon;
|
|
className?: string;
|
|
}
|
|
|
|
export const IncidentStatusBadge = ({ status }: IncidentStatusBadgeProps) => {
|
|
const { t } = useLanguage();
|
|
|
|
// Normalize the status string
|
|
const normalizedStatus = (status || '').toLowerCase();
|
|
|
|
// Status configuration map
|
|
const statusConfigs: Record<string, StatusConfig> = {
|
|
'investigating': {
|
|
label: t('investigating'),
|
|
variant: 'destructive',
|
|
icon: Search,
|
|
className: 'bg-red-100 border-red-200 text-red-700 hover:bg-red-100',
|
|
},
|
|
'identified': {
|
|
label: t('identified'),
|
|
variant: 'secondary',
|
|
icon: AlertCircle,
|
|
className: 'bg-amber-100 border-amber-200 text-amber-700 hover:bg-amber-100',
|
|
},
|
|
'found_root_cause': {
|
|
label: t('rootCauseFound'),
|
|
variant: 'secondary',
|
|
icon: AlertCircle,
|
|
className: 'bg-amber-100 border-amber-200 text-amber-700 hover:bg-amber-100',
|
|
},
|
|
'completed': {
|
|
label: t('completed'),
|
|
variant: 'default',
|
|
icon: CheckCircle,
|
|
className: 'bg-green-100 border-green-200 text-green-700 hover:bg-green-100',
|
|
},
|
|
'in_progress': {
|
|
label: t('inProgress'),
|
|
variant: 'default',
|
|
icon: Wrench,
|
|
className: 'bg-blue-100 border-blue-200 text-blue-700 hover:bg-blue-100',
|
|
},
|
|
'inprogress': {
|
|
label: t('inProgress'),
|
|
variant: 'default',
|
|
icon: Wrench,
|
|
className: 'bg-blue-100 border-blue-200 text-blue-700 hover:bg-blue-100',
|
|
},
|
|
'monitoring': {
|
|
label: t('monitoring'),
|
|
variant: 'outline',
|
|
icon: Gauge,
|
|
className: 'bg-purple-100 border-purple-200 text-purple-700 hover:bg-purple-100',
|
|
},
|
|
'resolved': {
|
|
label: t('resolved'),
|
|
variant: 'default',
|
|
icon: CheckCircle,
|
|
className: 'bg-green-100 border-green-200 text-green-700 hover:bg-green-100',
|
|
}
|
|
};
|
|
|
|
// Find the appropriate config, defaulting to investigating if not found
|
|
const getStatusConfig = (): StatusConfig => {
|
|
for (const [key, config] of Object.entries(statusConfigs)) {
|
|
if (normalizedStatus.includes(key)) {
|
|
return config;
|
|
}
|
|
}
|
|
return statusConfigs['investigating'];
|
|
};
|
|
|
|
const config = getStatusConfig();
|
|
const Icon = config.icon;
|
|
|
|
return (
|
|
<Badge
|
|
variant={config.variant}
|
|
className={`flex items-center gap-1 ${config.className}`}
|
|
>
|
|
<Icon className="h-3 w-3" />
|
|
<span>{config.label}</span>
|
|
</Badge>
|
|
);
|
|
};
|