feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)
This commit is contained in:
Erik Silva
@@ -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:*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export default function ClientesPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Clientes</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">Gerencie sua carteira de clientes</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-12 border border-gray-200 dark:border-gray-700 text-center">
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="w-24 h-24 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<i className="ri-user-line text-5xl text-blue-600 dark:text-blue-400"></i>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
|
||||
Módulo CRM em Desenvolvimento
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Em breve você poderá gerenciar seus clientes com recursos avançados de CRM.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -437,7 +437,7 @@ export default function ConfiguracoesPage() {
|
||||
{/* Loading State */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b border-gray-900 dark:border-gray-100"></div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div> <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
@@ -639,7 +639,7 @@ export default function ConfiguracoesPage() {
|
||||
type="text"
|
||||
value={agencyData.city}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div> <div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
@@ -661,7 +661,7 @@ export default function ConfiguracoesPage() {
|
||||
type="text"
|
||||
value={agencyData.street}
|
||||
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"
|
||||
/>
|
||||
</div> <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
@@ -671,7 +671,7 @@ export default function ConfiguracoesPage() {
|
||||
type="text"
|
||||
value={agencyData.number}
|
||||
onChange={(e) => setAgencyData({ ...agencyData, number: 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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -789,7 +789,7 @@ export default function ConfiguracoesPage() {
|
||||
className="hidden"
|
||||
disabled={uploadingLogo}
|
||||
/>
|
||||
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
|
||||
<div className="border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
|
||||
<PhotoIcon className="w-8 h-8 text-gray-400 dark:text-gray-500" />
|
||||
@@ -897,7 +897,7 @@ export default function ConfiguracoesPage() {
|
||||
className="hidden"
|
||||
disabled={uploadingLogo}
|
||||
/>
|
||||
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
|
||||
<div className="border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-xl p-8 text-center hover:border-gray-400 dark:hover:border-gray-500 transition-colors bg-gray-50/50 dark:bg-gray-900/50">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
|
||||
<PhotoIcon className="w-8 h-8 text-gray-400 dark:text-gray-500" />
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
@@ -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)"
|
||||
/>
|
||||
</div>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
10
front-end-agency/app/(agency)/contratos/page.tsx
Normal file
10
front-end-agency/app/(agency)/contratos/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function ContratosPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Contratos</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Gestão de Contratos e Assinaturas em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
front-end-agency/app/(agency)/crm/page.tsx
Normal file
71
front-end-agency/app/(agency)/crm/page.tsx
Normal file
@@ -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 (
|
||||
<div className="p-6 h-full overflow-auto">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Mission Control (CRM)
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Visão geral do relacionamento com clientes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div
|
||||
key={stat.name}
|
||||
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-900 p-4 border border-gray-200 dark:border-gray-800 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{stat.name}
|
||||
</p>
|
||||
<p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{stat.value}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-lg p-2 bg-${stat.color}-100 dark:bg-${stat.color}-900/20`}
|
||||
>
|
||||
<Icon
|
||||
className={`h-5 w-5 text-${stat.color}-600 dark:text-${stat.color}-400`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
|
||||
<p className="text-gray-500">Funil de Vendas (Em breve)</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 h-64 flex items-center justify-center">
|
||||
<p className="text-gray-500">Atividades Recentes (Em breve)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,180 +1,170 @@
|
||||
"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<React.SVGProps<SVGSVGElement>>;
|
||||
trend?: number;
|
||||
color: 'blue' | 'purple' | 'gray' | 'green';
|
||||
}
|
||||
export default function DashboardPage() {
|
||||
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' },
|
||||
];
|
||||
|
||||
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'
|
||||
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%' },
|
||||
]
|
||||
},
|
||||
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'
|
||||
{
|
||||
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' },
|
||||
]
|
||||
},
|
||||
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'
|
||||
{
|
||||
title: 'Projetos & Tarefas',
|
||||
icon: BriefcaseIcon,
|
||||
color: 'purple',
|
||||
stats: [
|
||||
{ label: 'Em Andamento', value: '12' },
|
||||
{ label: 'Atrasados', value: '1' },
|
||||
{ label: 'Concluídos (Mês)', value: '4' },
|
||||
]
|
||||
},
|
||||
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'
|
||||
{
|
||||
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' },
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
function StatCard({ title, value, icon: Icon, trend, color }: StatCardProps) {
|
||||
const colors = colorClasses[color];
|
||||
const isPositive = trend && trend > 0;
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
|
||||
<div className="p-6 h-full overflow-auto">
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Visão Geral da Agência
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Acompanhe o desempenho de todos os módulos em tempo real
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Top Stats */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{overviewStats.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div
|
||||
key={stat.name}
|
||||
className="relative overflow-hidden rounded-xl bg-white dark:bg-zinc-900 p-4 border border-gray-200 dark:border-zinc-800 shadow-sm"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
|
||||
<p className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">{value}</p>
|
||||
{trend !== undefined && (
|
||||
<div className="flex items-center mt-2">
|
||||
{isPositive ? (
|
||||
<ArrowTrendingUpIcon className="w-4 h-4 text-emerald-500" />
|
||||
<div className={`rounded-lg p-2 bg-${stat.color}-50 dark:bg-${stat.color}-900/20`}>
|
||||
<Icon className={`h-6 w-6 text-${stat.color}-600 dark:text-${stat.color}-400`} />
|
||||
</div>
|
||||
<div className={`flex items-baseline text-sm font-semibold ${stat.changeType === 'increase' ? 'text-green-600' : 'text-red-600'
|
||||
}`}>
|
||||
{stat.changeType === 'increase' ? (
|
||||
<ArrowTrendingUpIcon className="h-4 w-4 mr-1" />
|
||||
) : (
|
||||
<ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
|
||||
<ArrowTrendingDownIcon className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
<span className={`text-sm font-medium ml-1 ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
|
||||
{Math.abs(trend)}%
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 ml-1">vs mês anterior</span>
|
||||
{stat.change}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${colors.iconBg} p-3 rounded-xl`}>
|
||||
<Icon className={`w-8 h-8 ${colors.iconColor}`} />
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">{stat.name}</p>
|
||||
<p className="text-2xl font-bold text-gray-900 dark:text-white">{stat.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [stats, setStats] = useState({
|
||||
clientes: 0,
|
||||
projetos: 0,
|
||||
tarefas: 0,
|
||||
faturamento: 0
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se é SUPERADMIN e redirecionar
|
||||
const user = getUser();
|
||||
if (user && user.role === 'SUPERADMIN') {
|
||||
router.push('/superadmin');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulando carregamento de dados
|
||||
setTimeout(() => {
|
||||
setStats({
|
||||
clientes: 127,
|
||||
projetos: 18,
|
||||
tarefas: 64,
|
||||
faturamento: 87500
|
||||
});
|
||||
}, 300);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Bem-vindo ao seu painel de controle
|
||||
</p>
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<StatCard
|
||||
title="Clientes Ativos"
|
||||
value={stats.clientes}
|
||||
icon={UserGroupIcon}
|
||||
trend={12.5}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
title="Projetos em Andamento"
|
||||
value={stats.projetos}
|
||||
icon={FolderIcon}
|
||||
trend={8.2}
|
||||
color="purple"
|
||||
/>
|
||||
<StatCard
|
||||
title="Tarefas Pendentes"
|
||||
value={stats.tarefas}
|
||||
icon={ChartBarIcon}
|
||||
trend={-3.1}
|
||||
color="gray"
|
||||
/>
|
||||
<StatCard
|
||||
title="Faturamento"
|
||||
value={new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL',
|
||||
minimumFractionDigits: 0
|
||||
}).format(stats.faturamento)}
|
||||
icon={CurrencyDollarIcon}
|
||||
trend={25.3}
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Coming Soon Card */}
|
||||
<div className="bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-12">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-6" style={{ background: 'var(--gradient-primary)' }}>
|
||||
<ChartBarIcon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
|
||||
Em Desenvolvimento
|
||||
{/* Modules Grid */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Performance por Módulo
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
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.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
{['CRM', 'ERP', 'Projetos', 'Pagamentos', 'Documentos', 'Suporte', 'Contratos'].map((item) => (
|
||||
<span
|
||||
key={item}
|
||||
className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700"
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{modules.map((module) => {
|
||||
const Icon = module.icon;
|
||||
return (
|
||||
<div
|
||||
key={module.title}
|
||||
className="rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 p-6 hover:border-gray-200 dark:hover:border-zinc-700 transition-colors"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className={`p-2 rounded-lg bg-${module.color}-50 dark:bg-${module.color}-900/20`}>
|
||||
<Icon className={`h-5 w-5 text-${module.color}-600 dark:text-${module.color}-400`} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">
|
||||
{module.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{module.stats.map((stat, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-500 dark:text-gray-400">{stat.label}</span>
|
||||
<span className="font-medium text-gray-900 dark:text-white">{stat.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
10
front-end-agency/app/(agency)/documentos/page.tsx
Normal file
10
front-end-agency/app/(agency)/documentos/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function DocumentosPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Documentos</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Gestão Eletrônica de Documentos (GED) em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
front-end-agency/app/(agency)/erp/page.tsx
Normal file
10
front-end-agency/app/(agency)/erp/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function ERPPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">ERP</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Sistema Integrado de Gestão Empresarial em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
front-end-agency/app/(agency)/helpdesk/page.tsx
Normal file
10
front-end-agency/app/(agency)/helpdesk/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function HelpdeskPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Helpdesk</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Central de Suporte e Chamados em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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<any>(null);
|
||||
const [agencyName, setAgencyName] = useState('');
|
||||
const [agencyLogo, setAgencyLogo] = useState('');
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const [activeSubmenu, setActiveSubmenu] = useState<number | null>(null);
|
||||
const [selectedClient, setSelectedClient] = useState<any>(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 (
|
||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-950">
|
||||
{/* Favicon Dinâmico */}
|
||||
<DynamicFavicon logoUrl={agencyLogo} />
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside className={`${activeSubmenu !== null ? 'w-20' : (sidebarOpen ? 'w-64' : 'w-20')} transition-all duration-300 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col`}>
|
||||
{/* Logo */}
|
||||
<div className="h-16 flex items-center justify-center border-b border-gray-200 dark:border-gray-800">
|
||||
{(sidebarOpen && activeSubmenu === null) ? (
|
||||
<div className="flex items-center justify-between px-4 w-full">
|
||||
<div className="flex items-center space-x-3">
|
||||
{agencyLogo ? (
|
||||
<img src={agencyLogo} alt="Logo" className="w-8 h-8 rounded-lg object-contain shrink-0" />
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-lg shrink-0" style={{ background: 'var(--gradient-primary)' }}></div>
|
||||
)}
|
||||
<span className="font-bold text-lg dark:text-white capitalize">{agencyName}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
<XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{agencyLogo ? (
|
||||
<img src={agencyLogo} alt="Logo" className="w-8 h-8 rounded-lg object-contain" />
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-lg" style={{ background: 'var(--gradient-primary)' }}></div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Menu */}
|
||||
<nav className="flex-1 overflow-y-auto py-4 px-3">
|
||||
{menuItems.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeSubmenu === idx;
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setActiveSubmenu(isActive ? null : idx)}
|
||||
className={`w-full flex items-center ${(sidebarOpen && activeSubmenu === null) ? 'space-x-3 px-3' : 'justify-center px-0'} py-2.5 mb-1 rounded-lg transition-all group cursor-pointer ${isActive
|
||||
? 'bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`${(sidebarOpen && activeSubmenu === null) ? 'w-5 h-5' : 'w-[18px] h-[18px]'} stroke-[1.5]`} />
|
||||
{(sidebarOpen && activeSubmenu === null) && (
|
||||
<>
|
||||
<span className="flex-1 text-left text-sm font-normal">{item.label}</span>
|
||||
<ChevronRightIcon className={`w-4 h-4 transition-transform ${isActive ? 'rotate-90' : ''}`} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-800">
|
||||
{(sidebarOpen && activeSubmenu === null) ? (
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="w-full flex items-center space-x-3 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors">
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold" style={{ background: 'var(--gradient-primary)' }}>
|
||||
{user?.name?.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">{user?.name}</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{user?.role === 'ADMIN_AGENCIA' ? 'Admin' : 'Cliente'}</p>
|
||||
</div>
|
||||
<ChevronDownIcon className="w-4 h-4 text-gray-400" />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="/perfil"
|
||||
className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} flex items-center px-4 py-3 text-sm text-gray-700 dark:text-gray-300`}
|
||||
>
|
||||
<UserCircleIcon className="w-5 h-5 mr-3" />
|
||||
Meu Perfil
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''} w-full flex items-center px-4 py-3 text-sm text-red-600 dark:text-red-400`}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="w-5 h-5 mr-3" />
|
||||
Sair
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-10 h-10 mx-auto rounded-full flex items-center justify-center text-white cursor-pointer"
|
||||
style={{ background: 'var(--gradient-primary)' }}
|
||||
title="Sair"
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Submenu Lateral */}
|
||||
<Transition
|
||||
show={activeSubmenu !== null}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="transform -translate-x-full opacity-0"
|
||||
enterTo="transform translate-x-0 opacity-100"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="transform translate-x-0 opacity-100"
|
||||
leaveTo="transform -translate-x-full opacity-0"
|
||||
>
|
||||
<aside className="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col">
|
||||
{activeSubmenu !== null && (
|
||||
<>
|
||||
<div className="h-16 flex items-center justify-between px-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h2 className="font-semibold text-gray-900 dark:text-white">{menuItems[activeSubmenu].label}</h2>
|
||||
<button
|
||||
onClick={() => setActiveSubmenu(null)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors cursor-pointer"
|
||||
>
|
||||
<XMarkIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex-1 overflow-y-auto py-4 px-3">
|
||||
{menuItems[activeSubmenu].submenu?.map((subItem, idx) => {
|
||||
const SubIcon = subItem.icon;
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href={subItem.href}
|
||||
className="flex items-center space-x-3 px-4 py-2.5 mb-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<SubIcon className="w-5 h-5 stroke-[1.5]" />
|
||||
<span>{subItem.label}</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
</Transition>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h1 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Dashboard
|
||||
</h1>
|
||||
|
||||
{/* Seletor de Cliente */}
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors cursor-pointer">
|
||||
{selectedClient?.avatar ? (
|
||||
<div className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-semibold" style={{ background: 'var(--gradient-primary)' }}>
|
||||
{selectedClient.avatar}
|
||||
</div>
|
||||
) : (
|
||||
<UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
)}
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{selectedClient?.name || 'Selecionar Cliente'}
|
||||
</span>
|
||||
<ChevronDownIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute left-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50">
|
||||
<div className="p-3 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar cliente..."
|
||||
className="w-full pl-9 pr-3 py-2 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-64 overflow-y-auto p-2">
|
||||
{clients.map((client) => (
|
||||
<Menu.Item key={client.id}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={() => setSelectedClient(client)}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-gray-700' : ''
|
||||
} ${selectedClient?.id === client.id ? 'bg-gray-100 dark:bg-gray-800' : ''
|
||||
} w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg transition-colors cursor-pointer`}
|
||||
>
|
||||
{client.avatar ? (
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0" style={{ background: 'var(--gradient-primary)' }}>
|
||||
{client.avatar}
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
|
||||
<UsersIcon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
<span className="flex-1 text-left text-sm font-medium text-gray-900 dark:text-white">
|
||||
{client.name}
|
||||
</span>
|
||||
{selectedClient?.id === client.id && (
|
||||
<div className="w-2 h-2 rounded-full bg-gray-900 dark:bg-gray-100"></div>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Pesquisa */}
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center space-x-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">Pesquisar...</span>
|
||||
<kbd className="hidden sm:inline-flex items-center px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</button>
|
||||
|
||||
<ThemeToggle />
|
||||
|
||||
{/* Notificações */}
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg relative transition-colors">
|
||||
<BellIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Notificações</h3>
|
||||
</div>
|
||||
<div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Nenhuma notificação no momento
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
||||
{/* Configurações */}
|
||||
<a
|
||||
href="/configuracoes"
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||
>
|
||||
<Cog6ToothIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-950">
|
||||
<AuthGuard>
|
||||
<DashboardLayout menuItems={AGENCY_MENU_ITEMS}>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Modal de Pesquisa */}
|
||||
<Transition appear show={searchOpen} as={Fragment}>
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setSearchOpen(false)} />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="flex min-h-full items-start justify-center p-4 pt-[15vh]">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<div className="w-full max-w-2xl bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden relative z-10">
|
||||
<div className="flex items-center px-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<MagnifyingGlassIcon className="w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar páginas, clientes, projetos..."
|
||||
autoFocus
|
||||
className="w-full px-4 py-4 bg-transparent text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setSearchOpen(false)}
|
||||
className="text-xs text-gray-500 dark:text-gray-400 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded"
|
||||
>
|
||||
ESC
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 max-h-96 overflow-y-auto">
|
||||
<div className="text-center py-12">
|
||||
<MagnifyingGlassIcon className="w-12 h-12 text-gray-300 dark:text-gray-700 mx-auto mb-3" />
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Digite para buscar...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950">
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="flex items-center">
|
||||
<kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↑↓</kbd>
|
||||
navegar
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<kbd className="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded mr-1">↵</kbd>
|
||||
selecionar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
{/* Theme Tester - Temporário para desenvolvimento */}
|
||||
<ThemeTester />
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
10
front-end-agency/app/(agency)/pagamentos/page.tsx
Normal file
10
front-end-agency/app/(agency)/pagamentos/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function PagamentosPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Pagamentos</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Gestão de Pagamentos e Cobranças em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
front-end-agency/app/(agency)/page.tsx
Normal file
5
front-end-agency/app/(agency)/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
export default function AgencyRootPage() {
|
||||
redirect('/dashboard');
|
||||
}
|
||||
10
front-end-agency/app/(agency)/projetos/page.tsx
Normal file
10
front-end-agency/app/(agency)/projetos/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function ProjetosPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Projetos</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Gestão de Projetos em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
front-end-agency/app/(agency)/social/page.tsx
Normal file
10
front-end-agency/app/(agency)/social/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function SocialPage() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Gestão de Redes Sociais</h1>
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center">
|
||||
<p className="text-gray-500">Planejamento e Publicação de Posts em breve</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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()) {
|
||||
// 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
|
||||
});
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
47
front-end-agency/components/auth/AuthGuard.tsx
Normal file
47
front-end-agency/components/auth/AuthGuard.tsx
Normal file
@@ -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}</>;
|
||||
}
|
||||
40
front-end-agency/components/layout/DashboardLayout.tsx
Normal file
40
front-end-agency/components/layout/DashboardLayout.tsx
Normal file
@@ -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<DashboardLayoutProps> = ({ children, menuItems }) => {
|
||||
// Estado centralizado do layout
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('dashboard');
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
|
||||
{/* Sidebar controla seu próprio estado visual via props */}
|
||||
<SidebarRail
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
isExpanded={isExpanded}
|
||||
onToggle={() => setIsExpanded(!isExpanded)}
|
||||
menuItems={menuItems}
|
||||
/>
|
||||
|
||||
{/* Área de Conteúdo (Children) */}
|
||||
<main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white dark:bg-zinc-900 rounded-2xl shadow-lg relative transition-colors duration-300 border border-transparent dark:border-zinc-800">
|
||||
{/* TopBar com Breadcrumbs e Search */}
|
||||
<TopBar />
|
||||
|
||||
{/* Conteúdo das páginas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
337
front-end-agency/components/layout/SidebarRail.tsx
Normal file
337
front-end-agency/components/layout/SidebarRail.tsx
Normal file
@@ -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<SidebarRailProps> = ({
|
||||
activeTab,
|
||||
onTabChange,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
menuItems,
|
||||
}) => {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [openSubmenu, setOpenSubmenu] = useState<string | null>(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 (
|
||||
<div className="flex h-full relative z-20">
|
||||
<div
|
||||
className={`
|
||||
relative h-full bg-white dark:bg-zinc-900 rounded-2xl flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 shadow-lg z-20
|
||||
transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
|
||||
${isExpanded ? 'w-[240px]' : 'w-[80px]'}
|
||||
`}
|
||||
>
|
||||
{/* Toggle Button - Floating on the border */}
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
|
||||
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronLeftIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRightIcon className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Header com Logo */}
|
||||
<div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
|
||||
{/* Logo */}
|
||||
<div
|
||||
className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
A
|
||||
</div>
|
||||
|
||||
{/* Título com animação */}
|
||||
<div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${isExpanded ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
|
||||
<span className="font-heading font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navegação */}
|
||||
<div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
|
||||
{menuItems.map((item) => (
|
||||
<RailButton
|
||||
key={item.id}
|
||||
label={item.label}
|
||||
icon={item.icon}
|
||||
href={item.href}
|
||||
active={pathname === item.href || (item.href !== '/dashboard' && pathname?.startsWith(item.href))}
|
||||
onClick={() => {
|
||||
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}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Separador antes do menu de usuário */}
|
||||
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
|
||||
|
||||
{/* User Menu - Footer */}
|
||||
<div>
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${isExpanded ? '' : 'justify-center'}`}>
|
||||
<UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
|
||||
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
|
||||
<span className="font-medium text-xs text-gray-900 dark:text-white">Agência</span>
|
||||
</div>
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
|
||||
<div className="p-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<UserCircleIcon className="mr-2 h-4 w-4" />
|
||||
Ver meu perfil
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href="/configuracoes"
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<Cog6ToothIcon className="mr-2 h-4 w-4" />
|
||||
Configurações
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
{mounted && theme === 'dark' ? (
|
||||
<>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Tema Claro
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Tema Escuro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
|
||||
Sair
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submenu Flyout Panel */}
|
||||
<div
|
||||
className={`
|
||||
absolute top-0 bottom-0 left-[calc(100%+12px)] w-64
|
||||
bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-100 dark:border-zinc-800
|
||||
transition-all duration-300 ease-in-out origin-left z-10 flex flex-col overflow-hidden
|
||||
${openSubmenu ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4 pointer-events-none'}
|
||||
`}
|
||||
>
|
||||
{activeMenuItem && (
|
||||
<>
|
||||
<div className="p-4 border-b border-gray-100 dark:border-zinc-800 bg-gray-50/50 dark:bg-zinc-800/50 flex items-center justify-between">
|
||||
<h3 className="font-heading font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<activeMenuItem.icon className="w-5 h-5 text-brand-500" />
|
||||
{activeMenuItem.label}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => setOpenSubmenu(null)}
|
||||
className="p-1 rounded-md hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-500 dark:text-gray-400 transition-colors"
|
||||
aria-label="Fechar submenu"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-2 flex-1 overflow-y-auto">
|
||||
{activeMenuItem.subItems?.map((sub) => (
|
||||
<Link
|
||||
key={sub.href}
|
||||
href={sub.href}
|
||||
onClick={() => 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'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${pathname === sub.href ? 'bg-brand-500' : 'bg-gray-300 dark:bg-zinc-600'}`} />
|
||||
{sub.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 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<RailButtonProps> = ({ 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 (
|
||||
<Wrapper
|
||||
{...props as any}
|
||||
style={{ background: active && !hasSubItems ? 'var(--gradient)' : undefined }}
|
||||
className={`${baseClasses} ${isExpanded ? '' : 'justify-center'}`}
|
||||
>
|
||||
{/* Ícone */}
|
||||
<Icon className={`shrink-0 w-4 h-4 ${isOpen ? 'text-brand-500' : ''}`} />
|
||||
|
||||
{/* Lógica Mágica do Texto: Max-Width Transition */}
|
||||
<div className={`
|
||||
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out flex items-center flex-1
|
||||
${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}
|
||||
`}>
|
||||
<span className="font-medium text-xs flex-1 text-left">{label}</span>
|
||||
{hasSubItems && (
|
||||
<ChevronRightIcon className={`w-3 h-3 transition-transform duration-200 ${isOpen ? 'text-brand-500' : 'text-gray-400'}`} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
|
||||
{active && !isExpanded && !hasSubItems && (
|
||||
<div
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
/>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
101
front-end-agency/components/layout/TopBar.tsx
Normal file
101
front-end-agency/components/layout/TopBar.tsx
Normal file
@@ -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<string, string> = {
|
||||
'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 (
|
||||
<>
|
||||
<div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-6 py-3 flex items-center justify-between transition-colors">
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="flex items-center gap-2 text-xs">
|
||||
{breadcrumbs.map((crumb, index) => {
|
||||
const Icon = crumb.icon;
|
||||
const isLast = index === breadcrumbs.length - 1;
|
||||
|
||||
return (
|
||||
<div key={crumb.href} className="flex items-center gap-2">
|
||||
{Icon ? (
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className="flex items-center gap-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-colors"
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
<span>{crumb.name}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className={`${isLast ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200'} transition-colors`}
|
||||
>
|
||||
{crumb.name}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!isLast && <ChevronRightIcon className="w-3 h-3 text-gray-400 dark:text-zinc-600" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Search Bar Trigger */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setIsCommandPaletteOpen(true)}
|
||||
className="group relative flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-700 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-zinc-200 transition-all w-64"
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-4 h-4 text-gray-400 dark:text-zinc-500 group-hover:text-gray-600 dark:group-hover:text-zinc-300" />
|
||||
<span>Pesquisar...</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<kbd className="hidden sm:inline-block px-1.5 py-0.5 text-[10px] font-mono font-medium text-gray-500 dark:text-zinc-400 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded shadow-sm">
|
||||
Ctrl K
|
||||
</kbd>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommandPalette isOpen={isCommandPaletteOpen} setIsOpen={setIsCommandPaletteOpen} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
206
front-end-agency/components/ui/CommandPalette.tsx
Normal file
206
front-end-agency/components/ui/CommandPalette.tsx
Normal file
@@ -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<HTMLInputElement>(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<string, typeof filteredItems>);
|
||||
|
||||
const handleSelect = (item: typeof navigation[0] | null) => {
|
||||
if (!item) return;
|
||||
setIsOpen(false);
|
||||
router.push(item.href);
|
||||
setQuery('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment} afterLeave={() => setQuery('')}>
|
||||
<Dialog as="div" className="relative z-50" onClose={setIsOpen} initialFocus={inputRef}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-white dark:bg-zinc-900 shadow-2xl transition-all">
|
||||
<Combobox onChange={handleSelect}>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:ring-0 sm:text-sm font-medium"
|
||||
placeholder="O que você procura?"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
displayValue={(item: any) => item?.name}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{filteredItems.length > 0 && (
|
||||
<Combobox.Options static className="max-h-[60vh] scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200">
|
||||
{Object.entries(groups).map(([category, items]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-[10px] font-bold text-zinc-400 uppercase tracking-wider bg-zinc-50/50 dark:bg-zinc-800/50 mt-2 first:mt-0 mb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<Combobox.Option
|
||||
key={item.href}
|
||||
value={item}
|
||||
className={({ active }) =>
|
||||
`cursor-pointer select-none px-4 py-2.5 transition-colors ${active
|
||||
? '[background:var(--gradient)] text-white'
|
||||
: ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-md ${active
|
||||
? 'bg-white/20 text-white'
|
||||
: 'bg-zinc-50 dark:bg-zinc-900 text-zinc-400'
|
||||
}`}>
|
||||
<item.icon
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<span className={`flex-auto truncate font-medium ${active ? 'text-white' : 'text-zinc-600 dark:text-zinc-400'}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{active && (
|
||||
<ArrowRightIcon className="h-4 w-4 text-white/70" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
|
||||
{query !== '' && filteredItems.length === 0 && (
|
||||
<div className="py-14 px-6 text-center text-sm sm:px-14">
|
||||
<MagnifyingGlassIcon className="mx-auto h-6 w-6 text-zinc-400" aria-hidden="true" />
|
||||
<p className="mt-4 font-semibold text-zinc-900 dark:text-white">Nenhum resultado encontrado</p>
|
||||
<p className="mt-2 text-zinc-500">Não conseguimos encontrar nada para "{query}". Tente buscar por páginas ou ações.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-900/50">
|
||||
<div className="flex gap-4 text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↵</kbd>
|
||||
Selecionar
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↓</kbd>
|
||||
<kbd className="flex h-5 w-5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">↑</kbd>
|
||||
Navegar
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<kbd className="flex h-5 w-auto px-1.5 items-center justify-center rounded bg-white font-sans text-xs text-zinc-400 dark:bg-zinc-800">Esc</kbd>
|
||||
Fechar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
@@ -155,7 +155,7 @@ export default function AgencyDetailPage() {
|
||||
<div className="flex gap-3">
|
||||
<Link
|
||||
href={`/superadmin/agencies/${tenant.id}/edit`}
|
||||
className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
|
||||
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>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Será usado como: exemplo.aggios.app</p>
|
||||
</div>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="1-10">1-10 pessoas</option>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
|
||||
</div>
|
||||
@@ -345,7 +345,7 @@ export default function NewAgencyPage() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
||||
className="px-6 py-2 border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
@@ -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 (
|
||||
<DashboardLayout>
|
||||
<AuthGuard>
|
||||
<DashboardLayout menuItems={SUPERADMIN_MENU_ITEMS}>
|
||||
{children}
|
||||
</DashboardLayout>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
44
front-end-dash.aggios.app/components/auth/AuthGuard.tsx
Normal file
44
front-end-dash.aggios.app/components/auth/AuthGuard.tsx
Normal file
@@ -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}</>;
|
||||
}
|
||||
@@ -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<DashboardLayoutProps> = ({ children }) => {
|
||||
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ 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<DashboardLayoutProps> = ({ children }) =>
|
||||
onTabChange={setActiveTab}
|
||||
isExpanded={isExpanded}
|
||||
onToggle={() => setIsExpanded(!isExpanded)}
|
||||
menuItems={menuItems}
|
||||
/>
|
||||
|
||||
{/* Área de Conteúdo (Children) */}
|
||||
|
||||
@@ -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<SidebarRailProps> = ({
|
||||
@@ -32,6 +40,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
onTabChange,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
menuItems,
|
||||
}) => {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
@@ -42,14 +51,6 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
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<SidebarRailProps> = ({
|
||||
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<SidebarRailProps> = ({
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden z-50`}>
|
||||
<Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
|
||||
<div className="p-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
@@ -148,6 +149,17 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link
|
||||
href="/superadmin/settings"
|
||||
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
||||
>
|
||||
<Cog6ToothIcon className="mr-2 h-4 w-4" />
|
||||
Configurações
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
|
||||
107
frontend-aggios.app/app/design-system/README.md
Normal file
107
frontend-aggios.app/app/design-system/README.md
Normal file
@@ -0,0 +1,107 @@
|
||||
# Design System - Aggios Platform
|
||||
|
||||
Documentação visual completa do Design System da plataforma Aggios.
|
||||
|
||||
## Acesso
|
||||
|
||||
Acesse em: `/design-system`
|
||||
|
||||
## O que está incluído
|
||||
|
||||
### 🎨 Cores
|
||||
- **Brand Colors**: Paleta completa de azul (50-950)
|
||||
- **Gray Scale**: Escala de cinzas (50-950)
|
||||
- **Surface Colors**: Cores de superfície (light, dark, muted, card)
|
||||
- **Text Colors**: Cores de texto (primary, secondary, inverse)
|
||||
|
||||
### 📏 Espaçamentos
|
||||
- `xs` - 4px (0.25rem)
|
||||
- `sm` - 8px (0.5rem)
|
||||
- `md` - 16px (1rem)
|
||||
- `lg` - 24px (1.5rem)
|
||||
- `xl` - 32px (2rem)
|
||||
- `2xl` - 48px (3rem)
|
||||
|
||||
### ✍️ Tipografia
|
||||
- **Headings**: Arimo (h1-h6)
|
||||
- **Body**: Inter (text-xs até text-xl)
|
||||
- **Code**: Fira Code (monospace)
|
||||
|
||||
### 🔲 Bordas
|
||||
- Border Radius: De `rounded-none` até `rounded-full`
|
||||
- Border Styles: Solid, dashed, diferentes espessuras
|
||||
- Border Colors: Variações de zinc e brand
|
||||
|
||||
### 🌈 Gradientes
|
||||
- Brand Gradient (`bg-brand`)
|
||||
- Primary Gradient (`var(--gradient-primary)`)
|
||||
- Accent Gradient (`var(--gradient-accent)`)
|
||||
- Gradient Text (`.gradient-text`)
|
||||
|
||||
### 🎭 Sombras
|
||||
- Sistema de elevação completo
|
||||
- Sombras com brand color (`shadow-brand-20`)
|
||||
|
||||
### 🎯 Ícones
|
||||
- Heroicons (biblioteca completa - outline e solid)
|
||||
- Exemplos de uso em diferentes contextos
|
||||
- Integração perfeita com Headless UI
|
||||
|
||||
### 🔘 Componentes
|
||||
|
||||
#### Botões
|
||||
- Primary, Secondary, Outline, Ghost
|
||||
- Icon Buttons
|
||||
- Estados: Normal, Hover, Disabled, Loading
|
||||
|
||||
#### Cards
|
||||
- Basic, Elevated, Gradient
|
||||
- Icon Card, Stat Card, Interactive Card
|
||||
|
||||
#### Inputs
|
||||
- Text, Email, Textarea
|
||||
- Input with Icon
|
||||
- Select, Checkbox, Radio
|
||||
|
||||
#### Badges
|
||||
- Status Badges (success, info, warning, error)
|
||||
- Pill Badges
|
||||
- Count Badges
|
||||
- Dot Indicators
|
||||
|
||||
## Variáveis CSS
|
||||
|
||||
Todas as variáveis estão definidas em `app/tokens.css`:
|
||||
|
||||
```css
|
||||
--color-brand-500
|
||||
--color-gray-200
|
||||
--spacing-md
|
||||
--gradient-primary
|
||||
--focus-ring
|
||||
```
|
||||
|
||||
## Classes Utilitárias
|
||||
|
||||
```css
|
||||
.bg-brand /* Gradiente de marca */
|
||||
.bg-brand-soft /* Gradiente suave */
|
||||
.gradient-text /* Texto com gradiente */
|
||||
.shadow-brand-20 /* Sombra com cor da marca */
|
||||
.font-heading /* Fonte para headings (Open Sans) */
|
||||
```
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Todos os componentes suportam dark mode automático através da classe `.dark` no HTML.
|
||||
|
||||
Toggle disponível na página do Design System.
|
||||
|
||||
## Uso
|
||||
|
||||
Para usar qualquer componente, copie o código HTML/JSX diretamente da página do Design System.
|
||||
|
||||
---
|
||||
|
||||
**Versão**: 1.0
|
||||
**Data**: 2025
|
||||
877
frontend-aggios.app/app/design-system/page.tsx
Normal file
877
frontend-aggios.app/app/design-system/page.tsx
Normal file
@@ -0,0 +1,877 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Listbox } from "@headlessui/react";
|
||||
import {
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
HomeIcon,
|
||||
UserIcon,
|
||||
Cog6ToothIcon,
|
||||
BellIcon,
|
||||
MagnifyingGlassIcon,
|
||||
HeartIcon,
|
||||
StarIcon,
|
||||
DocumentIcon,
|
||||
FolderIcon,
|
||||
EnvelopeIcon,
|
||||
PhoneIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon,
|
||||
MapPinIcon,
|
||||
PhotoIcon,
|
||||
VideoCameraIcon,
|
||||
MusicalNoteIcon,
|
||||
ArrowDownTrayIcon,
|
||||
ArrowUpTrayIcon,
|
||||
ShareIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
CheckIcon,
|
||||
XMarkIcon,
|
||||
PlusIcon,
|
||||
RocketLaunchIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
ArrowRightIcon,
|
||||
FireIcon,
|
||||
ShoppingCartIcon,
|
||||
ChevronUpDownIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const options = [
|
||||
{ id: 1, name: 'Opção 1' },
|
||||
{ id: 2, name: 'Opção 2' },
|
||||
{ id: 3, name: 'Opção 3' },
|
||||
];
|
||||
|
||||
export default function DesignSystemPage() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState(options[0]);
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
setDarkMode(!darkMode);
|
||||
document.documentElement.classList.toggle('dark');
|
||||
};
|
||||
|
||||
const iconList = [
|
||||
{ name: 'HomeIcon', component: HomeIcon },
|
||||
{ name: 'UserIcon', component: UserIcon },
|
||||
{ name: 'Cog6ToothIcon', component: Cog6ToothIcon },
|
||||
{ name: 'BellIcon', component: BellIcon },
|
||||
{ name: 'MagnifyingGlassIcon', component: MagnifyingGlassIcon },
|
||||
{ name: 'HeartIcon', component: HeartIcon },
|
||||
{ name: 'StarIcon', component: StarIcon },
|
||||
{ name: 'DocumentIcon', component: DocumentIcon },
|
||||
{ name: 'FolderIcon', component: FolderIcon },
|
||||
{ name: 'EnvelopeIcon', component: EnvelopeIcon },
|
||||
{ name: 'PhoneIcon', component: PhoneIcon },
|
||||
{ name: 'CalendarIcon', component: CalendarIcon },
|
||||
{ name: 'ClockIcon', component: ClockIcon },
|
||||
{ name: 'MapPinIcon', component: MapPinIcon },
|
||||
{ name: 'PhotoIcon', component: PhotoIcon },
|
||||
{ name: 'VideoCameraIcon', component: VideoCameraIcon },
|
||||
{ name: 'MusicalNoteIcon', component: MusicalNoteIcon },
|
||||
{ name: 'ArrowDownTrayIcon', component: ArrowDownTrayIcon },
|
||||
{ name: 'ArrowUpTrayIcon', component: ArrowUpTrayIcon },
|
||||
{ name: 'ShareIcon', component: ShareIcon },
|
||||
{ name: 'PencilIcon', component: PencilIcon },
|
||||
{ name: 'TrashIcon', component: TrashIcon },
|
||||
{ name: 'CheckIcon', component: CheckIcon },
|
||||
{ name: 'XMarkIcon', component: XMarkIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={darkMode ? 'dark' : ''}>
|
||||
<div className="min-h-screen bg-white dark:bg-zinc-950 transition-colors">
|
||||
{/* Header fixo */}
|
||||
<header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border-b border-zinc-200 dark:border-zinc-800">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<span className="text-white font-bold">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Design System</h1>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">Aggios Platform v1.2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all flex items-center gap-2 text-sm"
|
||||
>
|
||||
{darkMode ? <SunIcon className="w-4 h-4" /> : <MoonIcon className="w-4 h-4" />}
|
||||
{darkMode ? 'Light' : 'Dark'}
|
||||
</button>
|
||||
<Link href="/" className="px-3 py-1.5 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<HomeIcon className="w-4 h-4" />
|
||||
Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-6 py-12">
|
||||
{/* Navegação rápida */}
|
||||
<nav className="mb-12 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-xs uppercase tracking-wider text-zinc-500 mb-3">Navegação Rápida</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Cores', 'Espaçamentos', 'Tipografia', 'Bordas', 'Gradiente', 'Sombras', 'Ícones', 'Botões', 'Cards', 'Inputs', 'Badges'].map(item => (
|
||||
<a
|
||||
key={item}
|
||||
href={`#${item.toLowerCase()}`}
|
||||
className="px-3 py-1.5 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:border-transparent hover:text-white transition-all"
|
||||
style={{
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (darkMode) {
|
||||
e.currentTarget.style.background = 'rgb(39 39 42)';
|
||||
} else {
|
||||
e.currentTarget.style.background = 'white';
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* CORES */}
|
||||
<section id="cores" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cores</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Paleta de cores da plataforma Aggios</p>
|
||||
</div>
|
||||
|
||||
{/* Brand Gradient */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Brand Gradient</h3>
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="h-32 rounded-xl" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
|
||||
<p className="text-sm font-mono text-zinc-500 mt-3">linear-gradient(135deg, #ff3a05, #ff0080)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gray Scale */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Gray Scale</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-3">
|
||||
{[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => (
|
||||
<div key={shade} className="space-y-2">
|
||||
<div
|
||||
className="h-20 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
|
||||
style={{ backgroundColor: `var(--color-gray-${shade})` }}
|
||||
></div>
|
||||
<div className="text-center">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">gray-{shade}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Surface & Text Colors */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Surface Colors</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ 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 => (
|
||||
<div key={color.name} className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
|
||||
style={{ backgroundColor: `var(${color.var})` }}
|
||||
></div>
|
||||
<div>
|
||||
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">var({color.var})</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Text Colors</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ name: 'text-primary', var: '--color-text-primary' },
|
||||
{ name: 'text-secondary', var: '--color-text-secondary' },
|
||||
{ name: 'text-inverse', var: '--color-text-inverse' },
|
||||
].map(color => (
|
||||
<div key={color.name} className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
|
||||
style={{ backgroundColor: `var(${color.var})` }}
|
||||
></div>
|
||||
<div>
|
||||
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">var({color.var})</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ESPAÇAMENTOS */}
|
||||
<section id="espaçamentos" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Espaçamentos</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Sistema de espaçamento compacto</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ 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 => (
|
||||
<div key={space.name} className="flex items-center gap-4">
|
||||
<div className="w-28">
|
||||
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">spacing-{space.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">{space.value} ({space.pixels})</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded"
|
||||
style={{
|
||||
width: space.value,
|
||||
height: '1.5rem',
|
||||
background: 'linear-gradient(135deg, #ff3a05, #ff0080)'
|
||||
}}
|
||||
></div>
|
||||
<div className="flex-1 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
var(--spacing-{space.name})
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* TIPOGRAFIA */}
|
||||
<section id="tipografia" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Tipografia</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Hierarquia de texto e famílias de fontes</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Headings */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Headings (Arimo)</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
|
||||
<h1 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white">Heading 1</h1>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-4xl</p>
|
||||
</div>
|
||||
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white">Heading 2</h2>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-3xl</p>
|
||||
</div>
|
||||
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
|
||||
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white">Heading 3</h3>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-2xl</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Heading 4</h4>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-xl</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body Text */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Body Text (Inter)</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-base text-zinc-900 dark:text-white">Text Base - The quick brown fox jumps over the lazy dog</p>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-1">text-base</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-zinc-900 dark:text-white">Text SM - The quick brown fox jumps over the lazy dog</p>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-1">text-sm</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-zinc-900 dark:text-white">Text XS - The quick brown fox jumps over the lazy dog</p>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-1">text-xs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code Text */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Code (Fira Code)</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 bg-zinc-900 dark:bg-zinc-950 rounded-lg">
|
||||
<code className="font-mono text-sm text-emerald-400">const message = "Hello, Aggios!";</code>
|
||||
</div>
|
||||
<p className="text-xs font-mono text-zinc-500">font-mono - Fira Code</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BORDAS */}
|
||||
<section id="bordas" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Bordas</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Border radius e estilos de borda</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Border Radius */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Radius</h3>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ 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 => (
|
||||
<div key={radius.name} className="flex items-center gap-3">
|
||||
<div className={`w-20 h-12 ${radius.class}`} style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">{radius.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Border Styles */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Styles</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">border border-zinc-200</p>
|
||||
</div>
|
||||
<div className="p-3 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">border-2 border-zinc-200</p>
|
||||
</div>
|
||||
<div className="p-3 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-lg">
|
||||
<p className="text-xs font-mono text-zinc-900 dark:text-white">border border-dashed</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* GRADIENTE */}
|
||||
<section id="gradiente" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Gradiente</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Gradiente principal da marca</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="h-32 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<p className="text-white font-semibold">Brand Gradient</p>
|
||||
</div>
|
||||
<p className="text-sm font-mono text-zinc-500 mt-4">background: linear-gradient(135deg, #ff3a05, #ff0080)</p>
|
||||
|
||||
{/* Gradient Text */}
|
||||
<div className="mt-6">
|
||||
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Gradient Text</h3>
|
||||
<h2 className="font-heading font-bold text-4xl">
|
||||
Texto com <span className="gradient-text">gradiente</span>
|
||||
</h2>
|
||||
<p className="text-xs font-mono text-zinc-500 mt-3"><span className="gradient-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SOMBRAS */}
|
||||
<section id="sombras" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Sombras</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Sistema de elevação com sombras</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ name: 'shadow-sm', class: 'shadow-sm' },
|
||||
{ name: 'shadow', class: 'shadow' },
|
||||
{ name: 'shadow-md', class: 'shadow-md' },
|
||||
{ name: 'shadow-lg', class: 'shadow-lg' },
|
||||
].map(shadow => (
|
||||
<div key={shadow.name} className="space-y-2">
|
||||
<div className={`h-24 bg-white dark:bg-zinc-900 rounded-lg ${shadow.class} flex items-center justify-center border border-zinc-100 dark:border-zinc-800`}>
|
||||
<p className="text-xs font-semibold text-zinc-900 dark:text-white">{shadow.name}</p>
|
||||
</div>
|
||||
<p className="text-xs font-mono text-zinc-500 text-center">{shadow.class}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ÍCONES */}
|
||||
<section id="ícones" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Ícones</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Heroicons - biblioteca completa (outline)</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4">
|
||||
{iconList.map(({ name, component: Icon }) => (
|
||||
<div key={name} className="flex flex-col items-center gap-2 p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors">
|
||||
<Icon className="w-6 h-6 text-zinc-900 dark:text-white" />
|
||||
<p className="text-xs font-mono text-zinc-500 text-center leading-tight">{name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BOTÕES */}
|
||||
<section id="botões" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Botões</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Variações de botões com Headless UI</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Primary Buttons */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Primary Buttons</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="px-4 py-2 text-white font-medium rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
Primary
|
||||
</button>
|
||||
<button className="px-3 py-1.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-xs" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
Small
|
||||
</button>
|
||||
<button className="px-5 py-2.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
Medium
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary Buttons */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Secondary Buttons</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="px-4 py-2 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:border-transparent hover:text-white transition-all text-sm"
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
|
||||
Secondary
|
||||
</button>
|
||||
<button className="px-4 py-2 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
|
||||
Outline
|
||||
</button>
|
||||
<button className="px-4 py-2 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
|
||||
Ghost
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Buttons */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Icon Buttons</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="w-10 h-10 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<HeartIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="w-10 h-10 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-lg hover:border-transparent hover:text-white transition-all flex items-center justify-center"
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
|
||||
<ShareIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="w-8 h-8 rounded-full text-white flex items-center justify-center hover:opacity-90 transition-opacity" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CARDS */}
|
||||
<section id="cards" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cards</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Diferentes estilos de cards</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Basic Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Basic Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card simples com borda e padding</p>
|
||||
<button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
|
||||
Saiba mais <ArrowRightIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Elevated Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-md hover:shadow-lg transition-shadow">
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Elevated Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card com sombra e hover effect</p>
|
||||
<button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
|
||||
Saiba mais <ArrowRightIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Gradient Card */}
|
||||
<div className="rounded-xl p-4 text-white shadow-md" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<h3 className="font-semibold text-base mb-2">Gradient Card</h3>
|
||||
<p className="text-white/90 mb-3 text-sm">Card com fundo gradiente</p>
|
||||
<button className="text-white text-sm font-semibold hover:underline flex items-center gap-1">
|
||||
Saiba mais <ArrowRightIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Icon Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:border-transparent hover:shadow-md transition-all">
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<StarIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Icon Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 text-sm">Card com ícone em destaque</p>
|
||||
</div>
|
||||
|
||||
{/* Stat Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
|
||||
<p className="text-xs uppercase tracking-wide text-zinc-500 mb-1">Total Revenue</p>
|
||||
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-1">R$ 128K</p>
|
||||
<p className="text-xs text-emerald-500">+18% este mês</p>
|
||||
</div>
|
||||
|
||||
{/* Interactive Card */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 cursor-pointer hover:scale-105 transition-all"
|
||||
onMouseEnter={(e) => 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)';
|
||||
}
|
||||
}}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<BellIcon className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="px-2 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded-full">3</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-1">Interactive Card</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 text-sm">Clique para interagir</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* INPUTS */}
|
||||
<section id="inputs" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Inputs</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Campos de formulário com Headless UI</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="space-y-4 max-w-2xl">
|
||||
{/* Text Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Text Input
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Digite algo..."
|
||||
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Email Input
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Input with Icon */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Input with Icon
|
||||
</label>
|
||||
<div className="relative">
|
||||
<MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
className="w-full pl-10 pr-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Textarea */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Textarea
|
||||
</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Digite sua mensagem..."
|
||||
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all resize-none"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
{/* Select with Headless UI */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
|
||||
Select (Headless UI)
|
||||
</label>
|
||||
<Listbox value={selectedOption} onChange={setSelectedOption}>
|
||||
<div className="relative">
|
||||
<Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-2 pl-3 pr-10 text-left text-sm focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
||||
style={{
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}>
|
||||
<span className="block truncate text-zinc-900 dark:text-white">{selectedOption.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon
|
||||
className="h-4 w-4 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-1 text-sm shadow-lg focus:outline-none">
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.id}
|
||||
value={option}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<div
|
||||
className={`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
|
||||
active ? 'text-white' : 'text-zinc-900 dark:text-white'
|
||||
}`}
|
||||
style={{
|
||||
background: active ? 'linear-gradient(135deg, #ff3a05, #ff0080)' : 'transparent'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`block truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
}`}
|
||||
>
|
||||
{option.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
|
||||
{/* Checkbox */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="check1"
|
||||
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 rounded focus:ring-2"
|
||||
style={{
|
||||
accentColor: '#ff3a05',
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
<label htmlFor="check1" className="text-sm text-zinc-900 dark:text-white">
|
||||
Checkbox Label
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Radio */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="radio1"
|
||||
name="radio"
|
||||
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
|
||||
style={{
|
||||
accentColor: '#ff3a05',
|
||||
'--tw-ring-color': '#ff3a05',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
<label htmlFor="radio1" className="text-sm text-zinc-900 dark:text-white">
|
||||
Radio Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="radio2"
|
||||
name="radio"
|
||||
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
|
||||
style={{
|
||||
accentColor: '#ff3a05',
|
||||
'--tw-ring-color': '#ff0080',
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
<label htmlFor="radio2" className="text-sm text-zinc-900 dark:text-white">
|
||||
Radio Option 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BADGES */}
|
||||
<section id="badges" className="mb-16 scroll-mt-24">
|
||||
<div className="mb-6">
|
||||
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Badges</h2>
|
||||
<p className="text-zinc-600 dark:text-zinc-400">Tags, badges e status indicators</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
|
||||
<div className="space-y-4">
|
||||
{/* Status Badges */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Status Badges</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-xs font-semibold">
|
||||
Success
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold">
|
||||
Info
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-semibold">
|
||||
Warning
|
||||
</span>
|
||||
<span className="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-semibold">
|
||||
Error
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pill Badges */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Pill Badges</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="px-3 py-1.5 rounded-full text-white text-xs font-semibold shadow-md flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
<RocketLaunchIcon className="w-3 h-3" />
|
||||
Premium
|
||||
</span>
|
||||
<span className="px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
|
||||
<StarIcon className="w-3 h-3" />
|
||||
New
|
||||
</span>
|
||||
<span className="px-3 py-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
|
||||
<FireIcon className="w-3 h-3" />
|
||||
Popular
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Count Badges */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Count Badges</h3>
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
<div className="relative">
|
||||
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<BellIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
|
||||
</button>
|
||||
<span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<EnvelopeIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
|
||||
</button>
|
||||
<span className="absolute -top-1 -right-1 w-4 h-4 text-white text-xs font-bold rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
|
||||
9
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<ShoppingCartIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
|
||||
</button>
|
||||
<span className="absolute -top-1.5 -right-1.5 px-1.5 py-0.5 bg-emerald-500 text-white text-xs font-bold rounded-full">
|
||||
12
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dot Indicators */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Dot Indicators</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-emerald-500 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Online</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Away</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Busy</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 bg-zinc-400 rounded-full"></span>
|
||||
<span className="text-xs text-zinc-700 dark:text-zinc-300">Offline</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="text-center py-8 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-zinc-600 dark:text-zinc-400 text-sm">
|
||||
Design System criado para <span className="font-bold gradient-text">Aggios Platform</span>
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500 mt-2">
|
||||
Versão 1.2 • 2025
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 ========== */
|
||||
|
||||
@@ -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({
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
|
||||
</head>
|
||||
<body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
|
||||
<body className={`${inter.variable} ${arimo.variable} ${firaCode.variable} antialiased`}>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} storageKey="theme">
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -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 = () => (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
|
||||
);
|
||||
|
||||
const TwitterIcon = () => (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
);
|
||||
|
||||
const InstagramIcon = () => (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
@@ -17,7 +52,7 @@ export default function Home() {
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-brand rounded-full text-sm font-semibold text-white shadow-lg shadow-brand-20 mb-8">
|
||||
<i className="ri-rocket-line text-base"></i>
|
||||
<RocketLaunchIcon className="w-4 h-4" />
|
||||
<span>Plataforma de Gestão Financeira</span>
|
||||
</div>
|
||||
|
||||
@@ -30,23 +65,23 @@ export default function Home() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
|
||||
<i className="ri-arrow-right-line mr-2"></i>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
|
||||
<ArrowRightIcon className="w-5 h-5 mr-2" />
|
||||
Começar Grátis
|
||||
</Link>
|
||||
<Link href="#demo" className="px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<i className="ri-play-circle-line mr-2"></i>
|
||||
<Link href="#demo" className="inline-flex items-center px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<PlayCircleIcon className="w-5 h-5 mr-2" />
|
||||
Ver Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center gap-6 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="ri-shield-check-line text-lg gradient-text"></i>
|
||||
<ShieldCheckIcon className="w-5 h-5 gradient-text" />
|
||||
Segurança bancária
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="ri-flashlight-line text-lg gradient-text"></i>
|
||||
<BoltIcon className="w-5 h-5 gradient-text" />
|
||||
Automatizações inteligentes
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,20 +147,20 @@ export default function Home() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{[
|
||||
{ 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) => (
|
||||
<div id={item.id} key={item.id} className="relative rounded-4xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950/80 backdrop-blur-xl p-8 shadow-lg overflow-hidden">
|
||||
<div className="absolute -top-20 -right-10 h-40 w-40 rounded-full bg-brand-soft blur-3xl" aria-hidden="true"></div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative z-10">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-3 mb-4 px-4 py-2 rounded-full border border-zinc-200 dark:border-zinc-800 text-xs uppercase tracking-[0.2em] text-zinc-500">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white text-lg">
|
||||
<i className={item.icon}></i>
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white">
|
||||
<item.Icon className="w-5 h-5" />
|
||||
</span>
|
||||
{item.title}
|
||||
</div>
|
||||
@@ -163,7 +198,7 @@ export default function Home() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-dashboard-3-line text-2xl text-white"></i>
|
||||
<ChartBarIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Dashboard Inteligente</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
|
||||
@@ -171,7 +206,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-team-line text-2xl text-white"></i>
|
||||
<UserGroupIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Gestão de Clientes</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
|
||||
@@ -179,7 +214,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-file-chart-line text-2xl text-white"></i>
|
||||
<ChartBarSquareIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Relatórios Avançados</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
|
||||
@@ -187,7 +222,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-secure-payment-line text-2xl text-white"></i>
|
||||
<ShieldCheckIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Segurança Total</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
|
||||
@@ -195,7 +230,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-smartphone-line text-2xl text-white"></i>
|
||||
<DevicePhoneMobileIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Acesso Mobile</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
|
||||
@@ -203,7 +238,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-customer-service-2-line text-2xl text-white"></i>
|
||||
<ChatBubbleLeftRightIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Suporte 24/7</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
|
||||
@@ -270,15 +305,15 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -312,19 +347,19 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>Suporte prioritário</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -355,27 +390,27 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-900 dark:text-white">Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-900 dark:text-white">Gerente de conta dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-900 dark:text-white">API para integrações</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -390,7 +425,7 @@ export default function Home() {
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-heading font-bold text-2xl">Enterprise</h3>
|
||||
<i className="ri-vip-crown-line text-xl text-yellow-400"></i>
|
||||
<SparklesIcon className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 mb-4">301+ usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
@@ -400,15 +435,15 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-300">Tudo do plano Cosmos +</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-300">Armazenamento customizado</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-white">Treinamento personalizado</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -421,8 +456,8 @@ export default function Home() {
|
||||
|
||||
{/* Nota sobre desconto */}
|
||||
<div className="text-center mt-8">
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<i className="ri-information-line mr-1"></i>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 flex items-center justify-center gap-2">
|
||||
<InformationCircleIcon className="w-4 h-4" />
|
||||
Todos os planos com <span className="font-semibold text-emerald-600 dark:text-emerald-400">20% OFF</span> no pagamento anual
|
||||
{isAnnual && <span className="ml-1">(equivalente a 2,4 meses grátis)</span>}
|
||||
</p>
|
||||
@@ -443,7 +478,7 @@ export default function Home() {
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-group-line text-white text-lg"></i>
|
||||
<UserGroupIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Usuários Extras</h4>
|
||||
</div>
|
||||
@@ -454,7 +489,7 @@ export default function Home() {
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-hard-drive-line text-white text-lg"></i>
|
||||
<ServerIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Storage Extra</h4>
|
||||
</div>
|
||||
@@ -478,12 +513,12 @@ export default function Home() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<i className="ri-rocket-line mr-2"></i>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<RocketLaunchIcon className="w-5 h-5 mr-2" />
|
||||
Começar Grátis Agora
|
||||
</Link>
|
||||
<Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<i className="ri-phone-line mr-2"></i>
|
||||
<Link href="#contact" className="inline-flex items-center px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<PhoneIcon className="w-5 h-5 mr-2" />
|
||||
Falar com Especialista
|
||||
</Link>
|
||||
</div>
|
||||
@@ -509,13 +544,13 @@ export default function Home() {
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
|
||||
<i className="ri-linkedin-line text-lg group-hover:text-white"></i>
|
||||
<LinkedInIcon />
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
|
||||
<i className="ri-twitter-line text-lg group-hover:text-white"></i>
|
||||
<TwitterIcon />
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
|
||||
<i className="ri-instagram-line text-lg group-hover:text-white"></i>
|
||||
<InstagramIcon />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
|
||||
232
frontend-aggios.app/package-lock.json
generated
232
frontend-aggios.app/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user