feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
@@ -0,0 +1,302 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useState } from 'react';
|
||||
import { Dialog, Transition, Tab } from '@headlessui/react';
|
||||
import {
|
||||
XMarkIcon,
|
||||
BuildingOfficeIcon,
|
||||
MapPinIcon,
|
||||
UserIcon,
|
||||
CheckCircleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface CreateAgencyModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
function classNames(...classes: string[]) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
export default function CreateAgencyModal({ isOpen, onClose, onSuccess }: CreateAgencyModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
// Agência
|
||||
agencyName: '',
|
||||
subdomain: '',
|
||||
cnpj: '',
|
||||
razaoSocial: '',
|
||||
description: '',
|
||||
website: '',
|
||||
industry: '',
|
||||
phone: '',
|
||||
teamSize: '',
|
||||
|
||||
// Endereço
|
||||
cep: '',
|
||||
state: '',
|
||||
city: '',
|
||||
neighborhood: '',
|
||||
street: '',
|
||||
number: '',
|
||||
complement: '',
|
||||
|
||||
// Admin
|
||||
adminEmail: '',
|
||||
adminPassword: '',
|
||||
adminName: '',
|
||||
});
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/agencies/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.text();
|
||||
throw new Error(errorData || 'Erro ao criar agência');
|
||||
}
|
||||
|
||||
onSuccess();
|
||||
onClose();
|
||||
// Reset form?
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ name: 'Dados Gerais', icon: BuildingOfficeIcon },
|
||||
{ name: 'Endereço', icon: MapPinIcon },
|
||||
{ name: 'Administrador', icon: UserIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
||||
<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">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl border border-zinc-200 dark:border-zinc-800">
|
||||
<div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-white dark:bg-zinc-900 text-zinc-400 hover:text-zinc-500 focus:outline-none"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="sr-only">Fechar</span>
|
||||
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 sm:p-8">
|
||||
<div className="sm:flex sm:items-start mb-6">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<BuildingOfficeIcon className="h-6 w-6 text-[var(--brand-color)]" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-xl font-semibold leading-6 text-zinc-900 dark:text-white">
|
||||
Nova Agência
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
Preencha os dados abaixo para cadastrar uma nova agência parceira.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-800 dark:text-red-300">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 p-1 mb-6">
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={tab.name}
|
||||
className={({ selected }) =>
|
||||
classNames(
|
||||
'w-full rounded-lg py-2.5 text-sm font-medium leading-5 transition-all duration-200',
|
||||
'ring-white ring-opacity-60 ring-offset-2 ring-offset-[var(--brand-color)] focus:outline-none focus:ring-2',
|
||||
selected
|
||||
? 'bg-white dark:bg-zinc-800 text-[var(--brand-color)] shadow'
|
||||
: 'text-zinc-500 hover:bg-white/[0.12] hover:text-zinc-700 dark:hover:text-zinc-300'
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<tab.icon className="w-4 h-4" />
|
||||
{tab.name}
|
||||
</div>
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
{/* Dados Gerais */}
|
||||
<Tab.Panel className="space-y-4 focus:outline-none">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input label="Nome da Agência *" name="agencyName" value={formData.agencyName} onChange={handleChange} required />
|
||||
<Input label="Subdomínio *" name="subdomain" value={formData.subdomain} onChange={handleChange} required prefix="http://" suffix=".aggios.app" />
|
||||
<Input label="CNPJ" name="cnpj" value={formData.cnpj} onChange={handleChange} />
|
||||
<Input label="Razão Social" name="razaoSocial" value={formData.razaoSocial} onChange={handleChange} />
|
||||
<Input label="Telefone" name="phone" value={formData.phone} onChange={handleChange} />
|
||||
<Input label="Website" name="website" value={formData.website} onChange={handleChange} />
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">Descrição</label>
|
||||
<textarea
|
||||
name="description"
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 px-3 py-2 text-sm text-zinc-900 dark:text-white focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] outline-none transition-all"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Endereço */}
|
||||
<Tab.Panel className="space-y-4 focus:outline-none">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input label="CEP" name="cep" value={formData.cep} onChange={handleChange} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input label="Estado" name="state" value={formData.state} onChange={handleChange} />
|
||||
<Input label="Cidade" name="city" value={formData.city} onChange={handleChange} />
|
||||
</div>
|
||||
<Input label="Bairro" name="neighborhood" value={formData.neighborhood} onChange={handleChange} />
|
||||
<Input label="Rua" name="street" value={formData.street} onChange={handleChange} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input label="Número" name="number" value={formData.number} onChange={handleChange} />
|
||||
<Input label="Complemento" name="complement" value={formData.complement} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
|
||||
{/* Administrador */}
|
||||
<Tab.Panel className="space-y-4 focus:outline-none">
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-4 rounded-lg mb-4 border border-zinc-100 dark:border-zinc-800">
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 flex items-center gap-2">
|
||||
<UserIcon className="w-4 h-4 text-[var(--brand-color)]" />
|
||||
Este usuário será o administrador principal da agência.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Input label="Nome Completo *" name="adminName" value={formData.adminName} onChange={handleChange} required />
|
||||
<Input label="E-mail *" name="adminEmail" type="email" value={formData.adminEmail} onChange={handleChange} required />
|
||||
<Input label="Senha *" name="adminPassword" type="password" value={formData.adminPassword} onChange={handleChange} required />
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
|
||||
<div className="mt-8 flex items-center justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800 pt-6">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-lg px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="inline-flex justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:ring-offset-2 disabled:opacity-50 transition-all"
|
||||
style={{ background: 'var(--gradient)' }}
|
||||
>
|
||||
{loading ? 'Criando...' : 'Criar Agência'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
|
||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
label: string;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
function Input({ label, prefix, suffix, className, ...props }: InputProps) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<div className="relative flex rounded-lg shadow-sm">
|
||||
{prefix && (
|
||||
<span className="inline-flex items-center rounded-l-lg border border-r-0 border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-3 text-zinc-500 sm:text-sm">
|
||||
{prefix}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className={classNames(
|
||||
"block w-full border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 text-zinc-900 dark:text-white focus:border-[var(--brand-color)] focus:ring-1 focus:ring-[var(--brand-color)] sm:text-sm outline-none transition-all py-2 px-3",
|
||||
prefix ? "rounded-none" : "rounded-l-lg",
|
||||
suffix ? "rounded-none" : "rounded-r-lg",
|
||||
!prefix && !suffix ? "rounded-lg" : "",
|
||||
className || ""
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
{suffix && (
|
||||
<span className="inline-flex items-center rounded-r-lg border border-l-0 border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-3 text-zinc-500 sm:text-sm">
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -74,16 +74,6 @@ export default function DynamicBranding({
|
||||
"✓ Notificações em tempo real"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-global-line",
|
||||
title: "Seu Domínio Exclusivo",
|
||||
description: "Escolha como acessar seu painel",
|
||||
benefits: [
|
||||
"✓ Subdomínio personalizado",
|
||||
"✓ SSL incluído gratuitamente",
|
||||
"✓ Domínio próprio (opcional)"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-palette-line",
|
||||
title: "Personalize as Cores",
|
||||
@@ -106,8 +96,8 @@ export default function DynamicBranding({
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
// Se for etapa 5, mostrar preview do dashboard
|
||||
if (currentStep === 5) {
|
||||
// Se for etapa 4, mostrar preview do dashboard
|
||||
if (currentStep === 4) {
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12">
|
||||
{/* Logo */}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { SidebarRail } from './SidebarRail';
|
||||
import { TopBar } from './TopBar';
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
|
||||
// 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)}
|
||||
/>
|
||||
|
||||
{/* Á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>
|
||||
);
|
||||
};
|
||||
235
front-end-dash.aggios.app/components/layout/SidebarRail.tsx
Normal file
235
front-end-dash.aggios.app/components/layout/SidebarRail.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
'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 {
|
||||
HomeIcon,
|
||||
BuildingOfficeIcon,
|
||||
LinkIcon,
|
||||
Cog6ToothIcon,
|
||||
DocumentTextIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
UserCircleIcon,
|
||||
ArrowRightOnRectangleIcon,
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface SidebarRailProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
activeTab,
|
||||
onTabChange,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}) => {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
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');
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === 'dark' ? 'light' : 'dark');
|
||||
};
|
||||
|
||||
return (
|
||||
<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
|
||||
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-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separador removido para visual mais limpo */}
|
||||
|
||||
{/* 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 !== '/superadmin' && pathname?.startsWith(item.href))}
|
||||
onClick={() => onTabChange(item.id)}
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
))}
|
||||
</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">SuperAdmin</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 ring-1 ring-black ring-opacity-5 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 }) => (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
// Subcomponente do Botão (Essencial para a animação do texto)
|
||||
interface RailButtonProps {
|
||||
label: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
href: string;
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
isExpanded: boolean;
|
||||
}
|
||||
|
||||
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded }) => (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
style={{ background: active ? 'var(--gradient)' : undefined }}
|
||||
className={`
|
||||
flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden
|
||||
${active
|
||||
? 'text-white shadow-md'
|
||||
: 'hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400'
|
||||
}
|
||||
${isExpanded ? '' : 'justify-center'}
|
||||
`}
|
||||
>
|
||||
{/* Ícone */}
|
||||
<Icon className="shrink-0 w-4 h-4" />
|
||||
|
||||
{/* Lógica Mágica do Texto: Max-Width Transition */}
|
||||
<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">{label}</span>
|
||||
</div>
|
||||
|
||||
{/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
|
||||
{active && !isExpanded && (
|
||||
<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)' }}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
101
front-end-dash.aggios.app/components/layout/TopBar.tsx
Normal file
101
front-end-dash.aggios.app/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: '/superadmin', icon: HomeIcon }
|
||||
];
|
||||
|
||||
let currentPath = '';
|
||||
paths.forEach((path, index) => {
|
||||
currentPath += `/${path}`;
|
||||
|
||||
// Mapeamento de nomes amigáveis
|
||||
const nameMap: Record<string, string> = {
|
||||
'superadmin': 'SuperAdmin',
|
||||
'agencies': 'Agências',
|
||||
'signup-templates': 'Templates',
|
||||
'agency-templates': 'Templates Agência',
|
||||
'settings': 'Configurações',
|
||||
'new': 'Novo',
|
||||
};
|
||||
|
||||
if (index > 0) { // Pula 'superadmin' no breadcrumb
|
||||
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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
194
front-end-dash.aggios.app/components/ui/CommandPalette.tsx
Normal file
194
front-end-dash.aggios.app/components/ui/CommandPalette.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
'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,
|
||||
BuildingOfficeIcon,
|
||||
LinkIcon,
|
||||
Cog6ToothIcon,
|
||||
PlusIcon,
|
||||
DocumentTextIcon,
|
||||
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: 'Dashboard', href: '/superadmin', icon: HomeIcon, category: 'Navegação' },
|
||||
{ name: 'Agências', href: '/superadmin/agencies', icon: BuildingOfficeIcon, category: 'Navegação' },
|
||||
{ name: 'Templates', href: '/superadmin/signup-templates', icon: LinkIcon, category: 'Navegação' },
|
||||
{ name: 'Templates de Agência', href: '/superadmin/agency-templates', icon: DocumentTextIcon, category: 'Navegação' },
|
||||
{ name: 'Configurações', href: '/superadmin/settings', icon: Cog6ToothIcon, category: 'Navegação' },
|
||||
{ name: 'Nova Agência', href: '/superadmin/agencies/new', icon: PlusIcon, category: 'Ações' },
|
||||
{ name: 'Novo Template', href: '/superadmin/signup-templates/new', 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>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { InputHTMLAttributes, forwardRef, useState } from "react";
|
||||
import { InputHTMLAttributes, forwardRef, useState, ReactNode } from "react";
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
helperText?: ReactNode;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
onRightIconClick?: () => void;
|
||||
|
||||
Reference in New Issue
Block a user