Merge pull request #5 from abhi1693/jarvis/ux-audit-departments

Departments UX: loading + safer head updates
This commit is contained in:
Abhimanyu Saharan
2026-02-02 13:28:53 +05:30
committed by GitHub

View File

@@ -62,6 +62,8 @@ export default function DepartmentsPage() {
<CardDescription>Optional head</CardDescription> <CardDescription>Optional head</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
{employees.isLoading ? <div className="text-sm text-muted-foreground">Loading employees</div> : null}
{employees.error ? <div className="text-sm text-destructive">{(employees.error as Error).message}</div> : null}
<Input placeholder="Department name" value={name} onChange={(e) => setName(e.target.value)} /> <Input placeholder="Department name" value={name} onChange={(e) => setName(e.target.value)} />
<Select value={headId} onChange={(e) => setHeadId(e.target.value)}> <Select value={headId} onChange={(e) => setHeadId(e.target.value)}>
<option value="">(no head)</option> <option value="">(no head)</option>
@@ -80,7 +82,7 @@ export default function DepartmentsPage() {
}, },
}) })
} }
disabled={!name.trim() || createDepartment.isPending} disabled={!name.trim() || createDepartment.isPending || employees.isFetching}
> >
Create Create
</Button> </Button>
@@ -111,13 +113,9 @@ export default function DepartmentsPage() {
<div className="mt-3 flex items-center gap-2"> <div className="mt-3 flex items-center gap-2">
<span className="text-xs text-muted-foreground">Head:</span> <span className="text-xs text-muted-foreground">Head:</span>
<Select <Select
disabled={d.id == null}
value={d.head_employee_id ? String(d.head_employee_id) : ""} value={d.head_employee_id ? String(d.head_employee_id) : ""}
onChange={(e) => onBlur={(e) => { if (d.id == null) return; updateDepartment.mutate({ departmentId: Number(d.id), data: { head_employee_id: e.target.value ? Number(e.target.value) : null } }); }}
updateDepartment.mutate({
departmentId: Number(d.id),
data: { head_employee_id: e.target.value ? Number(e.target.value) : null },
})
}
> >
<option value="">(none)</option> <option value="">(none)</option>
{sortedEmployees.map((e) => ( {sortedEmployees.map((e) => (