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

440
front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx
View File

@@ -1,9 +1,35 @@
'use client';
import { BuildingOfficeIcon, ArrowLeftIcon, PaintBrushIcon, MapPinIcon } from '@heroicons/react/24/outline';
import {
BuildingOfficeIcon,
ArrowLeftIcon,
PaintBrushIcon,
MapPinIcon,
UserGroupIcon,
ChartBarIcon,
FolderIcon,
LifebuoyIcon,
CreditCardIcon,
DocumentTextIcon,
ArchiveBoxIcon,
ShareIcon
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Tabs, { TabItem } from '@/components/ui/Tabs';
// 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,
};
interface AgencyTenant {
id: string;
@@ -41,6 +67,17 @@ interface AgencyDetails {
email: string;
name: string;
};
subscription?: {
plan_id: string;
plan_name: string;
status: string;
solutions: Array<{
id: string;
name: string;
slug: string;
icon: string;
}>;
};
access_url: string;
}
@@ -110,76 +147,16 @@ export default function AgencyDetailPage() {
const { tenant } = details;
return (
<div className="p-8 max-w-7xl mx-auto">
<div className="mb-8">
<Link
href="/superadmin/agencies"
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 mb-6 transition-colors"
>
<ArrowLeftIcon className="w-4 h-4" />
Voltar para Agências
</Link>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex items-center gap-4">
<div className="h-16 w-16 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center p-2">
{tenant.logo_url ? (
<img src={tenant.logo_url} alt={tenant.name} className="max-h-full max-w-full object-contain" />
) : (
<BuildingOfficeIcon className="w-8 h-8 text-gray-400" />
)}
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tenant.name}</h1>
<div className="flex items-center gap-2 mt-1">
<a
href={details.access_url}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1"
>
{tenant.subdomain}.aggios.app
<ArrowLeftIcon className="w-3 h-3 rotate-135" />
</a>
<span className="text-gray-300 dark:text-gray-600">|</span>
<span className={`px-2 py-0.5 inline-flex text-xs font-medium rounded-full ${tenant.is_active
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
}`}>
{tenant.is_active ? 'Ativa' : 'Inativa'}
</span>
</div>
</div>
</div>
<div className="flex gap-3">
<Link
href={`/superadmin/agencies/${tenant.id}/edit`}
className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
>
Editar Dados
</Link>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
>
Acessar Painel
</button>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Coluna Esquerda (2/3) */}
<div className="lg:col-span-2 space-y-6">
const tabsConfig: TabItem[] = [
{
name: 'Visão Geral',
icon: BuildingOfficeIcon,
content: (
<div className="space-y-6">
{/* Informações Básicas */}
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<BuildingOfficeIcon className="w-5 h-5 text-gray-500" />
Dados da Empresa
</h2>
</div>
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">Dados da Empresa</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Razão Social</dt>
<dd className="mt-1 text-sm font-medium text-gray-900 dark:text-white">{tenant.razao_social || '-'}</dd>
@@ -203,15 +180,15 @@ export default function AgencyDetailPage() {
</div>
</div>
{/* Endereço */}
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<MapPinIcon className="w-5 h-5 text-gray-500" />
Localização
</h2>
</div>
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="border-t border-gray-200 dark:border-gray-800 pt-6"></div>
{/* Localização */}
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<MapPinIcon className="w-5 h-5 text-gray-500" />
Localização
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="md:col-span-2">
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Endereço</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-white">
@@ -240,58 +217,13 @@ export default function AgencyDetailPage() {
</div>
</div>
</div>
</div>
{/* Coluna Direita (1/3) */}
<div className="space-y-6">
{/* Branding */}
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<PaintBrushIcon className="w-5 h-5 text-gray-500" />
Identidade Visual
</h2>
</div>
<div className="p-6 space-y-6">
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Cores da Marca</dt>
<div className="flex gap-4">
<div className="text-center">
<div
className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
style={{ backgroundColor: tenant.primary_color || '#000000' }}
/>
<span className="text-xs font-mono text-gray-500">{tenant.primary_color || '-'}</span>
</div>
<div className="text-center">
<div
className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
style={{ backgroundColor: tenant.secondary_color || '#ffffff' }}
/>
<span className="text-xs font-mono text-gray-500">{tenant.secondary_color || '-'}</span>
</div>
</div>
</div>
{tenant.logo_horizontal_url && (
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Logo Horizontal</dt>
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 flex justify-center">
<img src={tenant.logo_horizontal_url} alt="Logo Horizontal" className="max-h-12 max-w-full object-contain" />
</div>
</div>
)}
</div>
</div>
<div className="border-t border-gray-200 dark:border-gray-800 pt-6"></div>
{/* Contato */}
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/50">
<h2 className="text-base font-semibold text-gray-900 dark:text-white">
Contato
</h2>
</div>
<div className="p-6 space-y-4">
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">Contato</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Email</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-white break-all">{tenant.email || '-'}</dd>
@@ -300,7 +232,7 @@ export default function AgencyDetailPage() {
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Telefone</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.phone || '-'}</dd>
</div>
<div>
<div className="md:col-span-2">
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Website</dt>
<dd className="mt-1">
{tenant.website ? (
@@ -308,7 +240,7 @@ export default function AgencyDetailPage() {
href={tenant.website}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-blue-600 dark:text-blue-400 hover:underline break-all"
className="text-sm text-[var(--brand-color)] hover:underline break-all"
>
{tenant.website}
</a>
@@ -318,25 +250,257 @@ export default function AgencyDetailPage() {
</div>
</div>
<div className="border-t border-gray-200 dark:border-gray-800 pt-6"></div>
{/* Metadados */}
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<dl className="space-y-3">
<div className="flex justify-between">
<dt className="text-sm text-gray-500 dark:text-gray-400">Criada em</dt>
<dd className="text-sm font-medium text-gray-900 dark:text-white">
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">Metadados</h3>
<dl className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Criada em</dt>
<dd className="mt-1 text-sm font-medium text-gray-900 dark:text-white">
{new Date(tenant.created_at).toLocaleDateString('pt-BR')}
</dd>
</div>
<div className="flex justify-between">
<dt className="text-sm text-gray-500 dark:text-gray-400">Última atualização</dt>
<dd className="text-sm font-medium text-gray-900 dark:text-white">
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Última atualização</dt>
<dd className="mt-1 text-sm font-medium text-gray-900 dark:text-white">
{new Date(tenant.updated_at).toLocaleDateString('pt-BR')}
</dd>
</div>
</dl>
</div>
</div>
)
},
{
name: 'Identidade Visual',
icon: PaintBrushIcon,
content: (
<div className="space-y-8">
{/* Cores da Marca */}
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">Cores da Marca</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<dt className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Cor Primária</dt>
<div className="flex items-center gap-4">
<div
className="w-20 h-20 rounded-lg border-2 border-gray-200 dark:border-gray-700 shadow-sm"
style={{ backgroundColor: tenant.primary_color || '#000000' }}
/>
<div>
<span className="text-xs font-mono text-gray-900 dark:text-white block mb-1">
{tenant.primary_color || '-'}
</span>
<span className="text-xs text-gray-500 dark:text-gray-400">
Cor principal da marca
</span>
</div>
</div>
</div>
<div>
<dt className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Cor Secundária</dt>
<div className="flex items-center gap-4">
<div
className="w-20 h-20 rounded-lg border-2 border-gray-200 dark:border-gray-700 shadow-sm"
style={{ backgroundColor: tenant.secondary_color || '#ffffff' }}
/>
<div>
<span className="text-xs font-mono text-gray-900 dark:text-white block mb-1">
{tenant.secondary_color || '-'}
</span>
<span className="text-xs text-gray-500 dark:text-gray-400">
Cor de apoio da marca
</span>
</div>
</div>
</div>
</div>
</div>
{/* Logos */}
<div className="border-t border-gray-200 dark:border-gray-800 pt-8">
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">Logotipos</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Logo Principal */}
<div>
<dt className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Logo Principal</dt>
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center min-h-[120px]">
{tenant.logo_url ? (
<img src={tenant.logo_url} alt="Logo" className="max-h-20 max-w-full object-contain" />
) : (
<span className="text-sm text-gray-400">Sem logo</span>
)}
</div>
</div>
{/* Logo Horizontal */}
<div>
<dt className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Logo Horizontal</dt>
<div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center min-h-[120px]">
{tenant.logo_horizontal_url ? (
<img src={tenant.logo_horizontal_url} alt="Logo Horizontal" className="max-h-16 max-w-full object-contain" />
) : (
<span className="text-sm text-gray-400">Sem logo horizontal</span>
)}
</div>
</div>
</div>
</div>
</div>
)
},
{
name: 'Plano e Soluções',
content: (
<div className="space-y-6">
{details.subscription ? (
<>
{/* Informações do Plano */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Plano</dt>
<dd className="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{details.subscription.plan_name}</dd>
</div>
<div>
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Status</dt>
<span className={`px-3 py-1 inline-flex text-sm font-medium rounded-full ${details.subscription.status === 'active'
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400'
}`}>
{details.subscription.status === 'active' ? 'Ativa' : details.subscription.status}
</span>
</div>
</div>
<div className="border-t border-gray-200 dark:border-gray-800 pt-6"></div>
{/* Soluções Disponíveis */}
{details.subscription.solutions && details.subscription.solutions.length > 0 && (
<div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">
Soluções Disponíveis ({details.subscription.solutions.length})
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{details.subscription.solutions.map((solution) => {
const Icon = SOLUTION_ICONS[solution.slug] || FolderIcon;
return (
<div
key={solution.id}
className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
>
<div className="p-2.5 rounded-xl bg-white dark:bg-zinc-800 border border-gray-200 dark:border-gray-700">
<Icon className="w-5 h-5 text-[var(--brand-color)]" />
</div>
<div>
<span className="text-sm font-medium text-gray-900 dark:text-white block">
{solution.name}
</span>
<span className="text-xs text-gray-500 dark:text-gray-400">
{solution.slug}
</span>
</div>
</div>
);
})}
</div>
</div>
)}
<div className="border-t border-gray-200 dark:border-gray-800 pt-6"></div>
{/* Ações */}
<div className="flex gap-3">
<Link
href={`/superadmin/plans/${details.subscription.plan_id}`}
className="inline-flex items-center px-4 py-2 bg-[var(--brand-color)] text-white rounded-lg hover:opacity-90 transition-all font-medium text-sm"
>
Ver Detalhes do Plano →
</Link>
<Link
href={`/superadmin/plans/${details.subscription.plan_id}`}
className="inline-flex items-center px-4 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors font-medium text-sm"
>
Gerenciar Soluções
</Link>
</div>
</>
) : (
<div className="text-center py-12">
<svg className="w-16 h-16 text-gray-300 dark:text-gray-700 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Nenhuma Assinatura</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
Esta agência ainda não possui um plano ativo.
</p>
</div>
)}
</div>
)
}
];
return (
<div className="p-8 max-w-7xl mx-auto">
<div className="mb-8">
<Link
href="/superadmin/agencies"
className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 mb-6 transition-colors"
>
<ArrowLeftIcon className="w-4 h-4" />
Voltar para Agências
</Link>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex items-center gap-4">
<div className="h-16 w-16 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center p-2">
{tenant.logo_url ? (
<img src={tenant.logo_url} alt={tenant.name} className="max-h-full max-w-full object-contain" />
) : (
<BuildingOfficeIcon className="w-8 h-8 text-gray-400" />
)}
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tenant.name}</h1>
<div className="flex items-center gap-2 mt-1">
<a
href={details.access_url}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-[var(--brand-color)] hover:underline flex items-center gap-1"
>
{tenant.subdomain}.aggios.app
<ArrowLeftIcon className="w-3 h-3 rotate-135" />
</a>
<span className="text-gray-300 dark:text-gray-600">|</span>
<span className={`px-2 py-0.5 inline-flex text-xs font-medium rounded-full ${tenant.is_active
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
}`}>
{tenant.is_active ? 'Ativa' : 'Inativa'}
</span>
</div>
</div>
</div>
<div className="flex gap-3">
<Link
href={`/superadmin/agencies/${tenant.id}/edit`}
className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
>
Editar Dados
</Link>
<button
className="px-4 py-2 bg-[var(--brand-color)] text-white rounded-lg hover:opacity-90 transition-all font-medium text-sm"
>
Acessar Painel
</button>
</div>
</div>
</div>
<Tabs tabs={tabsConfig} />
</div>
);
}

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)}