Requirements

compliance-web/src/components/App/Complaints/ComplaintFormUtils.ts

@@ -8,6 +8,7 @@ import { Topic } from "@/models/Topic";
 import {
   REGEX_EMAIL,
   REGEX_PHONE_NUMBER,
+  RequirementSourceEnum,
 } from "@/utils/constants";
 import dateUtils from "@/utils/dateUtils";
 import { Dayjs } from "dayjs";
@@ -19,17 +20,6 @@ export enum ComplaintSourceEnum {
   OTHER = "4",
 }
 
-export enum RequirementSourceEnum {
-  SCHEDULE_B = "1",
-  EAC = "3",
-  CPD = "4",
-  ACT2018 = "5",
-  COMPLAINCE_AGREEMENT = "6",
-  ACT2022 = "7",
-  NOT_EA_ACT = "8",
-  OTHER = "9",
-}
-
 export const ComplaintFormSchema = yup.object().shape({
   concernDescription: yup
     .string()

compliance-web/src/components/App/Complaints/Profile/ComplaintGeneralInformation.tsx

@@ -1,10 +1,8 @@
-import {
-  ComplaintSourceEnum,
-  RequirementSourceEnum,
-} from "@/components/App/Complaints/ComplaintFormUtils";
+import { ComplaintSourceEnum } from "@/components/App/Complaints/ComplaintFormUtils";
 import FileProfileProperty from "@/components/App/FileProfileProperty";
 import { Complaint } from "@/models/Complaint";
 import { useMenuStore } from "@/store/menuStore";
+import { RequirementSourceEnum } from "@/utils/constants";
 import dateUtils from "@/utils/dateUtils";
 import { EditRounded } from "@mui/icons-material";
 import { Box, Button, Typography } from "@mui/material";
@@ -22,7 +20,11 @@ const ComplaintGeneralInformation: React.FC<
   const { appHeaderHeight } = useMenuStore();
 
   const generalProperties = [
-    { name: "Case File", value: complaintData.case_file.case_file_number, link: true},
+    {
+      name: "Case File",
+      value: complaintData.case_file.case_file_number,
+      link: true,
+    },
     { name: "Project Name", value: complaintData.case_file?.project?.name },
     {
       name: "Concern Description",
@@ -158,8 +160,8 @@ const ComplaintGeneralInformation: React.FC<
             key={property.name}
             propertyName={property.name}
             propertyValue={property.value}
-            linksList={property.link ? [property.value] : null}
-            linkRoute={property.link ? "/ce-database/case-files" : null}
+            linksList={property.link ? [property.value] : undefined}
+            linkRoute={property.link ? "/ce-database/case-files" : undefined}
           />
         ))}
       </Box>

compliance-web/src/components/App/Complaints/RequirementSourceForm.tsx

@@ -4,14 +4,14 @@ import { FC, useEffect } from "react";
 import { RequirementSource } from "@/models/RequirementSource";
 import { BCDesignTokens } from "epic.theme";
 import { useFormContext, useWatch } from "react-hook-form";
-import { RequirementSourceEnum } from "./ComplaintFormUtils";
 import { Topic } from "@/models/Topic";
 import { useDrawer } from "@/store/drawerStore";
 import DynamicInputField, {
   DynamicInputFieldConfig,
 } from "@/components/App/DynamicInputField";
 import { useModal } from "@/store/modalStore";
 import ConfirmationModal from "@/components/Shared/Popups/ConfirmationModal";
+import { RequirementSourceEnum } from "@/utils/constants";
 
 type RequirementSourceFormProps = {
   requirementSourceList: RequirementSource[];
@@ -151,6 +151,7 @@ const RequirementSourceForm: FC<RequirementSourceFormProps> = ({
     [RequirementSourceEnum.OTHER]: [
       sharedRequirementSourceField("description", "Description"),
     ],
+    [RequirementSourceEnum.EACA]: [sharedRequirementSourceField()],
   };
 
   const isRequirementSourceSelected = Object.values(

compliance-web/src/components/App/ContinuationReports/ContinuationReport.tsx

@@ -27,13 +27,15 @@ export type ContinuationReportContextType = {
   contextType: string;
   contextId: number;
   allowCreateEntry?: boolean;
+  isInspection?: boolean;
 };
 
 export default function ContinuationReport({
   caseFileId,
   contextType,
   contextId,
   allowCreateEntry,
+  isInspection,
 }: ContinuationReportContextType) {
   const queryClient = useQueryClient();
   const { appHeaderHeight } = useMenuStore();
@@ -43,6 +45,8 @@ export default function ContinuationReport({
   const [searchText, setSearchText] = useState("");
   const [debouncedSearchText, setDebouncedSearchText] = useState("");
 
+  const inspectionOffset = isInspection ? 28 : 0;
+
   // Debounce effect
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -112,7 +116,7 @@ export default function ContinuationReport({
     <Box
       width={"40%"}
       bgcolor={BCDesignTokens.surfaceColorBackgroundLightGray}
-      height={`calc(100vh - ${appHeaderHeight + 198}px)`}
+      height={`calc(100vh - ${appHeaderHeight + 198 + inspectionOffset}px)`}
       p={3}
       pb={2}
     >
@@ -167,7 +171,7 @@ export default function ContinuationReport({
             <>
               <Box
                 sx={{
-                  height: `calc(100vh - ${appHeaderHeight + 302 + 48}px)`, // 302px is the height above the timeline, 48px is height of pagination
+                  height: `calc(100vh - ${appHeaderHeight + 302 + 48 + inspectionOffset}px)`, // 302px is the height above the timeline, 48px is height of pagination
                   overflow: "scroll",
                 }}
               >

compliance-web/src/components/App/FileProfileHeader.tsx

@@ -10,6 +10,7 @@ import { FILE_PROFILE_CONTEXT } from "@/utils/constants";
 import CaseFileActions from "@/components/App/CaseFiles/Profile/CaseFileActions";
 import InspectionFileActions from "@/components/App/Inspections/Profile/InspectionFileActions";
 import ComplaintFileActions from "@/components/App/Complaints/Profile/ComplaintFileActions";
+import InspectionFileTabs from "@/components/App/Inspections/Profile/InspectionFileTabs";
 
 interface FileProfileHeaderProps {
   fileNumber: string;
@@ -26,44 +27,53 @@ const FileProfileHeader: React.FC<FileProfileHeaderProps> = ({
 }) => {
   return (
     <Box
+      id="file-profile-header"
       display={"flex"}
-      justifyContent={"space-between"}
+      flexDirection={"column"}
       bgcolor={BCDesignTokens.surfaceColorBackgroundLightGray}
-      padding={"1.5rem 2.5rem 1.5rem 3.75rem"}
     >
-      <Box display={"flex"} flexDirection={"column"} gap={1}>
-        <BreadcrumbsNav items={breadcrumbs} />
-        <Box display={"flex"} gap={1} alignItems={"center"}>
-          <Typography variant="h3">{fileNumber}</Typography>
-          <Chip
-            label={status}
-            color={status?.toLowerCase() === "open" ? "success" : "error"}
-            variant="outlined"
-            size="small"
-          />
-        </Box>
-      </Box>
-      <Box display={"flex"} gap={1}>
-        {profileContext === FILE_PROFILE_CONTEXT.CASEFILE && (
-          <>
-            <CaseFileCreateInspection
-              fileNumber={fileNumber}
-              disabled={status.toLowerCase() === "closed"}
-            />
-            <CaseFileCreateComplaint
-              fileNumber={fileNumber}
-              disabled={status.toLowerCase() === "closed"}
+      <Box
+        display={"flex"}
+        justifyContent={"space-between"}
+        padding={"1.5rem 2.5rem 1.5rem 3.75rem"}
+      >
+        <Box display={"flex"} flexDirection={"column"} gap={1}>
+          <BreadcrumbsNav items={breadcrumbs} />
+          <Box display={"flex"} gap={1} alignItems={"center"}>
+            <Typography variant="h3">{fileNumber}</Typography>
+            <Chip
+              label={status}
+              color={status?.toLowerCase() === "open" ? "success" : "error"}
+              variant="outlined"
+              size="small"
             />
-            <CaseFileActions status={status} fileNumber={fileNumber} />
-          </>
-        )}
-        {profileContext === FILE_PROFILE_CONTEXT.COMPLAINT && (
-          <ComplaintFileActions status={status} fileNumber={fileNumber} />
-        )}
-        {profileContext === FILE_PROFILE_CONTEXT.INSPECTION && (
-          <InspectionFileActions status={status} fileNumber={fileNumber} />
-        )}
+          </Box>
+        </Box>
+        <Box display={"flex"} gap={1}>
+          {profileContext === FILE_PROFILE_CONTEXT.CASEFILE && (
+            <>
+              <CaseFileCreateInspection
+                fileNumber={fileNumber}
+                disabled={status.toLowerCase() === "closed"}
+              />
+              <CaseFileCreateComplaint
+                fileNumber={fileNumber}
+                disabled={status.toLowerCase() === "closed"}
+              />
+              <CaseFileActions status={status} fileNumber={fileNumber} />
+            </>
+          )}
+          {profileContext === FILE_PROFILE_CONTEXT.COMPLAINT && (
+            <ComplaintFileActions status={status} fileNumber={fileNumber} />
+          )}
+          {profileContext === FILE_PROFILE_CONTEXT.INSPECTION && (
+            <InspectionFileActions status={status} fileNumber={fileNumber} />
+          )}
+        </Box>
       </Box>
+      {profileContext === FILE_PROFILE_CONTEXT.INSPECTION && (
+        <InspectionFileTabs />
+      )}
     </Box>
   );
 };

compliance-web/src/components/App/Inspections/InspectionDrawer.tsx

@@ -30,6 +30,7 @@ import {
   InspectionFormSchema,
   InspectionSchemaType,
 } from "./InspectionFormUtils";
+import { StaffUser } from "@/models/Staff";
 
 type InspectionDrawerProps = {
   onSubmit: (submitMsg: string) => void;

compliance-web/src/components/App/Inspections/Profile/InspectionFileTabs.tsx

@@ -0,0 +1,44 @@
+import { useTab } from "@/store/tabStore";
+import { Box, Tab, Tabs } from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+
+interface InspectionFileTabsProps {}
+
+const InspectionFileTabs: React.FC<InspectionFileTabsProps> = () => {
+  const { currentTab, setCurrentTab } = useTab();
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTab(newValue);
+  };
+
+  const tabStyle = {
+    minWidth: "auto",
+    minHeight: "36px",
+    padding: "0.5rem 0",
+    fontSize: BCDesignTokens.typographyFontSizeSmallBody,
+  };
+
+  return (
+    <Box>
+      <Tabs
+        value={currentTab}
+        onChange={handleChange}
+        sx={{
+          minHeight: "36px",
+          marginTop: "-0.5rem",
+          paddingLeft: "3.75rem",
+          "& .MuiTabs-flexContainer": {
+            gap: "1rem",
+          },
+        }}
+      >
+        <Tab label="Details" sx={tabStyle} />
+        <Tab label="Requirements" sx={tabStyle} />
+        <Tab label="Enforcement" sx={tabStyle} />
+        <Tab label="Report" sx={tabStyle} />
+      </Tabs>
+    </Box>
+  );
+};
+
+export default InspectionFileTabs;

compliance-web/src/components/App/Inspections/Profile/InspectionGeneralInformation.tsx

@@ -1,6 +1,5 @@
 import FileProfileProperty from "@/components/App/FileProfileProperty";
 import { Inspection } from "@/models/Inspection";
-import { useMenuStore } from "@/store/menuStore";
 import dateUtils from "@/utils/dateUtils";
 import { EditRounded } from "@mui/icons-material";
 import { Box, Button, Typography } from "@mui/material";
@@ -15,8 +14,6 @@ interface InspectionGeneralInformationProps {
 const InspectionGeneralInformation: React.FC<
   InspectionGeneralInformationProps
 > = ({ inspectionData, onEdit, allowEdit }) => {
-  const { appHeaderHeight } = useMenuStore();
-
   const inAttendance = useMemo(() => {
     return inspectionData.inspectionAttendances
       ?.map((attendance) => {
@@ -62,8 +59,7 @@ const InspectionGeneralInformation: React.FC<
       display={"flex"}
       flexGrow={1}
       flexDirection={"column"}
-      width={"75%"}
-      height={`calc(100vh - ${appHeaderHeight + 158}px)`} // 158px is the height of the FileProfileHeader and the padding
+      // height={`calc(100vh - ${appHeaderHeight + 158}px)`} // 158px is the height of the FileProfileHeader and the padding
       overflow={"auto"}
     >
       <Box display={"flex"} justifyContent={"space-between"} my={3}>

compliance-web/src/components/App/Inspections/Profile/InspectionRequirements.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from "react";
+import { AddRounded } from "@mui/icons-material";
+import { Box, Button, Typography } from "@mui/material";
+import { useDrawer } from "@/store/drawerStore";
+import { notify } from "@/store/snackbarStore";
+import RequirementDrawer from "@/components/App/Inspections/Profile/Requirements/RequirementDrawer";
+
+interface InspectionRequirementsProps {}
+
+const InspectionRequirements: React.FC<InspectionRequirementsProps> = () => {
+  const { setOpen, setClose } = useDrawer();
+
+  const handleOnSubmit = useCallback(
+    (submitMsg: string) => {
+      setClose();
+      notify.success(submitMsg);
+    },
+    [setClose]
+  );
+
+  const handleOpenRequirementModal = useCallback(() => {
+    setOpen({
+      content: (
+        <RequirementDrawer
+          onSubmit={handleOnSubmit}
+        />
+      ),
+      width: "1228px",
+    });
+  }, [setOpen, handleOnSubmit]);
+
+  return (
+    <Box
+      display={"flex"}
+      flexGrow={1}
+      flexDirection={"column"}
+      overflow={"auto"}
+    >
+      <Box display={"flex"} justifyContent={"space-between"} my={3}>
+        <Typography variant="h6">Requirements</Typography>
+        <Button
+          variant="text"
+          color="primary"
+          size="small"
+          onClick={handleOpenRequirementModal}
+          startIcon={<AddRounded />}
+        >
+          New Requirement
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default InspectionRequirements;