From 04c954c3d97d592f1ab77876b9129124373645cc Mon Sep 17 00:00:00 2001 From: Erik Silva Date: Fri, 12 Dec 2025 15:24:38 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Implementa=C3=A7=C3=A3o=20de=20submenus?= =?UTF-8?q?=20laterais=20(flyout),=20corre=C3=A7=C3=B5es=20de=20UI=20e=20p?= =?UTF-8?q?rote=C3=A7=C3=A3o=20de=20rotas=20(AuthGuard)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/settings.local.json | 4 +- README.md | 2 +- .../app/(agency)/clientes/page.tsx | 26 - .../app/(agency)/configuracoes/page.tsx | 42 +- .../app/(agency)/contratos/page.tsx | 10 + front-end-agency/app/(agency)/crm/page.tsx | 71 ++ .../app/(agency)/dashboard/page.tsx | 310 +++---- .../app/(agency)/documentos/page.tsx | 10 + front-end-agency/app/(agency)/erp/page.tsx | 10 + .../app/(agency)/helpdesk/page.tsx | 10 + front-end-agency/app/(agency)/layout.tsx | 724 +++------------ .../app/(agency)/pagamentos/page.tsx | 10 + front-end-agency/app/(agency)/page.tsx | 5 + .../app/(agency)/projetos/page.tsx | 10 + front-end-agency/app/(agency)/social/page.tsx | 10 + front-end-agency/app/login/page.tsx | 25 +- .../components/auth/AuthGuard.tsx | 47 + .../components/layout/DashboardLayout.tsx | 40 + .../components/layout/SidebarRail.tsx | 337 +++++++ front-end-agency/components/layout/TopBar.tsx | 101 ++ .../components/ui/CommandPalette.tsx | 206 ++++ .../app/superadmin/agencies/[id]/page.tsx | 2 +- .../app/superadmin/agencies/new/page.tsx | 40 +- .../app/superadmin/layout.tsx | 25 +- .../components/auth/AuthGuard.tsx | 44 + .../components/layout/DashboardLayout.tsx | 6 +- .../components/layout/SidebarRail.tsx | 32 +- .../app/design-system/README.md | 107 +++ .../app/design-system/page.tsx | 877 ++++++++++++++++++ frontend-aggios.app/app/globals.css | 14 + frontend-aggios.app/app/layout.tsx | 11 +- frontend-aggios.app/app/page.tsx | 133 ++- frontend-aggios.app/app/tokens.css | 8 + frontend-aggios.app/package-lock.json | 232 +++++ frontend-aggios.app/package.json | 5 +- frontend-aggios.app/tailwind.preset.js | 5 +- 36 files changed, 2628 insertions(+), 923 deletions(-) delete mode 100644 front-end-agency/app/(agency)/clientes/page.tsx create mode 100644 front-end-agency/app/(agency)/contratos/page.tsx create mode 100644 front-end-agency/app/(agency)/crm/page.tsx create mode 100644 front-end-agency/app/(agency)/documentos/page.tsx create mode 100644 front-end-agency/app/(agency)/erp/page.tsx create mode 100644 front-end-agency/app/(agency)/helpdesk/page.tsx create mode 100644 front-end-agency/app/(agency)/pagamentos/page.tsx create mode 100644 front-end-agency/app/(agency)/page.tsx create mode 100644 front-end-agency/app/(agency)/projetos/page.tsx create mode 100644 front-end-agency/app/(agency)/social/page.tsx create mode 100644 front-end-agency/components/auth/AuthGuard.tsx create mode 100644 front-end-agency/components/layout/DashboardLayout.tsx create mode 100644 front-end-agency/components/layout/SidebarRail.tsx create mode 100644 front-end-agency/components/layout/TopBar.tsx create mode 100644 front-end-agency/components/ui/CommandPalette.tsx create mode 100644 front-end-dash.aggios.app/components/auth/AuthGuard.tsx create mode 100644 frontend-aggios.app/app/design-system/README.md create mode 100644 frontend-aggios.app/app/design-system/page.tsx diff --git a/.claude/settings.local.json b/.claude/settings.local.json index a260222..473b120 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -8,7 +8,9 @@ "Bash(docker logs:*)", "Bash(docker exec:*)", "Bash(npx tsc:*)", - "Bash(docker-compose restart:*)" + "Bash(docker-compose restart:*)", + "Bash(npm install:*)", + "Bash(docker-compose build:*)" ] } } diff --git a/README.md b/README.md index da89f30..9bcf4da 100644 --- a/README.md +++ b/README.md @@ -62,4 +62,4 @@ traefik/ Regras de roteamento e TLS - Disponibilizar pipeline CI/CD com validações de lint/build. ## Repositório -- Principal: https://git.stackbyte.cloud/erik/aggios.app.git +- Principal: https://git.stackbyte.cloud/erik/aggios.app.git \ No newline at end of file diff --git a/front-end-agency/app/(agency)/clientes/page.tsx b/front-end-agency/app/(agency)/clientes/page.tsx deleted file mode 100644 index 4b0ecca..0000000 --- a/front-end-agency/app/(agency)/clientes/page.tsx +++ /dev/null @@ -1,26 +0,0 @@ -"use client"; - -export default function ClientesPage() { - return ( -
-
-

Clientes

-

Gerencie sua carteira de clientes

-
- -
-
-
- -
-

- Módulo CRM em Desenvolvimento -

-

- Em breve você poderá gerenciar seus clientes com recursos avançados de CRM. -

-
-
-
- ); -} diff --git a/front-end-agency/app/(agency)/configuracoes/page.tsx b/front-end-agency/app/(agency)/configuracoes/page.tsx index af8fb8c..0c5d8cf 100644 --- a/front-end-agency/app/(agency)/configuracoes/page.tsx +++ b/front-end-agency/app/(agency)/configuracoes/page.tsx @@ -437,7 +437,7 @@ export default function ConfiguracoesPage() { {/* Loading State */} {loading ? (
-
+
) : ( <> @@ -482,7 +482,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.name} onChange={(e) => setAgencyData({ ...agencyData, name: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -494,7 +494,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.razaoSocial} onChange={(e) => setAgencyData({ ...agencyData, razaoSocial: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -511,7 +511,7 @@ export default function ConfiguracoesPage() { setSupportMessage('Para alterar CNPJ, contate o suporte.'); setShowSupportDialog(true); }} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer" /> @@ -528,7 +528,7 @@ export default function ConfiguracoesPage() { setSupportMessage('Para alterar o e-mail de acesso, contate o suporte.'); setShowSupportDialog(true); }} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-pointer" /> @@ -540,7 +540,7 @@ export default function ConfiguracoesPage() { type="tel" value={agencyData.phone} onChange={(e) => setAgencyData({ ...agencyData, phone: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -552,7 +552,7 @@ export default function ConfiguracoesPage() { type="url" value={agencyData.website} onChange={(e) => setAgencyData({ ...agencyData, website: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -564,7 +564,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.industry} onChange={(e) => setAgencyData({ ...agencyData, industry: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -576,7 +576,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.teamSize} onChange={(e) => setAgencyData({ ...agencyData, teamSize: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -617,7 +617,7 @@ export default function ConfiguracoesPage() { })); } }} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -629,7 +629,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.state} readOnly - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed" />
@@ -651,7 +651,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.neighborhood} readOnly - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none cursor-not-allowed" />
@@ -683,7 +683,7 @@ export default function ConfiguracoesPage() { type="text" value={agencyData.complement} onChange={(e) => setAgencyData({ ...agencyData, complement: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" /> @@ -789,7 +789,7 @@ export default function ConfiguracoesPage() { className="hidden" disabled={uploadingLogo} /> -
+
@@ -897,7 +897,7 @@ export default function ConfiguracoesPage() { className="hidden" disabled={uploadingLogo} /> -
+
@@ -977,7 +977,7 @@ export default function ConfiguracoesPage() { type="password" value={passwordData.currentPassword} onChange={(e) => setPasswordData({ ...passwordData, currentPassword: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" placeholder="Digite sua senha atual" />
@@ -990,7 +990,7 @@ export default function ConfiguracoesPage() { type="password" value={passwordData.newPassword} onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" placeholder="Digite a nova senha (mínimo 8 caracteres)" />
@@ -1003,7 +1003,7 @@ export default function ConfiguracoesPage() { type="password" value={passwordData.confirmPassword} onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })} - className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" + className="w-full px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 focus:outline-none" placeholder="Digite a nova senha novamente" />
diff --git a/front-end-agency/app/(agency)/contratos/page.tsx b/front-end-agency/app/(agency)/contratos/page.tsx new file mode 100644 index 0000000..f005a08 --- /dev/null +++ b/front-end-agency/app/(agency)/contratos/page.tsx @@ -0,0 +1,10 @@ +export default function ContratosPage() { + return ( +
+

Contratos

+
+

Gestão de Contratos e Assinaturas em breve

+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/crm/page.tsx b/front-end-agency/app/(agency)/crm/page.tsx new file mode 100644 index 0000000..9557c6f --- /dev/null +++ b/front-end-agency/app/(agency)/crm/page.tsx @@ -0,0 +1,71 @@ +"use client"; + +import { + UsersIcon, + CurrencyDollarIcon, + ChartPieIcon, + ArrowTrendingUpIcon, +} from '@heroicons/react/24/outline'; + +export default function CRMPage() { + const stats = [ + { name: 'Leads Totais', value: '124', icon: UsersIcon, color: 'blue' }, + { name: 'Oportunidades', value: 'R$ 450k', icon: CurrencyDollarIcon, color: 'green' }, + { name: 'Taxa de Conversão', value: '24%', icon: ChartPieIcon, color: 'purple' }, + { name: 'Crescimento', value: '+12%', icon: ArrowTrendingUpIcon, color: 'orange' }, + ]; + + return ( +
+
+
+

+ Mission Control (CRM) +

+

+ Visão geral do relacionamento com clientes +

+
+ +
+ {stats.map((stat) => { + const Icon = stat.icon; + return ( +
+
+
+

+ {stat.name} +

+

+ {stat.value} +

+
+
+ +
+
+
+ ); + })} +
+ +
+
+

Funil de Vendas (Em breve)

+
+
+

Atividades Recentes (Em breve)

+
+
+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/dashboard/page.tsx b/front-end-agency/app/(agency)/dashboard/page.tsx index c5c9c4d..a00b492 100644 --- a/front-end-agency/app/(agency)/dashboard/page.tsx +++ b/front-end-agency/app/(agency)/dashboard/page.tsx @@ -1,178 +1,168 @@ "use client"; -import { useEffect, useState } from "react"; -import { useRouter } from "next/navigation"; -import { getUser } from "@/lib/auth"; import { + RocketLaunchIcon, ChartBarIcon, - UserGroupIcon, + BriefcaseIcon, + LifebuoyIcon, + CreditCardIcon, + DocumentTextIcon, FolderIcon, - CurrencyDollarIcon, + ShareIcon, ArrowTrendingUpIcon, - ArrowTrendingDownIcon + ArrowTrendingDownIcon, + CheckCircleIcon, + ClockIcon, } from '@heroicons/react/24/outline'; -interface StatCardProps { - title: string; - value: string | number; - icon: React.ComponentType>; - trend?: number; - color: 'blue' | 'purple' | 'gray' | 'green'; -} - -const colorClasses = { - blue: { - iconBg: 'bg-blue-50 dark:bg-blue-900/20', - iconColor: 'text-blue-600 dark:text-blue-400', - trend: 'text-blue-600 dark:text-blue-400' - }, - purple: { - iconBg: 'bg-purple-50 dark:bg-purple-900/20', - iconColor: 'text-purple-600 dark:text-purple-400', - trend: 'text-purple-600 dark:text-purple-400' - }, - gray: { - iconBg: 'bg-gray-50 dark:bg-gray-900/20', - iconColor: 'text-gray-600 dark:text-gray-400', - trend: 'text-gray-600 dark:text-gray-400' - }, - green: { - iconBg: 'bg-emerald-50 dark:bg-emerald-900/20', - iconColor: 'text-emerald-600 dark:text-emerald-400', - trend: 'text-emerald-600 dark:text-emerald-400' - } -}; - -function StatCard({ title, value, icon: Icon, trend, color }: StatCardProps) { - const colors = colorClasses[color]; - const isPositive = trend && trend > 0; - - return ( -
-
-
-

{title}

-

{value}

- {trend !== undefined && ( -
- {isPositive ? ( - - ) : ( - - )} - - {Math.abs(trend)}% - - vs mês anterior -
- )} -
-
- -
-
-
- ); -} - export default function DashboardPage() { - const router = useRouter(); - const [stats, setStats] = useState({ - clientes: 0, - projetos: 0, - tarefas: 0, - faturamento: 0 - }); + const overviewStats = [ + { name: 'Receita Total (Mês)', value: 'R$ 124.500', change: '+12%', changeType: 'increase', icon: ChartBarIcon, color: 'green' }, + { name: 'Novos Leads', value: '45', change: '+5%', changeType: 'increase', icon: RocketLaunchIcon, color: 'blue' }, + { name: 'Projetos Ativos', value: '12', change: '-1', changeType: 'decrease', icon: BriefcaseIcon, color: 'purple' }, + { name: 'Chamados Abertos', value: '3', change: '-2', changeType: 'decrease', icon: LifebuoyIcon, color: 'orange' }, + ]; - useEffect(() => { - // Verificar se é SUPERADMIN e redirecionar - const user = getUser(); - if (user && user.role === 'SUPERADMIN') { - router.push('/superadmin'); - return; + const modules = [ + { + title: 'CRM & Vendas', + icon: RocketLaunchIcon, + color: 'blue', + stats: [ + { label: 'Propostas Enviadas', value: '8' }, + { label: 'Aguardando Aprovação', value: '3' }, + { label: 'Taxa de Conversão', value: '24%' }, + ] + }, + { + title: 'Financeiro & ERP', + icon: ChartBarIcon, + color: 'green', + stats: [ + { label: 'A Receber', value: 'R$ 45.200' }, + { label: 'A Pagar', value: 'R$ 12.800' }, + { label: 'Fluxo de Caixa', value: 'Positivo' }, + ] + }, + { + title: 'Projetos & Tarefas', + icon: BriefcaseIcon, + color: 'purple', + stats: [ + { label: 'Em Andamento', value: '12' }, + { label: 'Atrasados', value: '1' }, + { label: 'Concluídos (Mês)', value: '4' }, + ] + }, + { + title: 'Helpdesk', + icon: LifebuoyIcon, + color: 'orange', + stats: [ + { label: 'Novos Chamados', value: '3' }, + { label: 'Tempo Médio Resposta', value: '2h' }, + { label: 'Satisfação', value: '4.8/5' }, + ] + }, + { + title: 'Documentos & Contratos', + icon: DocumentTextIcon, + color: 'indigo', + stats: [ + { label: 'Contratos Ativos', value: '28' }, + { label: 'A Vencer (30 dias)', value: '2' }, + { label: 'Docs Armazenados', value: '1.2GB' }, + ] + }, + { + title: 'Redes Sociais', + icon: ShareIcon, + color: 'pink', + stats: [ + { label: 'Posts Agendados', value: '14' }, + { label: 'Engajamento', value: '+8.5%' }, + { label: 'Novos Seguidores', value: '120' }, + ] } - - // Simulando carregamento de dados - setTimeout(() => { - setStats({ - clientes: 127, - projetos: 18, - tarefas: 64, - faturamento: 87500 - }); - }, 300); - }, [router]); + ]; return ( -
- {/* Header */} -
-

- Dashboard -

-

- Bem-vindo ao seu painel de controle -

-
- - {/* Stats Grid */} -
- - - - -
- - {/* Coming Soon Card */} -
-
-
- -
-

- Em Desenvolvimento -

-

- Estamos construindo recursos incríveis de CRM e ERP para sua agência. - Em breve você terá acesso a análises detalhadas, gestão completa de clientes e muito mais. +

+
+ {/* Header */} +
+

+ Visão Geral da Agência +

+

+ Acompanhe o desempenho de todos os módulos em tempo real

-
- {['CRM', 'ERP', 'Projetos', 'Pagamentos', 'Documentos', 'Suporte', 'Contratos'].map((item) => ( - + + {/* Top Stats */} +
+ {overviewStats.map((stat) => { + const Icon = stat.icon; + return ( +
- {item} - - ))} +
+
+ +
+
+ {stat.changeType === 'increase' ? ( + + ) : ( + + )} + {stat.change} +
+
+
+

{stat.name}

+

{stat.value}

+
+
+ ); + })} +
+ + {/* Modules Grid */} +
+

+ Performance por Módulo +

+
+ {modules.map((module) => { + const Icon = module.icon; + return ( +
+
+
+ +
+

+ {module.title} +

+
+
+ {module.stats.map((stat, idx) => ( +
+ {stat.label} + {stat.value} +
+ ))} +
+
+ ); + })}
diff --git a/front-end-agency/app/(agency)/documentos/page.tsx b/front-end-agency/app/(agency)/documentos/page.tsx new file mode 100644 index 0000000..54b3930 --- /dev/null +++ b/front-end-agency/app/(agency)/documentos/page.tsx @@ -0,0 +1,10 @@ +export default function DocumentosPage() { + return ( +
+

Documentos

+
+

Gestão Eletrônica de Documentos (GED) em breve

+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/erp/page.tsx b/front-end-agency/app/(agency)/erp/page.tsx new file mode 100644 index 0000000..2249dda --- /dev/null +++ b/front-end-agency/app/(agency)/erp/page.tsx @@ -0,0 +1,10 @@ +export default function ERPPage() { + return ( +
+

ERP

+
+

Sistema Integrado de Gestão Empresarial em breve

+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/helpdesk/page.tsx b/front-end-agency/app/(agency)/helpdesk/page.tsx new file mode 100644 index 0000000..bd9a15f --- /dev/null +++ b/front-end-agency/app/(agency)/helpdesk/page.tsx @@ -0,0 +1,10 @@ +export default function HelpdeskPage() { + return ( +
+

Helpdesk

+
+

Central de Suporte e Chamados em breve

+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/layout.tsx b/front-end-agency/app/(agency)/layout.tsx index daeddad..0e4bf9d 100644 --- a/front-end-agency/app/(agency)/layout.tsx +++ b/front-end-agency/app/(agency)/layout.tsx @@ -1,635 +1,125 @@ "use client"; -import { useEffect, useState, Fragment } from 'react'; -import { usePathname, useRouter } from 'next/navigation'; -import dynamic from 'next/dynamic'; -import { Menu, Transition } from '@headlessui/react'; +import { DashboardLayout } from '@/components/layout/DashboardLayout'; import { - Bars3Icon, - XMarkIcon, - MagnifyingGlassIcon, - BellIcon, - Cog6ToothIcon, - UserCircleIcon, - ArrowRightOnRectangleIcon, - ChevronDownIcon, - ChevronRightIcon, - UserGroupIcon, - BuildingOfficeIcon, - FolderIcon, + HomeIcon, + RocketLaunchIcon, + ChartBarIcon, + BriefcaseIcon, + LifebuoyIcon, CreditCardIcon, DocumentTextIcon, - LifebuoyIcon, - DocumentCheckIcon, - UsersIcon, - UserPlusIcon, - PhoneIcon, - FunnelIcon, - ChartBarIcon, - HomeIcon, - CubeIcon, - ShoppingCartIcon, - BanknotesIcon, - DocumentDuplicateIcon, + FolderIcon, ShareIcon, - DocumentMagnifyingGlassIcon, - TrashIcon, - RectangleStackIcon, - CalendarIcon, - UserGroupIcon as TeamIcon, - ReceiptPercentIcon, - CreditCardIcon as PaymentIcon, - ChatBubbleLeftRightIcon, - BookOpenIcon, - ArchiveBoxIcon, - PencilSquareIcon, } from '@heroicons/react/24/outline'; -const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false }); -const ThemeTester = dynamic(() => import('@/components/ThemeTester'), { ssr: false }); -const DynamicFavicon = dynamic(() => import('@/components/DynamicFavicon'), { ssr: false }); +const AGENCY_MENU_ITEMS = [ + { id: 'dashboard', label: 'Visão Geral', href: '/dashboard', icon: HomeIcon }, + { + id: 'crm', + label: 'CRM', + href: '/crm', + icon: RocketLaunchIcon, + subItems: [ + { label: 'Dashboard', href: '/crm' }, + { label: 'Clientes', href: '/crm/clientes' }, + { label: 'Funis', href: '/crm/funis' }, + { label: 'Negociações', href: '/crm/negociacoes' }, + ] + }, + { + id: 'erp', + label: 'ERP', + href: '/erp', + icon: ChartBarIcon, + subItems: [ + { label: 'Dashboard', href: '/erp' }, + { label: 'Fluxo de Caixa', href: '/erp/fluxo-caixa' }, + { label: 'Contas a Pagar', href: '/erp/contas-pagar' }, + { label: 'Contas a Receber', href: '/erp/contas-receber' }, + ] + }, + { + id: 'projetos', + label: 'Projetos', + href: '/projetos', + icon: BriefcaseIcon, + subItems: [ + { label: 'Dashboard', href: '/projetos' }, + { label: 'Meus Projetos', href: '/projetos/lista' }, + { label: 'Tarefas', href: '/projetos/tarefas' }, + { label: 'Cronograma', href: '/projetos/cronograma' }, + ] + }, + { + id: 'helpdesk', + label: 'Helpdesk', + href: '/helpdesk', + icon: LifebuoyIcon, + subItems: [ + { label: 'Dashboard', href: '/helpdesk' }, + { label: 'Chamados', href: '/helpdesk/chamados' }, + { label: 'Base de Conhecimento', href: '/helpdesk/kb' }, + ] + }, + { + id: 'pagamentos', + label: 'Pagamentos', + href: '/pagamentos', + icon: CreditCardIcon, + subItems: [ + { label: 'Dashboard', href: '/pagamentos' }, + { label: 'Cobranças', href: '/pagamentos/cobrancas' }, + { label: 'Assinaturas', href: '/pagamentos/assinaturas' }, + ] + }, + { + id: 'contratos', + label: 'Contratos', + href: '/contratos', + icon: DocumentTextIcon, + subItems: [ + { label: 'Dashboard', href: '/contratos' }, + { label: 'Ativos', href: '/contratos/ativos' }, + { label: 'Modelos', href: '/contratos/modelos' }, + ] + }, + { + id: 'documentos', + label: 'Documentos', + href: '/documentos', + icon: FolderIcon, + subItems: [ + { label: 'Meus Arquivos', href: '/documentos' }, + { label: 'Compartilhados', href: '/documentos/compartilhados' }, + { label: 'Lixeira', href: '/documentos/lixeira' }, + ] + }, + { + id: 'social', + label: 'Redes Sociais', + href: '/social', + icon: ShareIcon, + subItems: [ + { label: 'Dashboard', href: '/social' }, + { label: 'Agendamento', href: '/social/agendamento' }, + { label: 'Relatórios', href: '/social/relatorios' }, + ] + }, +]; -const DEFAULT_GRADIENT = 'linear-gradient(135deg, #ff3a05, #ff0080)'; - -const setGradientVariables = (gradient: string) => { - document.documentElement.style.setProperty('--gradient-primary', gradient); - document.documentElement.style.setProperty('--gradient', gradient); - document.documentElement.style.setProperty('--gradient-text', gradient.replace('90deg', 'to right')); - document.documentElement.style.setProperty('--color-gradient-brand', gradient.replace('90deg', 'to right')); -}; +import AuthGuard from '@/components/auth/AuthGuard'; export default function AgencyLayout({ children, }: { children: React.ReactNode; }) { - const router = useRouter(); - const pathname = usePathname(); - const [user, setUser] = useState(null); - const [agencyName, setAgencyName] = useState(''); - const [agencyLogo, setAgencyLogo] = useState(''); - const [sidebarOpen, setSidebarOpen] = useState(true); - const [searchOpen, setSearchOpen] = useState(false); - const [activeSubmenu, setActiveSubmenu] = useState(null); - const [selectedClient, setSelectedClient] = useState(null); - - // Mock de clientes - no futuro virá da API - const clients = [ - { id: 1, name: 'Todos os Clientes', avatar: null }, - { id: 2, name: 'Empresa ABC Ltda', avatar: 'A' }, - { id: 3, name: 'Tech Solutions Inc', avatar: 'T' }, - { id: 4, name: 'Marketing Pro', avatar: 'M' }, - { id: 5, name: 'Design Studio', avatar: 'D' }, - ]; - - useEffect(() => { - const token = localStorage.getItem('token'); - const userData = localStorage.getItem('user'); - - if (!token || !userData) { - router.push('/login'); - return; - } - const parsedUser = JSON.parse(userData); - setUser(parsedUser); - - if (parsedUser.role === 'SUPERADMIN') { - router.push('/superadmin'); - return; - } - - const hostname = window.location.hostname; - const hostSubdomain = hostname.split('.')[0] || 'default'; - const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || parsedUser?.tenant_id || hostSubdomain; - - setAgencyName(parsedUser?.subdomain || hostSubdomain); - - // Buscar logo da agência - const fetchAgencyLogo = async () => { - try { - const response = await fetch('/api/agency/profile', { - headers: { - 'Authorization': `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - }); - - if (response.ok) { - const data = await response.json(); - if (data.logo_url) { - setAgencyLogo(data.logo_url); - } - } - } catch (error) { - console.error('Erro ao buscar logo da agência:', error); - } - }; - - fetchAgencyLogo(); - - const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`); - setGradientVariables(storedGradient || DEFAULT_GRADIENT); - - // Inicializar com "Todos os Clientes" - setSelectedClient(clients[0]); - - // Atalho de teclado para abrir pesquisa (Ctrl/Cmd + K) - const handleKeyDown = (e: KeyboardEvent) => { - if ((e.ctrlKey || e.metaKey) && e.key === 'k') { - e.preventDefault(); - setSearchOpen(true); - } - if (e.key === 'Escape') { - setSearchOpen(false); - } - }; - - window.addEventListener('keydown', handleKeyDown); - return () => { - window.removeEventListener('keydown', handleKeyDown); - setGradientVariables(DEFAULT_GRADIENT); - }; - }, [router]); - - useEffect(() => { - const hostname = window.location.hostname; - const hostSubdomain = hostname.split('.')[0] || 'default'; - const userData = localStorage.getItem('user'); - const parsedUser = userData ? JSON.parse(userData) : null; - const themeKey = parsedUser?.subdomain || parsedUser?.tenantId || parsedUser?.tenant_id || hostSubdomain; - const storedGradient = localStorage.getItem(`agency-theme:${themeKey}`) || DEFAULT_GRADIENT; - - setGradientVariables(storedGradient); - }, [pathname]); - - if (!user) { - return null; - } - - const menuItems = [ - { - icon: UserGroupIcon, - label: 'CRM', - href: '/crm', - submenu: [ - { icon: UsersIcon, label: 'Clientes', href: '/crm/clientes' }, - { icon: UserPlusIcon, label: 'Leads', href: '/crm/leads' }, - { icon: PhoneIcon, label: 'Contatos', href: '/crm/contatos' }, - { icon: FunnelIcon, label: 'Funil de Vendas', href: '/crm/funil' }, - { icon: ChartBarIcon, label: 'Relatórios', href: '/crm/relatorios' }, - ] - }, - { - icon: BuildingOfficeIcon, - label: 'ERP', - href: '/erp', - submenu: [ - { icon: HomeIcon, label: 'Dashboard', href: '/erp/dashboard' }, - { icon: CubeIcon, label: 'Estoque', href: '/erp/estoque' }, - { icon: ShoppingCartIcon, label: 'Compras', href: '/erp/compras' }, - { icon: BanknotesIcon, label: 'Vendas', href: '/erp/vendas' }, - { icon: ChartBarIcon, label: 'Financeiro', href: '/erp/financeiro' }, - ] - }, - { - icon: FolderIcon, - label: 'Projetos', - href: '/projetos', - submenu: [ - { icon: RectangleStackIcon, label: 'Todos Projetos', href: '/projetos/todos' }, - { icon: RectangleStackIcon, label: 'Kanban', href: '/projetos/kanban' }, - { icon: CalendarIcon, label: 'Calendário', href: '/projetos/calendario' }, - { icon: TeamIcon, label: 'Equipes', href: '/projetos/equipes' }, - ] - }, - { - icon: CreditCardIcon, - label: 'Pagamentos', - href: '/pagamentos', - submenu: [ - { icon: DocumentTextIcon, label: 'Faturas', href: '/pagamentos/faturas' }, - { icon: ReceiptPercentIcon, label: 'Recebimentos', href: '/pagamentos/recebimentos' }, - { icon: PaymentIcon, label: 'Assinaturas', href: '/pagamentos/assinaturas' }, - { icon: BanknotesIcon, label: 'Gateway', href: '/pagamentos/gateway' }, - ] - }, - { - icon: DocumentTextIcon, - label: 'Documentos', - href: '/documentos', - submenu: [ - { icon: FolderIcon, label: 'Meus Arquivos', href: '/documentos/arquivos' }, - { icon: ShareIcon, label: 'Compartilhados', href: '/documentos/compartilhados' }, - { icon: DocumentDuplicateIcon, label: 'Modelos', href: '/documentos/modelos' }, - { icon: TrashIcon, label: 'Lixeira', href: '/documentos/lixeira' }, - ] - }, - { - icon: LifebuoyIcon, - label: 'Suporte', - href: '/suporte', - submenu: [ - { icon: DocumentMagnifyingGlassIcon, label: 'Tickets', href: '/suporte/tickets' }, - { icon: BookOpenIcon, label: 'Base de Conhecimento', href: '/suporte/kb' }, - { icon: ChatBubbleLeftRightIcon, label: 'Chat', href: '/suporte/chat' }, - ] - }, - { - icon: DocumentCheckIcon, - label: 'Contratos', - href: '/contratos', - submenu: [ - { icon: DocumentCheckIcon, label: 'Ativos', href: '/contratos/ativos' }, - { icon: PencilSquareIcon, label: 'Rascunhos', href: '/contratos/rascunhos' }, - { icon: ArchiveBoxIcon, label: 'Arquivados', href: '/contratos/arquivados' }, - { icon: DocumentDuplicateIcon, label: 'Modelos', href: '/contratos/modelos' }, - ] - }, - ]; - - const handleLogout = () => { - localStorage.removeItem('token'); - localStorage.removeItem('user'); - router.push('/login'); - }; - return ( -
- {/* Favicon Dinâmico */} - - - {/* Sidebar */} - - - {/* Submenu Lateral */} - - - - - {/* Main Content */} -
- {/* Header */} -
-
-

- Dashboard -

- - {/* Seletor de Cliente */} - - - {selectedClient?.avatar ? ( -
- {selectedClient.avatar} -
- ) : ( - - )} - - {selectedClient?.name || 'Selecionar Cliente'} - - - - - -
-
- - -
-
-
- {clients.map((client) => ( - - {({ active }) => ( - - )} - - ))} -
- - - -
- -
- {/* Pesquisa */} - - - - - {/* Notificações */} - - - - - - - -
-

Notificações

-
-
- Nenhuma notificação no momento -
- - - - - {/* Configurações */} - - - -
-
- - {/* Page Content */} -
- {children} -
-
- - {/* Modal de Pesquisa */} - -
- -
setSearchOpen(false)} /> - - -
- -
-
- - - -
- -
-
- -

- Digite para buscar... -

-
-
- -
-
-
- - ↑↓ - navegar - - - ↵ - selecionar - -
-
-
-
- -
-
- - - {/* Theme Tester - Temporário para desenvolvimento */} - -
+ + + {children} + + ); } diff --git a/front-end-agency/app/(agency)/pagamentos/page.tsx b/front-end-agency/app/(agency)/pagamentos/page.tsx new file mode 100644 index 0000000..7a8e08c --- /dev/null +++ b/front-end-agency/app/(agency)/pagamentos/page.tsx @@ -0,0 +1,10 @@ +export default function PagamentosPage() { + return ( +
+

Pagamentos

+
+

Gestão de Pagamentos e Cobranças em breve

+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/page.tsx b/front-end-agency/app/(agency)/page.tsx new file mode 100644 index 0000000..e837c6b --- /dev/null +++ b/front-end-agency/app/(agency)/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from 'next/navigation'; + +export default function AgencyRootPage() { + redirect('/dashboard'); +} diff --git a/front-end-agency/app/(agency)/projetos/page.tsx b/front-end-agency/app/(agency)/projetos/page.tsx new file mode 100644 index 0000000..c0bebb6 --- /dev/null +++ b/front-end-agency/app/(agency)/projetos/page.tsx @@ -0,0 +1,10 @@ +export default function ProjetosPage() { + return ( +
+

Projetos

+
+

Gestão de Projetos em breve

+
+
+ ); +} diff --git a/front-end-agency/app/(agency)/social/page.tsx b/front-end-agency/app/(agency)/social/page.tsx new file mode 100644 index 0000000..a21a9bb --- /dev/null +++ b/front-end-agency/app/(agency)/social/page.tsx @@ -0,0 +1,10 @@ +export default function SocialPage() { + return ( +
+

Gestão de Redes Sociais

+
+

Planejamento e Publicação de Posts em breve

+
+
+ ); +} diff --git a/front-end-agency/app/login/page.tsx b/front-end-agency/app/login/page.tsx index 37157e2..60052b4 100644 --- a/front-end-agency/app/login/page.tsx +++ b/front-end-agency/app/login/page.tsx @@ -4,7 +4,8 @@ import { useState, useEffect } from "react"; import Link from "next/link"; import { Button, Input, Checkbox } from "@/components/ui"; import toast, { Toaster } from 'react-hot-toast'; -import { saveAuth, isAuthenticated } from '@/lib/auth'; +import { saveAuth, isAuthenticated, getToken, clearAuth } from '@/lib/auth'; +import { API_ENDPOINTS } from '@/lib/api'; import dynamic from 'next/dynamic'; const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false }); @@ -53,8 +54,26 @@ export default function LoginPage() { } if (isAuthenticated()) { - const target = superAdmin ? '/superadmin' : '/dashboard'; - window.location.href = target; + // Validar token antes de redirecionar para evitar loops + const token = getToken(); + fetch(API_ENDPOINTS.me, { + headers: { + 'Authorization': `Bearer ${token}` + } + }) + .then(res => { + if (res.ok) { + const target = superAdmin ? '/superadmin' : '/dashboard'; + window.location.href = target; + } else { + // Token inválido ou expirado + clearAuth(); + } + }) + .catch((err) => { + console.error('Erro ao validar sessão:', err); + // Em caso de erro de rede, não redireciona nem limpa, deixa o usuário tentar logar + }); } } }, []); diff --git a/front-end-agency/components/auth/AuthGuard.tsx b/front-end-agency/components/auth/AuthGuard.tsx new file mode 100644 index 0000000..e4da0d1 --- /dev/null +++ b/front-end-agency/components/auth/AuthGuard.tsx @@ -0,0 +1,47 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { useRouter, usePathname } from 'next/navigation'; +import { isAuthenticated } from '@/lib/auth'; + +export default function AuthGuard({ children }: { children: React.ReactNode }) { + const router = useRouter(); + const pathname = usePathname(); + const [authorized, setAuthorized] = useState(false); + + useEffect(() => { + const checkAuth = () => { + const isAuth = isAuthenticated(); + + if (!isAuth) { + setAuthorized(false); + // Evitar redirect loop se já estiver no login (embora o AuthGuard deva ser usado apenas em rotas protegidas) + if (pathname !== '/login') { + router.push('/login'); + } + } else { + setAuthorized(true); + } + }; + + checkAuth(); + + // Opcional: Adicionar listener para storage events para logout em outras abas + const handleStorageChange = (e: StorageEvent) => { + if (e.key === 'token' || e.key === 'user') { + checkAuth(); + } + }; + + window.addEventListener('storage', handleStorageChange); + return () => window.removeEventListener('storage', handleStorageChange); + }, [router, pathname]); + + // Enquanto verifica, não renderiza nada ou um loading + // Para evitar "flash" de conteúdo não autorizado + if (!authorized) { + return null; + } + + return <>{children}; +} diff --git a/front-end-agency/components/layout/DashboardLayout.tsx b/front-end-agency/components/layout/DashboardLayout.tsx new file mode 100644 index 0000000..1d3d950 --- /dev/null +++ b/front-end-agency/components/layout/DashboardLayout.tsx @@ -0,0 +1,40 @@ +'use client'; + +import React, { useState } from 'react'; +import { SidebarRail, MenuItem } from './SidebarRail'; +import { TopBar } from './TopBar'; + +interface DashboardLayoutProps { + children: React.ReactNode; + menuItems: MenuItem[]; +} + +export const DashboardLayout: React.FC = ({ children, menuItems }) => { + // Estado centralizado do layout + const [isExpanded, setIsExpanded] = useState(true); + const [activeTab, setActiveTab] = useState('dashboard'); + + return ( +
+ {/* Sidebar controla seu próprio estado visual via props */} + setIsExpanded(!isExpanded)} + menuItems={menuItems} + /> + + {/* Área de Conteúdo (Children) */} +
+ {/* TopBar com Breadcrumbs e Search */} + + + {/* Conteúdo das páginas */} +
+ {children} +
+
+
+ ); +}; diff --git a/front-end-agency/components/layout/SidebarRail.tsx b/front-end-agency/components/layout/SidebarRail.tsx new file mode 100644 index 0000000..0917ec1 --- /dev/null +++ b/front-end-agency/components/layout/SidebarRail.tsx @@ -0,0 +1,337 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; +import { usePathname, useRouter } from 'next/navigation'; +import { Menu, Transition } from '@headlessui/react'; +import { Fragment } from 'react'; +import { useTheme } from 'next-themes'; +import { + ChevronLeftIcon, + ChevronRightIcon, + ChevronDownIcon, + UserCircleIcon, + ArrowRightOnRectangleIcon, + SunIcon, + MoonIcon, + Cog6ToothIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; + +export interface MenuItem { + id: string; + label: string; + href: string; + icon: any; + subItems?: { + label: string; + href: string; + }[]; +} + +interface SidebarRailProps { + activeTab: string; + onTabChange: (tab: string) => void; + isExpanded: boolean; + onToggle: () => void; + menuItems: MenuItem[]; +} + +export const SidebarRail: React.FC = ({ + activeTab, + onTabChange, + isExpanded, + onToggle, + menuItems, +}) => { + const pathname = usePathname(); + const router = useRouter(); + const { theme, setTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + const [openSubmenu, setOpenSubmenu] = useState(null); + + useEffect(() => { + setMounted(true); + }, []); + + // Auto-open submenu if active + useEffect(() => { + if (isExpanded && pathname) { + const activeItem = menuItems.find(item => + item.subItems?.some(sub => pathname === sub.href || pathname.startsWith(sub.href)) + ); + if (activeItem) { + setOpenSubmenu(activeItem.id); + } + } + }, [pathname, isExpanded, menuItems]); + + const handleLogout = () => { + localStorage.removeItem('token'); + localStorage.removeItem('user'); + router.push('/login'); + }; + + const toggleTheme = () => { + setTheme(theme === 'dark' ? 'light' : 'dark'); + }; + + // Encontrar o item ativo para renderizar o submenu + const activeMenuItem = menuItems.find(item => item.id === openSubmenu); + + return ( +
+
+ {/* Toggle Button - Floating on the border */} + + + {/* Header com Logo */} +
+ {/* Logo */} +
+ A +
+ + {/* Título com animação */} +
+ Aggios +
+
+ + {/* Navegação */} +
+ {menuItems.map((item) => ( + { + if (item.subItems) { + setOpenSubmenu(openSubmenu === item.id ? null : item.id); + } else { + onTabChange(item.id); + setOpenSubmenu(null); + } + }} + isExpanded={isExpanded} + hasSubItems={!!item.subItems} + isOpen={openSubmenu === item.id} + /> + ))} +
+ + {/* Separador antes do menu de usuário */} +
+ + {/* User Menu - Footer */} +
+ + + +
+ Agência +
+ + + + +
+ + {({ active }) => ( + + )} + + + {({ active }) => ( + + + Configurações + + )} + + + {({ active }) => ( + + )} + +
+ + {({ active }) => ( + + )} + +
+ + +
+
+
+ + {/* Submenu Flyout Panel */} +
+ {activeMenuItem && ( + <> +
+

+ + {activeMenuItem.label} +

+ +
+
+ {activeMenuItem.subItems?.map((sub) => ( + setOpenSubmenu(null)} // Fecha ao clicar + className={` + flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium transition-colors mb-1 + ${pathname === sub.href + ? 'bg-brand-50 dark:bg-brand-900/10 text-brand-600 dark:text-brand-400' + : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white' + } + `} + > + + {sub.label} + + ))} +
+ + )} +
+
+ ); +}; + +// Subcomponente do Botão +interface RailButtonProps { + label: string; + icon: React.ComponentType<{ className?: string }>; + href: string; + active: boolean; + onClick: () => void; + isExpanded: boolean; + hasSubItems?: boolean; + isOpen?: boolean; +} + +const RailButton: React.FC = ({ label, icon: Icon, href, active, onClick, isExpanded, hasSubItems, isOpen }) => { + const Wrapper = hasSubItems ? 'button' : Link; + const props = hasSubItems ? { onClick, type: 'button' } : { href, onClick }; + + // Determine styling based on state + let baseClasses = "flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden w-full "; + + if (active && !hasSubItems) { + // Active leaf item (Dashboard, etc) + baseClasses += "text-white shadow-md"; + } else if (isOpen) { + // Open submenu parent - Highlight to show active state + baseClasses += "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-white"; + } else { + // Inactive item + baseClasses += "hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400"; + } + + return ( + + {/* Ícone */} + + + {/* Lógica Mágica do Texto: Max-Width Transition */} +
+ {label} + {hasSubItems && ( + + )} +
+ + {/* Indicador de Ativo (Barra lateral pequena quando fechado) */} + {active && !isExpanded && !hasSubItems && ( +
+ )} + + ); +}; diff --git a/front-end-agency/components/layout/TopBar.tsx b/front-end-agency/components/layout/TopBar.tsx new file mode 100644 index 0000000..99faa68 --- /dev/null +++ b/front-end-agency/components/layout/TopBar.tsx @@ -0,0 +1,101 @@ +'use client'; + +import React, { useState } from 'react'; +import { usePathname } from 'next/navigation'; +import Link from 'next/link'; +import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline'; +import CommandPalette from '@/components/ui/CommandPalette'; + +export const TopBar: React.FC = () => { + const pathname = usePathname(); + const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false); + + // Gerar breadcrumbs a partir do pathname + const generateBreadcrumbs = () => { + const paths = pathname?.split('/').filter(Boolean) || []; + const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [ + { name: 'Home', href: '/dashboard', icon: HomeIcon } + ]; + + let currentPath = ''; + paths.forEach((path, index) => { + currentPath += `/${path}`; + + // Mapeamento de nomes amigáveis + const nameMap: Record = { + 'dashboard': 'Dashboard', + 'clientes': 'Clientes', + 'projetos': 'Projetos', + 'financeiro': 'Financeiro', + 'configuracoes': 'Configurações', + 'novo': 'Novo', + }; + + if (path !== 'dashboard') { // Evita duplicar Home/Dashboard se a rota for /dashboard + breadcrumbs.push({ + name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1), + href: currentPath, + }); + } + }); + + return breadcrumbs; + }; + + const breadcrumbs = generateBreadcrumbs(); + + return ( + <> +
+ {/* Breadcrumbs */} + + + {/* Search Bar Trigger */} +
+ +
+
+ + + + ); +}; diff --git a/front-end-agency/components/ui/CommandPalette.tsx b/front-end-agency/components/ui/CommandPalette.tsx new file mode 100644 index 0000000..3b85de2 --- /dev/null +++ b/front-end-agency/components/ui/CommandPalette.tsx @@ -0,0 +1,206 @@ +'use client'; + +import { Fragment, useState, useEffect, useRef } from 'react'; +import { Combobox, Dialog, Transition } from '@headlessui/react'; +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; +import { useRouter } from 'next/navigation'; +import { + HomeIcon, + RocketLaunchIcon, + ChartBarIcon, + BriefcaseIcon, + LifebuoyIcon, + CreditCardIcon, + DocumentTextIcon, + FolderIcon, + ShareIcon, + Cog6ToothIcon, + PlusIcon, + ArrowRightIcon +} from '@heroicons/react/24/outline'; + +interface CommandPaletteProps { + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; +} + +export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProps) { + const [query, setQuery] = useState(''); + const router = useRouter(); + const inputRef = useRef(null); + + // Atalho de teclado (Ctrl+K ou Cmd+K) + useEffect(() => { + const onKeydown = (event: KeyboardEvent) => { + if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { + event.preventDefault(); + setIsOpen(true); + } + }; + window.addEventListener('keydown', onKeydown); + return () => { + window.removeEventListener('keydown', onKeydown); + }; + }, [setIsOpen]); + + const navigation = [ + { name: 'Visão Geral', href: '/dashboard', icon: HomeIcon, category: 'Navegação' }, + { name: 'CRM (Mission Control)', href: '/crm', icon: RocketLaunchIcon, category: 'Navegação' }, + { name: 'ERP', href: '/erp', icon: ChartBarIcon, category: 'Navegação' }, + { name: 'Projetos', href: '/projetos', icon: BriefcaseIcon, category: 'Navegação' }, + { name: 'Helpdesk', href: '/helpdesk', icon: LifebuoyIcon, category: 'Navegação' }, + { name: 'Pagamentos', href: '/pagamentos', icon: CreditCardIcon, category: 'Navegação' }, + { name: 'Contratos', href: '/contratos', icon: DocumentTextIcon, category: 'Navegação' }, + { name: 'Documentos', href: '/documentos', icon: FolderIcon, category: 'Navegação' }, + { name: 'Redes Sociais', href: '/social', icon: ShareIcon, category: 'Navegação' }, + { name: 'Configurações', href: '/configuracoes', icon: Cog6ToothIcon, category: 'Navegação' }, + // Ações + { name: 'Novo Projeto', href: '/projetos/novo', icon: PlusIcon, category: 'Ações' }, + { name: 'Novo Chamado', href: '/helpdesk/novo', icon: PlusIcon, category: 'Ações' }, + { name: 'Novo Contrato', href: '/contratos/novo', icon: PlusIcon, category: 'Ações' }, + ]; + + const filteredItems = + query === '' + ? navigation + : navigation.filter((item) => { + return item.name.toLowerCase().includes(query.toLowerCase()); + }); + + // Agrupar itens por categoria + const groups = filteredItems.reduce((acc, item) => { + if (!acc[item.category]) { + acc[item.category] = []; + } + acc[item.category].push(item); + return acc; + }, {} as Record); + + const handleSelect = (item: typeof navigation[0] | null) => { + if (!item) return; + setIsOpen(false); + router.push(item.href); + setQuery(''); + }; + + return ( + setQuery('')}> + + +
+ + +
+ + + +
+
+ + {filteredItems.length > 0 && ( + + {Object.entries(groups).map(([category, items]) => ( +
+
+ {category} +
+ {items.map((item) => ( + + `cursor-pointer select-none px-4 py-2.5 transition-colors ${active + ? '[background:var(--gradient)] text-white' + : '' + }` + } + > + {({ active }) => ( +
+
+
+ + {item.name} + + {active && ( + + )} +
+ )} + + ))} +
+ ))} + + )} + + {query !== '' && filteredItems.length === 0 && ( +
+
+ )} + +
+
+ + ↵ + Selecionar + + + ↓ + ↑ + Navegar + +
+
+ + Esc + Fechar + +
+
+ + + +
+
+ + ); +} diff --git a/front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx b/front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx index 3f44938..247269a 100644 --- a/front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx +++ b/front-end-dash.aggios.app/app/superadmin/agencies/[id]/page.tsx @@ -155,7 +155,7 @@ export default function AgencyDetailPage() {
Editar Dados diff --git a/front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx b/front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx index 7621c15..e06bb49 100644 --- a/front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx +++ b/front-end-dash.aggios.app/app/superadmin/agencies/new/page.tsx @@ -99,7 +99,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -114,7 +114,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />

Será usado como: exemplo.aggios.app

@@ -126,7 +126,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -137,7 +137,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -149,7 +149,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -160,7 +160,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -172,7 +172,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -182,7 +182,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" > @@ -199,7 +199,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -216,7 +216,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -229,7 +229,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -240,7 +240,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -251,7 +251,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -262,7 +262,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -273,7 +273,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />
@@ -284,7 +284,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" /> @@ -304,7 +304,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" /> @@ -318,7 +318,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" /> @@ -333,7 +333,7 @@ export default function NewAgencyPage() { 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" + className="w-full px-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-purple-500" />

Mínimo 8 caracteres

@@ -345,7 +345,7 @@ export default function NewAgencyPage() { diff --git a/front-end-dash.aggios.app/app/superadmin/layout.tsx b/front-end-dash.aggios.app/app/superadmin/layout.tsx index 3067ce1..ea7fad0 100644 --- a/front-end-dash.aggios.app/app/superadmin/layout.tsx +++ b/front-end-dash.aggios.app/app/superadmin/layout.tsx @@ -1,6 +1,23 @@ "use client"; import { DashboardLayout } from '@/components/layout/DashboardLayout'; +import { + HomeIcon, + BuildingOfficeIcon, + LinkIcon, + DocumentTextIcon, + Cog6ToothIcon, +} from '@heroicons/react/24/outline'; + +const SUPERADMIN_MENU_ITEMS = [ + { id: 'dashboard', label: 'Dashboard', href: '/superadmin', icon: HomeIcon }, + { id: 'agencies', label: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon }, + { id: 'templates', label: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon }, + { id: 'agency-templates', label: 'Templates Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon }, + { id: 'settings', label: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon }, +]; + +import AuthGuard from '@/components/auth/AuthGuard'; export default function SuperAdminLayout({ children, @@ -8,8 +25,10 @@ export default function SuperAdminLayout({ children: React.ReactNode; }) { return ( - - {children} - + + + {children} + + ); } diff --git a/front-end-dash.aggios.app/components/auth/AuthGuard.tsx b/front-end-dash.aggios.app/components/auth/AuthGuard.tsx new file mode 100644 index 0000000..6bc34cf --- /dev/null +++ b/front-end-dash.aggios.app/components/auth/AuthGuard.tsx @@ -0,0 +1,44 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { useRouter, usePathname } from 'next/navigation'; +import { isAuthenticated } from '@/lib/auth'; + +export default function AuthGuard({ children }: { children: React.ReactNode }) { + const router = useRouter(); + const pathname = usePathname(); + const [authorized, setAuthorized] = useState(false); + + useEffect(() => { + const checkAuth = () => { + const isAuth = isAuthenticated(); + + if (!isAuth) { + setAuthorized(false); + // Evitar redirect loop se já estiver no login + if (pathname !== '/login') { + router.push('/login'); + } + } else { + setAuthorized(true); + } + }; + + checkAuth(); + + const handleStorageChange = (e: StorageEvent) => { + if (e.key === 'token' || e.key === 'user') { + checkAuth(); + } + }; + + window.addEventListener('storage', handleStorageChange); + return () => window.removeEventListener('storage', handleStorageChange); + }, [router, pathname]); + + if (!authorized) { + return null; + } + + return <>{children}; +} diff --git a/front-end-dash.aggios.app/components/layout/DashboardLayout.tsx b/front-end-dash.aggios.app/components/layout/DashboardLayout.tsx index 8a1416e..1d3d950 100644 --- a/front-end-dash.aggios.app/components/layout/DashboardLayout.tsx +++ b/front-end-dash.aggios.app/components/layout/DashboardLayout.tsx @@ -1,14 +1,15 @@ 'use client'; import React, { useState } from 'react'; -import { SidebarRail } from './SidebarRail'; +import { SidebarRail, MenuItem } from './SidebarRail'; import { TopBar } from './TopBar'; interface DashboardLayoutProps { children: React.ReactNode; + menuItems: MenuItem[]; } -export const DashboardLayout: React.FC = ({ children }) => { +export const DashboardLayout: React.FC = ({ children, menuItems }) => { // Estado centralizado do layout const [isExpanded, setIsExpanded] = useState(true); const [activeTab, setActiveTab] = useState('dashboard'); @@ -21,6 +22,7 @@ export const DashboardLayout: React.FC = ({ children }) => onTabChange={setActiveTab} isExpanded={isExpanded} onToggle={() => setIsExpanded(!isExpanded)} + menuItems={menuItems} /> {/* Área de Conteúdo (Children) */} diff --git a/front-end-dash.aggios.app/components/layout/SidebarRail.tsx b/front-end-dash.aggios.app/components/layout/SidebarRail.tsx index b0b5666..017bd14 100644 --- a/front-end-dash.aggios.app/components/layout/SidebarRail.tsx +++ b/front-end-dash.aggios.app/components/layout/SidebarRail.tsx @@ -20,11 +20,19 @@ import { MoonIcon, } from '@heroicons/react/24/outline'; +export interface MenuItem { + id: string; + label: string; + href: string; + icon: any; +} + interface SidebarRailProps { activeTab: string; onTabChange: (tab: string) => void; isExpanded: boolean; onToggle: () => void; + menuItems: MenuItem[]; } export const SidebarRail: React.FC = ({ @@ -32,6 +40,7 @@ export const SidebarRail: React.FC = ({ onTabChange, isExpanded, onToggle, + menuItems, }) => { const pathname = usePathname(); const router = useRouter(); @@ -42,14 +51,6 @@ export const SidebarRail: React.FC = ({ setMounted(true); }, []); - const menuItems = [ - { id: 'dashboard', label: 'Dashboard', href: '/superadmin', icon: HomeIcon }, - { id: 'agencies', label: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon }, - { id: 'templates', label: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon }, - { id: 'agency-templates', label: 'Templates Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon }, - { id: 'settings', label: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon }, - ]; - const handleLogout = () => { localStorage.removeItem('token'); localStorage.removeItem('user'); @@ -107,7 +108,7 @@ export const SidebarRail: React.FC = ({ label={item.label} icon={item.icon} href={item.href} - active={pathname === item.href || (item.href !== '/superadmin' && pathname?.startsWith(item.href))} + active={pathname === item.href || (item.href !== '/superadmin' && item.href !== '/dashboard' && pathname?.startsWith(item.href))} onClick={() => onTabChange(item.id)} isExpanded={isExpanded} /> @@ -136,7 +137,7 @@ export const SidebarRail: React.FC = ({ leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - +
{({ active }) => ( @@ -148,6 +149,17 @@ export const SidebarRail: React.FC = ({ )} + + {({ active }) => ( + + + Configurações + + )} + {({ active }) => ( + + + Home + +
+ + + +
+ {/* Navegação rápida */} + + + {/* CORES */} +
+
+

Cores

+

Paleta de cores da plataforma Aggios

+
+ + {/* Brand Gradient */} +
+

Brand Gradient

+
+
+

linear-gradient(135deg, #ff3a05, #ff0080)

+
+
+ + {/* Gray Scale */} +
+

Gray Scale

+
+ {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => ( +
+
+
+

gray-{shade}

+
+
+ ))} +
+
+ + {/* Surface & Text Colors */} +
+
+

Surface Colors

+
+ {[ + { name: 'surface-light', var: '--color-surface-light' }, + { name: 'surface-dark', var: '--color-surface-dark' }, + { name: 'surface-muted', var: '--color-surface-muted' }, + { name: 'surface-card', var: '--color-surface-card' }, + ].map(color => ( +
+
+
+

{color.name}

+

var({color.var})

+
+
+ ))} +
+
+ +
+

Text Colors

+
+ {[ + { name: 'text-primary', var: '--color-text-primary' }, + { name: 'text-secondary', var: '--color-text-secondary' }, + { name: 'text-inverse', var: '--color-text-inverse' }, + ].map(color => ( +
+
+
+

{color.name}

+

var({color.var})

+
+
+ ))} +
+
+
+
+ + {/* ESPAÇAMENTOS */} +
+
+

Espaçamentos

+

Sistema de espaçamento compacto

+
+ +
+
+ {[ + { name: 'xs', value: '0.125rem', pixels: '2px' }, + { name: 'sm', value: '0.25rem', pixels: '4px' }, + { name: 'md', value: '0.5rem', pixels: '8px' }, + { name: 'lg', value: '0.75rem', pixels: '12px' }, + { name: 'xl', value: '1rem', pixels: '16px' }, + { name: '2xl', value: '1.5rem', pixels: '24px' }, + ].map(space => ( +
+
+

spacing-{space.name}

+

{space.value} ({space.pixels})

+
+
+
+ var(--spacing-{space.name}) +
+
+ ))} +
+
+
+ + {/* TIPOGRAFIA */} +
+
+

Tipografia

+

Hierarquia de texto e famílias de fontes

+
+ +
+ {/* Headings */} +
+

Headings (Arimo)

+
+
+

Heading 1

+

font-heading font-bold text-4xl

+
+
+

Heading 2

+

font-heading font-bold text-3xl

+
+
+

Heading 3

+

font-heading font-bold text-2xl

+
+
+

Heading 4

+

font-heading font-bold text-xl

+
+
+
+ + {/* Body Text */} +
+

Body Text (Inter)

+
+
+

Text Base - The quick brown fox jumps over the lazy dog

+

text-base

+
+
+

Text SM - The quick brown fox jumps over the lazy dog

+

text-sm

+
+
+

Text XS - The quick brown fox jumps over the lazy dog

+

text-xs

+
+
+
+ + {/* Code Text */} +
+

Code (Fira Code)

+
+
+ const message = "Hello, Aggios!"; +
+

font-mono - Fira Code

+
+
+
+
+ + {/* BORDAS */} +
+
+

Bordas

+

Border radius e estilos de borda

+
+ +
+ {/* Border Radius */} +
+

Border Radius

+
+ {[ + { name: 'rounded-none', class: 'rounded-none' }, + { name: 'rounded-sm', class: 'rounded-sm' }, + { name: 'rounded', class: 'rounded' }, + { name: 'rounded-lg', class: 'rounded-lg' }, + { name: 'rounded-xl', class: 'rounded-xl' }, + { name: 'rounded-2xl', class: 'rounded-2xl' }, + { name: 'rounded-full', class: 'rounded-full' }, + ].map(radius => ( +
+
+

{radius.name}

+
+ ))} +
+
+ + {/* Border Styles */} +
+

Border Styles

+
+
+

border border-zinc-200

+
+
+

border-2 border-zinc-200

+
+
+

border border-dashed

+
+
+
+
+
+ + {/* GRADIENTE */} +
+
+

Gradiente

+

Gradiente principal da marca

+
+ +
+
+

Brand Gradient

+
+

background: linear-gradient(135deg, #ff3a05, #ff0080)

+ + {/* Gradient Text */} +
+

Gradient Text

+

+ Texto com gradiente +

+

<span className="gradient-text">

+
+
+
+ + {/* SOMBRAS */} +
+
+

Sombras

+

Sistema de elevação com sombras

+
+ +
+ {[ + { name: 'shadow-sm', class: 'shadow-sm' }, + { name: 'shadow', class: 'shadow' }, + { name: 'shadow-md', class: 'shadow-md' }, + { name: 'shadow-lg', class: 'shadow-lg' }, + ].map(shadow => ( +
+
+

{shadow.name}

+
+

{shadow.class}

+
+ ))} +
+
+ + {/* ÍCONES */} +
+
+

Ícones

+

Heroicons - biblioteca completa (outline)

+
+ +
+
+ {iconList.map(({ name, component: Icon }) => ( +
+ +

{name}

+
+ ))} +
+
+
+ + {/* BOTÕES */} +
+
+

Botões

+

Variações de botões com Headless UI

+
+ +
+ {/* Primary Buttons */} +
+

Primary Buttons

+
+ + + +
+
+ + {/* Secondary Buttons */} +
+

Secondary Buttons

+
+ + + +
+
+ + {/* Icon Buttons */} +
+

Icon Buttons

+
+ + + +
+
+
+
+ + {/* CARDS */} +
+
+

Cards

+

Diferentes estilos de cards

+
+ +
+ {/* Basic Card */} +
+

Basic Card

+

Card simples com borda e padding

+ +
+ + {/* Elevated Card */} +
+

Elevated Card

+

Card com sombra e hover effect

+ +
+ + {/* Gradient Card */} +
+

Gradient Card

+

Card com fundo gradiente

+ +
+ + {/* Icon Card */} +
+
+ +
+

Icon Card

+

Card com ícone em destaque

+
+ + {/* Stat Card */} +
+

Total Revenue

+

R$ 128K

+

+18% este mês

+
+ + {/* Interactive Card */} +
e.currentTarget.style.borderColor = '#ff3a05'} + onMouseLeave={(e) => { + if (darkMode) { + e.currentTarget.style.borderColor = 'rgb(39 39 42)'; + } else { + e.currentTarget.style.borderColor = 'rgb(228 228 231)'; + } + }}> +
+
+ +
+ 3 +
+

Interactive Card

+

Clique para interagir

+
+
+
+ + {/* INPUTS */} +
+
+

Inputs

+

Campos de formulário com Headless UI

+
+ +
+
+ {/* Text Input */} +
+ + +
+ + {/* Email Input */} +
+ + +
+ + {/* Input with Icon */} +
+ +
+ + +
+
+ + {/* Textarea */} +
+ + +
+ + {/* Select with Headless UI */} +
+ + +
+ + {selectedOption.name} + + + + + {options.map((option) => ( + + {({ selected, active }) => ( +
+ + {option.name} + + {selected ? ( + + + ) : null} +
+ )} + + ))} + +
+ +
+ + {/* Checkbox */} +
+ + +
+ + {/* Radio */} +
+
+ + +
+
+ + +
+
+
+
+
+ + {/* BADGES */} +
+
+

Badges

+

Tags, badges e status indicators

+
+ +
+
+ {/* Status Badges */} +
+

Status Badges

+
+ + Success + + + Info + + + Warning + + + Error + +
+
+ + {/* Pill Badges */} +
+

Pill Badges

+
+ + + Premium + + + + New + + + + Popular + +
+
+ + {/* Count Badges */} +
+

Count Badges

+
+
+ + + 3 + +
+
+ + + 9 + +
+
+ + + 12 + +
+
+
+ + {/* Dot Indicators */} +
+

Dot Indicators

+
+
+ + Online +
+
+ + Away +
+
+ + Busy +
+
+ + Offline +
+
+
+
+
+
+ + {/* Footer */} +
+

+ Design System criado para Aggios Platform +

+

+ Versão 1.2 • 2025 +

+
+
+ + + ); +} diff --git a/frontend-aggios.app/app/globals.css b/frontend-aggios.app/app/globals.css index 96f70b7..6b9b29a 100644 --- a/frontend-aggios.app/app/globals.css +++ b/frontend-aggios.app/app/globals.css @@ -14,6 +14,7 @@ html.dark { body { background-color: var(--color-surface-muted); color: var(--color-text-primary); + font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif; transition: background-color 0.25s ease, color 0.25s ease; } @@ -22,6 +23,12 @@ html.dark { color: #f8fafc; } + /* Força fonte Arimo nos headings */ + h1, h2, h3, h4, h5, h6, + .font-heading { + font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif !important; + } + ::selection { background-color: var(--color-brand-500); color: var(--color-text-inverse); @@ -73,6 +80,13 @@ html.dark { .shadow-brand-20 { box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20); } + + .gradient-text { + background: var(--color-gradient-brand); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } } /* ========== Animations ========== */ diff --git a/frontend-aggios.app/app/layout.tsx b/frontend-aggios.app/app/layout.tsx index 50e65ad..3b95534 100644 --- a/frontend-aggios.app/app/layout.tsx +++ b/frontend-aggios.app/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Inter, Open_Sans, Fira_Code } from "next/font/google"; +import { Inter, Arimo, Fira_Code } from "next/font/google"; import "./globals.css"; import { ThemeProvider } from "next-themes"; @@ -9,10 +9,10 @@ const inter = Inter({ weight: ["400", "500", "600", "700"], }); -const openSans = Open_Sans({ - variable: "--font-open-sans", +const arimo = Arimo({ + variable: "--font-arimo", subsets: ["latin"], - weight: ["600", "700"], + weight: ["400", "500", "600", "700"], }); const firaCode = Fira_Code({ @@ -50,9 +50,8 @@ export default function RootLayout({ `, }} /> - - + {children} diff --git a/frontend-aggios.app/app/page.tsx b/frontend-aggios.app/app/page.tsx index 044b016..f790ae2 100644 --- a/frontend-aggios.app/app/page.tsx +++ b/frontend-aggios.app/app/page.tsx @@ -3,10 +3,45 @@ import { useState } from "react"; import Link from "next/link"; import Header from "@/components/Header"; +import { + RocketLaunchIcon, + ArrowRightIcon, + PlayCircleIcon, + ShieldCheckIcon, + BoltIcon, + UsersIcon, + CircleStackIcon, + RectangleGroupIcon, + CreditCardIcon, + ChatBubbleLeftRightIcon, + ShareIcon, + ChartBarIcon, + UserGroupIcon, + ChartBarSquareIcon, + DevicePhoneMobileIcon, + CheckIcon, + SparklesIcon, + InformationCircleIcon, + ServerIcon, + PhoneIcon, +} from "@heroicons/react/24/outline"; export default function Home() { const [isAnnual, setIsAnnual] = useState(false); + // Componente helper para ícones de redes sociais (mantém como SVG simples) + const LinkedInIcon = () => ( + + ); + + const TwitterIcon = () => ( + + ); + + const InstagramIcon = () => ( + + ); + return ( <>
@@ -17,7 +52,7 @@ export default function Home() {
- + Plataforma de Gestão Financeira
@@ -30,23 +65,23 @@ export default function Home() {

- - + + Começar Grátis - - + + Ver Demo
- + Segurança bancária
- + Automatizações inteligentes
@@ -112,20 +147,20 @@ export default function Home() {
{[ - { id: "crm", icon: "ri-customer-service-2-line", title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." }, - { id: "erp", icon: "ri-database-2-line", title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." }, - { id: "gestao-projetos", icon: "ri-trello-line", title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." }, - { id: "gestao-pagamentos", icon: "ri-secure-payment-line", title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." }, - { id: "helpdesk", icon: "ri-customer-service-line", title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." }, - { id: "integra", icon: "ri-share-forward-line", title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." }, + { id: "crm", Icon: UsersIcon, title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." }, + { id: "erp", Icon: CircleStackIcon, title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." }, + { id: "gestao-projetos", Icon: RectangleGroupIcon, title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." }, + { id: "gestao-pagamentos", Icon: CreditCardIcon, title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." }, + { id: "helpdesk", Icon: ChatBubbleLeftRightIcon, title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." }, + { id: "integra", Icon: ShareIcon, title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." }, ].map((item) => (
- - + + {item.title}
@@ -163,7 +198,7 @@ export default function Home() {
- +

Dashboard Inteligente

Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.

@@ -171,7 +206,7 @@ export default function Home() {
- +

Gestão de Clientes

Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.

@@ -179,7 +214,7 @@ export default function Home() {
- +

Relatórios Avançados

Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.

@@ -187,7 +222,7 @@ export default function Home() {
- +

Segurança Total

Seus dados protegidos com criptografia de ponta e backup automático na nuvem.

@@ -195,7 +230,7 @@ export default function Home() {
- +

Acesso Mobile

Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.

@@ -203,7 +238,7 @@ export default function Home() {
- +

Suporte 24/7

Conte com nossa equipe especializada sempre que precisar, em qualquer horário.

@@ -270,15 +305,15 @@ export default function Home() {
  • - + Todos os módulos inclusos
  • - + Portal white-label
  • - + 1GB de armazenamento
@@ -312,19 +347,19 @@ export default function Home() {
  • - + Todos os módulos inclusos
  • - + Portal white-label
  • - + 1GB de armazenamento
  • - + Suporte prioritário
@@ -355,27 +390,27 @@ export default function Home() {
  • - + Todos os módulos inclusos
  • - + Portal white-label
  • - + 1GB de armazenamento
  • - + Suporte prioritário
  • - + Gerente de conta dedicado
  • - + API para integrações
@@ -390,7 +425,7 @@ export default function Home() {

Enterprise

- +

301+ usuários (colaboradores + clientes)

@@ -400,15 +435,15 @@ export default function Home() {
  • - + Tudo do plano Cosmos +
  • - + Armazenamento customizado
  • - + Treinamento personalizado
@@ -421,8 +456,8 @@ export default function Home() { {/* Nota sobre desconto */}
-

- +

+ Todos os planos com 20% OFF no pagamento anual {isAnnual && (equivalente a 2,4 meses grátis)}

@@ -443,7 +478,7 @@ export default function Home() {
- +

Usuários Extras

@@ -454,7 +489,7 @@ export default function Home() {
- +

Storage Extra

@@ -478,12 +513,12 @@ export default function Home() {

- - + + Começar Grátis Agora - - + + Falar com Especialista
@@ -509,13 +544,13 @@ export default function Home() {

diff --git a/frontend-aggios.app/app/tokens.css b/frontend-aggios.app/app/tokens.css index af55237..fd0db9b 100644 --- a/frontend-aggios.app/app/tokens.css +++ b/frontend-aggios.app/app/tokens.css @@ -1,5 +1,13 @@ +/* Importar fontes do Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Arimo:wght@400;500;600;700&family=Fira+Code:wght@400;600&display=swap'); + @layer theme { :root { + /* Fontes */ + --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif; + --font-arimo: 'Arimo', ui-sans-serif, system-ui, sans-serif; + --font-fira-code: 'Fira Code', ui-monospace, 'SFMono-Regular', monospace; + /* Paleta de cores principais */ --color-brand-50: #f0f9ff; --color-brand-100: #e0f2fe; diff --git a/frontend-aggios.app/package-lock.json b/frontend-aggios.app/package-lock.json index 6824c5b..01cad2e 100644 --- a/frontend-aggios.app/package-lock.json +++ b/frontend-aggios.app/package-lock.json @@ -8,6 +8,8 @@ "name": "fronend-aggios.app", "version": "0.1.0", "dependencies": { + "@headlessui/react": "^2.2.9", + "@heroicons/react": "^2.2.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", @@ -450,6 +452,88 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.7.3", + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.28", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", + "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.4" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "license": "MIT" + }, + "node_modules/@headlessui/react": { + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.9.tgz", + "integrity": "sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.16", + "@react-aria/focus": "^3.20.2", + "@react-aria/interactions": "^3.25.0", + "@tanstack/react-virtual": "^3.13.9", + "use-sync-external-store": "^1.5.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" + } + }, + "node_modules/@heroicons/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz", + "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16 || ^19.0.0-rc" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -1223,6 +1307,103 @@ "node": ">=12.4.0" } }, + "node_modules/@react-aria/focus": { + "version": "3.21.2", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.21.2.tgz", + "integrity": "sha512-JWaCR7wJVggj+ldmM/cb/DXFg47CXR55lznJhZBh4XVqJjMKwaOOqpT5vNN7kpC1wUpXicGNuDnJDN1S/+6dhQ==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/interactions": "^3.25.6", + "@react-aria/utils": "^3.31.0", + "@react-types/shared": "^3.32.1", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/interactions": { + "version": "3.25.6", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.6.tgz", + "integrity": "sha512-5UgwZmohpixwNMVkMvn9K1ceJe6TzlRlAfuYoQDUuOkk62/JVJNDLAPKIf5YMRc7d2B0rmfgaZLMtbREb0Zvkw==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.10", + "@react-aria/utils": "^3.31.0", + "@react-stately/flags": "^3.1.2", + "@react-types/shared": "^3.32.1", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.10", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz", + "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-aria/utils": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.31.0.tgz", + "integrity": "sha512-ABOzCsZrWzf78ysswmguJbx3McQUja7yeGj6/vZo4JVsZNlxAN+E9rs381ExBRI0KzVo6iBTeX5De8eMZPJXig==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.10", + "@react-stately/flags": "^3.1.2", + "@react-stately/utils": "^3.10.8", + "@react-types/shared": "^3.32.1", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", + "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-stately/flags": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz", + "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@react-stately/utils": { + "version": "3.10.8", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.8.tgz", + "integrity": "sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, + "node_modules/@react-types/shared": { + "version": "3.32.1", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.32.1.tgz", + "integrity": "sha512-famxyD5emrGGpFuUlgOP6fVW2h/ZaF405G5KDi3zPHzyjAWys/8W6NAVJtNbkCkhedmvL0xOhvt8feGXyXaw5w==", + "license": "Apache-2.0", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" + } + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -1455,6 +1636,33 @@ "tailwindcss": "4.0.0-alpha.25" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.13.13", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.13.tgz", + "integrity": "sha512-4o6oPMDvQv+9gMi8rE6gWmsOjtUZUYIJHv7EB+GblyYdi8U6OqLl8rhHWIUZSL1dUU2dPwTdTgybCKf9EjIrQg==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.13.13" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.13", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.13.tgz", + "integrity": "sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@tybys/wasm-util": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", @@ -2524,6 +2732,15 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5982,6 +6199,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz", + "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "4.0.0-alpha.25", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.25.tgz", @@ -6342,6 +6565,15 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", + "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/frontend-aggios.app/package.json b/frontend-aggios.app/package.json index 0d283be..d9eb6ee 100644 --- a/frontend-aggios.app/package.json +++ b/frontend-aggios.app/package.json @@ -9,11 +9,12 @@ "lint": "eslint" }, "dependencies": { + "@headlessui/react": "^2.2.9", + "@heroicons/react": "^2.2.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", - "react-dom": "19.2.0", - "remixicon": "^4.7.0" + "react-dom": "19.2.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.0.0-alpha.25", diff --git a/frontend-aggios.app/tailwind.preset.js b/frontend-aggios.app/tailwind.preset.js index 481f835..cc01f54 100644 --- a/frontend-aggios.app/tailwind.preset.js +++ b/frontend-aggios.app/tailwind.preset.js @@ -6,7 +6,7 @@ module.exports = { fontFamily: { sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui', 'sans-serif'], mono: ['var(--font-fira-code)', 'ui-monospace', 'SFMono-Regular', 'monospace'], - heading: ['var(--font-open-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'], + heading: ['var(--font-arimo)', 'ui-sans-serif', 'system-ui', 'sans-serif'], }, colors: { brand: { @@ -30,6 +30,9 @@ module.exports = { boxShadow: { glow: '0 0 20px rgba(14, 165, 233, 0.3)', }, + borderRadius: { + '4xl': '2rem', + }, }, }, };