---
description: Padrão de Design Aggios App para Páginas de Listagem e Dashboards
---

# Padrão de Design Aggios App

Este workflow descreve como construir uma página seguindo o design system da Aggios, utilizando os componentes padronizados na pasta `components/ui`.

## 1. Estrutura Básica da Página

Toda página deve ser envolvida por um container com padding e largura máxima:

```tsx
<div className="p-6 max-w-[1600px] mx-auto space-y-6">
    {/* Conteúdo aqui */}
</div>
```

## 2. Cabeçalho (`PageHeader`)

Utilize o `PageHeader` para títulos, descrições e ações globais da página.

```tsx
<PageHeader
    title="Título da Página"
    description="Breve descrição da funcionalidade."
    primaryAction={{
        label: "Novo Item",
        icon: <PlusIcon className="w-4 h-4" />,
        onClick: () => handleCreate()
    }}
/>
```

## 3. Cartões de Estatísticas (`StatsCard`)

Para dashboards ou resumos, utilize o grid de stats:

```tsx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <StatsCard 
        title="Métrica"
        value="R$ 1.000"
        icon={<CurrencyDollarIcon className="w-6 h-6" />}
        trend={{ value: '10%', label: 'vs ontem', type: 'up' }}
    />
</div>
```

## 4. Filtros e Pesquisa (Minimalista Flat)

Os filtros não devem ter sombras nem cores de marca no estado inicial/focus. Devem usar um visual "Clean" com contraste sólido.

```tsx
<div className="flex flex-col md:flex-row gap-4 items-center">
    <div className="flex-1 w-full">
        <Input
            placeholder="Pesquisar..."
            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', value: 'all' },
               { label: 'Ativo', value: 'active', color: 'bg-emerald-500' },
           ]}
           buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 hover:border-zinc-400"
        />
    </div>
</div>
```

## 5. Abas e Tabelas (`Tabs` & `DataTable`)

Para organizar o conteúdo principal, utilize o componente `Tabs`. Dentro de cada aba, utilize `Card` com `noPadding` para envolver a `DataTable`.

```tsx
<Tabs
    variant="pills" // ou 'underline'
    items={[
        {
            label: 'Listagem',
            icon: <TableIcon />,
            content: (
                <Card noPadding title="Itens" description="Gerenciamento de registros.">
                    <DataTable 
                        columns={COLUMNS}
                        data={DATA}
                        pagination={{ ... }}
                    />
                </Card>
            )
        }
    ]}
/>
```

## Regras de Estilo e Cores
- **Botões Primários**: Sempre use `variant="primary"` e aplique o gradiente via style/classe: `style={{ background: 'var(--gradient)' }} className="shadow-lg shadow-brand-500/20"`.
- **Bordas**: Use `border-zinc-200` para light mode e `dark:border-zinc-800` para dark mode.
- **Backgrounds**: Use `bg-white` (light) e `dark:bg-zinc-900` (dark) para componentes elevados.
- **Cards & Containers (Flat Design)**:
    - **Cards:** Fundo branco/zinc-900, bordas sutis (`border-zinc-200` / `dark:border-zinc-800`), **SEM SOMBRAS**.
    - **Border Radius:** Usar `rounded-2xl` (16px) ou `rounded-[32px]` para containers grandes.
    - **StatsCards:** Texto de valor em `font-bold` ou `font-black`, ícones em boxes coloridos com opacidade 10% no dark mode.
    - **Hover:** Apenas transições de cor ou escalas sutis, evitar sombras no hover.