@hed-hog/operations 0.0.303 → 0.0.305

package/hedhog/frontend/app/contracts/page.tsx.ejs

@@ -1,938 +1,938 @@
-'use client';
-
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  Download,
-  FileStack,
-  FileText,
-  LayoutGrid,
-  List,
-  MoreHorizontal,
-  Pencil,
-  Sparkles,
-  Trash2,
-  Upload,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useMemo, useRef, useState } from 'react';
-import { ContractWizardSheet } from '../_components/contract-wizard-sheet';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsContract,
-  OperationsContractDetails,
-} from '../_lib/types';
-import {
-  formatCurrency,
-  formatDate,
-  formatEnumLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-
-function downloadBase64File(
-  fileName: string,
-  mimeType: string,
-  base64: string
-) {
-  const href = `data:${mimeType};base64,${base64}`;
-  const link = document.createElement('a');
-  link.href = href;
-  link.download = fileName;
-  link.click();
-}
-
-const CONTRACT_VIEW_STORAGE_KEY = 'operations-contracts-view-mode';
-
-type ContractViewMode = 'table' | 'cards';
-
-function openStoredFile(fileId?: number | null) {
-  if (!fileId) return;
-  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
-  window.open(
-    `${baseUrl}/file/open/${fileId}`,
-    '_blank',
-    'noopener,noreferrer'
-  );
-}
-
-async function fileToBase64(file: File) {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const result = String(reader.result ?? '');
-      const [, base64 = ''] = result.split(',');
-      resolve(base64);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-export default function OperationsContractsPage() {
-  const t = useTranslations('operations.ContractsPage');
-  const commonT = useTranslations('operations.Common');
-  const formT = useTranslations('operations.ContractFormPage');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [categoryFilter, setCategoryFilter] = useState('all');
-  const [originFilter, setOriginFilter] = useState('all');
-  const uploadTargetRef = useRef<number | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
-  const [contractToDelete, setContractToDelete] =
-    useState<OperationsContract | null>(null);
-  const [isDeletingContract, setIsDeletingContract] = useState(false);
-  const [viewMode, setViewMode] = useState<ContractViewMode>(() => {
-    if (typeof window === 'undefined') {
-      return 'table';
-    }
-
-    const savedViewMode = window.localStorage.getItem(
-      CONTRACT_VIEW_STORAGE_KEY
-    );
-
-    return savedViewMode === 'cards' ? 'cards' : 'table';
-  });
-
-  const getContractOptionLabel = (group: string, value?: string | null) => {
-    if (!value) {
-      return '-';
-    }
-
-    const key = `options.${group}.${value}`;
-    return formT.has(key) ? formT(key) : formatEnumLabel(value);
-  };
-
-  const editParam = searchParams.get('edit');
-  const duplicateParam = searchParams.get('duplicate');
-  const templateParam = searchParams.get('template');
-  const editingContractId =
-    editParam && /^\d+$/.test(editParam) ? Number(editParam) : null;
-  const duplicatingContractId =
-    duplicateParam && /^\d+$/.test(duplicateParam)
-      ? Number(duplicateParam)
-      : null;
-  const creatingFromTemplateId =
-    templateParam && /^\d+$/.test(templateParam) ? Number(templateParam) : null;
-
-  const updateSheetQuery = (options?: {
-    editId?: number | null;
-    duplicateId?: number | null;
-    templateId?: number | null;
-  }) => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    params.delete('edit');
-    params.delete('duplicate');
-    params.delete('template');
-
-    if (options?.editId && options.editId > 0) {
-      params.set('edit', String(options.editId));
-    }
-
-    if (options?.duplicateId && options.duplicateId > 0) {
-      params.set('duplicate', String(options.duplicateId));
-    }
-
-    if (options?.templateId && options.templateId > 0) {
-      params.set('template', String(options.templateId));
-    }
-
-    const nextUrl = params.size ? `${pathname}?${params.toString()}` : pathname;
-    router.replace(nextUrl, { scroll: false });
-  };
-
-  const openCreateSheet = (templateId?: number | null) => {
-    if (templateId && templateId > 0) {
-      updateSheetQuery({ templateId });
-      return;
-    }
-
-    setIsCreateSheetOpen(true);
-    updateSheetQuery();
-  };
-
-  const openEditSheet = (contractId: number) => {
-    setIsCreateSheetOpen(false);
-    updateSheetQuery({ editId: contractId });
-  };
-
-  const openDuplicateSheet = (contractId: number) => {
-    setIsCreateSheetOpen(false);
-    updateSheetQuery({ duplicateId: contractId });
-  };
-
-  const closeFormSheet = () => {
-    setIsCreateSheetOpen(false);
-
-    if (
-      editingContractId !== null ||
-      duplicatingContractId !== null ||
-      creatingFromTemplateId !== null
-    ) {
-      updateSheetQuery();
-    }
-  };
-
-  const { data: contracts = [], refetch } = useQuery<OperationsContract[]>({
-    queryKey: ['operations-contracts-list', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
-  });
-
-  const filteredRows = useMemo(
-    () =>
-      contracts.filter((item) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              item.name,
-              item.code,
-              item.mainRelatedPartyName,
-              item.clientName,
-              item.contractType,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-        const matchesStatus =
-          statusFilter === 'all' ? true : item.status === statusFilter;
-        const matchesCategory =
-          categoryFilter === 'all'
-            ? true
-            : item.contractCategory === categoryFilter;
-        const matchesOrigin =
-          originFilter === 'all' ? true : item.originType === originFilter;
-        return (
-          matchesSearch && matchesStatus && matchesCategory && matchesOrigin
-        );
-      }),
-    [contracts, search, statusFilter, categoryFilter, originFilter]
-  );
-
-  const sheetTitle = editingContractId
-    ? commonT('actions.edit')
-    : duplicatingContractId
-      ? t('actions.duplicate')
-      : isCreateSheetOpen || creatingFromTemplateId
-        ? commonT('actions.create')
-        : t('title');
-
-  const statsCards = useMemo(
-    () => [
-      {
-        key: 'total',
-        title: t('cards.total'),
-        value: contracts.length,
-        icon: FileText,
-      },
-      {
-        key: 'active',
-        title: t('cards.active'),
-        value: contracts.filter((item) => item.status === 'active').length,
-        icon: Sparkles,
-      },
-      {
-        key: 'underReview',
-        title: t('cards.underReview'),
-        value: contracts.filter((item) => item.status === 'under_review')
-          .length,
-        icon: Pencil,
-      },
-      {
-        key: 'withTemplate',
-        title: t('cards.withTemplate'),
-        value: contracts.filter((item) => Boolean(item.contractTemplateId))
-          .length,
-        icon: FileStack,
-      },
-    ],
-    [contracts, t]
-  );
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') {
-      return;
-    }
-
-    setViewMode(value);
-
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(CONTRACT_VIEW_STORAGE_KEY, value);
-    }
-  };
-
-  const downloadPdf = async (contractId: number) => {
-    const detail = await fetchOperations<OperationsContractDetails>(
-      request,
-      `/operations/contracts/${contractId}`
-    );
-    const document = detail.documents.find(
-      (item) =>
-        item.isCurrent &&
-        (item.documentType === 'generated_pdf' ||
-          item.documentType === 'source_upload')
-    );
-    if (document?.fileId) {
-      openStoredFile(document.fileId);
-      return;
-    }
-    if (!document?.fileContentBase64) {
-      showToastHandler?.('error', t('messages.noPdf'));
-      return;
-    }
-    downloadBase64File(
-      document.fileName,
-      document.mimeType,
-      document.fileContentBase64
-    );
-  };
-
-  const duplicateContract = (contractId: number) => {
-    openDuplicateSheet(contractId);
-  };
-
-  const handleDeleteContract = async () => {
-    if (!contractToDelete?.id) {
-      return;
-    }
-
-    try {
-      setIsDeletingContract(true);
-      await request({
-        url: `/operations/contracts/${contractToDelete.id}`,
-        method: 'DELETE',
-      });
-      showToastHandler?.('success', t('messages.deleteSuccess'));
-      setContractToDelete(null);
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.deleteError'));
-    } finally {
-      setIsDeletingContract(false);
-    }
-  };
-
-  const toggleArchived = async (contract: OperationsContract) => {
-    try {
-      await mutateOperations(
-        request,
-        `/operations/contracts/${contract.id}`,
-        'PATCH',
-        {
-          status: contract.status === 'archived' ? 'active' : 'archived',
-          isActive: contract.status === 'archived',
-        }
-      );
-      showToastHandler?.('success', t('messages.statusSuccess'));
-      await refetch();
-    } catch {
-      showToastHandler?.('error', t('messages.statusError'));
-    }
-  };
-
-  const renderContractActions = (
-    contract: OperationsContract,
-    align: 'start' | 'end' = 'end'
-  ) => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          className="cursor-pointer"
-          aria-label={commonT('labels.actions')}
-        >
-          <MoreHorizontal className="size-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align={align} className="w-52">
-        {access.isDirector ? (
-          <DropdownMenuItem onSelect={() => openEditSheet(contract.id)}>
-            <Pencil className="size-4" />
-            {commonT('actions.edit')}
-          </DropdownMenuItem>
-        ) : null}
-        <DropdownMenuItem onSelect={() => void downloadPdf(contract.id)}>
-          <Download className="size-4" />
-          {t('actions.downloadPdf')}
-        </DropdownMenuItem>
-        {access.isDirector ? (
-          <DropdownMenuItem
-            onSelect={() => {
-              uploadTargetRef.current = contract.id;
-              fileInputRef.current?.click();
-            }}
-          >
-            <Upload className="size-4" />
-            {t('actions.uploadPdf')}
-          </DropdownMenuItem>
-        ) : null}
-        {access.isDirector ? <DropdownMenuSeparator /> : null}
-        {access.isDirector ? (
-          <DropdownMenuItem
-            onSelect={() => void duplicateContract(contract.id)}
-          >
-            <FileStack className="size-4" />
-            {t('actions.duplicate')}
-          </DropdownMenuItem>
-        ) : null}
-        {access.isDirector ? (
-          <DropdownMenuItem onSelect={() => void toggleArchived(contract)}>
-            <Sparkles className="size-4" />
-            {contract.status === 'archived'
-              ? commonT('actions.activate')
-              : t('actions.archive')}
-          </DropdownMenuItem>
-        ) : null}
-        {access.isDirector ? <DropdownMenuSeparator /> : null}
-        {access.isDirector ? (
-          <DropdownMenuItem
-            onSelect={() => setContractToDelete(contract)}
-            className="text-destructive focus:text-destructive"
-          >
-            <Trash2 className="size-4 text-destructive" />
-            {t('actions.delete')}
-          </DropdownMenuItem>
-        ) : null}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          access.isDirector ? (
-            <div className="flex flex-wrap gap-2">
-              <Button
-                size="sm"
-                className="cursor-pointer"
-                onClick={() => openCreateSheet()}
-              >
-                {commonT('actions.create')}
-              </Button>
-            </div>
-          ) : undefined
-        }
-      />
-
-      <KpiCardsGrid items={statsCards} columns={4} />
-
-      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="flex-1">
-          <SearchBar
-            searchQuery={search}
-            onSearchChange={setSearch}
-            onSearch={() => undefined}
-            placeholder={t('searchPlaceholder')}
-            controls={[
-              {
-                id: 'category',
-                type: 'select',
-                value: categoryFilter,
-                onChange: setCategoryFilter,
-                placeholder: commonT('labels.contractCategory'),
-                options: [
-                  { value: 'all', label: commonT('filters.allTypes') },
-                  ...[
-                    'employee',
-                    'contractor',
-                    'client',
-                    'supplier',
-                    'vendor',
-                    'partner',
-                    'internal',
-                    'other',
-                  ].map((value) => ({
-                    value,
-                    label: getContractOptionLabel('contractCategories', value),
-                  })),
-                ],
-              },
-              {
-                id: 'origin',
-                type: 'select',
-                value: originFilter,
-                onChange: setOriginFilter,
-                placeholder: t('filters.originType'),
-                options: [
-                  { value: 'all', label: commonT('filters.allTypes') },
-                  ...['manual', 'employee_hiring', 'client_project'].map(
-                    (value) => ({
-                      value,
-                      label: getContractOptionLabel('originTypes', value),
-                    })
-                  ),
-                ],
-              },
-              {
-                id: 'status',
-                type: 'select',
-                value: statusFilter,
-                onChange: setStatusFilter,
-                placeholder: commonT('labels.status'),
-                options: [
-                  { value: 'all', label: commonT('filters.allStatuses') },
-                  ...[
-                    'draft',
-                    'under_review',
-                    'active',
-                    'renewal',
-                    'expired',
-                    'closed',
-                    'archived',
-                  ].map((value) => ({
-                    value,
-                    label: getContractOptionLabel('statuses', value),
-                  })),
-                ],
-              },
-            ]}
-          />
-        </div>
-
-        <div className="flex items-center justify-between gap-3 xl:justify-end">
-          <span className="text-xs font-medium text-muted-foreground">
-            {t('viewMode')}
-          </span>
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-            variant="outline"
-            size="sm"
-            aria-label={t('viewMode')}
-          >
-            <ToggleGroupItem
-              value="table"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewModeTable')}
-            >
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTable')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="cards"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewModeCards')}
-            >
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeCards')}</span>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
-
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="application/pdf"
-        className="hidden"
-        onChange={async (event) => {
-          const file = event.target.files?.[0];
-          const contractId = uploadTargetRef.current;
-          if (!file || !contractId) return;
-          try {
-            const fileContentBase64 = await fileToBase64(file);
-            await mutateOperations(
-              request,
-              `/operations/contracts/${contractId}`,
-              'PATCH',
-              {
-                replaceUploadedPdfDocument: {
-                  fileName: file.name,
-                  mimeType: file.type || 'application/pdf',
-                  fileContentBase64,
-                },
-              }
-            );
-            showToastHandler?.('success', t('messages.uploadSuccess'));
-            await refetch();
-          } catch {
-            showToastHandler?.('error', t('messages.uploadError'));
-          } finally {
-            uploadTargetRef.current = null;
-            event.target.value = '';
-          }
-        }}
-      />
-
-      {filteredRows.length ? (
-        viewMode === 'cards' ? (
-          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
-            {filteredRows.map((contract) => {
-              const financialTotal =
-                (contract.valueAmount ?? 0) + (contract.revenueAmount ?? 0);
-              const contractTitle =
-                contract.name ||
-                contract.code ||
-                commonT('labels.notAvailable');
-              const secondaryLine = [
-                contract.code,
-                getContractOptionLabel('contractTypes', contract.contractType),
-                getContractOptionLabel('originTypes', contract.originType),
-              ]
-                .filter(Boolean)
-                .join(' • ');
-
-              return (
-                <Card
-                  key={contract.id}
-                  className="overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
-                >
-                  <CardContent className="space-y-4 p-4">
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="min-w-0">
-                        <div className="truncate font-semibold">
-                          {contractTitle}
-                        </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {secondaryLine || commonT('labels.notAvailable')}
-                        </div>
-                      </div>
-                      <StatusBadge
-                        label={getContractOptionLabel(
-                          'statuses',
-                          contract.status
-                        )}
-                        className={getStatusBadgeClass(contract.status)}
-                      />
-                    </div>
-
-                    <div className="flex flex-wrap gap-2">
-                      <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-                        {getContractOptionLabel(
-                          'contractCategories',
-                          contract.contractCategory
-                        )}
-                      </span>
-                      {contract.contractTemplateName ? (
-                        <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
-                          {contract.contractTemplateName}
-                        </span>
-                      ) : null}
-                    </div>
-
-                    <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
-                      <div>
-                        <span className="font-medium text-foreground">
-                          {commonT('labels.client')}:
-                        </span>{' '}
-                        {contract.clientName || commonT('labels.notAvailable')}
-                      </div>
-                      <div>
-                        <span className="font-medium text-foreground">
-                          {t('columns.party')}:
-                        </span>{' '}
-                        {contract.mainRelatedPartyName ||
-                          commonT('labels.notAvailable')}
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium text-foreground">
-                          {t('columns.signatureStatus')}:
-                        </span>
-                        <StatusBadge
-                          label={getContractOptionLabel(
-                            'signatureStatuses',
-                            contract.signatureStatus
-                          )}
-                          className={getStatusBadgeClass(
-                            contract.signatureStatus
-                          )}
-                        />
-                      </div>
-                      <div>
-                        <span className="font-medium text-foreground">
-                          {t('columns.financials')}:
-                        </span>{' '}
-                        {formatCurrency(financialTotal)}
-                      </div>
-                      <div>
-                        <span className="font-medium text-foreground">
-                          {commonT('labels.startDate')}:
-                        </span>{' '}
-                        {formatDate(contract.startDate)}
-                      </div>
-                      <div>
-                        <span className="font-medium text-foreground">
-                          {commonT('labels.endDate')}:
-                        </span>{' '}
-                        {formatDate(contract.endDate)}
-                      </div>
-                    </div>
-
-                    <div className="flex justify-end">
-                      {renderContractActions(contract, 'end')}
-                    </div>
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table className="table-fixed">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[34%]">
-                    {t('columns.title')}
-                  </TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead className="hidden md:table-cell">
-                    {t('columns.signatureStatus')}
-                  </TableHead>
-                  <TableHead className="hidden lg:table-cell">
-                    {t('columns.type')}
-                  </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.client')}
-                  </TableHead>
-                  <TableHead className="hidden 2xl:table-cell">
-                    {t('columns.financials')}
-                  </TableHead>
-                  <TableHead className="w-30 text-right sm:w-42.5">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredRows.map((contract) => {
-                  const financialTotal =
-                    (contract.valueAmount ?? 0) + (contract.revenueAmount ?? 0);
-
-                  return (
-                    <TableRow key={contract.id} className="hover:bg-muted/30">
-                      <TableCell>
-                        <div className="min-w-0">
-                          <div className="truncate font-medium">
-                            {contract.name ||
-                              contract.code ||
-                              commonT('labels.notAvailable')}
-                          </div>
-                          <div className="truncate text-xs text-muted-foreground">
-                            {[
-                              contract.code,
-                              contract.contractTemplateName,
-                              contract.mainRelatedPartyName,
-                              getContractOptionLabel(
-                                'originTypes',
-                                contract.originType
-                              ),
-                            ]
-                              .filter(Boolean)
-                              .join(' • ') || commonT('labels.notAvailable')}
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          label={getContractOptionLabel(
-                            'statuses',
-                            contract.status
-                          )}
-                          className={getStatusBadgeClass(contract.status)}
-                        />
-                      </TableCell>
-                      <TableCell className="hidden md:table-cell">
-                        <StatusBadge
-                          label={getContractOptionLabel(
-                            'signatureStatuses',
-                            contract.signatureStatus
-                          )}
-                          className={getStatusBadgeClass(
-                            contract.signatureStatus
-                          )}
-                        />
-                      </TableCell>
-                      <TableCell className="hidden lg:table-cell">
-                        <div className="truncate">
-                          {getContractOptionLabel(
-                            'contractTypes',
-                            contract.contractType
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell className="hidden xl:table-cell">
-                        <div className="truncate">
-                          {contract.clientName ||
-                            commonT('labels.notAvailable')}
-                        </div>
-                      </TableCell>
-                      <TableCell className="hidden 2xl:table-cell">
-                        {formatCurrency(financialTotal)}
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex justify-end">
-                          {renderContractActions(contract, 'end')}
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        )
-      ) : (
-        <EmptyState
-          icon={<FileText className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={
-            access.isDirector
-              ? commonT('actions.create')
-              : commonT('actions.refresh')
-          }
-          onAction={
-            access.isDirector ? () => openCreateSheet() : () => void refetch()
-          }
-        />
-      )}
-
-      <AlertDialog
-        open={contractToDelete !== null}
-        onOpenChange={(open) => {
-          if (!open && !isDeletingContract) {
-            setContractToDelete(null);
-          }
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t('messages.confirmDeleteTitle')}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('messages.confirmDeleteDescription', {
-                name:
-                  contractToDelete?.name ||
-                  contractToDelete?.code ||
-                  commonT('labels.notAvailable'),
-              })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeletingContract}>
-              {commonT('actions.cancel')}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              disabled={isDeletingContract}
-              className="bg-destructive text-white hover:bg-destructive/90"
-              onClick={(event) => {
-                event.preventDefault();
-                void handleDeleteContract();
-              }}
-            >
-              {t('actions.delete')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      <Sheet
-        open={
-          isCreateSheetOpen ||
-          editingContractId !== null ||
-          duplicatingContractId !== null ||
-          creatingFromTemplateId !== null
-        }
-        onOpenChange={(open) => {
-          if (!open) {
-            closeFormSheet();
-          }
-        }}
-      >
-        <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
-          <SheetHeader className="sr-only">
-            <SheetTitle>{sheetTitle}</SheetTitle>
-            <SheetDescription>{t('description')}</SheetDescription>
-          </SheetHeader>
-          <ContractWizardSheet
-            key={
-              editingContractId
-                ? `edit-${editingContractId}`
-                : duplicatingContractId
-                  ? `duplicate-${duplicatingContractId}`
-                  : creatingFromTemplateId
-                    ? `template-${creatingFromTemplateId}`
-                    : isCreateSheetOpen
-                      ? 'create-contract'
-                      : 'contract-sheet'
-            }
-            contractId={editingContractId ?? undefined}
-            duplicateFromId={duplicatingContractId ?? undefined}
-            initialTemplateId={creatingFromTemplateId ?? undefined}
-            isCreateFlow={isCreateSheetOpen}
-            onCancel={closeFormSheet}
-            onSaved={async (contract) => {
-              await refetch();
-
-              if (
-                isCreateSheetOpen ||
-                duplicatingContractId !== null ||
-                creatingFromTemplateId !== null
-              ) {
-                openEditSheet(contract.id);
-                return;
-              }
-
-              closeFormSheet();
-            }}
-          />
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Download,
+  FileStack,
+  FileText,
+  LayoutGrid,
+  List,
+  MoreHorizontal,
+  Pencil,
+  Sparkles,
+  Trash2,
+  Upload,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useMemo, useRef, useState } from 'react';
+import { ContractWizardSheet } from '../_components/contract-wizard-sheet';
+import { OperationsHeader } from '../_components/operations-header';
+import { StatusBadge } from '../_components/status-badge';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type {
+  OperationsContract,
+  OperationsContractDetails,
+} from '../_lib/types';
+import {
+  formatCurrency,
+  formatDate,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+
+function downloadBase64File(
+  fileName: string,
+  mimeType: string,
+  base64: string
+) {
+  const href = `data:${mimeType};base64,${base64}`;
+  const link = document.createElement('a');
+  link.href = href;
+  link.download = fileName;
+  link.click();
+}
+
+const CONTRACT_VIEW_STORAGE_KEY = 'operations-contracts-view-mode';
+
+type ContractViewMode = 'table' | 'cards';
+
+function openStoredFile(fileId?: number | null) {
+  if (!fileId) return;
+  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  window.open(
+    `${baseUrl}/file/open/${fileId}`,
+    '_blank',
+    'noopener,noreferrer'
+  );
+}
+
+async function fileToBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result ?? '');
+      const [, base64 = ''] = result.split(',');
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export default function OperationsContractsPage() {
+  const t = useTranslations('operations.ContractsPage');
+  const commonT = useTranslations('operations.Common');
+  const formT = useTranslations('operations.ContractFormPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [originFilter, setOriginFilter] = useState('all');
+  const uploadTargetRef = useRef<number | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+  const [contractToDelete, setContractToDelete] =
+    useState<OperationsContract | null>(null);
+  const [isDeletingContract, setIsDeletingContract] = useState(false);
+  const [viewMode, setViewMode] = useState<ContractViewMode>(() => {
+    if (typeof window === 'undefined') {
+      return 'table';
+    }
+
+    const savedViewMode = window.localStorage.getItem(
+      CONTRACT_VIEW_STORAGE_KEY
+    );
+
+    return savedViewMode === 'cards' ? 'cards' : 'table';
+  });
+
+  const getContractOptionLabel = (group: string, value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.${group}.${value}`;
+    return formT.has(key) ? formT(key) : formatEnumLabel(value);
+  };
+
+  const editParam = searchParams.get('edit');
+  const duplicateParam = searchParams.get('duplicate');
+  const templateParam = searchParams.get('template');
+  const editingContractId =
+    editParam && /^\d+$/.test(editParam) ? Number(editParam) : null;
+  const duplicatingContractId =
+    duplicateParam && /^\d+$/.test(duplicateParam)
+      ? Number(duplicateParam)
+      : null;
+  const creatingFromTemplateId =
+    templateParam && /^\d+$/.test(templateParam) ? Number(templateParam) : null;
+
+  const updateSheetQuery = (options?: {
+    editId?: number | null;
+    duplicateId?: number | null;
+    templateId?: number | null;
+  }) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    params.delete('edit');
+    params.delete('duplicate');
+    params.delete('template');
+
+    if (options?.editId && options.editId > 0) {
+      params.set('edit', String(options.editId));
+    }
+
+    if (options?.duplicateId && options.duplicateId > 0) {
+      params.set('duplicate', String(options.duplicateId));
+    }
+
+    if (options?.templateId && options.templateId > 0) {
+      params.set('template', String(options.templateId));
+    }
+
+    const nextUrl = params.size ? `${pathname}?${params.toString()}` : pathname;
+    router.replace(nextUrl, { scroll: false });
+  };
+
+  const openCreateSheet = (templateId?: number | null) => {
+    if (templateId && templateId > 0) {
+      updateSheetQuery({ templateId });
+      return;
+    }
+
+    setIsCreateSheetOpen(true);
+    updateSheetQuery();
+  };
+
+  const openEditSheet = (contractId: number) => {
+    setIsCreateSheetOpen(false);
+    updateSheetQuery({ editId: contractId });
+  };
+
+  const openDuplicateSheet = (contractId: number) => {
+    setIsCreateSheetOpen(false);
+    updateSheetQuery({ duplicateId: contractId });
+  };
+
+  const closeFormSheet = () => {
+    setIsCreateSheetOpen(false);
+
+    if (
+      editingContractId !== null ||
+      duplicatingContractId !== null ||
+      creatingFromTemplateId !== null
+    ) {
+      updateSheetQuery();
+    }
+  };
+
+  const { data: contracts = [], refetch } = useQuery<OperationsContract[]>({
+    queryKey: ['operations-contracts-list', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
+  });
+
+  const filteredRows = useMemo(
+    () =>
+      contracts.filter((item) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              item.name,
+              item.code,
+              item.mainRelatedPartyName,
+              item.clientName,
+              item.contractType,
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
+              );
+        const matchesStatus =
+          statusFilter === 'all' ? true : item.status === statusFilter;
+        const matchesCategory =
+          categoryFilter === 'all'
+            ? true
+            : item.contractCategory === categoryFilter;
+        const matchesOrigin =
+          originFilter === 'all' ? true : item.originType === originFilter;
+        return (
+          matchesSearch && matchesStatus && matchesCategory && matchesOrigin
+        );
+      }),
+    [contracts, search, statusFilter, categoryFilter, originFilter]
+  );
+
+  const sheetTitle = editingContractId
+    ? commonT('actions.edit')
+    : duplicatingContractId
+      ? t('actions.duplicate')
+      : isCreateSheetOpen || creatingFromTemplateId
+        ? commonT('actions.create')
+        : t('title');
+
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: contracts.length,
+        icon: FileText,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: contracts.filter((item) => item.status === 'active').length,
+        icon: Sparkles,
+      },
+      {
+        key: 'underReview',
+        title: t('cards.underReview'),
+        value: contracts.filter((item) => item.status === 'under_review')
+          .length,
+        icon: Pencil,
+      },
+      {
+        key: 'withTemplate',
+        title: t('cards.withTemplate'),
+        value: contracts.filter((item) => Boolean(item.contractTemplateId))
+          .length,
+        icon: FileStack,
+      },
+    ],
+    [contracts, t]
+  );
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(CONTRACT_VIEW_STORAGE_KEY, value);
+    }
+  };
+
+  const downloadPdf = async (contractId: number) => {
+    const detail = await fetchOperations<OperationsContractDetails>(
+      request,
+      `/operations/contracts/${contractId}`
+    );
+    const document = detail.documents.find(
+      (item) =>
+        item.isCurrent &&
+        (item.documentType === 'generated_pdf' ||
+          item.documentType === 'source_upload')
+    );
+    if (document?.fileId) {
+      openStoredFile(document.fileId);
+      return;
+    }
+    if (!document?.fileContentBase64) {
+      showToastHandler?.('error', t('messages.noPdf'));
+      return;
+    }
+    downloadBase64File(
+      document.fileName,
+      document.mimeType,
+      document.fileContentBase64
+    );
+  };
+
+  const duplicateContract = (contractId: number) => {
+    openDuplicateSheet(contractId);
+  };
+
+  const handleDeleteContract = async () => {
+    if (!contractToDelete?.id) {
+      return;
+    }
+
+    try {
+      setIsDeletingContract(true);
+      await request({
+        url: `/operations/contracts/${contractToDelete.id}`,
+        method: 'DELETE',
+      });
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setContractToDelete(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    } finally {
+      setIsDeletingContract(false);
+    }
+  };
+
+  const toggleArchived = async (contract: OperationsContract) => {
+    try {
+      await mutateOperations(
+        request,
+        `/operations/contracts/${contract.id}`,
+        'PATCH',
+        {
+          status: contract.status === 'archived' ? 'active' : 'archived',
+          isActive: contract.status === 'archived',
+        }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  const renderContractActions = (
+    contract: OperationsContract,
+    align: 'start' | 'end' = 'end'
+  ) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="cursor-pointer"
+          aria-label={commonT('labels.actions')}
+        >
+          <MoreHorizontal className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className="w-52">
+        {access.isDirector ? (
+          <DropdownMenuItem onSelect={() => openEditSheet(contract.id)}>
+            <Pencil className="size-4" />
+            {commonT('actions.edit')}
+          </DropdownMenuItem>
+        ) : null}
+        <DropdownMenuItem onSelect={() => void downloadPdf(contract.id)}>
+          <Download className="size-4" />
+          {t('actions.downloadPdf')}
+        </DropdownMenuItem>
+        {access.isDirector ? (
+          <DropdownMenuItem
+            onSelect={() => {
+              uploadTargetRef.current = contract.id;
+              fileInputRef.current?.click();
+            }}
+          >
+            <Upload className="size-4" />
+            {t('actions.uploadPdf')}
+          </DropdownMenuItem>
+        ) : null}
+        {access.isDirector ? <DropdownMenuSeparator /> : null}
+        {access.isDirector ? (
+          <DropdownMenuItem
+            onSelect={() => void duplicateContract(contract.id)}
+          >
+            <FileStack className="size-4" />
+            {t('actions.duplicate')}
+          </DropdownMenuItem>
+        ) : null}
+        {access.isDirector ? (
+          <DropdownMenuItem onSelect={() => void toggleArchived(contract)}>
+            <Sparkles className="size-4" />
+            {contract.status === 'archived'
+              ? commonT('actions.activate')
+              : t('actions.archive')}
+          </DropdownMenuItem>
+        ) : null}
+        {access.isDirector ? <DropdownMenuSeparator /> : null}
+        {access.isDirector ? (
+          <DropdownMenuItem
+            onSelect={() => setContractToDelete(contract)}
+            className="text-destructive focus:text-destructive"
+          >
+            <Trash2 className="size-4 text-destructive" />
+            {t('actions.delete')}
+          </DropdownMenuItem>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isDirector ? (
+            <div className="flex flex-wrap gap-2">
+              <Button
+                size="sm"
+                className="cursor-pointer"
+                onClick={() => openCreateSheet()}
+              >
+                {commonT('actions.create')}
+              </Button>
+            </div>
+          ) : undefined
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={setSearch}
+            onSearch={() => undefined}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'category',
+                type: 'select',
+                value: categoryFilter,
+                onChange: setCategoryFilter,
+                placeholder: commonT('labels.contractCategory'),
+                options: [
+                  { value: 'all', label: commonT('filters.allTypes') },
+                  ...[
+                    'employee',
+                    'contractor',
+                    'client',
+                    'supplier',
+                    'vendor',
+                    'partner',
+                    'internal',
+                    'other',
+                  ].map((value) => ({
+                    value,
+                    label: getContractOptionLabel('contractCategories', value),
+                  })),
+                ],
+              },
+              {
+                id: 'origin',
+                type: 'select',
+                value: originFilter,
+                onChange: setOriginFilter,
+                placeholder: t('filters.originType'),
+                options: [
+                  { value: 'all', label: commonT('filters.allTypes') },
+                  ...['manual', 'employee_hiring', 'client_project'].map(
+                    (value) => ({
+                      value,
+                      label: getContractOptionLabel('originTypes', value),
+                    })
+                  ),
+                ],
+              },
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: setStatusFilter,
+                placeholder: commonT('labels.status'),
+                options: [
+                  { value: 'all', label: commonT('filters.allStatuses') },
+                  ...[
+                    'draft',
+                    'under_review',
+                    'active',
+                    'renewal',
+                    'expired',
+                    'closed',
+                    'archived',
+                  ].map((value) => ({
+                    value,
+                    label: getContractOptionLabel('statuses', value),
+                  })),
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label={t('viewMode')}
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeTable')}
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeCards')}
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="application/pdf"
+        className="hidden"
+        onChange={async (event) => {
+          const file = event.target.files?.[0];
+          const contractId = uploadTargetRef.current;
+          if (!file || !contractId) return;
+          try {
+            const fileContentBase64 = await fileToBase64(file);
+            await mutateOperations(
+              request,
+              `/operations/contracts/${contractId}`,
+              'PATCH',
+              {
+                replaceUploadedPdfDocument: {
+                  fileName: file.name,
+                  mimeType: file.type || 'application/pdf',
+                  fileContentBase64,
+                },
+              }
+            );
+            showToastHandler?.('success', t('messages.uploadSuccess'));
+            await refetch();
+          } catch {
+            showToastHandler?.('error', t('messages.uploadError'));
+          } finally {
+            uploadTargetRef.current = null;
+            event.target.value = '';
+          }
+        }}
+      />
+
+      {filteredRows.length ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {filteredRows.map((contract) => {
+              const financialTotal =
+                (contract.valueAmount ?? 0) + (contract.revenueAmount ?? 0);
+              const contractTitle =
+                contract.name ||
+                contract.code ||
+                commonT('labels.notAvailable');
+              const secondaryLine = [
+                contract.code,
+                getContractOptionLabel('contractTypes', contract.contractType),
+                getContractOptionLabel('originTypes', contract.originType),
+              ]
+                .filter(Boolean)
+                .join(' • ');
+
+              return (
+                <Card
+                  key={contract.id}
+                  className="overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+                >
+                  <CardContent className="space-y-4 p-4">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="min-w-0">
+                        <div className="truncate font-semibold">
+                          {contractTitle}
+                        </div>
+                        <div className="truncate text-xs text-muted-foreground">
+                          {secondaryLine || commonT('labels.notAvailable')}
+                        </div>
+                      </div>
+                      <StatusBadge
+                        label={getContractOptionLabel(
+                          'statuses',
+                          contract.status
+                        )}
+                        className={getStatusBadgeClass(contract.status)}
+                      />
+                    </div>
+
+                    <div className="flex flex-wrap gap-2">
+                      <span className="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
+                        {getContractOptionLabel(
+                          'contractCategories',
+                          contract.contractCategory
+                        )}
+                      </span>
+                      {contract.contractTemplateName ? (
+                        <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
+                          {contract.contractTemplateName}
+                        </span>
+                      ) : null}
+                    </div>
+
+                    <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
+                      <div>
+                        <span className="font-medium text-foreground">
+                          {commonT('labels.client')}:
+                        </span>{' '}
+                        {contract.clientName || commonT('labels.notAvailable')}
+                      </div>
+                      <div>
+                        <span className="font-medium text-foreground">
+                          {t('columns.party')}:
+                        </span>{' '}
+                        {contract.mainRelatedPartyName ||
+                          commonT('labels.notAvailable')}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-foreground">
+                          {t('columns.signatureStatus')}:
+                        </span>
+                        <StatusBadge
+                          label={getContractOptionLabel(
+                            'signatureStatuses',
+                            contract.signatureStatus
+                          )}
+                          className={getStatusBadgeClass(
+                            contract.signatureStatus
+                          )}
+                        />
+                      </div>
+                      <div>
+                        <span className="font-medium text-foreground">
+                          {t('columns.financials')}:
+                        </span>{' '}
+                        {formatCurrency(financialTotal)}
+                      </div>
+                      <div>
+                        <span className="font-medium text-foreground">
+                          {commonT('labels.startDate')}:
+                        </span>{' '}
+                        {formatDate(contract.startDate)}
+                      </div>
+                      <div>
+                        <span className="font-medium text-foreground">
+                          {commonT('labels.endDate')}:
+                        </span>{' '}
+                        {formatDate(contract.endDate)}
+                      </div>
+                    </div>
+
+                    <div className="flex justify-end">
+                      {renderContractActions(contract, 'end')}
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table className="table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[34%]">
+                    {t('columns.title')}
+                  </TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    {t('columns.signatureStatus')}
+                  </TableHead>
+                  <TableHead className="hidden lg:table-cell">
+                    {t('columns.type')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.client')}
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    {t('columns.financials')}
+                  </TableHead>
+                  <TableHead className="w-30 text-right sm:w-42.5">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRows.map((contract) => {
+                  const financialTotal =
+                    (contract.valueAmount ?? 0) + (contract.revenueAmount ?? 0);
+
+                  return (
+                    <TableRow key={contract.id} className="hover:bg-muted/30">
+                      <TableCell>
+                        <div className="min-w-0">
+                          <div className="truncate font-medium">
+                            {contract.name ||
+                              contract.code ||
+                              commonT('labels.notAvailable')}
+                          </div>
+                          <div className="truncate text-xs text-muted-foreground">
+                            {[
+                              contract.code,
+                              contract.contractTemplateName,
+                              contract.mainRelatedPartyName,
+                              getContractOptionLabel(
+                                'originTypes',
+                                contract.originType
+                              ),
+                            ]
+                              .filter(Boolean)
+                              .join(' • ') || commonT('labels.notAvailable')}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={getContractOptionLabel(
+                            'statuses',
+                            contract.status
+                          )}
+                          className={getStatusBadgeClass(contract.status)}
+                        />
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell">
+                        <StatusBadge
+                          label={getContractOptionLabel(
+                            'signatureStatuses',
+                            contract.signatureStatus
+                          )}
+                          className={getStatusBadgeClass(
+                            contract.signatureStatus
+                          )}
+                        />
+                      </TableCell>
+                      <TableCell className="hidden lg:table-cell">
+                        <div className="truncate">
+                          {getContractOptionLabel(
+                            'contractTypes',
+                            contract.contractType
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden xl:table-cell">
+                        <div className="truncate">
+                          {contract.clientName ||
+                            commonT('labels.notAvailable')}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden 2xl:table-cell">
+                        {formatCurrency(financialTotal)}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex justify-end">
+                          {renderContractActions(contract, 'end')}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )
+      ) : (
+        <EmptyState
+          icon={<FileText className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={
+            access.isDirector
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
+          }
+          onAction={
+            access.isDirector ? () => openCreateSheet() : () => void refetch()
+          }
+        />
+      )}
+
+      <AlertDialog
+        open={contractToDelete !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeletingContract) {
+            setContractToDelete(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t('messages.confirmDeleteTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('messages.confirmDeleteDescription', {
+                name:
+                  contractToDelete?.name ||
+                  contractToDelete?.code ||
+                  commonT('labels.notAvailable'),
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingContract}>
+              {commonT('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isDeletingContract}
+              className="bg-destructive text-white hover:bg-destructive/90"
+              onClick={(event) => {
+                event.preventDefault();
+                void handleDeleteContract();
+              }}
+            >
+              {t('actions.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Sheet
+        open={
+          isCreateSheetOpen ||
+          editingContractId !== null ||
+          duplicatingContractId !== null ||
+          creatingFromTemplateId !== null
+        }
+        onOpenChange={(open) => {
+          if (!open) {
+            closeFormSheet();
+          }
+        }}
+      >
+        <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+          <SheetHeader className="sr-only">
+            <SheetTitle>{sheetTitle}</SheetTitle>
+            <SheetDescription>{t('description')}</SheetDescription>
+          </SheetHeader>
+          <ContractWizardSheet
+            key={
+              editingContractId
+                ? `edit-${editingContractId}`
+                : duplicatingContractId
+                  ? `duplicate-${duplicatingContractId}`
+                  : creatingFromTemplateId
+                    ? `template-${creatingFromTemplateId}`
+                    : isCreateSheetOpen
+                      ? 'create-contract'
+                      : 'contract-sheet'
+            }
+            contractId={editingContractId ?? undefined}
+            duplicateFromId={duplicatingContractId ?? undefined}
+            initialTemplateId={creatingFromTemplateId ?? undefined}
+            isCreateFlow={isCreateSheetOpen}
+            onCancel={closeFormSheet}
+            onSaved={async (contract) => {
+              await refetch();
+
+              if (
+                isCreateSheetOpen ||
+                duplicatingContractId !== null ||
+                creatingFromTemplateId !== null
+              ) {
+                openEditSheet(contract.id);
+                return;
+              }
+
+              closeFormSheet();
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}