@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,450 @@
+'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>
+  );
+}