aggios.app/.agent/workflows/aggios-app-pattern.md

description

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:

<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.

<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:

<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.

<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.

<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.