Enabled custom fields inline

X-Lovable-Edit-ID: edt-8ed9d9bc-80ad-460b-b89d-f4153882d2bd Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-05-01 14:48:15 +00:00
parent 04a727959e 735447b786
commit 9757b5ac3a
3 changed files with 295 additions and 24 deletions
@@ -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 />
            </>
@@ -0,0 +1,182 @@
+import { useEffect, useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Loader2, Save, Pencil, X, ListPlus } from "lucide-react";
+import { toast } from "sonner";
+import { formatDate } from "@/lib/format";
+
+interface FieldDef {
+  id: string;
+  key: string;
+  label: string;
+  field_type: string;
+  description: string | null;
+  sort_order: number;
+}
+
+/**
+ * Inline custom fields panel for a client. Shows only filled fields when
+ * viewing; switches to a full editable grid (all active fields) on Edit.
+ * Renders nothing when there are no field definitions and nothing is filled.
+ */
+export function ClientCustomFieldsInline({ clientId }: { clientId: string }) {
+  const [defs, setDefs] = useState<FieldDef[]>([]);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const load = async () => {
+    setLoading(true);
+    const [defsRes, valsRes] = await Promise.all([
+      supabase
+        .from("custom_client_fields")
+        .select("id, key, label, field_type, description, sort_order")
+        .eq("active", true)
+        .order("sort_order"),
+      supabase
+        .from("client_field_values")
+        .select("field_id, value")
+        .eq("client_id", clientId),
+    ]);
+    setDefs((defsRes.data ?? []) as FieldDef[]);
+    const map: Record<string, string> = {};
+    (valsRes.data ?? []).forEach((r: any) => {
+      map[r.field_id] = r.value ?? "";
+    });
+    setValues(map);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clientId]);
+
+  const filled = defs
+    .map((d) => ({ ...d, value: (values[d.id] ?? "").toString().trim() }))
+    .filter((d) => d.value.length > 0);
+
+  if (loading) return null;
+  // Hide entirely if there are no defs at all
+  if (defs.length === 0) return null;
+  // When viewing and nothing is filled, hide unless user clicks the Add fields entry
+  // We'll show a small "Add custom field info" affordance instead.
+  if (!editing && filled.length === 0) {
+    return (
+      <Card className="border-border/60">
+        <CardContent className="p-5 flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <ListPlus className="h-4 w-4" />
+            Custom client fields available
+          </div>
+          <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
+            <Pencil className="h-3.5 w-3.5 mr-1.5" /> Fill in
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const save = async () => {
+    setSaving(true);
+    for (const d of defs) {
+      const value = (values[d.id] ?? "").toString();
+      const { error } = await supabase
+        .from("client_field_values")
+        .upsert(
+          { client_id: clientId, field_id: d.id, value },
+          { onConflict: "client_id,field_id" },
+        );
+      if (error) {
+        setSaving(false);
+        toast.error("Save failed", { description: error.message });
+        return;
+      }
+    }
+    setSaving(false);
+    setEditing(false);
+    toast.success("Custom fields saved");
+  };
+
+  return (
+    <Card className="border-border/60">
+      <CardContent className="p-5">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <ListPlus className="h-4 w-4 text-muted-foreground" />
+            <h3 className="font-serif text-lg">Custom fields</h3>
+          </div>
+          {editing ? (
+            <div className="flex gap-2">
+              <Button variant="ghost" size="sm" onClick={() => { setEditing(false); load(); }} disabled={saving}>
+                <X className="h-3.5 w-3.5 mr-1.5" /> Cancel
+              </Button>
+              <Button size="sm" onClick={save} disabled={saving}>
+                {saving ? (
+                  <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                ) : (
+                  <Save className="h-3.5 w-3.5 mr-1.5" />
+                )}
+                Save
+              </Button>
+            </div>
+          ) : (
+            <Button variant="outline" size="sm" onClick={() => setEditing(true)}>
+              <Pencil className="h-3.5 w-3.5 mr-1.5" /> Edit
+            </Button>
+          )}
+        </div>
+
+        {editing ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {defs.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={values[d.id] ?? ""}
+                    onChange={(e) => setValues((m) => ({ ...m, [d.id]: e.target.value }))}
+                    className="mt-1"
+                  />
+                ) : (
+                  <Input
+                    type={
+                      d.field_type === "number"
+                        ? "number"
+                        : d.field_type === "date"
+                          ? "date"
+                          : "text"
+                    }
+                    value={values[d.id] ?? ""}
+                    onChange={(e) => setValues((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 className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {filled.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>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -12,6 +12,7 @@ import { useAuth } from "@/lib/auth";
 import { ArrowLeft, Edit, Plus, Building2, User, MapPin, Mail, Phone, Users, Activity, Briefcase, FileDown, Contact, Receipt, Archive, ArchiveRestore, ListPlus, Save, DollarSign } from "lucide-react";
 import { ContactsLinkTab } from "@/components/contacts/contacts-link-tab";
 import { ClientCustomFieldsTab } from "@/components/clients/client-custom-fields-tab";
+import { ClientCustomFieldsInline } from "@/components/clients/client-custom-fields-inline";
 import { formatCurrency, formatDate, formatDateTime, statusBadgeClass } from "@/lib/format";
 import { toast } from "sonner";
 import { downloadStatusReport, saveStatusReportToDb } from "@/lib/status-pdf";
@@ -218,6 +219,8 @@ function ClientDetail() {
            </CardContent>
          </Card>

+          <ClientCustomFieldsInline clientId={clientId} />
+
          {(client.client_type === "hoa" || client.client_type === "condo") && client.board_members?.length > 0 && (
            <Card className="border-border/60">
              <CardContent className="p-5">