Add project staffing endpoints and project detail Kanban UI

2026-02-01 23:46:14 +05:30
parent 5b4257ef33
commit f0e065abcd
17 changed files with 1589 additions and 2 deletions
--- a/frontend/src/app/departments/page.tsx
+++ b/frontend/src/app/departments/page.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+
+import {
+  useCreateDepartmentDepartmentsPost,
+  useListDepartmentsDepartmentsGet,
+  useUpdateDepartmentDepartmentsDepartmentIdPatch,
+} from "@/api/generated/org/org";
+import { useListEmployeesEmployeesGet } from "@/api/generated/org/org";
+
+export default function DepartmentsPage() {
+  const [name, setName] = useState("");
+  const [headId, setHeadId] = useState<string>("");
+
+  const departments = useListDepartmentsDepartmentsGet();
+  const employees = useListEmployeesEmployeesGet();
+
+  const createDepartment = useCreateDepartmentDepartmentsPost({
+    mutation: {
+      onSuccess: () => {
+        setName("");
+        setHeadId("");
+        departments.refetch();
+      },
+    },
+  });
+
+  const updateDepartment = useUpdateDepartmentDepartmentsDepartmentIdPatch({
+    mutation: {
+      onSuccess: () => departments.refetch(),
+    },
+  });
+
+  const sortedEmployees = useMemo(() => {
+    return (employees.data ?? []).slice().sort((a, b) => (a.name ?? "").localeCompare(b.name ?? ""));
+  }, [employees.data]);
+
+  return (
+    <main className="mx-auto max-w-5xl p-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">Departments</h1>
+          <p className="mt-1 text-sm text-muted-foreground">Create departments and assign department heads.</p>
+        </div>
+        <Button variant="outline" onClick={() => departments.refetch()} disabled={departments.isFetching}>
+          Refresh
+        </Button>
+      </div>
+
+      <div className="mt-6 grid gap-4 sm:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Create department</CardTitle>
+            <CardDescription>Optional head</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Input placeholder="Department name" value={name} onChange={(e) => setName(e.target.value)} />
+            <Select value={headId} onChange={(e) => setHeadId(e.target.value)}>
+              <option value="">(no head)</option>
+              {sortedEmployees.map((e) => (
+                <option key={e.id ?? e.name} value={e.id ?? ""}>
+                  {e.name} ({e.employee_type})
+                </option>
+              ))}
+            </Select>
+            <Button
+              onClick={() =>
+                createDepartment.mutate({
+                  data: {
+                    name,
+                    head_employee_id: headId ? Number(headId) : null,
+                  },
+                })
+              }
+              disabled={!name.trim() || createDepartment.isPending}
+            >
+              Create
+            </Button>
+            {createDepartment.error ? (
+              <div className="text-sm text-destructive">{(createDepartment.error as Error).message}</div>
+            ) : null}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>All departments</CardTitle>
+            <CardDescription>{(departments.data ?? []).length} total</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {departments.isLoading ? <div className="text-sm text-muted-foreground">Loading…</div> : null}
+            {departments.error ? (
+              <div className="text-sm text-destructive">{(departments.error as Error).message}</div>
+            ) : null}
+            {!departments.isLoading && !departments.error ? (
+              <ul className="space-y-2">
+                {(departments.data ?? []).map((d) => (
+                  <li key={d.id ?? d.name} className="rounded-md border p-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="font-medium">{d.name}</div>
+                      <div className="text-xs text-muted-foreground">id: {d.id}</div>
+                    </div>
+                    <div className="mt-3 flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground">Head:</span>
+                      <Select
+                        value={d.head_employee_id ? String(d.head_employee_id) : ""}
+                        onChange={(e) =>
+                          updateDepartment.mutate({
+                            departmentId: Number(d.id),
+                            data: { head_employee_id: e.target.value ? Number(e.target.value) : null },
+                          })
+                        }
+                      >
+                        <option value="">(none)</option>
+                        {sortedEmployees.map((e) => (
+                          <option key={e.id ?? e.name} value={e.id ?? ""}>
+                            {e.name}
+                          </option>
+                        ))}
+                      </Select>
+                    </div>
+                  </li>
+                ))}
+                {(departments.data ?? []).length === 0 ? (
+                  <li className="text-sm text-muted-foreground">No departments yet.</li>
+                ) : null}
+              </ul>
+            ) : null}
+            {updateDepartment.error ? (
+              <div className="mt-3 text-sm text-destructive">{(updateDepartment.error as Error).message}</div>
+            ) : null}
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}