erik/aggios.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(release): snapshot 1.4.2

Browse Source
This commit is contained in:
Erik Silva
2025-12-17 13:36:23 -03:00
parent 2a112f169d
commit 99d828869a
95 changed files with 9933 additions and 1601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
front-end-dash.aggios.app/app/superadmin/agencies/page.tsx
View File

@@ -2,8 +2,12 @@
import { Fragment, useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Menu, Listbox, Transition } from '@headlessui/react';
import CreateAgencyModal from '@/components/agencies/CreateAgencyModal';
import ConfirmDialog from '@/components/layout/ConfirmDialog';
import Pagination from '@/components/layout/Pagination';
import { useToast } from '@/components/layout/ToastContext';
import {
BuildingOfficeIcon,
TrashIcon,
@@ -16,7 +20,15 @@ import {
CheckIcon,
ChevronUpDownIcon,
PlusIcon,
XMarkIcon
XMarkIcon,
UserGroupIcon,
ChartBarIcon,
FolderIcon,
LifebuoyIcon,
CreditCardIcon,
DocumentTextIcon,
ArchiveBoxIcon,
ShareIcon
} from '@heroicons/react/24/outline';
interface Agency {
@@ -30,8 +42,22 @@ interface Agency {
is_active: boolean;
created_at: string;
logo_url?: string;
plan_name?: string;
solutions?: Array<{ id: string; name: string; slug: string }>;
}
// Mapeamento de ícones para cada solução
const SOLUTION_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
'crm': UserGroupIcon,
'erp': ChartBarIcon,
'projetos': FolderIcon,
'helpdesk': LifebuoyIcon,
'pagamentos': CreditCardIcon,
'contratos': DocumentTextIcon,
'documentos': ArchiveBoxIcon,
'social': ShareIcon,
};
const STATUS_OPTIONS = [
{ id: 'all', name: 'Todos os Status' },
{ id: 'active', name: 'Ativas' },
@@ -47,10 +73,21 @@ const DATE_PRESETS = [
];
export default function AgenciesPage() {
const toast = useToast();
const router = useRouter();
const [agencies, setAgencies] = useState<Agency[]>([]);
const [loading, setLoading] = useState(true);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
// Confirmação e seleção múltipla
const [confirmOpen, setConfirmOpen] = useState(false);
const [agencyToDelete, setAgencyToDelete] = useState<string | null>(null);
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
// Paginação
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
// Filtros
const [searchTerm, setSearchTerm] = useState('');
const [selectedStatus, setSelectedStatus] = useState(STATUS_OPTIONS[0]);
@@ -80,13 +117,16 @@ export default function AgenciesPage() {
}
};
const handleDelete = async (id: string) => {
if (!confirm('Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.')) {
return;
}
const handleDeleteClick = (id: string) => {
setAgencyToDelete(id);
setConfirmOpen(true);
};
const handleConfirmDelete = async () => {
if (!agencyToDelete) return;
try {
const response = await fetch(`/api/admin/agencies/${id}`, {
const response = await fetch(`/api/admin/agencies/${agencyToDelete}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
@@ -94,16 +134,48 @@ export default function AgenciesPage() {
});
if (response.ok) {
setAgencies(agencies.filter(a => a.id !== id));
setAgencies(agencies.filter(a => a.id !== agencyToDelete));
selectedIds.delete(agencyToDelete);
setSelectedIds(new Set(selectedIds));
toast.success('Agência excluída', 'A agência foi excluída com sucesso.');
} else {
alert('Erro ao excluir agência');
toast.error('Erro ao excluir', 'Não foi possível excluir a agência.');
}
} catch (error) {
console.error('Error deleting agency:', error);
alert('Erro ao excluir agência');
toast.error('Erro ao excluir', 'Ocorreu um erro ao excluir a agência.');
}
};
const handleDeleteSelected = () => {
if (selectedIds.size === 0) return;
setAgencyToDelete('multiple');
setConfirmOpen(true);
};
const handleConfirmDeleteMultiple = async () => {
const idsToDelete = Array.from(selectedIds);
let successCount = 0;
for (const id of idsToDelete) {
try {
const response = await fetch(`/api/admin/agencies/${id}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
},
});
if (response.ok) successCount++;
} catch (error) {
console.error('Error deleting agency:', error);
}
}
setAgencies(agencies.filter(a => !selectedIds.has(a.id)));
setSelectedIds(new Set());
toast.success(`${successCount} agência(s) excluída(s)`, 'As agências selecionadas foram excluídas.');
};
const toggleActive = async (id: string, currentStatus: boolean) => {
try {
const response = await fetch(`/api/admin/agencies/${id}`, {
@@ -176,6 +248,33 @@ export default function AgenciesPage() {
return matchesSearch && matchesStatus && matchesDate;
});
// Paginação
const totalItems = filteredAgencies.length;
const totalPages = Math.ceil(totalItems / itemsPerPage);
const paginatedAgencies = filteredAgencies.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
// Seleção múltipla
const toggleSelectAll = () => {
if (selectedIds.size === paginatedAgencies.length) {
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(paginatedAgencies.map(a => a.id)));
}
};
const toggleSelect = (id: string) => {
const newSelected = new Set(selectedIds);
if (newSelected.has(id)) {
newSelected.delete(id);
} else {
newSelected.add(id);
}
setSelectedIds(newSelected);
};
return (
<div className="p-6 max-w-[1600px] mx-auto space-y-6">
{/* Header */}
@@ -186,14 +285,25 @@ export default function AgenciesPage() {
Gerencie seus parceiros e acompanhe o desempenho.
</p>
</div>
<button
onClick={() => setIsCreateModalOpen(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" />
Nova Agência
</button>
<div className="flex gap-2">
{selectedIds.size > 0 && (
<button
onClick={handleDeleteSelected}
className="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-lg bg-red-600 hover:bg-red-700 transition-colors"
>
<TrashIcon className="w-4 h-4" />
Excluir ({selectedIds.size})
</button>
)}
<button
onClick={() => setIsCreateModalOpen(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" />
Nova Agência
</button>
</div>
</div>
{/* Toolbar de Filtros */}
@@ -380,16 +490,50 @@ export default function AgenciesPage() {
<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-12">
<input
type="checkbox"
checked={selectedIds.size === paginatedAgencies.length && paginatedAgencies.length > 0}
onChange={toggleSelectAll}
className="w-4 h-4 rounded border-zinc-300 dark:border-zinc-600"
style={{ accentColor: 'var(--brand-color)' }}
/>
</th>
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Agência</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">Plano</th>
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Soluções</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-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Data Cadastro</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">
{filteredAgencies.map((agency) => (
<tr key={agency.id} className="group hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
{paginatedAgencies.map((agency) => (
<tr
key={agency.id}
onClick={(e) => {
// Não navegar se clicar no checkbox, botões ou links
if (
(e.target as HTMLElement).closest('input[type="checkbox"]') ||
(e.target as HTMLElement).closest('button') ||
(e.target as HTMLElement).closest('a')
) {
return;
}
router.push(`/superadmin/agencies/${agency.id}`);
}}
className="group hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors cursor-pointer"
>
<td className="px-6 py-4" onClick={(e) => e.stopPropagation()}>
<input
type="checkbox"
checked={selectedIds.has(agency.id)}
onChange={() => toggleSelect(agency.id)}
className="w-4 h-4 rounded border-zinc-300 dark:border-zinc-600"
style={{ accentColor: 'var(--brand-color)' }}
/>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-4">
{agency.logo_url ? (
@@ -428,6 +572,40 @@ export default function AgenciesPage() {
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
{agency.plan_name ? (
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-purple-50 text-purple-700 border border-purple-200 dark:bg-purple-900/20 dark:text-purple-400 dark:border-purple-900/30">
{agency.plan_name}
</span>
) : (
<span className="text-xs text-zinc-400">Sem plano</span>
)}
</td>
<td className="px-6 py-4">
{agency.solutions && agency.solutions.length > 0 ? (
<div className="flex flex-wrap gap-1 max-w-xs">
{agency.solutions.slice(0, 3).map((solution) => {
const Icon = SOLUTION_ICONS[solution.slug] || FolderIcon;
return (
<span
key={solution.id}
className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 border border-zinc-200 dark:border-zinc-700"
>
<Icon className="w-3.5 h-3.5 text-[var(--brand-color)]" />
{solution.name}
</span>
);
})}
{agency.solutions.length > 3 && (
<span className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+{agency.solutions.length - 3}
</span>
)}
</div>
) : (
<span className="text-xs text-zinc-400">Sem soluções</span>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => toggleActive(agency.id, agency.is_active)}
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-all ${agency.is_active
@@ -446,7 +624,7 @@ export default function AgenciesPage() {
year: 'numeric'
})}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right">
<td className="px-6 py-4 whitespace-nowrap text-right" onClick={(e) => e.stopPropagation()}>
<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" />
@@ -487,7 +665,7 @@ export default function AgenciesPage() {
<Menu.Item>
{({ active }) => (
<button
onClick={() => handleDelete(agency.id)}
onClick={() => handleDeleteClick(agency.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`}
>
@@ -506,23 +684,29 @@ export default function AgenciesPage() {
</table>
</div>
{/* Footer da Tabela (Paginação Mockada) */}
<div className="px-6 py-4 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-800/50 flex items-center justify-between">
<p className="text-xs text-zinc-500 dark:text-zinc-400">
Mostrando <span className="font-medium">{filteredAgencies.length}</span> resultados
</p>
<div className="flex gap-2">
<button disabled className="px-3 py-1 text-xs font-medium text-zinc-400 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md cursor-not-allowed opacity-50">
Anterior
</button>
<button disabled className="px-3 py-1 text-xs font-medium text-zinc-400 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md cursor-not-allowed opacity-50">
Próxima
</button>
</div>
</div>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
totalItems={totalItems}
itemsPerPage={itemsPerPage}
onPageChange={setCurrentPage}
/>
</div>
)}
<ConfirmDialog
isOpen={confirmOpen}
onClose={() => setConfirmOpen(false)}
onConfirm={agencyToDelete === 'multiple' ? handleConfirmDeleteMultiple : handleConfirmDelete}
title={agencyToDelete === 'multiple' ? `Excluir ${selectedIds.size} agências` : 'Excluir agência'}
message={agencyToDelete === 'multiple'
? `Tem certeza que deseja excluir ${selectedIds.size} agências? Esta ação não pode ser desfeita.`
: 'Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.'}
confirmText="Excluir"
cancelText="Cancelar"
variant="danger"
/>
<CreateAgencyModal
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}