feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)
This commit is contained in:
Erik Silva
@@ -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,178 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getUser } from "@/lib/auth";
|
||||
import {
|
||||
RocketLaunchIcon,
|
||||
ChartBarIcon,
|
||||
UserGroupIcon,
|
||||
BriefcaseIcon,
|
||||
LifebuoyIcon,
|
||||
CreditCardIcon,
|
||||
DocumentTextIcon,
|
||||
FolderIcon,
|
||||
CurrencyDollarIcon,
|
||||
ShareIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
ArrowTrendingDownIcon
|
||||
ArrowTrendingDownIcon,
|
||||
CheckCircleIcon,
|
||||
ClockIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
trend?: number;
|
||||
color: 'blue' | 'purple' | 'gray' | 'green';
|
||||
}
|
||||
|
||||
const colorClasses = {
|
||||
blue: {
|
||||
iconBg: 'bg-blue-50 dark:bg-blue-900/20',
|
||||
iconColor: 'text-blue-600 dark:text-blue-400',
|
||||
trend: 'text-blue-600 dark:text-blue-400'
|
||||
},
|
||||
purple: {
|
||||
iconBg: 'bg-purple-50 dark:bg-purple-900/20',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
trend: 'text-purple-600 dark:text-purple-400'
|
||||
},
|
||||
gray: {
|
||||
iconBg: 'bg-gray-50 dark:bg-gray-900/20',
|
||||
iconColor: 'text-gray-600 dark:text-gray-400',
|
||||
trend: 'text-gray-600 dark:text-gray-400'
|
||||
},
|
||||
green: {
|
||||
iconBg: 'bg-emerald-50 dark:bg-emerald-900/20',
|
||||
iconColor: 'text-emerald-600 dark:text-emerald-400',
|
||||
trend: 'text-emerald-600 dark:text-emerald-400'
|
||||
}
|
||||
};
|
||||
|
||||
function StatCard({ title, value, icon: Icon, trend, color }: StatCardProps) {
|
||||
const colors = colorClasses[color];
|
||||
const isPositive = trend && trend > 0;
|
||||
|
||||
return (
|
||||
<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="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" />
|
||||
) : (
|
||||
<ArrowTrendingDownIcon className="w-4 h-4 text-red-500" />
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${colors.iconBg} p-3 rounded-xl`}>
|
||||
<Icon className={`w-8 h-8 ${colors.iconColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [stats, setStats] = useState({
|
||||
clientes: 0,
|
||||
projetos: 0,
|
||||
tarefas: 0,
|
||||
faturamento: 0
|
||||
});
|
||||
const overviewStats = [
|
||||
{ name: 'Receita Total (Mês)', value: 'R$ 124.500', change: '+12%', changeType: 'increase', icon: ChartBarIcon, color: 'green' },
|
||||
{ name: 'Novos Leads', value: '45', change: '+5%', changeType: 'increase', icon: RocketLaunchIcon, color: 'blue' },
|
||||
{ name: 'Projetos Ativos', value: '12', change: '-1', changeType: 'decrease', icon: BriefcaseIcon, color: 'purple' },
|
||||
{ name: 'Chamados Abertos', value: '3', change: '-2', changeType: 'decrease', icon: LifebuoyIcon, color: 'orange' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se é SUPERADMIN e redirecionar
|
||||
const user = getUser();
|
||||
if (user && user.role === 'SUPERADMIN') {
|
||||
router.push('/superadmin');
|
||||
return;
|
||||
const modules = [
|
||||
{
|
||||
title: 'CRM & Vendas',
|
||||
icon: RocketLaunchIcon,
|
||||
color: 'blue',
|
||||
stats: [
|
||||
{ label: 'Propostas Enviadas', value: '8' },
|
||||
{ label: 'Aguardando Aprovação', value: '3' },
|
||||
{ label: 'Taxa de Conversão', value: '24%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Financeiro & ERP',
|
||||
icon: ChartBarIcon,
|
||||
color: 'green',
|
||||
stats: [
|
||||
{ label: 'A Receber', value: 'R$ 45.200' },
|
||||
{ label: 'A Pagar', value: 'R$ 12.800' },
|
||||
{ label: 'Fluxo de Caixa', value: 'Positivo' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Projetos & Tarefas',
|
||||
icon: BriefcaseIcon,
|
||||
color: 'purple',
|
||||
stats: [
|
||||
{ label: 'Em Andamento', value: '12' },
|
||||
{ label: 'Atrasados', value: '1' },
|
||||
{ label: 'Concluídos (Mês)', value: '4' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Helpdesk',
|
||||
icon: LifebuoyIcon,
|
||||
color: 'orange',
|
||||
stats: [
|
||||
{ label: 'Novos Chamados', value: '3' },
|
||||
{ label: 'Tempo Médio Resposta', value: '2h' },
|
||||
{ label: 'Satisfação', value: '4.8/5' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Documentos & Contratos',
|
||||
icon: DocumentTextIcon,
|
||||
color: 'indigo',
|
||||
stats: [
|
||||
{ label: 'Contratos Ativos', value: '28' },
|
||||
{ label: 'A Vencer (30 dias)', value: '2' },
|
||||
{ label: 'Docs Armazenados', value: '1.2GB' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Redes Sociais',
|
||||
icon: ShareIcon,
|
||||
color: 'pink',
|
||||
stats: [
|
||||
{ label: 'Posts Agendados', value: '14' },
|
||||
{ label: 'Engajamento', value: '+8.5%' },
|
||||
{ label: 'Novos Seguidores', value: '120' },
|
||||
]
|
||||
}
|
||||
|
||||
// Simulando carregamento de dados
|
||||
setTimeout(() => {
|
||||
setStats({
|
||||
clientes: 127,
|
||||
projetos: 18,
|
||||
tarefas: 64,
|
||||
faturamento: 87500
|
||||
});
|
||||
}, 300);
|
||||
}, [router]);
|
||||
];
|
||||
|
||||
return (
|
||||
<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
|
||||
</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.
|
||||
<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 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>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
<div className="flex items-center justify-between">
|
||||
<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="h-4 w-4 mr-1" />
|
||||
)}
|
||||
{stat.change}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Modules Grid */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Performance por Módulo
|
||||
</h2>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
||||
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">
|
||||
{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>
|
||||
<AuthGuard>
|
||||
<DashboardLayout menuItems={AGENCY_MENU_ITEMS}>
|
||||
{children}
|
||||
</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()) {
|
||||
const target = superAdmin ? '/superadmin' : '/dashboard';
|
||||
window.location.href = target;
|
||||
// Validar token antes de redirecionar para evitar loops
|
||||
const token = getToken();
|
||||
fetch(API_ENDPOINTS.me, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
const target = superAdmin ? '/superadmin' : '/dashboard';
|
||||
window.location.href = target;
|
||||
} else {
|
||||
// Token inválido ou expirado
|
||||
clearAuth();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Erro ao validar sessão:', err);
|
||||
// Em caso de erro de rede, não redireciona nem limpa, deixa o usuário tentar logar
|
||||
});
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
Reference in New Issue
Block a user