@hed-hog/operations 0.0.306 → 0.0.310

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

@@ -2,36 +2,22 @@
 
 import { EmptyState, Page } from '@/components/entity-list';
 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,
-  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 { Download, FileText, Save, Upload } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { type ReactNode, useEffect, useState } from 'react';
+import { useEffect, useMemo, 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 type { OperationsContractDetails } 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';
+import { StatusBadge } from './status-badge';
 
 type PartyState = {
   displayName: string;
@@ -43,36 +29,10 @@ type PartyState = {
   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;
-};
-
 export type ContractFormState = {
   code: string;
   name: string;
   clientName: string;
-  contractTemplateId: string;
   contractCategory: string;
   contractType: string;
   signatureStatus: string;
@@ -92,13 +52,11 @@ export type ContractFormState = {
   description: string;
   contentHtml: string;
   parties: PartyState[];
-  signatures: SignatureState[];
-  financialTerms: FinancialTermState[];
-  revisions: RevisionState[];
   pdfDocument: {
+    fileId?: number | null;
     fileName: string;
     mimeType: string;
-    fileContentBase64: string;
+    fileContentBase64?: string | null;
   } | null;
 };
 
@@ -114,43 +72,11 @@ function emptyParty(): PartyState {
   };
 }
 
-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: '',
-    contractTemplateId: 'none',
     contractCategory: 'client',
     contractType: 'service_agreement',
     signatureStatus: 'not_started',
@@ -166,13 +92,10 @@ function buildEmptyForm(): ContractFormState {
     effectiveDate: '',
     budgetAmount: '',
     monthlyHourCap: '',
-    status: 'draft',
+    status: 'active',
     description: '',
     contentHtml: '',
     parties: [emptyParty()],
-    signatures: [emptySignature()],
-    financialTerms: [emptyFinancialTerm()],
-    revisions: [],
     pdfDocument: null,
   };
 }
@@ -182,9 +105,6 @@ 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',
@@ -197,7 +117,10 @@ function toFormState(contract: OperationsContractDetails): ContractFormState {
       ? String(contract.relatedCollaboratorId)
       : 'none',
     originType: contract.originType ?? 'manual',
-    originId: contract.originId ? String(contract.originId) : '',
+    originId:
+      contract.originId !== null && contract.originId !== undefined
+        ? String(contract.originId)
+        : '',
     startDate: contract.startDate ?? '',
     endDate: contract.endDate ?? '',
     signedAt: contract.signedAt ?? '',
@@ -210,7 +133,7 @@ function toFormState(contract: OperationsContractDetails): ContractFormState {
       contract.monthlyHourCap !== null && contract.monthlyHourCap !== undefined
         ? String(contract.monthlyHourCap)
         : '',
-    status: contract.status ?? 'draft',
+    status: contract.status ?? 'active',
     description: contract.description ?? '',
     contentHtml: contract.contentHtml ?? '',
     parties: contract.parties.length
@@ -224,40 +147,11 @@ function toFormState(contract: OperationsContractDetails): ContractFormState {
           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) {
+function fileToBase64(file: File) {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -270,6 +164,26 @@ async function fileToBase64(file: File) {
   });
 }
 
+function buildStoredFileUrl(fileId?: number | null) {
+  if (!fileId) {
+    return null;
+  }
+
+  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  return `${baseUrl}/file/open/${fileId}`;
+}
+
+function downloadBase64File(
+  fileName: string,
+  mimeType: string,
+  base64: string
+) {
+  const link = document.createElement('a');
+  link.href = `data:${mimeType};base64,${base64}`;
+  link.download = fileName;
+  link.click();
+}
+
 export function ContractFormScreen({
   contractId,
   duplicateFromId,
@@ -285,45 +199,20 @@ export function ContractFormScreen({
   onSaved?: (contract: OperationsContractDetails) => void | Promise<void>;
   onCancel?: () => void;
 }) {
+  void initialTemplateId;
+
   const t = useTranslations('operations.ContractFormPage');
   const commonT = useTranslations('operations.Common');
+  const detailT = useTranslations('operations.ContractDetailsPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
   const router = useRouter();
+  const sourceId = contractId ?? duplicateFromId;
+  const isSheetMode = Boolean(onCancel);
   const [form, setForm] = useState<ContractFormState>(() => ({
     ...buildEmptyForm(),
     ...initialValues,
   }));
-  const isSheetMode = Boolean(onCancel);
-
-  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: 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>({
@@ -342,90 +231,83 @@ export function ContractFormScreen({
     }
 
     const next = toFormState(contract);
+
     if (duplicateFromId) {
-      next.code = `${contract.code}-COPY`;
+      const currentDocument =
+        contract.documents.find(
+          (document) =>
+            document.isCurrent &&
+            ['source_upload', 'generated_pdf'].includes(document.documentType)
+        ) ?? null;
+
+      next.code = '';
       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;
+      next.status = 'active';
+      next.pdfDocument = currentDocument
+        ? {
+            fileId: currentDocument.fileId ?? null,
+            fileName: currentDocument.fileName,
+            mimeType: currentDocument.mimeType,
+            fileContentBase64: currentDocument.fileContentBase64 ?? null,
+          }
+        : null;
     }
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setForm(next);
+
+    setForm({
+      ...next,
+      pdfDocument: next.pdfDocument,
+    });
   }, [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 currentDocument = useMemo(() => {
+    if (!contract) {
+      return null;
+    }
+
+    return (
+      contract.documents.find(
+        (document) =>
+          document.isCurrent &&
+          ['source_upload', 'generated_pdf'].includes(document.documentType)
+      ) ??
+      contract.documents.find((document) => document.isCurrent) ??
+      null
+    );
+  }, [contract]);
 
-  const handleTemplateSelection = (value: string) => {
-    const template =
-      value === 'none'
-        ? null
-        : (contractTemplates.find((item) => String(item.id) === value) ?? null);
+  const previewSource = useMemo(() => {
+    if (form.pdfDocument?.fileContentBase64 && form.pdfDocument.mimeType) {
+      return `data:${form.pdfDocument.mimeType};base64,${form.pdfDocument.fileContentBase64}`;
+    }
 
-    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,
-    }));
-  };
+    if (form.pdfDocument?.fileId) {
+      return buildStoredFileUrl(form.pdfDocument.fileId);
+    }
 
-  useEffect(() => {
-    if (
-      !initialTemplateId ||
-      sourceId ||
-      !contractTemplates.length ||
-      form.contractTemplateId !== 'none'
-    ) {
-      return;
+    if (currentDocument?.fileContentBase64 && currentDocument.mimeType) {
+      return `data:${currentDocument.mimeType};base64,${currentDocument.fileContentBase64}`;
     }
 
-    const template = contractTemplates.find(
-      (item) => item.id === initialTemplateId
-    );
+    return buildStoredFileUrl(currentDocument?.fileId);
+  }, [currentDocument, form.pdfDocument]);
 
-    // 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 canPreview =
+    Boolean(previewSource) &&
+    (form.pdfDocument?.mimeType?.includes('pdf') ||
+      currentDocument?.mimeType?.includes('pdf'));
 
-  const onSubmit = async () => {
-    if (!form.code.trim() || !form.name.trim() || !form.clientName.trim()) {
+  const handleSubmit = async () => {
+    if (!form.name.trim()) {
       showToastHandler?.('error', t('messages.requiredFields'));
       return;
     }
 
+    const nextStatus = form.isActive ? 'active' : 'archived';
     const payload = {
-      code: form.code.trim(),
+      code: trimToNull(form.code),
       name: form.name.trim(),
-      clientName: form.clientName.trim(),
+      clientName: trimToNull(form.clientName),
       contractCategory: form.contractCategory,
       contractType: form.contractType,
       signatureStatus: form.signatureStatus,
@@ -439,19 +321,15 @@ 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,
+      startDate: trimToNull(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,
+      status: nextStatus,
       description: trimToNull(form.description),
       contentHtml: trimToNull(form.contentHtml),
       parties: form.parties
@@ -465,34 +343,6 @@ export function ContractFormScreen({
           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,
     };
 
@@ -557,1841 +407,203 @@ export function ContractFormScreen({
     );
   }
 
-  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' : '' }
-        )}
+  const content = (
+    <div className="space-y-4">
+      <SectionCard
+        title={t('sections.overview')}
+        description={t('sections.simpleDescription')}
+        compact={isSheetMode}
+        descriptionMode={isSheetMode ? 'tooltip' : 'inline'}
+      >
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label>{t('fields.name')}</Label>
+            <Input
+              value={form.name}
+              placeholder={t('fields.name')}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  name: event.target.value,
+                }))
+              }
+            />
+          </div>
 
-        <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 className="space-y-2">
+            <Label>{commonT('labels.status')}</Label>
+            <div className="flex min-h-10 items-center justify-between rounded-lg border px-3">
+              <div className="flex items-center gap-2">
+                <StatusBadge
+                  label={
+                    form.isActive
+                      ? detailT('labels.active')
+                      : detailT('labels.inactive')
+                  }
+                  className={
+                    form.isActive
+                      ? 'bg-emerald-100 text-emerald-700'
+                      : 'bg-muted text-muted-foreground'
+                  }
+                />
               </div>
               <Switch
                 checked={form.isActive}
                 onCheckedChange={(checked) =>
-                  setForm((c) => ({ ...c, isActive: checked }))
+                  setForm((current) => ({
+                    ...current,
+                    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}
-
-      {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>
-          <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 }))
-                }
-              />
-              <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 className="space-y-2 md:col-span-2">
+            <Label>{t('sections.documents')}</Label>
+            <label className="flex cursor-pointer flex-col gap-3 rounded-lg border border-dashed px-4 py-4 transition-colors hover:border-primary/40 hover:bg-accent/20">
+              <div className="flex items-center gap-3">
+                <div className="rounded-full bg-primary/10 p-2 text-primary">
+                  <Upload className="size-4" />
                 </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>
-              <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 className="min-w-0">
+                  <div className="font-medium">
+                    {form.pdfDocument?.fileName ||
+                      currentDocument?.fileName ||
+                      t('sections.documents')}
                   </div>
+                  <p className="text-sm text-muted-foreground">
+                    {t('messages.pdfHint')}
+                  </p>
                 </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"
+                className="hidden"
                 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;
+                  if (!file) {
+                    return;
+                  }
+
                   const fileContentBase64 = await fileToBase64(file);
                   setForm((current) => ({
                     ...current,
                     pdfDocument: {
                       fileName: file.name,
-                      mimeType: file.type || 'application/pdf',
+                      mimeType:
+                        file.type ||
+                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                       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 }))
+            </label>
+          </div>
+        </div>
+      </SectionCard>
+
+      <SectionCard
+        title={detailT('sections.preview')}
+        description="Pré-visualização rápida do arquivo atual do contrato."
+        compact={isSheetMode}
+        descriptionMode={isSheetMode ? 'tooltip' : 'inline'}
+      >
+        {canPreview && previewSource ? (
+          <iframe
+            title={detailT('sections.preview')}
+            src={previewSource}
+            className={
+              isSheetMode
+                ? 'h-112 w-full rounded-lg border'
+                : 'h-130 w-full rounded-lg border'
             }
-            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>
+        ) : (
+          <div className="rounded-lg border border-dashed px-4 py-10 text-center text-sm text-muted-foreground">
+            {detailT('states.previewUnavailable')}
+          </div>
+        )}
 
-      {sourceId && isLoadingContract ? (
-        <div className="text-sm text-muted-foreground">{t('loading')}</div>
-      ) : null}
-    </>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {currentDocument?.fileId ? (
+            <Button type="button" variant="outline" asChild>
+              <a
+                href={buildStoredFileUrl(currentDocument.fileId) || '#'}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Download className="size-4" />
+                {detailT('actions.downloadPdf')}
+              </a>
+            </Button>
+          ) : null}
+          {currentDocument?.fileContentBase64 ? (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                downloadBase64File(
+                  currentDocument.fileName,
+                  currentDocument.mimeType,
+                  currentDocument.fileContentBase64 || ''
+                )
+              }
+            >
+              <Download className="size-4" />
+              {detailT('actions.downloadPdf')}
+            </Button>
+          ) : null}
+        </div>
+      </SectionCard>
+
+      <div className="flex flex-wrap justify-between gap-2">
+        {isSheetMode ? (
+          <Button type="button" variant="outline" onClick={onCancel}>
+            {commonT('actions.cancel')}
+          </Button>
+        ) : (
+          <Button type="button" variant="outline" asChild>
+            <Link href="/operations/contracts">
+              {commonT('actions.cancel')}
+            </Link>
+          </Button>
+        )}
+
+        <Button type="button" onClick={() => void handleSubmit()}>
+          <Save className="size-4" />
+          {commonT(contractId ? 'actions.save' : 'actions.create')}
+        </Button>
+      </div>
+    </div>
   );
 
   if (isSheetMode) {
-    return (
-      <div className="mt-3 space-y-3 pb-4">
-        {formBody}
+    if (sourceId && isLoadingContract) {
+      return (
+        <div className="px-4 py-6 text-sm text-muted-foreground">
+          {t('loading')}
+        </div>
+      );
+    }
 
-        <FormActions
-          sheet
-          cancelLabel={commonT('actions.cancel')}
-          onCancel={onCancel}
-          onSubmit={() => void onSubmit()}
-          submitIcon={<Save className="size-4" />}
-          submitLabel={commonT('actions.save')}
-          submitSize="lg"
-        />
-      </div>
-    );
+    return <div className="px-4 py-4">{content}</div>;
   }
 
   return (
     <Page>
       <OperationsHeader
-        title={
-          duplicateFromId
-            ? t('duplicateTitle')
-            : t(contractId ? 'editTitle' : 'newTitle')
-        }
+        title={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}
+      {sourceId && isLoadingContract ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : (
+        content
+      )}
     </Page>
   );
 }