@hed-hog/contact 0.0.186 → 0.0.190

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

@@ -0,0 +1,1621 @@
+'use client';
+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,
+  Copy,
+  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 && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6"
+                          onClick={() => {
+                            navigator.clipboard.writeText(person.name);
+                            toast.success(t('copiedToClipboard') || 'Copiado!');
+                          }}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </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') !== '-' && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() => {
+                              navigator.clipboard.writeText(
+                                getPrimaryContact(person, 'email')
+                              );
+                              toast.success(
+                                t('copiedToClipboard') || 'Copiado!'
+                              );
+                            }}
+                          >
+                            <Copy className="h-3 w-3" />
+                          </Button>
+                        )}
+                    </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') !== '-' && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() => {
+                              navigator.clipboard.writeText(
+                                getPrimaryContact(person, 'phone')
+                              );
+                              toast.success(
+                                t('copiedToClipboard') || 'Copiado!'
+                              );
+                            }}
+                          >
+                            <Copy className="h-3 w-3" />
+                          </Button>
+                        )}
+                    </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) !== '-' && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() => {
+                              navigator.clipboard.writeText(
+                                getPrimaryAddress(person)
+                              );
+                              toast.success(
+                                t('copiedToClipboard') || 'Copiado!'
+                              );
+                            }}
+                          >
+                            <Copy className="h-3 w-3" />
+                          </Button>
+                        )}
+                    </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 && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6"
+                                  onClick={() => {
+                                    navigator.clipboard.writeText(
+                                      editingPerson.name
+                                    );
+                                    toast.success(
+                                      t('copiedToClipboard') || 'Copiado!'
+                                    );
+                                  }}
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              )}
+                            </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>
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-6 w-6"
+                                    onClick={() => {
+                                      navigator.clipboard.writeText(
+                                        contact.value
+                                      );
+                                      toast.success(
+                                        t('copiedToClipboard') || 'Copiado!'
+                                      );
+                                    }}
+                                  >
+                                    <Copy className="h-3 w-3" />
+                                  </Button>
+                                </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>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-6 w-6"
+                                      onClick={() => {
+                                        const fullAddress = `${address.line1}, ${address.city}, ${address.state}`;
+                                        navigator.clipboard.writeText(
+                                          fullAddress
+                                        );
+                                        toast.success(
+                                          t('copiedToClipboard') || 'Copiado!'
+                                        );
+                                      }}
+                                    >
+                                      <Copy className="h-3 w-3" />
+                                    </Button>
+                                  </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>
+  );
+}