Updated Incident Management Overview Cards linear-gradient

application/src/components/schedule-incident/common/OverviewCard.tsx

@@ -18,6 +18,7 @@ interface OverviewCardProps {
   valueClassName?: string;
   isLoading?: boolean;
   color?: string;
+  gradient?: string;
 }
 
 export const OverviewCard = ({
@@ -30,11 +31,15 @@ export const OverviewCard = ({
   valueClassName,
   isLoading = false,
   color = "blue",
+  gradient,
 }: OverviewCardProps) => {
   const { theme } = useTheme();
   
   // Map color prop to gradient colors
   const getGradientBackground = () => {
+    if (gradient) {
+      return gradient;
+    }
     const colors = {
       blue: theme === 'dark'
         ? "linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"

application/src/components/schedule-incident/incident-management/OverviewCards.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { AlertCircle, CheckCircle, Clock, AlertTriangle, Flag } from 'lucide-react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { OverviewCard } from '../common/OverviewCard';
+import { useTheme } from '@/contexts/ThemeContext';
 
 interface OverviewStatsProps {
   unresolved: number;
@@ -24,6 +25,7 @@ export const OverviewCards: React.FC<OverviewCardsProps> = ({
   initialized 
 }) => {
   const { t } = useLanguage();
+  const { theme } = useTheme();
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
@@ -32,35 +34,55 @@ export const OverviewCards: React.FC<OverviewCardsProps> = ({
         value={overviewStats.unresolved.toString()}
         icon={<AlertCircle className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="red"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(239, 83, 80, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(239, 83, 80, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('criticalIssues')}
         value={overviewStats.critical.toString()}
         icon={<AlertTriangle className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="amber"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(255, 183, 77, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(255, 183, 77, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('highPriority')}
         value={overviewStats.highPriority.toString()}
         icon={<Flag className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="orange" 
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(255, 109, 0, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(255, 109, 0, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('resolvedIncidents')}
         value={overviewStats.resolved.toString()}
         icon={<CheckCircle className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="green"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(102, 187, 106, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(102, 187, 106, 0.6) 100%)"
+        }
       />
       <OverviewCard
         title={t('avgResolutionTime')}
         value={overviewStats.avgResolutionTime}
         icon={<Clock className="h-5 w-5 text-white" />}
         isLoading={loading && initialized}
-        color="blue"
+        gradient={
+          theme === "dark"
+            ? "linear-gradient(135deg, #4b3b37 0%, rgba(66, 165, 245, 0.6) 100%)"
+            : "linear-gradient(135deg, #4b3b37 0%, rgba(66, 165, 245, 0.6) 100%)"
+        }
       />
     </div>
   );