Added custom fields section

X-Lovable-Edit-ID: edt-1533f7f5-38f5-4c59-a7f5-f7aabc352d75
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/cases/litigation-tab.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { supabase } from "@/integrations/supabase/client";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
-import { Pencil, Save, X, Calendar, Gavel, Scale, FileSearch, Users, AlertCircle } from "lucide-react";
+import { Pencil, Save, X, Calendar, Gavel, Scale, FileSearch, Users, AlertCircle, ListChecks } from "lucide-react";
 import { toast } from "sonner";
 import { formatCurrency, formatDate } from "@/lib/format";
 
@@ -45,6 +45,35 @@ export function CaseLitigationTab({ caseRecord, canManage, onSaved }: Props) {
   const [keyDates, setKeyDates] = useState<Array<{ date: string; label: string }>>(
     Array.isArray(caseRecord.key_dates) ? caseRecord.key_dates : [],
   );
+  const [customFilled, setCustomFilled] = useState<
+    Array<{ id: string; label: string; field_type: string; value: 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);
+      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(),
+        }))
+        .filter((r) => r.active && r.value.length > 0)
+        .sort((a, b) => a.sort_order - b.sort_order || a.label.localeCompare(b.label));
+      setCustomFilled(rows);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [caseRecord.id]);
 
   const startEdit = () => {
     setForm({ ...caseRecord });
@@ -119,6 +148,24 @@ export function CaseLitigationTab({ caseRecord, canManage, onSaved }: Props) {
 
       <Card className="border-border/60">
         <CardContent className="p-5 space-y-5">
+          {customFilled.length > 0 && (
+            <>
+              <Section icon={<ListChecks className="h-4 w-4" />} title="Custom fields">
+                <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 />
+            </>
+          )}
+
           <Section icon={<FileSearch className="h-4 w-4" />} title="Case summary">
             {editing ? (
               <Textarea