feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
342
front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx
Normal file
342
front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
'use client';
|
||||
|
||||
import { BuildingOfficeIcon, ArrowLeftIcon, PaintBrushIcon, MapPinIcon } from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
interface AgencyTenant {
|
||||
id: string;
|
||||
name: string;
|
||||
subdomain: string;
|
||||
domain: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
cnpj: string;
|
||||
razao_social: string;
|
||||
description: string;
|
||||
industry: string;
|
||||
team_size: string;
|
||||
address: string;
|
||||
neighborhood: string;
|
||||
number: string;
|
||||
complement: string;
|
||||
city: string;
|
||||
state: string;
|
||||
zip: string;
|
||||
primary_color: string;
|
||||
secondary_color: string;
|
||||
logo_url: string;
|
||||
logo_horizontal_url: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface AgencyDetails {
|
||||
tenant: AgencyTenant;
|
||||
admin?: {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
};
|
||||
access_url: string;
|
||||
}
|
||||
|
||||
export default function AgencyDetailPage() {
|
||||
const params = useParams();
|
||||
const [details, setDetails] = useState<AgencyDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (params.id) {
|
||||
fetchAgency(params.id as string);
|
||||
}
|
||||
}, [params.id]);
|
||||
|
||||
const fetchAgency = async (id: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${id}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
// Handle both flat (legacy) and nested (new) responses
|
||||
if (data.tenant) {
|
||||
setDetails(data);
|
||||
} else {
|
||||
// Fallback for legacy flat response
|
||||
setDetails({
|
||||
tenant: data,
|
||||
access_url: `http://${data.subdomain}.localhost`, // Fallback URL
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching agency:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-8 flex items-center justify-center min-h-[400px]">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!details || !details.tenant) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative" role="alert">
|
||||
<strong className="font-bold">Erro!</strong>
|
||||
<span className="block sm:inline"> Agência não encontrada.</span>
|
||||
</div>
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="mt-4 inline-flex items-center gap-2 text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
<ArrowLeftIcon className="w-4 h-4" />
|
||||
Voltar para Agências
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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-300 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">
|
||||
{/* 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>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">CNPJ</dt>
|
||||
<dd className="mt-1 text-sm font-medium text-gray-900 dark:text-white">{tenant.cnpj || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Setor</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.industry || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tamanho da Equipe</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.team_size || '-'}</dd>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Descrição</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.description || '-'}</dd>
|
||||
</div>
|
||||
</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="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">
|
||||
{tenant.address ? (
|
||||
<>
|
||||
{tenant.address}
|
||||
{tenant.number ? `, ${tenant.number}` : ''}
|
||||
{tenant.complement ? ` - ${tenant.complement}` : ''}
|
||||
</>
|
||||
) : '-'}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Bairro</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.neighborhood || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Cidade / UF</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">
|
||||
{tenant.city && tenant.state ? `${tenant.city} - ${tenant.state}` : '-'}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">CEP</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 dark:text-white">{tenant.zip || '-'}</dd>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<dt className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Website</dt>
|
||||
<dd className="mt-1">
|
||||
{tenant.website ? (
|
||||
<a
|
||||
href={tenant.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 dark:text-blue-400 hover:underline break-all"
|
||||
>
|
||||
{tenant.website}
|
||||
</a>
|
||||
) : '-'}
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
{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">
|
||||
{new Date(tenant.updated_at).toLocaleDateString('pt-BR')}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
364
front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx
Normal file
364
front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function NewAgencyPage() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
// Agência
|
||||
agencyName: '',
|
||||
subdomain: '',
|
||||
cnpj: '',
|
||||
razaoSocial: '',
|
||||
description: '',
|
||||
website: '',
|
||||
industry: '',
|
||||
phone: '',
|
||||
teamSize: '',
|
||||
|
||||
// Endereço
|
||||
cep: '',
|
||||
state: '',
|
||||
city: '',
|
||||
neighborhood: '',
|
||||
street: '',
|
||||
number: '',
|
||||
complement: '',
|
||||
|
||||
// Admin
|
||||
adminEmail: '',
|
||||
adminPassword: '',
|
||||
adminName: '',
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.text();
|
||||
throw new Error(errorData || 'Erro ao criar agência');
|
||||
}
|
||||
|
||||
router.push('/superadmin/agencies');
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 h-full overflow-auto">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Nova Agência</h1>
|
||||
<p className="text-gray-600 mt-2">Cadastre uma nova agência no sistema Aggios</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Informações da Agência */}
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900">Informações da Agência</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nome da Agência *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="agencyName"
|
||||
required
|
||||
value={formData.agencyName}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Subdomínio *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
required
|
||||
value={formData.subdomain}
|
||||
onChange={handleChange}
|
||||
placeholder="exemplo"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Será usado como: exemplo.aggios.app</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">CNPJ</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cnpj"
|
||||
value={formData.cnpj}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Razão Social</label>
|
||||
<input
|
||||
type="text"
|
||||
name="razaoSocial"
|
||||
value={formData.razaoSocial}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Website</label>
|
||||
<input
|
||||
type="url"
|
||||
name="website"
|
||||
value={formData.website}
|
||||
onChange={handleChange}
|
||||
placeholder="https://"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Telefone</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Setor</label>
|
||||
<input
|
||||
type="text"
|
||||
name="industry"
|
||||
value={formData.industry}
|
||||
onChange={handleChange}
|
||||
placeholder="Ex: Tecnologia, Marketing"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Tamanho do Time</label>
|
||||
<select
|
||||
name="teamSize"
|
||||
value={formData.teamSize}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="1-10">1-10 pessoas</option>
|
||||
<option value="11-50">11-50 pessoas</option>
|
||||
<option value="51-200">51-200 pessoas</option>
|
||||
<option value="201+">201+ pessoas</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Endereço */}
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900">Endereço</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">CEP</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cep"
|
||||
value={formData.cep}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Estado</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.state}
|
||||
onChange={handleChange}
|
||||
maxLength={2}
|
||||
placeholder="SP"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Cidade</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Bairro</label>
|
||||
<input
|
||||
type="text"
|
||||
name="neighborhood"
|
||||
value={formData.neighborhood}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Número</label>
|
||||
<input
|
||||
type="text"
|
||||
name="number"
|
||||
value={formData.number}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Rua</label>
|
||||
<input
|
||||
type="text"
|
||||
name="street"
|
||||
value={formData.street}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Complemento</label>
|
||||
<input
|
||||
type="text"
|
||||
name="complement"
|
||||
value={formData.complement}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Administrador */}
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 text-gray-900">Administrador da Agência</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nome do Admin *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="adminName"
|
||||
required
|
||||
value={formData.adminName}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email do Admin *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="adminEmail"
|
||||
required
|
||||
value={formData.adminEmail}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Senha do Admin *
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="adminPassword"
|
||||
required
|
||||
minLength={8}
|
||||
value={formData.adminPassword}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Botões */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="px-6 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Criando...' : 'Criar Agência'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
533
front-end-dash.aggios.app/app/superadmin/agencies/page.tsx
Normal file
533
front-end-dash.aggios.app/app/superadmin/agencies/page.tsx
Normal file
@@ -0,0 +1,533 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Menu, Listbox, Transition } from '@headlessui/react';
|
||||
import CreateAgencyModal from '@/components/agencies/CreateAgencyModal';
|
||||
import {
|
||||
BuildingOfficeIcon,
|
||||
TrashIcon,
|
||||
EyeIcon,
|
||||
PencilIcon,
|
||||
EllipsisVerticalIcon,
|
||||
MagnifyingGlassIcon,
|
||||
FunnelIcon,
|
||||
CalendarIcon,
|
||||
CheckIcon,
|
||||
ChevronUpDownIcon,
|
||||
PlusIcon,
|
||||
XMarkIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface Agency {
|
||||
id: string;
|
||||
name: string;
|
||||
subdomain: string;
|
||||
domain: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
cnpj: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
logo_url?: string;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ id: 'all', name: 'Todos os Status' },
|
||||
{ id: 'active', name: 'Ativas' },
|
||||
{ id: 'inactive', name: 'Inativas' },
|
||||
];
|
||||
|
||||
const DATE_PRESETS = [
|
||||
{ id: 'all', name: 'Todo o período' },
|
||||
{ id: '7d', name: 'Últimos 7 dias' },
|
||||
{ id: '15d', name: 'Últimos 15 dias' },
|
||||
{ id: '30d', name: 'Últimos 30 dias' },
|
||||
{ id: 'custom', name: 'Personalizado' },
|
||||
];
|
||||
|
||||
export default function AgenciesPage() {
|
||||
const [agencies, setAgencies] = useState<Agency[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
|
||||
// Filtros
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedStatus, setSelectedStatus] = useState(STATUS_OPTIONS[0]);
|
||||
const [selectedDatePreset, setSelectedDatePreset] = useState(DATE_PRESETS[0]);
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
fetchAgencies();
|
||||
}, []);
|
||||
|
||||
const fetchAgencies = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencies(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching agencies:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setAgencies(agencies.filter(a => a.id !== id));
|
||||
} else {
|
||||
alert('Erro ao excluir agência');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting agency:', error);
|
||||
alert('Erro ao excluir agência');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleActive = async (id: string, currentStatus: boolean) => {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ is_active: !currentStatus }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setAgencies(agencies.map(a =>
|
||||
a.id === id ? { ...a, is_active: !currentStatus } : a
|
||||
));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling agency status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchTerm('');
|
||||
setSelectedStatus(STATUS_OPTIONS[0]);
|
||||
setSelectedDatePreset(DATE_PRESETS[0]);
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
};
|
||||
|
||||
// Lógica de Filtragem
|
||||
const filteredAgencies = agencies.filter((agency) => {
|
||||
// Texto
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const matchesSearch =
|
||||
(agency.name?.toLowerCase() || '').includes(searchLower) ||
|
||||
(agency.email?.toLowerCase() || '').includes(searchLower) ||
|
||||
(agency.subdomain?.toLowerCase() || '').includes(searchLower);
|
||||
|
||||
// Status
|
||||
const matchesStatus =
|
||||
selectedStatus.id === 'all' ? true :
|
||||
selectedStatus.id === 'active' ? agency.is_active :
|
||||
!agency.is_active;
|
||||
|
||||
// Data
|
||||
let matchesDate = true;
|
||||
const agencyDate = new Date(agency.created_at);
|
||||
const now = new Date();
|
||||
|
||||
if (selectedDatePreset.id === 'custom') {
|
||||
if (startDate) {
|
||||
const start = new Date(startDate);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
if (agencyDate < start) matchesDate = false;
|
||||
}
|
||||
if (endDate) {
|
||||
const end = new Date(endDate);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
if (agencyDate > end) matchesDate = false;
|
||||
}
|
||||
} else if (selectedDatePreset.id !== 'all') {
|
||||
const diffTime = Math.abs(now.getTime() - agencyDate.getTime());
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (selectedDatePreset.id === '7d') matchesDate = diffDays <= 7;
|
||||
if (selectedDatePreset.id === '15d') matchesDate = diffDays <= 15;
|
||||
if (selectedDatePreset.id === '30d') matchesDate = diffDays <= 30;
|
||||
}
|
||||
|
||||
return matchesSearch && matchesStatus && matchesDate;
|
||||
});
|
||||
|
||||
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">Agências</h1>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
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>
|
||||
|
||||
{/* Toolbar de Filtros */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
|
||||
{/* Busca */}
|
||||
<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 ou subdomínio..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
|
||||
{/* Filtro de Status */}
|
||||
<Listbox value={selectedStatus} onChange={setSelectedStatus}>
|
||||
<div className="relative w-full sm:w-[180px]">
|
||||
<Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-900 py-2 pl-3 pr-10 text-left text-sm border border-zinc-200 dark:border-zinc-700 focus:outline-none focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] text-zinc-700 dark:text-zinc-300">
|
||||
<span className="block truncate">{selectedStatus.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon className="h-4 w-4 text-zinc-400" aria-hidden="true" />
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-800 py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border border-zinc-200 dark:border-zinc-700">
|
||||
{STATUS_OPTIONS.map((status, statusIdx) => (
|
||||
<Listbox.Option
|
||||
key={statusIdx}
|
||||
className={({ active, selected }) =>
|
||||
`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-zinc-100 dark:bg-zinc-700 text-zinc-900 dark:text-white' : 'text-zinc-900 dark:text-zinc-100'
|
||||
}`
|
||||
}
|
||||
value={status}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
|
||||
{status.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[var(--brand-color)]">
|
||||
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
{/* Filtro de Data Unificado */}
|
||||
<Menu as="div" className="relative w-full sm:w-auto">
|
||||
<Menu.Button className="relative w-full sm:w-[220px] cursor-pointer rounded-lg bg-white dark:bg-zinc-900 py-2 pl-3 pr-10 text-left text-sm border border-zinc-200 dark:border-zinc-700 focus:outline-none focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] text-zinc-700 dark:text-zinc-300 flex items-center gap-2">
|
||||
<CalendarIcon className="w-4 h-4 text-zinc-400" />
|
||||
<span className="block truncate">
|
||||
{selectedDatePreset.id === 'custom'
|
||||
? (startDate && endDate ? `${new Date(startDate).toLocaleDateString()} - ${new Date(endDate).toLocaleDateString()}` : 'Selecionar período')
|
||||
: selectedDatePreset.name}
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon className="h-4 w-4 text-zinc-400" aria-hidden="true" />
|
||||
</span>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 z-10 mt-2 w-72 origin-top-right rounded-xl bg-white dark:bg-zinc-900 ring-1 ring-black ring-opacity-5 focus:outline-none border border-zinc-200 dark:border-zinc-700 divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
<div className="p-1">
|
||||
{DATE_PRESETS.filter(p => p.id !== 'custom').map((preset) => (
|
||||
<Menu.Item key={preset.id}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedDatePreset(preset);
|
||||
setStartDate('');
|
||||
setEndDate('');
|
||||
}}
|
||||
className={`${active ? 'bg-zinc-100 dark:bg-zinc-800' : ''
|
||||
} ${selectedDatePreset.id === preset.id ? 'text-[var(--brand-color)] font-medium' : 'text-zinc-700 dark:text-zinc-300'
|
||||
} group flex w-full items-center rounded-lg px-2 py-2 text-sm`}
|
||||
>
|
||||
{preset.name}
|
||||
{selectedDatePreset.id === preset.id && (
|
||||
<CheckIcon className="ml-auto h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-3 space-y-3">
|
||||
<div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">
|
||||
Personalizado
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs text-zinc-500 mb-1">Início</label>
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => {
|
||||
setStartDate(e.target.value);
|
||||
setSelectedDatePreset(DATE_PRESETS.find(p => p.id === 'custom')!);
|
||||
}}
|
||||
className="block w-full px-2 py-1 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:border-[var(--brand-color)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-zinc-500 mb-1">Fim</label>
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => {
|
||||
setEndDate(e.target.value);
|
||||
setSelectedDatePreset(DATE_PRESETS.find(p => p.id === 'custom')!);
|
||||
}}
|
||||
className="block w-full px-2 py-1 text-xs border border-zinc-200 dark:border-zinc-700 rounded bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:border-[var(--brand-color)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
||||
{/* Botão Limpar */}
|
||||
{(searchTerm || selectedStatus.id !== 'all' || selectedDatePreset.id !== 'all') && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-zinc-200 dark:border-zinc-700 text-sm font-medium rounded-lg text-zinc-700 dark:text-zinc-200 bg-white dark:bg-zinc-900 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--brand-color)]"
|
||||
title="Limpar Filtros"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabela */}
|
||||
{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>
|
||||
) : filteredAgencies.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">
|
||||
<BuildingOfficeIcon className="w-8 h-8 text-zinc-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-zinc-900 dark:text-white mb-1">
|
||||
Nenhuma agência encontrada
|
||||
</h3>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 max-w-sm mx-auto">
|
||||
Não encontramos resultados para os filtros selecionados. Tente limpar a busca ou alterar os filtros.
|
||||
</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="mt-4 text-sm text-[var(--brand-color)] hover:underline font-medium"
|
||||
>
|
||||
Limpar todos os filtros
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50/50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-800">
|
||||
<th className="px-6 py-4 text-left text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">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">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">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-4">
|
||||
{agency.logo_url ? (
|
||||
<img
|
||||
src={agency.logo_url}
|
||||
alt={agency.name}
|
||||
className="w-10 h-10 rounded-lg object-cover bg-white dark:bg-zinc-800"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-sm"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
{agency.name?.substring(0, 2).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{agency.name}
|
||||
</div>
|
||||
<a
|
||||
href={`http://${agency.subdomain}.localhost`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-zinc-500 hover:text-[var(--brand-color)] transition-colors flex items-center gap-1"
|
||||
>
|
||||
{agency.subdomain}.aggios.app
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-sm text-zinc-700 dark:text-zinc-300">{agency.email}</span>
|
||||
<span className="text-xs text-zinc-400">{agency.phone || 'Sem telefone'}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<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
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-900/30'
|
||||
: 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700'
|
||||
}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${agency.is_active ? 'bg-emerald-500' : 'bg-zinc-400'}`} />
|
||||
{agency.is_active ? 'Ativo' : 'Inativo'}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{new Date(agency.created_at).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<Menu.Button className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors outline-none">
|
||||
<EllipsisVerticalIcon className="w-5 h-5" />
|
||||
</Menu.Button>
|
||||
<Menu.Items
|
||||
transition
|
||||
portal
|
||||
anchor="bottom end"
|
||||
className="w-48 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl bg-white dark:bg-zinc-900 focus:outline-none z-50 border border-zinc-200 dark:border-zinc-800 [--anchor-gap:8px] transition duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href={`/superadmin/agencies/${agency.id}`}
|
||||
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" />
|
||||
Detalhes
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href={`/superadmin/agencies/${agency.id}/edit`}
|
||||
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
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
<div className="px-1 py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => handleDelete(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`}
|
||||
>
|
||||
<TrashIcon className="mr-2 h-4 w-4" />
|
||||
Excluir
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Menu>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CreateAgencyModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
onSuccess={fetchAgencies}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { LinkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function AgencyTemplatesPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<LinkIcon className="w-6 h-6 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Templates de Agência</h1>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Gerencie templates para cadastro de novas agências
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<LinkIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white mb-1">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
A gestão de templates de agência estará disponível em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
front-end-dash.aggios.app/app/superadmin/layout.tsx
Normal file
15
front-end-dash.aggios.app/app/superadmin/layout.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { DashboardLayout } from '@/components/layout/DashboardLayout';
|
||||
|
||||
export default function SuperAdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
{children}
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -2,484 +2,288 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
BuildingOfficeIcon,
|
||||
UserGroupIcon,
|
||||
LinkIcon,
|
||||
ChartBarIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface Agency {
|
||||
id: string;
|
||||
name: string;
|
||||
subdomain: string;
|
||||
domain: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface AgencyDetails {
|
||||
access_url: string;
|
||||
tenant: {
|
||||
id: string;
|
||||
name: string;
|
||||
domain: string;
|
||||
subdomain: string;
|
||||
cnpj?: string;
|
||||
razao_social?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
website?: string;
|
||||
address?: string;
|
||||
city?: string;
|
||||
state?: string;
|
||||
zip?: string;
|
||||
description?: string;
|
||||
industry?: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
admin?: {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
role: string;
|
||||
created_at: string;
|
||||
tenant_id?: string;
|
||||
};
|
||||
interface Stats {
|
||||
totalAgencies: number;
|
||||
activeAgencies: number;
|
||||
inactiveAgencies: number;
|
||||
totalUsers: number;
|
||||
}
|
||||
|
||||
export default function PainelPage() {
|
||||
export default function SuperAdminDashboard() {
|
||||
const router = useRouter();
|
||||
const [userData, setUserData] = useState<any>(null);
|
||||
const [agencies, setAgencies] = useState<Agency[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingAgencies, setLoadingAgencies] = useState(true);
|
||||
const [selectedAgencyId, setSelectedAgencyId] = useState<string | null>(null);
|
||||
const [selectedDetails, setSelectedDetails] = useState<AgencyDetails | null>(null);
|
||||
const [detailsLoadingId, setDetailsLoadingId] = useState<string | null>(null);
|
||||
const [detailsError, setDetailsError] = useState<string | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [agencies, setAgencies] = useState<Agency[]>([]);
|
||||
const [stats, setStats] = useState<Stats>({
|
||||
totalAgencies: 0,
|
||||
activeAgencies: 0,
|
||||
inactiveAgencies: 0,
|
||||
totalUsers: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se usuário está logado
|
||||
if (!isAuthenticated()) {
|
||||
const token = localStorage.getItem('token');
|
||||
const userData = localStorage.getItem('user');
|
||||
|
||||
if (!token || !userData) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const user = getUser();
|
||||
if (user) {
|
||||
// Verificar se é SUPERADMIN
|
||||
if (user.role !== 'SUPERADMIN') {
|
||||
alert('Acesso negado. Apenas SUPERADMIN pode acessar este painel.');
|
||||
clearAuth();
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
setUserData(user);
|
||||
setLoading(false);
|
||||
loadAgencies();
|
||||
} else {
|
||||
const user = JSON.parse(userData);
|
||||
if (user.role !== 'SUPERADMIN') {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, [router]);
|
||||
|
||||
const loadAgencies = async () => {
|
||||
setLoadingAgencies(true);
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencies(data);
|
||||
if (selectedAgencyId && !data.some((agency: Agency) => agency.id === selectedAgencyId)) {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
}
|
||||
} else {
|
||||
console.error('Erro ao carregar agências');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar agências:', error);
|
||||
} finally {
|
||||
setLoadingAgencies(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewDetails = async (agencyId: string) => {
|
||||
setDetailsError(null);
|
||||
setDetailsLoadingId(agencyId);
|
||||
setSelectedAgencyId(agencyId);
|
||||
setSelectedDetails(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${agencyId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setDetailsError(data?.error || 'Não foi possível carregar os detalhes da agência.');
|
||||
setSelectedAgencyId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedDetails(data);
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar detalhes da agência:', error);
|
||||
setDetailsError('Erro ao carregar detalhes da agência.');
|
||||
setSelectedAgencyId(null);
|
||||
} finally {
|
||||
setDetailsLoadingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteAgency = async (agencyId: string) => {
|
||||
const confirmDelete = window.confirm('Tem certeza que deseja excluir esta agência? Esta ação não pode ser desfeita.');
|
||||
if (!confirmDelete) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDeletingId(agencyId);
|
||||
try {
|
||||
const response = await fetch(`/api/admin/agencies/${agencyId}`, {
|
||||
method: 'DELETE',
|
||||
const response = await fetch('/api/admin/agencies', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok && response.status !== 204) {
|
||||
const data = await response.json().catch(() => ({ error: 'Erro ao excluir agência.' }));
|
||||
alert(data?.error || 'Erro ao excluir agência.');
|
||||
return;
|
||||
}
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgencies(data.slice(0, 5)); // Apenas as 5 primeiras
|
||||
|
||||
alert('Agência excluída com sucesso!');
|
||||
if (selectedAgencyId === agencyId) {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
// Calcular estatísticas
|
||||
setStats({
|
||||
totalAgencies: data.length,
|
||||
activeAgencies: data.filter((a: Agency) => a.is_active).length,
|
||||
inactiveAgencies: data.filter((a: Agency) => !a.is_active).length,
|
||||
totalUsers: data.length * 2, // Mock - implementar depois
|
||||
});
|
||||
}
|
||||
|
||||
await loadAgencies();
|
||||
} catch (error) {
|
||||
console.error('Erro ao excluir agência:', error);
|
||||
alert('Erro ao excluir agência.');
|
||||
console.error('Erro ao carregar dados:', error);
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const statCards = [
|
||||
{
|
||||
name: 'Total de Agências',
|
||||
value: stats.totalAgencies,
|
||||
icon: BuildingOfficeIcon,
|
||||
color: 'orange',
|
||||
href: '/superadmin/agencies',
|
||||
},
|
||||
{
|
||||
name: 'Agências Ativas',
|
||||
value: stats.activeAgencies,
|
||||
icon: CheckCircleIcon,
|
||||
color: 'green',
|
||||
href: '/superadmin/agencies',
|
||||
},
|
||||
{
|
||||
name: 'Links de Cadastro',
|
||||
value: '5', // Mock
|
||||
icon: LinkIcon,
|
||||
color: 'pink',
|
||||
href: '/superadmin/signup-templates',
|
||||
},
|
||||
{
|
||||
name: 'Total de Usuários',
|
||||
value: stats.totalUsers,
|
||||
icon: UserGroupIcon,
|
||||
color: 'rose',
|
||||
href: '/superadmin/users',
|
||||
},
|
||||
];
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600 dark:text-gray-400">Carregando...</p>
|
||||
</div>
|
||||
{detailsLoadingId && (
|
||||
<div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-dashed border-brand-500 p-6 text-sm text-gray-600 dark:text-gray-300">
|
||||
Carregando detalhes da agência selecionada...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detailsError && !detailsLoadingId && (
|
||||
<div className="mt-8 bg-red-50 dark:bg-red-900/40 border border-red-200 dark:border-red-800 rounded-lg p-6 text-red-700 dark:text-red-200">
|
||||
{detailsError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDetails && !detailsLoadingId && (
|
||||
<div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Detalhes da Agência</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Informações enviadas no cadastro e dados administrativos</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href={selectedDetails.access_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-brand-600 hover:text-brand-700"
|
||||
>
|
||||
Abrir painel da agência
|
||||
</a>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedAgencyId(null);
|
||||
setSelectedDetails(null);
|
||||
setDetailsError(null);
|
||||
}}
|
||||
className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-6 space-y-6">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Dados da Agência</h4>
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Nome Fantasia</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Razão Social</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.razao_social || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">CNPJ</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.cnpj || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Segmento</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.tenant.industry || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Descrição</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.description || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Status</p>
|
||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold ${selectedDetails.tenant.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200'}`}>
|
||||
{selectedDetails.tenant.is_active ? 'Ativa' : 'Inativa'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Endereço e Contato</h4>
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Endereço completo</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.address || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Cidade / Estado</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.city || '—'} {selectedDetails.tenant.state ? `- ${selectedDetails.tenant.state}` : ''}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">CEP</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.zip || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Website</p>
|
||||
{selectedDetails.tenant.website ? (
|
||||
<a href={selectedDetails.tenant.website} target="_blank" rel="noopener noreferrer" className="text-brand-600 hover:text-brand-700">
|
||||
{selectedDetails.tenant.website}
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-gray-900 dark:text-white">—</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">E-mail comercial</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.email || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Telefone</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.tenant.phone || '—'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Administrador da Agência</h4>
|
||||
{selectedDetails.admin ? (
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Nome</p>
|
||||
<p className="text-gray-900 dark:text-white font-medium">{selectedDetails.admin.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">E-mail</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.admin.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Perfil</p>
|
||||
<p className="text-gray-900 dark:text-white">{selectedDetails.admin.role}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-500 dark:text-gray-400">Criado em</p>
|
||||
<p className="text-gray-900 dark:text-white">{new Date(selectedDetails.admin.created_at).toLocaleString('pt-BR')}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400">Nenhum administrador associado encontrado.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-400 dark:text-gray-500">
|
||||
Última atualização: {new Date(selectedDetails.tenant.updated_at).toLocaleString('pt-BR')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-center h-full p-8">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
{/* Header */}
|
||||
<header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-brand-500 to-brand-700 rounded-lg">
|
||||
<span className="text-white font-bold text-lg">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white">Aggios</h1>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Painel Administrativo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">Admin AGGIOS</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{userData?.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
clearAuth();
|
||||
router.push('/login');
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 h-full overflow-auto">
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Visão geral da plataforma Aggios
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Total de Agências</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{agencies.length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Agências Ativas</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{agencies.filter(a => a.is_active).length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Agências Inativas</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{agencies.filter(a => !a.is_active).length}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{statCards.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<Link
|
||||
key={stat.name}
|
||||
href={stat.href}
|
||||
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-4 border border-gray-200 dark:border-gray-800 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{stat.name}
|
||||
</p>
|
||||
<p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{stat.value}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-lg p-2 bg-${stat.color}-100 dark:bg-${stat.color}-900/20`}
|
||||
>
|
||||
<Icon
|
||||
className={`h-5 w-5 text-${stat.color}-600 dark:text-${stat.color}-400`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Agencies Table */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Agências Cadastradas</h2>
|
||||
{/* Recent Agencies */}
|
||||
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
|
||||
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-semibold text-gray-900 dark:text-white">
|
||||
Agências Recentes
|
||||
</h2>
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="text-xs font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400"
|
||||
>
|
||||
Ver todas →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingAgencies ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600 dark:text-gray-400">Carregando agências...</p>
|
||||
</div>
|
||||
) : agencies.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400">Nenhuma agência cadastrada ainda.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-900">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Agência</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Subdomínio</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Domínio</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Data de Criação</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{agencies.map((agency) => (
|
||||
<tr
|
||||
key={agency.id}
|
||||
className={`hover:bg-gray-50 dark:hover:bg-gray-700 ${selectedAgencyId === agency.id ? 'bg-brand-50/70 dark:bg-gray-700/60' : ''}`}
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-brand-500 to-brand-700 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold">{agency.name.charAt(0).toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-white">{agency.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900 dark:text-white font-mono">{agency.subdomain}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">{agency.domain || '-'}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${agency.is_active
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
|
||||
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
|
||||
}`}>
|
||||
{agency.is_active ? 'Ativa' : 'Inativa'}
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{agencies.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center">
|
||||
<BuildingOfficeIcon className="mx-auto h-10 w-10 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Nenhuma agência
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Comece criando uma nova agência.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
agencies.map((agency) => (
|
||||
<div
|
||||
key={agency.id}
|
||||
className="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 w-8 rounded-lg flex items-center justify-center" style={{ background: 'var(--gradient)' }}>
|
||||
<span className="text-xs font-medium text-white">
|
||||
{agency.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{agency.name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{agency.subdomain}.aggios.app
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{agency.is_active ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-green-100 dark:bg-green-900/20 px-2 py-0.5 text-[10px] font-medium text-green-800 dark:text-green-400">
|
||||
<CheckCircleIcon className="h-3 w-3" />
|
||||
Ativo
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-red-100 dark:bg-red-900/20 px-2 py-0.5 text-[10px] font-medium text-red-800 dark:text-red-400">
|
||||
<XCircleIcon className="h-3 w-3" />
|
||||
Inativo
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{new Date(agency.created_at).toLocaleDateString('pt-BR')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
|
||||
<button
|
||||
onClick={() => handleViewDetails(agency.id)}
|
||||
className="inline-flex items-center px-3 py-1.5 rounded-md bg-gradient-to-r from-brand-500 to-brand-700 text-white hover:opacity-90 transition"
|
||||
disabled={detailsLoadingId === agency.id || deletingId === agency.id}
|
||||
>
|
||||
{detailsLoadingId === agency.id ? 'Carregando...' : 'Visualizar'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteAgency(agency.id)}
|
||||
className="inline-flex items-center px-3 py-1.5 rounded-md border border-red-500 text-red-600 hover:bg-red-500 hover:text-white transition disabled:opacity-60"
|
||||
disabled={deletingId === agency.id || detailsLoadingId === agency.id}
|
||||
>
|
||||
{deletingId === agency.id ? 'Excluindo...' : 'Excluir'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<Link
|
||||
href="/superadmin/agencies"
|
||||
className="group relative overflow-hidden rounded-xl p-4 transition-all"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<BuildingOfficeIcon className="h-6 w-6" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Gerenciar Agências</h3>
|
||||
<p className="text-xs text-white/80">Ver e editar agências</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/superadmin/signup-templates"
|
||||
className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-orange-500 to-pink-600 p-4 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<LinkIcon className="h-6 w-6" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Links de Cadastro</h3>
|
||||
<p className="text-xs text-white/80">Criar links personalizados</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/superadmin/reports"
|
||||
className="group relative overflow-hidden rounded-xl bg-gradient-to-r from-pink-500 to-rose-600 p-4 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white">
|
||||
<ChartBarIcon className="h-6 w-6" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-sm">Relatórios</h3>
|
||||
<p className="text-xs text-white/80">Análises e métricas</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
29
front-end-dash.aggios.app/app/superadmin/reports/page.tsx
Normal file
29
front-end-dash.aggios.app/app/superadmin/reports/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { ChartBarIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function ReportsPage() {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<ChartBarIcon className="w-8 h-8 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Relatórios</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Visualize métricas e relatórios do sistema
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-12 text-center">
|
||||
<ChartBarIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Os relatórios e analytics estarão disponíveis em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
front-end-dash.aggios.app/app/superadmin/settings/page.tsx
Normal file
29
front-end-dash.aggios.app/app/superadmin/settings/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { Cog6ToothIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Cog6ToothIcon className="w-6 h-6 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Configurações</h1>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Configure o sistema e preferências globais
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<Cog6ToothIcon className="w-12 h-12 text-gray-400 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white mb-1">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
As configurações do sistema estarão disponíveis em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,447 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { PlusIcon, LinkIcon, PencilSquareIcon, TrashIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Dialog from '@/components/ui/Dialog';
|
||||
|
||||
interface FormField {
|
||||
name: string;
|
||||
label: string;
|
||||
type: string;
|
||||
required: boolean;
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface SignupTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
slug: string;
|
||||
form_fields: FormField[];
|
||||
enabled_modules: string[];
|
||||
redirect_url?: string;
|
||||
success_message?: string;
|
||||
custom_logo_url?: string;
|
||||
custom_primary_color?: string;
|
||||
is_active: boolean;
|
||||
usage_count: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const AVAILABLE_FIELDS = [
|
||||
{ name: 'email', label: 'E-mail', type: 'email', required: true },
|
||||
{ name: 'password', label: 'Senha', type: 'password', required: true },
|
||||
{ name: 'subdomain', label: 'Subdomínio', type: 'text', required: true },
|
||||
{ name: 'company_name', label: 'Nome da Empresa', type: 'text', required: false },
|
||||
{ name: 'cnpj', label: 'CNPJ', type: 'text', required: false },
|
||||
{ name: 'phone', label: 'Telefone', type: 'tel', required: false },
|
||||
{ name: 'address', label: 'Endereço', type: 'text', required: false },
|
||||
{ name: 'city', label: 'Cidade', type: 'text', required: false },
|
||||
{ name: 'state', label: 'Estado', type: 'text', required: false },
|
||||
{ name: 'zipcode', label: 'CEP', type: 'text', required: false },
|
||||
];
|
||||
|
||||
const AVAILABLE_MODULES = [
|
||||
'CRM',
|
||||
'ERP',
|
||||
'PROJECTS',
|
||||
'FINANCIAL',
|
||||
'INVENTORY',
|
||||
'HR',
|
||||
];
|
||||
|
||||
export default function SignupTemplatesPage() {
|
||||
const [templates, setTemplates] = useState<SignupTemplate[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [editingTemplate, setEditingTemplate] = useState<SignupTemplate | null>(null);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
slug: '',
|
||||
redirect_url: '',
|
||||
success_message: '',
|
||||
});
|
||||
const [selectedFields, setSelectedFields] = useState<FormField[]>([]);
|
||||
const [selectedModules, setSelectedModules] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTemplates();
|
||||
}, []);
|
||||
|
||||
const loadTemplates = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/admin/signup-templates', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setTemplates(data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar templates:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldToggle = (field: typeof AVAILABLE_FIELDS[0]) => {
|
||||
// Campos obrigatórios não podem ser removidos
|
||||
if (field.required) return;
|
||||
|
||||
setSelectedFields(prev => {
|
||||
const exists = prev.find(f => f.name === field.name);
|
||||
if (exists) {
|
||||
return prev.filter(f => f.name !== field.name);
|
||||
} else {
|
||||
return [...prev, { ...field, order: prev.length + 1 }];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleModuleToggle = (module: string) => {
|
||||
setSelectedModules(prev => {
|
||||
if (prev.includes(module)) {
|
||||
return prev.filter(m => m !== module);
|
||||
} else {
|
||||
return [...prev, module];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const template = {
|
||||
...formData,
|
||||
form_fields: selectedFields,
|
||||
enabled_modules: selectedModules,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const url = editingTemplate
|
||||
? `/api/admin/signup-templates/${editingTemplate.id}`
|
||||
: '/api/admin/signup-templates';
|
||||
|
||||
const method = editingTemplate ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(template),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
loadTemplates();
|
||||
handleCloseDialog();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao salvar template:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Tem certeza que deseja deletar este template?')) return;
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/admin/signup-templates/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
loadTemplates();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao deletar template:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (template: SignupTemplate) => {
|
||||
setEditingTemplate(template);
|
||||
setFormData({
|
||||
name: template.name,
|
||||
description: template.description,
|
||||
slug: template.slug,
|
||||
redirect_url: template.redirect_url || '',
|
||||
success_message: template.success_message || '',
|
||||
});
|
||||
setSelectedFields(template.form_fields);
|
||||
setSelectedModules(template.enabled_modules);
|
||||
setShowDialog(true);
|
||||
};
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setShowDialog(false);
|
||||
setEditingTemplate(null);
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
slug: '',
|
||||
redirect_url: '',
|
||||
success_message: '',
|
||||
});
|
||||
// Sempre iniciar com os campos obrigatórios selecionados
|
||||
const requiredFields = AVAILABLE_FIELDS.filter(f => f.required).map((f, idx) => ({
|
||||
...f,
|
||||
order: idx + 1
|
||||
}));
|
||||
setSelectedFields(requiredFields);
|
||||
setSelectedModules([]);
|
||||
};
|
||||
|
||||
// Inicializar com campos obrigatórios na primeira renderização
|
||||
useEffect(() => {
|
||||
const requiredFields = AVAILABLE_FIELDS.filter(f => f.required).map((f, idx) => ({
|
||||
...f,
|
||||
order: idx + 1
|
||||
}));
|
||||
if (selectedFields.length === 0) {
|
||||
setSelectedFields(requiredFields);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const copyToClipboard = (slug: string) => {
|
||||
const url = `${window.location.origin}/cadastro/${slug}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
alert('Link copiado para a área de transferência!');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Links de Cadastro</h1>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Crie links personalizados de cadastro com campos e módulos específicos
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowDialog(true)} size="sm">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Novo Link
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-gray-900 dark:border-white mx-auto"></div>
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<div className="text-center py-8 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
|
||||
<LinkIcon className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white mb-1">
|
||||
Nenhum link criado
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Crie seu primeiro link de cadastro personalizado
|
||||
</p>
|
||||
<Button onClick={() => setShowDialog(true)} size="sm">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Criar Primeiro Link
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
{templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-4"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{template.name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
{template.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<code className="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-900 dark:text-white">
|
||||
/cadastro/{template.slug}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(template.slug)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
title="Copiar link"
|
||||
>
|
||||
<ClipboardDocumentIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
<span className="text-[10px] text-gray-600 dark:text-gray-400">Campos:</span>
|
||||
{template.form_fields.map((field) => (
|
||||
<span
|
||||
key={field.name}
|
||||
className="px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-[10px]"
|
||||
>
|
||||
{field.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="text-[10px] text-gray-600 dark:text-gray-400">Módulos:</span>
|
||||
{template.enabled_modules.map((module) => (
|
||||
<span
|
||||
key={module}
|
||||
className="px-1.5 py-0.5 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded text-[10px]"
|
||||
>
|
||||
{module}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
<div className="text-right mr-3">
|
||||
<div className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{template.usage_count}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-600 dark:text-gray-400">
|
||||
cadastros
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleEdit(template)}
|
||||
className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
>
|
||||
<PencilSquareIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(template.id)}
|
||||
className="p-1.5 hover:bg-red-100 dark:hover:bg-red-900 rounded"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dialog de Criação/Edição */}
|
||||
<Dialog
|
||||
isOpen={showDialog}
|
||||
onClose={handleCloseDialog}
|
||||
title={editingTemplate ? 'Editar Link de Cadastro' : 'Novo Link de Cadastro'}
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Nome do Template"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Slug (URL)"
|
||||
value={formData.slug}
|
||||
onChange={(e) => setFormData({ ...formData, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-') })}
|
||||
required
|
||||
placeholder="ex: crm-rapido"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Descrição"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Campos do Formulário
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{AVAILABLE_FIELDS.map((field) => {
|
||||
const isSelected = selectedFields.some(f => f.name === field.name);
|
||||
const isRequired = field.required;
|
||||
|
||||
return (
|
||||
<label
|
||||
key={field.name}
|
||||
className={`flex items-center gap-2 p-2 rounded border ${isRequired
|
||||
? 'border-purple-300 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20'
|
||||
: 'border-gray-200 dark:border-gray-700'
|
||||
} ${isRequired
|
||||
? 'cursor-not-allowed'
|
||||
: 'hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer'
|
||||
}`}
|
||||
title={isRequired ? 'Campo obrigatório - não pode ser removido' : ''}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => handleFieldToggle(field)}
|
||||
disabled={isRequired}
|
||||
className={`rounded ${isRequired ? 'cursor-not-allowed opacity-60' : ''}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{field.label}</span>
|
||||
{isRequired && (
|
||||
<span className="ml-auto text-xs px-1.5 py-0.5 bg-purple-600 dark:bg-purple-500 text-white rounded font-medium">
|
||||
OBRIGATÓRIO
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
Os campos Email, Senha e Subdomínio são obrigatórios e não podem ser removidos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Módulos Habilitados
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{AVAILABLE_MODULES.map((module) => (
|
||||
<label
|
||||
key={module}
|
||||
className="flex items-center gap-2 p-2 rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedModules.includes(module)}
|
||||
onChange={() => handleModuleToggle(module)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm text-gray-900 dark:text-white">{module}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4 border-t border-gray-200 dark:border-gray-800">
|
||||
<Button type="button" variant="outline" onClick={handleCloseDialog}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{editingTemplate ? 'Salvar Alterações' : 'Criar Link'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
front-end-dash.aggios.app/app/superadmin/users/page.tsx
Normal file
29
front-end-dash.aggios.app/app/superadmin/users/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { UserGroupIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function UsersPage() {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<UserGroupIcon className="w-8 h-8 text-gray-600 dark:text-gray-400" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usuários</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Gerencie todos os usuários do sistema
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-12 text-center">
|
||||
<UserGroupIcon className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||
Página em desenvolvimento
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
A gestão de usuários estará disponível em breve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user