Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
01692742da
commit
edb3f25412
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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" },
|
||||
|
||||
Reference in New Issue
Block a user