164 lines
5.4 KiB
Markdown
164 lines
5.4 KiB
Markdown
# Implementação do Dashboard com Dados Reais
|
|
|
|
## Resumo da Implementação
|
|
|
|
Implementei um sistema completo de dashboard que exibe dados reais do banco de dados para todos os níveis de usuários (SUPERADMIN, ADMIN, COLABORADOR), respeitando as regras de negócio de cada nível.
|
|
|
|
## Arquivos Criados/Modificados
|
|
|
|
### 1. Dashboard Service (`src/services/dashboardService.ts`)
|
|
|
|
- **Objetivo**: Centralizar a lógica de busca e processamento de dados do dashboard
|
|
- **Funcionalidades**:
|
|
- Obter estatísticas baseadas no nível do usuário
|
|
- Calcular métricas em tempo real (medicamentos disponíveis, próximos ao vencimento, pedidos, vendas, economia)
|
|
- Filtrar dados por empresa quando necessário
|
|
- Buscar atividades recentes
|
|
- Listar pedidos pendentes
|
|
|
|
### 2. API Route (`src/app/api/dashboard/route.ts`)
|
|
|
|
- **Objetivo**: Endpoint para servir dados do dashboard
|
|
- **Endpoints**:
|
|
- `GET /api/dashboard?userRole=X&empresaId=Y&type=stats` - Estatísticas
|
|
- `GET /api/dashboard?userRole=X&empresaId=Y&type=activities` - Atividades recentes
|
|
- `GET /api/dashboard?userRole=X&empresaId=Y&type=pending` - Pedidos pendentes
|
|
|
|
### 3. Hook Customizado (`src/hooks/useDashboardData.ts`)
|
|
|
|
- **Objetivo**: Hook React para consumir dados do dashboard
|
|
- **Funcionalidades**:
|
|
- Estados de loading, erro e dados
|
|
- Atualização automática baseada em mudanças de role/empresa
|
|
- Tratamento de erros
|
|
|
|
### 4. Dashboard Principal Atualizado (`src/app/dashboard/page.tsx`)
|
|
|
|
- **Modificações**:
|
|
- Integração com dados reais via hook
|
|
- Exibição condicional baseada no nível do usuário
|
|
- Indicadores de carregamento e erro
|
|
- Substituição de dados mockados por dados reais
|
|
|
|
## Regras de Negócio Implementadas
|
|
|
|
### SUPERADMIN
|
|
|
|
- **Visualiza**: Dados globais de todas as empresas
|
|
- **Métricas**:
|
|
- Total de medicamentos disponíveis (todas as empresas)
|
|
- Medicamentos próximos ao vencimento (próximos 30 dias)
|
|
- Todos os pedidos recebidos no sistema
|
|
- Pedidos pendentes globais
|
|
- Vendas do mês (todas as empresas)
|
|
- Economia gerada total
|
|
- **Atividades**: Recentes de todo o sistema
|
|
- **Pedidos Pendentes**: De todas as empresas
|
|
|
|
### ADMIN
|
|
|
|
- **Visualiza**: Dados apenas da sua empresa
|
|
- **Métricas**:
|
|
- Medicamentos disponíveis da empresa
|
|
- Medicamentos próximos ao vencimento da empresa
|
|
- Pedidos recebidos onde a empresa é vendedora
|
|
- Pedidos pendentes da empresa
|
|
- Vendas do mês da empresa
|
|
- Economia gerada pela empresa
|
|
- **Atividades**: Recentes da empresa
|
|
- **Pedidos Pendentes**: Apenas da empresa
|
|
|
|
### COLABORADOR
|
|
|
|
- **Visualiza**: Dados limitados da empresa
|
|
- **Métricas**:
|
|
- Medicamentos disponíveis da empresa
|
|
- Medicamentos próximos ao vencimento da empresa
|
|
- **NÃO visualiza**: Pedidos, vendas, economia (dados sensíveis)
|
|
- **Atividades**: Limitadas ou não exibidas
|
|
- **Pedidos Pendentes**: Não visualiza
|
|
|
|
## Funcionalidades Implementadas
|
|
|
|
### 1. Métricas Dinâmicas
|
|
|
|
- ✅ Contagem real de medicamentos por empresa
|
|
- ✅ Cálculo de medicamentos próximos ao vencimento (30 dias)
|
|
- ✅ Contagem de pedidos recebidos e pendentes
|
|
- ✅ Cálculo de vendas do mês atual
|
|
- ✅ Soma da economia gerada (valor total dos pedidos concluídos)
|
|
|
|
### 2. Atividades Recentes
|
|
|
|
- ✅ Lista de pedidos recentes com detalhes
|
|
- ✅ Lista de produtos atualizados recentemente
|
|
- ✅ Formatação de datas e valores em português
|
|
- ✅ Status coloridos para diferentes tipos de atividade
|
|
|
|
### 3. Pedidos Pendentes
|
|
|
|
- ✅ Lista de pedidos com status pendente ou aguardando aprovação
|
|
- ✅ Informações: número, valor, comprador, data
|
|
- ✅ Filtrado por empresa para admins
|
|
|
|
### 4. Interface Responsiva
|
|
|
|
- ✅ Cards de métricas adaptáveis
|
|
- ✅ Indicadores de carregamento
|
|
- ✅ Mensagens de erro
|
|
- ✅ Layout responsivo para diferentes tamanhos de tela
|
|
|
|
## Como Funciona
|
|
|
|
1. **Autenticação**: O usuário faz login e o sistema identifica seu nível e empresa
|
|
2. **Carregamento**: O hook `useDashboardData` busca dados baseado no nível do usuário
|
|
3. **API**: A rota `/api/dashboard` processa a requisição e retorna dados filtrados
|
|
4. **Service**: O `dashboardService` executa queries específicas nos serviços de produto e pedido
|
|
5. **Exibição**: O componente Dashboard renderiza os dados de acordo com as permissões
|
|
|
|
## Dados Reais vs Mockados
|
|
|
|
### ANTES (Mockado)
|
|
|
|
```javascript
|
|
const stats = {
|
|
medicamentosDisponiveis: 1247,
|
|
pedidosRecebidos: 28,
|
|
vendasMes: 156,
|
|
economiaGerada: 45280,
|
|
};
|
|
```
|
|
|
|
### DEPOIS (Dados Reais)
|
|
|
|
```javascript
|
|
const { stats, atividades, pedidosPendentes, loading, error } =
|
|
useDashboardData({
|
|
userRole: userRole || "",
|
|
empresaId: empresaId || undefined,
|
|
});
|
|
```
|
|
|
|
Os dados agora são:
|
|
|
|
- ✅ Calculados em tempo real
|
|
- ✅ Filtrados por empresa quando apropriado
|
|
- ✅ Baseados em dados reais do banco Appwrite
|
|
- ✅ Atualizados automaticamente
|
|
|
|
## Benefícios da Implementação
|
|
|
|
1. **Dados Confiáveis**: Informações sempre atualizadas do banco
|
|
2. **Segurança**: Filtros por nível de usuário e empresa
|
|
3. **Performance**: Queries otimizadas e cache no frontend
|
|
4. **Experiência**: Loading states e tratamento de erros
|
|
5. **Escalabilidade**: Fácil adição de novas métricas
|
|
6. **Manutenibilidade**: Código organizado e bem documentado
|
|
|
|
## Próximos Passos Sugeridos
|
|
|
|
1. **Cache**: Implementar cache Redis para métricas
|
|
2. **Real-time**: WebSockets para atualizações em tempo real
|
|
3. **Gráficos**: Adicionar visualizações gráficas
|
|
4. **Filtros**: Filtros por período de tempo
|
|
5. **Exportação**: Relatórios em PDF/Excel
|