diff --git a/README.md b/README.md
index 84c4ae8..6b948cf 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,17 @@ invertorguard/
```
+
+# Run frontend
+```
+npm run dev
+```
+
+# Run backend
+```
+npm start
+```
+
1. Adding Features or Components
What to contribute
diff --git a/package.json b/package.json
index 22498c9..6a78b25 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
+ "start":"node server/mock-socket-server.js",
"lint": "eslint .",
"preview": "vite preview",
"prepare": "husky",
diff --git a/src/App.jsx b/src/App.jsx
index 1756e1d..fc14d96 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -54,35 +54,6 @@ function App() {
-
diff --git a/src/components/EnergyCharts.jsx b/src/components/EnergyCharts.jsx
index aafd3a7..2e1c8a9 100644
--- a/src/components/EnergyCharts.jsx
+++ b/src/components/EnergyCharts.jsx
@@ -1,6 +1,19 @@
import React from 'react';
import { motion } from 'framer-motion';
-import { LineChart, Line, AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import {
+ LineChart,
+ Line,
+ AreaChart,
+ Area,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ Legend,
+} from 'recharts';
import { useApp } from '../context/AppContext';
const EnergyCharts = () => {
@@ -49,29 +62,16 @@ const EnergyCharts = () => {
return (
- {/* Real-time Energy Consumption */}
-
-
Real-time Energy Overview
-
-
-
Current Consumption
-
{state.energyConsumption} W
-
-
-
Battery Level
-
{state.batteryLevel}%
-
-
-
Temperature
-
{state.temperature}°C
-
+
+ {/* Real-time Charts */}
- Real-time Energy Overview
+ Real-time Energy Chart
+
{
{state.energyConsumption} W
+
{
{state.batteryLevel}%
+
{
+
@@ -126,8 +129,22 @@ const EnergyCharts = () => {
} />
-
-
+
+
@@ -168,7 +185,14 @@ const EnergyCharts = () => {
} />
-
+