Módulo 2.8 - Projeto Final | Dashboard Mastery

📋

Planejamento e Estrutura Base

Definindo o escopo e criando a estrutura HTML inicial

Antes de escrever qualquer código, é essencial planejar o que vamos construir. Nosso Dashboard de Analytics terá: uma barra de navegação com filtro de período, cards de KPIs (métricas principais), um gráfico de barras mostrando vendas por mês, e uma tabela com os últimos pedidos.

A estrutura do projeto será: layout responsivo com grid de 12 colunas, dark mode por padrão com toggle para light mode, animações sutis em hovers e transições, e design mobile-first que se adapta a todas as telas.

Vamos usar apenas HTML e Tailwind CSS (via CDN), sem frameworks JavaScript - isso reforça os fundamentos e mostra que dashboards profissionais podem ser criados com tecnologias simples.

Componentes do Dashboard

Header/Navbar

• Logo e título do dashboard
• Seletor de período (7d, 30d, 90d)
• Toggle de tema (dark/light)
• Avatar/menu do usuário

KPI Cards

• Receita Total
• Pedidos do Período
• Ticket Médio
• Taxa de Conversão

Gráfico de Vendas

• Gráfico de barras CSS puro
• Eixo X: meses
• Eixo Y: valores
• Tooltips no hover

Tabela de Pedidos

• Colunas: ID, Cliente, Valor, Status
• Ordenação visual
• Status badges coloridos
• Scroll horizontal em mobile

Estrutura HTML Base dashboard.html

<!DOCTYPE html>
<html lang="pt-BR" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            dark: {
              900: '#0f172a',
              800: '#1e293b',
              700: '#334155',
              600: '#475569'
            }
          }
        }
      }
    }
  </script>
</head>
<body class="bg-dark-900 text-neutral-100 min-h-screen">

  <!-- Header -->
  <header class="...">...</header>

  <!-- Main Content -->
  <main class="max-w-7xl mx-auto px-4 py-8">

    <!-- KPI Cards Grid -->
    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
      <!-- Cards aqui -->
    </section>

    <!-- Charts + Table Grid -->
    <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Gráfico -->
      <div class="bg-dark-800 rounded-xl p-6">...</div>
      <!-- Tabela -->
      <div class="bg-dark-800 rounded-xl p-6">...</div>
    </section>

  </main>

</body>
</html>

💡

Dica de Organização

Antes de codar, faça um esboço no papel ou no Figma. Defina quais dados cada componente vai exibir e como eles se relacionam. Isso economiza tempo e evita retrabalho.

🎯

Header e Navegação

Criando a barra superior com filtros e controles

O header é o primeiro ponto de contato do usuário com o dashboard. Ele deve conter: identidade visual (logo/título), controles globais (filtro de período, toggle de tema), e informações do usuário. O design deve ser compacto mas funcional.

Usaremos position: sticky para manter o header visível durante scroll, e backdrop-blur para um efeito de transparência elegante.

Preview do Header

📊 Analytics

Header Component header.html

<header class="sticky top-0 z-50 bg-dark-900/95 backdrop-blur-sm
               border-b border-dark-700">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">

      <!-- Logo -->
      <div class="flex items-center gap-3">
        <span class="text-2xl">📊</span>
        <span class="font-bold text-xl hidden sm:block">Analytics</span>
      </div>

      <!-- Controls -->
      <div class="flex items-center gap-4">

        <!-- Period Selector -->
        <div class="flex bg-dark-800 rounded-lg p-1 border border-dark-700">
          <button class="px-3 py-1.5 text-sm rounded-md bg-blue-600 text-white
                         transition-all duration-200">
            7 dias
          </button>
          <button class="px-3 py-1.5 text-sm rounded-md text-neutral-400
                         hover:text-white hover:bg-dark-700
                         transition-all duration-200">
            30 dias
          </button>
          <button class="px-3 py-1.5 text-sm rounded-md text-neutral-400
                         hover:text-white hover:bg-dark-700
                         transition-all duration-200">
            90 dias
          </button>
        </div>

        <!-- Theme Toggle -->
        <button id="theme-toggle"
                class="p-2 rounded-lg bg-dark-800 border border-dark-700
                       hover:bg-dark-700 transition-colors">
          <span class="dark:hidden">🌙</span>
          <span class="hidden dark:inline">☀️</span>
        </button>

        <!-- User Avatar -->
        <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-purple-600
                    rounded-full flex items-center justify-center
                    text-sm font-bold cursor-pointer
                    hover:ring-2 hover:ring-blue-400 transition-all">
          JD
        </div>

      </div>
    </div>
  </div>
</header>

📈

Cards de KPI

Métricas principais com indicadores de tendência

Os KPI Cards (Key Performance Indicators) são o coração do dashboard. Eles mostram as métricas mais importantes de forma rápida e visual. Cada card deve ter: ícone, título da métrica, valor principal, e indicador de tendência (seta + percentual).

Usaremos um grid responsivo: 1 coluna em mobile, 2 em tablet, 4 em desktop. Cada card terá hover com elevação sutil para indicar interatividade.

Preview dos KPI Cards

💰 +12.5%

R$ 48.290

Receita Total

📦 +8.2%

1.284

Pedidos

🎯 -2.4%

R$ 376

Ticket Médio

📊 +5.1%

3.42%

Conversão

KPI Card Component kpi-card.html

<!-- Grid de KPIs -->
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">

  <!-- KPI Card Template -->
  <div class="bg-dark-800 rounded-xl p-5 border border-dark-700
              hover:border-blue-500/50 hover:-translate-y-1
              transition-all duration-200 cursor-pointer group">

    <!-- Header: Icon + Trend -->
    <div class="flex items-center justify-between mb-4">
      <div class="w-10 h-10 rounded-lg bg-blue-500/10
                  flex items-center justify-center
                  group-hover:bg-blue-500/20 transition-colors">
        <span class="text-xl">💰</span>
      </div>

      <!-- Trend Badge (verde = positivo, vermelho = negativo) -->
      <span class="text-xs font-medium text-emerald-400
                   bg-emerald-400/10 px-2.5 py-1 rounded-full
                   flex items-center gap-1">
        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M5 10l7-7m0 0l7 7m-7-7v18"/>
        </svg>
        12.5%
      </span>
    </div>

    <!-- Value -->
    <div class="text-2xl sm:text-3xl font-bold mb-1">
      R$ 48.290
    </div>

    <!-- Label -->
    <div class="text-sm text-neutral-500">
      Receita Total
    </div>

    <!-- Optional: Sparkline or mini chart -->
    <div class="mt-4 flex items-end gap-0.5 h-8">
      <div class="flex-1 bg-blue-500/30 rounded-sm" style="height: 40%"></div>
      <div class="flex-1 bg-blue-500/30 rounded-sm" style="height: 60%"></div>
      <div class="flex-1 bg-blue-500/30 rounded-sm" style="height: 45%"></div>
      <div class="flex-1 bg-blue-500/30 rounded-sm" style="height: 80%"></div>
      <div class="flex-1 bg-blue-500/30 rounded-sm" style="height: 70%"></div>
      <div class="flex-1 bg-blue-500/40 rounded-sm" style="height: 90%"></div>
      <div class="flex-1 bg-blue-500 rounded-sm" style="height: 100%"></div>
    </div>

  </div>

  <!-- Repetir para outros KPIs... -->

</section>

Tendência Positiva


              text-emerald-400 bg-emerald-400/10

Seta para cima + cor verde

Tendência Negativa


              text-red-400 bg-red-400/10

Seta para baixo + cor vermelha

📊

Gráfico de Barras CSS

Visualização de vendas mensais sem JavaScript

É possível criar gráficos de barras impressionantes usando apenas CSS! A técnica usa flexbox com align-items: flex-end para alinhar as barras na base, e alturas em porcentagem para representar valores.

Adicionamos hovers interativos que mostram o valor exato (tooltip) e animações de entrada para uma experiência mais dinâmica.

Vendas por Mês

Últimos 6 meses

50k 40k 30k 20k 10k 0

R$ 32.400

R$ 38.900

R$ 24.100

R$ 45.200

R$ 36.800

R$ 48.290

Jul

Ago

Set

Out

Nov

Dez

Bar Chart CSS chart.html

<div class="bg-dark-800 rounded-xl p-6 border border-dark-700">
  <h3 class="text-lg font-semibold mb-6">Vendas por Mês</h3>

  <!-- Chart Container -->
  <div class="flex items-end gap-3 h-48">

    <!-- Single Bar -->
    <div class="flex-1 group relative">
      <!-- Bar (altura define o valor) -->
      <div class="bg-blue-500/80 hover:bg-blue-500
                  rounded-t-lg transition-all duration-300 cursor-pointer"
           style="height: 75%">

        <!-- Tooltip -->
        <div class="absolute -top-8 left-1/2 -translate-x-1/2
                    bg-dark-900 text-white text-xs px-2 py-1 rounded
                    opacity-0 group-hover:opacity-100
                    transition-opacity pointer-events-none">
          R$ 38.900
        </div>

      </div>
    </div>

    <!-- Repetir para outras barras... -->

  </div>

  <!-- X Axis Labels -->
  <div class="flex gap-3 mt-3 border-t border-dark-700 pt-3">
    <div class="flex-1 text-center text-xs text-neutral-500">Jul</div>
    <div class="flex-1 text-center text-xs text-neutral-500">Ago</div>
    <!-- ... -->
  </div>
</div>

<style>
/* Animação de entrada das barras */
@keyframes growUp {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.bar {
  transform-origin: bottom;
  animation: growUp 0.5s ease-out forwards;
}
.bar:nth-child(1) { animation-delay: 0ms; }
.bar:nth-child(2) { animation-delay: 100ms; }
.bar:nth-child(3) { animation-delay: 200ms; }
/* ... stagger effect */
</style>

📋

Tabela de Pedidos

Listagem de dados com status badges e responsividade

A tabela de pedidos exibe os dados mais recentes com colunas para ID, Cliente, Valor, Data e Status. Usaremos badges coloridos para status (Aprovado, Pendente, Cancelado) e um container com scroll horizontal para mobile.

Cada linha terá hover state sutil e os headers serão sticky para facilitar navegação em listas longas.

Últimos Pedidos

Pedido	Cliente	Valor	Data	Status
#12847	Maria Silva	R$ 459,90	Hoje, 14:32	Aprovado
#12846	João Santos	R$ 234,50	Hoje, 13:15	Pendente
#12845	Ana Costa	R$ 789,00	Ontem, 18:42	Aprovado
#12844	Pedro Lima	R$ 156,80	Ontem, 16:20	Cancelado

Mostrando 4 de 1.284 pedidos

Status Badges badges.html

<!-- Aprovado (verde) -->
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-emerald-400/10 text-emerald-400">
  Aprovado
</span>

<!-- Pendente (amarelo) -->
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-yellow-400/10 text-yellow-400">
  Pendente
</span>

<!-- Cancelado (vermelho) -->
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-red-400/10 text-red-400">
  Cancelado
</span>

<!-- Processando (azul) -->
<span class="text-xs font-medium px-2.5 py-1 rounded-full
             bg-blue-400/10 text-blue-400">
  Processando
</span>

🚀

Responsividade e Toques Finais

Ajustes mobile, animações e polish final

Na etapa final, garantimos que o dashboard funcione perfeitamente em todas as telas. Isso inclui: ajustar o grid de KPIs para empilhar em mobile, garantir scroll horizontal na tabela, esconder elementos secundários em telas pequenas, e adicionar animações de entrada.

Também implementamos o toggle de tema (dark/light) e adicionamos micro-interações como hovers suaves e transições em todos os elementos clicáveis.

Checklist de Responsividade

✓ Header compacto em mobile

✓ KPIs: 1 col mobile → 2 tablet → 4 desktop

✓ Gráfico: barras mais finas em mobile

✓ Tabela: scroll horizontal

✓ Touch targets mínimo 44px

✓ Fontes legíveis (min 14px body)

✓ Espaçamentos adequados

✓ Testado em 320px, 768px, 1024px+

Theme Toggle Script theme.js

<script>
  const themeToggle = document.getElementById('theme-toggle');
  const html = document.documentElement;

  // Check for saved preference or system preference
  if (localStorage.getItem('theme') === 'light' ||
      (!localStorage.getItem('theme') &&
       window.matchMedia('(prefers-color-scheme: light)').matches)) {
    html.classList.remove('dark');
  }

  themeToggle.addEventListener('click', () => {
    html.classList.toggle('dark');
    localStorage.setItem('theme',
      html.classList.contains('dark') ? 'dark' : 'light'
    );
  });
</script>

💡

Próximos Passos

Este projeto usa dados estáticos. Na Trilha 3, você aprenderá a conectar com APIs reais, adicionar interatividade com JavaScript, implementar filtros dinâmicos e criar estados de loading. O dashboard vai ganhar vida!

🏆 Conclusão da Trilha 2

O que você construiu:

✓ Header responsivo com filtros e theme toggle
✓ Grid de KPI cards com indicadores de tendência
✓ Gráfico de barras CSS puro com tooltips
✓ Tabela de dados com status badges
✓ Layout totalmente responsivo
✓ Suporte a dark/light mode

Skills dominadas:

⚡ Componentes de dados (cards, stats)
⚡ Gráficos e visualizações CSS
⚡ Tabelas responsivas
⚡ Layouts com CSS Grid
⚡ Animações e transições
⚡ Design responsivo mobile-first

Parabéns! Você completou a Trilha 2!

Agora você domina a criação de componentes visuais profissionais para dashboards.

Iniciar Trilha 3: Interatividade →

← Animações e Transições Voltar para Trilha 2 →

🏆 Projeto Final - Dashboard Completo

O que você vai construir

Planejamento e Estrutura Base

Componentes do Dashboard

Dica de Organização

Header e Navegação

Preview do Header

Cards de KPI

Preview dos KPI Cards

Tendência Positiva

Tendência Negativa

Gráfico de Barras CSS

Vendas por Mês

Tabela de Pedidos

Últimos Pedidos

Responsividade e Toques Finais

Checklist de Responsividade

Próximos Passos

🏆 Conclusão da Trilha 2

O que você construiu:

Skills dominadas: