@hed-hog/operations 0.0.296 → 0.0.298

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

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