🧩 Exercícios Práticos: Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 20.1 — Layout do Painel com Sidebar Colapsável e Breadcrumbs

Contexto: Layout do Painel com Sidebar Colapsável e Breadcrumbs no contexto de Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON.

Requisitos de Execução:

  1. Montar estrutura responsiva do painel corporativo com navegação e estado colapsável da barra lateral.

Resultado Esperado

Dashboard com layout fluido e navegação estruturada.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_1_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
<!-- DashboardLayout.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const sidebarAberta = ref(true);
</script>

<template>
  <div class="flex h-screen bg-slate-50">
    <aside :class="['bg-slate-900 text-white p-4 transition-all', sidebarAberta ? 'w-64' : 'w-16']">
      <button @click="sidebarAberta = !sidebarAberta">☰</button>
    </aside>
    <main class="flex-1 p-6 overflow-auto"><slot /></main>
  </div>
</template>

🔍 Nível 2: Prática

Problema 20.2 — Tabela Reativa de Pedidos com Filtros e Ordenação

Contexto: Tabela Reativa de Pedidos com Filtros e Ordenação no contexto de Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON.

Requisitos de Execução:

  1. Implementar tabela com busca em tempo real, ordenação por coluna e paginação client-side.

Resultado Esperado

Tabela de pedidos filtrada reativamente sem recarregar a página.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_2_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
<!-- TabelaPedidos.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

const termo = ref('');
const pedidos = ref([
  { id: 101, cliente: 'Ana', total: 450.0, status: 'PAGO' },
  { id: 102, cliente: 'Bruno', total: 120.0, status: 'PENDENTE' },
]);

const pedidosFiltrados = computed(() => {
  return pedidos.value.filter(p => p.cliente.toLowerCase().includes(termo.value.toLowerCase()));
});
</script>

<template>
  <input v-model="termo" placeholder="Filtrar por cliente" />
  <table>
    <tr v-for="p in pedidosFiltrados" :key="p.id">
      <td>#{{ p.id }}</td><td>{{ p.cliente }}</td><td>R$ {{ p.total.toFixed(2) }}</td>
    </tr>
  </table>
</template>

⚡ Nível 3: Integração

Problema 20.3 — Trilha de Auditoria de Ações em JSON Estruturado

Contexto: Trilha de Auditoria de Ações em JSON Estruturado no contexto de Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON.

Requisitos de Execução:

  1. Gravar registro de auditoria imutável contendo autor, rota, ação executada e payload diff.

Resultado Esperado

Auditoria de ações do painel gravada em JSON estruturado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_3_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
// composables/useAudit.ts
export function useAudit() {
  function registrar(acao: string, detalhes: Record<string, any>) {
    const registro = {
      timestamp: new Date().toISOString(),
      acao,
      detalhes,
    };
    console.log('AUDITORIA VUE:', JSON.stringify(registro));
  }
  return { registrar };
}

🏆 Nível 4: Desafio Corporativo

Problema 20.4 — Suíte de Testes End-to-End do Dashboard E-Commerce

Contexto: Suíte de Testes End-to-End do Dashboard E-Commerce no contexto de Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON.

Requisitos de Execução:

  1. Testar ciclo completo: Login do administrador -> Navegação para pedidos -> Filtragem -> Auditoria registrada.

Resultado Esperado

Suíte de Testes do Dashboard Vue 3 concluída com 100% de sucesso! 🏆

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_4_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Dashboard Vue 3/Nuxt com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
// DashboardE2E.test.ts
import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import TabelaPedidos from './TabelaPedidos.vue';

describe('Dashboard E-Commerce Vue', () => {
  it('filtra pedidos por nome de cliente', async () => {
    const wrapper = mount(TabelaPedidos);
    const input = wrapper.find('input');
    await input.setValue('Ana');
    expect(wrapper.text()).toContain('Ana');
    expect(wrapper.text()).not.toContain('Bruno');
  });
});
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos