From 412854ea182144e7b588c721ab9b95e7a622f02a Mon Sep 17 00:00:00 2001
From: Eric Sun <ericsun828@gmail.com>
Date: Wed, 18 Sep 2024 23:22:28 -0400
Subject: [PATCH 1/6] add maintenance checklist popup

---
 .../MaintenanceChecklistPopup.tsx             | 84 +++++++++++++++++++
 .../volunteerDashboard/VolunteerDashboard.tsx | 48 +++++++++--
 .../src/pages/volunteerPage/VolunteerPage.tsx | 11 ++-
 3 files changed, 133 insertions(+), 10 deletions(-)
 create mode 100644 apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx

diff --git a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
new file mode 100644
index 00000000..ba27d5b7
--- /dev/null
+++ b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
@@ -0,0 +1,84 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+interface MaintenanceChecklistPopupProps {
+  maintenanceChecklistOpen: boolean;
+  setMaintenanceChecklistOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function MaintenanceChecklistPopup({
+  maintenanceChecklistOpen,
+  setMaintenanceChecklistOpen,
+}: MaintenanceChecklistPopupProps) {
+  const [site, setSite] = useState('');
+
+  const handleClose = () => {
+    setMaintenanceChecklistOpen(false);
+  };
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setSite(event.target.value as string);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    // TODO: Add logic to display the maintenance checklist for the selected site
+    event.preventDefault();
+    console.log(site);
+    handleClose();
+  };
+
+  return (
+    <Dialog
+      open={maintenanceChecklistOpen}
+      onClose={handleClose}
+      PaperProps={{
+        component: 'form',
+        onSubmit: handleSubmit,
+      }}
+    >
+      <DialogTitle>
+        <Box display="flex" alignItems="center">
+          <Box flexGrow={1}>Maintenance Visit Checklist</Box>
+          <Box>
+            <IconButton onClick={handleClose}>
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText sx={{ paddingBottom: '8px' }}>
+          Select the site you'd like to see a checklist for:
+        </DialogContentText>
+        <FormControl fullWidth>
+          <InputLabel id="select-site">Site</InputLabel>
+          <Select
+            id="select-site"
+            value={site}
+            label="Site"
+            onChange={handleChange}
+          >
+            <MenuItem value={'Rain Garden 1'}>Rain Garden 1</MenuItem>
+            <MenuItem value={'Green Roof 2'}>Green Roof 2</MenuItem>
+            <MenuItem value={'Tree Trench 3'}>Tree Trench 3</MenuItem>
+          </Select>
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button type="submit">Next</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/apps/frontend/src/components/volunteerDashboard/VolunteerDashboard.tsx b/apps/frontend/src/components/volunteerDashboard/VolunteerDashboard.tsx
index 27644be1..31a303c4 100644
--- a/apps/frontend/src/components/volunteerDashboard/VolunteerDashboard.tsx
+++ b/apps/frontend/src/components/volunteerDashboard/VolunteerDashboard.tsx
@@ -18,7 +18,13 @@ const boxStyles = {
   fontSize: '30px',
 };
 
-function VolunteerDashboard() {
+interface VolunteerDashboardProps {
+  setMaintenanceChecklistOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function VolunteerDashboard({
+  setMaintenanceChecklistOpen,
+}: VolunteerDashboardProps) {
   return (
     <div
       className="container"
@@ -74,11 +80,20 @@ function VolunteerDashboard() {
               width: '100%',
             }}
           >
-          <Link to="my-adopted-gi" style={{ ...boxStyles, textDecoration: 'none', color: 'inherit', width: '100%', height: '50%' }}>
-            <Box sx={{ ...boxStyles, height: '100%', width: '100%'}}>
-              My Adopted Green Infrastructure
-            </Box>
-          </Link>
+            <Link
+              to="my-adopted-gi"
+              style={{
+                ...boxStyles,
+                textDecoration: 'none',
+                color: 'inherit',
+                width: '100%',
+                height: '50%',
+              }}
+            >
+              <Box sx={{ ...boxStyles, height: '100%', width: '100%' }}>
+                My Adopted Green Infrastructure
+              </Box>
+            </Link>
             <Box
               sx={{
                 display: 'flex',
@@ -87,8 +102,19 @@ function VolunteerDashboard() {
                 gap: '4%',
               }}
             >
-              <Link to="../" style={{ ...boxStyles, textDecoration: 'none', color: 'inherit', width: '100%', height: '100%' }}>
-                  <Box sx={{ ...boxStyles, width: '100%', height: '100%' }}>Adoption Map</Box>
+              <Link
+                to="../"
+                style={{
+                  ...boxStyles,
+                  textDecoration: 'none',
+                  color: 'inherit',
+                  width: '100%',
+                  height: '100%',
+                }}
+              >
+                <Box sx={{ ...boxStyles, width: '100%', height: '100%' }}>
+                  Adoption Map
+                </Box>
               </Link>
               <Box sx={{ ...boxStyles, width: '100%', padding: '3%' }}>
                 Maintenance Guide
@@ -100,7 +126,11 @@ function VolunteerDashboard() {
           className="column2"
           style={{ paddingTop: '2%', paddingBottom: '2%', width: '55%' }}
         >
-          <Box sx={{ ...boxStyles, height: '100%', padding: '8%' }}>
+          <Box
+            sx={{ ...boxStyles, height: '100%', padding: '8%' }}
+            onClick={() => setMaintenanceChecklistOpen(true)}
+            style={{ cursor: 'pointer' }}
+          >
             Maintenance Visit Checklist
           </Box>
         </div>
diff --git a/apps/frontend/src/pages/volunteerPage/VolunteerPage.tsx b/apps/frontend/src/pages/volunteerPage/VolunteerPage.tsx
index d37e447b..2cb40d15 100644
--- a/apps/frontend/src/pages/volunteerPage/VolunteerPage.tsx
+++ b/apps/frontend/src/pages/volunteerPage/VolunteerPage.tsx
@@ -1,5 +1,6 @@
 import Navbar from '../Navbar';
 import VolunteerDashboard from '../../components/volunteerDashboard/VolunteerDashboard';
+import MaintenanceChecklistPopup from '../../components/volunteerDashboard/MaintenanceChecklistPopup';
 import Map from '../../components/map/Map';
 import MapLegend from '../../components/map/MapLegend';
 import { useState } from 'react';
@@ -10,12 +11,20 @@ const icons: string[] = SITE_STATUS_ROADMAP.map((option) => option.image);
 export default function VolunteerPage() {
   const [selectedFeatures, setSelectedFeatures] = useState<string[]>([]);
   const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
+  const [maintenanceChecklistOpen, setMaintenanceChecklistOpen] =
+    useState(false);
 
   return (
     <div>
       <Navbar />
       <div style={{ marginTop: '50px' }} />
-      <VolunteerDashboard />
+      <VolunteerDashboard
+        setMaintenanceChecklistOpen={setMaintenanceChecklistOpen}
+      />
+      <MaintenanceChecklistPopup
+        maintenanceChecklistOpen={maintenanceChecklistOpen}
+        setMaintenanceChecklistOpen={setMaintenanceChecklistOpen}
+      />
       <div
         style={{
           position: 'relative',

From 7fad997c2c36d2f8c13fa61cff9227c947aa53e4 Mon Sep 17 00:00:00 2001
From: ItsEricSun <ericsun828@gmail.com>
Date: Mon, 23 Sep 2024 19:45:10 -0400
Subject: [PATCH 2/6] update font

---
 .../MaintenanceChecklistPopup.tsx             | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
index ba27d5b7..55414042 100644
--- a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
+++ b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
@@ -50,7 +50,7 @@ export default function MaintenanceChecklistPopup({
     >
       <DialogTitle>
         <Box display="flex" alignItems="center">
-          <Box flexGrow={1}>Maintenance Visit Checklist</Box>
+          <Box flexGrow={1} style={{ fontFamily: 'Montserrat', fontSize: '24px', fontWeight: '600' }}>Maintenance Visit Checklist</Box>
           <Box>
             <IconButton onClick={handleClose}>
               <CloseIcon />
@@ -59,8 +59,8 @@ export default function MaintenanceChecklistPopup({
         </Box>
       </DialogTitle>
       <DialogContent>
-        <DialogContentText sx={{ paddingBottom: '8px' }}>
-          Select the site you'd like to see a checklist for:
+        <DialogContentText sx={{ paddingBottom: '8px' }} style={{ fontFamily: 'Lora', fontSize: '16px', fontWeight: '400', color: 'black' }}>
+          Select the site you'd like to see a checklist for
         </DialogContentText>
         <FormControl fullWidth>
           <InputLabel id="select-site">Site</InputLabel>
@@ -69,6 +69,21 @@ export default function MaintenanceChecklistPopup({
             value={site}
             label="Site"
             onChange={handleChange}
+            sx={{fontFamily: 'Montserrat', fontSize: '20px', fontWeight: '400'}}
+            MenuProps={{
+              PaperProps: {
+                sx: {
+                  '& .MuiMenuItem-root': {
+                    fontFamily: 'Montserrat',
+                    fontSize: '20px',
+                    fontWeight: '400',
+                    '&:hover': {
+                      fontWeight: '600',
+                    },
+                  },
+                },
+              },
+            }}
           >
             <MenuItem value={'Rain Garden 1'}>Rain Garden 1</MenuItem>
             <MenuItem value={'Green Roof 2'}>Green Roof 2</MenuItem>

From 97fc52fb0a3f17c06fd39b917db06abf564f39c5 Mon Sep 17 00:00:00 2001
From: ItsEricSun <ericsun828@gmail.com>
Date: Mon, 23 Sep 2024 19:52:16 -0400
Subject: [PATCH 3/6] add "Most recently adopted" placeholder text

---
 .../volunteerDashboard/MaintenanceChecklistPopup.tsx     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
index 55414042..5116cb94 100644
--- a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
+++ b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
@@ -63,12 +63,17 @@ export default function MaintenanceChecklistPopup({
           Select the site you'd like to see a checklist for
         </DialogContentText>
         <FormControl fullWidth>
-          <InputLabel id="select-site">Site</InputLabel>
           <Select
             id="select-site"
             value={site}
-            label="Site"
             onChange={handleChange}
+            displayEmpty
+            renderValue={(selected) => {
+              if (!selected) {
+                return 'Most recently adopted';
+              }
+              return selected;
+            }}
             sx={{fontFamily: 'Montserrat', fontSize: '20px', fontWeight: '400'}}
             MenuProps={{
               PaperProps: {

From 1649db68f63ef6f0e5f6c93cc8d469e8e753a34c Mon Sep 17 00:00:00 2001
From: ItsEricSun <ericsun828@gmail.com>
Date: Mon, 23 Sep 2024 20:10:22 -0400
Subject: [PATCH 4/6] update style of button

---
 .../volunteerDashboard/MaintenanceChecklistPopup.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
index 5116cb94..77ae8f42 100644
--- a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
+++ b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
@@ -96,8 +96,8 @@ export default function MaintenanceChecklistPopup({
           </Select>
         </FormControl>
       </DialogContent>
-      <DialogActions>
-        <Button type="submit">Next</Button>
+      <DialogActions sx={{ padding: '24px', paddingBottom: '16px', paddingTop: '0px' }}>
+        <Button type="submit" variant="contained" sx={{ backgroundColor: '#D9D9D9', color: 'black', fontFamily: 'Montserrat', fontSize: '20px', fontWeight: '400', px: 4}}>Next</Button>
       </DialogActions>
     </Dialog>
   );

From d40c67f86a326e8303c203038ded3d2c096e72ae Mon Sep 17 00:00:00 2001
From: ItsEricSun <ericsun828@gmail.com>
Date: Mon, 23 Sep 2024 21:59:19 -0400
Subject: [PATCH 5/6] remove unused import

---
 .../components/volunteerDashboard/MaintenanceChecklistPopup.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
index 77ae8f42..b09f5b32 100644
--- a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
+++ b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
@@ -6,7 +6,6 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { useState } from 'react';
 import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';

From 474b61bd226c8225fca5f601bf869951dac2b32a Mon Sep 17 00:00:00 2001
From: ItsEricSun <ericsun828@gmail.com>
Date: Tue, 24 Sep 2024 10:48:48 -0400
Subject: [PATCH 6/6] fix code formatting

---
 .../MaintenanceChecklistPopup.tsx             | 46 +++++++++++++++++--
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
index b09f5b32..f80ba70c 100644
--- a/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
+++ b/apps/frontend/src/components/volunteerDashboard/MaintenanceChecklistPopup.tsx
@@ -49,7 +49,16 @@ export default function MaintenanceChecklistPopup({
     >
       <DialogTitle>
         <Box display="flex" alignItems="center">
-          <Box flexGrow={1} style={{ fontFamily: 'Montserrat', fontSize: '24px', fontWeight: '600' }}>Maintenance Visit Checklist</Box>
+          <Box
+            flexGrow={1}
+            style={{
+              fontFamily: 'Montserrat',
+              fontSize: '24px',
+              fontWeight: '600',
+            }}
+          >
+            Maintenance Visit Checklist
+          </Box>
           <Box>
             <IconButton onClick={handleClose}>
               <CloseIcon />
@@ -58,7 +67,15 @@ export default function MaintenanceChecklistPopup({
         </Box>
       </DialogTitle>
       <DialogContent>
-        <DialogContentText sx={{ paddingBottom: '8px' }} style={{ fontFamily: 'Lora', fontSize: '16px', fontWeight: '400', color: 'black' }}>
+        <DialogContentText
+          sx={{ paddingBottom: '8px' }}
+          style={{
+            fontFamily: 'Lora',
+            fontSize: '16px',
+            fontWeight: '400',
+            color: 'black',
+          }}
+        >
           Select the site you'd like to see a checklist for
         </DialogContentText>
         <FormControl fullWidth>
@@ -73,7 +90,11 @@ export default function MaintenanceChecklistPopup({
               }
               return selected;
             }}
-            sx={{fontFamily: 'Montserrat', fontSize: '20px', fontWeight: '400'}}
+            sx={{
+              fontFamily: 'Montserrat',
+              fontSize: '20px',
+              fontWeight: '400',
+            }}
             MenuProps={{
               PaperProps: {
                 sx: {
@@ -95,8 +116,23 @@ export default function MaintenanceChecklistPopup({
           </Select>
         </FormControl>
       </DialogContent>
-      <DialogActions sx={{ padding: '24px', paddingBottom: '16px', paddingTop: '0px' }}>
-        <Button type="submit" variant="contained" sx={{ backgroundColor: '#D9D9D9', color: 'black', fontFamily: 'Montserrat', fontSize: '20px', fontWeight: '400', px: 4}}>Next</Button>
+      <DialogActions
+        sx={{ padding: '24px', paddingBottom: '16px', paddingTop: '0px' }}
+      >
+        <Button
+          type="submit"
+          variant="contained"
+          sx={{
+            backgroundColor: '#D9D9D9',
+            color: 'black',
+            fontFamily: 'Montserrat',
+            fontSize: '20px',
+            fontWeight: '400',
+            px: 4,
+          }}
+        >
+          Next
+        </Button>
       </DialogActions>
     </Dialog>
   );