@hed-hog/contact 0.0.270 → 0.0.275

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

@@ -1,1209 +1,1353 @@
-'use client';
-
-import { CopyButton } from '@/components/copy-button';
-import { Page, PageHeader } from '@/components/entity-list';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-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 { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { formatDate } from '@/lib/format-date';
-import { cn } from '@/lib/utils';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  type ColumnDef,
-  type SortingState,
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  ArrowUpDown,
-  Building2,
-  CalendarDays,
-  CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  FileText,
-  LayoutGrid,
-  List,
-  Mail,
-  MapPin,
-  MoreHorizontal,
-  Pencil,
-  Phone,
-  Plus,
-  Search,
-  Trash2,
-  User,
-  Users,
-  XCircle,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { type ReactNode, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-
-import { DeletePersonDialog } from './_components/delete-person-dialog';
-import { PersonFormSheet } from './_components/person-form-sheet';
-import type {
-  ContactTypeOption,
-  DocumentTypeOption,
-  PaginatedResult,
-  Person,
-} from './_components/person-types';
-
-type RequestError = {
-  message?: string;
-};
-
-const PERSON_VIEW_STORAGE_KEY = 'contact-person-view-mode';
-
-type PersonViewMode = 'table' | 'cards';
-
-function formatPhone(value: string) {
-  const digits = value.replace(/\D/g, '');
-  if (digits.length === 11) {
-    return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`;
-  }
-
-  if (digits.length === 10) {
-    return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
-  }
-
-  return value;
-}
-
-function getPrimaryContact(
-  person: Person,
-  codes: string[],
-  availableContactTypes: ContactTypeOption[]
-) {
-  const upperCodes = codes.map((code) => code.toUpperCase());
-  const contactTypeIds = availableContactTypes
-    .filter((contactType) =>
-      upperCodes.includes(String(contactType.code).toUpperCase())
-    )
-    .map((contactType) => contactType.contact_type_id);
-
-  const contactMatches =
-    person.contact?.filter((contact) => {
-      const nestedCode = String(contact.contact_type?.code || '').toUpperCase();
-      return (
-        contactTypeIds.includes(contact.contact_type_id) ||
-        upperCodes.includes(nestedCode)
-      );
-    }) ?? [];
-
-  const exactMatch =
-    contactMatches.find((contact) => {
-      const nestedCode = String(contact.contact_type?.code || '').toUpperCase();
-      return (
-        (contactTypeIds.includes(contact.contact_type_id) ||
-          upperCodes.includes(nestedCode)) &&
-        contact.is_primary
-      );
-    }) ?? contactMatches[0];
-
-  if (!exactMatch?.value) {
-    return '-';
-  }
-
-  return upperCodes.some((code) => ['PHONE', 'MOBILE'].includes(code))
-    ? formatPhone(exactMatch.value)
-    : exactMatch.value;
-}
-
-function getPrimaryDisplay(
-  person: Person,
-  availableContactTypes: ContactTypeOption[]
-) {
-  const email = getPrimaryContact(person, ['EMAIL'], availableContactTypes);
-  if (email !== '-') {
-    return { icon: <Mail className="h-3 w-3" />, value: email };
-  }
-
-  const phone = getPrimaryContact(
-    person,
-    ['PHONE', 'MOBILE'],
-    availableContactTypes
-  );
-  if (phone !== '-') {
-    return { icon: <Phone className="h-3 w-3" />, value: phone };
-  }
-
-  return null;
-}
-
-function getPrimaryDocument(
-  person: Person,
-  availableDocumentTypes: DocumentTypeOption[]
-) {
-  const documents = person.document ?? [];
-  if (documents.length === 0) {
-    return null;
-  }
-
-  const preferredCodes = ['CPF', 'CNPJ', 'RG', 'IE'];
-  const primaryDocument =
-    documents.find((document) =>
-      preferredCodes.includes(
-        String(document.document_type?.code || '').toUpperCase()
-      )
-    ) ?? documents[0];
-
-  if (!primaryDocument?.value) {
-    return null;
-  }
-
-  const documentType = availableDocumentTypes.find(
-    (option) =>
-      option.document_type_id === primaryDocument.document_type_id ||
-      String(option.code).toUpperCase() ===
-        String(primaryDocument.document_type?.code || '').toUpperCase()
-  );
-
-  return {
-    label: documentType?.name || primaryDocument.document_type?.code || 'ID',
-    value: primaryDocument.value,
-  };
-}
-
-function getPrimaryAddress(person: Person) {
-  const addresses = person.address ?? [];
-  return (
-    addresses.find((address) => address.is_primary) ?? addresses[0] ?? null
-  );
-}
-
-function getAddressSummary(address: NonNullable<Person['address']>[number]) {
-  const cityState = [address.city, address.state].filter(Boolean).join(' - ');
-  return cityState || address.line1 || '-';
-}
-
-function getAddressCopyValue(address: NonNullable<Person['address']>[number]) {
-  return [
-    address.line1,
-    address.line2,
-    [address.city, address.state].filter(Boolean).join(' - '),
-    address.postal_code,
-    address.country_code,
-  ]
-    .filter(Boolean)
-    .join(', ');
-}
-
-function getPersonSecondaryLabel(
-  person: Person,
-  allowCompanyRegistration: boolean
-) {
-  if (!allowCompanyRegistration) {
-    return person.job_title || null;
-  }
-
-  if (person.type === 'company') {
-    return person.trade_name || null;
-  }
-
-  if (person.job_title) {
-    return person.employer_company?.name
-      ? `${person.job_title} · ${person.employer_company.name}`
-      : person.job_title;
-  }
-
-  return person.employer_company?.name || null;
-}
-
-function getPersonInitials(name: string) {
-  return name
-    .split(' ')
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((part) => part[0]?.toUpperCase() || '')
-    .join('');
-}
-
-function getPersonAvatarUrl(avatarId?: number | null) {
-  return typeof avatarId === 'number' && avatarId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : undefined;
-}
-
-function PersonInfoTile({
-  icon,
-  label,
-  value,
-  description,
-  copyValue,
-}: {
-  icon: ReactNode;
-  label: string;
-  value: string;
-  description?: string | null;
-  copyValue?: string | null;
-}) {
-  const hasValue = value.trim() !== '-' && value.trim() !== '';
-
-  return (
-    <div
-      className={cn(
-        'rounded-xl border border-border/70 bg-muted/25 p-2.5 transition-colors',
-        hasValue
-          ? 'text-foreground'
-          : 'border-dashed bg-muted/40 text-muted-foreground'
-      )}
-    >
-      <div className="mb-2 flex items-start justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <div
-            className={cn(
-              'flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border bg-background text-muted-foreground'
-            )}
-          >
-            {icon}
-          </div>
-          <span className="truncate text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
-            {label}
-          </span>
-        </div>
-
-        {hasValue && copyValue ? (
-          <CopyButton
-            value={copyValue}
-            className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
-          />
-        ) : null}
-      </div>
-
-      <div
-        className={cn(
-          'line-clamp-2 text-sm font-medium',
-          hasValue ? 'text-foreground' : 'text-muted-foreground'
-        )}
-      >
-        {hasValue ? value : '-'}
-      </div>
-
-      {hasValue && description ? (
-        <div className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
-          {description}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export default function PeoplePage() {
-  const t = useTranslations('contact.ContactPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const allowCompanyRegistration =
-    getSettingValue('contact-allow-company-registration') !== false;
-
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [searchInput, setSearchInput] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [typeFilter, setTypeFilter] = useState('all');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [formSheetOpen, setFormSheetOpen] = useState(false);
-  const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [personToDelete, setPersonToDelete] = useState<Person | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [viewMode, setViewMode] = useState<PersonViewMode>('table');
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedSearch(searchInput.trim());
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [searchInput]);
-
-  useEffect(() => {
-    try {
-      const savedViewMode = window.localStorage.getItem(
-        PERSON_VIEW_STORAGE_KEY
-      );
-      if (savedViewMode === 'table' || savedViewMode === 'cards') {
-        setViewMode(savedViewMode);
-      }
-    } catch {
-      // Ignore storage read failures and keep the default view.
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!allowCompanyRegistration && typeFilter === 'company') {
-      setTypeFilter('all');
-    }
-  }, [allowCompanyRegistration, typeFilter]);
-
-  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
-    queryKey: ['contact-person-contact-types', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{ data: ContactTypeOption[] }>({
-        url: '/person-contact-type?pageSize=100',
-        method: 'GET',
-      });
-
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
-    queryKey: ['contact-person-document-types', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{ data: DocumentTypeOption[] }>({
-        url: '/person-document-type?pageSize=100',
-        method: 'GET',
-      });
-
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const {
-    data: paginate = { data: [], total: 0, page: 1, pageSize: 12 },
-    isLoading,
-    refetch,
-  } = useQuery<PaginatedResult<Person>>({
-    queryKey: [
-      'contact-persons',
-      page,
-      pageSize,
-      debouncedSearch,
-      typeFilter,
-      statusFilter,
-      currentLocaleCode,
-    ],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set('page', String(page));
-      params.set('pageSize', String(pageSize));
-      if (debouncedSearch) params.set('search', debouncedSearch);
-      if (allowCompanyRegistration && typeFilter !== 'all') {
-        params.set('type', typeFilter);
-      }
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-
-      const response = await request<PaginatedResult<Person>>({
-        url: `/person?${params.toString()}`,
-        method: 'GET',
-      });
-
-      return response.data;
-    },
-    placeholderData: (previous) =>
-      previous ?? { data: [], total: 0, page: 1, pageSize: 12 },
-  });
-
-  const pageCount = Math.max(1, Math.ceil((paginate.total || 0) / pageSize));
-
-  useEffect(() => {
-    if (page > pageCount) {
-      setPage(pageCount);
-    }
-  }, [page, pageCount]);
-
-  const openCreateSheet = () => {
-    setPersonToEdit(null);
-    setFormSheetOpen(true);
-  };
-
-  const openEditSheet = (person: Person) => {
-    setPersonToEdit(person);
-    setFormSheetOpen(true);
-  };
-
-  const handleDelete = async () => {
-    if (!personToDelete) return;
-
-    try {
-      setIsDeleting(true);
-      await request({
-        url: '/person',
-        method: 'DELETE',
-        data: { ids: [personToDelete.id] },
-      });
-      toast.success(t('deleteSuccess'));
-      setDeleteDialogOpen(false);
-      setPersonToDelete(null);
-      await refetch();
-    } catch (error: unknown) {
-      const message =
-        typeof error === 'object' && error && 'message' in error
-          ? (error as RequestError).message
-          : null;
-      toast.error(message || t('deleteError'));
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') {
-      return;
-    }
-
-    setViewMode(value);
-
-    try {
-      window.localStorage.setItem(PERSON_VIEW_STORAGE_KEY, value);
-    } catch {
-      // Ignore storage write failures and keep the in-memory selection.
-    }
-  };
-
-  const columns = useMemo<ColumnDef<Person>[]>(
-    () => {
-      const baseColumns: ColumnDef<Person>[] = [
-        {
-        accessorKey: 'name',
-        header: ({ column }) => (
-          <Button
-            variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="-ml-4"
-          >
-            {t('columnName')}
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        ),
-        cell: ({ row }) => {
-          const person = row.original;
-          const primaryDisplay = getPrimaryDisplay(person, contactTypes);
-
-          return (
-            <div className="flex items-center gap-3">
-              <Avatar className="h-9 w-9">
-                <AvatarImage src={getPersonAvatarUrl(person.avatar_id)} />
-                <AvatarFallback className="bg-muted">
-                  {allowCompanyRegistration && person.type === 'company' ? (
-                    <Building2 className="h-4 w-4 text-muted-foreground" />
-                  ) : (
-                    <span className="text-xs font-semibold uppercase text-muted-foreground">
-                      {getPersonInitials(person.name) || 'NA'}
-                    </span>
-                  )}
-                </AvatarFallback>
-              </Avatar>
-              <div className="min-w-0">
-                <div className="truncate font-medium">{person.name}</div>
-                {primaryDisplay ? (
-                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                    {primaryDisplay.icon}
-                    <span className="truncate">{primaryDisplay.value}</span>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          );
-        },
-      },
-      {
-        accessorKey: 'status',
-        header: t('columnStatus'),
-        cell: ({ row }) => {
-          const status = row.getValue('status') as Person['status'];
-
-          return (
-            <Badge
-              variant="outline"
-              className={cn(
-                'border px-2.5 py-1 text-xs font-medium',
-                status === 'active'
-                  ? 'border-green-500/20 bg-green-500/10 text-green-600'
-                  : 'border-red-500/20 bg-red-500/10 text-red-600'
-              )}
-            >
-              {status === 'active' ? (
-                <>
-                  <CheckCircle2 className="mr-1 h-3 w-3" />
-                  {t('active')}
-                </>
-              ) : (
-                <>
-                  <XCircle className="mr-1 h-3 w-3" />
-                  {t('inactive')}
-                </>
-              )}
-            </Badge>
-          );
-        },
-      },
-      {
-        accessorKey: 'created_at',
-        header: ({ column }) => (
-          <Button
-            variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="-ml-4"
-          >
-            {t('createdAt')}
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        ),
-        cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
-            {formatDate(
-              row.getValue('created_at') as string,
-              getSettingValue,
-              currentLocaleCode
-            )}
-          </span>
-        ),
-      },
-      {
-        id: 'actions',
-        cell: ({ row }) => {
-          const person = row.original;
-
-          return (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8">
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => openEditSheet(person)}>
-                  <Pencil className="mr-2 h-4 w-4" />
-                  {t('buttonEditUser')}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  className="text-red-600"
-                  onClick={() => {
-                    setPersonToDelete(person);
-                    setDeleteDialogOpen(true);
-                  }}
-                >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  {t('delete')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          );
-        },
-      },
-    ];
-
-      if (allowCompanyRegistration) {
-        baseColumns.splice(1, 0, {
-        accessorKey: 'type',
-        header: t('columnType'),
-        cell: ({ row }) => {
-          const type = row.getValue('type') as Person['type'];
-
-          return (
-            <Badge
-              variant="outline"
-              className={cn(
-                'border px-2.5 py-1 text-xs font-medium',
-                type === 'individual'
-                  ? 'border-blue-500/20 bg-blue-500/10 text-blue-600'
-                  : 'border-amber-500/20 bg-amber-500/10 text-amber-600'
-              )}
-            >
-              {type === 'individual' ? (
-                <>
-                  <User className="mr-1 h-3 w-3" />
-                  {t('individual')}
-                </>
-              ) : (
-                <>
-                  <Building2 className="mr-1 h-3 w-3" />
-                  {t('company')}
-                </>
-              )}
-            </Badge>
-          );
-        },
-        });
-      }
-
-      return baseColumns;
-    },
-    [
-      allowCompanyRegistration,
-      contactTypes,
-      currentLocaleCode,
-      getSettingValue,
-      t,
-    ]
-  );
-
-  const table = useReactTable({
-    data: paginate.data || [],
-    columns,
-    state: { sorting },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-
-  const peopleRows = table.getRowModel().rows;
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: allowCompanyRegistration ? t('title') : t('titleIndividualOnly') },
-        ]}
-        title={allowCompanyRegistration ? t('title') : t('titleIndividualOnly')}
-        description={
-          allowCompanyRegistration
-            ? t('heroDescription')
-            : t('heroDescriptionIndividualOnly')
-        }
-        actions={[
-          {
-            label: t('newPerson'),
-            onClick: openCreateSheet,
-            icon: <Plus className="h-4 w-4" />,
-          },
-        ]}
-      />
-
-      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="relative flex-1">
-          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={searchInput}
-            onChange={(event) => {
-              setSearchInput(event.target.value);
-              setPage(1);
-            }}
-            placeholder={t('searchByNamePlaceholder')}
-            className="pl-9"
-          />
-        </div>
-
-        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
-          {allowCompanyRegistration ? (
-            <Select
-              value={typeFilter}
-              onValueChange={(value) => {
-                setTypeFilter(value);
-                setPage(1);
-              }}
-            >
-              <SelectTrigger className="w-full sm:w-44">
-                <SelectValue placeholder={t('filterByType')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t('allTypes')}</SelectItem>
-                <SelectItem value="individual">{t('individual')}</SelectItem>
-                <SelectItem value="company">{t('company')}</SelectItem>
-              </SelectContent>
-            </Select>
-          ) : null}
-
-          <Select
-            value={statusFilter}
-            onValueChange={(value) => {
-              setStatusFilter(value);
-              setPage(1);
-            }}
-          >
-            <SelectTrigger className="w-full sm:w-36">
-              <SelectValue placeholder={t('filterByStatus')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('allStatuses')}</SelectItem>
-              <SelectItem value="active">{t('active')}</SelectItem>
-              <SelectItem value="inactive">{t('inactive')}</SelectItem>
-            </SelectContent>
-          </Select>
-
-          <div className="flex items-center justify-between gap-3 sm:justify-start">
-            <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>
-      </div>
-
-      {isLoading ? (
-        viewMode === 'cards' ? (
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <Card key={index} className="overflow-hidden py-0">
-                <CardContent className="space-y-3 p-4">
-                  <div className="flex items-center gap-2.5">
-                    <Skeleton className="h-10 w-10 rounded-xl" />
-                    <div className="flex-1 space-y-2">
-                      <Skeleton className="h-3 w-20" />
-                      <Skeleton className="h-4 w-2/3" />
-                      <Skeleton className="h-3 w-1/2" />
-                    </div>
-                  </div>
-                  <div className="grid gap-3 sm:grid-cols-2">
-                    {Array.from({ length: 4 }).map((__, detailIndex) => (
-                      <Skeleton key={detailIndex} className="h-20 rounded-xl" />
-                    ))}
-                  </div>
-                  <Skeleton className="h-10 rounded-xl" />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="space-y-3 p-4">
-            {Array.from({ length: 5 }).map((_, index) => (
-              <Skeleton key={index} className="h-14 w-full" />
-            ))}
-          </div>
-        )
-      ) : paginate.data.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-          <Users className="mb-4 h-12 w-12 text-muted-foreground/50" />
-          <h3 className="text-lg font-medium">{t('emptyStateTitle')}</h3>
-          <p className="mb-4 max-w-sm text-sm text-muted-foreground">
-            {t('emptyStateDescription')}
-          </p>
-          <Button onClick={openCreateSheet}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('newPerson')}
-          </Button>
-        </div>
-      ) : (
-        <>
-          {viewMode === 'table' ? (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead key={header.id}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {peopleRows.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      className="cursor-pointer"
-                      onDoubleClick={() => openEditSheet(row.original)}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          ) : (
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-              {peopleRows.map((row) => {
-                const person = row.original;
-                const primaryEmail = getPrimaryContact(
-                  person,
-                  ['EMAIL'],
-                  contactTypes
-                );
-                const primaryPhone = getPrimaryContact(
-                  person,
-                  ['PHONE', 'MOBILE'],
-                  contactTypes
-                );
-                const primaryDocument = getPrimaryDocument(
-                  person,
-                  documentTypes
-                );
-                const primaryAddress = getPrimaryAddress(person);
-                const secondaryLabel = getPersonSecondaryLabel(
-                  person,
-                  allowCompanyRegistration
-                );
-
-                return (
-                  <Card
-                    key={person.id}
-                    className={cn(
-                      'group h-full overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md'
-                    )}
-                    onDoubleClick={() => openEditSheet(person)}
-                  >
-                    <CardContent className="flex h-full flex-col gap-3 p-4">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="flex min-w-0 items-start gap-2.5">
-                          <Avatar
-                            className={cn(
-                              'h-10 w-10 shrink-0 rounded-xl border',
-                              allowCompanyRegistration
-                                ? person.type === 'individual'
-                                  ? 'border-sky-500/20'
-                                  : 'border-amber-500/20'
-                                : 'border-sky-500/20'
-                            )}
-                          >
-                            <AvatarImage src={getPersonAvatarUrl(person.avatar_id)} />
-                            <AvatarFallback
-                              className={cn(
-                                'rounded-xl text-sm font-semibold uppercase',
-                                allowCompanyRegistration
-                                  ? person.type === 'individual'
-                                    ? 'bg-sky-500/8 text-sky-700 dark:text-sky-200'
-                                    : 'bg-amber-500/8 text-amber-700 dark:text-amber-200'
-                                  : 'bg-sky-500/8 text-sky-700 dark:text-sky-200'
-                              )}
-                            >
-                              {allowCompanyRegistration && person.type === 'company' ? (
-                                <Building2 className="h-4 w-4" />
-                              ) : (
-                                getPersonInitials(person.name) || 'NA'
-                              )}
-                            </AvatarFallback>
-                          </Avatar>
-
-                          <div className="min-w-0 space-y-1.5">
-                            <div className="flex flex-wrap gap-1.5">
-                              {allowCompanyRegistration ? (
-                                <Badge
-                                  variant="outline"
-                                  className={cn(
-                                    'border px-2 py-0.5 text-[11px] font-medium',
-                                    person.type === 'individual'
-                                      ? 'border-blue-500/20 bg-blue-500/10 text-blue-600'
-                                      : 'border-amber-500/20 bg-amber-500/10 text-amber-600'
-                                  )}
-                                >
-                                  {person.type === 'individual' ? (
-                                    <>
-                                      <User className="mr-1 h-3 w-3" />
-                                      {t('individual')}
-                                    </>
-                                  ) : (
-                                    <>
-                                      <Building2 className="mr-1 h-3 w-3" />
-                                      {t('company')}
-                                    </>
-                                  )}
-                                </Badge>
-                              ) : null}
-
-                              <Badge
-                                variant="outline"
-                                className={cn(
-                                  'border px-2 py-0.5 text-[11px] font-medium',
-                                  person.status === 'active'
-                                    ? 'border-green-500/20 bg-green-500/10 text-green-600'
-                                    : 'border-red-500/20 bg-red-500/10 text-red-600'
-                                )}
-                              >
-                                {person.status === 'active' ? (
-                                  <>
-                                    <CheckCircle2 className="mr-1 h-3 w-3" />
-                                    {t('active')}
-                                  </>
-                                ) : (
-                                  <>
-                                    <XCircle className="mr-1 h-3 w-3" />
-                                    {t('inactive')}
-                                  </>
-                                )}
-                              </Badge>
-                            </div>
-
-                            <div className="min-w-0">
-                              <h3 className="line-clamp-2 text-sm font-semibold text-foreground">
-                                {person.name}
-                              </h3>
-                              {secondaryLabel ? (
-                                <p className="truncate text-xs text-muted-foreground">
-                                  {secondaryLabel}
-                                </p>
-                              ) : (
-                                <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border bg-background text-[9px] font-semibold uppercase text-foreground">
-                                    {getPersonInitials(person.name) || 'NA'}
-                                  </span>
-                                  {t('personDetails')}
-                                </p>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8 rounded-lg"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => openEditSheet(person)}
-                            >
-                              <Pencil className="mr-2 h-4 w-4" />
-                              {t('buttonEditUser')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-red-600"
-                              onClick={() => {
-                                setPersonToDelete(person);
-                                setDeleteDialogOpen(true);
-                              }}
-                            >
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              {t('delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-
-                      <div className="grid gap-2 sm:grid-cols-2">
-                        <PersonInfoTile
-                          icon={<Mail className="h-4 w-4" />}
-                          label={t('columnEmail')}
-                          value={primaryEmail}
-                          copyValue={primaryEmail}
-                        />
-                        <PersonInfoTile
-                          icon={<Phone className="h-4 w-4" />}
-                          label={t('columnPhone')}
-                          value={primaryPhone}
-                          copyValue={primaryPhone}
-                        />
-                        <PersonInfoTile
-                          icon={<FileText className="h-4 w-4" />}
-                          label={primaryDocument?.label || t('documentValue')}
-                          value={primaryDocument?.value || '-'}
-                          copyValue={primaryDocument?.value}
-                        />
-                        <PersonInfoTile
-                          icon={<MapPin className="h-4 w-4" />}
-                          label={t('address')}
-                          value={
-                            primaryAddress
-                              ? getAddressSummary(primaryAddress)
-                              : '-'
-                          }
-                          description={primaryAddress?.line1}
-                          copyValue={
-                            primaryAddress
-                              ? getAddressCopyValue(primaryAddress)
-                              : null
-                          }
-                        />
-                      </div>
-
-                      <div className="mt-auto flex items-center justify-between gap-2 rounded-xl border border-border/60 bg-muted/30 px-2.5 py-2">
-                        <div className="min-w-0">
-                          <div className="flex items-center gap-1.5 text-[10px] font-medium tracking-[0.14em] text-muted-foreground uppercase">
-                            <CalendarDays className="h-3.5 w-3.5 text-muted-foreground" />
-                            {t('createdAt')}
-                          </div>
-                          <div className="truncate text-xs font-medium text-foreground">
-                            {formatDate(
-                              person.created_at,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </div>
-                        </div>
-
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => openEditSheet(person)}
-                          className="h-8 shrink-0 rounded-lg px-2.5 text-xs"
-                        >
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('buttonEditUser')}
-                        </Button>
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
-          )}
-
-          <div className="flex flex-col gap-4 border-t p-4 lg:flex-row lg:items-center lg:justify-between">
-            <div className="text-sm text-muted-foreground">
-              {t('resultsCount', { count: paginate.total })}
-            </div>
-
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-muted-foreground">
-                  {t('rowsPerPage')}
-                </span>
-                <Select
-                  value={String(pageSize)}
-                  onValueChange={(value) => {
-                    setPageSize(Number(value));
-                    setPage(1);
-                  }}
-                >
-                  <SelectTrigger className="w-20">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {[12, 20, 30, 40, 50].map((size) => (
-                      <SelectItem key={size} value={String(size)}>
-                        {size}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => setPage(1)}
-                  disabled={page <= 1}
-                >
-                  <ChevronsLeft className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() =>
-                    setPage((previous) => Math.max(1, previous - 1))
-                  }
-                  disabled={page <= 1}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <span className="min-w-32 text-center text-sm">
-                  {t('paginationLabel', {
-                    current: page,
-                    total: pageCount,
-                  })}
-                </span>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() =>
-                    setPage((previous) => Math.min(pageCount, previous + 1))
-                  }
-                  disabled={page >= pageCount}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => setPage(pageCount)}
-                  disabled={page >= pageCount}
-                >
-                  <ChevronsRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-
-      <DeletePersonDialog
-        open={deleteDialogOpen}
-        personName={personToDelete?.name}
-        isDeleting={isDeleting}
-        onOpenChange={(open) => {
-          setDeleteDialogOpen(open);
-          if (!open) {
-            setPersonToDelete(null);
-          }
-        }}
-        onConfirm={handleDelete}
-      />
-
-      <PersonFormSheet
-        open={formSheetOpen}
-        person={personToEdit}
-        contactTypes={contactTypes}
-        documentTypes={documentTypes}
-        onOpenChange={(open) => {
-          setFormSheetOpen(open);
-          if (!open) {
-            setPersonToEdit(null);
-          }
-        }}
-        onSuccess={() => {
-          void refetch();
-        }}
-      />
-    </Page>
-  );
-}
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import { Page, PageHeader } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+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 { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { formatDate } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  ArrowUpDown,
+  Building2,
+  CalendarDays,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  FileText,
+  LayoutGrid,
+  List,
+  Mail,
+  MapPin,
+  MoreHorizontal,
+  Pencil,
+  Phone,
+  Plus,
+  Search,
+  Trash2,
+  User,
+  UserCheck,
+  Users,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+import { DeletePersonDialog } from './_components/delete-person-dialog';
+import { PersonFormSheet } from './_components/person-form-sheet';
+import { PersonInteractionDialog } from './_components/person-interaction-dialog';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+  PaginatedResult,
+  Person,
+  PersonStats,
+} from './_components/person-types';
+
+type RequestError = {
+  message?: string;
+};
+
+const PERSON_VIEW_STORAGE_KEY = 'contact-person-view-mode';
+
+type PersonViewMode = 'table' | 'cards';
+
+function formatPhone(value: string) {
+  const digits = value.replace(/\D/g, '');
+  if (digits.length === 11) {
+    return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`;
+  }
+
+  if (digits.length === 10) {
+    return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
+  }
+
+  return value;
+}
+
+function getPrimaryContact(
+  person: Person,
+  codes: string[],
+  availableContactTypes: ContactTypeOption[]
+) {
+  const upperCodes = codes.map((code) => code.toUpperCase());
+  const contactTypeIds = availableContactTypes
+    .filter((contactType) =>
+      upperCodes.includes(String(contactType.code).toUpperCase())
+    )
+    .map((contactType) => contactType.contact_type_id);
+
+  const contactMatches =
+    person.contact?.filter((contact) => {
+      const nestedCode = String(contact.contact_type?.code || '').toUpperCase();
+      return (
+        contactTypeIds.includes(contact.contact_type_id) ||
+        upperCodes.includes(nestedCode)
+      );
+    }) ?? [];
+
+  const exactMatch =
+    contactMatches.find((contact) => {
+      const nestedCode = String(contact.contact_type?.code || '').toUpperCase();
+      return (
+        (contactTypeIds.includes(contact.contact_type_id) ||
+          upperCodes.includes(nestedCode)) &&
+        contact.is_primary
+      );
+    }) ?? contactMatches[0];
+
+  if (!exactMatch?.value) {
+    return '-';
+  }
+
+  return upperCodes.some((code) => ['PHONE', 'MOBILE'].includes(code))
+    ? formatPhone(exactMatch.value)
+    : exactMatch.value;
+}
+
+function getPrimaryDisplay(
+  person: Person,
+  availableContactTypes: ContactTypeOption[]
+) {
+  const email = getPrimaryContact(person, ['EMAIL'], availableContactTypes);
+  if (email !== '-') {
+    return { icon: <Mail className="h-3 w-3" />, value: email };
+  }
+
+  const phone = getPrimaryContact(
+    person,
+    ['PHONE', 'MOBILE'],
+    availableContactTypes
+  );
+  if (phone !== '-') {
+    return { icon: <Phone className="h-3 w-3" />, value: phone };
+  }
+
+  return null;
+}
+
+function getPrimaryDocument(
+  person: Person,
+  availableDocumentTypes: DocumentTypeOption[]
+) {
+  const documents = person.document ?? [];
+  if (documents.length === 0) {
+    return null;
+  }
+
+  const preferredCodes = ['CPF', 'CNPJ', 'RG', 'IE'];
+  const primaryDocument =
+    documents.find((document) =>
+      preferredCodes.includes(
+        String(document.document_type?.code || '').toUpperCase()
+      )
+    ) ?? documents[0];
+
+  if (!primaryDocument?.value) {
+    return null;
+  }
+
+  const documentType = availableDocumentTypes.find(
+    (option) =>
+      option.document_type_id === primaryDocument.document_type_id ||
+      String(option.code).toUpperCase() ===
+        String(primaryDocument.document_type?.code || '').toUpperCase()
+  );
+
+  return {
+    label: documentType?.name || primaryDocument.document_type?.code || 'ID',
+    value: primaryDocument.value,
+  };
+}
+
+function getPrimaryAddress(person: Person) {
+  const addresses = person.address ?? [];
+  return (
+    addresses.find((address) => address.is_primary) ?? addresses[0] ?? null
+  );
+}
+
+function getAddressSummary(address: NonNullable<Person['address']>[number]) {
+  const cityState = [address.city, address.state].filter(Boolean).join(' - ');
+  return cityState || address.line1 || '-';
+}
+
+function getAddressCopyValue(address: NonNullable<Person['address']>[number]) {
+  return [
+    address.line1,
+    address.line2,
+    [address.city, address.state].filter(Boolean).join(' - '),
+    address.postal_code,
+    address.country_code,
+  ]
+    .filter(Boolean)
+    .join(', ');
+}
+
+function getPersonSecondaryLabel(
+  person: Person,
+  allowCompanyRegistration: boolean
+) {
+  if (!allowCompanyRegistration) {
+    return person.job_title || null;
+  }
+
+  if (person.type === 'company') {
+    return person.trade_name || null;
+  }
+
+  if (person.job_title) {
+    return person.employer_company?.name
+      ? `${person.job_title} · ${person.employer_company.name}`
+      : person.job_title;
+  }
+
+  return person.employer_company?.name || null;
+}
+
+function getPersonInitials(name: string) {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('');
+}
+
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : undefined;
+}
+
+function PersonInfoTile({
+  icon,
+  label,
+  value,
+  description,
+  copyValue,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+  description?: string | null;
+  copyValue?: string | null;
+}) {
+  const hasValue = value.trim() !== '-' && value.trim() !== '';
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-border/70 bg-muted/25 p-2.5 transition-colors',
+        hasValue
+          ? 'text-foreground'
+          : 'border-dashed bg-muted/40 text-muted-foreground'
+      )}
+    >
+      <div className="mb-2 flex items-start justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <div
+            className={cn(
+              'flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border bg-background text-muted-foreground'
+            )}
+          >
+            {icon}
+          </div>
+          <span className="truncate text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
+            {label}
+          </span>
+        </div>
+
+        {hasValue && copyValue ? (
+          <CopyButton
+            value={copyValue}
+            className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
+          />
+        ) : null}
+      </div>
+
+      <div
+        className={cn(
+          'line-clamp-2 text-sm font-medium',
+          hasValue ? 'text-foreground' : 'text-muted-foreground'
+        )}
+      >
+        {hasValue ? value : '-'}
+      </div>
+
+      {hasValue && description ? (
+        <div className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+          {description}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default function PeoplePage() {
+  const t = useTranslations('contact.ContactPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const allowCompanyRegistration =
+    getSettingValue('contact-allow-company-registration') !== false;
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [formSheetOpen, setFormSheetOpen] = useState(false);
+  const [personToEdit, setPersonToEdit] = useState<Person | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [personToDelete, setPersonToDelete] = useState<Person | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [viewMode, setViewMode] = useState<PersonViewMode>('table');
+  const [interactionDialogOpen, setInteractionDialogOpen] = useState(false);
+  const [interactionMode, setInteractionMode] = useState<
+    'interaction' | 'followup'
+  >('interaction');
+  const [personForInteraction, setPersonForInteraction] =
+    useState<Person | null>(null);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  useEffect(() => {
+    try {
+      const savedViewMode = window.localStorage.getItem(
+        PERSON_VIEW_STORAGE_KEY
+      );
+      if (savedViewMode === 'table' || savedViewMode === 'cards') {
+        setViewMode(savedViewMode);
+      }
+    } catch {
+      // Ignore storage read failures and keep the default view.
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!allowCompanyRegistration && typeFilter === 'company') {
+      setTypeFilter('all');
+    }
+  }, [allowCompanyRegistration, typeFilter]);
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const {
+    data: stats = {
+      total: 0,
+      individual: 0,
+      company: 0,
+      active: 0,
+      inactive: 0,
+    },
+  } = useQuery<PersonStats>({
+    queryKey: ['contact-person-stats', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PersonStats>({
+        url: '/person/stats',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (previous: PersonStats | undefined) =>
+      previous ?? {
+        total: 0,
+        individual: 0,
+        company: 0,
+        active: 0,
+        inactive: 0,
+      },
+  });
+
+  const {
+    data: paginate = { data: [], total: 0, page: 1, pageSize: 12 },
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResult<Person>>({
+    queryKey: [
+      'contact-persons',
+      page,
+      pageSize,
+      debouncedSearch,
+      typeFilter,
+      statusFilter,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      if (allowCompanyRegistration && typeFilter !== 'all') {
+        params.set('type', typeFilter);
+      }
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+
+      const response = await request<PaginatedResult<Person>>({
+        url: `/person?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? { data: [], total: 0, page: 1, pageSize: 12 },
+  });
+
+  const pageCount = Math.max(1, Math.ceil((paginate.total || 0) / pageSize));
+
+  useEffect(() => {
+    if (page > pageCount) {
+      setPage(pageCount);
+    }
+  }, [page, pageCount]);
+
+  const openCreateSheet = () => {
+    setPersonToEdit(null);
+    setFormSheetOpen(true);
+  };
+
+  const openEditSheet = (person: Person) => {
+    setPersonToEdit(person);
+    setFormSheetOpen(true);
+  };
+
+  const openInteractionDialog = (
+    person: Person,
+    mode: 'interaction' | 'followup'
+  ) => {
+    setPersonForInteraction(person);
+    setInteractionMode(mode);
+    setInteractionDialogOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!personToDelete) return;
+
+    try {
+      setIsDeleting(true);
+      await request({
+        url: '/person',
+        method: 'DELETE',
+        data: { ids: [personToDelete.id] },
+      });
+      toast.success(t('deleteSuccess'));
+      setDeleteDialogOpen(false);
+      setPersonToDelete(null);
+      await refetch();
+    } catch (error: unknown) {
+      const message =
+        typeof error === 'object' && error && 'message' in error
+          ? (error as RequestError).message
+          : null;
+      toast.error(message || t('deleteError'));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+
+    try {
+      window.localStorage.setItem(PERSON_VIEW_STORAGE_KEY, value);
+    } catch {
+      // Ignore storage write failures and keep the in-memory selection.
+    }
+  };
+
+  const columns = useMemo<ColumnDef<Person>[]>(() => {
+    const baseColumns: ColumnDef<Person>[] = [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="-ml-4"
+          >
+            {t('columnName')}
+            <ArrowUpDown className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        cell: ({ row }) => {
+          const person = row.original;
+          const primaryDisplay = getPrimaryDisplay(person, contactTypes);
+
+          return (
+            <div className="flex items-center gap-3">
+              <Avatar className="h-9 w-9">
+                <AvatarImage src={getPersonAvatarUrl(person.avatar_id)} />
+                <AvatarFallback className="bg-muted">
+                  {allowCompanyRegistration && person.type === 'company' ? (
+                    <Building2 className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <span className="text-xs font-semibold uppercase text-muted-foreground">
+                      {getPersonInitials(person.name) || 'NA'}
+                    </span>
+                  )}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0">
+                <div className="truncate font-medium">{person.name}</div>
+                {primaryDisplay ? (
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                    {primaryDisplay.icon}
+                    <span className="truncate">{primaryDisplay.value}</span>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'status',
+        header: t('columnStatus'),
+        cell: ({ row }) => {
+          const status = row.getValue('status') as Person['status'];
+
+          return (
+            <Badge
+              variant="outline"
+              className={cn(
+                'border px-2.5 py-1 text-xs font-medium',
+                status === 'active'
+                  ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                  : 'border-red-500/20 bg-red-500/10 text-red-600'
+              )}
+            >
+              {status === 'active' ? (
+                <>
+                  <CheckCircle2 className="mr-1 h-3 w-3" />
+                  {t('active')}
+                </>
+              ) : (
+                <>
+                  <XCircle className="mr-1 h-3 w-3" />
+                  {t('inactive')}
+                </>
+              )}
+            </Badge>
+          );
+        },
+      },
+      {
+        accessorKey: 'created_at',
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="-ml-4"
+          >
+            {t('createdAt')}
+            <ArrowUpDown className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {formatDate(
+              row.getValue('created_at') as string,
+              getSettingValue,
+              currentLocaleCode
+            )}
+          </span>
+        ),
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => {
+          const person = row.original;
+
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => openEditSheet(person)}>
+                  <Pencil className="mr-2 h-4 w-4" />
+                  {t('buttonEditUser')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="text-red-600"
+                  onClick={() => {
+                    setPersonToDelete(person);
+                    setDeleteDialogOpen(true);
+                  }}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  {t('delete')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+      },
+    ];
+
+    if (allowCompanyRegistration) {
+      baseColumns.splice(1, 0, {
+        accessorKey: 'type',
+        header: t('columnType'),
+        cell: ({ row }) => {
+          const type = row.getValue('type') as Person['type'];
+
+          return (
+            <Badge
+              variant="outline"
+              className={cn(
+                'border px-2.5 py-1 text-xs font-medium',
+                type === 'individual'
+                  ? 'border-blue-500/20 bg-blue-500/10 text-blue-600'
+                  : 'border-amber-500/20 bg-amber-500/10 text-amber-600'
+              )}
+            >
+              {type === 'individual' ? (
+                <>
+                  <User className="mr-1 h-3 w-3" />
+                  {t('individual')}
+                </>
+              ) : (
+                <>
+                  <Building2 className="mr-1 h-3 w-3" />
+                  {t('company')}
+                </>
+              )}
+            </Badge>
+          );
+        },
+      });
+    }
+
+    return baseColumns;
+  }, [
+    allowCompanyRegistration,
+    contactTypes,
+    currentLocaleCode,
+    getSettingValue,
+    t,
+  ]);
+
+  const table = useReactTable({
+    data: paginate.data || [],
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const peopleRows = table.getRowModel().rows;
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          {
+            label: allowCompanyRegistration
+              ? t('title')
+              : t('titleIndividualOnly'),
+          },
+        ]}
+        title={allowCompanyRegistration ? t('title') : t('titleIndividualOnly')}
+        description={
+          allowCompanyRegistration
+            ? t('heroDescription')
+            : t('heroDescriptionIndividualOnly')
+        }
+        actions={[
+          {
+            label: t('newPerson'),
+            onClick: openCreateSheet,
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        <Card className="py-0">
+          <CardContent className="flex items-center justify-between p-4">
+            <div>
+              <p className="text-xs text-muted-foreground">{t('statsTotal')}</p>
+              <p className="text-xl font-semibold">{stats.total}</p>
+            </div>
+            <Users className="h-5 w-5 text-muted-foreground" />
+          </CardContent>
+        </Card>
+        <Card className="py-0">
+          <CardContent className="flex items-center justify-between p-4">
+            <div>
+              <p className="text-xs text-muted-foreground">
+                {t('statsActive')}
+              </p>
+              <p className="text-xl font-semibold">{stats.active}</p>
+            </div>
+            <CheckCircle2 className="h-5 w-5 text-green-600" />
+          </CardContent>
+        </Card>
+        <Card className="py-0">
+          <CardContent className="flex items-center justify-between p-4">
+            <div>
+              <p className="text-xs text-muted-foreground">
+                {t('statsIndividual')}
+              </p>
+              <p className="text-xl font-semibold">{stats.individual}</p>
+            </div>
+            <UserCheck className="h-5 w-5 text-blue-600" />
+          </CardContent>
+        </Card>
+        <Card className="py-0">
+          <CardContent className="flex items-center justify-between p-4">
+            <div>
+              <p className="text-xs text-muted-foreground">
+                {t('statsCompany')}
+              </p>
+              <p className="text-xl font-semibold">{stats.company}</p>
+            </div>
+            <Building2 className="h-5 w-5 text-amber-600" />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={searchInput}
+            onChange={(event) => {
+              setSearchInput(event.target.value);
+              setPage(1);
+            }}
+            placeholder={t('searchByNamePlaceholder')}
+            className="pl-9"
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+          {allowCompanyRegistration ? (
+            <Select
+              value={typeFilter}
+              onValueChange={(value) => {
+                setTypeFilter(value);
+                setPage(1);
+              }}
+            >
+              <SelectTrigger className="w-full sm:w-44">
+                <SelectValue placeholder={t('filterByType')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t('allTypes')}</SelectItem>
+                <SelectItem value="individual">{t('individual')}</SelectItem>
+                <SelectItem value="company">{t('company')}</SelectItem>
+              </SelectContent>
+            </Select>
+          ) : null}
+
+          <Select
+            value={statusFilter}
+            onValueChange={(value) => {
+              setStatusFilter(value);
+              setPage(1);
+            }}
+          >
+            <SelectTrigger className="w-full sm:w-36">
+              <SelectValue placeholder={t('filterByStatus')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('allStatuses')}</SelectItem>
+              <SelectItem value="active">{t('active')}</SelectItem>
+              <SelectItem value="inactive">{t('inactive')}</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex items-center justify-between gap-3 sm:justify-start">
+            <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>
+      </div>
+
+      {isLoading ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Card key={index} className="overflow-hidden py-0">
+                <CardContent className="space-y-3 p-4">
+                  <div className="flex items-center gap-2.5">
+                    <Skeleton className="h-10 w-10 rounded-xl" />
+                    <div className="flex-1 space-y-2">
+                      <Skeleton className="h-3 w-20" />
+                      <Skeleton className="h-4 w-2/3" />
+                      <Skeleton className="h-3 w-1/2" />
+                    </div>
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {Array.from({ length: 4 }).map((__, detailIndex) => (
+                      <Skeleton key={detailIndex} className="h-20 rounded-xl" />
+                    ))}
+                  </div>
+                  <Skeleton className="h-10 rounded-xl" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-3 p-4">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Skeleton key={index} className="h-14 w-full" />
+            ))}
+          </div>
+        )
+      ) : paginate.data.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <Users className="mb-4 h-12 w-12 text-muted-foreground/50" />
+          <h3 className="text-lg font-medium">{t('emptyStateTitle')}</h3>
+          <p className="mb-4 max-w-sm text-sm text-muted-foreground">
+            {t('emptyStateDescription')}
+          </p>
+          <Button onClick={openCreateSheet}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t('newPerson')}
+          </Button>
+        </div>
+      ) : (
+        <>
+          {viewMode === 'table' ? (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {peopleRows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      className="cursor-pointer"
+                      onDoubleClick={() => openEditSheet(row.original)}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              {peopleRows.map((row) => {
+                const person = row.original;
+                const primaryEmail = getPrimaryContact(
+                  person,
+                  ['EMAIL'],
+                  contactTypes
+                );
+                const primaryPhone = getPrimaryContact(
+                  person,
+                  ['PHONE', 'MOBILE'],
+                  contactTypes
+                );
+                const primaryDocument = getPrimaryDocument(
+                  person,
+                  documentTypes
+                );
+                const primaryAddress = getPrimaryAddress(person);
+                const secondaryLabel = getPersonSecondaryLabel(
+                  person,
+                  allowCompanyRegistration
+                );
+
+                return (
+                  <Card
+                    key={person.id}
+                    className={cn(
+                      'group h-full overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md'
+                    )}
+                    onDoubleClick={() => openEditSheet(person)}
+                  >
+                    <CardContent className="flex h-full flex-col gap-3 p-4">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="flex min-w-0 items-start gap-2.5">
+                          <Avatar
+                            className={cn(
+                              'h-10 w-10 shrink-0 rounded-xl border',
+                              allowCompanyRegistration
+                                ? person.type === 'individual'
+                                  ? 'border-sky-500/20'
+                                  : 'border-amber-500/20'
+                                : 'border-sky-500/20'
+                            )}
+                          >
+                            <AvatarImage
+                              src={getPersonAvatarUrl(person.avatar_id)}
+                            />
+                            <AvatarFallback
+                              className={cn(
+                                'rounded-xl text-sm font-semibold uppercase',
+                                allowCompanyRegistration
+                                  ? person.type === 'individual'
+                                    ? 'bg-sky-500/8 text-sky-700 dark:text-sky-200'
+                                    : 'bg-amber-500/8 text-amber-700 dark:text-amber-200'
+                                  : 'bg-sky-500/8 text-sky-700 dark:text-sky-200'
+                              )}
+                            >
+                              {allowCompanyRegistration &&
+                              person.type === 'company' ? (
+                                <Building2 className="h-4 w-4" />
+                              ) : (
+                                getPersonInitials(person.name) || 'NA'
+                              )}
+                            </AvatarFallback>
+                          </Avatar>
+
+                          <div className="min-w-0 space-y-1.5">
+                            <div className="flex flex-wrap gap-1.5">
+                              {allowCompanyRegistration ? (
+                                <Badge
+                                  variant="outline"
+                                  className={cn(
+                                    'border px-2 py-0.5 text-[11px] font-medium',
+                                    person.type === 'individual'
+                                      ? 'border-blue-500/20 bg-blue-500/10 text-blue-600'
+                                      : 'border-amber-500/20 bg-amber-500/10 text-amber-600'
+                                  )}
+                                >
+                                  {person.type === 'individual' ? (
+                                    <>
+                                      <User className="mr-1 h-3 w-3" />
+                                      {t('individual')}
+                                    </>
+                                  ) : (
+                                    <>
+                                      <Building2 className="mr-1 h-3 w-3" />
+                                      {t('company')}
+                                    </>
+                                  )}
+                                </Badge>
+                              ) : null}
+
+                              <Badge
+                                variant="outline"
+                                className={cn(
+                                  'border px-2 py-0.5 text-[11px] font-medium',
+                                  person.status === 'active'
+                                    ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                                    : 'border-red-500/20 bg-red-500/10 text-red-600'
+                                )}
+                              >
+                                {person.status === 'active' ? (
+                                  <>
+                                    <CheckCircle2 className="mr-1 h-3 w-3" />
+                                    {t('active')}
+                                  </>
+                                ) : (
+                                  <>
+                                    <XCircle className="mr-1 h-3 w-3" />
+                                    {t('inactive')}
+                                  </>
+                                )}
+                              </Badge>
+                            </div>
+
+                            <div className="min-w-0">
+                              <h3 className="line-clamp-2 text-sm font-semibold text-foreground">
+                                {person.name}
+                              </h3>
+                              {secondaryLabel ? (
+                                <p className="truncate text-xs text-muted-foreground">
+                                  {secondaryLabel}
+                                </p>
+                              ) : (
+                                <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border bg-background text-[9px] font-semibold uppercase text-foreground">
+                                    {getPersonInitials(person.name) || 'NA'}
+                                  </span>
+                                  {t('personDetails')}
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 rounded-lg"
+                            >
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              onClick={() =>
+                                openInteractionDialog(person, 'interaction')
+                              }
+                            >
+                              <Phone className="mr-2 h-4 w-4" />
+                              {t('registerInteraction')}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() =>
+                                openInteractionDialog(person, 'followup')
+                              }
+                            >
+                              <CalendarDays className="mr-2 h-4 w-4" />
+                              {t('scheduleFollowup')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              onClick={() => openEditSheet(person)}
+                            >
+                              <Pencil className="mr-2 h-4 w-4" />
+                              {t('buttonEditUser')}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              className="text-red-600"
+                              onClick={() => {
+                                setPersonToDelete(person);
+                                setDeleteDialogOpen(true);
+                              }}
+                            >
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              {t('delete')}
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+
+                      <div className="grid gap-2 sm:grid-cols-2">
+                        <PersonInfoTile
+                          icon={<Mail className="h-4 w-4" />}
+                          label={t('columnEmail')}
+                          value={primaryEmail}
+                          copyValue={primaryEmail}
+                        />
+                        <PersonInfoTile
+                          icon={<Phone className="h-4 w-4" />}
+                          label={t('columnPhone')}
+                          value={primaryPhone}
+                          copyValue={primaryPhone}
+                        />
+                        <PersonInfoTile
+                          icon={<FileText className="h-4 w-4" />}
+                          label={primaryDocument?.label || t('documentValue')}
+                          value={primaryDocument?.value || '-'}
+                          copyValue={primaryDocument?.value}
+                        />
+                        <PersonInfoTile
+                          icon={<MapPin className="h-4 w-4" />}
+                          label={t('address')}
+                          value={
+                            primaryAddress
+                              ? getAddressSummary(primaryAddress)
+                              : '-'
+                          }
+                          description={primaryAddress?.line1}
+                          copyValue={
+                            primaryAddress
+                              ? getAddressCopyValue(primaryAddress)
+                              : null
+                          }
+                        />
+                      </div>
+
+                      <div className="mt-auto flex items-center justify-between gap-2 rounded-xl border border-border/60 bg-muted/30 px-2.5 py-2">
+                        <div className="min-w-0">
+                          <div className="flex items-center gap-1.5 text-[10px] font-medium tracking-[0.14em] text-muted-foreground uppercase">
+                            <CalendarDays className="h-3.5 w-3.5 text-muted-foreground" />
+                            {t('createdAt')}
+                          </div>
+                          <div className="truncate text-xs font-medium text-foreground">
+                            {formatDate(
+                              person.created_at,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </div>
+                          <div className="truncate text-[11px] text-muted-foreground">
+                            {t('owner')}:{' '}
+                            {person.owner_user?.name || t('unassigned')}
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() =>
+                              openInteractionDialog(person, 'interaction')
+                            }
+                            className="h-8 shrink-0 rounded-lg px-2.5 text-xs"
+                          >
+                            <Phone className="mr-2 h-4 w-4" />
+                            {t('register')}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => openEditSheet(person)}
+                            className="h-8 shrink-0 rounded-lg px-2.5 text-xs"
+                          >
+                            <Pencil className="mr-2 h-4 w-4" />
+                            {t('buttonEditUser')}
+                          </Button>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+
+          <div className="flex flex-col gap-4 border-t p-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="text-sm text-muted-foreground">
+              {t('resultsCount', { count: paginate.total })}
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">
+                  {t('rowsPerPage')}
+                </span>
+                <Select
+                  value={String(pageSize)}
+                  onValueChange={(value) => {
+                    setPageSize(Number(value));
+                    setPage(1);
+                  }}
+                >
+                  <SelectTrigger className="w-20">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[12, 20, 30, 40, 50].map((size) => (
+                      <SelectItem key={size} value={String(size)}>
+                        {size}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setPage(1)}
+                  disabled={page <= 1}
+                >
+                  <ChevronsLeft className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    setPage((previous) => Math.max(1, previous - 1))
+                  }
+                  disabled={page <= 1}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="min-w-32 text-center text-sm">
+                  {t('paginationLabel', {
+                    current: page,
+                    total: pageCount,
+                  })}
+                </span>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    setPage((previous) => Math.min(pageCount, previous + 1))
+                  }
+                  disabled={page >= pageCount}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setPage(pageCount)}
+                  disabled={page >= pageCount}
+                >
+                  <ChevronsRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      <DeletePersonDialog
+        open={deleteDialogOpen}
+        personName={personToDelete?.name}
+        isDeleting={isDeleting}
+        onOpenChange={(open) => {
+          setDeleteDialogOpen(open);
+          if (!open) {
+            setPersonToDelete(null);
+          }
+        }}
+        onConfirm={handleDelete}
+      />
+
+      <PersonFormSheet
+        open={formSheetOpen}
+        person={personToEdit}
+        contactTypes={contactTypes}
+        documentTypes={documentTypes}
+        onOpenChange={(open) => {
+          setFormSheetOpen(open);
+          if (!open) {
+            setPersonToEdit(null);
+          }
+        }}
+        onSuccess={() => {
+          void refetch();
+        }}
+      />
+
+      <PersonInteractionDialog
+        open={interactionDialogOpen}
+        person={personForInteraction}
+        mode={interactionMode}
+        onOpenChange={(open) => {
+          setInteractionDialogOpen(open);
+          if (!open) {
+            setPersonForInteraction(null);
+            setInteractionMode('interaction');
+          }
+        }}
+        onSuccess={() => {
+          void refetch();
+        }}
+      />
+    </Page>
+  );
+}