Merge pull request #285 from nitheesh-aot/approval-persist

Approval persist

Author: nitheesh-aot

compliance-api/src/compliance_api/schemas/inspection_approval.py

@@ -89,7 +89,7 @@ def validate_fields(
                     "invalid": f"Not a valid datetime. Expected format: {INPUT_DATE_TIME_FORMAT}."
                 },
             ),
-            "date_respose": fields.DateTime(
+            "date_response": fields.DateTime(
                 format=INPUT_DATE_TIME_FORMAT,
                 metadata={
                     "description": "The date when the actual response received from proponent in ISO 8601 format."

compliance-web/src/components/App/Inspections/Profile/Reports/OfficerSteppr/OfficerStepper.tsx

@@ -4,6 +4,13 @@ import { useState } from "react";
 import PreliminaryReview from "./PreliminaryReview";
 import RegPartyResponse from "./RegPartyResponse";
 import IRVersionSelect from "./IRVersionSelect";
+import { useUpdateIRApproval } from "@/hooks/useInspectionReports";
+import { useReportStore } from "../reportStore";
+import {
+  InspectionRecordApprovalPayload,
+  IRApproval,
+} from "@/models/IRApproval";
+import { notify } from "@/store/snackbarStore";
 
 const steps = [
   "Preliminary Review",
@@ -12,6 +19,12 @@ const steps = [
 ];
 
 export default function OfficerStepper() {
+  const {
+    inspectionData,
+    inspectionReportsData,
+    irApprovalsData,
+    setIRApprovalsData,
+  } = useReportStore();
   const [activeStep, setActiveStep] = useState(0);
 
   const handleNext = () => {
@@ -26,6 +39,28 @@ export default function OfficerStepper() {
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
   };
 
+  const onSuccess = (data: IRApproval) => {
+    setIRApprovalsData([data]);
+    notify.success("Inspection record approval updated");
+  };
+
+  const { mutateAsync: updateIRApprovalStatusAsync } =
+    useUpdateIRApproval(onSuccess);
+
+  const onUpdateIRApprovalStep = async (
+    approvalPayloads: InspectionRecordApprovalPayload[]
+  ) => {
+    for (const approvalPayload of approvalPayloads) {
+      await updateIRApprovalStatusAsync({
+        inspectionId: inspectionData?.id ?? 0,
+        inspectionRecordId: inspectionReportsData?.id ?? 0,
+        approvalId: irApprovalsData?.[0]?.id ?? 0,
+        approvalPayload,
+      });
+    }
+    handleNext();
+  };
+
   return (
     <Box
       sx={{
@@ -53,9 +88,18 @@ export default function OfficerStepper() {
         })}
       </Stepper>
       <Box sx={{ p: 2 }}>
-        {activeStep === 0 && <PreliminaryReview onNext={handleNext} />}
+        {activeStep === 0 && (
+          <PreliminaryReview
+            onUpdateIRApprovalStep={onUpdateIRApprovalStep}
+            nextStep={handleNext}
+          />
+        )}
         {activeStep === 1 && (
-          <RegPartyResponse onNext={handleNext} onBack={handleBack} />
+          <RegPartyResponse
+            onUpdateIRApprovalStep={onUpdateIRApprovalStep}
+            onNext={handleNext}
+            onBack={handleBack}
+          />
         )}
         {activeStep === 2 && (
           <IRVersionSelect onNext={handleNext} onBack={handleBack} />

compliance-web/src/components/App/Inspections/Profile/Reports/OfficerSteppr/PreliminaryReview.tsx

@@ -6,6 +6,9 @@ import dayjs from "dayjs";
 import { FormProvider, useForm } from "react-hook-form";
 import * as yup from "yup";
 import ControlledDateField from "@/components/Shared/Controlled/ControlledDateField";
+import { InspectionRecordApprovalPayload } from "@/models/IRApproval";
+import dateUtils from "@/utils/dateUtils";
+import { useReportStore } from "../reportStore";
 
 const preliminaryReviewFormSchema = yup.object().shape({
   dateSent: yup
@@ -28,21 +31,54 @@ const initFormData: PreliminaryReviewSchemaType = {
 };
 
 type PreliminaryReviewProps = {
-  onNext: () => void;
+  onUpdateIRApprovalStep: (
+    approvalPayloads: InspectionRecordApprovalPayload[]
+  ) => void;
+  nextStep: () => void;
 };
 
-const PreliminaryReview: React.FC<PreliminaryReviewProps> = ({ onNext }) => {
+const PreliminaryReview: React.FC<PreliminaryReviewProps> = ({
+  onUpdateIRApprovalStep,
+  nextStep,
+}) => {
+  const { irApprovalsData } = useReportStore();
+
   const defaultValues = useMemo<PreliminaryReviewSchemaType>(() => {
+    const currentApproval = irApprovalsData?.[0];
+    if (currentApproval) {
+      return {
+        dateSent: currentApproval.date_report_sent
+          ? dayjs(currentApproval.date_report_sent)
+          : (undefined as unknown as Dayjs),
+        dueDate: currentApproval.date_expected_return
+          ? dayjs(currentApproval.date_expected_return)
+          : (undefined as unknown as Dayjs),
+      };
+    }
     return initFormData;
-  }, []);
+  }, [irApprovalsData]);
 
   const methods = useForm<PreliminaryReviewSchemaType>({
     resolver: yupResolver(preliminaryReviewFormSchema),
     mode: "onBlur",
     defaultValues,
   });
 
-  const { handleSubmit, watch, setValue, clearErrors } = methods;
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    clearErrors,
+    reset,
+    formState: { isDirty },
+  } = methods;
+
+  // Reset form with defaultValues when they change
+  useEffect(() => {
+    if (defaultValues.dateSent || defaultValues.dueDate) {
+      reset(defaultValues);
+    }
+  }, [defaultValues, reset]);
 
   // Watch for changes in dateSent
   const dateSent = watch("dateSent");
@@ -60,10 +96,29 @@ const PreliminaryReview: React.FC<PreliminaryReviewProps> = ({ onNext }) => {
   }, [dateSent, setValue, clearErrors]);
 
   const onSubmitHandler = (data: PreliminaryReviewSchemaType) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
-    // TODO: Update approvals with data
-    onNext();
+    if (isDirty) {
+      // Create an array to hold the approval payloads
+      const approvalPayloads: InspectionRecordApprovalPayload[] = [
+        {
+          field_name: "date_report_sent",
+          value: dateUtils.dateToISO(data.dateSent),
+        },
+      ];
+
+      const daysDifference = data.dueDate.diff(data.dateSent, "day");
+
+      // Only add dueDate to the payload if it's different from the default (more than 5 days)
+      if (daysDifference !== 5) {
+        approvalPayloads.push({
+          field_name: "date_expected_return",
+          value: dateUtils.dateToISO(data.dueDate),
+        });
+      }
+
+      onUpdateIRApprovalStep(approvalPayloads);
+    } else {
+      nextStep();
+    }
   };
 
   return (
@@ -96,6 +151,7 @@ const PreliminaryReview: React.FC<PreliminaryReviewProps> = ({ onNext }) => {
               label="Due Date"
               height="2rem"
               isRequired={true}
+              minDate={dateSent ?? undefined}
             />
           </Box>
           <Button variant="outlined" size="small" type="submit">

compliance-web/src/components/App/Inspections/Profile/Reports/OfficerSteppr/RegPartyResponse.tsx

@@ -1,11 +1,14 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Box, Button, Typography } from "@mui/material";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import * as yup from "yup";
-import { Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import ControlledDateField from "@/components/Shared/Controlled/ControlledDateField";
 import ControlledRadioButtonGroup from "@/components/Shared/Controlled/ControlledRadioButtonGroup";
+import { InspectionRecordApprovalPayload } from "@/models/IRApproval";
+import { useReportStore } from "../reportStore";
+import dateUtils from "@/utils/dateUtils";
 
 const regPartyResponseFormSchema = yup.object().shape({
   responseReceived: yup.string().required("Response selection is required"),
@@ -27,33 +30,70 @@ const initFormData: RegPartyResponseSchemaType = {
 };
 
 type RegPartyResponseProps = {
+  onUpdateIRApprovalStep: (
+    approvalPayloads: InspectionRecordApprovalPayload[]
+  ) => void;
   onNext: () => void;
   onBack: () => void;
 };
 
 const RegPartyResponse: React.FC<RegPartyResponseProps> = ({
+  onUpdateIRApprovalStep,
   onNext,
   onBack,
 }) => {
+  const { irApprovalsData } = useReportStore();
+
   const defaultValues = useMemo<RegPartyResponseSchemaType>(() => {
+    const currentApproval = irApprovalsData?.[0];
+    if (currentApproval) {
+      return {
+        responseReceived: currentApproval.date_response ? "yes" : "no",
+        responseDate: currentApproval.date_response
+          ? dayjs(currentApproval.date_response)
+          : (undefined as unknown as Dayjs),
+      };
+    }
     return initFormData;
-  }, []);
+  }, [irApprovalsData]);
 
   const methods = useForm<RegPartyResponseSchemaType>({
     resolver: yupResolver(regPartyResponseFormSchema),
     mode: "onBlur",
     defaultValues,
   });
 
-  const { handleSubmit, watch } = methods;
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    formState: { isDirty },
+  } = methods;
+
+  // Reset form with defaultValues when they change
+  useEffect(() => {
+    if (defaultValues.responseReceived || defaultValues.responseDate) {
+      reset(defaultValues);
+    }
+  }, [defaultValues, reset]);
 
   const responseReceived = watch("responseReceived");
 
   const onSubmitHandler = (data: RegPartyResponseSchemaType) => {
-    // eslint-disable-next-line no-console
-    console.log(data);
-    // TODO: Update approvals with data
-    onNext();
+    if (isDirty) {
+      const approvalPayloads: InspectionRecordApprovalPayload[] = [
+        {
+          field_name: "date_response",
+          value:
+            data.responseReceived === "yes" && data.responseDate
+              ? dateUtils.dateToISO(data.responseDate)
+              : "",
+        },
+      ];
+      onUpdateIRApprovalStep(approvalPayloads);
+    } else {
+      onNext();
+    }
   };
 
   return (
@@ -73,7 +113,8 @@ const RegPartyResponse: React.FC<RegPartyResponseProps> = ({
           sx={{
             display: "flex",
             flexDirection: "row",
-            justifyContent: responseReceived === "yes" ? "space-between" : "flex-end",
+            justifyContent:
+              responseReceived === "yes" ? "space-between" : "flex-end",
             alignItems: "center",
             gap: 1,
             mt: 2,

compliance-web/src/components/App/Inspections/Profile/Reports/ReportTopSection.tsx

@@ -21,6 +21,7 @@ export default function ReportTopSection() {
   const currentUser = useCurrentLoggedInUser();
 
   const {
+    queryClient,
     inspectionData,
     inspectionReportsData,
     irApprovalsData,
@@ -40,6 +41,12 @@ export default function ReportTopSection() {
     );
   }, [staffData, currentUser]);
 
+  const refetchInspectionReportsData = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["inspection-reports", inspectionData?.id],
+    });
+  };
+
   const handleSendForApproval = () => {
     setOpen({
       content: (
@@ -48,19 +55,21 @@ export default function ReportTopSection() {
           onSubmit={(message) => {
             notify.success(message);
             setClose();
+            refetchInspectionReportsData();
           }}
         />
       ),
     });
   };
 
-  const onSuccess = (data: IRApproval) => {
+  const onApprovalSuccess = (data: IRApproval) => {
     setIRApprovalsData([data]);
     notify.success("Approval status updated");
+    refetchInspectionReportsData();
   };
 
   const { mutate: updateIRApprovalStatus } =
-    useUpdateIRApprovalStatus(onSuccess);
+    useUpdateIRApprovalStatus(onApprovalSuccess);
 
   const handleApproval = (isApprove: boolean) => {
     const currentUserId =
@@ -82,8 +91,11 @@ export default function ReportTopSection() {
 
   const isDisableApprovalButton = useMemo(() => {
     return (
-      inspectionReportsData?.ir_progress ===
-        IRProgressEnum.PRELIMINARY_DEPUTY_REVIEW && !isCurrentUserApprover
+      [
+        IRProgressEnum.PRELIMINARY_DEPUTY_REVIEW,
+        IRProgressEnum.FINAL_DEPUTY_REVIEW,
+      ].includes(inspectionReportsData?.ir_progress as IRProgressEnum) &&
+      !isCurrentUserApprover
     );
   }, [inspectionReportsData, isCurrentUserApprover]);
 
@@ -96,15 +108,20 @@ export default function ReportTopSection() {
 
   const isShowApprovalButtons = useMemo(() => {
     return (
-      inspectionReportsData?.ir_progress ===
-        IRProgressEnum.PRELIMINARY_DEPUTY_REVIEW && isCurrentUserApprover
+      [
+        IRProgressEnum.PRELIMINARY_DEPUTY_REVIEW,
+        IRProgressEnum.FINAL_DEPUTY_REVIEW,
+      ].includes(inspectionReportsData?.ir_progress as IRProgressEnum) &&
+      isCurrentUserApprover
     );
   }, [inspectionReportsData, isCurrentUserApprover]);
 
   const isShowOfficerStepper = useMemo(() => {
-    return (
-      inspectionReportsData?.ir_progress === IRProgressEnum.PRELIMINARY_APPROVED
-    );
+    return [
+      IRProgressEnum.PRELIMINARY_APPROVED,
+      IRProgressEnum.FINAL_APPROVED,
+      IRProgressEnum.HOLDER_PRELIMINARY_REVIEW,
+    ].includes(inspectionReportsData?.ir_progress as IRProgressEnum);
   }, [inspectionReportsData]);
 
   return (
@@ -117,7 +134,9 @@ export default function ReportTopSection() {
           alignItems: "center",
         }}
       >
-        <Typography variant="h6">Preliminary IR</Typography>
+        <Typography variant="h6">
+          {inspectionReportsData?.ir_status?.name} IR
+        </Typography>
         <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
           {isShowSendForApprovalButton && (
             <Button