From 05cb609511a7ed7bb8454dbc9e9a1bf28d693cd5 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 1 May 2026 14:47:24 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/litigation-tab.tsx | 134 +++++++++++++++++++-----
 1 file changed, 110 insertions(+), 24 deletions(-)

diff --git a/src/components/cases/litigation-tab.tsx b/src/components/cases/litigation-tab.tsx
index 5a10bf0..6d8ed57 100644
--- a/src/components/cases/litigation-tab.tsx
+++ b/src/components/cases/litigation-tab.tsx
@@ -48,25 +48,44 @@ export function CaseLitigationTab({ caseRecord, canManage, onSaved }: Props) {
   const [customFilled, setCustomFilled] = useState<
     Array<{ id: string; label: string; field_type: string; value: string }>
   >([]);
+  // All active custom case field defs (for edit mode)
+  const [customDefs, setCustomDefs] = useState<
+    Array<{ id: string; key: string; label: string; field_type: string; description: string | null; sort_order: number }>
+  >([]);
+  // Editable values keyed by field_id
+  const [customValues, setCustomValues] = useState<Record<string, string>>({});
 
   useEffect(() => {
     let cancelled = false;
     (async () => {
-      const { data } = await supabase
-        .from("case_field_values")
-        .select("id, value, field:custom_case_fields(id, label, field_type, sort_order, active)")
-        .eq("case_id", caseRecord.id);
+      const [defsRes, valsRes] = await Promise.all([
+        supabase
+          .from("custom_case_fields")
+          .select("id, key, label, field_type, description, sort_order")
+          .eq("active", true)
+          .order("sort_order"),
+        supabase
+          .from("case_field_values")
+          .select("field_id, value")
+          .eq("case_id", caseRecord.id),
+      ]);
       if (cancelled) return;
-      const rows = (data ?? [])
-        .map((r: any) => ({
-          id: r.id,
-          label: r.field?.label ?? "",
-          field_type: r.field?.field_type ?? "text",
-          sort_order: r.field?.sort_order ?? 0,
-          active: r.field?.active ?? true,
-          value: (r.value ?? "").toString().trim(),
+      const defs = (defsRes.data ?? []) as any[];
+      const vmap: Record<string, string> = {};
+      (valsRes.data ?? []).forEach((r: any) => {
+        vmap[r.field_id] = r.value ?? "";
+      });
+      setCustomDefs(defs);
+      setCustomValues(vmap);
+      const rows = defs
+        .map((d) => ({
+          id: d.id,
+          label: d.label,
+          field_type: d.field_type,
+          sort_order: d.sort_order ?? 0,
+          value: (vmap[d.id] ?? "").toString().trim(),
         }))
-        .filter((r) => r.active && r.value.length > 0)
+        .filter((r) => r.value.length > 0)
         .sort((a, b) => a.sort_order - b.sort_order || a.label.localeCompare(b.label));
       setCustomFilled(rows);
     })();
@@ -100,11 +119,40 @@ export function CaseLitigationTab({ caseRecord, canManage, onSaved }: Props) {
       else payload[f.key] = v === "" ? null : v ?? null;
     });
     const { error } = await supabase.from("cases").update(payload).eq("id", caseRecord.id);
-    setSaving(false);
     if (error) {
+      setSaving(false);
       toast.error("Could not save", { description: error.message });
       return;
     }
+    // Save custom field values (upsert each)
+    for (const d of customDefs) {
+      const value = (customValues[d.id] ?? "").toString();
+      const { error: cfErr } = await supabase
+        .from("case_field_values")
+        .upsert(
+          { case_id: caseRecord.id, field_id: d.id, value },
+          { onConflict: "case_id,field_id" },
+        );
+      if (cfErr) {
+        setSaving(false);
+        toast.error("Could not save custom fields", { description: cfErr.message });
+        return;
+      }
+    }
+    // Refresh filled list
+    setCustomFilled(
+      customDefs
+        .map((d) => ({
+          id: d.id,
+          label: d.label,
+          field_type: d.field_type,
+          sort_order: d.sort_order ?? 0,
+          value: (customValues[d.id] ?? "").toString().trim(),
+        }))
+        .filter((r) => r.value.length > 0)
+        .sort((a, b) => a.sort_order - b.sort_order || a.label.localeCompare(b.label)),
+    );
+    setSaving(false);
     toast.success("Litigation details updated");
     setEditing(false);
     onSaved();
@@ -148,19 +196,57 @@ export function CaseLitigationTab({ caseRecord, canManage, onSaved }: Props) {
 
       <Card className="border-border/60">
         <CardContent className="p-5 space-y-5">
-          {customFilled.length > 0 && (
+          {(editing ? customDefs.length > 0 : customFilled.length > 0) && (
             <>
               <Section icon={<ListChecks className="h-4 w-4" />} title="Matter Information">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                  {customFilled.map((c) => (
-                    <div key={c.id}>
-                      <Label className="text-xs text-muted-foreground">{c.label}</Label>
-                      <div className="text-sm mt-1 whitespace-pre-wrap">
-                        {c.field_type === "date" ? formatDate(c.value) : c.value}
+                {editing ? (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {customDefs.map((d) => (
+                      <div key={d.id} className={d.field_type === "textarea" ? "sm:col-span-2" : ""}>
+                        <Label className="text-xs text-muted-foreground">{d.label}</Label>
+                        {d.field_type === "textarea" ? (
+                          <Textarea
+                            rows={3}
+                            value={customValues[d.id] ?? ""}
+                            onChange={(e) =>
+                              setCustomValues((m) => ({ ...m, [d.id]: e.target.value }))
+                            }
+                            className="mt-1"
+                          />
+                        ) : (
+                          <Input
+                            type={
+                              d.field_type === "number"
+                                ? "number"
+                                : d.field_type === "date"
+                                  ? "date"
+                                  : "text"
+                            }
+                            value={customValues[d.id] ?? ""}
+                            onChange={(e) =>
+                              setCustomValues((m) => ({ ...m, [d.id]: e.target.value }))
+                            }
+                            className="mt-1"
+                          />
+                        )}
+                        {d.description && (
+                          <p className="text-[11px] text-muted-foreground mt-1">{d.description}</p>
+                        )}
                       </div>
-                    </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {customFilled.map((c) => (
+                      <div key={c.id}>
+                        <Label className="text-xs text-muted-foreground">{c.label}</Label>
+                        <div className="text-sm mt-1 whitespace-pre-wrap">
+                          {c.field_type === "date" ? formatDate(c.value) : c.value}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </Section>
               <Separator />
             </>