Compare commits
No commits in common. "main" and "backup/visual-adjustments" have entirely different histories.
main
...
backup/vis
379
README.md
379
README.md
@ -1,379 +1,2 @@
|
||||
<div align="center">
|
||||
# riseup-squad20
|
||||
|
||||
# 🏥 MEDIConnect
|
||||
|
||||
### Plataforma de Gestão de Saúde Inteligente
|
||||
|
||||
*Combatendo o absenteísmo em clínicas e hospitais através de tecnologia e inovação*
|
||||
|
||||
[](https://nextjs.org/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://tailwindcss.com/)
|
||||
[](https://supabase.com/)
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## Índice
|
||||
|
||||
1. [Visão Geral](#-visão-geral)
|
||||
2. [Problema e Solução](#-problema-e-solução)
|
||||
3. [Funcionalidades](#-funcionalidades)
|
||||
4. [Tecnologias](#️-tecnologias)
|
||||
5. [Instalação](#-instalação)
|
||||
6. [Como Usar](#-como-usar)
|
||||
7. [Fluxos de Usuário](#-fluxos-de-usuário)
|
||||
8. [Componentes Principais](#-componentes-principais)
|
||||
9. [Contribuindo](#-contribuindo)
|
||||
10. [Licença](#-licença)
|
||||
11. [Contato](#-contato)
|
||||
|
||||
---
|
||||
|
||||
## Visão Geral
|
||||
|
||||
**MEDIConnect** é uma plataforma web moderna e intuitiva desenvolvida para revolucionar a gestão de saúde em clínicas e hospitais. Com foco na redução do absenteísmo (faltas em consultas), a plataforma oferece uma experiência completa para pacientes, profissionais de saúde e administradores.
|
||||
|
||||
### Diferenciais
|
||||
|
||||
- **Zoe IA Assistant**: Assistente virtual inteligente para suporte aos usuários
|
||||
- **Interface Responsiva**: Design moderno e adaptável a qualquer dispositivo
|
||||
- **Autenticação Segura**: Sistema robusto com perfis diferenciados
|
||||
- **Performance**: Construído com Next.js 15 para máxima velocidade
|
||||
- **UX/UI Premium**: Interface limpa e profissional voltada para área da saúde
|
||||
|
||||
---
|
||||
|
||||
## Problema e Solução
|
||||
|
||||
### O Problema
|
||||
O **absenteísmo** (não comparecimento a consultas agendadas) é um problema crítico em clínicas e hospitais, causando:
|
||||
- Desperdício de tempo dos profissionais
|
||||
- Perda de receita para estabelecimentos
|
||||
- Redução da eficiência operacional
|
||||
- Impacto negativo no atendimento de outros pacientes
|
||||
|
||||
### Nossa Solução
|
||||
MEDIConnect oferece um sistema inteligente de gestão que:
|
||||
- Facilita o agendamento e reagendamento de consultas
|
||||
- Permite visualização clara da agenda para profissionais
|
||||
- Oferece assistência via IA para dúvidas e suporte
|
||||
|
||||
---
|
||||
|
||||
## Funcionalidades
|
||||
|
||||
### Para Pacientes
|
||||
- **Dashboard Personalizado**: Visão geral de consultas e exames
|
||||
- **Agendamento**: Sistema fácil de marcar consultas
|
||||
- **Resultados de Exames**: Acesso seguro a laudos e resultados
|
||||
- **Busca de Profissionais**: Encontre médicos por especialidade
|
||||
- **Zoe IA Assistant**: Tire dúvidas 24/7 com nossa assistente virtual
|
||||
|
||||
### Para Profissionais
|
||||
- **Dashboard Profissional**: Visão completa de atendimentos
|
||||
- **Editor de Laudos**: Crie e edite laudos médicos de forma rápida
|
||||
- **Gestão de Pacientes**: Acesse informações dos pacientes
|
||||
- **Agenda**: Visualização clara de consultas
|
||||
|
||||
### Para Administradores
|
||||
- **Dashboard Administrativo**: Métricas e estatísticas em tempo real
|
||||
- **Relatórios Detalhados**: Análise de comparecimento e absenteísmo
|
||||
- **Gestão Completa**: Gerencie pacientes, profissionais e agendamentos
|
||||
- **Painel de Controle**: Visão 360° da operação da clínica
|
||||
|
||||
---
|
||||
|
||||
## Tecnologias
|
||||
|
||||
### Frontend (Atual)
|
||||
- **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
|
||||
- **[React 19](https://react.dev/)** - Biblioteca JavaScript para interfaces
|
||||
- **[TypeScript](https://www.typescriptlang.org/)** - Tipagem estática para JavaScript
|
||||
- **[Tailwind CSS](https://tailwindcss.com/)** - Framework CSS utilitário
|
||||
- **[Shadcn/ui](https://ui.shadcn.com/)** - Componentes UI reutilizáveis
|
||||
- **[React Hook Form](https://react-hook-form.com/)** - Gerenciamento de formulários
|
||||
- **[Zod](https://zod.dev/)** - Validação de schemas
|
||||
- **[date-fns](https://date-fns.org/)** - Manipulação de datas
|
||||
|
||||
### Backend (Integrado)
|
||||
- **[Supabase](https://supabase.com/)** - Backend as a Service (PostgreSQL)
|
||||
- **Authentication** - Sistema de autenticação completo
|
||||
- **Storage** - Armazenamento de arquivos e documentos
|
||||
- **REST API** - Endpoints integrados para todas as funcionalidades
|
||||
|
||||
### Ferramentas de Desenvolvimento
|
||||
- **[ESLint](https://eslint.org/)** - Linter para código JavaScript/TypeScript
|
||||
- **[PostCSS](https://postcss.org/)** - Transformação de CSS
|
||||
- **[Autoprefixer](https://github.com/postcss/autoprefixer)** - Prefixos CSS automáticos
|
||||
|
||||
---
|
||||
|
||||
## Instalação
|
||||
|
||||
### Pré-requisitos
|
||||
|
||||
Certifique-se de ter instalado:
|
||||
|
||||
- **Node.js** 18.17 ou superior
|
||||
- **npm**
|
||||
- **Git**
|
||||
|
||||
### Passo a Passo
|
||||
|
||||
1. **Clone o repositório**
|
||||
|
||||
```bash
|
||||
git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
|
||||
cd susconecta
|
||||
```
|
||||
|
||||
2. **Instale as dependências**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Configuração de ambiente (desenvolvimento)**
|
||||
|
||||
> Observação: o projeto possui valores _fallback_ em `susconecta/lib/env-config.ts`, mas o recomendado é criar um arquivo `.env.local` não versionado com suas credenciais locais.
|
||||
|
||||
```env
|
||||
# Supabase
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://seu-projeto.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=pk_... (anon key)
|
||||
|
||||
# Aplicação
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3000
|
||||
NEXT_PUBLIC_API_URL=http://localhost:3000/api
|
||||
```
|
||||
|
||||
**Boas práticas de segurança**
|
||||
- Nunca exponha a `service_role` key no frontend.
|
||||
- Proteja operações sensíveis com Row-Level Security (RLS) no Supabase ou mova-as para rotas/Edge Functions server-side.
|
||||
- Não commite `.env.local` no repositório (adicione ao `.gitignore`).
|
||||
|
||||
4. **Inicie o servidor de desenvolvimento**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
5. **Acesse a aplicação**
|
||||
|
||||
Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
|
||||
|
||||
---
|
||||
|
||||
## Como Usar
|
||||
|
||||
### Navegação Principal
|
||||
|
||||
#### Página Inicial
|
||||
Acesse `/home` para conhecer a plataforma e suas funcionalidades.
|
||||
|
||||
#### Autenticação
|
||||
O sistema possui três níveis de acesso:
|
||||
|
||||
- **Pacientes**: `/login-paciente`
|
||||
- **Profissionais**: `/login-profissional`
|
||||
- **Administradores**: `/login-admin`
|
||||
|
||||
#### Funcionalidades por Perfil
|
||||
|
||||
**Como Paciente:**
|
||||
1. Faça login em `/login-paciente`
|
||||
2. Acesse seu dashboard em `/paciente`
|
||||
3. Agende consultas em `/consultas`
|
||||
4. Visualize resultados em `/paciente/resultados`
|
||||
5. Gerencie seu perfil em `/perfil`
|
||||
|
||||
**Como Profissional:**
|
||||
1. Faça login em `/login-profissional`
|
||||
2. Acesse seu dashboard em `/profissional`
|
||||
3. Gerencie sua agenda em `/agenda`
|
||||
4. Crie laudos em `/laudos-editor`
|
||||
5. Visualize pacientes em `/pacientes`
|
||||
|
||||
**Como Administrador:**
|
||||
1. Faça login em `/login-admin`
|
||||
2. Acesse o painel em `/dashboard`
|
||||
3. Visualize relatórios em `/dashboard/relatorios`
|
||||
4. Gerencie o sistema completo
|
||||
|
||||
---
|
||||
|
||||
## Fluxos de Usuário
|
||||
|
||||
### Fluxo de Agendamento (Paciente)
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Login Paciente] --> B[Dashboard]
|
||||
B --> C[Buscar Médico]
|
||||
C --> D[Selecionar Especialidade]
|
||||
D --> E[Escolher Horário]
|
||||
E --> F[Confirmar Agendamento]
|
||||
F --> G[Receber Confirmação]
|
||||
```
|
||||
|
||||
### Fluxo de Atendimento (Profissional)
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Login Profissional] --> B[Ver Agenda]
|
||||
B --> C[Realizar Consulta]
|
||||
C --> D[Criar Laudo]
|
||||
D --> E[Enviar para Paciente]
|
||||
E --> F[Atualizar Status]
|
||||
```
|
||||
|
||||
### Fluxo Administrativo
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Login Admin] --> B[Dashboard]
|
||||
B --> C[Visualizar Métricas]
|
||||
C --> D[Gerar Relatórios]
|
||||
D --> E[Analisar Absenteísmo]
|
||||
E --> F[Tomar Decisões]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Componentes Principais
|
||||
|
||||
### Zoe IA Assistant
|
||||
|
||||
Assistente virtual inteligente que oferece:
|
||||
- Suporte 24/7 aos usuários
|
||||
- Respostas a dúvidas frequentes
|
||||
- Upload de arquivos para análise
|
||||
- Interação por voz
|
||||
|
||||
**Arquivos:**
|
||||
- `components/ZoeIA/ai-assistant-interface.tsx`
|
||||
- `components/ZoeIA/voice-powered-orb.tsx`
|
||||
- `components/ZoeIA/demo.tsx`
|
||||
|
||||
### Sistema de Agendamento
|
||||
|
||||
Gerenciamento completo de consultas e exames:
|
||||
- Calendário interativo
|
||||
- Seleção de horários disponíveis
|
||||
- Confirmação automática
|
||||
- Lembretes e notificações
|
||||
|
||||
**Arquivos:**
|
||||
- `components/features/agendamento/`
|
||||
- `components/features/Calendario/`
|
||||
- `app/(main-routes)/consultas/`
|
||||
|
||||
### Editor de Laudos
|
||||
|
||||
Ferramenta profissional para criação de laudos médicos:
|
||||
- Interface intuitiva
|
||||
- Frases pré-definidas
|
||||
- Exportação em PDF
|
||||
|
||||
**Arquivos:**
|
||||
- `app/laudos-editor/`
|
||||
- `lib/laudo-exemplos.ts`
|
||||
- `lib/laudo-notification.ts`
|
||||
|
||||
### Dashboard Analytics
|
||||
|
||||
Painéis administrativos com:
|
||||
- Métricas em tempo real
|
||||
- Gráficos interativos
|
||||
- Relatórios de absenteísmo
|
||||
- Análise de desempenho
|
||||
|
||||
**Arquivos:**
|
||||
- `components/features/dashboard/`
|
||||
- `app/(main-routes)/dashboard/`
|
||||
- `lib/reportService.ts`
|
||||
|
||||
---
|
||||
|
||||
## Contribuindo
|
||||
|
||||
Contribuições são bem-vindas! Siga estes passos:
|
||||
|
||||
### 1. Fork o projeto
|
||||
|
||||
Clique no botão "Fork" no topo da página.
|
||||
|
||||
### 2. Clone seu fork
|
||||
|
||||
```bash
|
||||
git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
|
||||
cd susconecta
|
||||
```
|
||||
|
||||
### 3. Crie uma branch
|
||||
|
||||
```bash
|
||||
git checkout -b feature/nova-funcionalidade
|
||||
```
|
||||
|
||||
### 4. Faça suas alterações
|
||||
|
||||
Desenvolva sua funcionalidade seguindo os padrões do projeto.
|
||||
|
||||
### 5. Commit suas mudanças
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat: adiciona nova funcionalidade X"
|
||||
```
|
||||
|
||||
**Padrão de commits:**
|
||||
- `feat:` Nova funcionalidade
|
||||
- `fix:` Correção de bug
|
||||
- `docs:` Documentação
|
||||
- `style:` Formatação
|
||||
- `refactor:` Refatoração
|
||||
- `test:` Testes
|
||||
- `chore:` Manutenção
|
||||
|
||||
### 6. Push para seu fork
|
||||
|
||||
```bash
|
||||
git push origin feature/nova-funcionalidade
|
||||
```
|
||||
|
||||
### 7. Abra um Pull Request
|
||||
|
||||
Descreva suas mudanças detalhadamente.
|
||||
|
||||
---
|
||||
|
||||
## Licença
|
||||
|
||||
Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
|
||||
|
||||
## Contato
|
||||
|
||||
**MEDIConnect Team**
|
||||
|
||||
- Website: [mediconnect.com](https://mediconecta-app-liart.vercel.app/)
|
||||
- Email dos Desenvolvedores:
|
||||
- [Jonas Francisco](mailto:jonastom478@gmail.com)
|
||||
- [João Gustavo](mailto:jgcmendonca@gmail.com)
|
||||
- [Maria Gabrielly](mailto:maria.gabrielly221106@gmail.com)
|
||||
- [Pedro Gomes](mailto:pedrogomes5913@gmail.com)
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
|
||||
**Desenvolvido pelo squad 20**
|
||||
|
||||
*Transformando a gestão de saúde através da tecnologia*
|
||||
|
||||
[](https://nextjs.org/)
|
||||
|
||||
</div>
|
||||
@ -9,6 +9,7 @@ import {
|
||||
getUpcomingAppointments,
|
||||
getAppointmentsByDateRange,
|
||||
getNewUsersLastDays,
|
||||
getPendingReports,
|
||||
getDisabledUsers,
|
||||
getDoctorsAvailabilityToday,
|
||||
getPatientById,
|
||||
@ -17,7 +18,7 @@ import {
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { AlertCircle, Calendar, Users, Stethoscope, Clock, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
|
||||
import { AlertCircle, Calendar, Users, Stethoscope, Clock, FileText, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form';
|
||||
import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form';
|
||||
@ -48,6 +49,7 @@ export default function DashboardPage() {
|
||||
const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]);
|
||||
const [appointmentData, setAppointmentData] = useState<any[]>([]);
|
||||
const [newUsers, setNewUsers] = useState<any[]>([]);
|
||||
const [pendingReports, setPendingReports] = useState<any[]>([]);
|
||||
const [disabledUsers, setDisabledUsers] = useState<any[]>([]);
|
||||
const [doctors, setDoctors] = useState<Map<string, any>>(new Map());
|
||||
const [patients, setPatients] = useState<Map<string, any>>(new Map());
|
||||
@ -81,16 +83,18 @@ export default function DashboardPage() {
|
||||
});
|
||||
|
||||
// 2. Carrega dados dos widgets em paralelo
|
||||
const [upcomingAppts, appointmentDataRange, newUsersList, disabledUsersList] = await Promise.all([
|
||||
const [upcomingAppts, appointmentDataRange, newUsersList, pendingReportsList, disabledUsersList] = await Promise.all([
|
||||
getUpcomingAppointments(5),
|
||||
getAppointmentsByDateRange(7),
|
||||
getNewUsersLastDays(7),
|
||||
getPendingReports(5),
|
||||
getDisabledUsers(5),
|
||||
]);
|
||||
|
||||
setAppointments(upcomingAppts);
|
||||
setAppointmentData(appointmentDataRange);
|
||||
setNewUsers(newUsersList);
|
||||
setPendingReports(pendingReportsList);
|
||||
setDisabledUsers(disabledUsersList);
|
||||
|
||||
// 3. Busca detalhes de pacientes e médicos para as próximas consultas
|
||||
@ -260,7 +264,15 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Relatórios Pendentes</h3>
|
||||
<p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{pendingReports.length}</p>
|
||||
</div>
|
||||
<FileText className="h-6 sm:h-8 w-6 sm:w-8 text-orange-500 opacity-20 flex-shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */}
|
||||
@ -282,12 +294,17 @@ export default function DashboardPage() {
|
||||
<span className="hidden sm:inline">Novo Médico</span>
|
||||
<span className="sm:hidden">Médico</span>
|
||||
</Button>
|
||||
<Button onClick={() => router.push('/dashboard/relatorios')} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
|
||||
<FileText className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Ver Relatórios</span>
|
||||
<span className="sm:hidden">Relatórios</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. PRÓXIMAS CONSULTAS */}
|
||||
<div className="grid grid-cols-1 gap-4 md:gap-6">
|
||||
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
|
||||
<div className="lg:col-span-2 bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
|
||||
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2>
|
||||
{appointments.length > 0 ? (
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
@ -313,7 +330,28 @@ export default function DashboardPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* 5. RELATÓRIOS PENDENTES */}
|
||||
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
|
||||
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4 flex items-center gap-2">
|
||||
<FileText className="h-4 sm:h-5 w-4 sm:w-5" />
|
||||
<span className="truncate">Pendentes</span>
|
||||
</h2>
|
||||
{pendingReports.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{pendingReports.map(report => (
|
||||
<div key={report.id} className="p-2 sm:p-3 bg-muted rounded-lg hover:bg-muted/80 transition cursor-pointer text-xs sm:text-sm">
|
||||
<p className="font-medium text-foreground truncate">{report.order_number}</p>
|
||||
<p className="text-[10px] sm:text-xs text-muted-foreground truncate">{report.exam || 'Sem descrição'}</p>
|
||||
</div>
|
||||
))}
|
||||
<Button onClick={() => router.push('/dashboard/relatorios')} variant="ghost" className="w-full mt-2 hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm" size="sm">
|
||||
Ver Todos
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">Sem relatórios pendentes</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4. NOVOS USUÁRIOS */}
|
||||
|
||||
@ -2,11 +2,10 @@
|
||||
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react";
|
||||
import jsPDF from "jspdf";
|
||||
import html2canvas from "html2canvas";
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
|
||||
import {
|
||||
countAppointmentsToday,
|
||||
@ -31,51 +30,10 @@ const FALLBACK_MEDICOS = [
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
async function exportPDF(title: string, content: string, chartElementId?: string) {
|
||||
function exportPDF(title: string, content: string) {
|
||||
const doc = new jsPDF();
|
||||
let yPosition = 15;
|
||||
|
||||
// Add title
|
||||
doc.setFontSize(16);
|
||||
doc.setFont(undefined, "bold");
|
||||
doc.text(title, 15, yPosition);
|
||||
yPosition += 10;
|
||||
|
||||
// Add description/content
|
||||
doc.setFontSize(11);
|
||||
doc.setFont(undefined, "normal");
|
||||
const contentLines = doc.splitTextToSize(content, 180);
|
||||
doc.text(contentLines, 15, yPosition);
|
||||
yPosition += contentLines.length * 5 + 15;
|
||||
|
||||
// Capture chart if chartElementId is provided
|
||||
if (chartElementId) {
|
||||
try {
|
||||
const chartElement = document.getElementById(chartElementId);
|
||||
if (chartElement) {
|
||||
// Create a canvas from the chart element
|
||||
const canvas = await html2canvas(chartElement, {
|
||||
backgroundColor: "#ffffff",
|
||||
scale: 2,
|
||||
logging: false,
|
||||
});
|
||||
|
||||
// Convert canvas to image
|
||||
const imgData = canvas.toDataURL("image/png");
|
||||
const imgWidth = 180;
|
||||
const imgHeight = (canvas.height * imgWidth) / canvas.width;
|
||||
|
||||
// Add image to PDF
|
||||
doc.addImage(imgData, "PNG", 15, yPosition, imgWidth, imgHeight);
|
||||
yPosition += imgHeight + 10;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error capturing chart:", error);
|
||||
doc.text("(Erro ao capturar gráfico)", 15, yPosition);
|
||||
yPosition += 10;
|
||||
}
|
||||
}
|
||||
|
||||
doc.text(title, 10, 10);
|
||||
doc.text(content, 10, 20);
|
||||
doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
|
||||
}
|
||||
|
||||
@ -245,7 +203,7 @@ export default function RelatoriosPage() {
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto"
|
||||
onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")}
|
||||
onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}
|
||||
>
|
||||
<FileDown className="w-4 h-4 mr-1" /> Exportar PDF
|
||||
</Button>
|
||||
@ -253,17 +211,15 @@ export default function RelatoriosPage() {
|
||||
{loading ? (
|
||||
<div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</div>
|
||||
) : (
|
||||
<div id="chart-consultas">
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<BarChart data={consultasData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="periodo" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<BarChart data={consultasData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="periodo" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -273,10 +229,9 @@ export default function RelatoriosPage() {
|
||||
<div className="bg-card border border-border rounded-lg shadow p-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Pacientes Mais Atendidos</h2>
|
||||
<Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.", "table-pacientes")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
|
||||
<Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
|
||||
</div>
|
||||
<div id="table-pacientes">
|
||||
<table className="w-full text-sm mt-4">
|
||||
<table className="w-full text-sm mt-4">
|
||||
<thead>
|
||||
<tr className="text-muted-foreground">
|
||||
<th className="text-left font-medium">Paciente</th>
|
||||
@ -302,17 +257,15 @@ export default function RelatoriosPage() {
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Médicos mais produtivos */}
|
||||
<div className="bg-card border border-border rounded-lg shadow p-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Médicos Mais Produtivos</h2>
|
||||
<Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.", "table-medicos")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
|
||||
<Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
|
||||
</div>
|
||||
<div id="table-medicos">
|
||||
<table className="w-full text-sm mt-4">
|
||||
<table className="w-full text-sm mt-4">
|
||||
<thead>
|
||||
<tr className="text-muted-foreground">
|
||||
<th className="text-left font-medium">Médico</th>
|
||||
@ -338,7 +291,6 @@ export default function RelatoriosPage() {
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -844,27 +844,27 @@ export default function DoutoresPage() {
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Nome</Label>
|
||||
<span className="col-span-1 sm:col-span-3 font-medium">{viewingDoctor?.full_name}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Nome</Label>
|
||||
<span className="col-span-3 font-medium">{viewingDoctor?.full_name}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Especialidade</Label>
|
||||
<span className="col-span-1 sm:col-span-3">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Especialidade</Label>
|
||||
<span className="col-span-3">
|
||||
<Badge variant="outline">{viewingDoctor?.especialidade}</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">CRM</Label>
|
||||
<span className="col-span-1 sm:col-span-3">{viewingDoctor?.crm}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">CRM</Label>
|
||||
<span className="col-span-3">{viewingDoctor?.crm}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Email</Label>
|
||||
<span className="col-span-1 sm:col-span-3">{viewingDoctor?.email}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Email</Label>
|
||||
<span className="col-span-3">{viewingDoctor?.email}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Telefone</Label>
|
||||
<span className="col-span-1 sm:col-span-3">{viewingDoctor?.telefone}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Telefone</Label>
|
||||
<span className="col-span-3">{viewingDoctor?.telefone}</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
|
||||
@ -539,27 +539,27 @@ export default function PacientesPage() {
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Nome</Label>
|
||||
<span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Nome</Label>
|
||||
<span className="col-span-3 font-medium">{viewingPatient.full_name}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">CPF</Label>
|
||||
<span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">CPF</Label>
|
||||
<span className="col-span-3">{viewingPatient.cpf}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Telefone</Label>
|
||||
<span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Telefone</Label>
|
||||
<span className="col-span-3">{viewingPatient.phone_mobile}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Endereço</Label>
|
||||
<span className="col-span-1 sm:col-span-3">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Endereço</Label>
|
||||
<span className="col-span-3">
|
||||
{`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4">
|
||||
<Label className="text-left sm:text-right">Observações</Label>
|
||||
<span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Observações</Label>
|
||||
<span className="col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
|
||||
@ -604,6 +604,17 @@ export default function LaudosEditorPage() {
|
||||
<FileText className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
|
||||
Editor
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTabChange('imagens')}
|
||||
className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||
activeTab === 'imagens'
|
||||
? 'border-blue-500 text-blue-600'
|
||||
: 'border-transparent text-gray-600 dark:text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
<Upload className="w-3 sm:w-4 h-3 sm:h-4 inline mr-1" />
|
||||
Imagens ({imagens.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTabChange('campos')}
|
||||
className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||
@ -766,6 +777,48 @@ export default function LaudosEditorPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Imagens Tab */}
|
||||
{activeTab === 'imagens' && (
|
||||
<div className="flex-1 p-2 sm:p-3 md:p-4 overflow-y-auto">
|
||||
<div className="mb-3 sm:mb-4">
|
||||
<Label htmlFor="upload-images" className="text-xs sm:text-sm">
|
||||
Upload de Imagens
|
||||
</Label>
|
||||
<Input
|
||||
id="upload-images"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,.pdf"
|
||||
onChange={handleImageUpload}
|
||||
className="mt-1 sm:mt-2 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3 md:gap-4">
|
||||
{imagens.map((img) => (
|
||||
<div key={img.id} className="border border-border rounded-lg p-1.5 sm:p-2">
|
||||
{img.type.startsWith('image/') ? (
|
||||
<img src={img.url} alt={img.name} className="w-full h-20 sm:h-24 md:h-28 object-cover rounded" />
|
||||
) : (
|
||||
<div className="w-full h-20 sm:h-24 md:h-28 bg-muted rounded flex items-center justify-center">
|
||||
<FileText className="w-6 sm:w-8 h-6 sm:h-8 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">{img.name}</p>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="w-full mt-1 text-xs h-8"
|
||||
onClick={() => setImagens((prev) => prev.filter((i) => i.id !== img.id))}
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Campos Tab */}
|
||||
{activeTab === 'campos' && (
|
||||
<div className="flex-1 p-2 sm:p-3 md:p-4 space-y-2 sm:space-y-3 md:space-y-4 overflow-y-auto">
|
||||
|
||||
@ -236,20 +236,7 @@ export default function EditarLaudoPage() {
|
||||
useEffect(() => {
|
||||
if (content && editorRef.current && !loading) {
|
||||
console.log('[EditarLaudoPage] Injecting content into editor, length:', content.length);
|
||||
// Só injetar se o conteúdo do editor estiver vazio ou muito diferente
|
||||
const currentContent = editorRef.current.innerHTML;
|
||||
if (!currentContent || currentContent.length === 0) {
|
||||
editorRef.current.innerHTML = content;
|
||||
// Mover cursor para o final
|
||||
const range = document.createRange();
|
||||
const sel = window.getSelection();
|
||||
if (editorRef.current.childNodes.length > 0) {
|
||||
range.selectNodeContents(editorRef.current);
|
||||
range.collapse(false); // false = colapsar no final
|
||||
sel?.removeAllRanges();
|
||||
sel?.addRange(range);
|
||||
}
|
||||
}
|
||||
editorRef.current.innerHTML = content;
|
||||
}
|
||||
}, [content, loading]);
|
||||
|
||||
@ -597,10 +584,7 @@ export default function EditarLaudoPage() {
|
||||
<div
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
onInput={(e) => {
|
||||
// Capturar conteúdo sem perder posição do cursor
|
||||
setContent(e.currentTarget.innerHTML);
|
||||
}}
|
||||
onInput={(e) => setContent(e.currentTarget.innerHTML)}
|
||||
onPaste={(e) => {
|
||||
e.preventDefault();
|
||||
const text = e.clipboardData.getData('text/plain');
|
||||
|
||||
@ -5,7 +5,7 @@ import { useRouter, useParams } from 'next/navigation'
|
||||
import { useTheme } from 'next-themes'
|
||||
import Image from 'next/image'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ArrowLeft, Printer, Download } from 'lucide-react'
|
||||
import { ArrowLeft, Printer, Download, MoreVertical } from 'lucide-react'
|
||||
import { buscarRelatorioPorId, getDoctorById, buscarMedicosPorIds, buscarPacientePorId } from '@/lib/api'
|
||||
import { ENV_CONFIG } from '@/lib/env-config'
|
||||
import ProtectedRoute from '@/components/shared/ProtectedRoute'
|
||||
@ -355,6 +355,18 @@ export default function LaudoPage() {
|
||||
>
|
||||
<Printer className="w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Mais opções"
|
||||
className={`${
|
||||
isDark
|
||||
? 'text-slate-300 hover:bg-slate-700 hover:text-white'
|
||||
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
|
||||
}`}
|
||||
>
|
||||
<MoreVertical className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1762,7 +1762,7 @@ export default function PacientePage() {
|
||||
</div>
|
||||
|
||||
{/* Grid de 3 colunas (2 + 1) */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
|
||||
{/* Coluna Esquerda - Informações Pessoais */}
|
||||
<div className="lg:col-span-2 space-y-4 sm:space-y-5 md:space-y-6">
|
||||
{/* Informações Pessoais */}
|
||||
@ -1888,20 +1888,31 @@ export default function PacientePage() {
|
||||
<div className="border border-border rounded-lg p-3 sm:p-4 md:p-6">
|
||||
<h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3>
|
||||
|
||||
<div className="flex flex-col items-center gap-3 sm:gap-4">
|
||||
<Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28">
|
||||
<AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-xl md:text-2xl font-bold">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs sm:text-sm md:text-base text-muted-foreground">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
|
||||
</p>
|
||||
{isEditingProfile ? (
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
<UploadAvatar
|
||||
userId={profileData.id}
|
||||
currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
|
||||
onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
|
||||
userName={profileData.nome}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-3 sm:gap-4">
|
||||
<Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28">
|
||||
<AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-xl md:text-2xl font-bold">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs sm:text-sm md:text-base text-muted-foreground">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1914,35 +1925,35 @@ export default function PacientePage() {
|
||||
<ProtectedRoute requiredUserType={["paciente"]}>
|
||||
<div className="container mx-auto px-2 sm:px-4 py-6 sm:py-8">
|
||||
{/* Header com informações do paciente */}
|
||||
<header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-2 sm:p-3 md:p-4 mb-4 sm:mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
|
||||
<div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
|
||||
<header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-4 mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{/* Logo MEDIConnect */}
|
||||
<div className="flex items-center gap-2 mr-2 sm:mr-3 shrink-0">
|
||||
<div className="w-8 h-8 sm:w-9 sm:h-9 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="flex items-center gap-2 mr-2 sm:mr-4">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-primary rounded-lg flex items-center justify-center shrink-0">
|
||||
<Stethoscope className="w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<span className="text-base sm:text-sm font-semibold text-foreground hidden sm:inline">
|
||||
<span className="text-base sm:text-lg font-semibold text-foreground hidden sm:inline">
|
||||
MEDIConnect
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-border hidden sm:block"></div>
|
||||
<div className="h-8 w-px bg-border hidden sm:block"></div>
|
||||
|
||||
<Avatar className="h-10 w-10 sm:h-10 sm:w-10 shrink-0">
|
||||
<Avatar className="h-10 w-10 sm:h-12 sm:w-12 md:h-12 md:w-12">
|
||||
<AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
|
||||
<AvatarFallback className="bg-primary text-white font-bold text-xs sm:text-sm">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
|
||||
<AvatarFallback className="bg-primary text-white font-bold text-sm sm:text-base">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<span className="text-xs text-muted-foreground truncate">Conta do paciente</span>
|
||||
<span className="font-bold text-xs sm:text-sm leading-tight truncate">{profileData.nome || 'Paciente'}</span>
|
||||
<span className="text-xs text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="text-xs sm:text-sm md:text-sm text-muted-foreground">Conta do paciente</span>
|
||||
<span className="font-bold text-sm sm:text-base md:text-lg leading-none">{profileData.nome || 'Paciente'}</span>
|
||||
<span className="text-xs sm:text-sm md:text-sm text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto shrink-0">
|
||||
<div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
|
||||
<SimpleThemeToggle />
|
||||
<Button asChild variant="outline" className="hover:bg-blue-500 hover:text-white transition-colors flex-1 sm:flex-none text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3">
|
||||
<Button asChild variant="outline" className="hover:bg-primary! hover:text-white! hover:border-primary! transition-colors flex-1 sm:flex-none text-xs sm:text-sm">
|
||||
<Link href="/">
|
||||
<Home className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">Início</span>
|
||||
<Home className="h-3 w-3 sm:h-4 sm:w-4 mr-1" /> Início
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
@ -1950,9 +1961,9 @@ export default function PacientePage() {
|
||||
variant="outline"
|
||||
aria-label={strings.sair}
|
||||
disabled={loading}
|
||||
className="text-destructive border-destructive hover:bg-destructive/20 hover:text-destructive transition-colors text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3"
|
||||
className="text-destructive border-destructive hover:bg-destructive! hover:text-white! hover:border-destructive! transition-colors"
|
||||
>
|
||||
<LogOut className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">{strings.sair}</span>
|
||||
<LogOut className="h-4 w-4 mr-1" /> {strings.sair}
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -1030,11 +1030,11 @@ export default function ResultadosClient() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 w-full sm:w-auto">
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Primeira</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Anterior</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Primeira</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Anterior</Button>
|
||||
<span className="text-sm text-muted-foreground">Página {currentPage} de {totalPages}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Próxima</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Última</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Próxima</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Última</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -9,7 +9,7 @@ import { useAuth } from "@/hooks/useAuth";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useAvatarUrl } from "@/hooks/useAvatarUrl";
|
||||
import { UploadAvatar } from '@/components/ui/upload-avatar';
|
||||
import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico, listarDisponibilidades, DoctorAvailability, deletarDisponibilidade, listarExcecoes, DoctorException, deletarExcecao } from "@/lib/api";
|
||||
import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico } from "@/lib/api";
|
||||
import { ENV_CONFIG } from '@/lib/env-config';
|
||||
import { useReports } from "@/hooks/useReports";
|
||||
import { CreateReportData } from "@/types/report-types";
|
||||
@ -19,8 +19,6 @@ import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select";
|
||||
import AvailabilityForm from '@/components/features/forms/availability-form';
|
||||
import ExceptionForm from '@/components/features/forms/exception-form';
|
||||
import { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
|
||||
import {
|
||||
Table,
|
||||
@ -67,29 +65,6 @@ const colorsByType = {
|
||||
Oftalmologia: "#2ecc71"
|
||||
};
|
||||
|
||||
// Função para traduzir dias da semana
|
||||
function translateWeekday(w?: string) {
|
||||
if (!w) return '';
|
||||
const key = w.toString().toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[^a-z0-9]/g, '');
|
||||
const map: Record<string, string> = {
|
||||
'segunda': 'Segunda',
|
||||
'terca': 'Terça',
|
||||
'quarta': 'Quarta',
|
||||
'quinta': 'Quinta',
|
||||
'sexta': 'Sexta',
|
||||
'sabado': 'Sábado',
|
||||
'domingo': 'Domingo',
|
||||
'monday': 'Segunda',
|
||||
'tuesday': 'Terça',
|
||||
'wednesday': 'Quarta',
|
||||
'thursday': 'Quinta',
|
||||
'friday': 'Sexta',
|
||||
'saturday': 'Sábado',
|
||||
'sunday': 'Domingo',
|
||||
};
|
||||
return map[key] ?? w;
|
||||
}
|
||||
|
||||
// Helpers para normalizar dados de paciente (suporta schema antigo e novo)
|
||||
const getPatientName = (p: any) => p?.full_name ?? p?.nome ?? '';
|
||||
const getPatientCpf = (p: any) => p?.cpf ?? '';
|
||||
@ -157,17 +132,6 @@ const ProfissionalPage = () => {
|
||||
const [isEditingProfile, setIsEditingProfile] = useState(false);
|
||||
const [doctorId, setDoctorId] = useState<string | null>(null);
|
||||
|
||||
// Estados para disponibilidades e exceções do médico logado
|
||||
const [availabilities, setAvailabilities] = useState<DoctorAvailability[]>([]);
|
||||
const [exceptions, setExceptions] = useState<DoctorException[]>([]);
|
||||
const [availabilitiesForCreate, setAvailabilitiesForCreate] = useState<DoctorAvailability[]>([]);
|
||||
const [availLoading, setAvailLoading] = useState(false);
|
||||
const [exceptLoading, setExceptLoading] = useState(false);
|
||||
const [editingAvailability, setEditingAvailability] = useState<DoctorAvailability | null>(null);
|
||||
const [editingException, setEditingException] = useState<DoctorException | null>(null);
|
||||
const [showAvailabilityForm, setShowAvailabilityForm] = useState(false);
|
||||
const [showExceptionForm, setShowExceptionForm] = useState(false);
|
||||
|
||||
// Hook para carregar automaticamente o avatar do médico
|
||||
const { avatarUrl: retrievedAvatarUrl } = useAvatarUrl(doctorId);
|
||||
// Removemos o placeholder extenso — inicializamos com valores minimalistas e vazios.
|
||||
@ -322,48 +286,6 @@ const ProfissionalPage = () => {
|
||||
}
|
||||
}, [retrievedAvatarUrl]);
|
||||
|
||||
// Carregar disponibilidades e exceções do médico logado
|
||||
const reloadAvailabilities = async (medId?: string) => {
|
||||
const id = medId || doctorId;
|
||||
if (!id) return;
|
||||
try {
|
||||
setAvailLoading(true);
|
||||
const avails = await listarDisponibilidades({ doctorId: id, active: true });
|
||||
setAvailabilities(Array.isArray(avails) ? avails : []);
|
||||
} catch (e) {
|
||||
console.warn('[ProfissionalPage] Erro ao carregar disponibilidades:', e);
|
||||
setAvailabilities([]);
|
||||
} finally {
|
||||
setAvailLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const reloadExceptions = async (medId?: string) => {
|
||||
const id = medId || doctorId;
|
||||
if (!id) return;
|
||||
try {
|
||||
setExceptLoading(true);
|
||||
console.log('[ProfissionalPage] Recarregando exceções para médico:', id);
|
||||
const excepts = await listarExcecoes({ doctorId: id });
|
||||
console.log('[ProfissionalPage] Exceções carregadas:', excepts);
|
||||
setExceptions(Array.isArray(excepts) ? excepts : []);
|
||||
} catch (e) {
|
||||
console.warn('[ProfissionalPage] Erro ao carregar exceções:', e);
|
||||
setExceptions([]);
|
||||
} finally {
|
||||
setExceptLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Carrega disponibilidades quando doctorId muda
|
||||
useEffect(() => {
|
||||
if (doctorId) {
|
||||
reloadAvailabilities(doctorId);
|
||||
reloadExceptions(doctorId);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [doctorId]);
|
||||
|
||||
|
||||
// Estados para campos principais da consulta
|
||||
const [consultaAtual, setConsultaAtual] = useState({
|
||||
@ -1294,56 +1216,14 @@ const ProfissionalPage = () => {
|
||||
// helper to load laudos for the patients assigned to the logged-in user
|
||||
const loadAssignedLaudos = async () => {
|
||||
try {
|
||||
// Primeiro, tenta carregar laudos criados pelo próprio médico
|
||||
console.log('[LaudoManager] Tentando carregar laudos criados pelo médico:', user?.id);
|
||||
try {
|
||||
const reportsMod = await import('@/lib/reports');
|
||||
const allMyReports = await loadReports();
|
||||
|
||||
if (Array.isArray(allMyReports) && allMyReports.length > 0) {
|
||||
// Filtrar apenas os criados por mim
|
||||
const createdByMe = allMyReports.filter((r: any) => {
|
||||
const creator = ((r.created_by ?? r.executante ?? r.createdBy) || '').toString();
|
||||
return user?.id && creator && creator === user.id;
|
||||
});
|
||||
|
||||
if (createdByMe.length > 0) {
|
||||
console.log('[LaudoManager] Encontrados', createdByMe.length, 'laudos criados pelo médico');
|
||||
const enriched = await (async (reportsArr: any[]) => {
|
||||
if (!reportsArr || !reportsArr.length) return reportsArr;
|
||||
const pids = reportsArr.map(r => String(getReportPatientId(r))).filter(Boolean);
|
||||
if (!pids.length) return reportsArr;
|
||||
try {
|
||||
const patients = await buscarPacientesPorIds(pids);
|
||||
const map = new Map((patients || []).map((p: any) => [String(p.id), p]));
|
||||
return reportsArr.map((r: any) => {
|
||||
const pid = String(getReportPatientId(r));
|
||||
return { ...r, paciente: r.paciente ?? map.get(pid) ?? r.paciente } as any;
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('[LaudoManager] Erro ao enriquecer pacientes:', e);
|
||||
return reportsArr;
|
||||
}
|
||||
})(createdByMe);
|
||||
setLaudos(enriched || []);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[LaudoManager] erro ao carregar laudos criados pelo médico:', e);
|
||||
}
|
||||
|
||||
// Fallback: carregar laudos de pacientes atribuídos
|
||||
const assignments = await import('@/lib/assignment').then(m => m.listAssignmentsForUser(user?.id || ''));
|
||||
const patientIds = Array.isArray(assignments) ? assignments.map(a => String(a.patient_id)).filter(Boolean) : [];
|
||||
|
||||
if (patientIds.length === 0) {
|
||||
console.log('[LaudoManager] Nenhum paciente atribuído, laudos vazios');
|
||||
setLaudos([]);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[LaudoManager] Carregando laudos de', patientIds.length, 'pacientes atribuídos');
|
||||
try {
|
||||
const reportsMod = await import('@/lib/reports');
|
||||
if (typeof reportsMod.listarRelatoriosPorPacientes === 'function') {
|
||||
@ -1435,7 +1315,7 @@ const ProfissionalPage = () => {
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[LaudoManager] erro ao carregar laudos:', e);
|
||||
console.warn('[LaudoManager] erro ao carregar laudos para pacientes atribuídos:', e);
|
||||
setLaudos(reports || []);
|
||||
}
|
||||
};
|
||||
@ -2311,6 +2191,32 @@ const ProfissionalPage = () => {
|
||||
<FileText className="w-4 h-4 inline mr-1" />
|
||||
Editor
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("imagens")}
|
||||
className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||
activeTab === "imagens"
|
||||
? "border-blue-500 text-blue-600"
|
||||
: "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: activeTab === "imagens" ? undefined : "transparent"
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (activeTab !== "imagens") {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
e.currentTarget.style.color = "#4B5563";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (activeTab !== "imagens") {
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
e.currentTarget.style.color = "#4B5563";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Upload className="w-4 h-4 inline mr-1" />
|
||||
Imagens ({imagens.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("campos")}
|
||||
className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||
@ -2453,6 +2359,50 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "imagens" && (
|
||||
<div className="flex-1 p-2 sm:p-4 overflow-y-auto">
|
||||
<div className="mb-3 sm:mb-4">
|
||||
<Label htmlFor="upload-images" className="text-xs sm:text-sm">Upload de Imagens</Label>
|
||||
<Input
|
||||
id="upload-images"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,.pdf"
|
||||
onChange={handleImageUpload}
|
||||
className="mt-1 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4">
|
||||
{imagens.map((img) => (
|
||||
<div key={img.id} className="border border-border rounded-lg p-1.5 sm:p-2">
|
||||
{img.type.startsWith('image/') ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={img.url}
|
||||
alt={img.name}
|
||||
className="w-full h-24 sm:h-32 object-cover rounded"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-24 sm:h-32 bg-muted rounded flex items-center justify-center">
|
||||
<FileText className="w-6 sm:w-8 h-6 sm:h-8 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">{img.name}</p>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="w-full mt-1 text-xs"
|
||||
onClick={() => setImagens(prev => prev.filter(i => i.id !== img.id))}
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "campos" && (
|
||||
<div className="flex-1 p-2 sm:p-4 space-y-2 sm:space-y-4 overflow-y-auto">
|
||||
<div>
|
||||
@ -2806,178 +2756,7 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderDisponibilidadesSection = () => {
|
||||
// Filtrar apenas a primeira disponibilidade de cada dia da semana
|
||||
const availabilityByDay = new Map<string, DoctorAvailability>();
|
||||
(availabilities || []).forEach((a) => {
|
||||
const day = String(a.weekday ?? '').toLowerCase();
|
||||
if (!availabilityByDay.has(day)) {
|
||||
availabilityByDay.set(day, a);
|
||||
}
|
||||
});
|
||||
let filteredAvailabilities = Array.from(availabilityByDay.values());
|
||||
|
||||
// Ordenar por dia da semana (Segunda a Domingo)
|
||||
filteredAvailabilities = filteredAvailabilities.sort((a, b) => {
|
||||
const weekdayOrder: Record<string, number> = {
|
||||
'segunda': 1, 'segunda-feira': 1, 'mon': 1, 'monday': 1, '1': 1,
|
||||
'terca': 2, 'terça': 2, 'terça-feira': 2, 'tue': 2, 'tuesday': 2, '2': 2,
|
||||
'quarta': 3, 'quarta-feira': 3, 'wed': 3, 'wednesday': 3, '3': 3,
|
||||
'quinta': 4, 'quinta-feira': 4, 'thu': 4, 'thursday': 4, '4': 4,
|
||||
'sexta': 5, 'sexta-feira': 5, 'fri': 5, 'friday': 5, '5': 5,
|
||||
'sabado': 6, 'sábado': 6, 'sat': 6, 'saturday': 6, '6': 6,
|
||||
'domingo': 7, 'dom': 7, 'sun': 7, 'sunday': 7, '0': 7, '7': 7
|
||||
};
|
||||
|
||||
const getWeekdayOrder = (weekday: any) => {
|
||||
if (typeof weekday === 'number') return weekday === 0 ? 7 : weekday;
|
||||
const normalized = String(weekday).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
|
||||
return weekdayOrder[normalized] || 999;
|
||||
};
|
||||
|
||||
return getWeekdayOrder(a.weekday) - getWeekdayOrder(b.weekday);
|
||||
});
|
||||
|
||||
// Filtrar apenas a primeira exceção de cada data
|
||||
const exceptionByDate = new Map<string, DoctorException>();
|
||||
(exceptions || []).forEach((ex) => {
|
||||
// Alguns backends/versões usam nomes diferentes para a data da exceção.
|
||||
// Fazemos cast para any ao verificar campos legados para satisfazer o tipo DoctorException.
|
||||
const date = String(((ex as any).exception_date) ?? ((ex as any).exceptionDate) ?? ex.date ?? '');
|
||||
if (!exceptionByDate.has(date)) {
|
||||
exceptionByDate.set(date, ex);
|
||||
}
|
||||
});
|
||||
const filteredExceptions = Array.from(exceptionByDate.values());
|
||||
|
||||
return (
|
||||
<section className="bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-6 w-full">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
|
||||
<h2 className="text-xl sm:text-2xl font-bold">Minhas Disponibilidades</h2>
|
||||
<div className="flex gap-2 w-full sm:w-auto">
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex-1 sm:flex-initial bg-blue-600 hover:bg-blue-700 text-xs sm:text-sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const list = await listarDisponibilidades({ doctorId: doctorId!, active: true });
|
||||
setAvailabilitiesForCreate(list || []);
|
||||
setEditingAvailability(null);
|
||||
setShowAvailabilityForm(true);
|
||||
} catch (e) {
|
||||
console.warn('Erro ao carregar disponibilidades:', e);
|
||||
setAvailabilitiesForCreate([]);
|
||||
setEditingAvailability(null);
|
||||
setShowAvailabilityForm(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
+ Disponibilidade
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disponibilidades */}
|
||||
{availLoading ? (
|
||||
<div className="text-sm text-muted-foreground p-4">Carregando disponibilidades…</div>
|
||||
) : filteredAvailabilities && filteredAvailabilities.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{filteredAvailabilities.map((a) => (
|
||||
<div key={String(a.id)} className="p-2 border rounded flex justify-between items-start">
|
||||
<div>
|
||||
<div className="font-medium">{translateWeekday(a.weekday)} • {a.start_time} — {a.end_time}</div>
|
||||
<div className="text-xs text-muted-foreground">Duração: {a.slot_minutes} min • Tipo: {a.appointment_type || '—'} • {a.active ? 'Ativa' : 'Inativa'}</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setEditingAvailability(a);
|
||||
setShowAvailabilityForm(true);
|
||||
}}
|
||||
className="hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
Editar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (!confirm('Excluir esta disponibilidade?')) return;
|
||||
try {
|
||||
await deletarDisponibilidade(String(a.id));
|
||||
reloadAvailabilities();
|
||||
toast({ title: 'Disponibilidade excluída', variant: 'default' });
|
||||
} catch (e) {
|
||||
console.warn('Erro ao deletar disponibilidade:', e);
|
||||
alert((e as any)?.message || 'Erro ao deletar disponibilidade');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Excluir
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground p-4 border rounded-lg bg-muted/50">
|
||||
Nenhuma disponibilidade cadastrada.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Exceções */}
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg sm:text-xl font-bold mb-4">Exceções (Bloqueios/Liberações)</h3>
|
||||
{exceptLoading ? (
|
||||
<div className="text-sm text-muted-foreground p-4">Carregando exceções…</div>
|
||||
) : filteredExceptions && filteredExceptions.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{filteredExceptions.map((ex) => (
|
||||
<div key={String(ex.id)} className="p-3 border rounded flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm sm:text-base">
|
||||
{(() => {
|
||||
try {
|
||||
// Normaliza possíveis nomes de campo (exception_date, exceptionDate, date) e formata com fallback
|
||||
const dateRaw = (ex as any).exception_date ?? (ex as any).exceptionDate ?? ex.date ?? '';
|
||||
const parts = String(dateRaw).split('-');
|
||||
if (parts.length >= 3) {
|
||||
const [y, m, d] = parts;
|
||||
return `${d}/${m}/${y}`;
|
||||
}
|
||||
// fallback: tentar parse ISO/locale
|
||||
const dt = new Date(String(dateRaw));
|
||||
if (!isNaN(dt.getTime())) {
|
||||
return `${String(dt.getDate()).padStart(2, '0')}/${String(dt.getMonth() + 1).padStart(2, '0')}/${dt.getFullYear()}`;
|
||||
}
|
||||
return String(dateRaw);
|
||||
} catch (e) {
|
||||
return ((ex as any).exception_date ?? (ex as any).exceptionDate ?? ex.date) as any;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Tipo: {(ex as any).kind || 'bloqueio'} • Motivo: {(ex as any).reason || '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 ml-2">
|
||||
{/* Sem ações para exceções */}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground p-4 border rounded-lg bg-muted/50">
|
||||
Nenhuma exceção cadastrada.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const renderPerfilSection = () => (
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-4 sm:gap-6 px-0 py-4 sm:py-8 md:px-4">
|
||||
{/* Header com Título e Botão */}
|
||||
@ -3177,21 +2956,42 @@ const ProfissionalPage = () => {
|
||||
<h3 className="text-base sm:text-lg font-semibold mb-4">Foto do Perfil</h3>
|
||||
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Avatar className="h-20 w-20 sm:h-24 sm:w-24">
|
||||
{(profileData as any).fotoUrl ? (
|
||||
<AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} />
|
||||
) : (
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-2xl font-bold">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
{isEditingProfile ? (
|
||||
<UploadAvatar
|
||||
userId={String(doctorId || (user && (user as any).id) || '')}
|
||||
currentAvatarUrl={(profileData as any).fotoUrl}
|
||||
userName={(profileData as any).nome}
|
||||
onAvatarChange={async (newUrl: string) => {
|
||||
try {
|
||||
setProfileData((prev) => ({ ...prev, fotoUrl: newUrl }));
|
||||
// Foto foi salva no Supabase Storage - atualizar apenas o estado local
|
||||
// Para persistir no banco, o usuário deve clicar em "Salvar" após isso
|
||||
try { toast({ title: 'Foto enviada', description: 'Clique em "Salvar" para confirmar as alterações.', variant: 'default' }); } catch (e) { /* ignore toast errors */ }
|
||||
} catch (err) {
|
||||
console.error('[ProfissionalPage] erro ao processar upload de foto:', err);
|
||||
try { toast({ title: 'Erro ao processar foto', description: (err as any)?.message || 'Falha ao processar a foto do perfil.', variant: 'destructive' }); } catch (e) {}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Avatar className="h-20 w-20 sm:h-24 sm:w-24">
|
||||
{(profileData as any).fotoUrl ? (
|
||||
<AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} />
|
||||
) : (
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-2xl font-bold">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3232,8 +3032,6 @@ const ProfissionalPage = () => {
|
||||
);
|
||||
case 'laudos':
|
||||
return renderLaudosSection();
|
||||
case 'disponibilidades':
|
||||
return renderDisponibilidadesSection();
|
||||
case 'comunicacao':
|
||||
return renderComunicacaoSection();
|
||||
case 'perfil':
|
||||
@ -3370,17 +3168,6 @@ const ProfissionalPage = () => {
|
||||
<FileText className="mr-2 h-4 w-4" />
|
||||
Laudos
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeSection === 'disponibilidades' ? 'default' : 'ghost'}
|
||||
className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
|
||||
onClick={() => {
|
||||
setActiveSection('disponibilidades');
|
||||
setSidebarOpen(false);
|
||||
}}
|
||||
>
|
||||
<Clock className="mr-2 h-4 w-4" />
|
||||
Disponibilidades
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeSection === 'comunicacao' ? 'default' : 'ghost'}
|
||||
className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
|
||||
@ -3417,32 +3204,7 @@ const ProfissionalPage = () => {
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* AvailabilityForm para criar/editar disponibilidades */}
|
||||
{showAvailabilityForm && (
|
||||
<AvailabilityForm
|
||||
open={showAvailabilityForm}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setShowAvailabilityForm(false);
|
||||
setEditingAvailability(null);
|
||||
setAvailabilitiesForCreate([]);
|
||||
}
|
||||
}}
|
||||
doctorId={editingAvailability?.doctor_id ?? doctorId}
|
||||
availability={editingAvailability}
|
||||
existingAvailabilities={availabilitiesForCreate}
|
||||
mode={editingAvailability ? "edit" : "create"}
|
||||
onSaved={(saved) => {
|
||||
console.log('Disponibilidade salva', saved);
|
||||
setEditingAvailability(null);
|
||||
setShowAvailabilityForm(false);
|
||||
setAvailabilitiesForCreate([]);
|
||||
reloadAvailabilities();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Popup antigo (manter para compatibilidade) */}
|
||||
{}
|
||||
{showPopup && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
||||
import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@/components/ui/alert-dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@ -46,14 +46,12 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
|
||||
};
|
||||
|
||||
// Get list of already used weekdays (excluding current one in edit mode)
|
||||
const usedWeekdays = useMemo(() => {
|
||||
return new Set(
|
||||
(existingAvailabilities || [])
|
||||
.filter(a => mode === 'edit' ? a.id !== availability?.id : true)
|
||||
.map(a => normalizeWeekdayForComparison(a.weekday))
|
||||
.filter(Boolean)
|
||||
);
|
||||
}, [existingAvailabilities, mode, availability?.id]);
|
||||
const usedWeekdays = new Set(
|
||||
(existingAvailabilities || [])
|
||||
.filter(a => mode === 'edit' ? a.id !== availability?.id : true)
|
||||
.map(a => normalizeWeekdayForComparison(a.weekday))
|
||||
.filter(Boolean)
|
||||
);
|
||||
|
||||
// When editing, populate state from availability prop
|
||||
useEffect(() => {
|
||||
|
||||
@ -28,19 +28,6 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
|
||||
const [showDatePicker, setShowDatePicker] = useState(false)
|
||||
const { toast } = useToast()
|
||||
|
||||
// Resetar form quando dialog fecha
|
||||
const handleOpenChange = (newOpen: boolean) => {
|
||||
if (!newOpen) {
|
||||
setDate('')
|
||||
setStartTime('')
|
||||
setEndTime('')
|
||||
setKind('bloqueio')
|
||||
setReason('')
|
||||
setShowDatePicker(false)
|
||||
}
|
||||
onOpenChange(newOpen)
|
||||
}
|
||||
|
||||
async function handleSubmit(e?: React.FormEvent) {
|
||||
e?.preventDefault()
|
||||
if (!doctorId) {
|
||||
@ -66,7 +53,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
|
||||
const saved = await criarExcecao(payload)
|
||||
toast({ title: 'Exceção criada', description: `${payload.date} • ${kind}`, variant: 'default' })
|
||||
onSaved?.(saved)
|
||||
handleOpenChange(false)
|
||||
onOpenChange(false)
|
||||
} catch (err: any) {
|
||||
console.error('Erro ao criar exceção:', err)
|
||||
toast({ title: 'Erro', description: err?.message || String(err), variant: 'destructive' })
|
||||
@ -76,7 +63,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Criar exceção</DialogTitle>
|
||||
@ -116,7 +103,6 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
|
||||
mode="single"
|
||||
selected={date ? (() => {
|
||||
try {
|
||||
// Parse como local date para compatibilidade com Calendar
|
||||
const [y, m, d] = String(date).split('-').map(Number);
|
||||
return new Date(y, m - 1, d);
|
||||
} catch (e) {
|
||||
@ -125,12 +111,10 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
|
||||
})() : undefined}
|
||||
onSelect={(selectedDate) => {
|
||||
if (selectedDate) {
|
||||
// Extrair data como local para evitar problemas de timezone
|
||||
const y = selectedDate.getFullYear();
|
||||
const m = String(selectedDate.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(selectedDate.getDate()).padStart(2, '0');
|
||||
const dateStr = `${y}-${m}-${d}`;
|
||||
console.log('[ExceptionForm] Data selecionada:', dateStr, 'de', selectedDate);
|
||||
setDate(dateStr);
|
||||
setShowDatePicker(false);
|
||||
}
|
||||
@ -176,7 +160,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={() => handleOpenChange(false)} disabled={submitting}>Cancelar</Button>
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
|
||||
<Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar exceção'}</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
@ -384,37 +384,37 @@ export function EventManager({
|
||||
{/* Desktop: Button group */}
|
||||
<div className="hidden sm:flex items-center gap-1 rounded-lg border bg-background p-1">
|
||||
<Button
|
||||
variant={view === "month" ? "default" : "ghost"}
|
||||
variant={view === "month" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setView("month")}
|
||||
className={cn("h-8", view !== "month" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
|
||||
className="h-8"
|
||||
>
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span className="ml-1">Mês</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === "week" ? "default" : "ghost"}
|
||||
variant={view === "week" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setView("week")}
|
||||
className={cn("h-8", view !== "week" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
|
||||
className="h-8"
|
||||
>
|
||||
<Grid3x3 className="h-4 w-4" />
|
||||
<span className="ml-1">Semana</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === "day" ? "default" : "ghost"}
|
||||
variant={view === "day" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setView("day")}
|
||||
className={cn("h-8", view !== "day" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
|
||||
className="h-8"
|
||||
>
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="ml-1">Dia</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === "list" ? "default" : "ghost"}
|
||||
variant={view === "list" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setView("list")}
|
||||
className={cn("h-8", view !== "list" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
|
||||
className="h-8"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
<span className="ml-1">Lista</span>
|
||||
@ -432,7 +432,7 @@ export function EventManager({
|
||||
aria-label="Buscar"
|
||||
className="flex items-center justify-center h-10 w-10 p-0 text-muted-foreground bg-transparent border-0"
|
||||
onClick={() => {
|
||||
const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar pacientes..."]')
|
||||
const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar eventos..."]')
|
||||
el?.focus()
|
||||
}}
|
||||
>
|
||||
@ -441,7 +441,7 @@ export function EventManager({
|
||||
|
||||
{/* Input central com altura consistente e foco visível */}
|
||||
<Input
|
||||
placeholder="Buscar paciente..."
|
||||
placeholder="Buscar eventos..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className={cn(
|
||||
|
||||
@ -14,7 +14,7 @@ const buttonVariants = cva(
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-blue-500 hover:text-white dark:bg-input/30 dark:border-input dark:hover:bg-blue-600 dark:hover:text-white",
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
|
||||
@ -74,28 +74,26 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
|
||||
: 'U'
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col sm:flex-row items-center gap-3 sm:gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<Avatar className="h-20 w-20 sm:h-20 sm:w-20">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="h-20 w-20">
|
||||
<AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
|
||||
<AvatarFallback className="text-lg">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 w-full min-w-0">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => document.getElementById('avatar-upload')?.click()}
|
||||
disabled={isUploading}
|
||||
className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
|
||||
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-1 sm:mr-2" />
|
||||
<span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
{isUploading ? 'Enviando...' : 'Upload'}
|
||||
</Button>
|
||||
|
||||
{currentAvatarUrl && (
|
||||
@ -103,10 +101,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
className="transition duration-200 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white text-xs sm:text-sm"
|
||||
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-1 sm:mr-2" />
|
||||
<span className="hidden xs:inline">Download</span>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@ -120,8 +118,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
|
||||
disabled={isUploading}
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground leading-snug">
|
||||
Formatos: JPG, PNG, WebP (máx. 2MB)
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
|
||||
@ -488,10 +488,11 @@ export async function deletarDisponibilidade(id: string): Promise<void> {
|
||||
headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
|
||||
});
|
||||
|
||||
if (res.status === 204 || res.status === 200) return;
|
||||
|
||||
// Se chegou aqui e não foi sucesso, lance erro
|
||||
throw new Error(`Erro ao deletar disponibilidade: ${res.status}`);
|
||||
if (res.status === 204) return;
|
||||
// Some deployments may return 200 with a representation — accept that too
|
||||
if (res.status === 200) return;
|
||||
// Otherwise surface a friendly error using parse()
|
||||
await parse(res as Response);
|
||||
}
|
||||
|
||||
// ===== EXCEÇÕES (Doctor Exceptions) =====
|
||||
@ -579,21 +580,14 @@ export async function listarExcecoes(params?: { doctorId?: string; date?: string
|
||||
export async function deletarExcecao(id: string): Promise<void> {
|
||||
if (!id) throw new Error('ID da exceção é obrigatório');
|
||||
const url = `${REST}/doctor_exceptions?id=eq.${encodeURIComponent(String(id))}`;
|
||||
console.log('[deletarExcecao] Deletando exceção:', id, 'URL:', url);
|
||||
const res = await fetch(url, {
|
||||
method: 'DELETE',
|
||||
headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
|
||||
});
|
||||
|
||||
console.log('[deletarExcecao] Status da resposta:', res.status);
|
||||
|
||||
if (res.status === 204 || res.status === 200) {
|
||||
console.log('[deletarExcecao] Exceção deletada com sucesso');
|
||||
return;
|
||||
}
|
||||
|
||||
// Se chegou aqui e não foi sucesso, lance erro
|
||||
throw new Error(`Erro ao deletar exceção: ${res.status}`);
|
||||
if (res.status === 204) return;
|
||||
if (res.status === 200) return;
|
||||
await parse(res as Response);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user