@hed-hog/operations 0.0.330 → 0.0.331

package/hedhog/frontend/app/_components/project-assignments-tab.tsx.ejs

@@ -1,450 +1,435 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { EntityPicker } from '@/components/ui/entity-picker';
-import { Input } from '@/components/ui/input';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Check, Loader2, Pencil, Plus, X } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import type {
-  OperationsCollaboratorDetails,
-  OperationsProject,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatDateRange,
-  formatEnumLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-import { ProjectFormScreen } from './project-form-screen';
-import { StatusBadge } from './status-badge';
-
-const PAGE_SIZE = 10;
-
-type AssignmentEditState = {
-  roleLabel: string;
-  weeklyHours: string;
-  allocationPercent: string;
-  startDate: string;
-  endDate: string;
-};
-
-type ProjectAssignmentsTabProps = {
-  collaborator: OperationsCollaboratorDetails | null;
-  request: Parameters<typeof mutateOperations>[0];
-  onUpdated: () => void;
-  disabled?: boolean;
-};
-
-export function ProjectAssignmentsTab({
-  collaborator,
-  request,
-  onUpdated,
-  disabled,
-}: ProjectAssignmentsTabProps) {
-  const commonT = useTranslations('operations.Common');
-  const detailsT = useTranslations('operations.CollaboratorDetailsPage');
-
-  const [page, setPage] = useState(0);
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [editState, setEditState] = useState<AssignmentEditState | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [adding, setAdding] = useState(false);
-  const [createSheetOpen, setCreateSheetOpen] = useState(false);
-  const [pickerKey, setPickerKey] = useState(0);
-
-  const projects = collaborator?.assignedProjects ?? [];
-  const assignedIds = new Set(projects.map((p) => p.id));
-  const totalPages = Math.ceil(projects.length / PAGE_SIZE);
-  const visibleProjects = projects.slice(
-    page * PAGE_SIZE,
-    (page + 1) * PAGE_SIZE
-  );
-
-  const startEditing = (
-    project: OperationsCollaboratorDetails['assignedProjects'][number]
-  ) => {
-    setEditingId(project.id);
-    setEditState({
-      roleLabel: project.roleLabel ?? '',
-      weeklyHours:
-        project.weeklyHours != null ? String(project.weeklyHours) : '',
-      allocationPercent:
-        project.allocationPercent != null
-          ? String(project.allocationPercent)
-          : '',
-      startDate: project.startDate
-        ? String(project.startDate).slice(0, 10)
-        : '',
-      endDate: project.endDate ? String(project.endDate).slice(0, 10) : '',
-    });
-  };
-
-  const cancelEditing = () => {
-    setEditingId(null);
-    setEditState(null);
-  };
-
-  const saveEditing = async (projectId: number) => {
-    if (!collaborator || !editState) return;
-    setSaving(true);
-    try {
-      await mutateOperations(
-        request,
-        `/operations/collaborators/${collaborator.id}/projects/${projectId}`,
-        'PATCH',
-        {
-          roleLabel: trimToNull(editState.roleLabel),
-          weeklyHours: parseNumberInput(editState.weeklyHours),
-          allocationPercent: parseNumberInput(editState.allocationPercent),
-          startDate: trimToNull(editState.startDate),
-          endDate: trimToNull(editState.endDate),
-        }
-      );
-      setEditingId(null);
-      setEditState(null);
-      onUpdated();
-    } catch {
-      /* errors surfaced by onUpdated not triggering */
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const assignProject = async (projectId: number) => {
-    if (!collaborator) return;
-    setAdding(true);
-    try {
-      await mutateOperations(
-        request,
-        `/operations/collaborators/${collaborator.id}/projects`,
-        'POST',
-        { projectId }
-      );
-      setPickerKey((k) => k + 1);
-      onUpdated();
-    } finally {
-      setAdding(false);
-    }
-  };
-
-  return (
-    <div className="space-y-3">
-      {!disabled ? (
-        <div className="flex items-center gap-2">
-          <div className="min-w-0 flex-1">
-            <EntityPicker<OperationsProject>
-              key={pickerKey}
-              placeholder={detailsT('addProject')}
-              searchPlaceholder={detailsT('searchProject')}
-              showCreateButton={false}
-              clearable={false}
-              disabled={!collaborator || adding}
-              loadOptions={async ({ page: p, pageSize: ps, search }) => {
-                const params = new URLSearchParams({
-                  page: String(p),
-                  pageSize: String(ps),
-                });
-                if (search.trim()) params.set('search', search.trim());
-                const res = await fetchOperations<
-                  PaginatedResponse<OperationsProject>
-                >(request, `/operations/projects?${params.toString()}`);
-                return {
-                  items: res.data.filter((proj) => !assignedIds.has(proj.id)),
-                  hasMore:
-                    (res.page ?? p) * (res.pageSize ?? ps) <
-                    (res.total ?? 0),
-                };
-              }}
-              getOptionValue={(opt) => opt.id}
-              getOptionLabel={(opt) => opt.name}
-              getOptionDescription={(opt) =>
-                [opt.code, opt.clientName].filter(Boolean).join(' • ') ||
-                undefined
-              }
-              onChange={(value) => {
-                if (value != null) void assignProject(Number(value));
-              }}
-            />
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="shrink-0"
-            title={detailsT('createProject')}
-            onClick={() => setCreateSheetOpen(true)}
-          >
-            {adding ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <Plus className="size-4" />
-            )}
-          </Button>
-        </div>
-      ) : null}
-
-      {projects.length === 0 ? (
-        <p className="text-sm text-muted-foreground">{detailsT('noProjects')}</p>
-      ) : (
-        <>
-          <div className="space-y-2">
-            {visibleProjects.map((project) => {
-              const isEditing = editingId === project.id;
-
-              if (isEditing && editState) {
-                return (
-                  <div
-                    key={project.id}
-                    className="space-y-2 rounded-lg border px-3 py-2.5"
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">
-                          {project.name}
-                        </div>
-                        {project.code ? (
-                          <div className="text-xs text-muted-foreground">
-                            {project.code}
-                          </div>
-                        ) : null}
-                      </div>
-                      <StatusBadge
-                        label={formatEnumLabel(project.status)}
-                        className={getStatusBadgeClass(project.status)}
-                      />
-                    </div>
-
-                    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
-                      <div className="col-span-2 space-y-1 sm:col-span-1">
-                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                          {commonT('labels.role')}
-                        </div>
-                        <Input
-                          className="h-7 text-xs"
-                          value={editState.roleLabel}
-                          onChange={(e) =>
-                            setEditState(
-                              (s) => s && { ...s, roleLabel: e.target.value }
-                            )
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                          {commonT('labels.weeklyCapacity')}
-                        </div>
-                        <Input
-                          className="h-7 text-xs"
-                          type="number"
-                          min="0"
-                          step="0.5"
-                          value={editState.weeklyHours}
-                          onChange={(e) =>
-                            setEditState(
-                              (s) => s && { ...s, weeklyHours: e.target.value }
-                            )
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                          {commonT('labels.allocationPercent')}
-                        </div>
-                        <div className="relative">
-                          <Input
-                            className="h-7 pr-5 text-xs"
-                            type="number"
-                            min="0"
-                            max="100"
-                            step="1"
-                            value={editState.allocationPercent}
-                            onChange={(e) =>
-                              setEditState(
-                                (s) =>
-                                  s && {
-                                    ...s,
-                                    allocationPercent: e.target.value,
-                                  }
-                              )
-                            }
-                          />
-                          <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground">
-                            %
-                          </span>
-                        </div>
-                      </div>
-                      <div className="space-y-1">
-                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                          {commonT('labels.startDate')}
-                        </div>
-                        <Input
-                          className="h-7 text-xs"
-                          type="date"
-                          value={editState.startDate}
-                          onChange={(e) =>
-                            setEditState(
-                              (s) => s && { ...s, startDate: e.target.value }
-                            )
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                          {commonT('labels.endDate')}
-                        </div>
-                        <Input
-                          className="h-7 text-xs"
-                          type="date"
-                          value={editState.endDate}
-                          onChange={(e) =>
-                            setEditState(
-                              (s) => s && { ...s, endDate: e.target.value }
-                            )
-                          }
-                        />
-                      </div>
-                    </div>
-
-                    <div className="flex justify-end gap-1.5 pt-1">
-                      <Button
-                        type="button"
-                        size="sm"
-                        variant="ghost"
-                        className="h-7 px-2 text-xs"
-                        onClick={cancelEditing}
-                        disabled={saving}
-                      >
-                        <X className="mr-1 size-3" />
-                        {commonT('actions.cancel')}
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        className="h-7 px-2 text-xs"
-                        onClick={() => void saveEditing(project.id)}
-                        disabled={saving}
-                      >
-                        {saving ? (
-                          <Loader2 className="mr-1 size-3 animate-spin" />
-                        ) : (
-                          <Check className="mr-1 size-3" />
-                        )}
-                        {commonT('actions.save')}
-                      </Button>
-                    </div>
-                  </div>
-                );
-              }
-
-              return (
-                <div
-                  key={project.id}
-                  className="flex items-center gap-3 rounded-lg border px-3 py-2.5"
-                >
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-sm font-medium">
-                      {project.name}
-                    </div>
-                    <div className="truncate text-xs text-muted-foreground">
-                      {[
-                        project.code,
-                        project.roleLabel || null,
-                        project.weeklyHours != null
-                          ? `${project.weeklyHours}h/sem`
-                          : null,
-                        project.allocationPercent != null
-                          ? `${project.allocationPercent}%`
-                          : null,
-                        formatDateRange(project.startDate, project.endDate),
-                      ]
-                        .filter(Boolean)
-                        .join(' • ')}
-                    </div>
-                  </div>
-                  <div className="flex shrink-0 items-center gap-2">
-                    <StatusBadge
-                      label={formatEnumLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                    {!disabled ? (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="h-6 w-6"
-                        onClick={() => startEditing(project)}
-                      >
-                        <Pencil className="size-3" />
-                        <span className="sr-only">{commonT('actions.edit')}</span>
-                      </Button>
-                    ) : null}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          {totalPages > 1 ? (
-            <div className="flex items-center justify-between pt-1 text-xs text-muted-foreground">
-              <span>
-                {page * PAGE_SIZE + 1}–
-                {Math.min((page + 1) * PAGE_SIZE, projects.length)} /{' '}
-                {projects.length}
-              </span>
-              <div className="flex gap-1">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-6 px-2 text-xs"
-                  disabled={page === 0}
-                  onClick={() => setPage((p) => p - 1)}
-                >
-                  ‹
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-6 px-2 text-xs"
-                  disabled={page >= totalPages - 1}
-                  onClick={() => setPage((p) => p + 1)}
-                >
-                  ›
-                </Button>
-              </div>
-            </div>
-          ) : null}
-        </>
-      )}
-
-      <Sheet open={createSheetOpen} onOpenChange={setCreateSheetOpen}>
-        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
-          <SheetHeader>
-            <SheetTitle>{detailsT('createProject')}</SheetTitle>
-            <SheetDescription>{detailsT('createProjectDescription')}</SheetDescription>
-          </SheetHeader>
-          <ProjectFormScreen
-            onCancel={() => setCreateSheetOpen(false)}
-            onSaved={async (project) => {
-              setCreateSheetOpen(false);
-              if (collaborator) {
-                await assignProject(project.id);
-              }
-            }}
-          />
-        </SheetContent>
-      </Sheet>
-    </div>
-  );
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Check, Loader2, Pencil, Plus, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import type {
+  OperationsCollaboratorDetails,
+  OperationsProject,
+  PaginatedResponse,
+} from '../_lib/types';
+import {
+  formatDateRange,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { ProjectFormScreen } from './project-form-screen';
+import { StatusBadge } from './status-badge';
+
+const PAGE_SIZE = 10;
+
+type AssignmentEditState = {
+  roleLabel: string;
+  weeklyHours: string;
+  allocationPercent: string;
+  startDate: string;
+  endDate: string;
+};
+
+type ProjectAssignmentsTabProps = {
+  collaborator: OperationsCollaboratorDetails | null;
+  request: Parameters<typeof mutateOperations>[0];
+  onUpdated: () => void;
+  disabled?: boolean;
+};
+
+export function ProjectAssignmentsTab({
+  collaborator,
+  request,
+  onUpdated,
+  disabled,
+}: ProjectAssignmentsTabProps) {
+  const commonT = useTranslations('operations.Common');
+  const detailsT = useTranslations('operations.CollaboratorDetailsPage');
+
+  const [page, setPage] = useState(0);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editState, setEditState] = useState<AssignmentEditState | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [createSheetOpen, setCreateSheetOpen] = useState(false);
+  const [pickerKey, setPickerKey] = useState(0);
+
+  const projects = collaborator?.assignedProjects ?? [];
+  const assignedIds = new Set(projects.map((p) => p.id));
+  const totalPages = Math.ceil(projects.length / PAGE_SIZE);
+  const visibleProjects = projects.slice(
+    page * PAGE_SIZE,
+    (page + 1) * PAGE_SIZE
+  );
+
+  const startEditing = (
+    project: OperationsCollaboratorDetails['assignedProjects'][number]
+  ) => {
+    setEditingId(project.id);
+    setEditState({
+      roleLabel: project.roleLabel ?? '',
+      weeklyHours:
+        project.weeklyHours != null ? String(project.weeklyHours) : '',
+      allocationPercent:
+        project.allocationPercent != null
+          ? String(project.allocationPercent)
+          : '',
+      startDate: project.startDate
+        ? String(project.startDate).slice(0, 10)
+        : '',
+      endDate: project.endDate ? String(project.endDate).slice(0, 10) : '',
+    });
+  };
+
+  const cancelEditing = () => {
+    setEditingId(null);
+    setEditState(null);
+  };
+
+  const saveEditing = async (projectId: number) => {
+    if (!collaborator || !editState) return;
+    setSaving(true);
+    try {
+      await mutateOperations(
+        request,
+        `/operations/collaborators/${collaborator.id}/projects/${projectId}`,
+        'PATCH',
+        {
+          roleLabel: trimToNull(editState.roleLabel),
+          weeklyHours: parseNumberInput(editState.weeklyHours),
+          allocationPercent: parseNumberInput(editState.allocationPercent),
+          startDate: trimToNull(editState.startDate),
+          endDate: trimToNull(editState.endDate),
+        }
+      );
+      setEditingId(null);
+      setEditState(null);
+      onUpdated();
+    } catch {
+      /* errors surfaced by onUpdated not triggering */
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const assignProject = async (projectId: number) => {
+    if (!collaborator) return;
+    setAdding(true);
+    try {
+      await mutateOperations(
+        request,
+        `/operations/collaborators/${collaborator.id}/projects`,
+        'POST',
+        { projectId }
+      );
+      setPickerKey((k) => k + 1);
+      onUpdated();
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {!disabled ? (
+        <div className="flex items-center gap-2">
+          <div className="min-w-0 flex-1">
+            <EntityPicker<OperationsProject>
+              key={pickerKey}
+              placeholder={detailsT('addProject')}
+              searchPlaceholder={detailsT('searchProject')}
+              showCreateButton={false}
+              clearable={false}
+              disabled={!collaborator || adding}
+              loadOptions={async ({ page: p, pageSize: ps, search }) => {
+                const params = new URLSearchParams({
+                  page: String(p),
+                  pageSize: String(ps),
+                });
+                if (search.trim()) params.set('search', search.trim());
+                const res = await fetchOperations<
+                  PaginatedResponse<OperationsProject>
+                >(request, `/operations/projects?${params.toString()}`);
+                return {
+                  items: res.data.filter((proj) => !assignedIds.has(proj.id)),
+                  hasMore:
+                    (res.page ?? p) * (res.pageSize ?? ps) <
+                    (res.total ?? 0),
+                };
+              }}
+              getOptionValue={(opt) => opt.id}
+              getOptionLabel={(opt) => opt.name}
+              getOptionDescription={(opt) =>
+                [opt.code, opt.clientName].filter(Boolean).join(' • ') ||
+                undefined
+              }
+              onChange={(value) => {
+                if (value != null) void assignProject(Number(value));
+              }}
+            />
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="shrink-0"
+            title={detailsT('createProject')}
+            onClick={() => setCreateSheetOpen(true)}
+          >
+            {adding ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Plus className="size-4" />
+            )}
+          </Button>
+        </div>
+      ) : null}
+
+      {projects.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{detailsT('noProjects')}</p>
+      ) : (
+        <>
+          <div className="space-y-2">
+            {visibleProjects.map((project) => {
+              const isEditing = editingId === project.id;
+
+              if (isEditing && editState) {
+                return (
+                  <div
+                    key={project.id}
+                    className="space-y-2 rounded-lg border px-3 py-2.5"
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium">
+                          {project.name}
+                        </div>
+                        {project.code ? (
+                          <div className="text-xs text-muted-foreground">
+                            {project.code}
+                          </div>
+                        ) : null}
+                      </div>
+                      <StatusBadge
+                        label={formatEnumLabel(project.status)}
+                        className={getStatusBadgeClass(project.status)}
+                      />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+                      <div className="space-y-1">
+                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {commonT('labels.weeklyCapacity')}
+                        </div>
+                        <Input
+                          className="h-7 text-xs"
+                          type="number"
+                          min="0"
+                          step="0.5"
+                          value={editState.weeklyHours}
+                          onChange={(e) =>
+                            setEditState(
+                              (s) => s && { ...s, weeklyHours: e.target.value }
+                            )
+                          }
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {commonT('labels.allocationPercent')}
+                        </div>
+                        <div className="relative">
+                          <Input
+                            className="h-7 pr-5 text-xs"
+                            type="number"
+                            min="0"
+                            max="100"
+                            step="1"
+                            value={editState.allocationPercent}
+                            onChange={(e) =>
+                              setEditState(
+                                (s) =>
+                                  s && {
+                                    ...s,
+                                    allocationPercent: e.target.value,
+                                  }
+                              )
+                            }
+                          />
+                          <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground">
+                            %
+                          </span>
+                        </div>
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {commonT('labels.startDate')}
+                        </div>
+                        <Input
+                          className="h-7 text-xs"
+                          type="date"
+                          value={editState.startDate}
+                          onChange={(e) =>
+                            setEditState(
+                              (s) => s && { ...s, startDate: e.target.value }
+                            )
+                          }
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {commonT('labels.endDate')}
+                        </div>
+                        <Input
+                          className="h-7 text-xs"
+                          type="date"
+                          value={editState.endDate}
+                          onChange={(e) =>
+                            setEditState(
+                              (s) => s && { ...s, endDate: e.target.value }
+                            )
+                          }
+                        />
+                      </div>
+                    </div>
+
+                    <div className="flex justify-end gap-1.5 pt-1">
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        className="h-7 px-2 text-xs"
+                        onClick={cancelEditing}
+                        disabled={saving}
+                      >
+                        <X className="mr-1 size-3" />
+                        {commonT('actions.cancel')}
+                      </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={() => void saveEditing(project.id)}
+                        disabled={saving}
+                      >
+                        {saving ? (
+                          <Loader2 className="mr-1 size-3 animate-spin" />
+                        ) : (
+                          <Check className="mr-1 size-3" />
+                        )}
+                        {commonT('actions.save')}
+                      </Button>
+                    </div>
+                  </div>
+                );
+              }
+
+              return (
+                <div
+                  key={project.id}
+                  className="flex items-center gap-3 rounded-lg border px-3 py-2.5"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium">
+                      {project.name}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                      {[
+                        project.code,
+                        project.weeklyHours != null
+                          ? `${project.weeklyHours}h/sem`
+                          : null,
+                        project.allocationPercent != null
+                          ? `${project.allocationPercent}%`
+                          : null,
+                        formatDateRange(project.startDate, project.endDate),
+                      ]
+                        .filter(Boolean)
+                        .join(' • ')}
+                    </div>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-2">
+                    <StatusBadge
+                      label={formatEnumLabel(project.status)}
+                      className={getStatusBadgeClass(project.status)}
+                    />
+                    {!disabled ? (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={() => startEditing(project)}
+                      >
+                        <Pencil className="size-3" />
+                        <span className="sr-only">{commonT('actions.edit')}</span>
+                      </Button>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {totalPages > 1 ? (
+            <div className="flex items-center justify-between pt-1 text-xs text-muted-foreground">
+              <span>
+                {page * PAGE_SIZE + 1}–
+                {Math.min((page + 1) * PAGE_SIZE, projects.length)} /{' '}
+                {projects.length}
+              </span>
+              <div className="flex gap-1">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  disabled={page === 0}
+                  onClick={() => setPage((p) => p - 1)}
+                >
+                  ‹
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  disabled={page >= totalPages - 1}
+                  onClick={() => setPage((p) => p + 1)}
+                >
+                  ›
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+
+      <Sheet open={createSheetOpen} onOpenChange={setCreateSheetOpen}>
+        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
+          <SheetHeader>
+            <SheetTitle>{detailsT('createProject')}</SheetTitle>
+            <SheetDescription>{detailsT('createProjectDescription')}</SheetDescription>
+          </SheetHeader>
+          <ProjectFormScreen
+            onCancel={() => setCreateSheetOpen(false)}
+            onSaved={async (project) => {
+              setCreateSheetOpen(false);
+              if (collaborator) {
+                await assignProject(project.id);
+              }
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
 }