From ae7dc184bdf6a50051e06327e23cc10e0b8238b9 Mon Sep 17 00:00:00 2001
From: Ayush Sawant <157198608+ayushhh101@users.noreply.github.com>
Date: Tue, 14 Oct 2025 15:59:27 +0530
Subject: [PATCH 1/2] feat(a11y): add ARIA labels to navigation and polite
 announcements to notifications

---
 src/components/Navigation.jsx       | 3 +++
 src/components/NotificationList.jsx | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 646357e..05f5e3b 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -30,6 +30,7 @@ const Navigation = () => {
         <button
           onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
           className="p-2 bg-white rounded-lg shadow-lg"
+          aria-label="Open menu"
         >
           <div className="w-6 h-6 flex flex-col justify-center space-y-1">
             <div className="w-full h-0.5 bg-gray-600"></div>
@@ -48,6 +49,8 @@ const Navigation = () => {
             exit={{ x: -320 }}
             transition={{ type: 'spring', damping: 30, stiffness: 300 }}
             className="fixed left-0 top-0 h-full w-64 bg-white shadow-xl z-40 lg:z-auto"
+            role="navigation"
+            aria-label="Primary"
           >
             <div className="p-6 border-b border-gray-200">
               <div className="flex items-center space-x-3">
diff --git a/src/components/NotificationList.jsx b/src/components/NotificationList.jsx
index 2baad29..3676e9b 100644
--- a/src/components/NotificationList.jsx
+++ b/src/components/NotificationList.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion as Motion } from 'framer-motion';
 import { useNotification } from '../context/NotificationContext';
 import { formatTime, formatDate } from '../utils/format';
 
@@ -40,10 +40,10 @@ const NotificationList = () => {
         )}
       </div>
 
-      <div className="space-y-3 max-h-96 overflow-y-auto">
+      <div className="space-y-3 max-h-96 overflow-y-auto" aria-live="polite">
         <AnimatePresence>
           {notifications.map((notification, index) => (
-            <motion.div
+            <Motion.div
               key={notification.id}
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
@@ -72,7 +72,7 @@ const NotificationList = () => {
                   ✕
                 </button>
               </div>
-            </motion.div>
+            </Motion.div>
           ))}
         </AnimatePresence>
 

From d5c24fc55a751cce6414abf5595ced7916fb4c05 Mon Sep 17 00:00:00 2001
From: Ayush Sawant <157198608+ayushhh101@users.noreply.github.com>
Date: Wed, 15 Oct 2025 23:10:28 +0530
Subject: [PATCH 2/2] feat(dashboard): connect status cards to real-time state
 data

---
 src/components/EnergyCharts.jsx | 15 ---------------
 src/components/StatusCard.jsx   | 22 ++++++++++++++++++++--
 src/pages/Dashboard.jsx         | 11 ++++-------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/EnergyCharts.jsx b/src/components/EnergyCharts.jsx
index aafd3a7..83d9238 100644
--- a/src/components/EnergyCharts.jsx
+++ b/src/components/EnergyCharts.jsx
@@ -50,21 +50,6 @@ const EnergyCharts = () => {
   return (
     <div className="space-y-4 sm:space-y-6">
       {/* Real-time Energy Consumption */}
-      <div className="chart-container p-6">
-        <h3 className="text-xl font-bold text-gray-800 mb-4">Real-time Energy Overview</h3>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
-          <div className="bg-blue-50 p-4 rounded-lg stat-card">
-            <p className="text-sm text-blue-600">Current Consumption</p>
-            <p className="text-2xl font-bold text-blue-800">{state.energyConsumption} W</p>
-          </div>
-          <div className="bg-green-50 p-4 rounded-lg stat-card">
-            <p className="text-sm text-green-600">Battery Level</p>
-            <p className="text-2xl font-bold text-green-800">{state.batteryLevel}%</p>
-          </div>
-          <div className="bg-orange-50 p-4 rounded-lg stat-card">
-            <p className="text-sm text-orange-600">Temperature</p>
-            <p className="text-2xl font-bold text-orange-800">{state.temperature}°C</p>
-          </div>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
diff --git a/src/components/StatusCard.jsx b/src/components/StatusCard.jsx
index 686ff89..a96dadf 100644
--- a/src/components/StatusCard.jsx
+++ b/src/components/StatusCard.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { useApp } from '../context/AppContext';
 
-const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
+const StatusCard = ({ title, value: propValue, subtitle: propSubtitle, icon, color: propColor, onClick }) => {
   const { state } = useApp();
 
   const getStatusColor = () => {
@@ -38,6 +38,11 @@ const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
 
   const warningLevel = getWarningLevel();
 
+  // Build derived values without mutating props
+  let value = propValue;
+  let subtitle = propSubtitle;
+  let color = propColor || 'status-offline';
+
   if (title === 'Inverter Status') {
     value = `${getStatusIcon()} ${state.inverterStatus.toUpperCase()}`;
     color = getStatusColor();
@@ -77,11 +82,24 @@ const StatusCard = ({ title, value, subtitle, icon, color, onClick }) => {
     }
   }
 
+  if (title === 'Energy Usage') {
+    value = `${state.energyConsumption}W`;
+    if (state.energyConsumption > 500) {
+      subtitle = 'High consumption';
+      color = 'status-warning-battery';
+    } else if (state.energyConsumption > 300) {
+      subtitle = 'Moderate consumption';
+      color = 'status-standby';
+    } else {
+      subtitle = 'Low consumption';
+      color = 'status-online';
+    }
+  }
+
   return (
     <motion.div
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
-      className={`rounded-xl p-6 text-white shadow-lg cursor-pointer transition-all duration-300 ${color} status-card`}
       className={`rounded-xl p-4 sm:p-6 text-white shadow-lg cursor-pointer transition-all duration-300 interactive ${color}`}
       onClick={onClick}
       role="button"
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 30c4990..9858063 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -65,10 +65,10 @@ const Dashboard = () => {
         role="region"
         aria-label="System status cards"
       >
-        <StatusCard title="Inverter Status" value="Online" subtitle="All systems normal" icon="🔌" color="status-online" />
-        <StatusCard title="Power Supply" value="Grid Active" subtitle="Stable power supply" icon="⚡" color="status-online" />
-        <StatusCard title="Battery Level" value="75%" subtitle="Adequate charge" icon="🔋" color="status-online" />
-        <StatusCard title="Temperature" value="45°C" subtitle="Normal temperature" icon="🌡️" color="status-online" />
+        <StatusCard title="Inverter Status" icon="🔌" />
+        <StatusCard title="Power Supply" icon="⚡" />
+        <StatusCard title="Battery Level" icon="🔋" />
+        <StatusCard title="Temperature" icon="🌡️" />
       </motion.div>
 
       {/* Energy Usage Card - Separate row for better mobile layout */}
@@ -82,10 +82,7 @@ const Dashboard = () => {
       >
         <StatusCard 
           title="Energy Usage" 
-          value="320W" 
-          subtitle="Moderate consumption" 
           icon="📊" 
-          color="status-standby" 
         />
       </motion.div>