From 9dcddb382ebc2ae870b98b2ffcc8eb517702e3b5 Mon Sep 17 00:00:00 2001 From: Shreya Date: Sat, 20 Dec 2025 17:45:25 +0530 Subject: [PATCH] feat: initial setup for UI overhaul with Amplify and Recharts --- src/App.js | 188 ++++++----------- src/components/ReportDialog/index.js | 54 +++++ src/examples/Navbars/DashboardNavbar/index.js | 107 ++++------ src/layouts/analytics/index.js | 96 +++++++++ .../components/PlatformSettings/index.js | 45 ++-- src/layouts/profile/index.js | 199 ++++++------------ src/layouts/wall-details/index.js | 102 +++++++++ src/routes.js | 60 ++---- 8 files changed, 455 insertions(+), 396 deletions(-) create mode 100644 src/components/ReportDialog/index.js create mode 100644 src/layouts/analytics/index.js create mode 100644 src/layouts/wall-details/index.js diff --git a/src/App.js b/src/App.js index 5ba40edb9..ead8d00e1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,10 @@ -/** -========================================================= -* Material Dashboard 2 React - v2.2.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-react -* Copyright 2023 Creative Tim (https://www.creative-tim.com) - -Coded by www.creative-tim.com - - ========================================================= - -* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -*/ - import { useState, useEffect, useMemo } from "react"; - -// react-router components import { Routes, Route, Navigate, useLocation } from "react-router-dom"; +// AWS Amplify Imports +import { Authenticator } from '@aws-amplify/ui-react'; +import '@aws-amplify/ui-react/styles.css'; + // @mui material components import { ThemeProvider } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; @@ -30,27 +17,18 @@ import MDBox from "components/MDBox"; import Sidenav from "examples/Sidenav"; import Configurator from "examples/Configurator"; -// Material Dashboard 2 React themes +// Themes import theme from "assets/theme"; -import themeRTL from "assets/theme/theme-rtl"; - -// Material Dashboard 2 React Dark Mode themes import themeDark from "assets/theme-dark"; -import themeDarkRTL from "assets/theme-dark/theme-rtl"; -// RTL plugins -import rtlPlugin from "stylis-plugin-rtl"; -import { CacheProvider } from "@emotion/react"; -import createCache from "@emotion/cache"; - -// Material Dashboard 2 React routes +// Routes import routes from "routes"; -// Material Dashboard 2 React contexts +// Context import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context"; -// Images -import brandWhite from "assets/images/logo-ct.png"; +// Images (Update brandName to "Climate Wall") +import brandWhite from "assets/images/logo-ct.png"; import brandDark from "assets/images/logo-ct-dark.png"; export default function App() { @@ -65,21 +43,11 @@ export default function App() { whiteSidenav, darkMode, } = controller; + const [onMouseEnter, setOnMouseEnter] = useState(false); - const [rtlCache, setRtlCache] = useState(null); const { pathname } = useLocation(); - // Cache for the rtl - useMemo(() => { - const cacheRtl = createCache({ - key: "rtl", - stylisPlugins: [rtlPlugin], - }); - - setRtlCache(cacheRtl); - }, []); - - // Open sidenav when mouse enter on mini sidenav + // Navigation handlers const handleOnMouseEnter = () => { if (miniSidenav && !onMouseEnter) { setMiniSidenav(dispatch, false); @@ -87,7 +55,6 @@ export default function App() { } }; - // Close sidenav when mouse leave mini sidenav const handleOnMouseLeave = () => { if (onMouseEnter) { setMiniSidenav(dispatch, true); @@ -95,104 +62,69 @@ export default function App() { } }; - // Change the openConfigurator state const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); - // Setting the dir attribute for the body element useEffect(() => { document.body.setAttribute("dir", direction); - }, [direction]); - - // Setting page scroll to 0 when changing the route - useEffect(() => { document.documentElement.scrollTop = 0; document.scrollingElement.scrollTop = 0; - }, [pathname]); + }, [direction, pathname]); const getRoutes = (allRoutes) => allRoutes.map((route) => { - if (route.collapse) { - return getRoutes(route.collapse); - } - + if (route.collapse) return getRoutes(route.collapse); if (route.route) { return ; } - return null; }); - const configsButton = ( - - - settings - - - ); - - return direction === "rtl" ? ( - - - - {layout === "dashboard" && ( - <> - - - {configsButton} - - )} - {layout === "vr" && } - - {getRoutes(routes)} - } /> - - - - ) : ( - - - {layout === "dashboard" && ( - <> - - - {configsButton} - + return ( + + {({ signOut, user }) => ( + + + {layout === "dashboard" && ( + <> + + + {/* Settings / Config Button */} + + settings + + + )} + + + {getRoutes(routes)} + {/* The Navigate to /dashboard acts as your default protected view */} + } /> + + )} - {layout === "vr" && } - - {getRoutes(routes)} - } /> - - + ); -} +} \ No newline at end of file diff --git a/src/components/ReportDialog/index.js b/src/components/ReportDialog/index.js new file mode 100644 index 000000000..bfe335c38 --- /dev/null +++ b/src/components/ReportDialog/index.js @@ -0,0 +1,54 @@ +import React, { useState } from "react"; +// @mui material components +import Dialog from "@mui/material/Dialog"; +import DialogTitle from "@mui/material/DialogTitle"; +import DialogContent from "@mui/material/DialogContent"; +import DialogActions from "@mui/material/DialogActions"; +import MDButton from "components/MDButton"; +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import { MenuItem, Select, FormControl, InputLabel } from "@mui/material"; + +function ReportDialog({ open, onClose }) { + const [format, setFormat] = useState("pdf"); + + const handleDownload = async () => { + // API Call logic goes here + console.log(`Triggering API for ${format} report...`); + // Example: await API.post("myReportAPI", "/generate", { body: { format } }); + onClose(); + }; + + return ( + + Generate System Report + + + + Select the format and date range for your Climate Wall analytics report. + + + Format + + + + + + Cancel + + Download + + + + ); +} + +export default ReportDialog; \ No newline at end of file diff --git a/src/examples/Navbars/DashboardNavbar/index.js b/src/examples/Navbars/DashboardNavbar/index.js index 754bd847f..d013abb5f 100644 --- a/src/examples/Navbars/DashboardNavbar/index.js +++ b/src/examples/Navbars/DashboardNavbar/index.js @@ -1,42 +1,27 @@ -/** -========================================================= -* Material Dashboard 2 React - v2.2.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-react -* Copyright 2023 Creative Tim (https://www.creative-tim.com) - -Coded by www.creative-tim.com - - ========================================================= - -* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -*/ - import { useState, useEffect } from "react"; - -// react-router components import { useLocation, Link } from "react-router-dom"; - -// prop-types is a library for typechecking of props. import PropTypes from "prop-types"; -// @material-ui core components +// @mui material components import AppBar from "@mui/material/AppBar"; import Toolbar from "@mui/material/Toolbar"; import IconButton from "@mui/material/IconButton"; import Menu from "@mui/material/Menu"; import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; // Material Dashboard 2 React components import MDBox from "components/MDBox"; import MDInput from "components/MDInput"; +// NEW: Import the Report Dialog you created earlier +import ReportDialog from "components/ReportDialog"; + // Material Dashboard 2 React example components import Breadcrumbs from "examples/Breadcrumbs"; import NotificationItem from "examples/Items/NotificationItem"; -// Custom styles for DashboardNavbar +// Custom styles import { navbar, navbarContainer, @@ -45,7 +30,6 @@ import { navbarMobileMenu, } from "examples/Navbars/DashboardNavbar/styles"; -// Material Dashboard 2 React context import { useMaterialUIController, setTransparentNavbar, @@ -58,31 +42,25 @@ function DashboardNavbar({ absolute, light, isMini }) { const [controller, dispatch] = useMaterialUIController(); const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller; const [openMenu, setOpenMenu] = useState(false); + + // NEW: State for Report Dialog + const [openReport, setOpenReport] = useState(false); + const route = useLocation().pathname.split("/").slice(1); useEffect(() => { - // Setting the navbar type if (fixedNavbar) { setNavbarType("sticky"); } else { setNavbarType("static"); } - // A function that sets the transparent state of the navbar. function handleTransparentNavbar() { setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); } - /** - The event listener that's calling the handleTransparentNavbar function when - scrolling the window. - */ window.addEventListener("scroll", handleTransparentNavbar); - - // Call the handleTransparentNavbar function to set the state with the initial value. handleTransparentNavbar(); - - // Remove event listener on cleanup return () => window.removeEventListener("scroll", handleTransparentNavbar); }, [dispatch, fixedNavbar]); @@ -91,34 +69,25 @@ function DashboardNavbar({ absolute, light, isMini }) { const handleOpenMenu = (event) => setOpenMenu(event.currentTarget); const handleCloseMenu = () => setOpenMenu(false); - // Render the notifications menu const renderMenu = () => ( - email} title="Check new messages" /> - podcasts} title="Manage Podcast sessions" /> - shopping_cart} title="Payment successfully completed" /> + email} title="Check system alerts" /> + podcasts} title="New analytics report ready" /> ); - // Styles for the navbar icons const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba } }) => ({ color: () => { let colorValue = light || darkMode ? white.main : dark.main; - if (transparentNavbar && !light) { colorValue = darkMode ? rgba(text.main, 0.6) : text.main; } - return colorValue; }, }); @@ -136,14 +105,31 @@ function DashboardNavbar({ absolute, light, isMini }) { {isMini ? null : ( navbarRow(theme, { isMini })}> - + - + + {/* NEW: Report Generation Button */} + + setOpenReport(true)} + > + description + + + + {/* Profile Link (Redirects to Profile Page) */} + account_circle + + {/* Mobile Menu Toggle */} + + {/* Settings / Configurator */} settings + + {/* Notifications */} notifications @@ -181,22 +168,14 @@ function DashboardNavbar({ absolute, light, isMini }) { )} + + {/* NEW: The Dialog Component */} + setOpenReport(false)} /> ); } -// Setting default values for the props of DashboardNavbar -DashboardNavbar.defaultProps = { - absolute: false, - light: false, - isMini: false, -}; - -// Typechecking props for the DashboardNavbar -DashboardNavbar.propTypes = { - absolute: PropTypes.bool, - light: PropTypes.bool, - isMini: PropTypes.bool, -}; - -export default DashboardNavbar; +DashboardNavbar.defaultProps = { absolute: false, light: false, isMini: false }; +DashboardNavbar.propTypes = { absolute: PropTypes.bool, light: PropTypes.bool, isMini: PropTypes.bool }; + +export default DashboardNavbar; \ No newline at end of file diff --git a/src/layouts/analytics/index.js b/src/layouts/analytics/index.js new file mode 100644 index 000000000..cde659481 --- /dev/null +++ b/src/layouts/analytics/index.js @@ -0,0 +1,96 @@ +import React from "react"; + +// @mui material components +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; + +// Material Dashboard 2 React components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 React example components +import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; +import DashboardNavbar from "examples/Navbars/DashboardNavbar"; +import Footer from "examples/Footer"; +import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard"; + +// Recharts for Historical Trends +import { + AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer +} from "recharts"; + +const historicalData = [ + { month: "Jan", efficiency: 85 }, + { month: "Feb", efficiency: 88 }, + { month: "Mar", efficiency: 92 }, + { month: "Apr", efficiency: 90 }, + { month: "May", efficiency: 95 }, +]; + +function Analytics() { + return ( + + + + {/* Top Summary Metrics */} + + + + + + + + + + + + + {/* Historical Trend Chart */} + + + + Historical Performance Summary + + + + + + + + + + + + + + + + + + + + + +