From 4421d703b6d8871181ec86c0de780b5bcb9d6e87 Mon Sep 17 00:00:00 2001
From: Tanmay Kalra <tanmaykalra0910@gmail.com>
Date: Mon, 25 Aug 2025 23:31:10 +0530
Subject: [PATCH] Improved Ui of elec page

---
 src/Pages/Electricity.jsx | 311 +++++++++++++++++---------------------
 1 file changed, 136 insertions(+), 175 deletions(-)

diff --git a/src/Pages/Electricity.jsx b/src/Pages/Electricity.jsx
index 319efe8..a8d3b9a 100644
--- a/src/Pages/Electricity.jsx
+++ b/src/Pages/Electricity.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Zap, Droplets, Clock, AlertTriangle, CheckCircle, XCircle, Calendar, MapPin, Bell, TrendingUp, TrendingDown, Activity, BarChart3, PieChart } from 'lucide-react';
-import { LineChart, Line, BarChart, Bar, PieChart as RechartsPieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts';
+import { LineChart, Line, BarChart as ReBarChart, Bar, PieChart as RePieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area } from 'recharts';
 
 const UtilitiesDashboard = () => {
   const [currentTime, setCurrentTime] = useState(new Date());
@@ -46,7 +46,7 @@ const UtilitiesDashboard = () => {
       totalOutages: Math.floor(Math.random() * 8),
       uptime: 95 + Math.random() * 5
     }));
-  }, []);
+  }, [areas]);
 
   const outageReasons = [
     { reason: 'Equipment Failure', count: 12, percentage: 35 },
@@ -80,9 +80,9 @@ const UtilitiesDashboard = () => {
   }, [liveUpdates]);
 
   const getStatusColor = (status) => ({
-    active: 'text-green-600 bg-green-100',
-    maintenance: 'text-yellow-600 bg-yellow-100',
-    outage: 'text-red-600 bg-red-100'
+    active: 'text-emerald-700 bg-emerald-100',
+    maintenance: 'text-yellow-700 bg-yellow-100',
+    outage: 'text-red-700 bg-red-100'
   }[status] || 'text-gray-600 bg-gray-100');
 
   const getStatusIcon = (status) => ({
@@ -102,61 +102,64 @@ const UtilitiesDashboard = () => {
   });
 
   const KPICard = ({ title, value, trend, icon, unit = '' }) => (
-    <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300">
-      <div className="flex items-center justify-between mb-4">
-        <div className="w-12 h-12 bg-gradient-to-r from-green-400 to-green-600 rounded-xl flex items-center justify-center">
+    <div className="bg-white/80 dark:bg-emerald-950/90 rounded-2xl p-7 border border-emerald-100/60 dark:border-emerald-800/40 shadow hover:shadow-xl transition">
+      <div className="flex items-center justify-between mb-3">
+        <div className="w-12 h-12 bg-gradient-to-tr from-emerald-500 via-green-400 to-teal-400 rounded-xl flex items-center justify-center">
           {icon}
         </div>
         {trend !== undefined && (
-          <div className={`flex items-center space-x-1 text-sm font-medium px-2 py-1 rounded-full ${
-            trend >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+          <div className={`flex items-center space-x-1 text-xs font-semibold px-2 py-1 rounded-full ${
+            trend >= 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'
           }`}>
             {trend >= 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
             <span>{trend >= 0 ? '+' : ''}{trend.toFixed(1)}%</span>
           </div>
         )}
       </div>
-      <h3 className="text-sm font-medium text-gray-600 mb-2">{title}</h3>
-      <p className="text-2xl font-bold text-gray-900">
+      <h3 className="text-sm font-medium text-emerald-800/80 dark:text-emerald-200 mb-1">{title}</h3>
+      <p className="text-2xl font-bold text-emerald-900 dark:text-emerald-100">
         {typeof value === 'number' ? value.toLocaleString() : value}{unit}
       </p>
     </div>
   );
 
   return (
-    <div className="min-h-screen bg-slate-50">
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50 dark:from-green-950 dark:via-slate-900 dark:to-emerald-950">
       {/* Header */}
-      <div className="bg-white shadow-sm border-b border-gray-200">
+      <header className="bg-white/90 dark:bg-emerald-950/95 shadow border-b border-emerald-100/50 dark:border-emerald-900/30">
         <div className="max-w-7xl mx-auto px-6">
-          <div className="flex justify-between items-center py-6">
+          <div className="flex justify-between items-center py-7">
             <div className="flex items-center space-x-4">
-              <div className="w-8 h-8 bg-green-600 rounded-lg flex items-center justify-center">
-                <span className="text-white font-bold text-sm">C</span>
-              </div>
-              <h1 className="text-2xl font-bold text-gray-900">Civix Utilities</h1>
+              <span className="w-10 h-10 bg-gradient-to-br from-emerald-500 via-green-500 to-teal-500 text-white rounded-lg shadow-md flex items-center justify-center text-xl font-extrabold">
+                C
+              </span>
+              <h1 className="text-2xl font-bold bg-gradient-to-r from-emerald-600 to-teal-500 bg-clip-text text-transparent tracking-tight">Civix Utilities</h1>
             </div>
-            <div className="flex items-center space-x-4 text-sm text-gray-600">
-              <Clock className="w-4 h-4" />
+            <div className="flex items-center gap-3 text-sm text-emerald-700/80 dark:text-emerald-200/90">
+              <Clock className="w-5 h-5" />
               <span>{formatTime(currentTime)} • {formatDate(currentTime)}</span>
             </div>
           </div>
         </div>
-      </div>
+      </header>
 
-      <div className="max-w-7xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-7xl mx-auto px-6 py-10 space-y-10">
         {/* Controls */}
-        <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <div className="flex items-center space-x-4">
-              <h2 className="text-xl font-semibold text-gray-900">Dashboard View</h2>
-              <div className="flex bg-gray-100 rounded-lg p-1">
+        <section className="bg-white/90 dark:bg-emerald-950/95 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow-sm">
+          <div className="flex flex-wrap items-center justify-between gap-6">
+            <div className="flex items-center gap-6">
+              <h2 className="text-xl font-bold text-emerald-900 dark:text-emerald-100">Dashboard View</h2>
+              <div className="flex bg-emerald-100/60 dark:bg-emerald-900/40 rounded-lg p-1 shadow-inner">
                 {['dashboard', 'analytics', 'insights'].map((mode) => (
                   <button
                     key={mode}
                     onClick={() => setViewMode(mode)}
-                    className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
-                      viewMode === mode ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'
-                    }`}>
+                    className={`px-4 py-2 rounded-md text-sm font-bold transition-all duration-150 ${
+                      viewMode === mode
+                        ? 'bg-white/90 dark:bg-emerald-950 text-emerald-800 dark:text-emerald-200 shadow'
+                        : 'text-emerald-600 dark:text-emerald-200 hover:text-emerald-800 dark:hover:text-emerald-100'
+                    }`}
+                  >
                     {mode === 'dashboard' && <Activity className="w-4 h-4 inline mr-2" />}
                     {mode === 'analytics' && <BarChart3 className="w-4 h-4 inline mr-2" />}
                     {mode === 'insights' && <PieChart className="w-4 h-4 inline mr-2" />}
@@ -165,13 +168,12 @@ const UtilitiesDashboard = () => {
                 ))}
               </div>
             </div>
-            
-            <div className="flex items-center space-x-4">
-              <label className="flex items-center space-x-2">
-                <input type="checkbox" checked={liveUpdates} onChange={(e) => setLiveUpdates(e.target.checked)} className="rounded border-gray-300 text-green-600 focus:ring-green-500" />
-                <span className="text-sm text-gray-700">Live Updates</span>
+            <div className="flex items-center gap-5">
+              <label className="flex items-center gap-2">
+                <input type="checkbox" checked={liveUpdates} onChange={(e) => setLiveUpdates(e.target.checked)} className="rounded border-emerald-400 text-emerald-600 focus:ring-emerald-500" />
+                <span className="text-sm text-emerald-800 dark:text-emerald-200 font-medium">Live Updates</span>
               </label>
-              <select value={selectedTimeRange} onChange={(e) => setSelectedTimeRange(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-900 text-sm">
+              <select value={selectedTimeRange} onChange={(e) => setSelectedTimeRange(e.target.value)} className="px-3 py-2 border border-emerald-200 dark:border-emerald-900/40 rounded-md bg-white dark:bg-emerald-950 text-emerald-900 dark:text-white text-sm font-semibold shadow">
                 <option value="1h">Last Hour</option>
                 <option value="24h">Last 24 Hours</option>
                 <option value="7d">Last 7 Days</option>
@@ -179,235 +181,194 @@ const UtilitiesDashboard = () => {
               </select>
             </div>
           </div>
-        </div>
+        </section>
 
         {/* KPI Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           <KPICard title="Electricity Uptime" value={parseFloat(currentStatus.electricity.uptime)} trend={currentStatus.electricity.trend} icon={<Zap className="w-6 h-6 text-white" />} unit="%" />
           <KPICard title="Water Uptime" value={parseFloat(currentStatus.water.uptime)} trend={currentStatus.water.trend} icon={<Droplets className="w-6 h-6 text-white" />} unit="%" />
           <KPICard title="Active Outages" value={filteredOutages.filter(o => isOngoing(o)).length} trend={-15.2} icon={<AlertTriangle className="w-6 h-6 text-white" />} />
           <KPICard title="Avg Response Time" value={45} trend={+8.7} icon={<Clock className="w-6 h-6 text-white" />} unit=" min" />
-        </div>
+        </section>
 
         {/* Charts */}
         {viewMode === 'dashboard' && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Live Consumption (24h)</h3>
+          <section className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+              <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100 mb-4">Live Consumption (24h)</h3>
               <ResponsiveContainer width="100%" height={300}>
                 <LineChart data={consumptionData}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                  <XAxis dataKey="time" stroke="#6b7280" />
-                  <YAxis stroke="#6b7280" />
-                  <Tooltip contentStyle={{ backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '8px' }} />
+                  <CartesianGrid strokeDasharray="3 3" stroke="#d1fae5" />
+                  <XAxis dataKey="time" stroke="#059669" />
+                  <YAxis stroke="#059669" />
+                  <Tooltip contentStyle={{ backgroundColor: '#f0fdfa', borderRadius: 12 }} />
                   <Legend />
-                  <Line type="monotone" dataKey="electricity" stroke="#10b981" strokeWidth={3} dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }} name="Electricity (kW)" />
-                  <Line type="monotone" dataKey="water" stroke="#3b82f6" strokeWidth={3} dot={{ fill: '#3b82f6', strokeWidth: 2, r: 4 }} name="Water (L/min)" />
+                  <Line type="monotone" dataKey="electricity" stroke="#10b981" strokeWidth={3} dot={{ fill: '#10b981', r: 5 }} name="Electricity (kW)" />
+                  <Line type="monotone" dataKey="water" stroke="#3b82f6" strokeWidth={3} dot={{ fill: '#3b82f6', r: 5 }} name="Water (L/min)" />
                 </LineChart>
               </ResponsiveContainer>
             </div>
-
-            <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Outage Frequency by Area</h3>
+            <div className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+              <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100 mb-4">Outage Frequency by Area</h3>
               <ResponsiveContainer width="100%" height={300}>
-                <BarChart data={outageAnalytics}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                  <XAxis dataKey="area" stroke="#6b7280" angle={-45} textAnchor="end" height={80} />
-                  <YAxis stroke="#6b7280" />
-                  <Tooltip contentStyle={{ backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '8px' }} />
+                <ReBarChart data={outageAnalytics}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#d1fae5" />
+                  <XAxis dataKey="area" stroke="#059669" angle={-45} textAnchor="end" height={80} />
+                  <YAxis stroke="#059669" />
+                  <Tooltip contentStyle={{ backgroundColor: '#f0fdfa', borderRadius: 12 }} />
                   <Legend />
                   <Bar dataKey="electricityOutages" fill="#10b981" name="Electricity" />
                   <Bar dataKey="waterOutages" fill="#3b82f6" name="Water" />
-                </BarChart>
+                </ReBarChart>
               </ResponsiveContainer>
             </div>
-          </div>
+          </section>
         )}
 
         {viewMode === 'analytics' && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Outage Reasons Distribution</h3>
+          <section className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+              <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100 mb-4">Outage Reasons Distribution</h3>
               <ResponsiveContainer width="100%" height={300}>
-                <RechartsPieChart>
-                  <Pie data={outageReasons} cx="50%" cy="50%" outerRadius={80} fill="#8884d8" dataKey="percentage" label={({ reason, percentage }) => `${reason}: ${percentage}%`}>
+                <RePieChart>
+                  <Pie data={outageReasons} cx="50%" cy="50%" outerRadius={90} fill="#10b981" dataKey="percentage" label={({ reason, percentage }) => `${reason}: ${percentage}%`}>
                     {outageReasons.map((entry, index) => <Cell key={`cell-${index}`} fill={['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'][index % 6]} />)}
                   </Pie>
-                  <Tooltip />
-                </RechartsPieChart>
+                  <Tooltip contentStyle={{ backgroundColor: '#f0fdfa', borderRadius: 12 }} />
+                </RePieChart>
               </ResponsiveContainer>
             </div>
 
-            <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Uptime Trends by Area</h3>
+            <div className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+              <h3 className="text-lg font-semibold text-emerald-900 dark:text-emerald-100 mb-4">Uptime Trends by Area</h3>
               <ResponsiveContainer width="100%" height={300}>
                 <AreaChart data={outageAnalytics}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                  <XAxis dataKey="area" stroke="#6b7280" angle={-45} textAnchor="end" height={80} />
-                  <YAxis stroke="#6b7280" />
-                  <Tooltip />
-                  <Area type="monotone" dataKey="uptime" stroke="#10b981" fill="#10b981" fillOpacity={0.3} name="Uptime %" />
+                  <CartesianGrid strokeDasharray="3 3" stroke="#d1fae5" />
+                  <XAxis dataKey="area" stroke="#059669" angle={-45} textAnchor="end" height={80} />
+                  <YAxis stroke="#059669" />
+                  <Tooltip contentStyle={{ backgroundColor: '#f0fdfa', borderRadius: 12 }} />
+                  <Area type="monotone" dataKey="uptime" stroke="#10b981" fill="#10b981" fillOpacity={0.25} name="Uptime %" />
                 </AreaChart>
               </ResponsiveContainer>
             </div>
-          </div>
+          </section>
         )}
 
         {viewMode === 'insights' && (
-          <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-            <h3 className="text-xl font-semibold text-gray-900 mb-6">Predictive Insights & Recommendations</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <section className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+            <h3 className="text-xl font-extrabold bg-gradient-to-r from-emerald-700 to-green-500 bg-clip-text text-transparent mb-7 tracking-tight">Predictive Insights & Recommendations</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-7">
               <div>
-                <h4 className="text-lg font-semibold text-blue-600 mb-4">Maintenance Recommendations</h4>
+                <h4 className="text-lg font-bold text-blue-600 mb-4">Maintenance Recommendations</h4>
                 <div className="space-y-3">
-                  <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
-                    <p className="text-sm text-blue-800"><strong>Sector 2:</strong> Schedule transformer maintenance within 2 weeks</p>
-                  </div>
-                  <div className="p-3 bg-yellow-50 rounded-lg border border-yellow-200">
-                    <p className="text-sm text-yellow-800"><strong>DLF Phase 1:</strong> Water pipeline inspection recommended</p>
-                  </div>
+                  <div className="p-3 bg-blue-50 rounded-lg border border-blue-100 text-blue-800">Sector 2: <b>Schedule transformer maintenance within 2 weeks</b></div>
+                  <div className="p-3 bg-yellow-50 rounded-lg border border-yellow-100 text-yellow-800">DLF Phase 1: <b>Water pipeline inspection recommended</b></div>
                 </div>
               </div>
               <div>
-                <h4 className="text-lg font-semibold text-green-600 mb-4">Performance Forecast</h4>
+                <h4 className="text-lg font-bold text-green-600 mb-4">Performance Forecast</h4>
                 <div className="space-y-3">
-                  <div className="p-3 bg-green-50 rounded-lg border border-green-200">
-                    <p className="text-sm text-green-800"><strong>Next Month:</strong> Expected uptime improvement of 1.2%</p>
-                  </div>
-                  <div className="p-3 bg-purple-50 rounded-lg border border-purple-200">
-                    <p className="text-sm text-purple-800"><strong>Peak Hours:</strong> Consumption expected to increase by 12%</p>
-                  </div>
+                  <div className="p-3 bg-green-50 rounded-lg border border-green-100 text-green-800">Next Month: <b>Expected uptime improvement of 1.2%</b></div>
+                  <div className="p-3 bg-purple-50 rounded-lg border border-purple-100 text-purple-800">Peak Hours: <b>Consumption expected to increase by 12%</b></div>
                 </div>
               </div>
             </div>
-          </div>
+          </section>
         )}
 
         {/* Status Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center space-x-3">
-                <div className="p-2 bg-green-100 rounded-lg">
-                  <Zap className="w-6 h-6 text-green-700" />
-                </div>
-                <h2 className="text-lg font-semibold text-gray-900">Electricity</h2>
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-7">
+          <div className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-7 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-3">
+                <span className="p-2 bg-emerald-100 rounded-lg"><Zap className="w-6 h-6 text-emerald-700" /></span>
+                <span className="text-lg font-bold text-emerald-900 dark:text-emerald-100">Electricity</span>
               </div>
-              <div className={`flex items-center space-x-2 px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(currentStatus.electricity.status)}`}>
+              <div className={`flex items-center gap-2 px-3 py-1 rounded-full text-sm font-bold ${getStatusColor(currentStatus.electricity.status)}`}>
                 {getStatusIcon(currentStatus.electricity.status)}
                 <span className="capitalize">{currentStatus.electricity.status}</span>
               </div>
             </div>
-            <div className="space-y-3">
-              <div className="flex justify-between">
-                <span className="text-gray-600">Uptime (30 days)</span>
-                <span className="font-medium text-gray-900">{currentStatus.electricity.uptime}</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Last outage</span>
-                <span className="font-medium text-gray-900">{currentStatus.electricity.lastOutage}</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Affected areas</span>
-                <span className="font-medium text-gray-900">{currentStatus.electricity.affectedAreas}</span>
-              </div>
-            </div>
+            <dl className="mt-2">
+              <div className="flex justify-between py-1"><dt className="text-emerald-800/80 dark:text-emerald-200">Uptime (30d)</dt><dd className="font-bold">{currentStatus.electricity.uptime}</dd></div>
+              <div className="flex justify-between py-1"><dt className="text-emerald-800/80 dark:text-emerald-200">Last Outage</dt><dd className="font-semibold">{currentStatus.electricity.lastOutage}</dd></div>
+              <div className="flex justify-between py-1"><dt className="text-emerald-800/80 dark:text-emerald-200">Affected Areas</dt><dd className="font-semibold">{currentStatus.electricity.affectedAreas}</dd></div>
+            </dl>
           </div>
-
-          <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center space-x-3">
-                <div className="p-2 bg-green-100 rounded-lg">
-                  <Droplets className="w-6 h-6 text-green-700" />
-                </div>
-                <h2 className="text-lg font-semibold text-gray-900">Water Supply</h2>
+          <div className="bg-white/90 dark:bg-emerald-950/90 rounded-2xl p-7 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-3">
+                <span className="p-2 bg-emerald-100 rounded-lg"><Droplets className="w-6 h-6 text-emerald-700" /></span>
+                <span className="text-lg font-bold text-emerald-900 dark:text-emerald-100">Water Supply</span>
               </div>
-              <div className={`flex items-center space-x-2 px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(currentStatus.water.status)}`}>
+              <div className={`flex items-center gap-2 px-3 py-1 rounded-full text-sm font-bold ${getStatusColor(currentStatus.water.status)}`}>
                 {getStatusIcon(currentStatus.water.status)}
                 <span className="capitalize">{currentStatus.water.status}</span>
               </div>
             </div>
-            <div className="space-y-3">
-              <div className="flex justify-between">
-                <span className="text-gray-600">Uptime (30 days)</span>
-                <span className="font-medium text-gray-900">{currentStatus.water.uptime}</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Last outage</span>
-                <span className="font-medium text-gray-900">{currentStatus.water.lastOutage}</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-gray-600">Affected areas</span>
-                <span className="font-medium text-orange-600">{currentStatus.water.affectedAreas}</span>
-              </div>
-            </div>
+            <dl className="mt-2">
+              <div className="flex justify-between py-1"><dt className="text-emerald-800/80 dark:text-emerald-200">Uptime (30d)</dt><dd className="font-bold">{currentStatus.water.uptime}</dd></div>
+              <div className="flex justify-between py-1"><dt className="text-emerald-800/80 dark:text-emerald-200">Last Outage</dt><dd className="font-semibold">{currentStatus.water.lastOutage}</dd></div>
+              <div className="flex justify-between py-1"><dt className="text-emerald-800/80 dark:text-emerald-200">Affected Areas</dt><dd className="font-bold text-orange-600">{currentStatus.water.affectedAreas}</dd></div>
+            </dl>
           </div>
-        </div>
+        </section>
 
-        {/* Filters */}
-        <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">Filter Outages</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Outage Filters */}
+        <section className="bg-white/90 dark:bg-emerald-950/95 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
+          <h3 className="text-lg font-bold text-emerald-800 dark:text-emerald-100 mb-4">Filter Outages</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Utility Type</label>
-              <select value={selectedUtility} onChange={(e) => setSelectedUtility(e.target.value)} className="w-full p-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 bg-white text-gray-900">
+              <label className="block text-sm font-medium text-emerald-800 dark:text-emerald-200 mb-2">Utility Type</label>
+              <select value={selectedUtility} onChange={e => setSelectedUtility(e.target.value)} className="w-full p-3 border border-emerald-100/60 dark:border-emerald-800/30 rounded-lg bg-white dark:bg-emerald-950 text-emerald-900 dark:text-white font-semibold focus:ring-emerald-400">
                 <option value="both">Both Utilities</option>
                 <option value="electricity">Electricity Only</option>
                 <option value="water">Water Only</option>
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Area</label>
-              <select value={selectedArea} onChange={(e) => setSelectedArea(e.target.value)} className="w-full p-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 bg-white text-gray-900">
+              <label className="block text-sm font-medium text-emerald-800 dark:text-emerald-200 mb-2">Area</label>
+              <select value={selectedArea} onChange={e => setSelectedArea(e.target.value)} className="w-full p-3 border border-emerald-100/60 dark:border-emerald-800/30 rounded-lg bg-white dark:bg-emerald-950 text-emerald-900 dark:text-white font-semibold focus:ring-emerald-400">
                 <option value="all">All Areas</option>
                 {areas.map(area => <option key={area.id} value={area.name.toLowerCase()}>{area.name}</option>)}
               </select>
             </div>
           </div>
-        </div>
+        </section>
 
         {/* Scheduled Outages */}
-        <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
+        <section className="bg-white/90 dark:bg-emerald-950/95 rounded-2xl p-6 border border-emerald-100/60 dark:border-emerald-800/40 shadow">
           <div className="flex items-center justify-between mb-6">
-            <h3 className="text-lg font-semibold text-gray-900">Scheduled Outages</h3>
-            <Bell className="w-5 h-5 text-gray-400" />
+            <h3 className="text-lg font-bold text-emerald-800 dark:text-emerald-100">Scheduled Outages</h3>
+            <Bell className="w-5 h-5 text-emerald-400" />
           </div>
           <div className="space-y-4">
             {filteredOutages.map((outage) => (
-              <div key={outage.id} className={`border rounded-lg p-4 ${isOngoing(outage) ? 'border-orange-200 bg-orange-50' : 'border-gray-200'}`}>
-                <div className="flex items-start space-x-4">
-                  <div className="p-2 bg-gray-100 rounded-lg">
-                    {outage.type === 'electricity' ? <Zap className="w-5 h-5 text-gray-700" /> : <Droplets className="w-5 h-5 text-gray-700" />}
+              <div key={outage.id} className={`border rounded-lg p-4 ${isOngoing(outage) ? 'border-orange-200 bg-orange-50' : 'border-emerald-100 dark:border-emerald-800/30'}`}>
+                <div className="flex items-start gap-4">
+                  <div className="p-2 bg-emerald-100 rounded-lg shadow">
+                    {outage.type === 'electricity' ? <Zap className="w-5 h-5 text-emerald-600" /> : <Droplets className="w-5 h-5 text-blue-600" />}
                   </div>
                   <div className="flex-1">
-                    <div className="flex items-center space-x-2 mb-1">
-                      <h4 className="font-medium text-gray-900 capitalize">{outage.type}</h4>
-                      {isOngoing(outage) && <span className="px-2 py-1 text-xs font-medium text-orange-700 bg-orange-100 rounded-full">ONGOING</span>}
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="font-semibold text-emerald-800 dark:text-emerald-100 capitalize">{outage.type}</span>
+                      {isOngoing(outage) && <span className="px-2 py-1 text-xs font-medium text-orange-700 bg-orange-100 rounded-full animate-pulse">ONGOING</span>}
                     </div>
-                    <div className="flex items-center space-x-4 text-sm text-gray-600 mb-2">
-                      <div className="flex items-center space-x-1">
-                        <MapPin className="w-4 h-4" />
-                        <span>{outage.area}</span>
-                      </div>
-                      <div className="flex items-center space-x-1">
-                        <Calendar className="w-4 h-4" />
-                        <span>{formatDate(outage.startTime)}</span>
-                      </div>
-                      <div className="flex items-center space-x-1">
-                        <Clock className="w-4 h-4" />
-                        <span>{formatTime(outage.startTime)} - {formatTime(outage.endTime)}</span>
-                      </div>
+                    <div className="flex items-center gap-5 text-sm text-gray-600 mb-2">
+                      <span className="flex items-center gap-1"><MapPin className="w-4 h-4" />{outage.area}</span>
+                      <span className="flex items-center gap-1"><Calendar className="w-4 h-4" />{formatDate(outage.startTime)}</span>
+                      <span className="flex items-center gap-1"><Clock className="w-4 h-4" />{formatTime(outage.startTime)} - {formatTime(outage.endTime)}</span>
                     </div>
-                    <p className="text-sm text-gray-700">{outage.reason}</p>
+                    <p className="text-sm text-emerald-900 dark:text-emerald-200">{outage.reason}</p>
                   </div>
                 </div>
               </div>
             ))}
           </div>
-        </div>
-      </div>
+        </section>
+      </main>
     </div>
   );
 };
 
-export default UtilitiesDashboard;
\ No newline at end of file
+export default UtilitiesDashboard;