@hed-hog/operations 0.0.299 → 0.0.301

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

@@ -1,9 +1,10 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
 import { Button } from '@/components/ui/button';
+import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import {
   Select,
   SelectContent,
@@ -16,19 +17,21 @@ 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 { useTranslations } from 'next-intl';
 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 { type ReactNode, useEffect, useState } from 'react';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaborator,
   OperationsContractDetails,
+  OperationsContractTemplate,
 } from '../_lib/types';
 import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { ContractContentEditor } from './contract-content-editor';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
 
 type PartyState = {
   displayName: string;
@@ -65,10 +68,11 @@ type RevisionState = {
   summary: string;
 };
 
-type ContractFormState = {
+export type ContractFormState = {
   code: string;
   name: string;
   clientName: string;
+  contractTemplateId: string;
   contractCategory: string;
   contractType: string;
   signatureStatus: string;
@@ -146,6 +150,7 @@ function buildEmptyForm(): ContractFormState {
     code: '',
     name: '',
     clientName: '',
+    contractTemplateId: 'none',
     contractCategory: 'client',
     contractType: 'service_agreement',
     signatureStatus: 'not_started',
@@ -177,6 +182,9 @@ function toFormState(contract: OperationsContractDetails): ContractFormState {
     code: contract.code ?? '',
     name: contract.name ?? '',
     clientName: contract.clientName ?? '',
+    contractTemplateId: contract.contractTemplateId
+      ? String(contract.contractTemplateId)
+      : 'none',
     contractCategory: contract.contractCategory ?? 'client',
     contractType: contract.contractType ?? 'service_agreement',
     signatureStatus: contract.signatureStatus ?? 'not_started',
@@ -265,16 +273,28 @@ async function fileToBase64(file: File) {
 export function ContractFormScreen({
   contractId,
   duplicateFromId,
+  initialTemplateId,
+  initialValues,
+  onSaved,
+  onCancel,
 }: {
   contractId?: number;
   duplicateFromId?: number;
+  initialTemplateId?: number;
+  initialValues?: Partial<ContractFormState>;
+  onSaved?: (contract: OperationsContractDetails) => void | Promise<void>;
+  onCancel?: () => void;
 }) {
   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 [form, setForm] = useState<ContractFormState>(() => ({
+    ...buildEmptyForm(),
+    ...initialValues,
+  }));
+  const isSheetMode = Boolean(onCancel);
 
   const sourceId = contractId ?? duplicateFromId;
 
@@ -282,9 +302,29 @@ export function ContractFormScreen({
     queryKey: ['operations-contract-form-collaborators', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
-      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+      fetchOperations<OperationsCollaborator[]>(
+        request,
+        '/operations/collaborators'
+      ),
+  });
+
+  const { data: contractTemplates = [] } = useQuery<
+    OperationsContractTemplate[]
+  >({
+    queryKey: ['operations-contract-form-templates', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsContractTemplate[]>(
+        request,
+        '/operations/contract-templates'
+      ),
   });
 
+  const selectedContractTemplate =
+    contractTemplates.find(
+      (template) => String(template.id) === form.contractTemplateId
+    ) ?? null;
+
   const { data: contract, isLoading: isLoadingContract } =
     useQuery<OperationsContractDetails>({
       queryKey: ['operations-contract-form', currentLocaleCode, sourceId],
@@ -301,17 +341,18 @@ export function ContractFormScreen({
       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';
+    const next = toFormState(contract);
+    if (duplicateFromId) {
+      next.code = `${contract.code}-COPY`;
+      next.name = `${contract.name || contract.code || 'Contrato'} Copy`;
+      next.originType = 'manual';
+      next.originId = '';
+      next.status = 'draft';
       next.signatureStatus = 'not_started';
       next.signedAt = '';
       next.isActive = true;
     }
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setForm(next);
   }, [contract, duplicateFromId]);
 
@@ -328,6 +369,53 @@ export function ContractFormScreen({
     }));
   };
 
+  const handleTemplateSelection = (value: string) => {
+    const template =
+      value === 'none'
+        ? null
+        : (contractTemplates.find((item) => String(item.id) === value) ?? null);
+
+    setForm((current) => ({
+      ...current,
+      contractTemplateId: value,
+      contractCategory: template?.contractCategory ?? current.contractCategory,
+      contractType: template?.contractType ?? current.contractType,
+      billingModel: template?.billingModel ?? current.billingModel,
+      signatureStatus: template?.signatureStatus ?? current.signatureStatus,
+      name: current.name || template?.name || '',
+      description: current.description || template?.description || '',
+      contentHtml: template?.contentHtml ?? current.contentHtml,
+    }));
+  };
+
+  useEffect(() => {
+    if (
+      !initialTemplateId ||
+      sourceId ||
+      !contractTemplates.length ||
+      form.contractTemplateId !== 'none'
+    ) {
+      return;
+    }
+
+    const template = contractTemplates.find(
+      (item) => item.id === initialTemplateId
+    );
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setForm((current) => ({
+      ...current,
+      contractTemplateId: String(initialTemplateId),
+      contractCategory: template?.contractCategory ?? current.contractCategory,
+      contractType: template?.contractType ?? current.contractType,
+      billingModel: template?.billingModel ?? current.billingModel,
+      signatureStatus: template?.signatureStatus ?? current.signatureStatus,
+      name: current.name || template?.name || '',
+      description: current.description || template?.description || '',
+      contentHtml: template?.contentHtml ?? current.contentHtml,
+    }));
+  }, [contractTemplates, form.contractTemplateId, initialTemplateId, sourceId]);
+
   const onSubmit = async () => {
     if (!form.code.trim() || !form.name.trim() || !form.clientName.trim()) {
       showToastHandler?.('error', t('messages.requiredFields'));
@@ -351,6 +439,10 @@ export function ContractFormScreen({
         form.relatedCollaboratorId === 'none'
           ? null
           : parseNumberInput(form.relatedCollaboratorId),
+      contractTemplateId:
+        form.contractTemplateId === 'none'
+          ? null
+          : parseNumberInput(form.contractTemplateId),
       originType: form.originType,
       originId: parseNumberInput(form.originId),
       startDate: form.startDate,
@@ -423,6 +515,12 @@ export function ContractFormScreen({
         'success',
         contractId ? t('messages.updateSuccess') : t('messages.createSuccess')
       );
+
+      if (onSaved) {
+        await onSaved(response);
+        return;
+      }
+
       router.push(`/operations/contracts/${response.id}`);
     } catch {
       showToastHandler?.(
@@ -432,44 +530,1067 @@ export function ContractFormScreen({
     }
   };
 
+  const noAccessState = (
+    <EmptyState
+      icon={<FileText className="size-12" />}
+      title={commonT('states.noAccessTitle')}
+      description={t('noAccessDescription')}
+      actionLabel={commonT('actions.refresh')}
+      onAction={() => router.refresh()}
+    />
+  );
+
   if (!access.isDirector && !access.isLoading) {
+    if (isSheetMode) {
+      return <div className="pt-4">{noAccessState}</div>;
+    }
+
     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()}
+        <OperationsHeader
+          title={t(contractId ? 'editTitle' : 'newTitle')}
+          description={t('description')}
+          current={t('breadcrumb')}
         />
+        {noAccessState}
       </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>
+  const sectionDescriptionMode = isSheetMode ? 'tooltip' : 'inline';
+  const overviewGridClass = isSheetMode
+    ? 'gap-3 md:grid-cols-2 xl:grid-cols-12'
+    : 'gap-4 md:grid-cols-3';
+  const sectionCardClass = isSheetMode ? 'space-y-2.5' : 'space-y-4';
+  const compactGridClass = isSheetMode
+    ? 'gap-3 p-3 md:grid-cols-2 xl:grid-cols-6'
+    : 'gap-4 p-4 md:grid-cols-3';
+  const compactTwoColGridClass = isSheetMode
+    ? 'gap-3 p-3 md:grid-cols-2 xl:grid-cols-6'
+    : 'gap-4 p-4 md:grid-cols-2';
+  const fieldGroupClass = isSheetMode ? 'space-y-1.5' : 'space-y-2';
+  const fieldLabelClass = isSheetMode
+    ? 'px-0.5 text-[10px] uppercase tracking-wide text-muted-foreground'
+    : 'px-0.5 text-[11px] text-muted-foreground';
+  const helpTextClass = isSheetMode
+    ? 'px-0.5 text-[11px] leading-relaxed text-muted-foreground'
+    : 'px-0.5 text-xs leading-relaxed text-muted-foreground';
+
+  const renderField = (
+    label: string,
+    content: ReactNode,
+    options?: {
+      className?: string;
+      description?: string;
+    }
+  ) => (
+    <div
+      className={[fieldGroupClass, options?.className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <Label className={fieldLabelClass}>{label}</Label>
+      {content}
+      {options?.description ? (
+        <p className={helpTextClass}>{options.description}</p>
+      ) : null}
+    </div>
+  );
+
+  const overviewSection = (
+    <SectionCard
+      title={t('sections.overview')}
+      description={t('sections.overviewDescription')}
+      compact={isSheetMode}
+      descriptionMode={sectionDescriptionMode}
+    >
+      <div className={`grid ${overviewGridClass}`}>
+        {renderField(
+          t('fields.code'),
+          <Input
+            placeholder={t('fields.code')}
+            value={form.code}
+            onChange={(e) => setForm((c) => ({ ...c, code: e.target.value }))}
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.name'),
+          <Input
+            placeholder={t('fields.name')}
+            value={form.name}
+            onChange={(e) => setForm((c) => ({ ...c, name: e.target.value }))}
+          />,
+          {
+            className: isSheetMode
+              ? 'md:col-span-2 xl:col-span-9'
+              : 'md:col-span-2',
+          }
+        )}
+
+        {renderField(
+          t('fields.clientName'),
+          <Input
+            placeholder={t('fields.clientName')}
+            value={form.clientName}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, clientName: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'md:col-span-2 xl:col-span-6' : '' }
+        )}
+
+        {renderField(
+          t('fields.contractTemplate'),
+          <div
+            title={
+              isSheetMode ? t('fields.contractTemplateDescription') : undefined
+            }
+            className={
+              isSheetMode
+                ? 'space-y-2 rounded-lg border bg-muted/15 px-3 py-2.5'
+                : 'space-y-2.5 rounded-lg border px-4 py-3'
+            }
+          >
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <p className="text-[11px] text-muted-foreground">
+                {t('fields.contractTemplateDescription')}
+              </p>
+              <Button type="button" variant="outline" size="sm" asChild>
+                <Link href="/operations/contracts/templates">
+                  {commonT('actions.manageTemplates')}
+                </Link>
+              </Button>
+            </div>
+            <Select
+              value={form.contractTemplateId}
+              onValueChange={handleTemplateSelection}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={t('fields.contractTemplate')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">
+                  {commonT('labels.notAssigned')}
+                </SelectItem>
+                {contractTemplates.map((template) => (
+                  <SelectItem key={template.id} value={String(template.id)}>
+                    {template.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {selectedContractTemplate ? (
+              <div className="line-clamp-2 text-[11px] text-muted-foreground">
+                {[
+                  selectedContractTemplate.code,
+                  selectedContractTemplate.description,
+                ]
+                  .filter(Boolean)
+                  .join(' • ')}
+              </div>
+            ) : null}
+          </div>,
+          {
+            className: isSheetMode
+              ? 'md:col-span-2 xl:col-span-6'
+              : 'md:col-span-2',
+          }
+        )}
+
+        {renderField(
+          t('fields.contractCategory'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.contractType'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.originType'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.originId'),
+          <Input
+            placeholder={t('fields.originId')}
+            value={form.originId}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, originId: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          commonT('labels.billingModel'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-4' : '' }
+        )}
+
+        {renderField(
+          t('fields.signatureStatus'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-4' : '' }
+        )}
+
+        {renderField(
+          commonT('labels.status'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-4' : '' }
+        )}
+
+        {renderField(
+          commonT('labels.accountManager'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-4' : '' }
+        )}
+
+        {renderField(
+          commonT('labels.collaborator'),
+          <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>,
+          { className: isSheetMode ? 'xl:col-span-4' : '' }
+        )}
+
+        <div className={isSheetMode ? 'xl:col-span-4' : 'md:col-span-3'}>
+          <div className="rounded-lg border bg-muted/15 px-3 py-2.5">
+            <div className="flex items-start justify-between gap-3">
+              <div className="space-y-1">
+                <Label className={fieldLabelClass}>
+                  {t('fields.isActive')}
+                </Label>
+                <p className={helpTextClass}>
+                  {t('fields.isActiveDescription')}
+                </p>
+              </div>
+              <Switch
+                checked={form.isActive}
+                onCheckedChange={(checked) =>
+                  setForm((c) => ({ ...c, isActive: checked }))
+                }
+              />
+            </div>
           </div>
+        </div>
+
+        {renderField(
+          commonT('labels.startDate'),
+          <Input
+            type="date"
+            value={form.startDate}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, startDate: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          commonT('labels.endDate'),
+          <Input
+            type="date"
+            value={form.endDate}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, endDate: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.effectiveDate'),
+          <Input
+            type="date"
+            value={form.effectiveDate}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, effectiveDate: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.signedAt'),
+          <Input
+            type="date"
+            value={form.signedAt}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, signedAt: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.budgetAmount'),
+          <Input
+            type="number"
+            step="0.01"
+            placeholder={t('fields.budgetAmount')}
+            value={form.budgetAmount}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, budgetAmount: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          t('fields.monthlyHourCap'),
+          <Input
+            type="number"
+            placeholder={t('fields.monthlyHourCap')}
+            value={form.monthlyHourCap}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, monthlyHourCap: e.target.value }))
+            }
+          />,
+          { className: isSheetMode ? 'xl:col-span-3' : '' }
+        )}
+
+        {renderField(
+          commonT('labels.description'),
+          <Textarea
+            rows={isSheetMode ? 3 : 4}
+            placeholder={commonT('labels.description')}
+            value={form.description}
+            onChange={(e) =>
+              setForm((c) => ({ ...c, description: e.target.value }))
+            }
+          />,
+          {
+            className: isSheetMode
+              ? 'md:col-span-2 xl:col-span-6'
+              : 'md:col-span-3',
+          }
+        )}
+      </div>
+    </SectionCard>
+  );
+
+  const partiesSection = (
+    <SectionCard
+      title={t('sections.parties')}
+      description={t('sections.partiesDescription')}
+      compact={isSheetMode}
+      descriptionMode={sectionDescriptionMode}
+    >
+      <div className={sectionCardClass}>
+        {form.parties.map((party, index) => (
+          <div
+            key={index}
+            className={`grid rounded-lg border bg-muted/5 ${compactGridClass}`}
+          >
+            <div
+              className={`flex items-center justify-between gap-3 rounded-md bg-muted/30 px-3 py-2 ${
+                isSheetMode ? 'md:col-span-2 xl:col-span-6' : 'md:col-span-3'
+              }`}
+            >
+              <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                #{index + 1}
+              </span>
+              <div className="flex items-center gap-2">
+                <Label className={fieldLabelClass}>
+                  {t('fields.isPrimaryParty')}
+                </Label>
+                <Switch
+                  checked={party.isPrimary}
+                  onCheckedChange={(checked) =>
+                    updateArrayItem<PartyState>('parties', index, {
+                      isPrimary: checked,
+                    })
+                  }
+                />
+              </div>
+            </div>
+
+            {renderField(
+              t('fields.partyDisplayName'),
+              <Input
+                placeholder={t('fields.partyDisplayName')}
+                value={party.displayName}
+                onChange={(e) =>
+                  updateArrayItem<PartyState>('parties', index, {
+                    displayName: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.partyRole'),
+              <Input
+                placeholder={t('fields.partyRole')}
+                value={party.partyRole}
+                onChange={(e) =>
+                  updateArrayItem<PartyState>('parties', index, {
+                    partyRole: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.partyType'),
+              <Input
+                placeholder={t('fields.partyType')}
+                value={party.partyType}
+                onChange={(e) =>
+                  updateArrayItem<PartyState>('parties', index, {
+                    partyType: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.documentNumber'),
+              <Input
+                placeholder={t('fields.documentNumber')}
+                value={party.documentNumber}
+                onChange={(e) =>
+                  updateArrayItem<PartyState>('parties', index, {
+                    documentNumber: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.email'),
+              <Input
+                placeholder={t('fields.email')}
+                value={party.email}
+                onChange={(e) =>
+                  updateArrayItem<PartyState>('parties', index, {
+                    email: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-3' : '' }
+            )}
+
+            {renderField(
+              t('fields.phone'),
+              <Input
+                placeholder={t('fields.phone')}
+                value={party.phone}
+                onChange={(e) =>
+                  updateArrayItem<PartyState>('parties', index, {
+                    phone: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-3' : '' }
+            )}
+          </div>
+        ))}
+        <Button
+          variant="outline"
+          onClick={() =>
+            setForm((c) => ({ ...c, parties: [...c.parties, emptyParty()] }))
+          }
+        >
+          <Plus className="size-4" />
+          {commonT('actions.addLine')}
+        </Button>
+      </div>
+    </SectionCard>
+  );
+
+  const signaturesSection = (
+    <SectionCard
+      title={t('sections.signatures')}
+      description={t('sections.signaturesDescription')}
+      compact={isSheetMode}
+      descriptionMode={sectionDescriptionMode}
+    >
+      <div className={sectionCardClass}>
+        {form.signatures.map((signature, index) => (
+          <div
+            key={index}
+            className={`grid rounded-lg border bg-muted/5 ${compactTwoColGridClass}`}
+          >
+            {renderField(
+              t('fields.signerName'),
+              <Input
+                placeholder={t('fields.signerName')}
+                value={signature.signerName}
+                onChange={(e) =>
+                  updateArrayItem<SignatureState>('signatures', index, {
+                    signerName: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.signerRole'),
+              <Input
+                placeholder={t('fields.signerRole')}
+                value={signature.signerRole}
+                onChange={(e) =>
+                  updateArrayItem<SignatureState>('signatures', index, {
+                    signerRole: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.signerEmail'),
+              <Input
+                placeholder={t('fields.signerEmail')}
+                value={signature.signerEmail}
+                onChange={(e) =>
+                  updateArrayItem<SignatureState>('signatures', index, {
+                    signerEmail: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.signatureItemStatus'),
+              <Input
+                placeholder={t('fields.signatureItemStatus')}
+                value={signature.status}
+                onChange={(e) =>
+                  updateArrayItem<SignatureState>('signatures', index, {
+                    status: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.signedAt'),
+              <Input
+                type="date"
+                value={signature.signedAt}
+                onChange={(e) =>
+                  updateArrayItem<SignatureState>('signatures', index, {
+                    signedAt: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+          </div>
+        ))}
+        <Button
+          variant="outline"
+          onClick={() =>
+            setForm((c) => ({
+              ...c,
+              signatures: [...c.signatures, emptySignature()],
+            }))
+          }
+        >
+          <Plus className="size-4" />
+          {commonT('actions.addLine')}
+        </Button>
+      </div>
+    </SectionCard>
+  );
+
+  const financialsSection = (
+    <SectionCard
+      title={t('sections.financials')}
+      description={t('sections.financialsDescription')}
+      compact={isSheetMode}
+      descriptionMode={sectionDescriptionMode}
+    >
+      <div className={sectionCardClass}>
+        {form.financialTerms.map((term, index) => (
+          <div
+            key={index}
+            className={`grid rounded-lg border bg-muted/5 ${compactGridClass}`}
+          >
+            {renderField(
+              t('fields.financialLabel'),
+              <Input
+                placeholder={t('fields.financialLabel')}
+                value={term.label}
+                onChange={(e) =>
+                  updateArrayItem<FinancialTermState>('financialTerms', index, {
+                    label: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.termType'),
+              <Input
+                placeholder={t('fields.termType')}
+                value={term.termType}
+                onChange={(e) =>
+                  updateArrayItem<FinancialTermState>('financialTerms', index, {
+                    termType: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.amount'),
+              <Input
+                type="number"
+                step="0.01"
+                placeholder={t('fields.amount')}
+                value={term.amount}
+                onChange={(e) =>
+                  updateArrayItem<FinancialTermState>('financialTerms', index, {
+                    amount: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.recurrence'),
+              <Input
+                placeholder={t('fields.recurrence')}
+                value={term.recurrence}
+                onChange={(e) =>
+                  updateArrayItem<FinancialTermState>('financialTerms', index, {
+                    recurrence: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.dueDay'),
+              <Input
+                type="number"
+                placeholder={t('fields.dueDay')}
+                value={term.dueDay}
+                onChange={(e) =>
+                  updateArrayItem<FinancialTermState>('financialTerms', index, {
+                    dueDay: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.notes'),
+              <Textarea
+                rows={isSheetMode ? 2 : 3}
+                placeholder={t('fields.notes')}
+                value={term.notes}
+                onChange={(e) =>
+                  updateArrayItem<FinancialTermState>('financialTerms', index, {
+                    notes: e.target.value,
+                  })
+                }
+              />,
+              {
+                className: isSheetMode
+                  ? 'md:col-span-2 xl:col-span-6'
+                  : 'md:col-span-3',
+              }
+            )}
+          </div>
+        ))}
+        <Button
+          variant="outline"
+          onClick={() =>
+            setForm((c) => ({
+              ...c,
+              financialTerms: [...c.financialTerms, emptyFinancialTerm()],
+            }))
+          }
+        >
+          <Plus className="size-4" />
+          {commonT('actions.addLine')}
+        </Button>
+      </div>
+    </SectionCard>
+  );
+
+  const documentsSection = (
+    <SectionCard
+      title={t('sections.documents')}
+      description={t('sections.documentsDescription')}
+      compact={isSheetMode}
+      descriptionMode={sectionDescriptionMode}
+    >
+      <div className="rounded-lg border border-dashed bg-muted/10 px-3 py-3">
+        <div className={fieldGroupClass}>
+          <Label className={fieldLabelClass}>{t('sections.documents')}</Label>
+          <input
+            className="block w-full text-sm file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-2 file:text-sm file:font-medium file:text-primary-foreground"
+            type="file"
+            accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            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={helpTextClass}>
+            {form.pdfDocument
+              ? t('messages.pdfReady', { name: form.pdfDocument.fileName })
+              : t('messages.pdfHint')}
+          </p>
+        </div>
+      </div>
+    </SectionCard>
+  );
+
+  const revisionsSection = (
+    <SectionCard
+      title={t('sections.revisions')}
+      description={t('sections.revisionsDescription')}
+      compact={isSheetMode}
+      descriptionMode={sectionDescriptionMode}
+    >
+      <div className={sectionCardClass}>
+        {form.revisions.map((revision, index) => (
+          <div
+            key={index}
+            className={`grid rounded-lg border bg-muted/5 ${compactTwoColGridClass}`}
+          >
+            {renderField(
+              t('fields.revisionTitle'),
+              <Input
+                placeholder={t('fields.revisionTitle')}
+                value={revision.title}
+                onChange={(e) =>
+                  updateArrayItem<RevisionState>('revisions', index, {
+                    title: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.revisionType'),
+              <Input
+                placeholder={t('fields.revisionType')}
+                value={revision.revisionType}
+                onChange={(e) =>
+                  updateArrayItem<RevisionState>('revisions', index, {
+                    revisionType: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.revisionStatus'),
+              <Input
+                placeholder={t('fields.revisionStatus')}
+                value={revision.status}
+                onChange={(e) =>
+                  updateArrayItem<RevisionState>('revisions', index, {
+                    status: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-1' : '' }
+            )}
+
+            {renderField(
+              t('fields.effectiveDate'),
+              <Input
+                type="date"
+                value={revision.effectiveDate}
+                onChange={(e) =>
+                  updateArrayItem<RevisionState>('revisions', index, {
+                    effectiveDate: e.target.value,
+                  })
+                }
+              />,
+              { className: isSheetMode ? 'xl:col-span-2' : '' }
+            )}
+
+            {renderField(
+              t('fields.summary'),
+              <Textarea
+                rows={isSheetMode ? 2 : 3}
+                placeholder={t('fields.summary')}
+                value={revision.summary}
+                onChange={(e) =>
+                  updateArrayItem<RevisionState>('revisions', index, {
+                    summary: e.target.value,
+                  })
+                }
+              />,
+              {
+                className: isSheetMode
+                  ? 'md:col-span-2 xl:col-span-6'
+                  : 'md:col-span-2',
+              }
+            )}
+          </div>
+        ))}
+        <Button
+          variant="outline"
+          onClick={() =>
+            setForm((c) => ({
+              ...c,
+              revisions: [...c.revisions, emptyRevision()],
+            }))
+          }
+        >
+          <Plus className="size-4" />
+          {commonT('actions.addLine')}
+        </Button>
+      </div>
+    </SectionCard>
+  );
+
+  const editorSection = (
+    <div className={isSheetMode ? 'overflow-hidden' : undefined}>
+      <ContractContentEditor
+        value={form.contentHtml}
+        onChange={(value) =>
+          setForm((current) => ({ ...current, contentHtml: value }))
         }
+        compact={isSheetMode}
+        descriptionMode={sectionDescriptionMode}
+        editorTitle={t('sections.editor')}
+        editorDescription={t('sections.editorDescription')}
+        previewTitle={t('sections.preview')}
+        previewDescription={t('sections.previewDescription')}
+        promptContext={{
+          name: form.name,
+          code: form.code,
+          client_name: form.clientName,
+          contract_type: form.contractType,
+          billing_model: form.billingModel,
+          description: form.description,
+        }}
+        previewFallbackHtml="<p>No contract content yet.</p>"
       />
+    </div>
+  );
+
+  const formBody = isSheetMode ? (
+    <>
+      {overviewSection}
+      {partiesSection}
+      {signaturesSection}
+      {financialsSection}
+      {documentsSection}
+      {revisionsSection}
+      {editorSection}
 
-      <Tabs defaultValue="overview">
+      {sourceId && isLoadingContract ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+    </>
+  ) : (
+    <>
+      <Tabs defaultValue="overview" className="space-y-4">
         <TabsList className="flex-wrap">
           <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
           <TabsTrigger value="parties">{t('tabs.parties')}</TabsTrigger>
@@ -480,79 +1601,797 @@ export function ContractFormScreen({
           <TabsTrigger value="editor">{t('tabs.editor')}</TabsTrigger>
         </TabsList>
         <TabsContent value="overview">
-          <SectionCard title={t('sections.overview')} description={t('sections.overviewDescription')}>
+          <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>
+              <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 }))
+                }
+              />
+              <div className="space-y-3 rounded-lg border px-4 py-3 md:col-span-2">
+                <div className="flex flex-wrap items-start justify-between gap-2">
+                  <div>
+                    <div className="text-sm font-medium">
+                      {t('fields.contractTemplate')}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {t('fields.contractTemplateDescription')}
+                    </div>
+                  </div>
+                  <Button type="button" variant="outline" size="sm" asChild>
+                    <Link href="/operations/contracts/templates">
+                      {commonT('actions.manageTemplates')}
+                    </Link>
+                  </Button>
+                </div>
+                <Select
+                  value={form.contractTemplateId}
+                  onValueChange={handleTemplateSelection}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={t('fields.contractTemplate')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">
+                      {commonT('labels.notAssigned')}
+                    </SelectItem>
+                    {contractTemplates.map((template) => (
+                      <SelectItem key={template.id} value={String(template.id)}>
+                        {template.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {selectedContractTemplate ? (
+                  <div className="text-xs text-muted-foreground">
+                    {[
+                      selectedContractTemplate.code,
+                      selectedContractTemplate.description,
+                    ]
+                      .filter(Boolean)
+                      .join(' • ')}
+                  </div>
+                ) : null}
+              </div>
+              <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
+                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
+                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>
+              <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
+                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
+                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>
+              <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>)}
+                  <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>
+              <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>)}
+                  <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 }))} />
+              <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 className="text-sm text-muted-foreground">
+                    {t('fields.isActiveDescription')}
+                  </div>
                 </div>
-                <Switch checked={form.isActive} onCheckedChange={(checked) => setForm((c) => ({ ...c, isActive: checked }))} />
+                <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 }))} />
+              <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>
+        <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=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                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">
+          <ContractContentEditor
+            value={form.contentHtml}
+            onChange={(value) =>
+              setForm((current) => ({ ...current, contentHtml: value }))
+            }
+            editorTitle={t('sections.editor')}
+            editorDescription={t('sections.editorDescription')}
+            previewTitle={t('sections.preview')}
+            previewDescription={t('sections.previewDescription')}
+            promptContext={{
+              name: form.name,
+              code: form.code,
+              client_name: form.clientName,
+              contract_type: form.contractType,
+              billing_model: form.billingModel,
+              description: form.description,
+            }}
+            previewFallbackHtml="<p>No contract content yet.</p>"
+          />
+        </TabsContent>
       </Tabs>
 
       {sourceId && isLoadingContract ? (
         <div className="text-sm text-muted-foreground">{t('loading')}</div>
       ) : null}
+    </>
+  );
+
+  if (isSheetMode) {
+    return (
+      <div className="mt-3 space-y-3 pb-4">
+        {formBody}
+
+        <FormActions
+          sheet
+          cancelLabel={commonT('actions.cancel')}
+          onCancel={onCancel}
+          onSubmit={() => void onSubmit()}
+          submitIcon={<Save className="size-4" />}
+          submitLabel={commonT('actions.save')}
+          submitSize="lg"
+        />
+      </div>
+    );
+  }
+
+  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>
+        }
+      />
+
+      {formBody}
     </Page>
   );
 }