Fix cascade delete bug in UI

Author: Warren-SJ

frontend/app/inspections/[id]/page.tsx

@@ -168,10 +168,7 @@ const InspectionDetailPage = () => {
               </button>
               <button
                 onClick={() => router.push("/inspections")}
-                className="text-sm text-gray-500 hover:text-gray-700"
-              >
-                View all inspections
-              </button>
+                className="text-sm text-gray-500 hover:text-gray-700"></button>
             </div>
             {inspection && (
               <h1 className="text-2xl font-bold">

frontend/context/InspectionsContext.tsx

@@ -3,6 +3,10 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { Inspection } from "@/types/inspection";
 import { apiUrl, authHeaders } from "@/lib/api";
+import {
+  TRANSFORMER_REMOVED_EVENT,
+  TransformerRemovedDetail,
+} from "@/lib/events";
 
 const parseMaybeJson = (value: unknown): unknown => {
   if (typeof value !== "string") return value;
@@ -144,6 +148,31 @@ export function InspectionsProvider({ children }: { children: React.ReactNode })
 
   // Do not refetch on route change to avoid unnecessary reloads
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onTransformerRemoved = (event: Event) => {
+      const detail = (event as CustomEvent<TransformerRemovedDetail>).detail;
+      if (!detail) return;
+      const removedId = detail.id ?? undefined;
+      const removedNumber = detail.transformerNumber ?? undefined;
+      if (!removedId && !removedNumber) return;
+      setInspections((prev) =>
+        prev.filter((inspection) => {
+          const nestedTransformer = (inspection as unknown as { transformer?: { id?: string | null; transformerNumber?: string | null } }).transformer;
+          const matchesId = removedId && ((inspection as unknown as { transformerId?: string | null }).transformerId === removedId || nestedTransformer?.id === removedId);
+          const matchesNumber =
+            removedNumber &&
+            ((inspection.transformerNumber && inspection.transformerNumber === removedNumber) || nestedTransformer?.transformerNumber === removedNumber);
+          return !(matchesId || matchesNumber);
+        })
+      );
+    };
+    window.addEventListener(TRANSFORMER_REMOVED_EVENT, onTransformerRemoved as EventListener);
+    return () => {
+      window.removeEventListener(TRANSFORMER_REMOVED_EVENT, onTransformerRemoved as EventListener);
+    };
+  }, []);
+
   const fetchInspectionById = async (id: string): Promise<Inspection | null> => {
     try {
       const res = await fetch(`/api/inspections/${id}`, {

frontend/context/TransformersContext.tsx

@@ -3,6 +3,7 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { Transformer } from "@/types/transformer";
 import { apiUrl, authHeaders } from "@/lib/api";
+import { dispatchTransformerRemoved } from "@/lib/events";
 
 type TransformersContextValue = {
   transformers: Transformer[];
@@ -176,9 +177,14 @@ export function TransformersProvider({ children }: { children: React.ReactNode }
   };
 
   const deleteTransformer = async (index: number) => {
-    const id = transformers[index]?.id;
+    const transformer = transformers[index];
+    if (!transformer) return;
+    const id = transformer.id ?? null;
+    const transformerNumber = transformer.transformerNumber ?? null;
+
     if (!id) {
       setTransformers((prev) => prev.filter((_, i) => i !== index));
+      dispatchTransformerRemoved({ id, transformerNumber });
       return;
     }
     const res = await fetch(apiUrl(`/api/transformers/${id}`), {
@@ -193,7 +199,17 @@ export function TransformersProvider({ children }: { children: React.ReactNode }
       return;
     }
     setLastError(null);
-    setTransformers((prev) => prev.filter((item) => item.id !== id));
+    setTransformers((prev) =>
+      prev.filter((item) => {
+        if (id) {
+          if (item.id) return item.id !== id;
+          // Fallback to transformerNumber if id is missing locally
+          return item.transformerNumber !== transformerNumber;
+        }
+        return item.transformerNumber !== transformerNumber;
+      })
+    );
+    dispatchTransformerRemoved({ id, transformerNumber });
   };
 
   const value = useMemo(

frontend/lib/events.ts

@@ -0,0 +1,11 @@
+export const TRANSFORMER_REMOVED_EVENT = "transformer:removed" as const;
+
+export type TransformerRemovedDetail = {
+  id?: string | null;
+  transformerNumber?: string | null;
+};
+
+export const dispatchTransformerRemoved = (detail: TransformerRemovedDetail) => {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(TRANSFORMER_REMOVED_EVENT, { detail }));
+};