add: layout

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
2026-05-21 11:48:04 +08:00
parent 8454d8bcf3
commit 5241f0f1dd
13 changed files with 657 additions and 507 deletions
@@ -78,11 +78,11 @@ export default function EditTaskList() {
if (!updated) return;
// ── 2. Diff groups ────────────────────────────────────────────────────
const toAssign = selectedGroupIds.filter((id) => !originalGroupIds.includes(id));
const toAssign = selectedGroupIds.filter((id) => !originalGroupIds.includes(id));
const toUnassign = originalGroupIds.filter((id) => !selectedGroupIds.includes(id));
await Promise.all([
toAssign.length ? assignGroups(taskListId, toAssign) : Promise.resolve(),
toAssign.length ? assignGroups(taskListId, toAssign) : Promise.resolve(),
toUnassign.length ? unassignGroups(taskListId, toUnassign) : Promise.resolve(),
]);
@@ -100,87 +100,89 @@ export default function EditTaskList() {
);
return (
<div className="max-w-xl mx-auto py-8 px-4">
<div className="flex gap-2 items-center mb-4">
<Button
variant="ghost"
onClick={() => navigate('/admin/taskList')}
>
<ArrowLeft className="size-4" />
</Button>
<div className="space-y-1">
<h1 className="font-medium">Edit Task List</h1>
<p className="text-sm text-muted-foreground">Update task list.</p>
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
<div className="mx-auto">
<div className="flex gap-2 items-center mb-4">
<Button
variant="ghost"
onClick={() => navigate(`/admin/taskList`)}
>
<ArrowLeft className="size-4" />
</Button>
<div className="space-y-1">
<h1 className="text-xl font-semibold">Edit Task List</h1>
<p className="text-sm text-muted-foreground">Update task list.</p>
</div>
</div>
<Card className="lg:w-2xl">
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
{/* Name */}
<div className="space-y-1">
<Label htmlFor="name">Name *</Label>
<Input
id="name"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
/>
{errors.name && (
<p className="text-xs text-destructive">{errors.name}</p>
)}
</div>
{/* Description */}
<div className="space-y-1">
<Label htmlFor="description">Description</Label>
<Textarea
id="description"
value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })}
rows={3}
/>
</div>
{/* Groups */}
<div className="space-y-1">
<Label>
Assigned Groups
<span className="ml-1.5 text-xs text-muted-foreground font-normal">
(optional)
</span>
</Label>
<GroupMultiSelect
value={selectedGroupIds}
onChange={setSelectedGroupIds}
disabled={loading}
placeholder="Select groups to assign…"
/>
<p className="text-xs text-muted-foreground">
Members of selected groups will be able to see and complete this task list.
</p>
</div>
{/* Actions */}
<div className="flex gap-2 justify-end pt-2">
<Button
type="button"
variant="outline"
onClick={() => navigate(`/admin/taskList`)}
>
Cancel
</Button>
<Button
type="submit"
disabled={loading || !isDirty}
>
{loading ? 'Saving…' : 'Save Changes'}
</Button>
</div>
</form>
</CardContent>
</Card>
</div>
<Card>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
{/* Name */}
<div className="space-y-1">
<Label htmlFor="name">Name *</Label>
<Input
id="name"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
/>
{errors.name && (
<p className="text-xs text-destructive">{errors.name}</p>
)}
</div>
{/* Description */}
<div className="space-y-1">
<Label htmlFor="description">Description</Label>
<Textarea
id="description"
value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })}
rows={3}
/>
</div>
{/* Groups */}
<div className="space-y-1">
<Label>
Assigned Groups
<span className="ml-1.5 text-xs text-muted-foreground font-normal">
(optional)
</span>
</Label>
<GroupMultiSelect
value={selectedGroupIds}
onChange={setSelectedGroupIds}
disabled={loading}
placeholder="Select groups to assign…"
/>
<p className="text-xs text-muted-foreground">
Members of selected groups will be able to see and complete this task list.
</p>
</div>
{/* Actions */}
<div className="flex gap-2 justify-end pt-2">
<Button
type="button"
variant="outline"
onClick={() => navigate('/admin/taskList')}
>
Cancel
</Button>
<Button
type="submit"
disabled={loading || !isDirty}
>
{loading ? 'Saving…' : 'Save Changes'}
</Button>
</div>
</form>
</CardContent>
</Card>
</div>
);
}