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

chore(release): snapshot 1.4.2

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

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

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