@hed-hog/operations 0.0.295 → 0.0.296

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

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