Skip to content

feat: initial setup for UI overhaul with Amplify and Recharts #259

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shhreya13 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: initial setup for UI overhaul with Amplify and Recharts #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 60 additions & 128 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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() {
Expand All @@ -65,134 +43,88 @@ 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);
setOnMouseEnter(true);
}
};

// Close sidenav when mouse leave mini sidenav
const handleOnMouseLeave = () => {
if (onMouseEnter) {
setMiniSidenav(dispatch, true);
setOnMouseEnter(false);
}
};

// 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 <Route exact path={route.route} element={route.component} key={route.key} />;
}

return null;
});

const configsButton = (
<MDBox
display="flex"
justifyContent="center"
alignItems="center"
width="3.25rem"
height="3.25rem"
bgColor="white"
shadow="sm"
borderRadius="50%"
position="fixed"
right="2rem"
bottom="2rem"
zIndex={99}
color="dark"
sx={{ cursor: "pointer" }}
onClick={handleConfiguratorOpen}
>
<Icon fontSize="small" color="inherit">
settings
</Icon>
</MDBox>
);

return direction === "rtl" ? (
<CacheProvider value={rtlCache}>
<ThemeProvider theme={darkMode ? themeDarkRTL : themeRTL}>
<CssBaseline />
{layout === "dashboard" && (
<>
<Sidenav
color={sidenavColor}
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
brandName="Material Dashboard 2"
routes={routes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
/>
<Configurator />
{configsButton}
</>
)}
{layout === "vr" && <Configurator />}
<Routes>
{getRoutes(routes)}
<Route path="*" element={<Navigate to="/dashboard" />} />
</Routes>
</ThemeProvider>
</CacheProvider>
) : (
<ThemeProvider theme={darkMode ? themeDark : theme}>
<CssBaseline />
{layout === "dashboard" && (
<>
<Sidenav
color={sidenavColor}
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
brandName="Material Dashboard 2"
routes={routes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
/>
<Configurator />
{configsButton}
</>
return (
<Authenticator>
{({ signOut, user }) => (
<ThemeProvider theme={darkMode ? themeDark : theme}>
<CssBaseline />
{layout === "dashboard" && (
<>
<Sidenav
color={sidenavColor}
brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
brandName="Climate Wall" // UPDATED: Brand Name
routes={routes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}
/>
<Configurator />
{/* Settings / Config Button */}
<MDBox
display="flex"
justifyContent="center"
alignItems="center"
width="3.25rem"
height="3.25rem"
bgColor="white"
shadow="sm"
borderRadius="50%"
position="fixed"
right="2rem"
bottom="2rem"
zIndex={99}
color="dark"
sx={{ cursor: "pointer" }}
onClick={handleConfiguratorOpen}
>
<Icon fontSize="small" color="inherit">settings</Icon>
</MDBox>
</>
)}

<Routes>
{getRoutes(routes)}
{/* The Navigate to /dashboard acts as your default protected view */}
<Route path="*" element={<Navigate to="/dashboard" />} />
</Routes>
</ThemeProvider>
)}
{layout === "vr" && <Configurator />}
<Routes>
{getRoutes(routes)}
<Route path="*" element={<Navigate to="/dashboard" />} />
</Routes>
</ThemeProvider>
</Authenticator>
);
}
}
54 changes: 54 additions & 0 deletions src/components/ReportDialog/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
<DialogTitle>Generate System Report</DialogTitle>
<DialogContent>
<MDBox mt={2}>
<MDTypography variant="body2" color="text" mb={2}>
Select the format and date range for your Climate Wall analytics report.
</MDTypography>
<FormControl fullWidth>
<InputLabel id="report-format-label">Format</InputLabel>
<Select
labelId="report-format-label"
value={format}
onChange={(e) => setFormat(e.target.value)}
sx={{ height: "45px", mt: 1 }}
>
<MenuItem value="pdf">PDF Document (.pdf)</MenuItem>
<MenuItem value="csv">Data Spreadsheet (.csv)</MenuItem>
</Select>
</FormControl>
</MDBox>
</DialogContent>
<DialogActions>
<MDButton onClick={onClose} color="secondary">Cancel</MDButton>
<MDButton onClick={handleDownload} color="info" variant="gradient">
Download
</MDButton>
</DialogActions>
</Dialog>
);
}

export default ReportDialog;
Loading