From c41d788328719503570b7cb01300be2c7296c649 Mon Sep 17 00:00:00 2001 From: Atharva Date: Sat, 22 Feb 2025 18:48:07 +0530 Subject: [PATCH] feat:Added glass navbar and Dashboard components --- Frontend/package-lock.json | 30 ++ Frontend/package.json | 2 + Frontend/public/images/add.svg | 1 + Frontend/src/App.jsx | 1 + Frontend/src/components/FarmList.jsx | 126 ++++++++ Frontend/src/components/Logs.jsx | 15 +- Frontend/src/components/Navbar.jsx | 274 +++++------------- Frontend/src/components/TotalSpent.jsx | 3 - .../monitoring charts/ActivityField.jsx | 28 ++ .../monitoring charts/AlertsPanel.jsx | 28 ++ .../monitoring charts/MetricCard.jsx | 13 + .../monitoring charts/PerformanceChart.jsx | 50 ++++ .../{ => monitoring charts}/Piechart.jsx | 0 Frontend/src/pages/UserPanel/Dashboard.jsx | 232 ++------------- Frontend/src/pages/UserPanel/Monitoring.jsx | 46 ++- 15 files changed, 430 insertions(+), 419 deletions(-) create mode 100644 Frontend/public/images/add.svg create mode 100644 Frontend/src/components/FarmList.jsx create mode 100644 Frontend/src/components/monitoring charts/ActivityField.jsx create mode 100644 Frontend/src/components/monitoring charts/AlertsPanel.jsx create mode 100644 Frontend/src/components/monitoring charts/MetricCard.jsx create mode 100644 Frontend/src/components/monitoring charts/PerformanceChart.jsx rename Frontend/src/components/{ => monitoring charts}/Piechart.jsx (100%) diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index 7acdd07..eda86d5 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -10,9 +10,11 @@ "dependencies": { "@reduxjs/toolkit": "^2.2.7", "apexcharts": "^4.5.0", + "chart.js": "^4.4.8", "flowbite": "^2.5.1", "react": "^18.3.1", "react-apexcharts": "^1.7.0", + "react-chartjs-2": "^5.3.0", "react-dom": "^18.3.1", "react-icons": "^5.3.0", "react-player": "^2.16.0", @@ -941,6 +943,12 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "license": "MIT" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1901,6 +1909,18 @@ "node": ">=4" } }, + "node_modules/chart.js": { + "version": "4.4.8", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz", + "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==", + "license": "MIT", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -4397,6 +4417,16 @@ "react": ">=0.13" } }, + "node_modules/react-chartjs-2": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz", + "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==", + "license": "MIT", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", diff --git a/Frontend/package.json b/Frontend/package.json index 7080850..544f902 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -12,9 +12,11 @@ "dependencies": { "@reduxjs/toolkit": "^2.2.7", "apexcharts": "^4.5.0", + "chart.js": "^4.4.8", "flowbite": "^2.5.1", "react": "^18.3.1", "react-apexcharts": "^1.7.0", + "react-chartjs-2": "^5.3.0", "react-dom": "^18.3.1", "react-icons": "^5.3.0", "react-player": "^2.16.0", diff --git a/Frontend/public/images/add.svg b/Frontend/public/images/add.svg new file mode 100644 index 0000000..57e31f7 --- /dev/null +++ b/Frontend/public/images/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index 99eba02..b2efb27 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -37,6 +37,7 @@ function App() { <>
+
{ + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Farm name + + Location + + Type + + Size (acres) + + Action +
+ Green Valley Farms + CaliforniaOrganic150 + + Edit + +
+ Sunny Acres + TexasConventional200 + + Edit + +
+ Riverside Estates + FloridaHydroponic120 + + Edit + +
+ Blueberry Hill + OregonBerry80 + + Edit + +
+ Sunnybrook Meadows + WashingtonDairy300 + + Edit + +
+
+ ); +}; + +export default FarmList; diff --git a/Frontend/src/components/Logs.jsx b/Frontend/src/components/Logs.jsx index 19a1e2f..70fa90a 100644 --- a/Frontend/src/components/Logs.jsx +++ b/Frontend/src/components/Logs.jsx @@ -3,8 +3,8 @@ import { Link } from "react-router-dom"; const Logs = () => { return ( <> -
- +
+
- - - View all Logs - -
@@ -55,11 +55,12 @@ const Logs = () => { Accessories $99
+ {" "} + {" "} + +
+ View all Logs +
); diff --git a/Frontend/src/components/Navbar.jsx b/Frontend/src/components/Navbar.jsx index b921f1d..7c9aa7a 100644 --- a/Frontend/src/components/Navbar.jsx +++ b/Frontend/src/components/Navbar.jsx @@ -1,205 +1,87 @@ -import React from "react"; -import { Link, useNavigate } from "react-router-dom"; -import { useSelector } from "react-redux"; -import { BACKEND_URL } from "../constants"; - const Navbar = () => { - const user = useSelector((store) => store.user); - - //console.log("User is : ", user); - - const navigate = useNavigate(); - - const handleLogOut = async () => { - const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, { - method: "Get", - credentials: "include", - }); - - const data = await responce.json(); - - //console.log("User Logged out data is : ", data); - - if (data.success == true) { - navigate("/user/login"); - } - }; return ( - <> - - + +
+ ); }; diff --git a/Frontend/src/components/TotalSpent.jsx b/Frontend/src/components/TotalSpent.jsx index 4e307e9..09944e4 100644 --- a/Frontend/src/components/TotalSpent.jsx +++ b/Frontend/src/components/TotalSpent.jsx @@ -4,9 +4,6 @@ const TotalSpent = () => {
100,000 diff --git a/Frontend/src/components/monitoring charts/ActivityField.jsx b/Frontend/src/components/monitoring charts/ActivityField.jsx new file mode 100644 index 0000000..6f30f47 --- /dev/null +++ b/Frontend/src/components/monitoring charts/ActivityField.jsx @@ -0,0 +1,28 @@ +// ActivityFeed.jsx +import React from "react"; + +const ActivityFeed = () => { + // Hard-coded activity feed data + const activities = [ + { + id: 1, + description: "Farm A reported increased yield", + time: "10 mins ago", + }, + { id: 2, description: "Sensor B recalibrated", time: "20 mins ago" }, + { id: 3, description: "Alert triggered on Farm C", time: "30 mins ago" }, + ]; + + return ( +
    + {activities.map((activity) => ( +
  • +

    {activity.description}

    + {activity.time} +
    • + ))} +
+ ); +}; + +export default ActivityFeed; diff --git a/Frontend/src/components/monitoring charts/AlertsPanel.jsx b/Frontend/src/components/monitoring charts/AlertsPanel.jsx new file mode 100644 index 0000000..6e5ce6e --- /dev/null +++ b/Frontend/src/components/monitoring charts/AlertsPanel.jsx @@ -0,0 +1,28 @@ +// AlertsPanel.jsx +import React from "react"; + +const AlertsPanel = () => { + // Hard-coded alerts data + const alerts = [ + { id: 1, message: "Temperature exceeds threshold", type: "warning" }, + { id: 2, message: "New sensor connected", type: "info" }, + { id: 3, message: "Power consumption high", type: "warning" }, + ]; + + return ( +
+ {alerts.map((alert) => ( +
+

{alert.message}

+
+ ))} +
+ ); +}; + +export default AlertsPanel; diff --git a/Frontend/src/components/monitoring charts/MetricCard.jsx b/Frontend/src/components/monitoring charts/MetricCard.jsx new file mode 100644 index 0000000..a1c723b --- /dev/null +++ b/Frontend/src/components/monitoring charts/MetricCard.jsx @@ -0,0 +1,13 @@ +// MetricsCard.jsx +import React from "react"; + +const MetricsCard = ({ title, value }) => { + return ( +
+

{title}

+

{value}

+
+ ); +}; + +export default MetricsCard; diff --git a/Frontend/src/components/monitoring charts/PerformanceChart.jsx b/Frontend/src/components/monitoring charts/PerformanceChart.jsx new file mode 100644 index 0000000..fc0c744 --- /dev/null +++ b/Frontend/src/components/monitoring charts/PerformanceChart.jsx @@ -0,0 +1,50 @@ +// PerformanceChart.jsx +import React from "react"; +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, +} from "chart.js"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +); + +const PerformanceChart = () => { + const data = { + labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], + datasets: [ + { + label: "Yield", + data: [65, 59, 80, 81, 56, 55, 70], // hard-coded values + fill: false, + backgroundColor: "rgb(75, 192, 192)", + borderColor: "rgba(75, 192, 192, 0.2)", + }, + ], + }; + + const options = { + responsive: true, + plugins: { + legend: { position: "top" }, + title: { display: true, text: "Performance Trend" }, + }, + }; + + return ; +}; + +export default PerformanceChart; diff --git a/Frontend/src/components/Piechart.jsx b/Frontend/src/components/monitoring charts/Piechart.jsx similarity index 100% rename from Frontend/src/components/Piechart.jsx rename to Frontend/src/components/monitoring charts/Piechart.jsx diff --git a/Frontend/src/pages/UserPanel/Dashboard.jsx b/Frontend/src/pages/UserPanel/Dashboard.jsx index 7261b89..58e03ae 100644 --- a/Frontend/src/pages/UserPanel/Dashboard.jsx +++ b/Frontend/src/pages/UserPanel/Dashboard.jsx @@ -1,219 +1,31 @@ import React from "react"; -import Piechart from "../../components/Piechart"; +import Piechart from "../../components/monitoring charts/Piechart"; import TotalSpent from "../../components/TotalSpent"; -import Logs from "../../components/Logs"; +import FarmList from "../../components/FarmList"; const Dashboard = () => { return ( - <> -
- {/*
-

- Upcoming Sessions{" "} -

-
-
- -
-

Recent Activity

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. -

-
- -
- -
- - - - Topup -
-
- 06:24:45 AM - +$5,553 -
-
-
-
- -
-

Weekly Summary

-
-
- Sun -
-
- Mon -
-
- Tue -
-
- Wed -
-
- Thu -
-
- Fri -
-
- Sat -
-
- Completed -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Notifications

-
-
-
- - - - Topup -
-
- 06:24:45 AM - +$5,553 -
-
-
- -
-
-
- - - - Topup -
-
- 06:24:45 AM - +$5,553 -
-
-
-
*/} -
- -
- -
- - -
- +
+
+
- + +
+ + +
+ +
); }; diff --git a/Frontend/src/pages/UserPanel/Monitoring.jsx b/Frontend/src/pages/UserPanel/Monitoring.jsx index b160d37..2be5c52 100644 --- a/Frontend/src/pages/UserPanel/Monitoring.jsx +++ b/Frontend/src/pages/UserPanel/Monitoring.jsx @@ -1,7 +1,47 @@ -const Monitoring = () => { +// MonitoringPage.jsx +import React from "react"; +import MetricsCard from "../../components/monitoring charts/MetricCard"; +import PerformanceChart from "../../components/monitoring charts/PerformanceChart"; +import AlertsPanel from "../../components/monitoring charts/AlertsPanel"; +import ActivityFeed from "../../components/monitoring charts/ActivityField"; +import Piechart from "../../components/monitoring charts/Piechart"; + +const MonitoringPage = () => { return ( - +
+
+ {/* Summary Metrics */} +
+ + + + +
+ + {/* Performance Trend Chart */} +
+

Performance Trend

+ +
+
+

Performance Trend

+ +
+ + {/* Alerts and Activity Feed */} +
+
+

Alerts

+ +
+
+

Recent Activity

+ +
+
+
+
); }; -export default Monitoring; +export default MonitoringPage;