From 5cb27cb5c752f702370c82cf487d689aeca004f8 Mon Sep 17 00:00:00 2001
From: Tom Chapman <tchapman000@gmail.com>
Date: Tue, 17 Oct 2023 10:08:30 -0700
Subject: [PATCH 1/4] changed project form to have different background on
 location fields

---
 .../src/components/project/ProjectForm.tsx    | 495 +++++++++---------
 .../src/components/project/ProjectList.tsx    |  49 +-
 2 files changed, 299 insertions(+), 245 deletions(-)

diff --git a/epictrack-web/src/components/project/ProjectForm.tsx b/epictrack-web/src/components/project/ProjectForm.tsx
index 76dda729a..2a11e34ba 100644
--- a/epictrack-web/src/components/project/ProjectForm.tsx
+++ b/epictrack-web/src/components/project/ProjectForm.tsx
@@ -16,6 +16,7 @@ import { MasterContext } from "../shared/MasterContext";
 import projectService from "../../services/projectService/projectService";
 import LockClosed from "../../assets/images/lock-closed.svg";
 import ControlledSwitch from "../shared/controlledInputComponents/ControlledSwitch";
+import { Palette } from "../../styles/theme";
 
 const schema = yup.object<Project>().shape({
   name: yup
@@ -64,10 +65,6 @@ export default function ProjectForm({ ...props }) {
   const [disabled, setDisabled] = React.useState<boolean>();
   const ctx = React.useContext(MasterContext);
 
-  React.useEffect(() => {
-    ctx.setFormId("project-form");
-  }, []);
-
   React.useEffect(() => {
     setDisabled(props.projectId ? true : false);
     ctx.setId(props.projectId);
@@ -92,12 +89,6 @@ export default function ProjectForm({ ...props }) {
     reset(ctx.item);
   }, [ctx.item]);
 
-  React.useEffect(() => {
-    const name = (ctx?.item as Project)?.name;
-    setDisabled(ctx?.item ? true : false);
-    ctx.setTitle(name || "Project");
-  }, [ctx.title, ctx.item]);
-
   const setRegions = (regions: Region[]) => {
     const envRegions = regions.filter((p) => p.entity === "ENV");
     const nrsRegions = regions.filter((p) => p.entity === "FLNR");
@@ -151,6 +142,7 @@ export default function ProjectForm({ ...props }) {
     ctx.onSave(data, () => {
       reset();
     });
+    props.onSave();
   };
   return (
     <>
@@ -160,238 +152,273 @@ export default function ProjectForm({ ...props }) {
           id="project-form"
           container
           spacing={2}
+          sx={{
+            margin: 0,
+            width: "100%",
+          }}
           onSubmit={handleSubmit(onSubmitHandler)}
         >
-          <Grid item xs={6}>
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "space-between",
-                paddingTop: "3px",
-              }}
-            >
-              <ETFormLabel required>Name</ETFormLabel>
-              <ETFormLabel>
-                <Box
-                  sx={{
-                    opacity: disabled ? "100" : "0",
-                    cursor: "pointer",
-                  }}
-                  component="img"
-                  src={LockClosed}
-                  alt="Lock"
-                />
-              </ETFormLabel>
-            </Box>
-            <TextField
-              placeholder="Project Name"
-              disabled={disabled}
-              variant="outlined"
-              fullWidth
-              error={!!errors?.name?.message}
-              helperText={errors?.name?.message?.toString()}
-              {...register("name")}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "space-between",
-                paddingTop: "3px",
-              }}
-            >
-              <ETFormLabel required>Proponent</ETFormLabel>
-              <ETFormLabel>
-                <Box
-                  sx={{
-                    opacity: disabled ? "100" : "0",
-                    cursor: "pointer",
-                  }}
-                  component="img"
-                  src={LockClosed}
-                  alt="Lock"
-                />
-              </ETFormLabel>
-            </Box>
-            <ControlledSelectV2
-              placeholder="Select"
-              disabled={disabled}
-              key={`proponent_select_${formValues.proponent_id}`}
-              helperText={errors?.proponent_id?.message?.toString()}
-              defaultValue={(ctx.item as Project)?.proponent_id}
-              options={proponents || []}
-              getOptionValue={(o: Proponent) => o?.id?.toString()}
-              getOptionLabel={(o: Proponent) => o.name}
-              {...register("proponent_id")}
-            ></ControlledSelectV2>
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel required>Type</ETFormLabel>
-            <ControlledSelectV2
-              placeholder="Select"
-              key={`type_select_${formValues.type_id}`}
-              helperText={errors?.type_id?.message?.toString()}
-              defaultValue={(ctx.item as Project)?.type_id}
-              options={types || []}
-              getOptionValue={(o: Type) => o?.id?.toString()}
-              getOptionLabel={(o: Type) => o.name}
-              {...register("type_id")}
-            ></ControlledSelectV2>
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel required>Subtypes</ETFormLabel>
-            <ControlledSelectV2
-              placeholder="Select"
-              key={`subtype_select_${formValues.sub_type_id}`}
-              helperText={errors?.sub_type_id?.message?.toString()}
-              defaultValue={(ctx.item as Project)?.sub_type_id}
-              options={subTypes || []}
-              getOptionValue={(o: SubType) => o?.id?.toString()}
-              getOptionLabel={(o: SubType) => o.name}
-              {...register("sub_type_id")}
-            ></ControlledSelectV2>
-          </Grid>
-          <Grid item xs={12}>
-            <ETFormLabel required>Project Description</ETFormLabel>
-            <TextField
-              fullWidth
-              multiline
-              rows={4}
-              {...register("description")}
-              error={!!errors?.description?.message}
-              helperText={errors?.description?.message?.toString()}
-            />
-          </Grid>
-          <Divider style={{ width: "100%", marginTop: "10px" }} />
-          <Grid item xs={12}>
-            <ETFormLabel required>Location Description</ETFormLabel>
-            <TextField
-              placeholder="Provide a detailed description of a project's location"
-              fullWidth
-              multiline
-              rows={3}
-              {...register("address")}
-              error={!!errors?.address?.message}
-              helperText={errors?.address?.message?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Latitude</ETFormLabel>
-            <TextField
-              placeholder="e.g. 22.2222"
-              fullWidth
-              {...register("latitude")}
-              error={!!errors?.latitude?.message}
-              helperText={errors?.latitude?.message?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Longitude</ETFormLabel>
-            <TextField
-              placeholder="e.g. -22.2222"
-              fullWidth
-              {...register("longitude")}
-              error={!!errors?.longitude?.message}
-              helperText={errors?.longitude?.message?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>ENV Region</ETFormLabel>
-            <ControlledSelectV2
-              placeholder="Select"
-              key={`env_select_${formValues.region_id_env}`}
-              helperText={errors?.region_id_env?.message?.toString()}
-              defaultValue={(ctx.item as Project)?.region_id_env}
-              options={envRegions || []}
-              getOptionValue={(o: Region) => o?.id?.toString()}
-              getOptionLabel={(o: Region) => o?.name}
-              {...register("region_id_env")}
-            ></ControlledSelectV2>
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>NRS Region</ETFormLabel>
-            <ControlledSelectV2
-              placeholder="Select"
-              key={`nrs_select_${formValues.region_id_flnro}`}
-              helperText={errors?.region_id_flnro?.message?.toString()}
-              defaultValue={(ctx.item as Project)?.region_id_flnro}
-              options={nrsRegions || []}
-              getOptionValue={(o: Region) => o?.id?.toString()}
-              getOptionLabel={(o: Region) => o?.name}
-              {...register("region_id_flnro")}
-            ></ControlledSelectV2>
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Capital Investment</ETFormLabel>
-            <TextField
-              fullWidth
-              {...register("capital_investment")}
-              error={!!errors?.capital_investment?.message}
-              helperText={errors?.capital_investment?.message?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>EPIC GUID</ETFormLabel>
-            <TextField
-              fullWidth
-              {...register("epic_guid")}
-              error={!!errors?.epic_guid?.message}
-              helperText={errors?.epic_guid?.message?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Est. FTE Positions in Construction</ETFormLabel>
-            <TextField
-              fullWidth
-              {...register("fte_positions_construction")}
-              error={!!errors?.fte_positions_construction?.message}
-              helperText={errors?.fte_positions_construction?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Est. FTE Positions in Operation</ETFormLabel>
-            <TextField
-              fullWidth
-              {...register("fte_positions_operation")}
-              error={!!errors?.fte_positions_operation?.message}
-              helperText={errors?.fte_positions_operation?.toString()}
-            />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Certificate Number</ETFormLabel>
-            <TextField helperText fullWidth {...register("ea_certificate")} />
-          </Grid>
-          <Grid item xs={6}>
-            <ETFormLabel>Abbreviation</ETFormLabel>
-            <TextField
-              helperText
-              fullWidth
-              placeholder="EDRMS retrieval code"
-              {...register("abbreviation")}
-            />
+          <Grid
+            container
+            spacing={2}
+            sx={{
+              backgroundColor: Palette.neutral.bg.light,
+              padding: "24px 40px",
+            }}
+          >
+            <Grid item xs={6}>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  paddingTop: "3px",
+                }}
+              >
+                <ETFormLabel required>Name</ETFormLabel>
+                <ETFormLabel>
+                  <Box
+                    sx={{
+                      opacity: disabled ? "100" : "0",
+                      cursor: "pointer",
+                    }}
+                    component="img"
+                    src={LockClosed}
+                    alt="Lock"
+                  />
+                </ETFormLabel>
+              </Box>
+              <TextField
+                placeholder="Project Name"
+                disabled={disabled}
+                variant="outlined"
+                fullWidth
+                error={!!errors?.name?.message}
+                helperText={errors?.name?.message?.toString()}
+                {...register("name")}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  paddingTop: "3px",
+                }}
+              >
+                <ETFormLabel required>Proponent</ETFormLabel>
+                <ETFormLabel>
+                  <Box
+                    sx={{
+                      opacity: disabled ? "100" : "0",
+                      cursor: "pointer",
+                    }}
+                    component="img"
+                    src={LockClosed}
+                    alt="Lock"
+                  />
+                </ETFormLabel>
+              </Box>
+              <ControlledSelectV2
+                placeholder="Select"
+                disabled={disabled}
+                key={`proponent_select_${formValues.proponent_id}`}
+                helperText={errors?.proponent_id?.message?.toString()}
+                defaultValue={(ctx.item as Project)?.proponent_id}
+                options={proponents || []}
+                getOptionValue={(o: Proponent) => o?.id?.toString()}
+                getOptionLabel={(o: Proponent) => o.name}
+                {...register("proponent_id")}
+              ></ControlledSelectV2>
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel required>Type</ETFormLabel>
+              <ControlledSelectV2
+                placeholder="Select"
+                key={`type_select_${formValues.type_id}`}
+                helperText={errors?.type_id?.message?.toString()}
+                defaultValue={(ctx.item as Project)?.type_id}
+                options={types || []}
+                getOptionValue={(o: Type) => o?.id?.toString()}
+                getOptionLabel={(o: Type) => o.name}
+                {...register("type_id")}
+              ></ControlledSelectV2>
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel required>Subtypes</ETFormLabel>
+              <ControlledSelectV2
+                placeholder="Select"
+                key={`subtype_select_${formValues.sub_type_id}`}
+                helperText={errors?.sub_type_id?.message?.toString()}
+                defaultValue={(ctx.item as Project)?.sub_type_id}
+                options={subTypes || []}
+                getOptionValue={(o: SubType) => o?.id?.toString()}
+                getOptionLabel={(o: SubType) => o.name}
+                {...register("sub_type_id")}
+              ></ControlledSelectV2>
+            </Grid>
+            <Grid item xs={12}>
+              <ETFormLabel required>Project Description</ETFormLabel>
+              <TextField
+                fullWidth
+                multiline
+                rows={4}
+                {...register("description")}
+                error={!!errors?.description?.message}
+                helperText={errors?.description?.message?.toString()}
+              />
+            </Grid>
           </Grid>
           <Grid
-            item
-            xs={3}
+            container
+            columnSpacing={2}
+            rowSpacing={2}
             sx={{
-              paddingLeft: "0px",
+              padding: "0px 40px 24px 40px",
+              mt: 0,
+              backgroundColor: Palette.white,
+              borderTop: `1px solid ${Palette.neutral.bg.dark}`,
             }}
           >
-            <ControlledSwitch
-              sx={{ paddingLeft: "0px", marginRight: "10px" }}
-              defaultChecked={(ctx.item as Project)?.is_active}
-              {...register("is_active")}
-            />
-            <ETFormLabel id="active">Active</ETFormLabel>
+            <Grid item xs={12}>
+              <ETFormLabel required>Location Description</ETFormLabel>
+              <TextField
+                placeholder="Provide a detailed description of a project's location"
+                fullWidth
+                multiline
+                rows={3}
+                {...register("address")}
+                error={!!errors?.address?.message}
+                helperText={errors?.address?.message?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>Latitude</ETFormLabel>
+              <TextField
+                placeholder="e.g. 22.2222"
+                fullWidth
+                {...register("latitude")}
+                error={!!errors?.latitude?.message}
+                helperText={errors?.latitude?.message?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>Longitude</ETFormLabel>
+              <TextField
+                placeholder="e.g. -22.2222"
+                fullWidth
+                {...register("longitude")}
+                error={!!errors?.longitude?.message}
+                helperText={errors?.longitude?.message?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>ENV Region</ETFormLabel>
+              <ControlledSelectV2
+                placeholder="Select"
+                key={`env_select_${formValues.region_id_env}`}
+                helperText={errors?.region_id_env?.message?.toString()}
+                defaultValue={(ctx.item as Project)?.region_id_env}
+                options={envRegions || []}
+                getOptionValue={(o: Region) => o?.id?.toString()}
+                getOptionLabel={(o: Region) => o?.name}
+                {...register("region_id_env")}
+              ></ControlledSelectV2>
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>NRS Region</ETFormLabel>
+              <ControlledSelectV2
+                placeholder="Select"
+                key={`nrs_select_${formValues.region_id_flnro}`}
+                helperText={errors?.region_id_flnro?.message?.toString()}
+                defaultValue={(ctx.item as Project)?.region_id_flnro}
+                options={nrsRegions || []}
+                getOptionValue={(o: Region) => o?.id?.toString()}
+                getOptionLabel={(o: Region) => o?.name}
+                {...register("region_id_flnro")}
+              ></ControlledSelectV2>
+            </Grid>
           </Grid>
-          <Grid item xs={3}>
-            <ControlledSwitch
-              sx={{ paddingLeft: "0px", marginRight: "10px" }}
-              defaultChecked={(ctx.item as Project)?.is_project_closed}
-              {...register("is_project_closed")}
-            />
-            <ETFormLabel id="active">Closed</ETFormLabel>
+          <Grid
+            container
+            spacing={2}
+            sx={{
+              mt: 0,
+              backgroundColor: Palette.neutral.bg.light,
+              padding: "0px 40px 16px 40px",
+              borderTop: `1px solid ${Palette.neutral.bg.dark}`,
+            }}
+          >
+            <Grid item xs={6}>
+              <ETFormLabel>Capital Investment</ETFormLabel>
+              <TextField
+                fullWidth
+                {...register("capital_investment")}
+                error={!!errors?.capital_investment?.message}
+                helperText={errors?.capital_investment?.message?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>EPIC GUID</ETFormLabel>
+              <TextField
+                fullWidth
+                {...register("epic_guid")}
+                error={!!errors?.epic_guid?.message}
+                helperText={errors?.epic_guid?.message?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>Est. FTE Positions in Construction</ETFormLabel>
+              <TextField
+                fullWidth
+                {...register("fte_positions_construction")}
+                error={!!errors?.fte_positions_construction?.message}
+                helperText={errors?.fte_positions_construction?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>Est. FTE Positions in Operation</ETFormLabel>
+              <TextField
+                fullWidth
+                {...register("fte_positions_operation")}
+                error={!!errors?.fte_positions_operation?.message}
+                helperText={errors?.fte_positions_operation?.toString()}
+              />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>Certificate Number</ETFormLabel>
+              <TextField helperText fullWidth {...register("ea_certificate")} />
+            </Grid>
+            <Grid item xs={6}>
+              <ETFormLabel>Abbreviation</ETFormLabel>
+              <TextField
+                helperText
+                fullWidth
+                placeholder="EDRMS retrieval code"
+                {...register("abbreviation")}
+              />
+            </Grid>
+            <Grid
+              item
+              xs={3}
+              sx={{
+                paddingLeft: "0px",
+              }}
+            >
+              <ControlledSwitch
+                sx={{ paddingLeft: "0px", marginRight: "10px" }}
+                defaultChecked={(ctx.item as Project)?.is_active}
+                {...register("is_active")}
+              />
+              <ETFormLabel id="active">Active</ETFormLabel>
+            </Grid>
+            <Grid item xs={3}>
+              <ControlledSwitch
+                sx={{ paddingLeft: "0px", marginRight: "10px" }}
+                defaultChecked={(ctx.item as Project)?.is_project_closed}
+                {...register("is_project_closed")}
+              />
+              <ETFormLabel id="active">Closed</ETFormLabel>
+            </Grid>
           </Grid>
         </Grid>
       </FormProvider>
diff --git a/epictrack-web/src/components/project/ProjectList.tsx b/epictrack-web/src/components/project/ProjectList.tsx
index bba8ff08e..dd1209e66 100644
--- a/epictrack-web/src/components/project/ProjectList.tsx
+++ b/epictrack-web/src/components/project/ProjectList.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { MRT_ColumnDef } from "material-react-table";
 import { Edit as EditIcon, Delete as DeleteIcon } from "@mui/icons-material";
-import { Box, Button, Chip, Grid, IconButton } from "@mui/material";
+import { Box, Button, Grid, IconButton } from "@mui/material";
 import ProjectForm from "./ProjectForm";
 import { Project } from "../../models/project";
 import MasterTrackTable from "../shared/MasterTrackTable";
@@ -9,31 +9,25 @@ import { ETGridTitle, ETPageContainer } from "../shared";
 import { MasterContext } from "../shared/MasterContext";
 import projectService from "../../services/projectService/projectService";
 import { ActiveChip, InactiveChip } from "../shared/chip/ETChip";
+import TrackDialog from "../shared/TrackDialog";
 
 const ProjectList = () => {
   const [envRegions, setEnvRegions] = React.useState<string[]>([]);
   const [subTypes, setSubTypes] = React.useState<string[]>([]);
   const [types, setTypes] = React.useState<string[]>([]);
   const [projectId, setProjectId] = React.useState<number>();
+  const [showProjectForm, setShowProjectForm] = React.useState<boolean>(false);
   const ctx = React.useContext(MasterContext);
 
-  React.useEffect(() => {
-    ctx.setForm(<ProjectForm projectId={projectId} />);
-  }, [projectId]);
-
   const onEdit = (id: number) => {
     setProjectId(id);
-    ctx.setShowModalForm(true);
+    setShowProjectForm(true);
   };
 
   React.useEffect(() => {
     ctx.setService(projectService);
   }, []);
 
-  React.useEffect(() => {
-    ctx.setTitle("Project");
-  }, [ctx.title]);
-
   const projects = React.useMemo(() => ctx.data as Project[], [ctx.data]);
 
   React.useEffect(() => {
@@ -51,6 +45,17 @@ const ProjectList = () => {
     setEnvRegions(envRegions);
   }, [projects]);
 
+  const onDialogClose = React.useCallback(() => {
+    setShowProjectForm(false);
+    setProjectId(undefined);
+    ctx.setItem(undefined);
+    ctx.setId(undefined);
+  }, [ctx.id]);
+
+  const onCancelHandler = () => {
+    setShowProjectForm(false);
+  };
+
   const handleDelete = (id: string) => {
     ctx.setShowDeleteDialog(true);
     ctx.setId(id);
@@ -145,7 +150,8 @@ const ProjectList = () => {
               >
                 <Button
                   onClick={() => {
-                    ctx.setShowModalForm(true);
+                    ctx.setItem(undefined);
+                    setShowProjectForm(true);
                     setProjectId(undefined);
                   }}
                   variant="contained"
@@ -156,6 +162,27 @@ const ProjectList = () => {
             )}
           />
         </Grid>
+        <TrackDialog
+          open={showProjectForm}
+          dialogTitle={
+            projectId ? (ctx.item as Project)?.name : "Create Project"
+          }
+          disableEscapeKeyDown
+          fullWidth
+          maxWidth="md"
+          okButtonText="Save"
+          cancelButtonText="Cancel"
+          isActionsRequired
+          onCancel={() => onCancelHandler()}
+          formId="project-form"
+          sx={{
+            "& .MuiDialogContent-root": {
+              padding: 0,
+            },
+          }}
+        >
+          <ProjectForm onSave={onDialogClose} projectId={projectId} />
+        </TrackDialog>
       </ETPageContainer>
     </>
   );

From 1c1dd2e3f4e4506952d027f577fc3ae81f8f7cca Mon Sep 17 00:00:00 2001
From: Tom Chapman <tchapman000@gmail.com>
Date: Tue, 17 Oct 2023 15:50:45 -0700
Subject: [PATCH 2/4] custom style to master context form

---
 .../src/components/project/ProjectForm.tsx    |  1 -
 .../src/components/project/ProjectList.tsx    | 54 ++++++-------------
 .../src/components/shared/MasterContext.tsx   |  5 ++
 3 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/epictrack-web/src/components/project/ProjectForm.tsx b/epictrack-web/src/components/project/ProjectForm.tsx
index 34de499ae..3143c8fdf 100644
--- a/epictrack-web/src/components/project/ProjectForm.tsx
+++ b/epictrack-web/src/components/project/ProjectForm.tsx
@@ -152,7 +152,6 @@ export default function ProjectForm({ ...props }) {
     ctx.onSave(data, () => {
       reset();
     });
-    props.onSave();
   };
   return (
     <>
diff --git a/epictrack-web/src/components/project/ProjectList.tsx b/epictrack-web/src/components/project/ProjectList.tsx
index dd1209e66..e5b8e790b 100644
--- a/epictrack-web/src/components/project/ProjectList.tsx
+++ b/epictrack-web/src/components/project/ProjectList.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { MRT_ColumnDef } from "material-react-table";
 import { Edit as EditIcon, Delete as DeleteIcon } from "@mui/icons-material";
-import { Box, Button, Grid, IconButton } from "@mui/material";
+import { Box, Button, Chip, Grid, IconButton } from "@mui/material";
 import ProjectForm from "./ProjectForm";
 import { Project } from "../../models/project";
 import MasterTrackTable from "../shared/MasterTrackTable";
@@ -9,25 +9,36 @@ import { ETGridTitle, ETPageContainer } from "../shared";
 import { MasterContext } from "../shared/MasterContext";
 import projectService from "../../services/projectService/projectService";
 import { ActiveChip, InactiveChip } from "../shared/chip/ETChip";
-import TrackDialog from "../shared/TrackDialog";
 
 const ProjectList = () => {
   const [envRegions, setEnvRegions] = React.useState<string[]>([]);
   const [subTypes, setSubTypes] = React.useState<string[]>([]);
   const [types, setTypes] = React.useState<string[]>([]);
   const [projectId, setProjectId] = React.useState<number>();
-  const [showProjectForm, setShowProjectForm] = React.useState<boolean>(false);
   const ctx = React.useContext(MasterContext);
 
+  React.useEffect(() => {
+    ctx.setForm(<ProjectForm projectId={projectId} />);
+  }, [projectId]);
+
   const onEdit = (id: number) => {
     setProjectId(id);
-    setShowProjectForm(true);
+    ctx.setShowModalForm(true);
   };
 
   React.useEffect(() => {
     ctx.setService(projectService);
+    ctx.setFormStyle({
+      "& .MuiDialogContent-root": {
+        padding: 0,
+      },
+    });
   }, []);
 
+  React.useEffect(() => {
+    ctx.setTitle("Project");
+  }, [ctx.title]);
+
   const projects = React.useMemo(() => ctx.data as Project[], [ctx.data]);
 
   React.useEffect(() => {
@@ -45,17 +56,6 @@ const ProjectList = () => {
     setEnvRegions(envRegions);
   }, [projects]);
 
-  const onDialogClose = React.useCallback(() => {
-    setShowProjectForm(false);
-    setProjectId(undefined);
-    ctx.setItem(undefined);
-    ctx.setId(undefined);
-  }, [ctx.id]);
-
-  const onCancelHandler = () => {
-    setShowProjectForm(false);
-  };
-
   const handleDelete = (id: string) => {
     ctx.setShowDeleteDialog(true);
     ctx.setId(id);
@@ -150,8 +150,7 @@ const ProjectList = () => {
               >
                 <Button
                   onClick={() => {
-                    ctx.setItem(undefined);
-                    setShowProjectForm(true);
+                    ctx.setShowModalForm(true);
                     setProjectId(undefined);
                   }}
                   variant="contained"
@@ -162,27 +161,6 @@ const ProjectList = () => {
             )}
           />
         </Grid>
-        <TrackDialog
-          open={showProjectForm}
-          dialogTitle={
-            projectId ? (ctx.item as Project)?.name : "Create Project"
-          }
-          disableEscapeKeyDown
-          fullWidth
-          maxWidth="md"
-          okButtonText="Save"
-          cancelButtonText="Cancel"
-          isActionsRequired
-          onCancel={() => onCancelHandler()}
-          formId="project-form"
-          sx={{
-            "& .MuiDialogContent-root": {
-              padding: 0,
-            },
-          }}
-        >
-          <ProjectForm onSave={onDialogClose} projectId={projectId} />
-        </TrackDialog>
       </ETPageContainer>
     </>
   );
diff --git a/epictrack-web/src/components/shared/MasterContext.tsx b/epictrack-web/src/components/shared/MasterContext.tsx
index 1d565c833..8593734d5 100644
--- a/epictrack-web/src/components/shared/MasterContext.tsx
+++ b/epictrack-web/src/components/shared/MasterContext.tsx
@@ -27,6 +27,7 @@ interface MasterContextProps {
   setForm: Dispatch<SetStateAction<React.ReactElement>>;
   setFormId: Dispatch<SetStateAction<string | undefined>>;
   onDialogClose(event: any, reason: any): any;
+  setFormStyle: Dispatch<SetStateAction<MasterBase>>;
 }
 
 export const MasterContext = createContext<MasterContextProps>({
@@ -47,6 +48,7 @@ export const MasterContext = createContext<MasterContextProps>({
   setForm: () => ({}),
   setFormId: () => ({}),
   onDialogClose: (event: any, reason: any) => ({}),
+  setFormStyle: () => ({}),
 });
 
 export const MasterProvider = ({
@@ -69,6 +71,7 @@ export const MasterProvider = ({
   const [form, setForm] = React.useState<React.ReactElement>(() => <></>);
   const [formId, setFormId] = React.useState<string | undefined>();
   const [showModalForm, setShowModalForm] = React.useState<boolean>(false);
+  const [formStyle, setFormStyle] = React.useState<MasterBase>();
 
   React.useEffect(() => {
     if (id && !showDeleteDialog) {
@@ -197,6 +200,7 @@ export const MasterProvider = ({
         setForm,
         setFormId,
         onDialogClose,
+        setFormStyle,
       }}
     >
       {children}
@@ -241,6 +245,7 @@ export const MasterProvider = ({
         onCancel={() => onDialogClose()}
         formId={formId}
         // onOk={() => deleteItem(id)}
+        sx={formStyle}
       >
         {form}
       </TrackDialog>

From a847086fdf3d833484176978dc12653fbef2af8b Mon Sep 17 00:00:00 2001
From: Tom Chapman <tchapman000@gmail.com>
Date: Wed, 18 Oct 2023 13:59:58 -0700
Subject: [PATCH 3/4] changed formStyle type

---
 epictrack-web/src/components/shared/MasterContext.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/epictrack-web/src/components/shared/MasterContext.tsx b/epictrack-web/src/components/shared/MasterContext.tsx
index 8593734d5..1d80886d2 100644
--- a/epictrack-web/src/components/shared/MasterContext.tsx
+++ b/epictrack-web/src/components/shared/MasterContext.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction, createContext } from "react";
 import { MasterBase } from "../../models/type";
 import ServiceBase from "../../services/common/serviceBase";
 import TrackDialog from "./TrackDialog";
-import { Backdrop, CircularProgress } from "@mui/material";
+import { Backdrop, CircularProgress, SxProps } from "@mui/material";
 import { showNotification } from "./notificationProvider";
 import { COMMON_ERROR_MESSAGE } from "../../constants/application-constant";
 import { getAxiosError } from "../../utils/axiosUtils";
@@ -71,7 +71,7 @@ export const MasterProvider = ({
   const [form, setForm] = React.useState<React.ReactElement>(() => <></>);
   const [formId, setFormId] = React.useState<string | undefined>();
   const [showModalForm, setShowModalForm] = React.useState<boolean>(false);
-  const [formStyle, setFormStyle] = React.useState<MasterBase>();
+  const [formStyle, setFormStyle] = React.useState<SxProps>();
 
   React.useEffect(() => {
     if (id && !showDeleteDialog) {

From 13e6cdff26d2e40d4b91f550346ad19bc6176a36 Mon Sep 17 00:00:00 2001
From: Tom Chapman <tchapman000@gmail.com>
Date: Wed, 18 Oct 2023 14:29:28 -0700
Subject: [PATCH 4/4] type change

---
 epictrack-web/src/components/shared/MasterContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/epictrack-web/src/components/shared/MasterContext.tsx b/epictrack-web/src/components/shared/MasterContext.tsx
index 1d80886d2..525027c36 100644
--- a/epictrack-web/src/components/shared/MasterContext.tsx
+++ b/epictrack-web/src/components/shared/MasterContext.tsx
@@ -27,7 +27,7 @@ interface MasterContextProps {
   setForm: Dispatch<SetStateAction<React.ReactElement>>;
   setFormId: Dispatch<SetStateAction<string | undefined>>;
   onDialogClose(event: any, reason: any): any;
-  setFormStyle: Dispatch<SetStateAction<MasterBase>>;
+  setFormStyle: Dispatch<SetStateAction<SxProps | undefined>>;
 }
 
 export const MasterContext = createContext<MasterContextProps>({