From fda40de155c0564a76ea30626b097025b5577758 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 1 Jul 2025 19:57:51 +0700
Subject: [PATCH] Update Schedule and Maintenace Overview Card Liner-Gradient

---
 .../ScheduledMaintenanceTab.tsx               | 153 ++++++++++--------
 1 file changed, 87 insertions(+), 66 deletions(-)

diff --git a/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx b/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx
index da82c1a..06b6004 100644
--- a/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx
+++ b/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx
@@ -1,16 +1,13 @@
-
 import React, { useEffect } from 'react';
 import { useLanguage } from '@/contexts/LanguageContext';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { MaintenanceTable, MaintenanceStatusChecker } from './maintenance';
-import { EmptyMaintenanceState } from './maintenance/EmptyMaintenanceState';
-import { OverviewCard } from './common/OverviewCard';
+import { LoadingState } from '@/components/services/LoadingState';
 import { Calendar, Clock, CheckCircle } from 'lucide-react';
 import { useMaintenanceData } from './hooks/useMaintenanceData';
-import { Skeleton } from '@/components/ui/skeleton';
 import { useToast } from '@/hooks/use-toast';
-import { LoadingState } from '@/components/services/LoadingState';
+import { useTheme } from '@/contexts/ThemeContext';
 
 interface ScheduledMaintenanceTabProps {
   refreshTrigger?: number;
@@ -18,25 +15,24 @@ interface ScheduledMaintenanceTabProps {
 
 export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMaintenanceTabProps) => {
   const { t } = useLanguage();
+  const { theme } = useTheme();
   const { toast } = useToast();
   const [manualRefresh, setManualRefresh] = React.useState(0);
-  
-  // Combine the external refresh trigger with our internal one
+
   const combinedRefreshTrigger = refreshTrigger + manualRefresh;
-  
-  const { 
-    loading, 
-    filter, 
-    setFilter, 
-    maintenanceData, 
-    overviewStats, 
+
+  const {
+    loading,
+    filter,
+    setFilter,
+    maintenanceData,
+    overviewStats,
     fetchMaintenanceData,
     isEmpty,
     error,
-    initialized
+    initialized,
   } = useMaintenanceData({ refreshTrigger: combinedRefreshTrigger });
 
-  // Display toast when error occurs
   useEffect(() => {
     if (error) {
       toast({
@@ -47,66 +43,91 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
     }
   }, [error, toast, t]);
 
-  // Force fetch data on initial load
   useEffect(() => {
-    console.log("ScheduledMaintenanceTab is mounted, fetching data");
     fetchMaintenanceData(true);
   }, [fetchMaintenanceData]);
 
-  // Handle maintenance updates
   const handleMaintenanceUpdated = () => {
-    console.log("Maintenance updated, refreshing data");
-    setManualRefresh(prev => prev + 1);
+    setManualRefresh((prev) => prev + 1);
   };
 
-  // Handle tab changes
   const handleTabChange = (value: string) => {
     setFilter(value);
   };
 
-  // Show full-page loading state during initial load
   if (loading && !initialized) {
     return <LoadingState />;
   }
 
+  const gradientCard = (
+    title: string,
+    value: string | number,
+    icon: JSX.Element,
+    gradient: string
+  ) => (
+    <Card
+      className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
+      style={{
+        background: theme === 'dark'
+          ? `linear-gradient(135deg, rgba(65,59,55,0.8) 0%, ${gradient})`
+          : `linear-gradient(135deg, rgba(65,59,55,0.8) 0%, ${gradient})`,
+      }}
+    >
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div
+          className="w-full h-full"
+          style={{
+            backgroundImage: `linear-gradient(#000 1px, transparent 1px),
+                              linear-gradient(90deg, #fff 1px, transparent 1px)`,
+            backgroundSize: '20px 20px',
+          }}
+        />
+      </div>
+      <CardHeader className="pb-2 relative z-10">
+        <CardTitle className="text-sm font-medium text-white">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex items-center justify-between relative z-10">
+        <span className="text-4xl font-bold text-white">{value}</span>
+        <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+          {icon}
+        </div>
+      </CardContent>
+    </Card>
+  );
+
   return (
     <>
-      {/* Status checker for automatic updates */}
-      <MaintenanceStatusChecker 
+      <MaintenanceStatusChecker
         maintenanceData={maintenanceData}
         onStatusUpdated={handleMaintenanceUpdated}
       />
 
       {/* Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <OverviewCard
-          title={t('upcomingMaintenance')}
-          value={loading ? '...' : overviewStats.upcoming}
-          icon={<Calendar className="h-5 w-5 text-white" />}
-          isLoading={loading}
-          color="blue"
-        />
-        <OverviewCard
-          title={t('ongoingMaintenance')}
-          value={loading ? '...' : overviewStats.ongoing}
-          icon={<Clock className="h-5 w-5 text-white" />}
-          isLoading={loading}
-          color="amber"
-        />
-        <OverviewCard
-          title={t('completedMaintenance')}
-          value={loading ? '...' : overviewStats.completed}
-          icon={<CheckCircle className="h-5 w-5 text-white" />}
-          isLoading={loading}
-          color="green"
-        />
-        <OverviewCard
-          title={t('totalScheduledHours')}
-          value={loading ? '...' : `${overviewStats.totalDuration}h`}
-          icon={<Clock className="h-5 w-5 text-white" />}
-          isLoading={loading}
-          color="purple"
-        />
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8 w-full">
+        {gradientCard(
+          t('upcomingMaintenance'),
+          loading ? '...' : overviewStats.upcoming,
+          <Calendar className="h-6 w-6 text-white" />,
+          'rgba(59,130,246,0.6)'
+        )}
+        {gradientCard(
+          t('ongoingMaintenance'),
+          loading ? '...' : overviewStats.ongoing,
+          <Clock className="h-6 w-6 text-white" />,
+          'rgba(251,191,36,0.6)'
+        )}
+        {gradientCard(
+          t('completedMaintenance'),
+          loading ? '...' : overviewStats.completed,
+          <CheckCircle className="h-6 w-6 text-white" />,
+          'rgba(34,197,94,0.6)'
+        )}
+        {gradientCard(
+          t('totalScheduledHours'),
+          loading ? '...' : `${overviewStats.totalDuration}h`,
+          <Clock className="h-6 w-6 text-white" />,
+          'rgba(139,92,246,0.6)'
+        )}
       </div>
 
       <Card>
@@ -117,10 +138,10 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Tabs 
-            defaultValue="upcoming" 
-            value={filter} 
-            className="w-full" 
+          <Tabs
+            defaultValue="upcoming"
+            value={filter}
+            className="w-full"
             onValueChange={handleTabChange}
           >
             <TabsList className="mb-6">
@@ -129,24 +150,24 @@ export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMainten
               <TabsTrigger value="completed">{t('completedMaintenance')}</TabsTrigger>
             </TabsList>
 
-            <TabsContent value="upcoming" className="space-y-4">
-              <MaintenanceTable 
+            <TabsContent value="upcoming">
+              <MaintenanceTable
                 data={maintenanceData}
                 isLoading={loading && initialized}
                 onMaintenanceUpdated={handleMaintenanceUpdated}
               />
             </TabsContent>
-            
-            <TabsContent value="ongoing" className="space-y-4">
-              <MaintenanceTable 
+
+            <TabsContent value="ongoing">
+              <MaintenanceTable
                 data={maintenanceData}
                 isLoading={loading && initialized}
                 onMaintenanceUpdated={handleMaintenanceUpdated}
               />
             </TabsContent>
-            
-            <TabsContent value="completed" className="space-y-4">
-              <MaintenanceTable 
+
+            <TabsContent value="completed">
+              <MaintenanceTable
                 data={maintenanceData}
                 isLoading={loading && initialized}
                 onMaintenanceUpdated={handleMaintenanceUpdated}