1510 lines
92 KiB
TypeScript
1510 lines
92 KiB
TypeScript
"use client";
|
|
|
|
import { Fragment, useEffect, useMemo, useState } from 'react';
|
|
import { Menu, Transition, Tab } from '@headlessui/react';
|
|
import { ConfirmDialog, BulkActionBar } from "@/components/ui";
|
|
import { useToast } from '@/components/layout/ToastContext';
|
|
import {
|
|
UserIcon,
|
|
TrashIcon,
|
|
PencilIcon,
|
|
EllipsisVerticalIcon,
|
|
MagnifyingGlassIcon,
|
|
PlusIcon,
|
|
XMarkIcon,
|
|
PhoneIcon,
|
|
EnvelopeIcon,
|
|
MapPinIcon,
|
|
TagIcon,
|
|
KeyIcon,
|
|
LockClosedIcon,
|
|
EyeIcon,
|
|
CheckCircleIcon,
|
|
IdentificationIcon,
|
|
PhotoIcon,
|
|
Cog6ToothIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
function classNames(...classes: string[]) {
|
|
return classes.filter(Boolean).join(' ');
|
|
}
|
|
|
|
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;
|
|
created_by?: string;
|
|
is_active: boolean;
|
|
logo_url?: string;
|
|
}
|
|
|
|
type PublicRegistrationNotes = {
|
|
person_type?: 'pf' | 'pj';
|
|
cpf?: string;
|
|
cnpj?: string;
|
|
full_name?: string;
|
|
email?: string;
|
|
phone?: string;
|
|
responsible_name?: string;
|
|
company_name?: string;
|
|
trade_name?: string;
|
|
postal_code?: string;
|
|
street?: string;
|
|
number?: string;
|
|
complement?: string;
|
|
neighborhood?: string;
|
|
city?: string;
|
|
state?: string;
|
|
message?: string;
|
|
logo_path?: string;
|
|
};
|
|
|
|
const PENDING_APPROVAL_TAG = 'pendente_aprovacao';
|
|
const PUBLIC_REGISTRATION_TAG = 'cadastro_publico';
|
|
|
|
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 [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
|
|
const [customerToDelete, setCustomerToDelete] = useState<string | null>(null);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [showPendingOnly, setShowPendingOnly] = useState(false);
|
|
const [detailsCustomer, setDetailsCustomer] = useState<Customer | null>(null);
|
|
const [isApprovingId, setIsApprovingId] = useState<string | null>(null);
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
|
|
// Portal Access States
|
|
const [isPortalModalOpen, setIsPortalModalOpen] = useState(false);
|
|
const [selectedCustomerForPortal, setSelectedCustomerForPortal] = useState<Customer | null>(null);
|
|
const [portalPassword, setPortalPassword] = useState('');
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
position: '',
|
|
address: '',
|
|
city: '',
|
|
state: '',
|
|
zip_code: '',
|
|
country: 'Brasil',
|
|
tags: '',
|
|
notes: '',
|
|
logo_url: '',
|
|
});
|
|
|
|
const pendingCustomers = customers.filter(customer => customer.tags?.includes(PENDING_APPROVAL_TAG));
|
|
|
|
const isPendingApproval = (customer: Customer) => customer.tags?.includes(PENDING_APPROVAL_TAG);
|
|
|
|
const parsePublicNotes = (notes: string): PublicRegistrationNotes | null => {
|
|
if (!notes) return null;
|
|
try {
|
|
return JSON.parse(notes);
|
|
} catch (error) {
|
|
console.warn('[Clientes] Notas públicas inválidas', error);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (customer: Customer) => {
|
|
if (isPendingApproval(customer)) {
|
|
return {
|
|
label: 'Pendente de aprovação',
|
|
className: 'bg-amber-100 text-amber-800 border border-amber-200',
|
|
};
|
|
}
|
|
|
|
if (customer.tags?.includes(PUBLIC_REGISTRATION_TAG)) {
|
|
return {
|
|
label: 'Cadastro público',
|
|
className: 'bg-sky-100 text-sky-700 border border-sky-200',
|
|
};
|
|
}
|
|
|
|
return {
|
|
label: 'Ativo',
|
|
className: 'bg-emerald-100 text-emerald-700 border border-emerald-200',
|
|
};
|
|
};
|
|
|
|
const formatDateTime = (value: string) => {
|
|
if (!value) return '-';
|
|
return new Date(value).toLocaleString('pt-BR', {
|
|
day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchCustomers();
|
|
}, []);
|
|
|
|
const fetchCustomers = async () => {
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
console.log('[Clientes] Fetching customers, token exists:', !!token);
|
|
|
|
const response = await fetch('/api/crm/customers', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
console.log('[Clientes] Response status:', response.status);
|
|
const data = await response.json();
|
|
console.log('[Clientes] Response data:', data);
|
|
|
|
if (response.ok) {
|
|
setCustomers(data.customers || []);
|
|
} else {
|
|
console.error('[Clientes] Error response:', data);
|
|
}
|
|
} catch (error) {
|
|
console.error('[Clientes] Error fetching customers:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleBulkDelete = async () => {
|
|
if (selectedIds.length === 0) return;
|
|
setBulkConfirmOpen(true);
|
|
};
|
|
|
|
const handleConfirmBulkDelete = async () => {
|
|
|
|
try {
|
|
setLoading(true);
|
|
const results = await Promise.all(selectedIds.map(async (id) => {
|
|
const response = await fetch(`/api/crm/customers/${id}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
},
|
|
});
|
|
return { id, ok: response.ok };
|
|
}));
|
|
|
|
const successful = results.filter(r => r.ok).length;
|
|
if (successful > 0) {
|
|
toast.success('Exclusão completa', `${successful} clientes excluídos com sucesso.`);
|
|
}
|
|
if (successful < selectedIds.length) {
|
|
toast.error('Erro', 'Não foi possível excluir alguns clientes.');
|
|
}
|
|
await fetchCustomers();
|
|
} catch (error) {
|
|
toast.error('Erro', 'Ocorreu um erro na exclusão em lote.');
|
|
} finally {
|
|
setLoading(false);
|
|
setBulkConfirmOpen(false);
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleBulkApprove = async () => {
|
|
const pendingToApprove = customers.filter(c => selectedIds.includes(c.id) && isPendingApproval(c));
|
|
if (pendingToApprove.length === 0) {
|
|
toast.error('Nenhum dos clientes selecionados está pendente de aprovação.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
await Promise.all(pendingToApprove.map(async (customer) => {
|
|
const updatedTags = (customer.tags || []).filter(tag => tag !== PENDING_APPROVAL_TAG);
|
|
let logoUrl = customer.logo_url;
|
|
const publicData = parsePublicNotes(customer.notes);
|
|
if (publicData?.logo_path && !logoUrl) {
|
|
logoUrl = publicData.logo_path;
|
|
}
|
|
|
|
return fetch(`/api/crm/customers/${customer.id}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
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,
|
|
notes: customer.notes,
|
|
tags: updatedTags,
|
|
is_active: customer.is_active ?? true,
|
|
logo_url: logoUrl,
|
|
}),
|
|
});
|
|
}));
|
|
toast.success('Sucesso', `${pendingToApprove.length} clientes aprovados.`);
|
|
await fetchCustomers();
|
|
} catch (error) {
|
|
toast.error('Erro ao aprovar clientes');
|
|
} 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.'
|
|
);
|
|
await 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,
|
|
logo_url: customer.logo_url || '',
|
|
});
|
|
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) {
|
|
await fetchCustomers();
|
|
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 handleGeneratePortalAccess = (customer: Customer) => {
|
|
setSelectedCustomerForPortal(customer);
|
|
setPortalPassword('');
|
|
setIsPortalModalOpen(true);
|
|
};
|
|
|
|
const openDetails = (customer: Customer) => {
|
|
setDetailsCustomer(customer);
|
|
};
|
|
|
|
const closeDetails = () => setDetailsCustomer(null);
|
|
|
|
const handleSubmitPortalAccess = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!selectedCustomerForPortal || !portalPassword) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/crm/customers/${selectedCustomerForPortal.id}/portal-access`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ password: portalPassword }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
toast.success(
|
|
'Acesso criado!',
|
|
`Credenciais geradas para ${selectedCustomerForPortal.email}`
|
|
);
|
|
setIsPortalModalOpen(false);
|
|
setSelectedCustomerForPortal(null);
|
|
setPortalPassword('');
|
|
} else {
|
|
const error = await response.json();
|
|
toast.error('Erro', error.error || 'Não foi possível gerar acesso ao portal.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating portal access:', error);
|
|
toast.error('Erro', 'Ocorreu um erro ao gerar acesso ao portal.');
|
|
}
|
|
};
|
|
|
|
const handleApproveCustomer = async (customer: Customer) => {
|
|
if (!isPendingApproval(customer)) return;
|
|
|
|
setIsApprovingId(customer.id);
|
|
const updatedTags = (customer.tags || []).filter(tag => tag !== PENDING_APPROVAL_TAG);
|
|
|
|
// Extrair logo das notas se existir
|
|
let logoUrl = customer.logo_url;
|
|
const publicData = parsePublicNotes(customer.notes);
|
|
if (publicData?.logo_path && !logoUrl) {
|
|
logoUrl = publicData.logo_path;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/crm/customers/${customer.id}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
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,
|
|
notes: customer.notes,
|
|
tags: updatedTags,
|
|
is_active: customer.is_active ?? true,
|
|
logo_url: logoUrl,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
toast.success('Acesso liberado!', 'O cliente já pode fazer login no portal com a senha cadastrada.');
|
|
await fetchCustomers();
|
|
setDetailsCustomer(prev => prev && prev.id === customer.id ? { ...prev, tags: updatedTags } : prev);
|
|
} else {
|
|
const error = await response.json();
|
|
toast.error('Erro ao aprovar', error?.error || 'Não foi possível atualizar o status.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error approving customer:', error);
|
|
toast.error('Erro ao aprovar', 'Ocorreu um erro ao atualizar este cadastro.');
|
|
} finally {
|
|
setIsApprovingId(null);
|
|
}
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setIsModalOpen(false);
|
|
setEditingCustomer(null);
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
company: '',
|
|
position: '',
|
|
address: '',
|
|
city: '',
|
|
state: '',
|
|
zip_code: '',
|
|
country: 'Brasil',
|
|
tags: '',
|
|
notes: '',
|
|
logo_url: '',
|
|
});
|
|
};
|
|
|
|
const filteredCustomers = customers.filter((customer) => {
|
|
const searchLower = searchTerm.toLowerCase();
|
|
const matchesSearch =
|
|
(customer.name?.toLowerCase() || '').includes(searchLower) ||
|
|
(customer.email?.toLowerCase() || '').includes(searchLower) ||
|
|
(customer.company?.toLowerCase() || '').includes(searchLower) ||
|
|
(customer.phone?.toLowerCase() || '').includes(searchLower);
|
|
|
|
const matchesPendingFilter = !showPendingOnly || isPendingApproval(customer);
|
|
|
|
return matchesSearch && matchesPendingFilter;
|
|
});
|
|
|
|
const detailsPublicData = useMemo(() => {
|
|
if (!detailsCustomer?.notes) return null;
|
|
return parsePublicNotes(detailsCustomer.notes);
|
|
}, [detailsCustomer]);
|
|
|
|
const detailsStatusBadge = detailsCustomer ? getStatusBadge(detailsCustomer) : null;
|
|
const isDetailsPendingApproval = detailsCustomer ? isPendingApproval(detailsCustomer) : false;
|
|
const detailsDocumentLabel = detailsPublicData
|
|
? detailsPublicData.person_type === 'pj'
|
|
? 'CNPJ'
|
|
: 'CPF'
|
|
: null;
|
|
const detailsDocumentValue = detailsPublicData
|
|
? detailsPublicData.person_type === 'pj'
|
|
? detailsPublicData.cnpj
|
|
: detailsPublicData.cpf
|
|
: null;
|
|
const detailsPublicAddress = detailsPublicData
|
|
? [
|
|
detailsPublicData.street && [detailsPublicData.street, detailsPublicData.number].filter(Boolean).join(', '),
|
|
detailsPublicData.neighborhood,
|
|
detailsPublicData.city && detailsPublicData.state
|
|
? `${detailsPublicData.city} - ${detailsPublicData.state}`
|
|
: detailsPublicData.city || detailsPublicData.state,
|
|
detailsPublicData.postal_code,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' · ')
|
|
: null;
|
|
|
|
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 */}
|
|
{pendingCustomers.length > 0 && (
|
|
<div className="p-4 rounded-xl border border-amber-200 bg-amber-50/70 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold text-amber-900">
|
|
{pendingCustomers.length === 1
|
|
? 'Existe 1 cadastro aguardando aprovação.'
|
|
: `Existem ${pendingCustomers.length} cadastros aguardando aprovação.`}
|
|
</p>
|
|
<p className="text-sm text-amber-800">
|
|
Use este painel para revisar os envios do formulário público enquanto o e-mail automático não está ativo.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => setShowPendingOnly(prev => !prev)}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium border border-amber-300 transition-colors ${showPendingOnly ? 'bg-amber-600 text-white border-amber-600' : 'text-amber-800 hover:bg-amber-100'}`}
|
|
>
|
|
{showPendingOnly ? 'Mostrar todos' : 'Ver apenas pendentes'}
|
|
</button>
|
|
<button
|
|
onClick={() => pendingCustomers[0] && openDetails(pendingCustomers[0])}
|
|
className="px-4 py-2 rounded-lg text-sm font-medium text-amber-900 bg-amber-100 hover:bg-amber-200 border border-amber-200"
|
|
>
|
|
Abrir cadastro mais recente
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<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 w-10 text-left">
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={filteredCustomers.length > 0 && selectedIds.length === filteredCustomers.length}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
setSelectedIds(filteredCustomers.map(c => c.id));
|
|
} else {
|
|
setSelectedIds([]);
|
|
}
|
|
}}
|
|
className="w-4 h-4 rounded border-zinc-300 text-brand-600 focus:ring-brand-500 cursor-pointer"
|
|
/>
|
|
</div>
|
|
</th>
|
|
<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-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Status</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) => {
|
|
const badge = getStatusBadge(customer);
|
|
const pendingApproval = isPendingApproval(customer);
|
|
|
|
return (
|
|
<tr
|
|
key={customer.id}
|
|
onClick={() => openDetails(customer)}
|
|
className={`group transition-colors cursor-pointer ${pendingApproval
|
|
? 'bg-amber-50/40 dark:bg-amber-900/10 hover:bg-amber-50/70 dark:hover:bg-amber-900/20'
|
|
: 'hover:bg-zinc-50 dark:hover:bg-zinc-800/50'
|
|
} ${selectedIds.includes(customer.id) ? 'bg-brand-50/30 dark:bg-brand-500/5' : ''}`}
|
|
>
|
|
<td className="px-6 py-4 w-10" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedIds.includes(customer.id)}
|
|
onChange={() => {
|
|
if (selectedIds.includes(customer.id)) {
|
|
setSelectedIds(selectedIds.filter(id => id !== customer.id));
|
|
} else {
|
|
setSelectedIds([...selectedIds, customer.id]);
|
|
}
|
|
}}
|
|
className="w-4 h-4 rounded border-zinc-300 text-brand-600 focus:ring-brand-500 cursor-pointer"
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="flex items-center gap-3">
|
|
{customer.logo_url ? (
|
|
<img
|
|
src={customer.logo_url}
|
|
alt={customer.name}
|
|
className={`w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-zinc-700 ${pendingApproval ? 'ring-4 ring-amber-100 dark:ring-amber-900/30' : ''}`}
|
|
onError={(e) => {
|
|
// Fallback se a imagem falhar
|
|
(e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(customer.name)}&background=random`;
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm ${pendingApproval ? 'ring-4 ring-amber-100 dark:ring-amber-900/30' : ''}`}
|
|
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-sm">
|
|
<span className={`inline-flex items-center px-3 py-0.5 rounded-full text-xs font-semibold ${badge.className}`}>
|
|
{badge.label}
|
|
</span>
|
|
{pendingApproval && (
|
|
<p className="text-[11px] text-amber-700 mt-1">
|
|
Novo cadastro via formulário público
|
|
</p>
|
|
)}
|
|
</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 space-y-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={() => openDetails(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`}
|
|
>
|
|
<EyeIcon className="mr-2 h-4 w-4 text-zinc-400" />
|
|
{pendingApproval ? 'Revisar cadastro' : 'Ver detalhes'}
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
<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>
|
|
{pendingApproval && (
|
|
<div className="px-1 py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={() => handleApproveCustomer(customer)}
|
|
className={`${active ? 'bg-emerald-50 dark:bg-emerald-900/20' : ''
|
|
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-emerald-600 dark:text-emerald-400 disabled:opacity-60`}
|
|
disabled={isApprovingId === customer.id}
|
|
>
|
|
<CheckCircleIcon className="mr-2 h-4 w-4" />
|
|
{isApprovingId === customer.id ? 'Aprovando...' : 'Marcar como aprovado'}
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
)}
|
|
<div className="px-1 py-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={() => handleGeneratePortalAccess(customer)}
|
|
className={`${active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
|
|
} group flex w-full items-center rounded-lg px-2 py-2 text-sm text-blue-600 dark:text-blue-400`}
|
|
>
|
|
<KeyIcon className="mr-2 h-4 w-4" />
|
|
Gerar Acesso Portal
|
|
</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>
|
|
|
|
<Tab.Group>
|
|
<Tab.List className="flex space-x-1 rounded-xl bg-zinc-100 dark:bg-zinc-800 p-1 mb-6">
|
|
<Tab
|
|
className={({ selected }) =>
|
|
classNames(
|
|
'w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all',
|
|
selected
|
|
? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
|
|
: 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300'
|
|
)
|
|
}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<IdentificationIcon className="w-4 h-4" />
|
|
Básico
|
|
</div>
|
|
</Tab>
|
|
<Tab
|
|
className={({ selected }) =>
|
|
classNames(
|
|
'w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all',
|
|
selected
|
|
? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
|
|
: 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300'
|
|
)
|
|
}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<MapPinIcon className="w-4 h-4" />
|
|
Endereço
|
|
</div>
|
|
</Tab>
|
|
<Tab
|
|
className={({ selected }) =>
|
|
classNames(
|
|
'w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all',
|
|
selected
|
|
? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
|
|
: 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300'
|
|
)
|
|
}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Cog6ToothIcon className="w-4 h-4" />
|
|
Config
|
|
</div>
|
|
</Tab>
|
|
</Tab.List>
|
|
|
|
<Tab.Panels>
|
|
<Tab.Panel className="space-y-4 focus:outline-none">
|
|
<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>
|
|
</Tab.Panel>
|
|
|
|
<Tab.Panel className="space-y-4 focus:outline-none">
|
|
<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">
|
|
Endereço
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.address}
|
|
onChange={(e) => setFormData({ ...formData, address: 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">
|
|
Cidade
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.city}
|
|
onChange={(e) => setFormData({ ...formData, city: 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">
|
|
Estado
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.state}
|
|
onChange={(e) => setFormData({ ...formData, state: 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">
|
|
CEP
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.zip_code}
|
|
onChange={(e) => setFormData({ ...formData, zip_code: 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">
|
|
País
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.country}
|
|
onChange={(e) => setFormData({ ...formData, country: 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>
|
|
</Tab.Panel>
|
|
|
|
<Tab.Panel className="space-y-4 focus:outline-none">
|
|
<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">
|
|
Logo do Cliente
|
|
</label>
|
|
<div className="flex items-center gap-4 p-4 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
|
|
<div className="w-20 h-20 rounded-xl border border-zinc-200 dark:border-zinc-700 overflow-hidden bg-white dark:bg-zinc-800 flex items-center justify-center flex-shrink-0 shadow-sm">
|
|
{formData.logo_url ? (
|
|
<img src={formData.logo_url} alt="Logo do Cliente" className="w-full h-full object-contain p-2" />
|
|
) : (
|
|
<PhotoIcon className="w-10 h-10 text-zinc-300" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-zinc-900 dark:text-white">
|
|
{formData.logo_url ? 'Logo cadastrado' : 'Nenhum logo cadastrado'}
|
|
</p>
|
|
<p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
|
|
O logo é gerenciado pelo próprio cliente através do portal do cliente.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<div className="relative">
|
|
<TagIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
|
|
<input
|
|
type="text"
|
|
value={formData.tags}
|
|
onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
|
|
placeholder="vip, premium, lead-quente"
|
|
className="w-full pl-10 pr-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>
|
|
|
|
<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>
|
|
</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
|
|
<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)} onConfirm={handleConfirmDelete} title="Excluir Cadastro" message="Tem certeza? Isso pode afetar lançamentos vinculados a esta entidade no ERP." confirmText="Excluir" cancelText="Cancelar" variant="danger" />
|
|
|
|
<ConfirmDialog
|
|
isOpen={bulkConfirmOpen}
|
|
onClose={() => setBulkConfirmOpen(false)}
|
|
onConfirm={handleConfirmBulkDelete}
|
|
title="Excluir Clientes Selecionados"
|
|
message={`Tem certeza que deseja excluir os ${selectedIds.length} clientes selecionados? Esta ação não pode ser desfeita.`}
|
|
confirmText="Excluir Tudo"
|
|
cancelText="Cancelar"
|
|
variant="danger"
|
|
/>
|
|
|
|
<BulkActionBar
|
|
selectedCount={selectedIds.length}
|
|
onClearSelection={() => setSelectedIds([])}
|
|
actions={[
|
|
...(customers.some(c => selectedIds.includes(c.id) && isPendingApproval(c)) ? [{
|
|
label: "Aprovar Selecionados",
|
|
icon: <CheckCircleIcon className="w-5 h-5" />,
|
|
onClick: handleBulkApprove,
|
|
variant: 'primary' as const
|
|
}] : []),
|
|
{
|
|
label: "Excluir Selecionados",
|
|
icon: <TrashIcon className="w-5 h-5" />,
|
|
onClick: handleBulkDelete,
|
|
variant: 'danger'
|
|
}
|
|
]}
|
|
/>
|
|
|
|
{/* Modal de Acesso ao Portal */}
|
|
{isPortalModalOpen && selectedCustomerForPortal && (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-md border border-zinc-200 dark:border-zinc-800">
|
|
<div className="p-6 border-b border-zinc-200 dark:border-zinc-800">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
|
|
<KeyIcon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-zinc-900 dark:text-white">
|
|
Gerar Acesso ao Portal
|
|
</h3>
|
|
<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
|
{selectedCustomerForPortal.company || selectedCustomerForPortal.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmitPortalAccess} className="p-6 space-y-4">
|
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<EnvelopeIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm font-medium text-blue-900 dark:text-blue-100">
|
|
Email de acesso
|
|
</p>
|
|
<p className="text-sm text-blue-700 dark:text-blue-300 font-mono mt-1">
|
|
{selectedCustomerForPortal.email}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
|
Senha de Acesso *
|
|
</label>
|
|
<div className="relative">
|
|
<LockClosedIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-400" />
|
|
<input
|
|
type="text"
|
|
value={portalPassword}
|
|
onChange={(e) => setPortalPassword(e.target.value)}
|
|
required
|
|
minLength={6}
|
|
placeholder="Digite uma senha (mín. 6 caracteres)"
|
|
className="w-full pl-10 pr-3 py-2.5 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<p className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
|
|
O cliente usará esta senha para acessar o portal em: <br />
|
|
<span className="font-mono text-blue-600 dark:text-blue-400">
|
|
{typeof window !== 'undefined' ? window.location.origin : ''}/login
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setIsPortalModalOpen(false);
|
|
setSelectedCustomerForPortal(null);
|
|
setPortalPassword('');
|
|
}}
|
|
className="flex-1 px-4 py-2.5 border border-zinc-300 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 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl"
|
|
>
|
|
Gerar Acesso
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{detailsCustomer && (
|
|
<div className="fixed inset-0 z-40 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
|
<div className="w-full max-w-4xl rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900">
|
|
<div className="flex items-start justify-between gap-6 border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
|
|
Revisar cadastro público
|
|
</p>
|
|
<h3 className="mt-2 text-2xl font-semibold text-zinc-900 dark:text-white">
|
|
{detailsCustomer.company || detailsCustomer.name}
|
|
</h3>
|
|
<div className="mt-3 flex flex-wrap items-center gap-2">
|
|
{detailsStatusBadge && (
|
|
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${detailsStatusBadge.className}`}>
|
|
{detailsStatusBadge.label}
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-zinc-500 dark:text-zinc-400">
|
|
Recebido em {formatDateTime(detailsCustomer.created_at)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={closeDetails}
|
|
className="rounded-full border border-transparent p-2 text-zinc-500 transition hover:border-zinc-200 hover:text-zinc-900 dark:hover:border-zinc-700 dark:hover:text-white"
|
|
aria-label="Fechar detalhes"
|
|
>
|
|
<XMarkIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-6 px-6 py-6">
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Contato principal
|
|
</p>
|
|
<p className="mt-1 text-lg font-semibold text-zinc-900 dark:text-white">
|
|
{detailsCustomer.name || '-'}
|
|
</p>
|
|
<p className="text-sm text-zinc-500">
|
|
{detailsCustomer.email || 'Sem e-mail informado'}
|
|
</p>
|
|
<p className="text-sm text-zinc-500">
|
|
{detailsCustomer.phone || 'Sem telefone'}
|
|
</p>
|
|
</div>
|
|
{detailsCustomer.company && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Empresa
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsCustomer.company}
|
|
</p>
|
|
{detailsCustomer.position && (
|
|
<p className="text-sm text-zinc-500">{detailsCustomer.position}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Tags vinculadas
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{detailsCustomer.tags?.length ? (
|
|
detailsCustomer.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="inline-flex items-center rounded-full border border-zinc-200 px-3 py-1 text-xs font-medium text-zinc-700 dark:border-zinc-700 dark:text-zinc-300"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span className="text-sm text-zinc-500">Sem tags</span>
|
|
)}
|
|
</div>
|
|
{!detailsPublicData && detailsCustomer.notes && (
|
|
<div className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-300">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
|
|
Observações
|
|
</p>
|
|
<p className="mt-2 whitespace-pre-line">
|
|
{detailsCustomer.notes}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/70">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500">
|
|
<EyeIcon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-zinc-900 dark:text-white">
|
|
Dados enviados no formulário público
|
|
</p>
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400">
|
|
Valide o cadastro com base nas informações enviadas diretamente pelo cliente.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{detailsPublicData ? (
|
|
<div className="space-y-4">
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{detailsPublicData.person_type && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Tipo de pessoa
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.person_type === 'pj' ? 'Empresa (PJ)' : 'Pessoa Física'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsDocumentLabel && detailsDocumentValue && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
{detailsDocumentLabel}
|
|
</p>
|
|
<p className="mt-1 font-mono text-base text-zinc-900 dark:text-white">
|
|
{detailsDocumentValue}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsPublicData.responsible_name && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Responsável
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.responsible_name}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsPublicData.full_name && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Nome completo
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.full_name}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsPublicData.company_name && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Razão social
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.company_name}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsPublicData.trade_name && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Nome fantasia
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.trade_name}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{(detailsPublicData.email || detailsPublicData.phone) && (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{detailsPublicData.email && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Email informado
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.email}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsPublicData.phone && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Telefone informado
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicData.phone}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{detailsPublicAddress && (
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Endereço
|
|
</p>
|
|
<p className="mt-1 text-base text-zinc-900 dark:text-white">
|
|
{detailsPublicAddress}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{detailsPublicData.message && (
|
|
<div className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-800/60">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
|
Mensagem enviada
|
|
</p>
|
|
<p className="mt-2 text-sm text-zinc-700 dark:text-zinc-200 whitespace-pre-line">
|
|
{detailsPublicData.message}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-zinc-500">
|
|
Não encontramos dados estruturados neste envio. Utilize as observações acima para orientar sua decisão.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{isDetailsPendingApproval && (
|
|
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-400/50 dark:bg-amber-500/10 dark:text-amber-200">
|
|
Ao aprovar, removemos a tag de pendência e este cliente aparecerá como liberado para receber credenciais pelo painel.
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-3 border-t border-zinc-200 pt-4 dark:border-zinc-800 sm:flex-row sm:justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={closeDetails}
|
|
className="flex-1 rounded-lg border border-zinc-200 px-4 py-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800 sm:flex-none sm:px-5"
|
|
>
|
|
Fechar
|
|
</button>
|
|
{isDetailsPendingApproval && (
|
|
<button
|
|
type="button"
|
|
onClick={() => handleApproveCustomer(detailsCustomer)}
|
|
disabled={isApprovingId === detailsCustomer.id}
|
|
className="flex-1 rounded-lg bg-gradient-to-r from-emerald-500 to-emerald-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg transition hover:from-emerald-600 hover:to-emerald-700 disabled:cursor-not-allowed disabled:opacity-70 sm:flex-none sm:px-5"
|
|
>
|
|
{isApprovingId === detailsCustomer.id ? 'Aprovando…' : 'Marcar como aprovado'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|