Add admin page with 4 tabs for managing queues, lifecycles, scrips, and custom fields
This commit is contained in:
Gjermund Høsøien Wiggen
745
web/src/app/admin/page.tsx
Normal file
745
web/src/app/admin/page.tsx
Normal file
@@ -0,0 +1,745 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Plus, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableRow,
|
||||
TableHead,
|
||||
TableCell,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Tabs,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
TabsContent,
|
||||
} from "@/components/ui/tabs";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
getQueues,
|
||||
createQueue,
|
||||
getLifecycles,
|
||||
createLifecycle,
|
||||
getScrips,
|
||||
createScrip,
|
||||
getCustomFields,
|
||||
createCustomField,
|
||||
} from "@/lib/api";
|
||||
import type { Queue, Lifecycle, Scrip, CustomField } from "@/lib/types";
|
||||
|
||||
const LIFECYCLE_PLACEHOLDER = `{
|
||||
"statuses": {
|
||||
"initial": ["new"],
|
||||
"active": ["open", "in_progress"],
|
||||
"inactive": ["resolved", "closed"]
|
||||
},
|
||||
"transitions": {
|
||||
"new": ["open"],
|
||||
"open": ["in_progress", "resolved"],
|
||||
"in_progress": ["resolved"],
|
||||
"*": ["closed"]
|
||||
}
|
||||
}`;
|
||||
|
||||
export default function AdminPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Admin</h1>
|
||||
<Tabs defaultValue="queues">
|
||||
<TabsList>
|
||||
<TabsTrigger value="queues">Queues</TabsTrigger>
|
||||
<TabsTrigger value="lifecycles">Lifecycles</TabsTrigger>
|
||||
<TabsTrigger value="scrips">Scrips</TabsTrigger>
|
||||
<TabsTrigger value="customfields">Custom Fields</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="queues">
|
||||
<QueuesTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="lifecycles">
|
||||
<LifecyclesTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="scrips">
|
||||
<ScripsTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="customfields">
|
||||
<CustomFieldsTab />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function QueuesTab() {
|
||||
const [queues, setQueues] = useState<Queue[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const fetchQueues = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { data, error } = await getQueues();
|
||||
if (error) setError(error);
|
||||
else setQueues(data ?? []);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchQueues();
|
||||
}, [fetchQueues]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim()) return;
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
const { error } = await createQueue({ name: name.trim(), description: description.trim() || undefined });
|
||||
setSaving(false);
|
||||
if (error) {
|
||||
setSaveError(error);
|
||||
} else {
|
||||
setDialogOpen(false);
|
||||
setName("");
|
||||
setDescription("");
|
||||
fetchQueues();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">Queues</h2>
|
||||
<Button size="sm" onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Add Queue
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-sm text-red-400">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="text-sm text-neutral-400 py-6">Loading...</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{queues.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={2} className="text-neutral-400 text-center py-6">
|
||||
No queues yet.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
queues.map((q) => (
|
||||
<TableRow key={q.id}>
|
||||
<TableCell className="font-medium">{q.name}</TableCell>
|
||||
<TableCell className="text-neutral-400">{q.description ?? "-"}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Queue</DialogTitle>
|
||||
<DialogDescription>Create a new ticket queue.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="q-name">Name</Label>
|
||||
<Input
|
||||
id="q-name"
|
||||
placeholder="Queue name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="q-desc">Description</Label>
|
||||
<Textarea
|
||||
id="q-desc"
|
||||
placeholder="Optional description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{saveError && <div className="text-sm text-red-400">{saveError}</div>}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={!name.trim() || saving}>
|
||||
{saving ? "Saving..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LifecyclesTab() {
|
||||
const [lifecycles, setLifecycles] = useState<Lifecycle[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [definition, setDefinition] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const fetchLifecycles = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { data, error } = await getLifecycles();
|
||||
if (error) setError(error);
|
||||
else setLifecycles(data ?? []);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchLifecycles();
|
||||
}, [fetchLifecycles]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim() || !definition.trim()) return;
|
||||
let parsed: Record<string, unknown>;
|
||||
try {
|
||||
parsed = JSON.parse(definition);
|
||||
} catch {
|
||||
setSaveError("Invalid JSON definition.");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
const { error } = await createLifecycle({ name: name.trim(), definition: parsed });
|
||||
setSaving(false);
|
||||
if (error) {
|
||||
setSaveError(error);
|
||||
} else {
|
||||
setDialogOpen(false);
|
||||
setName("");
|
||||
setDefinition("");
|
||||
fetchLifecycles();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">Lifecycles</h2>
|
||||
<Button size="sm" onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Add Lifecycle
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-sm text-red-400">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="text-sm text-neutral-400 py-6">Loading...</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{lifecycles.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell className="text-neutral-400 text-center py-6">
|
||||
No lifecycles yet.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
lifecycles.map((l) => (
|
||||
<TableRow key={l.id}>
|
||||
<TableCell className="font-medium">{l.name}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Lifecycle</DialogTitle>
|
||||
<DialogDescription>Create a new lifecycle with a JSON definition.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="lc-name">Name</Label>
|
||||
<Input
|
||||
id="lc-name"
|
||||
placeholder="Lifecycle name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="lc-def">Definition (JSON)</Label>
|
||||
<Textarea
|
||||
id="lc-def"
|
||||
placeholder={LIFECYCLE_PLACEHOLDER}
|
||||
value={definition}
|
||||
onChange={(e) => setDefinition(e.target.value)}
|
||||
className="min-h-40 font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
{saveError && <div className="text-sm text-red-400">{saveError}</div>}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={!name.trim() || !definition.trim() || saving}>
|
||||
{saving ? "Saving..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScripsTab() {
|
||||
const [scrips, setScrips] = useState<Scrip[]>([]);
|
||||
const [queues, setQueues] = useState<Queue[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [queueId, setQueueId] = useState("");
|
||||
const [conditionType, setConditionType] = useState("OnCreate");
|
||||
const [actionType, setActionType] = useState("SendEmail");
|
||||
const [actionConfig, setActionConfig] = useState("");
|
||||
const [stage, setStage] = useState("TransactionCreate");
|
||||
const [sortOrder, setSortOrder] = useState(0);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const fetchScrips = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const [sRes, qRes] = await Promise.all([getScrips(), getQueues()]);
|
||||
if (sRes.error) setError(sRes.error);
|
||||
else setScrips(sRes.data ?? []);
|
||||
if (qRes.error) setError(qRes.error);
|
||||
else setQueues(qRes.data ?? []);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchScrips();
|
||||
}, [fetchScrips]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim()) return;
|
||||
let parsedConfig: Record<string, unknown> | undefined;
|
||||
if (actionConfig.trim()) {
|
||||
try {
|
||||
parsedConfig = JSON.parse(actionConfig);
|
||||
} catch {
|
||||
setSaveError("Invalid JSON in action config.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
const { error } = await createScrip({
|
||||
name: name.trim(),
|
||||
queue_id: queueId || null,
|
||||
condition_type: conditionType,
|
||||
action_type: actionType,
|
||||
action_config: parsedConfig,
|
||||
stage,
|
||||
sort_order: sortOrder,
|
||||
disabled,
|
||||
});
|
||||
setSaving(false);
|
||||
if (error) {
|
||||
setSaveError(error);
|
||||
} else {
|
||||
setDialogOpen(false);
|
||||
setName("");
|
||||
setQueueId("");
|
||||
setConditionType("OnCreate");
|
||||
setActionType("SendEmail");
|
||||
setActionConfig("");
|
||||
setStage("TransactionCreate");
|
||||
setSortOrder(0);
|
||||
setDisabled(false);
|
||||
fetchScrips();
|
||||
}
|
||||
};
|
||||
|
||||
const queueName = (id: string | null) => {
|
||||
if (!id) return "Global";
|
||||
return queues.find((q) => q.id === id)?.name ?? id;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">Scrips</h2>
|
||||
<Button size="sm" onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Add Scrip
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-sm text-red-400">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="text-sm text-neutral-400 py-6">Loading...</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Queue</TableHead>
|
||||
<TableHead>Condition</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
<TableHead>Enabled</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{scrips.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-neutral-400 text-center py-6">
|
||||
No scrips yet.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
scrips.map((s) => (
|
||||
<TableRow key={s.id}>
|
||||
<TableCell className="font-medium">{s.name}</TableCell>
|
||||
<TableCell>{queueName(s.queue_id)}</TableCell>
|
||||
<TableCell>{s.condition_type}</TableCell>
|
||||
<TableCell>{s.action_type}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={s.disabled ? "outline" : "default"}>
|
||||
{s.disabled ? "Disabled" : "Enabled"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Scrip</DialogTitle>
|
||||
<DialogDescription>Create a new automation scrip.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-name">Name</Label>
|
||||
<Input
|
||||
id="s-name"
|
||||
placeholder="Scrip name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-queue">Queue</Label>
|
||||
<Select value={queueId} onValueChange={(v) => setQueueId(v === "_global" || !v ? "" : v)}>
|
||||
<SelectTrigger id="s-queue">
|
||||
<SelectValue placeholder="Global" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_global">Global</SelectItem>
|
||||
{queues.map((q) => (
|
||||
<SelectItem key={q.id} value={q.id}>
|
||||
{q.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-cond">Condition Type</Label>
|
||||
<Select value={conditionType} onValueChange={(v) => setConditionType(v ?? "OnCreate")}>
|
||||
<SelectTrigger id="s-cond">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="OnCreate">OnCreate</SelectItem>
|
||||
<SelectItem value="OnStatusChange">OnStatusChange</SelectItem>
|
||||
<SelectItem value="OnResolve">OnResolve</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-action">Action Type</Label>
|
||||
<Select value={actionType} onValueChange={(v) => setActionType(v ?? "SendEmail")}>
|
||||
<SelectTrigger id="s-action">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="SendEmail">SendEmail</SelectItem>
|
||||
<SelectItem value="Webhook">Webhook</SelectItem>
|
||||
<SelectItem value="SetCustomField">SetCustomField</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-config">Action Config (JSON)</Label>
|
||||
<Textarea
|
||||
id="s-config"
|
||||
placeholder='{"key": "value"}'
|
||||
value={actionConfig}
|
||||
onChange={(e) => setActionConfig(e.target.value)}
|
||||
className="min-h-20 font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-stage">Stage</Label>
|
||||
<Select value={stage} onValueChange={(v) => setStage(v ?? "TransactionCreate")}>
|
||||
<SelectTrigger id="s-stage">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="TransactionCreate">TransactionCreate</SelectItem>
|
||||
<SelectItem value="TransactionBatch">TransactionBatch</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="s-order">Sort Order</Label>
|
||||
<Input
|
||||
id="s-order"
|
||||
type="number"
|
||||
value={sortOrder}
|
||||
onChange={(e) => setSortOrder(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id="s-disabled"
|
||||
type="checkbox"
|
||||
checked={disabled}
|
||||
onChange={(e) => setDisabled(e.target.checked)}
|
||||
className="size-4 rounded border-neutral-700 bg-neutral-800 accent-primary"
|
||||
/>
|
||||
<Label htmlFor="s-disabled" className="cursor-pointer">
|
||||
Disabled
|
||||
</Label>
|
||||
</div>
|
||||
{saveError && <div className="text-sm text-red-400">{saveError}</div>}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={!name.trim() || saving}>
|
||||
{saving ? "Saving..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomFieldsTab() {
|
||||
const [fields, setFields] = useState<CustomField[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
const [fieldType, setFieldType] = useState("Freeform");
|
||||
const [values, setValues] = useState("");
|
||||
const [maxValues, setMaxValues] = useState(0);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const fetchFields = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { data, error } = await getCustomFields();
|
||||
if (error) setError(error);
|
||||
else setFields(data ?? []);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchFields();
|
||||
}, [fetchFields]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!name.trim()) return;
|
||||
let parsedValues: unknown = null;
|
||||
if (values.trim()) {
|
||||
try {
|
||||
parsedValues = JSON.parse(values);
|
||||
} catch {
|
||||
setSaveError("Invalid JSON in values.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
const { error } = await createCustomField({
|
||||
name: name.trim(),
|
||||
field_type: fieldType,
|
||||
values: parsedValues,
|
||||
max_values: maxValues,
|
||||
});
|
||||
setSaving(false);
|
||||
if (error) {
|
||||
setSaveError(error);
|
||||
} else {
|
||||
setDialogOpen(false);
|
||||
setName("");
|
||||
setFieldType("Freeform");
|
||||
setValues("");
|
||||
setMaxValues(0);
|
||||
fetchFields();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">Custom Fields</h2>
|
||||
<Button size="sm" onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Add Custom Field
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-sm text-red-400">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="text-sm text-neutral-400 py-6">Loading...</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Max Values</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{fields.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="text-neutral-400 text-center py-6">
|
||||
No custom fields yet.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
fields.map((f) => (
|
||||
<TableRow key={f.id}>
|
||||
<TableCell className="font-medium">{f.name}</TableCell>
|
||||
<TableCell>{f.field_type}</TableCell>
|
||||
<TableCell>{f.max_values === 0 ? "Unlimited" : f.max_values}</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Custom Field</DialogTitle>
|
||||
<DialogDescription>Create a new custom field definition.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="cf-name">Name</Label>
|
||||
<Input
|
||||
id="cf-name"
|
||||
placeholder="Field name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="cf-type">Field Type</Label>
|
||||
<Select value={fieldType} onValueChange={(v) => setFieldType(v ?? "Freeform")}>
|
||||
<SelectTrigger id="cf-type">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Freeform">Freeform</SelectItem>
|
||||
<SelectItem value="SelectSingle">SelectSingle</SelectItem>
|
||||
<SelectItem value="SelectMulti">SelectMulti</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="cf-values">Values (JSON array, for select types)</Label>
|
||||
<Textarea
|
||||
id="cf-values"
|
||||
placeholder='["Option A", "Option B"]'
|
||||
value={values}
|
||||
onChange={(e) => setValues(e.target.value)}
|
||||
className="min-h-20 font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="cf-max">Max Values (0 = unlimited)</Label>
|
||||
<Input
|
||||
id="cf-max"
|
||||
type="number"
|
||||
min={0}
|
||||
value={maxValues}
|
||||
onChange={(e) => setMaxValues(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
{saveError && <div className="text-sm text-red-400">{saveError}</div>}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={!name.trim() || saving}>
|
||||
{saving ? "Saving..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user