549 lines
31 KiB
TypeScript
549 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import { Fragment, useEffect, useState } from 'react';
|
|
import { Menu, Transition } from '@headlessui/react';
|
|
import ConfirmDialog from '@/components/layout/ConfirmDialog';
|
|
import { useToast } from '@/components/layout/ToastContext';
|
|
import {
|
|
UserIcon,
|
|
TrashIcon,
|
|
PencilIcon,
|
|
EllipsisVerticalIcon,
|
|
MagnifyingGlassIcon,
|
|
PlusIcon,
|
|
XMarkIcon,
|
|
PhoneIcon,
|
|
EnvelopeIcon,
|
|
MapPinIcon,
|
|
TagIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
interface Customer {
|
|
id: string;
|
|
tenant_id: string;
|
|
name: string;
|
|
email: string;
|
|
phone: string;
|
|
company: string;
|
|
position: string;
|
|
address: string;
|
|
city: string;
|
|
state: string;
|
|
zip_code: string;
|
|
country: string;
|
|
tags: string[];
|
|
notes: string;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
export default function CustomersPage() {
|
|
const toast = useToast();
|
|
const [customers, setCustomers] = useState<Customer[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);
|
|
|
|
const [confirmOpen, setConfirmOpen] = useState(false);
|
|
const [customerToDelete, setCustomerToDelete] = useState<string | null>(null);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
position: '',
|
|
address: '',
|
|
city: '',
|
|
state: '',
|
|
zip_code: '',
|
|
country: 'Brasil',
|
|
tags: '',
|
|
notes: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchCustomers();
|
|
}, []);
|
|
|
|
const fetchCustomers = async () => {
|
|
try {
|
|
const response = await fetch('/api/crm/customers', {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
});
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setCustomers(data.customers || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching customers:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const url = editingCustomer
|
|
? `/api/crm/customers/${editingCustomer.id}`
|
|
: '/api/crm/customers';
|
|
|
|
const method = editingCustomer ? 'PUT' : 'POST';
|
|
|
|
const payload = {
|
|
...formData,
|
|
tags: formData.tags.split(',').map(t => t.trim()).filter(t => t.length > 0),
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method,
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (response.ok) {
|
|
toast.success(
|
|
editingCustomer ? 'Cliente atualizado' : 'Cliente criado',
|
|
editingCustomer ? 'O cliente foi atualizado com sucesso.' : 'O novo cliente foi criado com sucesso.'
|
|
);
|
|
fetchCustomers();
|
|
handleCloseModal();
|
|
} else {
|
|
const error = await response.json();
|
|
toast.error('Erro', error.message || 'Não foi possível salvar o cliente.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving customer:', error);
|
|
toast.error('Erro', 'Ocorreu um erro ao salvar o cliente.');
|
|
}
|
|
};
|
|
|
|
const handleEdit = (customer: Customer) => {
|
|
setEditingCustomer(customer);
|
|
setFormData({
|
|
name: customer.name,
|
|
email: customer.email,
|
|
phone: customer.phone,
|
|
company: customer.company,
|
|
position: customer.position,
|
|
address: customer.address,
|
|
city: customer.city,
|
|
state: customer.state,
|
|
zip_code: customer.zip_code,
|
|
country: customer.country,
|
|
tags: customer.tags?.join(', ') || '',
|
|
notes: customer.notes,
|
|
});
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDeleteClick = (id: string) => {
|
|
setCustomerToDelete(id);
|
|
setConfirmOpen(true);
|
|
};
|
|
|
|
const handleConfirmDelete = async () => {
|
|
if (!customerToDelete) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/crm/customers/${customerToDelete}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
});
|
|
|
|
if (response.ok) {
|
|
setCustomers(customers.filter(c => c.id !== customerToDelete));
|
|
toast.success('Cliente excluído', 'O cliente foi excluído com sucesso.');
|
|
} else {
|
|
toast.error('Erro ao excluir', 'Não foi possível excluir o cliente.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting customer:', error);
|
|
toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir o cliente.');
|
|
} finally {
|
|
setConfirmOpen(false);
|
|
setCustomerToDelete(null);
|
|
}
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setIsModalOpen(false);
|
|
setEditingCustomer(null);
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
position: '',
|
|
address: '',
|
|
city: '',
|
|
state: '',
|
|
zip_code: '',
|
|
country: 'Brasil',
|
|
tags: '',
|
|
notes: '',
|
|
});
|
|
};
|
|
|
|
const filteredCustomers = customers.filter((customer) => {
|
|
const searchLower = searchTerm.toLowerCase();
|
|
return (
|
|
(customer.name?.toLowerCase() || '').includes(searchLower) ||
|
|
(customer.email?.toLowerCase() || '').includes(searchLower) ||
|
|
(customer.company?.toLowerCase() || '').includes(searchLower) ||
|
|
(customer.phone?.toLowerCase() || '').includes(searchLower)
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="p-6 max-w-[1600px] mx-auto space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">Clientes</h1>
|
|
<p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
|
|
Gerencie seus clientes e contatos
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-lg hover:opacity-90 transition-opacity"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
<PlusIcon className="w-4 h-4" />
|
|
Novo Cliente
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative w-full lg:w-96">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<MagnifyingGlassIcon className="h-5 w-5 text-zinc-400" aria-hidden="true" />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
className="block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-700 rounded-lg leading-5 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-1 focus:ring-[var(--brand-color)] focus:border-[var(--brand-color)] sm:text-sm transition duration-150 ease-in-out"
|
|
placeholder="Buscar por nome, email, empresa..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--brand-color)]"></div>
|
|
</div>
|
|
) : filteredCustomers.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-64 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 text-center p-8">
|
|
<div className="w-16 h-16 bg-zinc-50 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4">
|
|
<UserIcon className="w-8 h-8 text-zinc-400" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-zinc-900 dark:text-white mb-1">
|
|
Nenhum cliente encontrado
|
|
</h3>
|
|
<p className="text-zinc-500 dark:text-zinc-400 max-w-sm mx-auto">
|
|
{searchTerm ? 'Nenhum cliente corresponde à sua busca.' : 'Comece adicionando seu primeiro cliente.'}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-zinc-50/50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-800">
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Cliente</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Empresa</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Contato</th>
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Tags</th>
|
|
<th className="px-6 py-4 text-right text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
{filteredCustomers.map((customer) => (
|
|
<tr key={customer.id} className="group hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
{customer.name.substring(0, 2).toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-semibold text-zinc-900 dark:text-white">
|
|
{customer.name}
|
|
</div>
|
|
{customer.position && (
|
|
<div className="text-xs text-zinc-500 dark:text-zinc-400">
|
|
{customer.position}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-zinc-700 dark:text-zinc-300">
|
|
{customer.company || '-'}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<div className="space-y-1">
|
|
{customer.email && (
|
|
<div className="flex items-center gap-2">
|
|
<EnvelopeIcon className="w-4 h-4 text-zinc-400" />
|
|
<span>{customer.email}</span>
|
|
</div>
|
|
)}
|
|
{customer.phone && (
|
|
<div className="flex items-center gap-2">
|
|
<PhoneIcon className="w-4 h-4 text-zinc-400" />
|
|
<span>{customer.phone}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<div className="flex flex-wrap gap-1">
|
|
{customer.tags && customer.tags.length > 0 ? (
|
|
customer.tags.slice(0, 3).map((tag, idx) => (
|
|
<span
|
|
key={idx}
|
|
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className="text-xs text-zinc-400">-</span>
|
|
)}
|
|
{customer.tags && customer.tags.length > 3 && (
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
|
|
+{customer.tags.length - 3}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right">
|
|
<Menu as="div" className="relative inline-block text-left">
|
|
<Menu.Button className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none">
|
|
<EllipsisVerticalIcon className="w-5 h-5" />
|
|
</Menu.Button>
|
|
<Menu.Items
|
|
transition
|
|
portal
|
|
anchor="bottom end"
|
|
className="w-48 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl bg-white dark:bg-zinc-900 focus:outline-none z-50 border border-zinc-200 dark:border-zinc-800 [--anchor-gap:8px] transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
|
|
>
|
|
<div className="px-1 py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={() => handleEdit(customer)}
|
|
className={`${active ? 'bg-zinc-50 dark:bg-zinc-800' : ''
|
|
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-zinc-700 dark:text-zinc-300`}
|
|
>
|
|
<PencilIcon className="mr-2 h-4 w-4 text-zinc-400" />
|
|
Editar
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
<div className="px-1 py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={() => handleDeleteClick(customer.id)}
|
|
className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''
|
|
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-red-600 dark:text-red-400`}
|
|
>
|
|
<TrashIcon className="mr-2 h-4 w-4" />
|
|
Excluir
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
</Menu.Items>
|
|
</Menu>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal */}
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
<div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" onClick={handleCloseModal}></div>
|
|
|
|
<div className="relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-zinc-200 dark:border-zinc-800">
|
|
<div className="absolute right-0 top-0 pr-6 pt-6">
|
|
<button
|
|
type="button"
|
|
className="rounded-lg p-1.5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
onClick={handleCloseModal}
|
|
>
|
|
<XMarkIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-6 sm:p-8">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div
|
|
className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl shadow-lg"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
<UserIcon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-zinc-900 dark:text-white">
|
|
{editingCustomer ? 'Editar Cliente' : 'Novo Cliente'}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
|
{editingCustomer ? 'Atualize as informações do cliente.' : 'Adicione um novo cliente ao seu CRM.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Nome Completo *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
required
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Telefone
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={formData.phone}
|
|
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Empresa
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.company}
|
|
onChange={(e) => setFormData({ ...formData, company: e.target.value })}
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Cargo
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.position}
|
|
onChange={(e) => setFormData({ ...formData, position: e.target.value })}
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Tags <span className="text-xs font-normal text-zinc-500">(separadas por vírgula)</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.tags}
|
|
onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
|
|
placeholder="vip, premium, lead-quente"
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2">
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Observações
|
|
</label>
|
|
<textarea
|
|
value={formData.notes}
|
|
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
|
rows={3}
|
|
className="w-full px-3 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent resize-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-zinc-200 dark:border-zinc-700 flex gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseModal}
|
|
className="flex-1 px-4 py-2.5 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
Cancelar
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-4 py-2.5 text-white font-medium rounded-lg transition-all shadow-lg hover:shadow-xl"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
{editingCustomer ? 'Atualizar' : 'Criar Cliente'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<ConfirmDialog
|
|
isOpen={confirmOpen}
|
|
onClose={() => {
|
|
setConfirmOpen(false);
|
|
setCustomerToDelete(null);
|
|
}}
|
|
onConfirm={handleConfirmDelete}
|
|
title="Excluir Cliente"
|
|
message="Tem certeza que deseja excluir este cliente? Esta ação não pode ser desfeita."
|
|
confirmText="Excluir"
|
|
cancelText="Cancelar"
|
|
variant="danger"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|