Feat/dashboard dynamic status cards

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 }}

src/components/Navigation.jsx

@@ -81,6 +81,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">

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';
 
@@ -41,10 +41,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 }}
@@ -74,7 +74,7 @@ const NotificationList = () => {
                   ✕
                 </button>
               </div>
-            </motion.div>
+            </Motion.div>
           ))}
         </AnimatePresence>
 

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"

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>