fix(erp): enable erp pages and menu items
This commit is contained in:
Erik Silva
198
front-end-agency/app/(agency)/teste/page.tsx
Normal file
198
front-end-agency/app/(agency)/teste/page.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
CalendarIcon,
|
||||
MagnifyingGlassIcon,
|
||||
PlusIcon,
|
||||
FunnelIcon,
|
||||
ArrowPathIcon,
|
||||
EllipsisVerticalIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { Button, Input, Select, PageHeader, Card, StatsCard, Tabs, DatePicker, CustomSelect } from "@/components/ui";
|
||||
import {
|
||||
UsersIcon,
|
||||
CurrencyDollarIcon,
|
||||
BriefcaseIcon as BriefcaseSolidIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
TableCellsIcon,
|
||||
ChartPieIcon,
|
||||
Cog6ToothIcon as CogIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
export default function TestPage() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [dateRange, setDateRange] = useState<{ start: Date | null; end: Date | null }>({ start: null, end: null });
|
||||
const [status, setStatus] = useState('all');
|
||||
|
||||
// Dados fictícios para a lista
|
||||
const items = [
|
||||
{ id: 1, name: 'Projeto Alpha', client: 'Empresa A', date: '2023-10-01', status: 'Ativo', amount: 'R$ 1.500,00' },
|
||||
{ id: 2, name: 'Serviço Beta', client: 'Empresa B', date: '2023-10-05', status: 'Pendente', amount: 'R$ 2.300,00' },
|
||||
{ id: 3, name: 'Consultoria Gamma', client: 'Empresa C', date: '2023-10-10', status: 'Concluído', amount: 'R$ 800,00' },
|
||||
{ id: 4, name: 'Design Delta', client: 'Empresa D', date: '2023-10-12', status: 'Ativo', amount: 'R$ 4.200,00' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-[1600px] mx-auto space-y-6">
|
||||
<PageHeader
|
||||
title="Página de Teste"
|
||||
description="Área de desenvolvimento e homologação de novos componentes do padrão Aggios."
|
||||
primaryAction={{
|
||||
label: "Novo Item",
|
||||
icon: <PlusIcon className="w-4 h-4" />,
|
||||
onClick: () => console.log('Novo Item')
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<StatsCard
|
||||
title="Total de Clientes"
|
||||
value="1.240"
|
||||
icon={<UsersIcon className="w-6 h-6" />}
|
||||
trend={{ value: '12%', label: 'vs mês passado', type: 'up' }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Receita Mensal"
|
||||
value="R$ 45.200"
|
||||
icon={<CurrencyDollarIcon className="w-6 h-6" />}
|
||||
trend={{ value: '8.4%', label: 'vs mês passado', type: 'up' }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Projetos Ativos"
|
||||
value="42"
|
||||
icon={<BriefcaseSolidIcon className="w-6 h-6" />}
|
||||
trend={{ value: '2', label: 'novos esta semana', type: 'neutral' }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Taxa de Conversão"
|
||||
value="18.5%"
|
||||
icon={<ArrowTrendingUpIcon className="w-6 h-6" />}
|
||||
trend={{ value: '2.1%', label: 'vs mês passado', type: 'down' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filters Area: Clean Visual (Solid contrast) */}
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center">
|
||||
<div className="flex-1 w-full">
|
||||
<Input
|
||||
placeholder="Pesquisar registros..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
leftIcon={<MagnifyingGlassIcon className="w-5 h-5 text-zinc-400" />}
|
||||
className="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:border-zinc-400 dark:focus:border-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:w-80">
|
||||
<DatePicker
|
||||
value={dateRange}
|
||||
onChange={setDateRange}
|
||||
buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:w-56">
|
||||
<CustomSelect
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
options={[
|
||||
{ label: 'Todos os Status', value: 'all' },
|
||||
{ label: 'Ativo', value: 'active', color: 'bg-emerald-500' },
|
||||
{ label: 'Pendente', value: 'pending', color: 'bg-amber-500' },
|
||||
{ label: 'Concluído', value: 'done', color: 'bg-blue-500' },
|
||||
]}
|
||||
buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 hover:border-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Tabs */}
|
||||
<Tabs
|
||||
items={[
|
||||
{
|
||||
label: 'Visão Geral',
|
||||
icon: <TableCellsIcon />,
|
||||
content: (
|
||||
<Card noPadding title="Itens Recentes" description="Lista de últimos itens cadastrados no sistema.">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50/50 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-800 text-left">
|
||||
<th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Item</th>
|
||||
<th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Cliente</th>
|
||||
<th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Data</th>
|
||||
<th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Valor</th>
|
||||
<th className="px-6 py-4 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="font-medium text-zinc-900 dark:text-white">{item.name}</div>
|
||||
<div className="text-xs text-zinc-500">ID: #{item.id}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-300">{item.client}</td>
|
||||
<td className="px-6 py-4 text-sm text-zinc-600 dark:text-zinc-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarIcon className="w-4 h-4 text-zinc-400" />
|
||||
{new Date(item.date).toLocaleDateString('pt-BR')}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm font-semibold text-zinc-900 dark:text-white">{item.amount}</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-400 hover:text-zinc-600 transition-colors">
|
||||
<EllipsisVerticalIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-zinc-50/30 dark:bg-zinc-900/30 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between">
|
||||
<span className="text-xs text-zinc-500 italic">Exibindo {items.length} resultados encontrados.</span>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm">Anterior</Button>
|
||||
<Button variant="outline" size="sm">Próximo</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Relatórios',
|
||||
icon: <ChartPieIcon />,
|
||||
content: (
|
||||
<Card title="Analytics" description="Visualize o desempenho dos seus itens em tempo real.">
|
||||
<div className="flex items-center justify-center h-48 border-2 border-dashed border-zinc-200 dark:border-zinc-800 rounded-xl">
|
||||
<p className="text-zinc-400 text-sm font-medium">Gráficos e métricas detalhadas serão exibidos aqui.</p>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Configurações',
|
||||
icon: <CogIcon />,
|
||||
content: (
|
||||
<Card title="Preferências" description="Ajuste as configurações deste módulo de teste.">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-xl">
|
||||
<div>
|
||||
<p className="text-sm font-bold text-zinc-900 dark:text-white">Notificações por E-mail</p>
|
||||
<p className="text-xs text-zinc-500">Receba alertas automáticos sobre novos itens.</p>
|
||||
</div>
|
||||
<div className="w-10 h-6 bg-brand-500 rounded-full relative">
|
||||
<div className="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user