# Instalar: Correção Visual do Dashboard + Cores da Marca

## Ficheiros a substituir

```
resources/views/livewire/admin/dashboard.blade.php
resources/views/layouts/app.blade.php
resources/views/livewire/profile.blade.php
```

Sem migrations, sem rotas novas.

```bash
cd ~/public_html/app.amimak.co.mz
php artisan config:clear
php artisan view:clear
```

## O que estava errado

Os gráficos só tinham a altura definida no **atributo HTML do `<canvas>`**
(`height="180"`), que o Chart.js ignora em modo responsivo — sem uma
**altura CSS fixa no contentor**, o gráfico cresce sem controlo consoante
o conteúdo (por isso o donut gigante e a barra a ocupar o ecrã todo).
Corrigido: cada gráfico agora vive dentro de uma `<div class="h-64">`
(altura fixa de 16rem) e uso `maintainAspectRatio: false` para o Chart.js
preencher exactamente esse espaço, nunca mais nem menos.

## Cores da marca

Extraí a cor exacta do logótipo da AMIMAK: **`#CC3336`**. Apliquei em:

- Linha/barras principais dos gráficos (em vez de cinza genérico)
- Barra superior dos cartões de KPI do topo (Imóveis, Equipamentos, etc.)
- Número de "Emergências" no dashboard
- Item de menu activo "Dashboard" (fundo vermelho suave + texto vermelho)
- Avatar do utilizador (círculo com a inicial, no menu e no perfil)

O donut "Pedidos por estado" usa uma paleta derivada do vermelho da marca
(tons de vermelho + cinza escuro) em vez de cores genéricas.

## Testar

- `/admin/dashboard` → confirma que todos os gráficos ficam com altura
  igual e proporcionada (nenhum gigante, nenhum cortado)
- Confirma visualmente que o vermelho `#CC3336` aparece nos pontos
  destacados acima
- Testa também em mobile — os gráficos devem manter a proporção correcta
  mesmo empilhados numa coluna