@hed-hog/operations 0.0.294 → 0.0.296

package/hedhog/frontend/app/_components/project-form-screen.tsx.ejs

@@ -0,0 +1,689 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ArrowLeft, FolderKanban, Save } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type {
+  OperationsCollaborator,
+  OperationsContract,
+  OperationsProjectDetails,
+} from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { formatEnumLabel } from '../_lib/utils/format';
+
+type TeamAssignmentState = {
+  collaboratorId: number;
+  selected: boolean;
+  roleLabel: string;
+  weeklyHours: string;
+  allocationPercent: string;
+  isBillable: boolean;
+  status: string;
+};
+
+type ProjectFormState = {
+  contractId: string;
+  managerCollaboratorId: string;
+  code: string;
+  name: string;
+  clientName: string;
+  summary: string;
+  status: string;
+  progressPercent: string;
+  deliveryModel: string;
+  budgetAmount: string;
+  startDate: string;
+  endDate: string;
+  billingModel: string;
+  monthlyHourCap: string;
+  contractCode: string;
+  contractName: string;
+  contractDescription: string;
+  autoGenerateContractDraft: boolean;
+  teamAssignments: TeamAssignmentState[];
+};
+
+function buildEmptyForm(
+  collaborators: OperationsCollaborator[] = []
+): ProjectFormState {
+  return {
+    contractId: 'none',
+    managerCollaboratorId: 'none',
+    code: '',
+    name: '',
+    clientName: '',
+    summary: '',
+    status: 'planning',
+    progressPercent: '',
+    deliveryModel: 'project_delivery',
+    budgetAmount: '',
+    startDate: '',
+    endDate: '',
+    billingModel: 'time_and_material',
+    monthlyHourCap: '',
+    contractCode: '',
+    contractName: '',
+    contractDescription: '',
+    autoGenerateContractDraft: true,
+    teamAssignments: collaborators.map((collaborator) => ({
+      collaboratorId: collaborator.id,
+      selected: false,
+      roleLabel: '',
+      weeklyHours: '',
+      allocationPercent: '',
+      isBillable: true,
+      status: 'active',
+    })),
+  };
+}
+
+function toFormState(
+  project: OperationsProjectDetails,
+  collaborators: OperationsCollaborator[]
+): ProjectFormState {
+  const assignments = new Map(
+    (project.assignments ?? []).map((assignment) => [
+      assignment.collaboratorId,
+      assignment,
+    ])
+  );
+
+  return {
+    contractId: project.contractId ? String(project.contractId) : 'none',
+    managerCollaboratorId: project.managerCollaboratorId
+      ? String(project.managerCollaboratorId)
+      : 'none',
+    code: project.code ?? '',
+    name: project.name ?? '',
+    clientName: project.clientName ?? '',
+    summary: project.summary ?? '',
+    status: project.status ?? 'planning',
+    progressPercent:
+      project.progressPercent !== null && project.progressPercent !== undefined
+        ? String(project.progressPercent)
+        : '',
+    deliveryModel: project.deliveryModel ?? 'project_delivery',
+    budgetAmount:
+      project.budgetAmount !== null && project.budgetAmount !== undefined
+        ? String(project.budgetAmount)
+        : '',
+    startDate: project.startDate ?? '',
+    endDate: project.endDate ?? '',
+    billingModel:
+      project.relatedContract?.billingModel ?? 'time_and_material',
+    monthlyHourCap:
+      project.relatedContract?.monthlyHourCap !== null &&
+      project.relatedContract?.monthlyHourCap !== undefined
+        ? String(project.relatedContract.monthlyHourCap)
+        : '',
+    contractCode: project.relatedContract?.code ?? '',
+    contractName: project.relatedContract?.name ?? '',
+    contractDescription: project.relatedContract?.description ?? '',
+    autoGenerateContractDraft: true,
+    teamAssignments: collaborators.map((collaborator) => {
+      const assignment = assignments.get(collaborator.id);
+      return {
+        collaboratorId: collaborator.id,
+        selected: Boolean(assignment),
+        roleLabel: assignment?.roleLabel ?? '',
+        weeklyHours:
+          assignment?.weeklyHours !== null && assignment?.weeklyHours !== undefined
+            ? String(assignment.weeklyHours)
+            : '',
+        allocationPercent:
+          assignment?.allocationPercent !== null &&
+          assignment?.allocationPercent !== undefined
+            ? String(assignment.allocationPercent)
+            : '',
+        isBillable: assignment?.isBillable ?? true,
+        status: assignment?.status ?? 'active',
+      };
+    }),
+  };
+}
+
+export function ProjectFormScreen({ projectId }: { projectId?: number }) {
+  const t = useTranslations('operations.ProjectFormPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const [form, setForm] = useState<ProjectFormState>(buildEmptyForm());
+
+  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-project-form-collaborators', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+  });
+
+  const { data: contracts = [] } = useQuery<OperationsContract[]>({
+    queryKey: ['operations-project-form-contracts', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
+  });
+
+  const { data: project, isLoading: isLoadingProject } =
+    useQuery<OperationsProjectDetails>({
+      queryKey: ['operations-project-form', currentLocaleCode, projectId],
+      enabled: Boolean(projectId),
+      queryFn: () =>
+        fetchOperations<OperationsProjectDetails>(
+          request,
+          `/operations/projects/${projectId}`
+        ),
+    });
+
+  useEffect(() => {
+    if (!collaborators.length) {
+      return;
+    }
+
+    if (project) {
+      setForm(toFormState(project, collaborators));
+      return;
+    }
+
+    setForm((current) =>
+      current.teamAssignments.length ? current : buildEmptyForm(collaborators)
+    );
+  }, [collaborators, project]);
+
+  const updateAssignment = (
+    collaboratorId: number,
+    patch: Partial<TeamAssignmentState>
+  ) => {
+    setForm((current) => ({
+      ...current,
+      teamAssignments: current.teamAssignments.map((assignment) =>
+        assignment.collaboratorId === collaboratorId
+          ? { ...assignment, ...patch }
+          : assignment
+      ),
+    }));
+  };
+
+  const onSubmit = async () => {
+    if (!form.code.trim() || !form.name.trim() || !form.clientName.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    const payload = {
+      contractId: form.contractId === 'none' ? null : parseNumberInput(form.contractId),
+      managerCollaboratorId:
+        form.managerCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(form.managerCollaboratorId),
+      code: form.code.trim(),
+      name: form.name.trim(),
+      clientName: trimToNull(form.clientName),
+      summary: trimToNull(form.summary),
+      status: form.status,
+      progressPercent: parseNumberInput(form.progressPercent),
+      deliveryModel: form.deliveryModel,
+      budgetAmount: parseNumberInput(form.budgetAmount),
+      startDate: trimToNull(form.startDate),
+      endDate: trimToNull(form.endDate),
+      billingModel: form.billingModel,
+      monthlyHourCap: parseNumberInput(form.monthlyHourCap),
+      contractCode: trimToNull(form.contractCode),
+      contractName: trimToNull(form.contractName),
+      contractDescription: trimToNull(form.contractDescription),
+      autoGenerateContractDraft: form.contractId === 'none'
+        ? form.autoGenerateContractDraft
+        : false,
+      teamAssignments: form.teamAssignments
+        .filter((assignment) => assignment.selected)
+        .map((assignment) => ({
+          collaboratorId: assignment.collaboratorId,
+          roleLabel: trimToNull(assignment.roleLabel),
+          weeklyHours: parseNumberInput(assignment.weeklyHours),
+          allocationPercent: parseNumberInput(assignment.allocationPercent),
+          isBillable: assignment.isBillable,
+          status: assignment.status,
+          startDate: trimToNull(form.startDate),
+          endDate: trimToNull(form.endDate),
+        })),
+    };
+
+    try {
+      const response = projectId
+        ? await mutateOperations<OperationsProjectDetails>(
+            request,
+            `/operations/projects/${projectId}`,
+            'PATCH',
+            payload
+          )
+        : await mutateOperations<OperationsProjectDetails>(
+            request,
+            '/operations/projects',
+            'POST',
+            payload
+          );
+
+      showToastHandler?.(
+        'success',
+        projectId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+      router.push(`/operations/projects/${response.id}`);
+    } catch {
+      showToastHandler?.(
+        'error',
+        projectId ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  if (!access.isDirector && !access.isLoading) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t(projectId ? 'editTitle' : 'newTitle')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<FolderKanban className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => router.refresh()}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(projectId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                href={projectId ? `/operations/projects/${projectId}` : '/operations/projects'}
+              >
+                <ArrowLeft className="size-4" />
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button size="sm" onClick={() => void onSubmit()}>
+              <Save className="size-4" />
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title={t('sections.basicInfo')} description={t('sections.basicInfoDescription')}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.code')}</label>
+              <Input
+                value={form.code}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, code: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.name')}</label>
+              <Input
+                value={form.name}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, name: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.clientName')}</label>
+              <Input
+                value={form.clientName}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    clientName: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.deliveryModel')}</label>
+              <Select
+                value={form.deliveryModel}
+                onValueChange={(value) =>
+                  setForm((current) => ({ ...current, deliveryModel: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="project_delivery">Project Delivery</SelectItem>
+                  <SelectItem value="dedicated_team">Dedicated Team</SelectItem>
+                  <SelectItem value="shared_team">Shared Team</SelectItem>
+                  <SelectItem value="support">Support</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2 md:col-span-2">
+              <label className="text-sm font-medium">{t('fields.summary')}</label>
+              <Textarea
+                rows={4}
+                value={form.summary}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, summary: event.target.value }))
+                }
+              />
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard title={t('sections.governance')} description={t('sections.governanceDescription')}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.manager')}</label>
+              <Select
+                value={form.managerCollaboratorId}
+                onValueChange={(value) =>
+                  setForm((current) => ({
+                    ...current,
+                    managerCollaboratorId: value,
+                  }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">{commonT('labels.notAssigned')}</SelectItem>
+                  {collaborators.map((collaborator) => (
+                    <SelectItem key={collaborator.id} value={String(collaborator.id)}>
+                      {collaborator.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.status')}</label>
+              <Select
+                value={form.status}
+                onValueChange={(value) =>
+                  setForm((current) => ({ ...current, status: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="planning">Planning</SelectItem>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="at_risk">At Risk</SelectItem>
+                  <SelectItem value="paused">Paused</SelectItem>
+                  <SelectItem value="completed">Completed</SelectItem>
+                  <SelectItem value="archived">Archived</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.startDate')}</label>
+              <Input
+                type="date"
+                value={form.startDate}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, startDate: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.endDate')}</label>
+              <Input
+                type="date"
+                value={form.endDate}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, endDate: event.target.value }))
+                }
+              />
+            </div>
+          </div>
+        </SectionCard>
+      </div>
+
+      <SectionCard title={t('sections.team')} description={t('sections.teamDescription')}>
+        <div className="space-y-3">
+          {form.teamAssignments.map((assignment) => {
+            const collaborator = collaborators.find(
+              (item) => item.id === assignment.collaboratorId
+            );
+            if (!collaborator) {
+              return null;
+            }
+
+            return (
+              <div
+                key={assignment.collaboratorId}
+                className="grid gap-3 rounded-lg border p-4 lg:grid-cols-[minmax(220px,1fr)_minmax(180px,1fr)_120px_120px]"
+              >
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    checked={assignment.selected}
+                    onCheckedChange={(checked) =>
+                      updateAssignment(assignment.collaboratorId, {
+                        selected: checked === true,
+                      })
+                    }
+                  />
+                  <div>
+                    <div className="font-medium">{collaborator.displayName}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {[collaborator.department, collaborator.title]
+                        .filter(Boolean)
+                        .join(' • ') || commonT('labels.notAvailable')}
+                    </div>
+                  </div>
+                </div>
+                <Input
+                  placeholder={t('fields.roleLabel')}
+                  value={assignment.roleLabel}
+                  disabled={!assignment.selected}
+                  onChange={(event) =>
+                    updateAssignment(assignment.collaboratorId, {
+                      roleLabel: event.target.value,
+                    })
+                  }
+                />
+                <Input
+                  type="number"
+                  placeholder={t('fields.weeklyHours')}
+                  value={assignment.weeklyHours}
+                  disabled={!assignment.selected}
+                  onChange={(event) =>
+                    updateAssignment(assignment.collaboratorId, {
+                      weeklyHours: event.target.value,
+                    })
+                  }
+                />
+                <Input
+                  type="number"
+                  placeholder={t('fields.allocationPercent')}
+                  value={assignment.allocationPercent}
+                  disabled={!assignment.selected}
+                  onChange={(event) =>
+                    updateAssignment(assignment.collaboratorId, {
+                      allocationPercent: event.target.value,
+                    })
+                  }
+                />
+              </div>
+            );
+          })}
+        </div>
+      </SectionCard>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title={t('sections.financials')} description={t('sections.financialsDescription')}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.budget')}</label>
+              <Input
+                type="number"
+                step="0.01"
+                value={form.budgetAmount}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, budgetAmount: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.monthlyHourCap')}</label>
+              <Input
+                type="number"
+                step="0.5"
+                value={form.monthlyHourCap}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    monthlyHourCap: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.billingModel')}</label>
+              <Select
+                value={form.billingModel}
+                onValueChange={(value) =>
+                  setForm((current) => ({ ...current, billingModel: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="time_and_material">Time And Material</SelectItem>
+                  <SelectItem value="monthly_retainer">Monthly Retainer</SelectItem>
+                  <SelectItem value="fixed_price">Fixed Price</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{commonT('labels.contract')}</label>
+              <Select
+                value={form.contractId}
+                onValueChange={(value) =>
+                  setForm((current) => ({ ...current, contractId: value }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">{commonT('labels.notAssigned')}</SelectItem>
+                  {contracts.map((contract) => (
+                    <SelectItem key={contract.id} value={String(contract.id)}>
+                      {contract.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard title={t('sections.contract')} description={t('sections.contractDescription')}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.contractCode')}</label>
+              <Input
+                value={form.contractCode}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, contractCode: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('fields.contractName')}</label>
+              <Input
+                value={form.contractName}
+                onChange={(event) =>
+                  setForm((current) => ({ ...current, contractName: event.target.value }))
+                }
+              />
+            </div>
+            <div className="space-y-2 md:col-span-2">
+              <label className="text-sm font-medium">{t('fields.contractDescription')}</label>
+              <Textarea
+                rows={4}
+                value={form.contractDescription}
+                onChange={(event) =>
+                  setForm((current) => ({
+                    ...current,
+                    contractDescription: event.target.value,
+                  }))
+                }
+              />
+            </div>
+            <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-2">
+              <div>
+                <div className="font-medium">{t('fields.autoGenerateContractDraft')}</div>
+                <div className="text-sm text-muted-foreground">
+                  {form.contractId === 'none'
+                    ? t('fields.autoGenerateContractDraftDescription')
+                    : t('fields.existingContractSelected')}
+                </div>
+              </div>
+              <Switch
+                checked={form.contractId === 'none' && form.autoGenerateContractDraft}
+                disabled={form.contractId !== 'none'}
+                onCheckedChange={(checked) =>
+                  setForm((current) => ({
+                    ...current,
+                    autoGenerateContractDraft: checked,
+                  }))
+                }
+              />
+            </div>
+          </div>
+        </SectionCard>
+      </div>
+
+      {projectId && isLoadingProject ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+
+      {project ? (
+        <div className="text-xs text-muted-foreground">
+          {t('messages.currentContractStatus', {
+            status: formatEnumLabel(project.contractStatus),
+          })}
+        </div>
+      ) : null}
+    </Page>
+  );
+}