🧩 Exercícios Práticos: Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON

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

🎯 Nível 1: Fundamentos

Problema 20.1 — Estrutura do Módulo de Gestão Financeira com Standalone Components

Contexto: Estrutura do Módulo de Gestão Financeira com Standalone Components no contexto de Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON.

Requisitos de Execução:

  1. Organizar arquitetura do portal com Layout, Extrato, Balanço e Gráficos.

Resultado Esperado

Portal financeiro estruturado com componentes standalone desacoplados.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_1_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
// portal-layout.component.ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-finance-layout',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <div class="portal-container">
      <nav><a routerLink="/extrato">Extrato</a> | <a routerLink="/balanco">Balanço</a></nav>
      <main><router-outlet></router-outlet></main>
    </div>
  `
})
export class FinanceLayoutComponent {}

🔍 Nível 2: Prática

Problema 20.2 — Tabela de Lançamentos com Signals e Filtros Reativos

Contexto: Tabela de Lançamentos com Signals e Filtros Reativos no contexto de Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON.

Requisitos de Execução:

  1. Criar componente de lançamentos financeiros com cálculo de saldo em tempo real usando computed().

Resultado Esperado

Saldo consolidado atualizado reativamente na inserção de novos lançamentos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_2_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
// lancamentos.component.ts
import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-lancamentos',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Saldo Consolidado: {{ saldo() | currency:'BRL' }}</h3>
  `
})
export class LancamentosComponent {
  lancamentos = signal([
    { id: 1, desc: 'Venda A', valor: 1500.0 },
    { id: 2, desc: 'Despesa B', valor: -300.0 }
  ]);
  saldo = computed(() => this.lancamentos().reduce((acc, l) => acc + l.valor, 0));
}

⚡ Nível 3: Integração

Problema 20.3 — Trilha de Auditoria Corporativa em JSON com Assinatura Hash

Contexto: Trilha de Auditoria Corporativa em JSON com Assinatura Hash no contexto de Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON.

Requisitos de Execução:

  1. Gravar log de auditoria estruturado no frontend com timestamp, operador, rota e payload.

Resultado Esperado

Evento de auditoria financeira gravado em JSON padronizado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_20_3_SeuNome
  2. Envie na tarefa: Atividade Cap 20 - Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
// audit-finance.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuditFinanceService {
  registrarOperacao(acao: string, payload: any) {
    const log = {
      timestamp: new Date().toISOString(),
      acao,
      payload,
      operador: 'OPERADOR_FINANCEIRO_01'
    };
    console.log('AUDITORIA ANGULAR:', JSON.stringify(log));
  }
}

🏆 Nível 4: Desafio Corporativo

Problema 20.4 — Suíte de Testes End-to-End do Portal Financeiro

Contexto: Suíte de Testes End-to-End do Portal Financeiro no contexto de Projeto Corporativo: Portal de Gestão Financeira com Auditoria JSON.

Requisitos de Execução:

  1. Testar ciclo financeiro completo: Listagem -> Novo Lançamento -> Atualização de Saldo -> Trilha de Auditoria.

Resultado Esperado

Suíte de Testes do Portal de Gestão Financeira 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: Portal de Gestão Financeira com Auditoria JSON
🔑 Gabarito de Código & Solução Comentada 
// finance-e2e.spec.ts
import { LancamentosComponent } from './lancamentos.component';

describe('Portal Financeiro E2E', () => {
  it('calcula saldo consolidado com precisao', () => {
    const comp = new LancamentosComponent();
    expect(comp.saldo()).toBe(1200.0);
  });
});