Feat/dashboard dynamic status cards

[ayushhh101]

Description

This PR transforms the dashboard status cards from static hardcoded displays to dynamic, real-time components that reflect actual system state. The cards now properly read from the global application state and update automatically when socket data is received.
🔧 Key Changes

Dashboard.jsx:

• Removed all hardcoded value, subtitle, and color props from StatusCard components
• Cards now receive only title and icon props, deriving data from state

StatusCard.jsx:

• Enhanced component to read appropriate state values based on card title
• Added support for Energy Usage card (state.energyConsumption)
• Implemented dynamic color coding with proper warning thresholds
• Added visual battery progress bar with animated fill Fixed prop mutation anti-pattern by deriving local values
• Enhanced keyboard accessibility with Enter/Space support
• Added warning indicators for critical/warning states EnergyCharts.jsx:
• Fixed JSX syntax errors and malformed structure
• Cleaned up duplicate elements that were causing parse errors

Technical Improvements

• State Integration: All cards read from [useApp()] context
• Dynamic Thresholds: Proper color coding based on actual values
• Performance: Efficient re-renders only when relevant state changes
• Code Quality: Eliminated prop mutation and improved component structure

Semver Changes

• Patch (bug fix, no new features)
• Minor (new features, no breaking changes)
• Major (breaking changes)

Issues

Closes #21 - Dashboard status cards display static values instead of real-time data

Checklist

• I have read the Contributing Guidelines.

[rajshekharbind]

Resolved branch conflicts and ensured compatibility with the current codebase.

[rajshekharbind]

This has already been done for the issues.