@hed-hog/contact 0.0.266 → 0.0.270

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

@@ -1,1530 +1,1209 @@
-'use client';
-import { CopyButton } from '@/components/copy-button';
-import {
-  PageHeader,
-  PaginationFooter,
-  SearchBar,
-  StatsCards,
-} from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { COUNTRIES } from '@/constants/countries';
-import { formatDate } from '@/lib/format-date';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Building2,
-  Edit2,
-  FileText,
-  Loader2,
-  Mail,
-  MapPin,
-  MoreHorizontal,
-  Phone,
-  Trash2,
-  User,
-  UserPlus,
-  Users,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-type PaginatedResult<T> = {
-  data: T[];
-  total: number;
-  page: number;
-  pageSize: number;
-};
-
-type Person = {
-  id: number;
-  name: string;
-  type: 'individual' | 'company';
-  status: 'active' | 'inactive';
-  created_at: string;
-  contact?: Array<{
-    id: number;
-    value: string;
-    is_primary: boolean;
-    contact_type_id: number;
-    contact_type?: {
-      id: number;
-      code: string;
-    };
-  }>;
-  address?: Array<{
-    id: number;
-    line1: string;
-    city: string;
-    state: string;
-    is_primary: boolean;
-    address_type_id: number;
-    postal_code: string;
-    country_code: string;
-    address_type?: {
-      id: number;
-      code: string;
-    };
-  }>;
-  document?: Array<{
-    id: number;
-    value: string;
-    document_type_id: number;
-    document_type?: {
-      id: number;
-      code: string;
-    };
-  }>;
-};
-
-export default function ContactPage() {
-  const t = useTranslations('contact.ContactPage');
-
-  const personSchema = z.object({
-    name: z.string().min(1, t('nameRequired')),
-    type: z.enum(['individual', 'company']),
-    status: z.enum(['active', 'inactive']).optional(),
-  });
-
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [editingPerson, setEditingPerson] = useState<Person | null>(null);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [personToDelete, setPersonToDelete] = useState<Person | null>(null);
-
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [typeFilter, setTypeFilter] = useState('all');
-  const [statusFilter, setStatusFilter] = useState('all');
-
-  const { data: contactTypes = [] } = useQuery({
-    queryKey: ['contact-types-all', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{
-        data: Array<{
-          id: number;
-          code: string;
-          contact_type_id: number;
-          name: string;
-        }>;
-      }>({
-        url: '/person-contact-type?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-  });
-
-  const { data: addressTypes = [] } = useQuery({
-    queryKey: ['address-types-all', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{
-        data: Array<{
-          id: number;
-          address_type_id: number;
-          code: string;
-          name: string;
-        }>;
-      }>({
-        url: '/person-address-type?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-  });
-
-  const { data: documentTypes = [] } = useQuery({
-    queryKey: ['document-types-all', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{
-        data: Array<{
-          id: number;
-          document_type_id: number;
-          code: string;
-          name: string;
-        }>;
-      }>({
-        url: '/person-document-type?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-  });
-
-  const {
-    data: stats = {
-      total: 0,
-      individual: 0,
-      company: 0,
-      active: 0,
-      inactive: 0,
-    },
-    refetch: refetchStats,
-  } = useQuery({
-    queryKey: ['person-stats', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{
-        total: number;
-        individual: number;
-        company: number;
-        active: number;
-        inactive: number;
-      }>({
-        url: '/person/stats',
-        method: 'GET',
-      });
-      return response.data;
-    },
-  });
-
-  const {
-    data: paginate = { data: [], total: 0, page: 1, pageSize: 12 },
-    isLoading,
-    refetch,
-  } = useQuery<PaginatedResult<Person>>({
-    queryKey: [
-      'persons',
-      page,
-      pageSize,
-      searchQuery,
-      typeFilter,
-      statusFilter,
-      currentLocaleCode,
-    ],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set('page', String(page));
-      params.set('pageSize', String(pageSize));
-      if (searchQuery) params.set('search', searchQuery);
-      if (typeFilter && typeFilter !== 'all') params.set('type', typeFilter);
-      if (statusFilter && statusFilter !== 'all')
-        params.set('status', statusFilter);
-
-      const response = await request<PaginatedResult<Person>>({
-        url: `/person?${params.toString()}`,
-        method: 'GET',
-      });
-
-      return response.data;
-    },
-  });
-
-  const form = useForm<z.infer<typeof personSchema>>({
-    resolver: zodResolver(personSchema),
-    defaultValues: {
-      name: '',
-      type: 'individual',
-      status: 'active',
-    },
-  });
-
-  async function fetchViaCep(cep: string) {
-    try {
-      const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
-      if (!response.ok) return null;
-      const data = await response.json();
-      if (data.erro) return null;
-      return data;
-    } catch {
-      return null;
-    }
-  }
-
-  const editForm = useForm<z.infer<typeof personSchema>>({
-    resolver: zodResolver(personSchema),
-  });
-  const [contacts, setContacts] = useState<any[]>([]);
-  const [addresses, setAddresses] = useState<any[]>([]);
-  const [documents, setDocuments] = useState<any[]>([]);
-  const [loadingCEP, setLoadingCEP] = useState<{ [key: number]: boolean }>({});
-
-  const openEditSheet = (person: Person) => {
-    setEditingPerson(person);
-    editForm.reset({
-      name: person.name,
-      type: person.type,
-      status: person.status,
-    });
-    setContacts(person.contact ? [...person.contact] : []);
-    setAddresses(person.address ? [...person.address] : []);
-    setDocuments(person.document ? [...person.document] : []);
-    setIsSheetOpen(true);
-  };
-
-  const handleContactChange = (idx: number, field: string, value: any) => {
-    setContacts((prev) =>
-      prev.map((c, i) => (i === idx ? { ...c, [field]: value } : c))
-    );
-  };
-  const handleAddContact = () => {
-    setContacts((prev) => [
-      ...prev,
-      {
-        id: undefined,
-        value: '',
-        is_primary: false,
-        contact_type_id: contactTypes[0]?.contact_type_id || 1,
-      },
-    ]);
-  };
-  const handleRemoveContact = (idx: number) => {
-    setContacts((prev) => prev.filter((_, i) => i !== idx));
-  };
-
-  const handleAddressChange = (idx: number, field: string, value: any) => {
-    setAddresses((prev) =>
-      prev.map((a, i) => (i === idx ? { ...a, [field]: value } : a))
-    );
-  };
-  const handleAddAddress = () => {
-    setAddresses((prev) => [
-      ...prev,
-      {
-        id: undefined,
-        line1: '',
-        line2: '',
-        city: '',
-        state: '',
-        is_primary: false,
-        address_type_id: addressTypes[0]?.address_type_id || 1,
-        country_code: 'BRA',
-        postal_code: '',
-      },
-    ]);
-  };
-  const handleRemoveAddress = (idx: number) => {
-    setAddresses((prev) => prev.filter((_, i) => i !== idx));
-  };
-
-  const handleDocumentChange = (idx: number, field: string, value: any) => {
-    setDocuments((prev) =>
-      prev.map((d, i) => (i === idx ? { ...d, [field]: value } : d))
-    );
-  };
-  const handleAddDocument = () => {
-    setDocuments((prev) => [
-      ...prev,
-      {
-        id: undefined,
-        value: '',
-        document_type_id: documentTypes[0]?.document_type_id || 1,
-      },
-    ]);
-  };
-  const handleRemoveDocument = (idx: number) => {
-    setDocuments((prev) => prev.filter((_, i) => i !== idx));
-  };
-
-  const handleCEP = async (e: any, idx: number) => {
-    let v = e.target.value.replace(/\D/g, '');
-    if (v.length > 5) v = v.slice(0, 5) + '-' + v.slice(5, 8);
-    handleAddressChange(idx, 'postal_code', v);
-    const rawCep = v.replace(/\D/g, '');
-    if (rawCep.length === 8) {
-      setLoadingCEP((prev) => ({ ...prev, [idx]: true }));
-      const data = await fetchViaCep(rawCep);
-      if (data) {
-        handleAddressChange(idx, 'line1', data.logradouro || '');
-        handleAddressChange(idx, 'city', data.localidade || '');
-        handleAddressChange(idx, 'state', data.uf || '');
-      }
-      setLoadingCEP((prev) => ({ ...prev, [idx]: false }));
-    }
-  };
-
-  const onEdit = async (values: z.infer<typeof personSchema>) => {
-    if (!editingPerson) return;
-    try {
-      const addressesWithLine2 = addresses.map((a) => ({
-        ...a,
-        line2: a.line2 || '',
-      }));
-      await request({
-        url: `/person/${editingPerson.id}`,
-        method: 'PATCH',
-        data: {
-          name: values.name,
-          type: values.type,
-          status: values.status,
-          contacts: contacts,
-          addresses: addressesWithLine2,
-          documents: documents,
-        },
-      });
-      toast.success(t('updateSuccess'));
-      setIsSheetOpen(false);
-      setEditingPerson(null);
-      editForm.reset();
-      refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('updateError'));
-    }
-  };
-
-  const onSubmit = async (values: z.infer<typeof personSchema>) => {
-    try {
-      await request({
-        url: '/person',
-        method: 'POST',
-        data: values,
-      });
-      toast.success(t('createSuccess'));
-      setIsDialogOpen(false);
-      form.reset();
-      refetch();
-      refetchStats();
-    } catch (error: any) {
-      toast.error(error?.message || t('createError'));
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!personToDelete) return;
-    try {
-      await request({
-        url: '/person',
-        method: 'DELETE',
-        data: { ids: [personToDelete.id] },
-      });
-      toast.success(t('deleteSuccess'));
-      setDeleteDialogOpen(false);
-      setPersonToDelete(null);
-      refetch();
-      refetchStats();
-    } catch (error: any) {
-      toast.error(error?.message || t('deleteError'));
-    }
-  };
-
-  const statsCards = [
-    {
-      title: t('statsTotal'),
-      value: stats.total,
-      icon: <Users className="h-4 w-4" />,
-    },
-    {
-      title: t('statsIndividual'),
-      value: stats.individual,
-      icon: <User className="h-4 w-4" />,
-    },
-    {
-      title: t('statsCompany'),
-      value: stats.company,
-      icon: <Building2 className="h-4 w-4" />,
-    },
-    {
-      title: t('statsActive'),
-      value: stats.active,
-      icon: <UserPlus className="h-4 w-4" />,
-    },
-  ];
-
-  const getPrimaryContact = (person: Person, typeCode: string) => {
-    if (!person.contact?.length) return '-';
-    const code = typeCode.toUpperCase();
-    const type = contactTypes.find((ct: any) => ct.code === code);
-    if (!type) return '-';
-    const contact = person.contact.find(
-      (c) => c.contact_type_id === type.contact_type_id && c.is_primary
-    );
-    if (!contact?.value) return '-';
-
-    if (code === 'PHONE') {
-      const digits = contact.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 contact.value;
-  };
-
-  const getPrimaryAddress = (person: Person) => {
-    const address = person.address?.find((a) => a.is_primary);
-    return address ? `${address.city}, ${address.state}` : '-';
-  };
-
-  const getContactTypeName = (contactTypeId: number) => {
-    const contactType = contactTypes.find(
-      (ct: any) => ct.contact_type_id === contactTypeId
-    );
-    return contactType?.name || t('unknown');
-  };
-
-  const getAddressTypeName = (addressTypeId: number) => {
-    const addressType = addressTypes.find(
-      (at: any) => at.address_type_id === addressTypeId
-    );
-    return addressType?.name || t('unknown');
-  };
-
-  const getDocumentTypeName = (documentTypeId: number) => {
-    const documentType = documentTypes.find(
-      (dt: any) => dt.document_type_id === documentTypeId
-    );
-    return documentType?.name || t('unknown');
-  };
-
-  return (
-    <div className="flex flex-col h-screen px-4">
-      <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: t('description') },
-        ]}
-        actions={[
-          {
-            label: t('addNew'),
-            onClick: () => setIsDialogOpen(true),
-            variant: 'default',
-          },
-        ]}
-        title={t('title')}
-        description={t('description')}
-      />
-
-      <StatsCards stats={statsCards} />
-
-      <div className="mb-4 flex flex-col gap-4 md:flex-row mt-4">
-        <SearchBar
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          onSearch={() => refetch()}
-          placeholder={t('searchPlaceholder')}
-        />
-        <Select value={typeFilter} onValueChange={setTypeFilter}>
-          <SelectTrigger className="w-full md:w-[200px]">
-            <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>
-        <Select value={statusFilter} onValueChange={setStatusFilter}>
-          <SelectTrigger className="w-full md:w-[200px]">
-            <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>
-
-      <div className="rounded-md border mb-4">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('columnId')}</TableHead>
-              <TableHead>{t('columnName')}</TableHead>
-              <TableHead>{t('columnType')}</TableHead>
-              <TableHead>{t('columnStatus')}</TableHead>
-              <TableHead>{t('columnEmail')}</TableHead>
-              <TableHead>{t('columnPhone')}</TableHead>
-              <TableHead>{t('columnPlace')}</TableHead>
-              <TableHead className="text-right">{t('columnActions')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
-              <TableRow>
-                <TableCell colSpan={7} className="text-center">
-                  {t('loading')}
-                </TableCell>
-              </TableRow>
-            ) : paginate?.data?.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={7} className="text-center">
-                  {t('emptyState')}
-                </TableCell>
-              </TableRow>
-            ) : (
-              paginate?.data?.map((person: Person) => (
-                <TableRow
-                  key={person.id}
-                  onDoubleClick={() => openEditSheet(person)}
-                  className="cursor-pointer"
-                >
-                  <TableCell className="font-medium">#{person.id}</TableCell>
-                  <TableCell className="font-medium">
-                    <div className="flex items-center gap-2">
-                      {person.name || '-'}
-                      {person.name && <CopyButton value={person.name} />}
-                    </div>
-                  </TableCell>
-
-                  <TableCell>
-                    <Badge
-                      variant={
-                        person.type === 'individual' ? 'default' : 'secondary'
-                      }
-                    >
-                      {person.type === 'individual' ? (
-                        <>
-                          <User className="mr-1 h-3 w-3" />
-                          {t('individual')}
-                        </>
-                      ) : (
-                        <>
-                          <Building2 className="mr-1 h-3 w-3" />
-                          {t('company')}
-                        </>
-                      )}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge
-                      variant={
-                        person.status === 'active' ? 'default' : 'outline'
-                      }
-                    >
-                      {person.status === 'active' ? t('active') : t('inactive')}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <Mail className="h-4 w-4 text-muted-foreground" />
-                      {getPrimaryContact(person, 'email')}
-                      {getPrimaryContact(person, 'email') &&
-                        getPrimaryContact(person, 'email') !== '-' && (
-                          <CopyButton
-                            value={getPrimaryContact(person, 'email')}
-                          />
-                        )}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <Phone className="h-4 w-4 text-muted-foreground" />
-                      {getPrimaryContact(person, 'phone')}
-                      {getPrimaryContact(person, 'phone') &&
-                        getPrimaryContact(person, 'phone') !== '-' && (
-                          <CopyButton
-                            value={getPrimaryContact(person, 'phone')}
-                          />
-                        )}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <MapPin className="h-4 w-4 text-muted-foreground" />
-                      {getPrimaryAddress(person)}
-                      {getPrimaryAddress(person) &&
-                        getPrimaryAddress(person) !== '-' && (
-                          <CopyButton value={getPrimaryAddress(person)} />
-                        )}
-                    </div>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuLabel>{t('actions')}</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem onClick={() => openEditSheet(person)}>
-                          <Edit2 className="mr-2 h-4 w-4" />
-                          {t('buttonEditUser')}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setPersonToDelete(person);
-                            setDeleteDialogOpen(true);
-                          }}
-                          className="text-destructive"
-                        >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t('delete')}
-                        </DropdownMenuItem>
-                        {/* Dialog de confirmação de exclusão */}
-                        <Dialog open={deleteDialogOpen}>
-                          <DialogContent className="max-w-md">
-                            <DialogHeader>
-                              <DialogTitle>
-                                {t('deleteConfirmTitle')}
-                              </DialogTitle>
-                              <DialogDescription>
-                                {t('deleteConfirmDescription')}
-                              </DialogDescription>
-                            </DialogHeader>
-                            <div className="flex justify-end gap-2 pt-4">
-                              <Button
-                                variant="outline"
-                                onClick={() => {
-                                  setDeleteDialogOpen(false);
-                                  setPersonToDelete(null);
-                                }}
-                              >
-                                {t('cancel')}
-                              </Button>
-                              <Button
-                                variant="destructive"
-                                onClick={handleDelete}
-                              >
-                                {t('delete')}
-                              </Button>
-                            </div>
-                          </DialogContent>
-                        </Dialog>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <PaginationFooter
-        currentPage={page}
-        pageSize={pageSize}
-        totalItems={paginate?.total || 0}
-        onPageChange={setPage}
-        onPageSizeChange={setPageSize}
-        pageSizeOptions={[10, 20, 30, 40, 50]}
-      />
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('dialogCreateTitle')}</DialogTitle>
-            <DialogDescription>
-              {t('dialogCreateDescription')}
-            </DialogDescription>
-          </DialogHeader>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="type"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('typeOfPerson')}</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('selectType')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="individual">
-                          <div className="flex items-center gap-2">
-                            <User className="h-4 w-4" />
-                            {t('individual')}
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="company">
-                          <div className="flex items-center gap-2">
-                            <Building2 className="h-4 w-4" />
-                            {t('company')}
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('name')}</FormLabel>
-                    <FormControl>
-                      <Input {...field} placeholder={t('namePlaceholder')} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="status"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('status')}</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue placeholder={t('selectStatus')} />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="active">{t('active')}</SelectItem>
-                        <SelectItem value="inactive">
-                          {t('inactive')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsDialogOpen(false)}
-                >
-                  {t('cancel')}
-                </Button>
-                <Button type="submit">{t('createPerson')}</Button>
-              </div>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <SheetContent className="sm:max-w-lg">
-          <SheetHeader>
-            <SheetTitle>{t('editPerson')}</SheetTitle>
-            <SheetDescription>{t('editPersonDescription')}</SheetDescription>
-          </SheetHeader>
-          <Form {...editForm}>
-            <form
-              onSubmit={editForm.handleSubmit(onEdit)}
-              className="mt-4 px-4 space-y-0"
-            >
-              <Tabs defaultValue="detalhes" className="w-full">
-                <TabsList className="w-full">
-                  <TabsTrigger value="detalhes">
-                    {t('editTabDetails')}
-                  </TabsTrigger>
-                  <TabsTrigger value="dados">
-                    {t('editTabBaseData')}
-                  </TabsTrigger>
-                  <TabsTrigger value="contatos">
-                    {t('editTabContacts')}
-                  </TabsTrigger>
-                  <TabsTrigger value="enderecos">
-                    {t('editTabAddresses')}
-                  </TabsTrigger>
-                  <TabsTrigger value="documentos">
-                    {t('editTabDocuments')}
-                  </TabsTrigger>
-                </TabsList>
-                <TabsContent value="detalhes">
-                  <Card className="mt-4">
-                    <CardContent className="space-y-6 overflow-y-auto max-h-[62vh]">
-                      <div>
-                        <h3 className="mb-3 text-lg font-semibold">
-                          {t('dialogBasicInformationTitle')}
-                        </h3>
-                        <div className="grid gap-3 rounded-lg border p-4">
-                          <div className="flex items-center justify-between">
-                            <span className="text-sm text-muted-foreground">
-                              {t('type')}:
-                            </span>
-                            <Badge variant="outline">
-                              {editingPerson?.type === 'individual' ? (
-                                <>
-                                  <User className="mr-1 h-3 w-3" />
-                                  {t('individual')}
-                                </>
-                              ) : (
-                                <>
-                                  <Building2 className="mr-1 h-3 w-3" />
-                                  {t('company')}
-                                </>
-                              )}
-                            </Badge>
-                          </div>
-                          <div className="flex items-center justify-between">
-                            <span className="text-sm text-muted-foreground">
-                              {t('name')}:
-                            </span>
-                            <div className="flex items-center gap-2">
-                              <span className="text-sm">
-                                {editingPerson?.name || '-'}
-                              </span>
-                              {editingPerson?.name && (
-                                <CopyButton value={editingPerson.name} />
-                              )}
-                            </div>
-                          </div>
-                          <div className="flex items-center justify-between">
-                            <span className="text-sm text-muted-foreground">
-                              {t('status')}:
-                            </span>
-                            <Badge variant="outline">
-                              {editingPerson?.status === 'active'
-                                ? t('active')
-                                : t('inactive')}
-                            </Badge>
-                          </div>
-                          <div className="flex items-center justify-between">
-                            <span className="text-sm text-muted-foreground">
-                              {t('createdAt')}:
-                            </span>
-                            <span className="text-sm">
-                              {editingPerson?.created_at &&
-                                formatDate(
-                                  editingPerson.created_at,
-                                  getSettingValue,
-                                  currentLocaleCode
-                                )}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div>
-                        <h3 className="mb-3 flex items-center gap-2 text-lg font-semibold">
-                          <Mail className="h-5 w-5" />
-                          {t('tabContacts')}
-                        </h3>
-                        {contacts && contacts.length > 0 ? (
-                          <div className="space-y-2 rounded-lg border p-4">
-                            {contacts.map((contact, idx) => (
-                              <div
-                                key={idx}
-                                className="flex items-center justify-between rounded-md border p-3"
-                              >
-                                <div className="flex items-center gap-3">
-                                  <Badge variant="outline">
-                                    {getContactTypeName(
-                                      contact.contact_type_id
-                                    )}
-                                  </Badge>
-                                  <span className="font-medium">
-                                    {contact.value}
-                                  </span>
-                                  <CopyButton value={contact.value} />
-                                </div>
-                                {contact.is_primary && (
-                                  <Badge variant="default">Principal</Badge>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                        ) : (
-                          <p className="rounded-lg border p-4 text-center text-sm text-muted-foreground">
-                            {t('noContacts')}
-                          </p>
-                        )}
-                      </div>
-
-                      <div>
-                        <h3 className="mb-3 flex items-center gap-2 text-lg font-semibold">
-                          <MapPin className="h-5 w-5" />
-                          {t('tabAddresses')}
-                        </h3>
-                        {addresses && addresses.length > 0 ? (
-                          <div className="space-y-2 rounded-lg border p-4">
-                            {addresses.map((address, idx) => (
-                              <div
-                                key={idx}
-                                className="flex flex-col gap-2 rounded-md border p-3"
-                              >
-                                <div className="flex items-center justify-between">
-                                  <div className="flex items-center gap-2">
-                                    <Badge variant="outline">
-                                      {getAddressTypeName(
-                                        address.address_type_id
-                                      )}
-                                    </Badge>
-                                    <CopyButton
-                                      value={`${address.line1}, ${address.city}, ${address.state}`}
-                                    />
-                                  </div>
-                                  {address.is_primary && (
-                                    <Badge variant="default">Principal</Badge>
-                                  )}
-                                </div>
-                                <div className="text-sm">
-                                  <p className="font-medium">{address.line1}</p>
-                                  <p className="text-muted-foreground">
-                                    {address.city}, {address.state}
-                                  </p>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        ) : (
-                          <p className="rounded-lg border p-4 text-center text-sm text-muted-foreground">
-                            {t('noAddresses')}
-                          </p>
-                        )}
-                      </div>
-
-                      <div>
-                        <h3 className="mb-3 flex items-center gap-2 text-lg font-semibold">
-                          <FileText className="h-5 w-5" />
-                          {t('tabDocuments')}
-                        </h3>
-                        {documents && documents.length > 0 ? (
-                          <div className="space-y-2 rounded-lg border p-4">
-                            {documents.map((document, idx) => (
-                              <div
-                                key={idx}
-                                className="flex items-center justify-between rounded-md border p-3"
-                              >
-                                <div className="flex items-center gap-3">
-                                  <Badge variant="outline">
-                                    {getDocumentTypeName(
-                                      document.document_type_id
-                                    )}
-                                  </Badge>
-                                  <span className="font-mono font-medium">
-                                    {document.value}
-                                  </span>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        ) : (
-                          <p className="rounded-lg border p-4 text-center text-sm text-muted-foreground">
-                            {t('noDocuments')}
-                          </p>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                </TabsContent>
-                <TabsContent value="dados">
-                  <Card className="mt-4">
-                    <CardContent className="space-y-4">
-                      <FormField
-                        control={editForm.control}
-                        name="type"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>{t('typeOfPerson')}</FormLabel>
-                            <Select
-                              onValueChange={field.onChange}
-                              defaultValue={field.value}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="w-full">
-                                  <SelectValue placeholder={t('selectType')} />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                <SelectItem value="individual">
-                                  {t('individual')}
-                                </SelectItem>
-                                <SelectItem value="company">
-                                  {t('company')}
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={editForm.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>{t('name')}</FormLabel>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                placeholder={t('namePlaceholder')}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={editForm.control}
-                        name="status"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>{t('status')}</FormLabel>
-                            <Select
-                              onValueChange={field.onChange}
-                              defaultValue={field.value}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="w-full">
-                                  <SelectValue
-                                    placeholder={t('selectStatus')}
-                                  />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                <SelectItem value="active">
-                                  {t('active')}
-                                </SelectItem>
-                                <SelectItem value="inactive">
-                                  {t('inactive')}
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </CardContent>
-                  </Card>
-                </TabsContent>
-                <TabsContent value="contatos">
-                  <div className="space-y-2 pt-4 max-h-[70vh] overflow-y-auto">
-                    <div className="flex mb-6 items-center justify-between">
-                      <h4 className="font-semibold">{t('tabContacts')}</h4>
-                      <Button
-                        type="button"
-                        size="sm"
-                        onClick={handleAddContact}
-                      >
-                        {t('addContact')}
-                      </Button>
-                    </div>
-                    {contacts.length === 0 && (
-                      <p className="text-muted-foreground text-sm">
-                        {t('noContacts')}
-                      </p>
-                    )}
-                    {contacts.map((c, idx) => (
-                      <div
-                        key={idx}
-                        className="rounded-md border p-4 mb-4 bg-muted/40 flex flex-col gap-3"
-                      >
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('contactType')}
-                          </label>
-                          <Select
-                            value={String(c.contact_type_id)}
-                            onValueChange={(v) =>
-                              handleContactChange(
-                                idx,
-                                'contact_type_id',
-                                Number(v)
-                              )
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue
-                                placeholder={t('selectContactType')}
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {contactTypes.map((ct: any) => (
-                                <SelectItem
-                                  key={ct.contact_type_id}
-                                  value={String(ct.contact_type_id)}
-                                >
-                                  {ct.name}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('contactValue')}
-                          </label>
-                          <Input
-                            className="w-full"
-                            value={c.value}
-                            onChange={(e) =>
-                              handleContactChange(idx, 'value', e.target.value)
-                            }
-                          />
-                        </div>
-                        <div className="flex items-center gap-3 justify-between mt-2">
-                          <label className="flex items-center gap-1 text-xs">
-                            <input
-                              type="checkbox"
-                              checked={!!c.is_primary}
-                              onChange={(e) =>
-                                handleContactChange(
-                                  idx,
-                                  'is_primary',
-                                  e.target.checked
-                                )
-                              }
-                            />{' '}
-                            {t('main')}
-                          </label>
-                          <Button
-                            type="button"
-                            size="icon"
-                            variant="ghost"
-                            onClick={() => handleRemoveContact(idx)}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </TabsContent>
-                <TabsContent value="enderecos">
-                  <div className="space-y-2 pt-4 max-h-[70vh] overflow-y-auto">
-                    <div className="flex mb-6 items-center justify-between">
-                      <h4 className="font-semibold">{t('editTabAddresses')}</h4>
-                      <Button
-                        type="button"
-                        size="sm"
-                        onClick={handleAddAddress}
-                      >
-                        {t('addAddress')}
-                      </Button>
-                    </div>
-                    {addresses.length === 0 && (
-                      <p className="text-muted-foreground text-sm">
-                        {t('noAddresses')}
-                      </p>
-                    )}
-                    {addresses.map((a, idx) => (
-                      <div
-                        key={idx}
-                        className="rounded-md border p-4 mb-4 bg-muted/40 flex flex-col gap-3"
-                      >
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('addressType')}
-                          </label>
-                          <Select
-                            value={String(a.address_type_id)}
-                            onValueChange={(v) =>
-                              handleAddressChange(
-                                idx,
-                                'address_type_id',
-                                Number(v)
-                              )
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue
-                                placeholder={t('selectAddressType')}
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {addressTypes.map((at: any) => (
-                                <SelectItem
-                                  key={at.address_type_id}
-                                  value={String(at.address_type_id)}
-                                >
-                                  {at.name}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('zipCode')}
-                          </label>
-                          <Input
-                            className="w-full"
-                            value={a.postal_code || ''}
-                            maxLength={9}
-                            onChange={(e) => handleCEP(e, idx)}
-                            placeholder={t('zipCodePlaceholder')}
-                          />
-                        </div>
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('address')}
-                          </label>
-                          <div className="relative">
-                            <Input
-                              className="w-full"
-                              value={a.line1}
-                              onChange={(e) =>
-                                handleAddressChange(
-                                  idx,
-                                  'line1',
-                                  e.target.value
-                                )
-                              }
-                              placeholder={t('addressPlaceholder')}
-                              disabled={loadingCEP[idx]}
-                            />
-                            {loadingCEP[idx] && (
-                              <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
-                            )}
-                          </div>
-                        </div>
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('addressComplement')}
-                          </label>
-                          <Input
-                            className="w-full"
-                            value={a.line2}
-                            onChange={(e) =>
-                              handleAddressChange(idx, 'line2', e.target.value)
-                            }
-                            placeholder={t('addressComplementPlaceholder')}
-                          />
-                        </div>
-                        <div className="flex flex-col md:flex-row gap-3">
-                          <div className="flex-1">
-                            <label className="block text-xs font-medium mb-1">
-                              {t('addressCity')}
-                            </label>
-                            <div className="relative">
-                              <Input
-                                className="w-full"
-                                value={a.city}
-                                onChange={(e) =>
-                                  handleAddressChange(
-                                    idx,
-                                    'city',
-                                    e.target.value
-                                  )
-                                }
-                                placeholder={t('addressCityPlaceholder')}
-                                disabled={loadingCEP[idx]}
-                              />
-                              {loadingCEP[idx] && (
-                                <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
-                              )}
-                            </div>
-                          </div>
-                          <div className="w-full md:w-32">
-                            <label className="block text-xs font-medium mb-1">
-                              {t('addressState')}
-                            </label>
-                            <div className="relative">
-                              <Input
-                                className="w-full"
-                                value={a.state}
-                                onChange={(e) =>
-                                  handleAddressChange(
-                                    idx,
-                                    'state',
-                                    e.target.value
-                                  )
-                                }
-                                placeholder={t('addressStatePlaceholder')}
-                                disabled={loadingCEP[idx]}
-                              />
-                              {loadingCEP[idx] && (
-                                <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                        <div className="w-full">
-                          <label className="block text-xs font-medium mb-1">
-                            {t('addressCountry')}
-                          </label>
-                          <Select
-                            value={a.country_code || ''}
-                            onValueChange={(v) =>
-                              handleAddressChange(idx, 'country_code', v)
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue
-                                placeholder={t('addressCountryPlaceholder')}
-                              />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {COUNTRIES.map((country) => (
-                                <SelectItem
-                                  key={country.code}
-                                  value={country.code}
-                                >
-                                  {country.name}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div className="flex items-center gap-3 justify-between mt-2">
-                          <label className="flex items-center gap-1 text-xs">
-                            <input
-                              type="checkbox"
-                              checked={!!a.is_primary}
-                              onChange={(e) =>
-                                handleAddressChange(
-                                  idx,
-                                  'is_primary',
-                                  e.target.checked
-                                )
-                              }
-                            />{' '}
-                            {t('main')}
-                          </label>
-                          <Button
-                            type="button"
-                            size="icon"
-                            variant="ghost"
-                            onClick={() => handleRemoveAddress(idx)}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </TabsContent>
-                <TabsContent value="documentos">
-                  <div className="space-y-2 pt-4 max-h-[70vh] overflow-y-auto">
-                    <div className="flex mb-6 items-center justify-between">
-                      <h4 className="font-semibold">{t('editTabDocuments')}</h4>
-                      <Button
-                        type="button"
-                        size="sm"
-                        onClick={handleAddDocument}
-                      >
-                        {t('addDocument')}
-                      </Button>
-                    </div>
-                    {documents.length === 0 && (
-                      <p className="text-muted-foreground text-sm">
-                        {t('noDocuments')}
-                      </p>
-                    )}
-                    {documents.map((d, idx) => (
-                      <div
-                        key={idx}
-                        className="rounded-md border p-4 mb-4 bg-muted/40 flex flex-col gap-3"
-                      >
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('documentType')}
-                          </label>
-                          <Select
-                            value={String(d.document_type_id)}
-                            onValueChange={(v) =>
-                              handleDocumentChange(
-                                idx,
-                                'document_type_id',
-                                Number(v)
-                              )
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue placeholder="Selecione o tipo" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {documentTypes.map((dt: any) => (
-                                <SelectItem
-                                  key={dt.document_type_id}
-                                  value={String(dt.document_type_id)}
-                                >
-                                  {dt.name}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                        <div>
-                          <label className="block text-xs font-medium mb-1">
-                            {t('documentValue')}
-                          </label>
-                          <Input
-                            className="w-full"
-                            value={d.value}
-                            onChange={(e) =>
-                              handleDocumentChange(idx, 'value', e.target.value)
-                            }
-                            placeholder={t('documentValuePlaceholder')}
-                          />
-                        </div>
-                        <div className="flex items-center justify-end mt-2">
-                          <Button
-                            type="button"
-                            size="icon"
-                            variant="ghost"
-                            onClick={() => handleRemoveDocument(idx)}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </TabsContent>
-              </Tabs>
-              <div className="flex justify-end gap-2 pt-6">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setIsSheetOpen(false)}
-                >
-                  {t('cancel')}
-                </Button>
-                <Button type="submit">{t('saveChanges')}</Button>
-              </div>
-            </form>
-          </Form>
-        </SheetContent>
-      </Sheet>
-    </div>
-  );
-}
+'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>
+  );
+}