Add pdf download

Author: Warren-SJ

frontend/components/InspectionDetailsPanel.tsx

@@ -27,6 +27,7 @@ import {
   useCallback,
 } from "react";
 import { apiUrl, authHeaders } from "@/lib/api";
+import { downloadMaintenanceReportPdf } from "@/lib/maintenance-report";
 
 const faultToToggleKey = (
   fault: string | null | undefined
@@ -463,6 +464,7 @@ const InspectionDetailsPanel = ({
   const [maintenanceModalMode, setMaintenanceModalMode] = useState<"form" | "view">("form");
   const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
   const [isSavingMaintenance, setIsSavingMaintenance] = useState(false);
+  const [isReportGenerating, setIsReportGenerating] = useState(false);
 
   const transformer = useMemo(
     () =>
@@ -1634,6 +1636,32 @@ const InspectionDetailsPanel = ({
     }
   };
 
+  const handleDownloadMaintenanceReport = async () => {
+    if (!maintenanceRecord || isReportGenerating) return;
+    setIsReportGenerating(true);
+    try {
+      await downloadMaintenanceReportPdf({
+        inspection,
+        maintenance: maintenanceRecord,
+        annotations: {
+          boxes: storedBoxes,
+          faults: storedFaultTypes,
+          annotatedBy: storedAnnotatedBy,
+          severity: storedSeverity,
+          comments: storedComments,
+        },
+        imageUrl: storedImageUrl,
+      });
+    } catch (error) {
+      console.error("Failed to download maintenance report", error);
+      if (typeof window !== "undefined") {
+        window.alert("Unable to generate the maintenance report. Please try again.");
+      }
+    } finally {
+      setIsReportGenerating(false);
+    }
+  };
+
   const uploadBaseline = async (file: File, weather: string) => {
     if (!transformer?.id) return;
     const form = new FormData();
@@ -1736,6 +1764,29 @@ const InspectionDetailsPanel = ({
             </svg>
             <span>{isExporting ? "Preparing…" : "Export data"}</span>
           </button>
+          <button
+            type="button"
+            onClick={handleDownloadMaintenanceReport}
+            disabled={!maintenanceRecord || maintenanceLoading || isReportGenerating}
+            className="inline-flex items-center gap-2 px-3 py-1 text-sm border rounded custombutton disabled:opacity-60 disabled:cursor-not-allowed"
+            title="Download the maintenance form with annotations as a PDF"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              viewBox="0 0 24 24"
+            >
+              <path d="M6 2h9l4 4v16H6z" />
+              <path d="M15 2v5h5" />
+              <path d="M9 13h6" />
+              <path d="M9 17h6" />
+            </svg>
+            <span>{isReportGenerating ? "Preparing…" : "Maintenance PDF"}</span>
+          </button>
           <label className="flex items-center gap-2 text-sm">
             <span>Tune model</span>
             <span className="relative inline-flex h-5 w-10 items-center">

frontend/components/MaintenanceAnnotationPreview.tsx

@@ -35,6 +35,7 @@ interface MaintenanceAnnotationPreviewProps {
   error?: string | null;
   emptyMessage?: string;
   className?: string;
+  resetKey?: string | number;
 }
 
 const MaintenanceAnnotationPreview = ({
@@ -49,6 +50,7 @@ const MaintenanceAnnotationPreview = ({
   error = null,
   emptyMessage = "No annotations available for this inspection.",
   className = "",
+  resetKey,
 }: MaintenanceAnnotationPreviewProps) => {
   const normalizedBoxes = useMemo(() => {
     if (!Array.isArray(boxes)) return [];
@@ -111,13 +113,6 @@ const MaintenanceAnnotationPreview = ({
     [legendEntries, normalizedBoxes]
   );
 
-  const overlayResetKey = useMemo(() => {
-    const boxSignature = normalizedBoxes
-      .map((box) => box.map((value) => Math.round(value)).join(","))
-      .join("|");
-    return `${imageUrl ?? "none"}-${boxSignature}`;
-  }, [imageUrl, normalizedBoxes]);
-
   const hasImage = typeof imageUrl === "string" && imageUrl.length > 0;
   const hasAnnotations = normalizedBoxes.length > 0;
 
@@ -155,8 +150,8 @@ const MaintenanceAnnotationPreview = ({
             boxes={normalizedBoxes}
             boxInfo={overlayInfo}
             toggles={TOGGLES_ALWAYS_ON}
-            resetKey={overlayResetKey}
             containerClassName="w-full h-64 border border-gray-200 dark:border-gray-700 rounded overflow-hidden"
+            resetKey={resetKey}
           />
         </div>
         <ol className="mt-3 space-y-2 text-xs text-gray-700 dark:text-gray-300">