Modulo 3.3 - Dashboard e Interface Principal

🖥️ Layout Design para Apps com IA

Apps de IA tem um desafio de layout que apps tradicionais nao tem: espaco para conversa. A interacao primaria e texto, e texto precisa de area generosa para ser lido com conforto. Sidebar + area principal + input bar e o padrao que domina em 2026 por uma razao.

🎯 Conceito Principal

O layout padrao para SaaS com IA consiste em tres zonas: sidebar de navegacao (historico, configuracoes, agentes), area principal (onde a conversa/conteudo acontece) e painel de chat/input (onde o usuario interage). Esse modelo funciona porque mapeia diretamente o fluxo mental do usuario: escolher contexto > ver conteudo > agir.

• Sidebar (240-280px): Fixa no desktop, drawer no mobile. Contem historico de conversas, botao "Nova Conversa", navegacao para settings e billing
• Area Principal (flex-1): Ocupa todo o espaco restante. Scroll vertical para mensagens. Max-width de 768px para legibilidade (texto longo em tela wide e cansativo)
• Input Bar (fixo no bottom): Textarea expansivel + botao de upload + botao de envio. Sticky no bottom da viewport para estar sempre acessivel
• Responsive: Em telas menores que 768px, sidebar vira overlay/drawer. Input bar vira full-width. Area principal ocupa 100vw

🏗️ Wireframe do Layout

┌─────────────────────────────────────────────────┐
│ Logo Nav Items Theme Avatar │
├──────────┬──────────────────────────────────────┤
│ + Nova │ │
│ Conversa │ Area Principal (Chat/Content) │
│ │ │
│ Conv 1 │ User: Como funciona X? │
│ Conv 2 │ AI: X funciona assim... │
│ Conv 3 │ │
│ │ User: E sobre Y? │
│ Settings │ AI: Y e relacionado a... │
│ Billing │ │
│ │ ┌──────────────────────────────────┐ │
│ │ │ 📎 Digite sua mensagem... ➤ │ │
│ │ └──────────────────────────────────┘ │
└──────────┴──────────────────────────────────────┘

💻 Estrutura Base do Layout

// app/dashboard/layout.tsx

export default function

DashboardLayout({ children }) {

return (

{/* Sidebar - hidden on mobile */}

<aside className="hidden md:flex w-64 flex-col

bg-gray-900 border-r border-gray-800">

</aside>

{/* Main content area */}

{children}

</div>

</main>

</div>

)

}

💡 Dica Pratica

Copie o layout do ChatGPT ou Claude como base. Serio. Sidebar esquerda com historico + area central de conversa + input bar na base. Usuarios ja sabem usar esse padrao. Nao invente um layout novo. Inove no conteudo e nas features, nao na disposicao dos elementos.

💬 Conversation vs Transaction-Centered

Nem todo SaaS com IA precisa ser um chatbot. Existem dois paradigmas dominantes de interface e a escolha errada pode matar a experiencia do usuario. Entender quando usar cada um e decisao de arquitetura, nao de design.

🎯 Conceito Principal

O conversation-centered (ChatGPT, Claude, Gemini) coloca a conversa como elemento central da interface. O usuario interage primariamente via texto. Ja o transaction-centered (Notion AI, Canva AI, Jasper) integra a IA dentro de workflows existentes. A IA e uma feature, nao o produto inteiro.

Existe tambem o modelo hibrido (Cursor, v0.dev, Replit Agent) que combina os dois: um workspace visual onde a IA atua como co-piloto. O usuario edita diretamente E conversa com a IA no mesmo ambiente.

💬 Conversation-Centered

A conversa e o produto

• Exemplos: ChatGPT, Claude, Perplexity
• Quando usar: O valor principal vem da interacao textual com a IA
• Layout: Chat area centralizada, historico na sidebar
• Vantagem: Simples de construir, familiar para usuarios

📋 Transaction-Centered

A IA potencializa workflows

• Exemplos: Notion AI, Canva AI, Jasper
• Quando usar: A IA e uma feature dentro de um produto maior
• Layout: Workspace no centro, IA em sidebar ou popup
• Vantagem: IA contextualizada no que o usuario esta fazendo

📊 Dados de Mercado

• 72% dos SaaS com IA lancados em 2025-2026 usam modelo conversation-centered como base
• Modelos hibridos (Cursor, v0) mostram 3x mais retencao que chatbots puros em tarefas de produtividade
• Para MVP: Conversation-centered e 5x mais rapido de construir que hibrido. Comece simples, complexifique depois

💡 Dica Pratica

Se voce esta construindo um SaaS com IA pela primeira vez, va de conversation-centered. E mais simples de construir, usuarios ja sabem usar e voce pode evoluir para hibrido depois. O ChatGPT provou que o modelo funciona. Nao reinvente antes de validar.

🧱 Componentes Essenciais do Dashboard

Um dashboard funcional nao e uma pagina em branco com um input de texto. Ele precisa de componentes que informam, guiam e motivam o usuario. Stats cards, lista de conversas recentes, acoes rapidas e seletor de agente sao o minimo para um produto que parece profissional.

🎯 Conceito Principal

Os componentes essenciais de um dashboard de SaaS com IA seguem uma hierarquia: status/metricas no topo (quantas conversas, tokens usados, plano atual), acoes rapidas no meio (nova conversa, templates, upload) e conteudo recente embaixo (ultimas conversas, resultados salvos).

• Stats Cards: 3-4 cards no topo mostrando metricas-chave. Conversas hoje, tokens usados, tempo economizado. Dados que justificam o pagamento
• Quick Actions: Botoes grandes para acoes frequentes. "Nova Conversa", "Upload Documento", "Usar Template". Reduzem cliques para chegar ao valor
• Recent Conversations: Lista das ultimas 5-10 conversas com titulo, data e preview. Clicar abre a conversa completa
• Agent Selector: Se o SaaS tem multiplos agentes/modos (escrita, analise, codigo), dropdown ou tabs para alternar

💻 Stats Card com Tailwind + shadcn/ui

import

{ Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

import

{ MessageSquare, Zap, Clock, TrendingUp } from 'lucide-react'

const

stats = [

{ title: 'Conversas Hoje', value: '12', icon: MessageSquare, change: '+3' },

{ title: 'Tokens Usados', value: '45.2k', icon: Zap, change: '60%' },

{ title: 'Tempo Economizado', value: '2.5h', icon: Clock, change: '+45min' },

{ title: 'Satisfacao', value: '94%', icon: TrendingUp, change: '+2%' },

]

function

StatsGrid() {

return (

{stats.map((stat) => (

<CardHeader className="flex flex-row items-center

justify-between pb-2">

<CardTitle className="text-sm font-medium

text-muted-foreground">

{stat.title}

</CardTitle>

<stat.icon className="h-4 w-4 text-purple-400" />

</CardHeader>

<div className="text-2xl font-bold">{stat.value}</div>

<p className="text-xs text-emerald-400">{stat.change}</p>

</CardContent>

</Card>

))}

</div>

)

}

✓ O que FAZER

✓ Mostrar metricas que justificam o valor do produto
✓ Usar shadcn/ui como base (consistente, acessivel, customizavel)
✓ Colocar a acao principal (nova conversa) em destaque

✗ O que NAO fazer

✗ Dashboard vazio sem metricas nem contexto
✗ Criar componentes do zero quando existem libraries
✗ Sobrecarregar com 20 cards (3-4 stats sao suficientes)

🧭 Navegacao e Information Architecture

O usuario abriu o dashboard. Agora precisa encontrar o que procura em menos de 3 segundos. Information Architecture (IA) e a arte de organizar features de forma que o usuario descubra naturalmente, sem precisar de manual. Sidebar, breadcrumbs e command palette sao as ferramentas.

🎯 Conceito Principal

A navegacao de um SaaS opera em tres niveis: primaria (sidebar - seccoes principais como Chat, Settings, Billing), secundaria (breadcrumbs + tabs dentro de cada seccao) e global (Command Palette Cmd+K que busca qualquer coisa de qualquer lugar).

• Sidebar Items: Maximo 7 items na navegacao primaria (regra de Miller). Agrupe items relacionados com separadores visuais. Icons + labels
• Breadcrumbs: Mostram onde o usuario esta na hierarquia. Dashboard > Settings > API Keys. Permitem voltar rapidamente a qualquer nivel
• Command Palette (Cmd+K): Busca universal. Digita o que quer e encontra conversas, settings, acoes. Linear, Vercel, Notion e Slack usam. Power users adoram
• Feature Discovery: Tooltips em features novas, badges "Novo" em items de menu, empty states com call-to-action educativo

💻 Sidebar com Navegacao Organizada

const

sidebarItems = [

// Acao principal

{ icon: Plus, label: 'Nova Conversa', href: '/chat/new', primary: true },

// Navegacao principal

{ icon: MessageSquare, label: 'Conversas', href: '/chat' },

{ icon: FileText, label: 'Documentos', href: '/documents' },

{ icon: Bot, label: 'Agentes', href: '/agents', badge: 'Novo' },

// Separador

{ type: 'separator' },

// Configuracoes

{ icon: Settings, label: 'Configuracoes', href: '/settings' },

{ icon: CreditCard, label: 'Plano', href: '/billing' },

]

// Cmd+K command palette (usar cmdk library)

npm install cmdk

import

{ Command } from 'cmdk'

<Command.Input placeholder="Buscar conversas, settings..." />

<Command.List>

<Command.Item>Nova Conversa</Command.Item>

<Command.Item>Configuracoes</Command.Item>

<Command.Item>Trocar de Agente</Command.Item>

</Command.List>

</Command>

💡 Dica Pratica

Implemente Cmd+K desde o MVP. Parece avancado mas a library cmdk do Pacocoursey faz em 20 linhas. Power users (que pagam mais) usam atalhos. E um diferencial competitivo barato de implementar.

📱 Responsividade e Mobile

67% do trafego de SaaS vem de desktop, mas os outros 33% nao podem ter uma experiencia quebrada. Mobile-first nao significa construir para mobile primeiro. Significa garantir que a experiencia mobile e pensada, nao improvisada. Sidebar colapsavel, bottom nav e touch-friendly chat sao essenciais.

🎯 Conceito Principal

A adaptacao mobile de um dashboard de IA envolve tres transformacoes principais: sidebar vira drawer/sheet (abre por cima do conteudo, fecha com swipe), navegacao primaria migra para bottom bar (polegar alcanca facilmente) e input bar precisa coexistir com teclado virtual (viewport resize).

• Collapsible Sidebar: No desktop, toggle entre 64px (icons only) e 256px (full). No mobile, Sheet/Drawer overlay. Botao hamburger no header
• Bottom Navigation: 4-5 items max (Chat, History, Agents, Settings). Tab bar fixa no bottom do mobile. Padrao nativo iOS/Android
• Touch-Friendly Chat: Botoes com min 44x44px (Apple HIG). Swipe para deletar mensagem. Long press para copiar. Input area com min 48px height
• PWA: Progressive Web App permite instalar o SaaS como app no celular. Service worker para offline, manifest.json para icon na home screen

💻 Sidebar Responsiva com Tailwind

// Sidebar que colapsa no mobile

function

Sidebar({ isOpen, onClose }) {

return (

{/* Mobile overlay */}

{isOpen && (

<div

className="fixed inset-0 bg-black/50 z-40 md:hidden"

onClick={onClose}

)}

{/* Sidebar */}

<aside className={`

fixed md:static inset-y-0 left-0 z-50

w-64 bg-gray-900 border-r border-gray-800

transform transition-transform duration-200

${isOpen ? 'translate-x-0' : '-translate-x-full'}

md:translate-x-0

`}>

{/* sidebar content */}

</aside>

</>

)

}

// Bottom navigation (mobile only)

<nav className="fixed bottom-0 left-0 right-0

bg-gray-900 border-t border-gray-800

flex justify-around py-2 md:hidden z-40">

</nav>

📊 Breakpoints Essenciais

sm: 640px

Mobile landscape. Stack to row layouts

md: 768px

Tablet. Sidebar aparece. Bottom nav some

lg: 1024px

Desktop. Full sidebar. Multi-column layouts

💡 Dica Pratica

Teste no mobile real, nao so no DevTools. O Chrome DevTools mente sobre teclado virtual, safe areas e gestos de swipe. Conecte seu celular via USB e use remote debugging. Ou use BrowserStack free tier. Erros de mobile so aparecem no mobile real.

🛠️ Exercicio: Dashboard Funcional

Hora de construir. Neste exercicio voce vai criar um dashboard completo com sidebar de navegacao, stats cards, lista de conversas recentes e design responsivo. O resultado e um painel profissional que da a impressao certa quando o usuario loga.

🛠️

Exercicio: Construir Dashboard Completo

Tempo estimado: 35-50 minutos

Layout base com Sidebar

Criar o layout principal: sidebar fixa de 256px no desktop, drawer no mobile. Area principal com flex-1. Header com logo e avatar:

// Estrutura de pastas:

app/dashboard/layout.tsx ← Layout wrapper

app/dashboard/page.tsx ← Dashboard home

components/sidebar.tsx ← Sidebar component

components/top-bar.tsx ← Top navigation

components/mobile-nav.tsx ← Bottom nav mobile

Stats Cards no topo

Grid de 4 cards: Conversas Hoje, Tokens Usados, Tempo Economizado, Plano Atual. Grid-cols-2 no mobile, grid-cols-4 no desktop. Usar shadcn/ui Card component.

Lista de Conversas Recentes

Exibir as ultimas 5 conversas com titulo (gerado pela IA), data relativa e preview da ultima mensagem. Clicar navega para a conversa:

{conversations.map(conv => (

<div className="p-3 rounded-lg hover:bg-gray-800

cursor-pointer transition">

<h3 className="font-medium truncate">{conv.title}</h3>

{conv.lastMessage}

</p>

{formatRelative(conv.updatedAt)}

</span>

</div>

</Link>

))}

</div>

Quick Actions + Agent Selector

Secao de acoes rapidas: "Nova Conversa", "Upload Documento", "Usar Template". Dropdown ou tabs para selecionar agente/modo de IA (Escrita, Analise, Codigo).

Responsividade completa

Testar em 3 breakpoints: mobile (375px), tablet (768px) e desktop (1280px). Sidebar colapsa em mobile. Bottom nav aparece. Stats grid adapta de 4 para 2 colunas. Input bar full-width.

✅ Criterios de Sucesso

☐ Sidebar com navegacao funcional

☐ Stats cards mostrando dados

☐ Lista de conversas recentes clicavel

☐ Sidebar colapsa no mobile (drawer)

☐ Bottom nav visivel no mobile

☐ Layout funciona em 375px, 768px e 1280px

🌟 Bonus

Adicione Command Palette (Cmd+K) com a library cmdk e dark/light mode toggle. Implemente animacoes suaves na sidebar (framer-motion) e skeleton loading nos stats cards enquanto os dados carregam.

📋 Resumo do Modulo

✓

Layout: sidebar + area central + input bar - Padrao dominante em apps de IA. Copie antes de inovar. Max-width 768px para legibilidade.

✓

Conversation-centered para MVP - 5x mais rapido de construir que hibrido. Evolua para transaction-centered ou hibrido depois de validar.

✓

Stats + Quick Actions + Recent Conversations - Os tres componentes minimos de um dashboard profissional. shadcn/ui como base.

✓

Navegacao em 3 niveis - Sidebar (primaria) + Breadcrumbs (secundaria) + Cmd+K (global). Max 7 items na sidebar. cmdk para command palette.

✓

Mobile: drawer + bottom nav + touch-friendly - Sidebar vira overlay. Bottom nav com 4-5 items. Botoes min 44x44px. Teste no dispositivo real.

Proximo Modulo:

Modulo 3.4 - System Prompts e Fluxo da Aplicacao. O DNA do produto: como configurar system prompts, temperature, context window e pipeline de processamento.

← Modulo Anterior Voltar para Trilha 3 Proximo Modulo →