@hed-hog/operations 0.0.297 → 0.0.299

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

@@ -1,558 +1,558 @@
-'use client';
-
-import { EmptyState, Page } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { ArrowLeft, FileText, Plus, 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,
-  OperationsContractDetails,
-} from '../_lib/types';
-import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
-
-type PartyState = {
-  displayName: string;
-  partyRole: string;
-  partyType: string;
-  documentNumber: string;
-  email: string;
-  phone: string;
-  isPrimary: boolean;
-};
-
-type SignatureState = {
-  signerName: string;
-  signerRole: string;
-  signerEmail: string;
-  status: string;
-  signedAt: string;
-};
-
-type FinancialTermState = {
-  label: string;
-  termType: string;
-  amount: string;
-  recurrence: string;
-  dueDay: string;
-  notes: string;
-};
-
-type RevisionState = {
-  title: string;
-  revisionType: string;
-  effectiveDate: string;
-  status: string;
-  summary: string;
-};
-
-type ContractFormState = {
-  code: string;
-  name: string;
-  clientName: string;
-  contractCategory: string;
-  contractType: string;
-  signatureStatus: string;
-  isActive: boolean;
-  billingModel: string;
-  accountManagerCollaboratorId: string;
-  relatedCollaboratorId: string;
-  originType: string;
-  originId: string;
-  startDate: string;
-  endDate: string;
-  signedAt: string;
-  effectiveDate: string;
-  budgetAmount: string;
-  monthlyHourCap: string;
-  status: string;
-  description: string;
-  contentHtml: string;
-  parties: PartyState[];
-  signatures: SignatureState[];
-  financialTerms: FinancialTermState[];
-  revisions: RevisionState[];
-  pdfDocument: {
-    fileName: string;
-    mimeType: string;
-    fileContentBase64: string;
-  } | null;
-};
-
-function emptyParty(): PartyState {
-  return {
-    displayName: '',
-    partyRole: 'client',
-    partyType: 'company',
-    documentNumber: '',
-    email: '',
-    phone: '',
-    isPrimary: false,
-  };
-}
-
-function emptySignature(): SignatureState {
-  return {
-    signerName: '',
-    signerRole: '',
-    signerEmail: '',
-    status: 'pending',
-    signedAt: '',
-  };
-}
-
-function emptyFinancialTerm(): FinancialTermState {
-  return {
-    label: '',
-    termType: 'value',
-    amount: '',
-    recurrence: 'one_time',
-    dueDay: '',
-    notes: '',
-  };
-}
-
-function emptyRevision(): RevisionState {
-  return {
-    title: '',
-    revisionType: 'revision',
-    effectiveDate: '',
-    status: 'draft',
-    summary: '',
-  };
-}
-
-function buildEmptyForm(): ContractFormState {
-  return {
-    code: '',
-    name: '',
-    clientName: '',
-    contractCategory: 'client',
-    contractType: 'service_agreement',
-    signatureStatus: 'not_started',
-    isActive: true,
-    billingModel: 'time_and_material',
-    accountManagerCollaboratorId: 'none',
-    relatedCollaboratorId: 'none',
-    originType: 'manual',
-    originId: '',
-    startDate: '',
-    endDate: '',
-    signedAt: '',
-    effectiveDate: '',
-    budgetAmount: '',
-    monthlyHourCap: '',
-    status: 'draft',
-    description: '',
-    contentHtml: '',
-    parties: [emptyParty()],
-    signatures: [emptySignature()],
-    financialTerms: [emptyFinancialTerm()],
-    revisions: [],
-    pdfDocument: null,
-  };
-}
-
-function toFormState(contract: OperationsContractDetails): ContractFormState {
-  return {
-    code: contract.code ?? '',
-    name: contract.name ?? '',
-    clientName: contract.clientName ?? '',
-    contractCategory: contract.contractCategory ?? 'client',
-    contractType: contract.contractType ?? 'service_agreement',
-    signatureStatus: contract.signatureStatus ?? 'not_started',
-    isActive: contract.isActive ?? true,
-    billingModel: contract.billingModel ?? 'time_and_material',
-    accountManagerCollaboratorId: contract.accountManagerCollaboratorId
-      ? String(contract.accountManagerCollaboratorId)
-      : 'none',
-    relatedCollaboratorId: contract.relatedCollaboratorId
-      ? String(contract.relatedCollaboratorId)
-      : 'none',
-    originType: contract.originType ?? 'manual',
-    originId: contract.originId ? String(contract.originId) : '',
-    startDate: contract.startDate ?? '',
-    endDate: contract.endDate ?? '',
-    signedAt: contract.signedAt ?? '',
-    effectiveDate: contract.effectiveDate ?? '',
-    budgetAmount:
-      contract.budgetAmount !== null && contract.budgetAmount !== undefined
-        ? String(contract.budgetAmount)
-        : '',
-    monthlyHourCap:
-      contract.monthlyHourCap !== null && contract.monthlyHourCap !== undefined
-        ? String(contract.monthlyHourCap)
-        : '',
-    status: contract.status ?? 'draft',
-    description: contract.description ?? '',
-    contentHtml: contract.contentHtml ?? '',
-    parties: contract.parties.length
-      ? contract.parties.map((party) => ({
-          displayName: party.displayName ?? '',
-          partyRole: party.partyRole ?? 'other',
-          partyType: party.partyType ?? 'company',
-          documentNumber: party.documentNumber ?? '',
-          email: party.email ?? '',
-          phone: party.phone ?? '',
-          isPrimary: party.isPrimary ?? false,
-        }))
-      : [emptyParty()],
-    signatures: contract.signatures.length
-      ? contract.signatures.map((signature) => ({
-          signerName: signature.signerName ?? '',
-          signerRole: signature.signerRole ?? '',
-          signerEmail: signature.signerEmail ?? '',
-          status: signature.status ?? 'pending',
-          signedAt: signature.signedAt ?? '',
-        }))
-      : [emptySignature()],
-    financialTerms: contract.financialTerms.length
-      ? contract.financialTerms.map((term) => ({
-          label: term.label ?? '',
-          termType: term.termType ?? 'value',
-          amount: String(term.amount ?? ''),
-          recurrence: term.recurrence ?? 'one_time',
-          dueDay:
-            term.dueDay !== null && term.dueDay !== undefined
-              ? String(term.dueDay)
-              : '',
-          notes: term.notes ?? '',
-        }))
-      : [emptyFinancialTerm()],
-    revisions: contract.revisions.map((revision) => ({
-      title: revision.title ?? '',
-      revisionType: revision.revisionType ?? 'revision',
-      effectiveDate: revision.effectiveDate ?? '',
-      status: revision.status ?? 'draft',
-      summary: revision.summary ?? '',
-    })),
-    pdfDocument: null,
-  };
-}
-
-async function fileToBase64(file: File) {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const result = String(reader.result ?? '');
-      const [, base64 = ''] = result.split(',');
-      resolve(base64);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-export function ContractFormScreen({
-  contractId,
-  duplicateFromId,
-}: {
-  contractId?: number;
-  duplicateFromId?: number;
-}) {
-  const t = useTranslations('operations.ContractFormPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const router = useRouter();
-  const [form, setForm] = useState<ContractFormState>(buildEmptyForm());
-
-  const sourceId = contractId ?? duplicateFromId;
-
-  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
-    queryKey: ['operations-contract-form-collaborators', currentLocaleCode],
-    enabled: access.isDirector,
-    queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
-  });
-
-  const { data: contract, isLoading: isLoadingContract } =
-    useQuery<OperationsContractDetails>({
-      queryKey: ['operations-contract-form', currentLocaleCode, sourceId],
-      enabled: Boolean(sourceId),
-      queryFn: () =>
-        fetchOperations<OperationsContractDetails>(
-          request,
-          `/operations/contracts/${sourceId}`
-        ),
-    });
-
-  useEffect(() => {
-    if (!contract) {
-      return;
-    }
-
-    const next = toFormState(contract);
-    if (duplicateFromId) {
-      next.code = `${contract.code}-COPY`;
-      next.name = `${contract.name} Copy`;
-      next.originType = 'manual';
-      next.originId = '';
-      next.status = 'draft';
-      next.signatureStatus = 'not_started';
-      next.signedAt = '';
-      next.isActive = true;
-    }
-    setForm(next);
-  }, [contract, duplicateFromId]);
-
-  const updateArrayItem = <T,>(
-    key: 'parties' | 'signatures' | 'financialTerms' | 'revisions',
-    index: number,
-    patch: Partial<T>
-  ) => {
-    setForm((current) => ({
-      ...current,
-      [key]: (current[key] as T[]).map((item, itemIndex) =>
-        itemIndex === index ? { ...item, ...patch } : item
-      ),
-    }));
-  };
-
-  const onSubmit = async () => {
-    if (!form.code.trim() || !form.name.trim() || !form.clientName.trim()) {
-      showToastHandler?.('error', t('messages.requiredFields'));
-      return;
-    }
-
-    const payload = {
-      code: form.code.trim(),
-      name: form.name.trim(),
-      clientName: form.clientName.trim(),
-      contractCategory: form.contractCategory,
-      contractType: form.contractType,
-      signatureStatus: form.signatureStatus,
-      isActive: form.isActive,
-      billingModel: form.billingModel,
-      accountManagerCollaboratorId:
-        form.accountManagerCollaboratorId === 'none'
-          ? null
-          : parseNumberInput(form.accountManagerCollaboratorId),
-      relatedCollaboratorId:
-        form.relatedCollaboratorId === 'none'
-          ? null
-          : parseNumberInput(form.relatedCollaboratorId),
-      originType: form.originType,
-      originId: parseNumberInput(form.originId),
-      startDate: form.startDate,
-      endDate: trimToNull(form.endDate),
-      signedAt: trimToNull(form.signedAt),
-      effectiveDate: trimToNull(form.effectiveDate),
-      budgetAmount: parseNumberInput(form.budgetAmount),
-      monthlyHourCap: parseNumberInput(form.monthlyHourCap),
-      status: form.status,
-      description: trimToNull(form.description),
-      contentHtml: trimToNull(form.contentHtml),
-      parties: form.parties
-        .filter((party) => party.displayName.trim())
-        .map((party) => ({
-          displayName: party.displayName.trim(),
-          partyRole: party.partyRole,
-          partyType: party.partyType,
-          documentNumber: trimToNull(party.documentNumber),
-          email: trimToNull(party.email),
-          phone: trimToNull(party.phone),
-          isPrimary: party.isPrimary,
-        })),
-      signatures: form.signatures
-        .filter((signature) => signature.signerName.trim())
-        .map((signature) => ({
-          signerName: signature.signerName.trim(),
-          signerRole: trimToNull(signature.signerRole),
-          signerEmail: trimToNull(signature.signerEmail),
-          status: signature.status,
-          signedAt: trimToNull(signature.signedAt),
-        })),
-      financialTerms: form.financialTerms
-        .filter((term) => term.label.trim())
-        .map((term) => ({
-          label: term.label.trim(),
-          termType: term.termType,
-          amount: parseNumberInput(term.amount) ?? 0,
-          recurrence: term.recurrence,
-          dueDay: parseNumberInput(term.dueDay),
-          notes: trimToNull(term.notes),
-        })),
-      revisions: form.revisions
-        .filter((revision) => revision.title.trim())
-        .map((revision) => ({
-          title: revision.title.trim(),
-          revisionType: revision.revisionType,
-          effectiveDate: trimToNull(revision.effectiveDate),
-          status: revision.status,
-          summary: trimToNull(revision.summary),
-        })),
-      replaceUploadedPdfDocument: form.pdfDocument,
-    };
-
-    try {
-      const response = contractId
-        ? await mutateOperations<OperationsContractDetails>(
-            request,
-            `/operations/contracts/${contractId}`,
-            'PATCH',
-            payload
-          )
-        : await mutateOperations<OperationsContractDetails>(
-            request,
-            '/operations/contracts',
-            'POST',
-            payload
-          );
-
-      showToastHandler?.(
-        'success',
-        contractId ? t('messages.updateSuccess') : t('messages.createSuccess')
-      );
-      router.push(`/operations/contracts/${response.id}`);
-    } catch {
-      showToastHandler?.(
-        'error',
-        contractId ? t('messages.updateError') : t('messages.createError')
-      );
-    }
-  };
-
-  if (!access.isDirector && !access.isLoading) {
-    return (
-      <Page>
-        <OperationsHeader title={t(contractId ? 'editTitle' : 'newTitle')} description={t('description')} current={t('breadcrumb')} />
-        <EmptyState
-          icon={<FileText className="size-12" />}
-          title={commonT('states.noAccessTitle')}
-          description={t('noAccessDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => router.refresh()}
-        />
-      </Page>
-    );
-  }
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={duplicateFromId ? t('duplicateTitle') : t(contractId ? 'editTitle' : 'newTitle')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" asChild>
-              <Link href={contractId ? `/operations/contracts/${contractId}` : '/operations/contracts'}>
-                <ArrowLeft className="size-4" />
-                {commonT('actions.back')}
-              </Link>
-            </Button>
-            <Button size="sm" onClick={() => void onSubmit()}>
-              <Save className="size-4" />
-              {commonT('actions.save')}
-            </Button>
-          </div>
-        }
-      />
-
-      <Tabs defaultValue="overview">
-        <TabsList className="flex-wrap">
-          <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
-          <TabsTrigger value="parties">{t('tabs.parties')}</TabsTrigger>
-          <TabsTrigger value="signatures">{t('tabs.signatures')}</TabsTrigger>
-          <TabsTrigger value="financials">{t('tabs.financials')}</TabsTrigger>
-          <TabsTrigger value="documents">{t('tabs.documents')}</TabsTrigger>
-          <TabsTrigger value="revisions">{t('tabs.revisions')}</TabsTrigger>
-          <TabsTrigger value="editor">{t('tabs.editor')}</TabsTrigger>
-        </TabsList>
-        <TabsContent value="overview">
-          <SectionCard title={t('sections.overview')} description={t('sections.overviewDescription')}>
-            <div className="grid gap-4 md:grid-cols-3">
-              <Input placeholder={t('fields.code')} value={form.code} onChange={(e) => setForm((c) => ({ ...c, code: e.target.value }))} />
-              <Input className="md:col-span-2" placeholder={t('fields.name')} value={form.name} onChange={(e) => setForm((c) => ({ ...c, name: e.target.value }))} />
-              <Input placeholder={t('fields.clientName')} value={form.clientName} onChange={(e) => setForm((c) => ({ ...c, clientName: e.target.value }))} />
-              <Select value={form.contractCategory} onValueChange={(value) => setForm((c) => ({ ...c, contractCategory: value }))}>
-                <SelectTrigger><SelectValue placeholder={t('fields.contractCategory')} /></SelectTrigger>
-                <SelectContent>{['employee','contractor','client','supplier','vendor','partner','internal','other'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
-              </Select>
-              <Select value={form.contractType} onValueChange={(value) => setForm((c) => ({ ...c, contractType: value }))}>
-                <SelectTrigger><SelectValue placeholder={t('fields.contractType')} /></SelectTrigger>
-                <SelectContent>{['clt','pj','freelancer_agreement','service_agreement','fixed_term','recurring_service','nda','amendment','addendum','other'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
-              </Select>
-              <Select value={form.originType} onValueChange={(value) => setForm((c) => ({ ...c, originType: value }))}>
-                <SelectTrigger><SelectValue placeholder={t('fields.originType')} /></SelectTrigger>
-                <SelectContent>{['manual','employee_hiring','client_project'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
-              </Select>
-              <Input placeholder={t('fields.originId')} value={form.originId} onChange={(e) => setForm((c) => ({ ...c, originId: e.target.value }))} />
-              <Select value={form.billingModel} onValueChange={(value) => setForm((c) => ({ ...c, billingModel: value }))}>
-                <SelectTrigger><SelectValue placeholder={commonT('labels.billingModel')} /></SelectTrigger>
-                <SelectContent>{['time_and_material','monthly_retainer','fixed_price'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
-              </Select>
-              <Select value={form.signatureStatus} onValueChange={(value) => setForm((c) => ({ ...c, signatureStatus: value }))}>
-                <SelectTrigger><SelectValue placeholder={t('fields.signatureStatus')} /></SelectTrigger>
-                <SelectContent>{['not_started','pending','partially_signed','signed','expired'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
-              </Select>
-              <Select value={form.status} onValueChange={(value) => setForm((c) => ({ ...c, status: value }))}>
-                <SelectTrigger><SelectValue placeholder={commonT('labels.status')} /></SelectTrigger>
-                <SelectContent>{['draft','under_review','active','renewal','expired','closed','archived'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
-              </Select>
-              <Select value={form.accountManagerCollaboratorId} onValueChange={(value) => setForm((c) => ({ ...c, accountManagerCollaboratorId: value }))}>
-                <SelectTrigger><SelectValue placeholder={commonT('labels.accountManager')} /></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>
-              <Select value={form.relatedCollaboratorId} onValueChange={(value) => setForm((c) => ({ ...c, relatedCollaboratorId: value }))}>
-                <SelectTrigger><SelectValue placeholder={commonT('labels.collaborator')} /></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>
-              <Input type="date" value={form.startDate} onChange={(e) => setForm((c) => ({ ...c, startDate: e.target.value }))} />
-              <Input type="date" value={form.endDate} onChange={(e) => setForm((c) => ({ ...c, endDate: e.target.value }))} />
-              <Input type="date" value={form.effectiveDate} onChange={(e) => setForm((c) => ({ ...c, effectiveDate: e.target.value }))} />
-              <Input type="date" value={form.signedAt} onChange={(e) => setForm((c) => ({ ...c, signedAt: e.target.value }))} />
-              <Input type="number" step="0.01" placeholder={t('fields.budgetAmount')} value={form.budgetAmount} onChange={(e) => setForm((c) => ({ ...c, budgetAmount: e.target.value }))} />
-              <Input type="number" placeholder={t('fields.monthlyHourCap')} value={form.monthlyHourCap} onChange={(e) => setForm((c) => ({ ...c, monthlyHourCap: e.target.value }))} />
-              <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-3">
-                <div>
-                  <div className="font-medium">{t('fields.isActive')}</div>
-                  <div className="text-sm text-muted-foreground">{t('fields.isActiveDescription')}</div>
-                </div>
-                <Switch checked={form.isActive} onCheckedChange={(checked) => setForm((c) => ({ ...c, isActive: checked }))} />
-              </div>
-              <Textarea className="md:col-span-3" rows={4} placeholder={commonT('labels.description')} value={form.description} onChange={(e) => setForm((c) => ({ ...c, description: e.target.value }))} />
-            </div>
-          </SectionCard>
-        </TabsContent>
-
-        <TabsContent value="parties"><SectionCard title={t('sections.parties')} description={t('sections.partiesDescription')}><div className="space-y-4">{form.parties.map((party, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-3"><Input placeholder={t('fields.partyDisplayName')} value={party.displayName} onChange={(e) => updateArrayItem<PartyState>('parties', index, { displayName: e.target.value })} /><Input placeholder={t('fields.partyRole')} value={party.partyRole} onChange={(e) => updateArrayItem<PartyState>('parties', index, { partyRole: e.target.value })} /><Input placeholder={t('fields.partyType')} value={party.partyType} onChange={(e) => updateArrayItem<PartyState>('parties', index, { partyType: e.target.value })} /><Input placeholder={t('fields.documentNumber')} value={party.documentNumber} onChange={(e) => updateArrayItem<PartyState>('parties', index, { documentNumber: e.target.value })} /><Input placeholder={t('fields.email')} value={party.email} onChange={(e) => updateArrayItem<PartyState>('parties', index, { email: e.target.value })} /><Input placeholder={t('fields.phone')} value={party.phone} onChange={(e) => updateArrayItem<PartyState>('parties', index, { phone: e.target.value })} /><div className="flex items-center justify-between rounded-md border px-3 py-2 md:col-span-3"><span className="text-sm">{t('fields.isPrimaryParty')}</span><Switch checked={party.isPrimary} onCheckedChange={(checked) => updateArrayItem<PartyState>('parties', index, { isPrimary: checked })} /></div></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, parties: [...c.parties, emptyParty()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
-        <TabsContent value="signatures"><SectionCard title={t('sections.signatures')} description={t('sections.signaturesDescription')}><div className="space-y-4">{form.signatures.map((signature, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-2"><Input placeholder={t('fields.signerName')} value={signature.signerName} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signerName: e.target.value })} /><Input placeholder={t('fields.signerRole')} value={signature.signerRole} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signerRole: e.target.value })} /><Input placeholder={t('fields.signerEmail')} value={signature.signerEmail} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signerEmail: e.target.value })} /><Input placeholder={t('fields.signatureItemStatus')} value={signature.status} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { status: e.target.value })} /><Input type="date" value={signature.signedAt} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signedAt: e.target.value })} /></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, signatures: [...c.signatures, emptySignature()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
-        <TabsContent value="financials"><SectionCard title={t('sections.financials')} description={t('sections.financialsDescription')}><div className="space-y-4">{form.financialTerms.map((term, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-3"><Input placeholder={t('fields.financialLabel')} value={term.label} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { label: e.target.value })} /><Input placeholder={t('fields.termType')} value={term.termType} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { termType: e.target.value })} /><Input type="number" step="0.01" placeholder={t('fields.amount')} value={term.amount} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { amount: e.target.value })} /><Input placeholder={t('fields.recurrence')} value={term.recurrence} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { recurrence: e.target.value })} /><Input type="number" placeholder={t('fields.dueDay')} value={term.dueDay} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { dueDay: e.target.value })} /><Input placeholder={t('fields.notes')} value={term.notes} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { notes: e.target.value })} /></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, financialTerms: [...c.financialTerms, emptyFinancialTerm()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
-        <TabsContent value="documents"><SectionCard title={t('sections.documents')} description={t('sections.documentsDescription')}><div className="space-y-4"><input type="file" accept="application/pdf" onChange={async (event) => { const file = event.target.files?.[0]; if (!file) return; const fileContentBase64 = await fileToBase64(file); setForm((current) => ({ ...current, pdfDocument: { fileName: file.name, mimeType: file.type || 'application/pdf', fileContentBase64 } })); }} /><p className="text-sm text-muted-foreground">{form.pdfDocument ? t('messages.pdfReady', { name: form.pdfDocument.fileName }) : t('messages.pdfHint')}</p></div></SectionCard></TabsContent>
-        <TabsContent value="revisions"><SectionCard title={t('sections.revisions')} description={t('sections.revisionsDescription')}><div className="space-y-4">{form.revisions.map((revision, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-2"><Input placeholder={t('fields.revisionTitle')} value={revision.title} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { title: e.target.value })} /><Input placeholder={t('fields.revisionType')} value={revision.revisionType} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { revisionType: e.target.value })} /><Input type="date" value={revision.effectiveDate} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { effectiveDate: e.target.value })} /><Input placeholder={t('fields.revisionStatus')} value={revision.status} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { status: e.target.value })} /><Textarea className="md:col-span-2" rows={3} placeholder={t('fields.summary')} value={revision.summary} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { summary: e.target.value })} /></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, revisions: [...c.revisions, emptyRevision()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
-        <TabsContent value="editor"><div className="grid gap-4 xl:grid-cols-2"><SectionCard title={t('sections.editor')} description={t('sections.editorDescription')}><RichTextEditor value={form.contentHtml} onChange={(value) => setForm((c) => ({ ...c, contentHtml: value }))} /></SectionCard><SectionCard title={t('sections.preview')} description={t('sections.previewDescription')}><div className="prose prose-sm max-w-none rounded-lg border p-4" dangerouslySetInnerHTML={{ __html: form.contentHtml || '<p>No contract content yet.</p>' }} /></SectionCard></div></TabsContent>
-      </Tabs>
-
-      {sourceId && isLoadingContract ? (
-        <div className="text-sm text-muted-foreground">{t('loading')}</div>
-      ) : null}
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ArrowLeft, FileText, Plus, 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,
+  OperationsContractDetails,
+} from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+
+type PartyState = {
+  displayName: string;
+  partyRole: string;
+  partyType: string;
+  documentNumber: string;
+  email: string;
+  phone: string;
+  isPrimary: boolean;
+};
+
+type SignatureState = {
+  signerName: string;
+  signerRole: string;
+  signerEmail: string;
+  status: string;
+  signedAt: string;
+};
+
+type FinancialTermState = {
+  label: string;
+  termType: string;
+  amount: string;
+  recurrence: string;
+  dueDay: string;
+  notes: string;
+};
+
+type RevisionState = {
+  title: string;
+  revisionType: string;
+  effectiveDate: string;
+  status: string;
+  summary: string;
+};
+
+type ContractFormState = {
+  code: string;
+  name: string;
+  clientName: string;
+  contractCategory: string;
+  contractType: string;
+  signatureStatus: string;
+  isActive: boolean;
+  billingModel: string;
+  accountManagerCollaboratorId: string;
+  relatedCollaboratorId: string;
+  originType: string;
+  originId: string;
+  startDate: string;
+  endDate: string;
+  signedAt: string;
+  effectiveDate: string;
+  budgetAmount: string;
+  monthlyHourCap: string;
+  status: string;
+  description: string;
+  contentHtml: string;
+  parties: PartyState[];
+  signatures: SignatureState[];
+  financialTerms: FinancialTermState[];
+  revisions: RevisionState[];
+  pdfDocument: {
+    fileName: string;
+    mimeType: string;
+    fileContentBase64: string;
+  } | null;
+};
+
+function emptyParty(): PartyState {
+  return {
+    displayName: '',
+    partyRole: 'client',
+    partyType: 'company',
+    documentNumber: '',
+    email: '',
+    phone: '',
+    isPrimary: false,
+  };
+}
+
+function emptySignature(): SignatureState {
+  return {
+    signerName: '',
+    signerRole: '',
+    signerEmail: '',
+    status: 'pending',
+    signedAt: '',
+  };
+}
+
+function emptyFinancialTerm(): FinancialTermState {
+  return {
+    label: '',
+    termType: 'value',
+    amount: '',
+    recurrence: 'one_time',
+    dueDay: '',
+    notes: '',
+  };
+}
+
+function emptyRevision(): RevisionState {
+  return {
+    title: '',
+    revisionType: 'revision',
+    effectiveDate: '',
+    status: 'draft',
+    summary: '',
+  };
+}
+
+function buildEmptyForm(): ContractFormState {
+  return {
+    code: '',
+    name: '',
+    clientName: '',
+    contractCategory: 'client',
+    contractType: 'service_agreement',
+    signatureStatus: 'not_started',
+    isActive: true,
+    billingModel: 'time_and_material',
+    accountManagerCollaboratorId: 'none',
+    relatedCollaboratorId: 'none',
+    originType: 'manual',
+    originId: '',
+    startDate: '',
+    endDate: '',
+    signedAt: '',
+    effectiveDate: '',
+    budgetAmount: '',
+    monthlyHourCap: '',
+    status: 'draft',
+    description: '',
+    contentHtml: '',
+    parties: [emptyParty()],
+    signatures: [emptySignature()],
+    financialTerms: [emptyFinancialTerm()],
+    revisions: [],
+    pdfDocument: null,
+  };
+}
+
+function toFormState(contract: OperationsContractDetails): ContractFormState {
+  return {
+    code: contract.code ?? '',
+    name: contract.name ?? '',
+    clientName: contract.clientName ?? '',
+    contractCategory: contract.contractCategory ?? 'client',
+    contractType: contract.contractType ?? 'service_agreement',
+    signatureStatus: contract.signatureStatus ?? 'not_started',
+    isActive: contract.isActive ?? true,
+    billingModel: contract.billingModel ?? 'time_and_material',
+    accountManagerCollaboratorId: contract.accountManagerCollaboratorId
+      ? String(contract.accountManagerCollaboratorId)
+      : 'none',
+    relatedCollaboratorId: contract.relatedCollaboratorId
+      ? String(contract.relatedCollaboratorId)
+      : 'none',
+    originType: contract.originType ?? 'manual',
+    originId: contract.originId ? String(contract.originId) : '',
+    startDate: contract.startDate ?? '',
+    endDate: contract.endDate ?? '',
+    signedAt: contract.signedAt ?? '',
+    effectiveDate: contract.effectiveDate ?? '',
+    budgetAmount:
+      contract.budgetAmount !== null && contract.budgetAmount !== undefined
+        ? String(contract.budgetAmount)
+        : '',
+    monthlyHourCap:
+      contract.monthlyHourCap !== null && contract.monthlyHourCap !== undefined
+        ? String(contract.monthlyHourCap)
+        : '',
+    status: contract.status ?? 'draft',
+    description: contract.description ?? '',
+    contentHtml: contract.contentHtml ?? '',
+    parties: contract.parties.length
+      ? contract.parties.map((party) => ({
+          displayName: party.displayName ?? '',
+          partyRole: party.partyRole ?? 'other',
+          partyType: party.partyType ?? 'company',
+          documentNumber: party.documentNumber ?? '',
+          email: party.email ?? '',
+          phone: party.phone ?? '',
+          isPrimary: party.isPrimary ?? false,
+        }))
+      : [emptyParty()],
+    signatures: contract.signatures.length
+      ? contract.signatures.map((signature) => ({
+          signerName: signature.signerName ?? '',
+          signerRole: signature.signerRole ?? '',
+          signerEmail: signature.signerEmail ?? '',
+          status: signature.status ?? 'pending',
+          signedAt: signature.signedAt ?? '',
+        }))
+      : [emptySignature()],
+    financialTerms: contract.financialTerms.length
+      ? contract.financialTerms.map((term) => ({
+          label: term.label ?? '',
+          termType: term.termType ?? 'value',
+          amount: String(term.amount ?? ''),
+          recurrence: term.recurrence ?? 'one_time',
+          dueDay:
+            term.dueDay !== null && term.dueDay !== undefined
+              ? String(term.dueDay)
+              : '',
+          notes: term.notes ?? '',
+        }))
+      : [emptyFinancialTerm()],
+    revisions: contract.revisions.map((revision) => ({
+      title: revision.title ?? '',
+      revisionType: revision.revisionType ?? 'revision',
+      effectiveDate: revision.effectiveDate ?? '',
+      status: revision.status ?? 'draft',
+      summary: revision.summary ?? '',
+    })),
+    pdfDocument: null,
+  };
+}
+
+async function fileToBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result ?? '');
+      const [, base64 = ''] = result.split(',');
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export function ContractFormScreen({
+  contractId,
+  duplicateFromId,
+}: {
+  contractId?: number;
+  duplicateFromId?: number;
+}) {
+  const t = useTranslations('operations.ContractFormPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const [form, setForm] = useState<ContractFormState>(buildEmptyForm());
+
+  const sourceId = contractId ?? duplicateFromId;
+
+  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-contract-form-collaborators', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+  });
+
+  const { data: contract, isLoading: isLoadingContract } =
+    useQuery<OperationsContractDetails>({
+      queryKey: ['operations-contract-form', currentLocaleCode, sourceId],
+      enabled: Boolean(sourceId),
+      queryFn: () =>
+        fetchOperations<OperationsContractDetails>(
+          request,
+          `/operations/contracts/${sourceId}`
+        ),
+    });
+
+  useEffect(() => {
+    if (!contract) {
+      return;
+    }
+
+    const next = toFormState(contract);
+    if (duplicateFromId) {
+      next.code = `${contract.code}-COPY`;
+      next.name = `${contract.name} Copy`;
+      next.originType = 'manual';
+      next.originId = '';
+      next.status = 'draft';
+      next.signatureStatus = 'not_started';
+      next.signedAt = '';
+      next.isActive = true;
+    }
+    setForm(next);
+  }, [contract, duplicateFromId]);
+
+  const updateArrayItem = <T,>(
+    key: 'parties' | 'signatures' | 'financialTerms' | 'revisions',
+    index: number,
+    patch: Partial<T>
+  ) => {
+    setForm((current) => ({
+      ...current,
+      [key]: (current[key] as T[]).map((item, itemIndex) =>
+        itemIndex === index ? { ...item, ...patch } : item
+      ),
+    }));
+  };
+
+  const onSubmit = async () => {
+    if (!form.code.trim() || !form.name.trim() || !form.clientName.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    const payload = {
+      code: form.code.trim(),
+      name: form.name.trim(),
+      clientName: form.clientName.trim(),
+      contractCategory: form.contractCategory,
+      contractType: form.contractType,
+      signatureStatus: form.signatureStatus,
+      isActive: form.isActive,
+      billingModel: form.billingModel,
+      accountManagerCollaboratorId:
+        form.accountManagerCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(form.accountManagerCollaboratorId),
+      relatedCollaboratorId:
+        form.relatedCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(form.relatedCollaboratorId),
+      originType: form.originType,
+      originId: parseNumberInput(form.originId),
+      startDate: form.startDate,
+      endDate: trimToNull(form.endDate),
+      signedAt: trimToNull(form.signedAt),
+      effectiveDate: trimToNull(form.effectiveDate),
+      budgetAmount: parseNumberInput(form.budgetAmount),
+      monthlyHourCap: parseNumberInput(form.monthlyHourCap),
+      status: form.status,
+      description: trimToNull(form.description),
+      contentHtml: trimToNull(form.contentHtml),
+      parties: form.parties
+        .filter((party) => party.displayName.trim())
+        .map((party) => ({
+          displayName: party.displayName.trim(),
+          partyRole: party.partyRole,
+          partyType: party.partyType,
+          documentNumber: trimToNull(party.documentNumber),
+          email: trimToNull(party.email),
+          phone: trimToNull(party.phone),
+          isPrimary: party.isPrimary,
+        })),
+      signatures: form.signatures
+        .filter((signature) => signature.signerName.trim())
+        .map((signature) => ({
+          signerName: signature.signerName.trim(),
+          signerRole: trimToNull(signature.signerRole),
+          signerEmail: trimToNull(signature.signerEmail),
+          status: signature.status,
+          signedAt: trimToNull(signature.signedAt),
+        })),
+      financialTerms: form.financialTerms
+        .filter((term) => term.label.trim())
+        .map((term) => ({
+          label: term.label.trim(),
+          termType: term.termType,
+          amount: parseNumberInput(term.amount) ?? 0,
+          recurrence: term.recurrence,
+          dueDay: parseNumberInput(term.dueDay),
+          notes: trimToNull(term.notes),
+        })),
+      revisions: form.revisions
+        .filter((revision) => revision.title.trim())
+        .map((revision) => ({
+          title: revision.title.trim(),
+          revisionType: revision.revisionType,
+          effectiveDate: trimToNull(revision.effectiveDate),
+          status: revision.status,
+          summary: trimToNull(revision.summary),
+        })),
+      replaceUploadedPdfDocument: form.pdfDocument,
+    };
+
+    try {
+      const response = contractId
+        ? await mutateOperations<OperationsContractDetails>(
+            request,
+            `/operations/contracts/${contractId}`,
+            'PATCH',
+            payload
+          )
+        : await mutateOperations<OperationsContractDetails>(
+            request,
+            '/operations/contracts',
+            'POST',
+            payload
+          );
+
+      showToastHandler?.(
+        'success',
+        contractId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+      router.push(`/operations/contracts/${response.id}`);
+    } catch {
+      showToastHandler?.(
+        'error',
+        contractId ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  if (!access.isDirector && !access.isLoading) {
+    return (
+      <Page>
+        <OperationsHeader title={t(contractId ? 'editTitle' : 'newTitle')} description={t('description')} current={t('breadcrumb')} />
+        <EmptyState
+          icon={<FileText className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => router.refresh()}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={duplicateFromId ? t('duplicateTitle') : t(contractId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link href={contractId ? `/operations/contracts/${contractId}` : '/operations/contracts'}>
+                <ArrowLeft className="size-4" />
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button size="sm" onClick={() => void onSubmit()}>
+              <Save className="size-4" />
+              {commonT('actions.save')}
+            </Button>
+          </div>
+        }
+      />
+
+      <Tabs defaultValue="overview">
+        <TabsList className="flex-wrap">
+          <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
+          <TabsTrigger value="parties">{t('tabs.parties')}</TabsTrigger>
+          <TabsTrigger value="signatures">{t('tabs.signatures')}</TabsTrigger>
+          <TabsTrigger value="financials">{t('tabs.financials')}</TabsTrigger>
+          <TabsTrigger value="documents">{t('tabs.documents')}</TabsTrigger>
+          <TabsTrigger value="revisions">{t('tabs.revisions')}</TabsTrigger>
+          <TabsTrigger value="editor">{t('tabs.editor')}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">
+          <SectionCard title={t('sections.overview')} description={t('sections.overviewDescription')}>
+            <div className="grid gap-4 md:grid-cols-3">
+              <Input placeholder={t('fields.code')} value={form.code} onChange={(e) => setForm((c) => ({ ...c, code: e.target.value }))} />
+              <Input className="md:col-span-2" placeholder={t('fields.name')} value={form.name} onChange={(e) => setForm((c) => ({ ...c, name: e.target.value }))} />
+              <Input placeholder={t('fields.clientName')} value={form.clientName} onChange={(e) => setForm((c) => ({ ...c, clientName: e.target.value }))} />
+              <Select value={form.contractCategory} onValueChange={(value) => setForm((c) => ({ ...c, contractCategory: value }))}>
+                <SelectTrigger><SelectValue placeholder={t('fields.contractCategory')} /></SelectTrigger>
+                <SelectContent>{['employee','contractor','client','supplier','vendor','partner','internal','other'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
+              </Select>
+              <Select value={form.contractType} onValueChange={(value) => setForm((c) => ({ ...c, contractType: value }))}>
+                <SelectTrigger><SelectValue placeholder={t('fields.contractType')} /></SelectTrigger>
+                <SelectContent>{['clt','pj','freelancer_agreement','service_agreement','fixed_term','recurring_service','nda','amendment','addendum','other'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
+              </Select>
+              <Select value={form.originType} onValueChange={(value) => setForm((c) => ({ ...c, originType: value }))}>
+                <SelectTrigger><SelectValue placeholder={t('fields.originType')} /></SelectTrigger>
+                <SelectContent>{['manual','employee_hiring','client_project'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
+              </Select>
+              <Input placeholder={t('fields.originId')} value={form.originId} onChange={(e) => setForm((c) => ({ ...c, originId: e.target.value }))} />
+              <Select value={form.billingModel} onValueChange={(value) => setForm((c) => ({ ...c, billingModel: value }))}>
+                <SelectTrigger><SelectValue placeholder={commonT('labels.billingModel')} /></SelectTrigger>
+                <SelectContent>{['time_and_material','monthly_retainer','fixed_price'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
+              </Select>
+              <Select value={form.signatureStatus} onValueChange={(value) => setForm((c) => ({ ...c, signatureStatus: value }))}>
+                <SelectTrigger><SelectValue placeholder={t('fields.signatureStatus')} /></SelectTrigger>
+                <SelectContent>{['not_started','pending','partially_signed','signed','expired'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
+              </Select>
+              <Select value={form.status} onValueChange={(value) => setForm((c) => ({ ...c, status: value }))}>
+                <SelectTrigger><SelectValue placeholder={commonT('labels.status')} /></SelectTrigger>
+                <SelectContent>{['draft','under_review','active','renewal','expired','closed','archived'].map((value) => <SelectItem key={value} value={value}>{value}</SelectItem>)}</SelectContent>
+              </Select>
+              <Select value={form.accountManagerCollaboratorId} onValueChange={(value) => setForm((c) => ({ ...c, accountManagerCollaboratorId: value }))}>
+                <SelectTrigger><SelectValue placeholder={commonT('labels.accountManager')} /></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>
+              <Select value={form.relatedCollaboratorId} onValueChange={(value) => setForm((c) => ({ ...c, relatedCollaboratorId: value }))}>
+                <SelectTrigger><SelectValue placeholder={commonT('labels.collaborator')} /></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>
+              <Input type="date" value={form.startDate} onChange={(e) => setForm((c) => ({ ...c, startDate: e.target.value }))} />
+              <Input type="date" value={form.endDate} onChange={(e) => setForm((c) => ({ ...c, endDate: e.target.value }))} />
+              <Input type="date" value={form.effectiveDate} onChange={(e) => setForm((c) => ({ ...c, effectiveDate: e.target.value }))} />
+              <Input type="date" value={form.signedAt} onChange={(e) => setForm((c) => ({ ...c, signedAt: e.target.value }))} />
+              <Input type="number" step="0.01" placeholder={t('fields.budgetAmount')} value={form.budgetAmount} onChange={(e) => setForm((c) => ({ ...c, budgetAmount: e.target.value }))} />
+              <Input type="number" placeholder={t('fields.monthlyHourCap')} value={form.monthlyHourCap} onChange={(e) => setForm((c) => ({ ...c, monthlyHourCap: e.target.value }))} />
+              <div className="flex items-center justify-between rounded-lg border px-4 py-3 md:col-span-3">
+                <div>
+                  <div className="font-medium">{t('fields.isActive')}</div>
+                  <div className="text-sm text-muted-foreground">{t('fields.isActiveDescription')}</div>
+                </div>
+                <Switch checked={form.isActive} onCheckedChange={(checked) => setForm((c) => ({ ...c, isActive: checked }))} />
+              </div>
+              <Textarea className="md:col-span-3" rows={4} placeholder={commonT('labels.description')} value={form.description} onChange={(e) => setForm((c) => ({ ...c, description: e.target.value }))} />
+            </div>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="parties"><SectionCard title={t('sections.parties')} description={t('sections.partiesDescription')}><div className="space-y-4">{form.parties.map((party, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-3"><Input placeholder={t('fields.partyDisplayName')} value={party.displayName} onChange={(e) => updateArrayItem<PartyState>('parties', index, { displayName: e.target.value })} /><Input placeholder={t('fields.partyRole')} value={party.partyRole} onChange={(e) => updateArrayItem<PartyState>('parties', index, { partyRole: e.target.value })} /><Input placeholder={t('fields.partyType')} value={party.partyType} onChange={(e) => updateArrayItem<PartyState>('parties', index, { partyType: e.target.value })} /><Input placeholder={t('fields.documentNumber')} value={party.documentNumber} onChange={(e) => updateArrayItem<PartyState>('parties', index, { documentNumber: e.target.value })} /><Input placeholder={t('fields.email')} value={party.email} onChange={(e) => updateArrayItem<PartyState>('parties', index, { email: e.target.value })} /><Input placeholder={t('fields.phone')} value={party.phone} onChange={(e) => updateArrayItem<PartyState>('parties', index, { phone: e.target.value })} /><div className="flex items-center justify-between rounded-md border px-3 py-2 md:col-span-3"><span className="text-sm">{t('fields.isPrimaryParty')}</span><Switch checked={party.isPrimary} onCheckedChange={(checked) => updateArrayItem<PartyState>('parties', index, { isPrimary: checked })} /></div></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, parties: [...c.parties, emptyParty()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
+        <TabsContent value="signatures"><SectionCard title={t('sections.signatures')} description={t('sections.signaturesDescription')}><div className="space-y-4">{form.signatures.map((signature, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-2"><Input placeholder={t('fields.signerName')} value={signature.signerName} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signerName: e.target.value })} /><Input placeholder={t('fields.signerRole')} value={signature.signerRole} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signerRole: e.target.value })} /><Input placeholder={t('fields.signerEmail')} value={signature.signerEmail} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signerEmail: e.target.value })} /><Input placeholder={t('fields.signatureItemStatus')} value={signature.status} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { status: e.target.value })} /><Input type="date" value={signature.signedAt} onChange={(e) => updateArrayItem<SignatureState>('signatures', index, { signedAt: e.target.value })} /></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, signatures: [...c.signatures, emptySignature()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
+        <TabsContent value="financials"><SectionCard title={t('sections.financials')} description={t('sections.financialsDescription')}><div className="space-y-4">{form.financialTerms.map((term, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-3"><Input placeholder={t('fields.financialLabel')} value={term.label} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { label: e.target.value })} /><Input placeholder={t('fields.termType')} value={term.termType} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { termType: e.target.value })} /><Input type="number" step="0.01" placeholder={t('fields.amount')} value={term.amount} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { amount: e.target.value })} /><Input placeholder={t('fields.recurrence')} value={term.recurrence} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { recurrence: e.target.value })} /><Input type="number" placeholder={t('fields.dueDay')} value={term.dueDay} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { dueDay: e.target.value })} /><Input placeholder={t('fields.notes')} value={term.notes} onChange={(e) => updateArrayItem<FinancialTermState>('financialTerms', index, { notes: e.target.value })} /></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, financialTerms: [...c.financialTerms, emptyFinancialTerm()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
+        <TabsContent value="documents"><SectionCard title={t('sections.documents')} description={t('sections.documentsDescription')}><div className="space-y-4"><input type="file" accept="application/pdf" onChange={async (event) => { const file = event.target.files?.[0]; if (!file) return; const fileContentBase64 = await fileToBase64(file); setForm((current) => ({ ...current, pdfDocument: { fileName: file.name, mimeType: file.type || 'application/pdf', fileContentBase64 } })); }} /><p className="text-sm text-muted-foreground">{form.pdfDocument ? t('messages.pdfReady', { name: form.pdfDocument.fileName }) : t('messages.pdfHint')}</p></div></SectionCard></TabsContent>
+        <TabsContent value="revisions"><SectionCard title={t('sections.revisions')} description={t('sections.revisionsDescription')}><div className="space-y-4">{form.revisions.map((revision, index) => <div key={index} className="grid gap-4 rounded-lg border p-4 md:grid-cols-2"><Input placeholder={t('fields.revisionTitle')} value={revision.title} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { title: e.target.value })} /><Input placeholder={t('fields.revisionType')} value={revision.revisionType} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { revisionType: e.target.value })} /><Input type="date" value={revision.effectiveDate} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { effectiveDate: e.target.value })} /><Input placeholder={t('fields.revisionStatus')} value={revision.status} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { status: e.target.value })} /><Textarea className="md:col-span-2" rows={3} placeholder={t('fields.summary')} value={revision.summary} onChange={(e) => updateArrayItem<RevisionState>('revisions', index, { summary: e.target.value })} /></div>)}<Button variant="outline" onClick={() => setForm((c) => ({ ...c, revisions: [...c.revisions, emptyRevision()] }))}><Plus className="size-4" />{commonT('actions.addLine')}</Button></div></SectionCard></TabsContent>
+        <TabsContent value="editor"><div className="grid gap-4 xl:grid-cols-2"><SectionCard title={t('sections.editor')} description={t('sections.editorDescription')}><RichTextEditor value={form.contentHtml} onChange={(value) => setForm((c) => ({ ...c, contentHtml: value }))} /></SectionCard><SectionCard title={t('sections.preview')} description={t('sections.previewDescription')}><div className="prose prose-sm max-w-none rounded-lg border p-4" dangerouslySetInnerHTML={{ __html: form.contentHtml || '<p>No contract content yet.</p>' }} /></SectionCard></div></TabsContent>
+      </Tabs>
+
+      {sourceId && isLoadingContract ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+    </Page>
+  );
+}