From f14c61b3fb8d9f1f8b3aa1c3d41d4a48a66e6833 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 17:13:10 +0000
Subject: [PATCH 1/5] Work in progress

---
 bun.lockb            | Bin 356158 -> 356254 bytes
 src/routeTree.gen.ts |   9 +++++++++
 2 files changed, 9 insertions(+)

diff --git a/bun.lockb b/bun.lockb
index dab31462ab9a18393a0e54b194906f36db5170fd..050aece84acde1263d7bdeebc4eebe41aeebaa06 100755
GIT binary patch
delta 3104
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
MoY_)*Jj<;A7nlG!OaK4?

delta 3012
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
Wr<mjYv=uk)L|%&ND=uc3C;kHoB@Xfc

diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 8faeb78..89d5bbb 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -868,3 +868,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

From f0687633b6978c72522f1e85a7f13feff269d3ed Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 17:13:23 +0000
Subject: [PATCH 2/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routeTree.gen.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 89d5bbb..8faeb78 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -868,12 +868,3 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
-
-import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
-declare module '@tanstack/react-start' {
-  interface Register {
-    ssr: true
-    router: Awaited<ReturnType<typeof getRouter>>
-  }
-}

From 01692742dafcb8ccdf012c20d866e1f40507d08b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 17:13:48 +0000
Subject: [PATCH 3/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/integrations/supabase/types.ts            | 81 +++++++++++++++++++
 ...4_bd4ad166-596b-4c5c-8260-9f9ead6f6b73.sql | 63 +++++++++++++++
 2 files changed, 144 insertions(+)
 create mode 100644 supabase/migrations/20260418171344_bd4ad166-596b-4c5c-8260-9f9ead6f6b73.sql

diff --git a/src/integrations/supabase/types.ts b/src/integrations/supabase/types.ts
index 2cbfb13..4ce7b79 100644
--- a/src/integrations/supabase/types.ts
+++ b/src/integrations/supabase/types.ts
@@ -412,6 +412,48 @@ export type Database = {
           },
         ]
       }
+      client_field_values: {
+        Row: {
+          client_id: string
+          created_at: string
+          field_id: string
+          id: string
+          updated_at: string
+          value: string | null
+        }
+        Insert: {
+          client_id: string
+          created_at?: string
+          field_id: string
+          id?: string
+          updated_at?: string
+          value?: string | null
+        }
+        Update: {
+          client_id?: string
+          created_at?: string
+          field_id?: string
+          id?: string
+          updated_at?: string
+          value?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "client_field_values_client_id_fkey"
+            columns: ["client_id"]
+            isOneToOne: false
+            referencedRelation: "clients"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "client_field_values_field_id_fkey"
+            columns: ["field_id"]
+            isOneToOne: false
+            referencedRelation: "custom_client_fields"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       clients: {
         Row: {
           address_line1: string | null
@@ -1007,6 +1049,45 @@ export type Database = {
         }
         Relationships: []
       }
+      custom_client_fields: {
+        Row: {
+          active: boolean
+          created_at: string
+          created_by: string | null
+          description: string | null
+          field_type: string
+          id: string
+          key: string
+          label: string
+          sort_order: number
+          updated_at: string
+        }
+        Insert: {
+          active?: boolean
+          created_at?: string
+          created_by?: string | null
+          description?: string | null
+          field_type?: string
+          id?: string
+          key: string
+          label: string
+          sort_order?: number
+          updated_at?: string
+        }
+        Update: {
+          active?: boolean
+          created_at?: string
+          created_by?: string | null
+          description?: string | null
+          field_type?: string
+          id?: string
+          key?: string
+          label?: string
+          sort_order?: number
+          updated_at?: string
+        }
+        Relationships: []
+      }
       custom_form_templates: {
         Row: {
           body_html: string
diff --git a/supabase/migrations/20260418171344_bd4ad166-596b-4c5c-8260-9f9ead6f6b73.sql b/supabase/migrations/20260418171344_bd4ad166-596b-4c5c-8260-9f9ead6f6b73.sql
new file mode 100644
index 0000000..ddfa02d
--- /dev/null
+++ b/supabase/migrations/20260418171344_bd4ad166-596b-4c5c-8260-9f9ead6f6b73.sql
@@ -0,0 +1,63 @@
+-- Custom client fields (admin-defined)
+CREATE TABLE public.custom_client_fields (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  key text NOT NULL UNIQUE,
+  label text NOT NULL,
+  field_type text NOT NULL DEFAULT 'text',
+  description text,
+  sort_order integer NOT NULL DEFAULT 0,
+  active boolean NOT NULL DEFAULT true,
+  created_by uuid,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+ALTER TABLE public.custom_client_fields ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY ccf_client_select_auth ON public.custom_client_fields
+  FOR SELECT TO authenticated USING (true);
+CREATE POLICY ccf_client_insert_admin ON public.custom_client_fields
+  FOR INSERT TO authenticated WITH CHECK (is_admin(auth.uid()));
+CREATE POLICY ccf_client_update_admin ON public.custom_client_fields
+  FOR UPDATE TO authenticated USING (is_admin(auth.uid()));
+CREATE POLICY ccf_client_delete_admin ON public.custom_client_fields
+  FOR DELETE TO authenticated USING (is_admin(auth.uid()));
+
+CREATE TRIGGER trg_ccf_client_updated_at
+  BEFORE UPDATE ON public.custom_client_fields
+  FOR EACH ROW EXECUTE FUNCTION public.tg_set_updated_at();
+
+-- Per-client values
+CREATE TABLE public.client_field_values (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  client_id uuid NOT NULL REFERENCES public.clients(id) ON DELETE CASCADE,
+  field_id uuid NOT NULL REFERENCES public.custom_client_fields(id) ON DELETE CASCADE,
+  value text,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now(),
+  UNIQUE (client_id, field_id)
+);
+
+ALTER TABLE public.client_field_values ENABLE ROW LEVEL SECURITY;
+
+-- Anyone authenticated can view; admins or client creator can manage
+CREATE POLICY clfv_select_auth ON public.client_field_values
+  FOR SELECT TO authenticated USING (true);
+CREATE POLICY clfv_insert_auth ON public.client_field_values
+  FOR INSERT TO authenticated WITH CHECK (auth.uid() IS NOT NULL);
+CREATE POLICY clfv_update_auth ON public.client_field_values
+  FOR UPDATE TO authenticated USING (
+    is_admin(auth.uid())
+    OR EXISTS (SELECT 1 FROM public.clients c WHERE c.id = client_id AND c.created_by = auth.uid())
+  );
+CREATE POLICY clfv_delete_auth ON public.client_field_values
+  FOR DELETE TO authenticated USING (
+    is_admin(auth.uid())
+    OR EXISTS (SELECT 1 FROM public.clients c WHERE c.id = client_id AND c.created_by = auth.uid())
+  );
+
+CREATE TRIGGER trg_clfv_updated_at
+  BEFORE UPDATE ON public.client_field_values
+  FOR EACH ROW EXECUTE FUNCTION public.tg_set_updated_at();
+
+CREATE INDEX idx_client_field_values_client ON public.client_field_values(client_id);
\ No newline at end of file

From edb3f2541207fc566b1061544a523b0d2e3b0b63 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 17:14:41 +0000
Subject: [PATCH 4/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 .../clients/client-custom-fields-tab.tsx      | 116 ++++++++++
 src/routes/clients.$clientId.tsx              |   8 +-
 src/routes/settings.client-fields.tsx         | 208 ++++++++++++++++++
 src/routes/settings.tsx                       |   1 +
 4 files changed, 332 insertions(+), 1 deletion(-)
 create mode 100644 src/components/clients/client-custom-fields-tab.tsx
 create mode 100644 src/routes/settings.client-fields.tsx

diff --git a/src/components/clients/client-custom-fields-tab.tsx b/src/components/clients/client-custom-fields-tab.tsx
new file mode 100644
index 0000000..82001af
--- /dev/null
+++ b/src/components/clients/client-custom-fields-tab.tsx
@@ -0,0 +1,116 @@
+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 } from "lucide-react";
+import { toast } from "sonner";
+
+interface FieldDef {
+  id: string;
+  key: string;
+  label: string;
+  field_type: string;
+  description: string | null;
+}
+
+export function ClientCustomFieldsTab({ clientId }: { clientId: string }) {
+  const [defs, setDefs] = useState<FieldDef[]>([]);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      const [{ data: d }, { data: v }] = await Promise.all([
+        supabase
+          .from("custom_client_fields")
+          .select("id,key,label,field_type,description")
+          .eq("active", true)
+          .order("sort_order"),
+        supabase.from("client_field_values").select("field_id,value").eq("client_id", clientId),
+      ]);
+      const list = (d ?? []) as FieldDef[];
+      setDefs(list);
+      const map: Record<string, string> = {};
+      (v ?? []).forEach((row: any) => {
+        map[row.field_id] = row.value ?? "";
+      });
+      setValues(map);
+      setLoading(false);
+    })();
+  }, [clientId]);
+
+  const save = async () => {
+    setSaving(true);
+    const rows = defs.map((d) => ({
+      client_id: clientId,
+      field_id: d.id,
+      value: values[d.id] ?? "",
+    }));
+    for (const row of rows) {
+      const { error } = await supabase
+        .from("client_field_values")
+        .upsert(row, { onConflict: "client_id,field_id" });
+      if (error) {
+        toast.error("Save failed", { description: error.message });
+        setSaving(false);
+        return;
+      }
+    }
+    setSaving(false);
+    toast.success("Custom fields saved");
+  };
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
+
+  if (defs.length === 0) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-sm text-muted-foreground">
+            No custom client fields are configured. An admin can add them in <strong>Settings → Custom client fields</strong>.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="pt-6 space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {defs.map((d) => (
+            <div key={d.id} className={d.field_type === "textarea" ? "md:col-span-2" : ""}>
+              <Label className="flex items-center gap-2">
+                {d.label}
+                <code className="text-[10px] font-mono text-muted-foreground">{`{{client.custom.${d.key}}}`}</code>
+              </Label>
+              {d.field_type === "textarea" ? (
+                <Textarea
+                  rows={3}
+                  value={values[d.id] ?? ""}
+                  onChange={(e) => setValues((m) => ({ ...m, [d.id]: e.target.value }))}
+                />
+              ) : (
+                <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 }))}
+                />
+              )}
+              {d.description && <p className="text-[11px] text-muted-foreground mt-1">{d.description}</p>}
+            </div>
+          ))}
+        </div>
+        <Button onClick={save} disabled={saving}>
+          {saving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
+          Save changes
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/routes/clients.$clientId.tsx b/src/routes/clients.$clientId.tsx
index 5a5b3d6..0630839 100644
--- a/src/routes/clients.$clientId.tsx
+++ b/src/routes/clients.$clientId.tsx
@@ -9,8 +9,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { supabase } from "@/integrations/supabase/client";
 import { ClientFormDialog } from "@/components/clients/client-form-dialog";
 import { useAuth } from "@/lib/auth";
-import { ArrowLeft, Edit, Plus, Building2, User, MapPin, Mail, Phone, Users, Activity, Briefcase, FileDown, Contact, Receipt, Archive, ArchiveRestore } from "lucide-react";
+import { ArrowLeft, Edit, Plus, Building2, User, MapPin, Mail, Phone, Users, Activity, Briefcase, FileDown, Contact, Receipt, Archive, ArchiveRestore, ListPlus } from "lucide-react";
 import { ContactsLinkTab } from "@/components/contacts/contacts-link-tab";
+import { ClientCustomFieldsTab } from "@/components/clients/client-custom-fields-tab";
 import { formatCurrency, formatDate, formatDateTime, statusBadgeClass } from "@/lib/format";
 import { toast } from "sonner";
 import { downloadStatusReport } from "@/lib/status-pdf";
@@ -235,6 +236,7 @@ function ClientDetail() {
                 <TabsTrigger value="cases" className="flex-1"><Briefcase className="h-3.5 w-3.5 mr-1.5" />Cases</TabsTrigger>
                 <TabsTrigger value="status" className="flex-1"><Activity className="h-3.5 w-3.5 mr-1.5" />Status</TabsTrigger>
                 <TabsTrigger value="contacts" className="flex-1"><Contact className="h-3.5 w-3.5 mr-1.5" />Contacts</TabsTrigger>
+                <TabsTrigger value="custom" className="flex-1"><ListPlus className="h-3.5 w-3.5 mr-1.5" />Fields</TabsTrigger>
               </TabsList>
 
               <TabsContent value="cases">
@@ -308,6 +310,10 @@ function ClientDetail() {
               <TabsContent value="contacts">
                 <ContactsLinkTab parentId={clientId} parentTable="client_contacts" />
               </TabsContent>
+
+              <TabsContent value="custom">
+                <ClientCustomFieldsTab clientId={clientId} />
+              </TabsContent>
             </Tabs>
           </CardContent>
         </Card>
diff --git a/src/routes/settings.client-fields.tsx b/src/routes/settings.client-fields.tsx
new file mode 100644
index 0000000..950e6bd
--- /dev/null
+++ b/src/routes/settings.client-fields.tsx
@@ -0,0 +1,208 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Trash2, Plus, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/settings/client-fields")({
+  component: ClientFieldsPage,
+});
+
+interface CustomField {
+  id: string;
+  key: string;
+  label: string;
+  field_type: string;
+  description: string | null;
+  sort_order: number;
+  active: boolean;
+}
+
+const TYPES = [
+  { value: "text", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "date", label: "Date" },
+  { value: "textarea", label: "Long text" },
+];
+
+function slugify(s: string) {
+  return s
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_|_$/g, "")
+    .slice(0, 40);
+}
+
+function ClientFieldsPage() {
+  const { isAdmin } = useAuth();
+  const [fields, setFields] = useState<CustomField[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [form, setForm] = useState({ label: "", key: "", field_type: "text", description: "" });
+
+  const load = async () => {
+    setLoading(true);
+    const { data } = await supabase
+      .from("custom_client_fields")
+      .select("*")
+      .order("sort_order", { ascending: true })
+      .order("created_at", { ascending: true });
+    setFields((data ?? []) as CustomField[]);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const add = async () => {
+    const label = form.label.trim();
+    if (!label) {
+      toast.error("Label is required");
+      return;
+    }
+    const key = (form.key.trim() || slugify(label)).toLowerCase();
+    if (!key) {
+      toast.error("Could not derive a key from label");
+      return;
+    }
+    setSaving(true);
+    const { error } = await supabase.from("custom_client_fields").insert({
+      label,
+      key,
+      field_type: form.field_type,
+      description: form.description.trim() || null,
+      sort_order: fields.length,
+    });
+    setSaving(false);
+    if (error) {
+      toast.error("Could not add field", { description: error.message });
+      return;
+    }
+    setForm({ label: "", key: "", field_type: "text", description: "" });
+    toast.success("Field added");
+    load();
+  };
+
+  const update = async (id: string, patch: Partial<CustomField>) => {
+    const { error } = await supabase.from("custom_client_fields").update(patch).eq("id", id);
+    if (error) toast.error(error.message);
+    else load();
+  };
+
+  const remove = async (id: string) => {
+    if (!confirm("Delete this custom field? Existing client values will be removed.")) return;
+    const { error } = await supabase.from("custom_client_fields").delete().eq("id", id);
+    if (error) toast.error(error.message);
+    else {
+      toast.success("Field removed");
+      load();
+    }
+  };
+
+  if (!isAdmin) {
+    return <p className="text-sm text-muted-foreground">Only admins can manage custom client fields.</p>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Add a custom client field</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div>
+              <Label>Label</Label>
+              <Input
+                value={form.label}
+                placeholder="e.g. Tax ID"
+                onChange={(e) => setForm({ ...form, label: e.target.value, key: form.key || slugify(e.target.value) })}
+              />
+            </div>
+            <div>
+              <Label>Variable key</Label>
+              <Input
+                value={form.key}
+                placeholder="auto from label"
+                onChange={(e) => setForm({ ...form, key: slugify(e.target.value) })}
+              />
+              <p className="text-[11px] text-muted-foreground mt-1">
+                Used in templates as <code className="font-mono">{`{{client.custom.${form.key || "your_key"}}}`}</code>
+              </p>
+            </div>
+            <div>
+              <Label>Type</Label>
+              <Select value={form.field_type} onValueChange={(v) => setForm({ ...form, field_type: v })}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {TYPES.map((t) => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label>Description (optional)</Label>
+              <Input
+                value={form.description}
+                onChange={(e) => setForm({ ...form, description: e.target.value })}
+                placeholder="Short helper text"
+              />
+            </div>
+          </div>
+          <Button onClick={add} disabled={saving}>
+            {saving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
+            Add field
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Existing fields ({fields.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <p className="text-sm text-muted-foreground">Loading…</p>
+          ) : fields.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No custom client fields yet. Add one above to get started.</p>
+          ) : (
+            <div className="divide-y border rounded-md">
+              {fields.map((f) => (
+                <div key={f.id} className="p-3 grid grid-cols-1 md:grid-cols-[1fr_1fr_140px_100px_40px] gap-2 items-center">
+                  <Input
+                    value={f.label}
+                    onChange={(e) => setFields((xs) => xs.map((x) => x.id === f.id ? { ...x, label: e.target.value } : x))}
+                    onBlur={(e) => update(f.id, { label: e.target.value })}
+                  />
+                  <div>
+                    <code className="font-mono text-xs text-primary">{`{{client.custom.${f.key}}}`}</code>
+                  </div>
+                  <Select value={f.field_type} onValueChange={(v) => update(f.id, { field_type: v })}>
+                    <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      {TYPES.map((t) => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}
+                    </SelectContent>
+                  </Select>
+                  <div className="flex items-center gap-2">
+                    <Switch checked={f.active} onCheckedChange={(v) => update(f.id, { active: v })} />
+                    <span className="text-xs text-muted-foreground">Active</span>
+                  </div>
+                  <Button variant="ghost" size="icon" onClick={() => remove(f.id)}>
+                    <Trash2 className="h-4 w-4 text-destructive" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx
index e476165..04f151e 100644
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -14,6 +14,7 @@ const TABS = [
   { to: "/settings", label: "Company", exact: true },
   { to: "/settings/fees", label: "Fee schedule" },
   { to: "/settings/custom-fields", label: "Custom case fields" },
+  { to: "/settings/client-fields", label: "Custom client fields" },
   { to: "/settings/form-templates", label: "Form templates" },
   { to: "/settings/workflow", label: "Collections workflow" },
   { to: "/settings/workflows", label: "Task workflows" },

From ddccc882a2daba2265e2feb081c01fea2e38fb58 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 17:14:50 +0000
Subject: [PATCH 5/5] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routeTree.gen.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 8faeb78..2711e30 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -36,6 +36,7 @@ import { Route as SettingsImapRouteImport } from './routes/settings.imap'
 import { Route as SettingsFormTemplatesRouteImport } from './routes/settings.form-templates'
 import { Route as SettingsFeesRouteImport } from './routes/settings.fees'
 import { Route as SettingsCustomFieldsRouteImport } from './routes/settings.custom-fields'
+import { Route as SettingsClientFieldsRouteImport } from './routes/settings.client-fields'
 import { Route as InvoicesInvoiceIdRouteImport } from './routes/invoices.$invoiceId'
 import { Route as HooksPollImapRouteImport } from './routes/hooks/poll-imap'
 import { Route as ContactsContactIdRouteImport } from './routes/contacts.$contactId'
@@ -184,6 +185,11 @@ const SettingsCustomFieldsRoute = SettingsCustomFieldsRouteImport.update({
   path: '/custom-fields',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsClientFieldsRoute = SettingsClientFieldsRouteImport.update({
+  id: '/client-fields',
+  path: '/client-fields',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const InvoicesInvoiceIdRoute = InvoicesInvoiceIdRouteImport.update({
   id: '/invoices/$invoiceId',
   path: '/invoices/$invoiceId',
@@ -259,6 +265,7 @@ export interface FileRoutesByFullPath {
   '/contacts/$contactId': typeof ContactsContactIdRoute
   '/hooks/poll-imap': typeof HooksPollImapRoute
   '/invoices/$invoiceId': typeof InvoicesInvoiceIdRoute
+  '/settings/client-fields': typeof SettingsClientFieldsRoute
   '/settings/custom-fields': typeof SettingsCustomFieldsRoute
   '/settings/fees': typeof SettingsFeesRoute
   '/settings/form-templates': typeof SettingsFormTemplatesRoute
@@ -299,6 +306,7 @@ export interface FileRoutesByTo {
   '/contacts/$contactId': typeof ContactsContactIdRoute
   '/hooks/poll-imap': typeof HooksPollImapRoute
   '/invoices/$invoiceId': typeof InvoicesInvoiceIdRoute
+  '/settings/client-fields': typeof SettingsClientFieldsRoute
   '/settings/custom-fields': typeof SettingsCustomFieldsRoute
   '/settings/fees': typeof SettingsFeesRoute
   '/settings/form-templates': typeof SettingsFormTemplatesRoute
@@ -341,6 +349,7 @@ export interface FileRoutesById {
   '/contacts/$contactId': typeof ContactsContactIdRoute
   '/hooks/poll-imap': typeof HooksPollImapRoute
   '/invoices/$invoiceId': typeof InvoicesInvoiceIdRoute
+  '/settings/client-fields': typeof SettingsClientFieldsRoute
   '/settings/custom-fields': typeof SettingsCustomFieldsRoute
   '/settings/fees': typeof SettingsFeesRoute
   '/settings/form-templates': typeof SettingsFormTemplatesRoute
@@ -384,6 +393,7 @@ export interface FileRouteTypes {
     | '/contacts/$contactId'
     | '/hooks/poll-imap'
     | '/invoices/$invoiceId'
+    | '/settings/client-fields'
     | '/settings/custom-fields'
     | '/settings/fees'
     | '/settings/form-templates'
@@ -424,6 +434,7 @@ export interface FileRouteTypes {
     | '/contacts/$contactId'
     | '/hooks/poll-imap'
     | '/invoices/$invoiceId'
+    | '/settings/client-fields'
     | '/settings/custom-fields'
     | '/settings/fees'
     | '/settings/form-templates'
@@ -465,6 +476,7 @@ export interface FileRouteTypes {
     | '/contacts/$contactId'
     | '/hooks/poll-imap'
     | '/invoices/$invoiceId'
+    | '/settings/client-fields'
     | '/settings/custom-fields'
     | '/settings/fees'
     | '/settings/form-templates'
@@ -717,6 +729,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsCustomFieldsRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/settings/client-fields': {
+      id: '/settings/client-fields'
+      path: '/client-fields'
+      fullPath: '/settings/client-fields'
+      preLoaderRoute: typeof SettingsClientFieldsRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/invoices/$invoiceId': {
       id: '/invoices/$invoiceId'
       path: '/invoices/$invoiceId'
@@ -805,6 +824,7 @@ declare module '@tanstack/react-router' {
 }
 
 interface SettingsRouteChildren {
+  SettingsClientFieldsRoute: typeof SettingsClientFieldsRoute
   SettingsCustomFieldsRoute: typeof SettingsCustomFieldsRoute
   SettingsFeesRoute: typeof SettingsFeesRoute
   SettingsFormTemplatesRoute: typeof SettingsFormTemplatesRoute
@@ -818,6 +838,7 @@ interface SettingsRouteChildren {
 }
 
 const SettingsRouteChildren: SettingsRouteChildren = {
+  SettingsClientFieldsRoute: SettingsClientFieldsRoute,
   SettingsCustomFieldsRoute: SettingsCustomFieldsRoute,
   SettingsFeesRoute: SettingsFeesRoute,
   SettingsFormTemplatesRoute: SettingsFormTemplatesRoute,