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
05cb609511
commit
a9857b1b75
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user