Merge pull request #179 from djnunez-aot/cr-notes-section

Create Notes Accordion

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/Note.tsx

@@ -0,0 +1,32 @@
+import { Box, Typography } from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+
+interface Note {
+  id: string;
+  note: string;
+  created_by: string;
+  date_created: string;
+}
+
+export default function Note({ note }: { note: Note }) {
+  return (
+    <Box sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "space-between",
+          mb: BCDesignTokens.layoutMarginSmall,
+        }}
+      >
+        <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
+          {note.created_by}
+        </Typography>
+        <Typography variant="subtitle1">{note.date_created}</Typography>
+      </Box>
+      <Typography key={note.id} variant="body1" sx={{ mb: 1 }}>
+        {note.note}
+      </Typography>
+    </Box>
+  );
+}

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/NotesSection.tsx

@@ -0,0 +1,117 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  TextField,
+  Typography,
+} from "@mui/material";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { BCDesignTokens } from "epic.theme";
+import EventNoteIcon from "@mui/icons-material/EventNote";
+import Note from "./Note";
+import { When } from "react-if";
+import { useState } from "react";
+
+export default function NotesSection() {
+  const mockNotes = [];
+  const [addNote, setAddNote] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  const handleAddNote = () => {
+    setAddNote(!addNote);
+    setExpanded(true);
+  };
+
+  return (
+    <Accordion
+      disableGutters
+      elevation={0}
+      sx={{
+        borderRadius: "4px",
+        border: `1px solid ${BCDesignTokens.themeBlue60}`,
+        mb: BCDesignTokens.layoutMarginLarge,
+        p: 0,
+      }}
+      expanded={expanded}
+    >
+      <AccordionSummary
+        expandIcon={null}
+        aria-controls="panel1-content"
+        id="panel1-header"
+        sx={{
+          py: 0,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "space-between",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          <Box
+            onClick={() => setExpanded(!expanded)}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <EventNoteIcon
+              htmlColor={BCDesignTokens.themeBlue60}
+              fontSize={"large"}
+              sx={{ mr: 0.5 }}
+            />
+            <Typography
+              variant="h6"
+              sx={{
+                color: "#38598A",
+              }}
+            >
+              View Notes
+            </Typography>
+            <KeyboardArrowRightIcon
+              fontSize="medium"
+              sx={{ ml: 0.5, color: "#38598A", p: 0 }}
+            />
+          </Box>
+          <Box onClick={handleAddNote}>
+            <Typography
+              variant="body1"
+              color={BCDesignTokens.typographyColorLink}
+              sx={{ cursor: "pointer" }}
+            >
+              + Add a Note
+            </Typography>
+          </Box>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>
+        <When condition={addNote}>
+          <Box sx={{ mb: BCDesignTokens.layoutMarginMedium }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
+              Notes
+            </Typography>
+            <TextField multiline fullWidth minRows={6} />
+            <Button sx={{ mr: BCDesignTokens.layoutMarginSmall }}>
+              Save Note
+            </Button>
+            <Button color="secondary" onClick={() => setAddNote(false)}>
+              Cancel
+            </Button>
+          </Box>
+        </When>
+        {mockNotes.length > 0 ? (
+          mockNotes.map((note) => <Note key={note.id} note={note} />)
+        ) : (
+          <Typography variant="body1" sx={{ mb: 1 }}>
+            No notes have been added yet.
+          </Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}

submit-web/src/components/SubmissionItem/ConsultationRecord/ConsultationRecordStaffView/ReviewSection.tsx

@@ -7,6 +7,7 @@ import { CustomRadioOptions } from "@/components/Shared/CustomRadioOptions";
 import { When } from "react-if";
 import ActionButtons from "./ActionButtons";
 import ControlledRadioGroup from "@/components/Shared/controlled/ControlledRadioGroup";
+import NotesSection from "./NotesSection";
 
 // Define Yup schema
 const consultationSchema = yup.object().shape({
@@ -107,6 +108,7 @@ export default function ReviewSection() {
                 />
               </ControlledRadioGroup>
             </When>
+            <NotesSection />
             <ActionButtons saveAndClose={handleSubmit(saveAndClose)} />
           </form>
         </FormProvider>