199 lines
11 KiB
TypeScript
199 lines
11 KiB
TypeScript
"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>
|
|
);
|
|
}
|