From a9857b1b75e4dea12ac2bbf9d64f3db2ce088a3c 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:55 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 .../clients/client-custom-fields-inline.tsx   | 182 ++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 src/components/clients/client-custom-fields-inline.tsx

diff --git a/src/components/clients/client-custom-fields-inline.tsx b/src/components/clients/client-custom-fields-inline.tsx
new file mode 100644
index 0000000..4a5055e
--- /dev/null
+++ b/src/components/clients/client-custom-fields-inline.tsx
@@ -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>
+  );
+}
\ No newline at end of file