fix(erp): enable erp pages and menu items

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

@@ -0,0 +1,117 @@
+---
+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.