feat #131 #120 home page, footer and request form, feedback form, and…

… contact us form

package.json

@@ -37,8 +37,10 @@
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.23.0",
     "react-scripts": "latest",
+    "react-slick": "^0.30.2",
     "regression": "^2.0.1",
     "science": "^1.9.3",
+    "slick-carousel": "^1.8.1",
     "xlsx": "^0.18.5"
   },
   "browserslist": {

src/App.js

@@ -10,10 +10,18 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Dashboard from "./Components/Dashboard";
-import RequestForm from "./Components/RequestForm";
+import RequestForm from "./Pages/RequestForm";
 import useInstallPrompt from "./hooks/useInstallPrompt";
 import useServiceWorker from "./hooks/useServiceWorker";
 import ReactGA from "react-ga4";
+import Home from "./Pages/Home";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { createTheme } from "@mui/material/styles";
+import FeedBack from "./Pages/Feedback";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+// TODO remove, this demo shouldn't need to reset the theme.
+const defaultTheme = createTheme();
 
 export default function App() {
   const GAKey = process.env.REACT_APP_GA_ID;
@@ -22,14 +30,17 @@ export default function App() {
   useServiceWorker();
 
   return (
-    <div>
-      <Router>
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/dashboard" element={<Dashboard />} />
-          <Route path="/request-form" element={<RequestForm />} />
-        </Routes>
-      </Router>
-    </div>
+    <ThemeProvider theme={defaultTheme}>
+      <div>
+        <Router>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/request-form" element={<RequestForm />} />
+            <Route path="/feedback" element={<FeedBack />} />
+          </Routes>
+        </Router>
+      </div>
+    </ThemeProvider>
   );
 }

src/Components/AppBar.js

@@ -0,0 +1,47 @@
+const drawerWidth = 240;
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
+
+const Drawer = styled(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  "& .MuiDrawer-paper": {
+    position: "relative",
+    whiteSpace: "nowrap",
+    width: drawerWidth,
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    boxSizing: "border-box",
+    ...(!open && {
+      overflowX: "hidden",
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      width: theme.spacing(7),
+      [theme.breakpoints.up("sm")]: {
+        width: theme.spacing(9),
+      },
+    }),
+  },
+}));
+
+export default { AppBar, Drawer };

src/Components/Chart.js

@@ -9,7 +9,7 @@ import {
   MenuItem,
   Paper,
 } from "@mui/material";
-import DashboardItems from "./DashboardItem";
+import { DashboardItems, DashboardItem } from "./DashboardItem";
 import Title from "./Title";
 import { useSnackbar } from "material-ui-snackbar-provider";
 import OrgUnitFilterModal from "./OrgUnitFilterModal";