Merge pull request #294 from nitheesh-aot/develop

ir report html preview

Author: nitheesh-aot

compliance-api/src/compliance_api/services/inspection_record/inspection_record_builder.py

@@ -337,7 +337,7 @@ def build_requirement_details(self):
                 "requirement_id": requirement.id,
                 "requirement_findings": requirement.findings,
                 "sort_order": requirement.sort_order,
-                "compliance_finding": requirement.compliance_finding.name,
+                "compliance_finding": requirement.compliance_finding.name if requirement.compliance_finding else None,
                 "enforcement_action": (
                     "Not Applicable"
                     if requirement.compliance_finding_id

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

@@ -0,0 +1,40 @@
+import { Box, DialogContent } from "@mui/material";
+import { FC } from "react";
+import ModalTitleBar from "@/components/Shared/Modals/ModalTitleBar";
+
+type ReportPreviewModalProps = {
+  previewHtml: string;
+};
+
+const ReportPreviewModal: FC<ReportPreviewModalProps> = ({ previewHtml }) => {
+  return (
+    <>
+      <ModalTitleBar title="Report Preview" />
+      <DialogContent dividers sx={{ maxHeight: "80vh" }}>
+        {previewHtml ? (
+          <Box
+            sx={{
+              height: "100%",
+              overflow: "auto",
+              "& img": { maxWidth: "100%" },
+            }}
+            dangerouslySetInnerHTML={{ __html: previewHtml }}
+          />
+        ) : (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+            }}
+          >
+            No preview available
+          </Box>
+        )}
+      </DialogContent>
+    </>
+  );
+};
+
+export default ReportPreviewModal;

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

@@ -5,8 +5,11 @@ import {
   IRProgressEnum,
   STAFF_USER_POSITION,
 } from "@/utils/constants";
-import { useMemo } from "react";
-import { useUpdateIRApprovalStatus } from "@/hooks/useInspectionReports";
+import { useMemo, useState } from "react";
+import {
+  useInspectionRecordRender,
+  useUpdateIRApprovalStatus,
+} from "@/hooks/useInspectionReports";
 import { notify } from "@/store/snackbarStore";
 import { useReportStore } from "./reportStore";
 import { IRApproval } from "@/models/IRApproval";
@@ -15,10 +18,12 @@ import { useStaffUsersData } from "@/hooks/useStaff";
 import SendForApprovalModal from "./SendForApprovalModal";
 import { useModal } from "@/store/modalStore";
 import OfficerStepper from "./OfficerSteppr/OfficerStepper";
+import ReportPreviewModal from "./ReportPreviewModal";
 
 export default function ReportTopSection() {
   const { setOpen, setClose } = useModal();
   const currentUser = useCurrentLoggedInUser();
+  const [previewClicked, setPreviewClicked] = useState(false);
 
   const {
     queryClient,
@@ -30,6 +35,54 @@ export default function ReportTopSection() {
 
   const { data: staffData } = useStaffUsersData();
 
+  const { refetch: refetchIrRenderData } = useInspectionRecordRender(
+    inspectionData?.id ?? 0,
+    inspectionReportsData?.id ?? 0,
+    "html",
+    false
+  );
+
+  const handlePreviewClick = async () => {
+    setPreviewClicked(true);
+    try {
+      const result = await refetchIrRenderData();
+      if (result.data) {
+        setPreviewClicked(false);
+
+        if (result.data.html) {
+          // Handle HTML preview
+          const html = result.data.html ?? "";
+          setOpen({
+            content: <ReportPreviewModal previewHtml={html} />,
+            width: "612px",
+          });
+        } else {
+          // Create a Blob from the PDF data
+          const blob = new Blob([result.data], { type: "application/pdf" });
+
+          // Create a URL for the Blob
+          const url = URL.createObjectURL(blob);
+
+          // Create an anchor element and set properties for download
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = `inspection-report-${inspectionReportsData?.id || "download"}.pdf`;
+
+          // Append to body, click and clean up
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+
+          // Release the blob URL
+          URL.revokeObjectURL(url);
+        }
+      }
+    } catch (error) {
+      notify.error("Failed to generate PDF preview");
+      setPreviewClicked(false);
+    }
+  };
+
   const isCurrentUserApprover = useMemo(() => {
     return staffData?.some(
       (staff) =>
@@ -170,9 +223,14 @@ export default function ReportTopSection() {
               </Button>
             </>
           ) : null}
-          <Button variant="text" color="primary">
+          <Button
+            variant="text"
+            color="primary"
+            onClick={handlePreviewClick}
+            disabled={previewClicked}
+          >
             <PictureAsPdfOutlined sx={{ mr: 1, fontSize: 20 }} />
-            Preview
+            {previewClicked ? "Loading..." : "Preview"}
           </Button>
         </Box>
       </Box>

compliance-web/src/hooks/useInspectionReports.tsx

@@ -134,6 +134,23 @@ const updateIRApprovalStatus = ({
   });
 };
 
+const inspectionRecordRender = ({
+  inspectionId,
+  inspectionRecordId,
+  format,
+}: {
+  inspectionId: number;
+  inspectionRecordId: number;
+  format: "html" | "pdf";
+}) => {
+  return request({
+    url: `/inspections/${inspectionId}/inspection-records/${inspectionRecordId}/render`,
+    params: {
+      output_format: format,
+    },
+  });
+};
+
 export const useInspectionReportsData = (inspectionId: number) => {
   return useQuery({
     queryKey: ["inspection-reports", inspectionId],
@@ -196,3 +213,18 @@ export const useUpdateIRApprovalStatus = (onSuccess: OnSuccessType) => {
     onSuccess,
   });
 };
+
+export const useInspectionRecordRender = (
+  inspectionId: number,
+  inspectionRecordId: number,
+  format: "html" | "pdf",
+  isEnabled: boolean = true
+) => {
+  return useQuery({
+    queryKey: ["ir-render", inspectionId, inspectionRecordId],
+    queryFn: () =>
+      inspectionRecordRender({ inspectionId, inspectionRecordId, format }),
+    enabled: !!inspectionId && !!inspectionRecordId && isEnabled,
+    refetchOnWindowFocus: false,
+  });
+};