feat: Implement Incident Management and Tab Dashboard

2025-05-23 20:37:00 +08:00
parent 395a580032
commit 747ae5c23f
69 changed files with 4457 additions and 0 deletions
@@ -0,0 +1,105 @@
+
+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>
+  );
+};