RiseUP/riseup-squad20
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix/visual-adjustments' (#82) from fix/visual-adjustments into develop

Browse Source 
Reviewed-on: #82
This commit is contained in:
M-Gabrielly 2025-12-04 04:12:13 +00:00
commit 2bee422770
25 changed files with 1135 additions and 581 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
README.md
View File

@ -16,7 +16,7 @@
---
## 📋 Índice
## Índice
1. [Visão Geral](#-visão-geral)
2. [Problema e Solução](#-problema-e-solução)
@ -32,61 +32,61 @@
---
## 🎯 Visão Geral
## 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
### 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
- **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
## 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
- 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
- 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
## 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 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 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
### 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
## Tecnologias
### Frontend (Atual)
- **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
@ -111,7 +111,7 @@ MEDIConnect oferece um sistema inteligente de gestão que:
---
## 🚀 Instalação
## Instalação
### Pré-requisitos
@ -167,21 +167,21 @@ Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
---
## 💻 Como Usar
## Como Usar
### Navegação Principal
#### 🏠 Página Inicial
#### Página Inicial
Acesse `/home` para conhecer a plataforma e suas funcionalidades.
#### 🔐 Autenticação
#### Autenticação
O sistema possui três níveis de acesso:
- **Pacientes**: `/login-paciente`
- **Profissionais**: `/login-profissional`
- **Administradores**: `/login-admin`
#### 📱 Funcionalidades por Perfil
#### Funcionalidades por Perfil
**Como Paciente:**
1. Faça login em `/login-paciente`
@ -205,7 +205,7 @@ O sistema possui três níveis de acesso:
---
## 🎭 Fluxos de Usuário
## Fluxos de Usuário
### Fluxo de Agendamento (Paciente)
@ -243,9 +243,9 @@ E --> F[Tomar Decisões]
---
## 🧩 Componentes Principais
## Componentes Principais
### 🤖 Zoe IA Assistant
### Zoe IA Assistant
Assistente virtual inteligente que oferece:
- Suporte 24/7 aos usuários
@ -258,7 +258,7 @@ Assistente virtual inteligente que oferece:
- `components/ZoeIA/voice-powered-orb.tsx`
- `components/ZoeIA/demo.tsx`
### 📅 Sistema de Agendamento
### Sistema de Agendamento
Gerenciamento completo de consultas e exames:
- Calendário interativo
@ -271,7 +271,7 @@ Gerenciamento completo de consultas e exames:
- `components/features/Calendario/`
- `app/(main-routes)/consultas/`
### 📋 Editor de Laudos
### Editor de Laudos
Ferramenta profissional para criação de laudos médicos:
- Interface intuitiva
@ -283,7 +283,7 @@ Ferramenta profissional para criação de laudos médicos:
- `lib/laudo-exemplos.ts`
- `lib/laudo-notification.ts`
### 📊 Dashboard Analytics
### Dashboard Analytics
Painéis administrativos com:
- Métricas em tempo real
@ -298,7 +298,7 @@ Painéis administrativos com:
---
## 🤝 Contribuindo
## Contribuindo
Contribuições são bem-vindas! Siga estes passos:
@ -351,26 +351,26 @@ Descreva suas mudanças detalhadamente.
---
## 📝 Licença
## Licença
Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
## 📞 Contato
## 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)
- 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 com ❤️ pelo squad 20**
**Desenvolvido pelo squad 20**
*Transformando a gestão de saúde através da tecnologia*

6
susconecta/app/(main-routes)/calendar/page.tsx
View File

@ -157,7 +157,7 @@ export default function AgendamentoPage() {
// Mapa de classes para cores conhecidas
const colorClassMap: Record<string, string> = {
blue: "bg-blue-500 ring-blue-500/20",
green: "bg-green-500 ring-green-500/20",
green: "bg-[#10B981] ring-[#10B981]/20",
orange: "bg-orange-500 ring-orange-500/20",
red: "bg-red-500 ring-red-500/20",
purple: "bg-purple-500 ring-purple-500/20",
@ -242,7 +242,7 @@ export default function AgendamentoPage() {
<span className="text-foreground text-xs sm:text-sm font-medium">Solicitado</span>
</div>
<div className="flex items-center gap-2">
<span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full bg-green-500 ring-1 ring-white/6" />
<span aria-hidden className="h-2 w-2 sm:h-3 sm:w-3 rounded-full ring-1 ring-white/6" style={{ backgroundColor: '#10B981' }} />
<span className="text-foreground text-xs sm:text-sm font-medium">Confirmado</span>
</div>
<div className="flex items-center gap-2">
@ -309,7 +309,7 @@ export default function AgendamentoPage() {
</div>
{/* legenda dinâmica: mostra as cores presentes nos agendamentos do dia atual */}
<div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-40">
<div className="sm:absolute sm:top-2 sm:right-2 mt-2 sm:mt-0 z-10">
<DynamicLegend events={managerEvents} />
</div>
</div>

47
susconecta/app/(main-routes)/consultas/page.tsx
View File

@ -111,8 +111,11 @@ export default function ConsultasPage() {
const baseDate = scheduledBase ? new Date(scheduledBase) : new Date();
const duration = appointment.duration_minutes ?? appointment.duration ?? 30;
// compute start and end times (HH:MM)
const appointmentDateStr = baseDate.toISOString().split("T")[0];
// compute start and end times (HH:MM) and date using local time to avoid timezone issues
const year = baseDate.getFullYear();
const month = String(baseDate.getMonth() + 1).padStart(2, '0');
const day = String(baseDate.getDate()).padStart(2, '0');
const appointmentDateStr = `${year}-${month}-${day}`;
const startTime = `${String(baseDate.getHours()).padStart(2, '0')}:${String(baseDate.getMinutes()).padStart(2, '0')}`;
const endDate = new Date(baseDate.getTime() + duration * 60000);
const endTime = `${String(endDate.getHours()).padStart(2, '0')}:${String(endDate.getMinutes()).padStart(2, '0')}`;
@ -567,13 +570,19 @@ export default function ConsultasPage() {
<TableCell>
<Badge
variant={
appointment.status === "confirmed"
appointment.status === "confirmed" || appointment.status === "confirmado"
? "default"
: appointment.status === "pending"
: appointment.status === "pending" || appointment.status === "pendente"
? "secondary"
: appointment.status === "requested" || appointment.status === "solicitado"
? "default"
: "destructive"
}
className={appointment.status === "confirmed" ? "bg-green-600" : ""}
className={
appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
}
>
{translateStatus(appointment.status)}
</Badge>
@ -658,13 +667,21 @@ export default function ConsultasPage() {
<div className="text-[10px] sm:text-xs text-muted-foreground">Status</div>
<Badge
variant={
appointment.status === "confirmed"
appointment.status === "confirmed" || appointment.status === "confirmado"
? "default"
: appointment.status === "pending"
: appointment.status === "pending" || appointment.status === "pendente"
? "secondary"
: appointment.status === "requested" || appointment.status === "solicitado"
? "default"
: "destructive"
}
className={`text-[10px] sm:text-xs ${appointment.status === "confirmed" ? "bg-green-600" : ""}`}
className={
`text-[10px] sm:text-xs ${
appointment.status === "confirmed" || appointment.status === "confirmado" ? "bg-[#10B981]" :
appointment.status === "requested" || appointment.status === "solicitado" ? "bg-blue-500" :
appointment.status === "canceled" || appointment.status === "cancelled" || appointment.status === "cancelado" ? "bg-red-500" : ""
}`
}
>
{translateStatus(appointment.status)}
</Badge>
@ -777,13 +794,19 @@ export default function ConsultasPage() {
<span className="col-span-3">
<Badge
variant={
viewingAppointment?.status === "confirmed"
viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado"
? "default"
: viewingAppointment?.status === "pending"
: viewingAppointment?.status === "pending" || viewingAppointment?.status === "pendente"
? "secondary"
: viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado"
? "default"
: "destructive"
}
className={viewingAppointment?.status === "confirmed" ? "bg-green-600" : ""}
className={
viewingAppointment?.status === "confirmed" || viewingAppointment?.status === "confirmado" ? "bg-[#10B981]" :
viewingAppointment?.status === "requested" || viewingAppointment?.status === "solicitado" ? "bg-blue-500" :
viewingAppointment?.status === "canceled" || viewingAppointment?.status === "cancelled" || viewingAppointment?.status === "cancelado" ? "bg-red-500" : ""
}
>
{translateStatus(viewingAppointment?.status || "")}
</Badge>
@ -791,7 +814,7 @@ export default function ConsultasPage() {
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Tipo</Label>
<span className="col-span-3">{capitalize(viewingAppointment?.type || "")}</span>
<span className="col-span-3">{capitalize(viewingAppointment?.appointment_type || viewingAppointment?.type || "")}</span>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Observações</Label>

50
susconecta/app/(main-routes)/dashboard/page.tsx
View File

@ -9,7 +9,6 @@ import {
getUpcomingAppointments,
getAppointmentsByDateRange,
getNewUsersLastDays,
getPendingReports,
getDisabledUsers,
getDoctorsAvailabilityToday,
getPatientById,
@ -18,7 +17,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, FileText, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
import { AlertCircle, Calendar, Users, Stethoscope, Clock, 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';
@ -49,7 +48,6 @@ 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());
@ -83,18 +81,16 @@ export default function DashboardPage() {
});
// 2. Carrega dados dos widgets em paralelo
const [upcomingAppts, appointmentDataRange, newUsersList, pendingReportsList, disabledUsersList] = await Promise.all([
const [upcomingAppts, appointmentDataRange, newUsersList, 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
@ -264,15 +260,7 @@ 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 */}
@ -294,17 +282,12 @@ 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 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">
<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">
<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">
@ -330,28 +313,7 @@ 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 */}

84
susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
View File

@ -2,10 +2,11 @@
"use client";
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } 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,
@ -30,10 +31,51 @@ const FALLBACK_MEDICOS = [
// Helper Functions
// ============================================================================
function exportPDF(title: string, content: string) {
async function exportPDF(title: string, content: string, chartElementId?: string) {
const doc = new jsPDF();
doc.text(title, 10, 10);
doc.text(content, 10, 20);
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.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
}
@ -203,7 +245,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.")}
onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")}
>
<FileDown className="w-4 h-4 mr-1" /> Exportar PDF
</Button>
@ -211,15 +253,17 @@ export default function RelatoriosPage() {
{loading ? (
<div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</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 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>
)}
</div>
</div>
@ -229,9 +273,10 @@ 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.")}> <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.", "table-pacientes")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
</div>
<table className="w-full text-sm mt-4">
<div id="table-pacientes">
<table className="w-full text-sm mt-4">
<thead>
<tr className="text-muted-foreground">
<th className="text-left font-medium">Paciente</th>
@ -257,15 +302,17 @@ 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.")}> <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.", "table-medicos")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
</div>
<table className="w-full text-sm mt-4">
<div id="table-medicos">
<table className="w-full text-sm mt-4">
<thead>
<tr className="text-muted-foreground">
<th className="text-left font-medium">Médico</th>
@ -291,6 +338,7 @@ export default function RelatoriosPage() {
)}
</tbody>
</table>
</div>
</div>
</div>
</div>

79
susconecta/app/(main-routes)/doutores/page.tsx
View File

@ -131,6 +131,7 @@ export default function DoutoresPage() {
const [availabilityOpenFor, setAvailabilityOpenFor] = useState<Medico | null>(null);
const [availabilityViewingFor, setAvailabilityViewingFor] = useState<Medico | null>(null);
const [availabilities, setAvailabilities] = useState<DoctorAvailability[]>([]);
const [availabilitiesForCreate, setAvailabilitiesForCreate] = useState<DoctorAvailability[]>([]);
const [availLoading, setAvailLoading] = useState(false);
const [editingAvailability, setEditingAvailability] = useState<DoctorAvailability | null>(null);
const [exceptions, setExceptions] = useState<DoctorException[]>([]);
@ -633,7 +634,17 @@ export default function DoutoresPage() {
Ver pacientes atribuídos
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setAvailabilityOpenFor(doctor)}>
<DropdownMenuItem onClick={async () => {
try {
const list = await listarDisponibilidades({ doctorId: doctor.id, active: true });
setAvailabilitiesForCreate(list || []);
setAvailabilityOpenFor(doctor);
} catch (e) {
console.warn('Erro ao carregar disponibilidades:', e);
setAvailabilitiesForCreate([]);
setAvailabilityOpenFor(doctor);
}
}}>
<Plus className="mr-2 h-4 w-4" />
Criar disponibilidade
</DropdownMenuItem>
@ -833,27 +844,27 @@ export default function DoutoresPage() {
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<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 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>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Especialidade</Label>
<span className="col-span-3">
<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">
<Badge variant="outline">{viewingDoctor?.especialidade}</Badge>
</span>
</div>
<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 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>
<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 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>
<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 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>
</div>
<DialogFooter>
@ -869,6 +880,7 @@ export default function DoutoresPage() {
open={!!availabilityOpenFor}
onOpenChange={(open) => { if (!open) setAvailabilityOpenFor(null); }}
doctorId={availabilityOpenFor?.id}
existingAvailabilities={availabilitiesForCreate}
onSaved={(saved) => { console.log('Disponibilidade salva', saved); setAvailabilityOpenFor(null); /* optionally reload list */ reloadAvailabilities(availabilityOpenFor?.id); }}
/>
)}
@ -890,6 +902,7 @@ export default function DoutoresPage() {
doctorId={editingAvailability?.doctor_id ?? availabilityViewingFor?.id}
availability={editingAvailability}
mode="edit"
existingAvailabilities={availabilities}
onSaved={(saved) => { console.log('Disponibilidade atualizada', saved); setEditingAvailability(null); reloadAvailabilities(editingAvailability?.doctor_id ?? availabilityViewingFor?.id); }}
/>
)}
@ -910,14 +923,35 @@ export default function DoutoresPage() {
<div>Carregando disponibilidades…</div>
) : availabilities && availabilities.length ? (
<div className="space-y-2">
{availabilities.map((a) => (
{availabilities
.sort((a, b) => {
// Define a ordem dos dias da semana (Segunda a Domingo)
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);
})
.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)}>Editar</Button>
<Button size="sm" variant="outline" onClick={() => setEditingAvailability(a)} className="hover:bg-muted hover:text-foreground">Editar</Button>
<Button size="sm" variant="destructive" onClick={async () => {
if (!confirm('Excluir esta disponibilidade?')) return;
try {
@ -964,7 +998,14 @@ export default function DoutoresPage() {
{exceptions.map((ex) => (
<div key={String(ex.id)} className="p-2 border rounded flex justify-between items-start">
<div>
<div className="font-medium">{ex.date} {ex.start_time ? `• ${ex.start_time}` : ''} {ex.end_time ? `— ${ex.end_time}` : ''}</div>
<div className="font-medium">{(() => {
try {
const [y, m, d] = String(ex.date).split('-');
return `${d}/${m}/${y}`;
} catch (e) {
return ex.date;
}
})()} {ex.start_time ? `• ${ex.start_time}` : ''} {ex.end_time ? `— ${ex.end_time}` : ''}</div>
<div className="text-xs text-muted-foreground">Tipo: {ex.kind} • Motivo: {ex.reason || '—'}</div>
</div>
<div className="flex gap-2">

8
susconecta/app/(main-routes)/pacientes/layout.tsx
View File

@ -1,11 +1,5 @@
import type { ReactNode } from "react";
import { ChatWidget } from "@/components/features/pacientes/chat-widget";
export default function PacientesLayout({ children }: { children: ReactNode }) {
return (
<>
{children}
<ChatWidget />
</>
);
return <>{children}</>;
}

30
susconecta/app/(main-routes)/pacientes/page.tsx
View File

@ -539,27 +539,27 @@ export default function PacientesPage() {
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<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 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>
<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 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>
<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 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>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Endereço</Label>
<span className="col-span-3">
<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">
{`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
</span>
</div>
<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 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>
</div>
<DialogFooter>

129
susconecta/app/laudos-editor/page.tsx
View File

@ -148,7 +148,10 @@ export default function LaudosEditorPage() {
if (savedDraft) {
try {
const draft = JSON.parse(savedDraft);
setPacienteSelecionado(draft.pacienteSelecionado);
// Carregar paciente do rascunho se existir
if (draft.pacienteSelecionado) {
setPacienteSelecionado(draft.pacienteSelecionado);
}
setContent(draft.content);
setCampos(draft.campos);
setSolicitanteId(draft.solicitanteId);
@ -178,6 +181,33 @@ export default function LaudosEditorPage() {
}
}, []);
// Auto-salvar no localStorage sempre que houver mudanças (com debounce)
useEffect(() => {
const timeoutId = setTimeout(() => {
// Capturar conteúdo atual do editor antes de salvar
const currentContent = editorRef.current?.innerHTML || content;
const draft = {
pacienteSelecionado,
content: currentContent,
campos,
solicitanteId,
solicitanteNome,
prazoDate,
prazoTime,
imagens,
lastSaved: new Date().toISOString(),
};
// Só salvar se houver conteúdo ou dados preenchidos
if (currentContent || pacienteSelecionado || campos.exame || campos.diagnostico || imagens.length > 0) {
localStorage.setItem('laudoDraft', JSON.stringify(draft));
}
}, 1000); // Aguarda 1 segundo após última mudança
return () => clearTimeout(timeoutId);
}, [pacienteSelecionado, content, campos, solicitanteId, solicitanteNome, prazoDate, prazoTime, imagens]);
// Tentar obter o registro de médico correspondente ao usuário autenticado
useEffect(() => {
let mounted = true;
@ -247,6 +277,23 @@ export default function LaudosEditorPage() {
}
}, [content]);
// Função para trocar de aba salvando conteúdo antes
const handleTabChange = (newTab: string) => {
// Salvar conteúdo do editor antes de trocar
if (editorRef.current) {
const editorContent = editorRef.current.innerHTML;
setContent(editorContent);
}
setActiveTab(newTab);
};
// Restaurar conteúdo do editor quando voltar para a aba editor
useEffect(() => {
if (activeTab === 'editor' && editorRef.current && content) {
editorRef.current.innerHTML = content;
}
}, [activeTab]);
// Desfazer
const handleUndo = () => {
if (historyIndex > 0) {
@ -321,11 +368,15 @@ export default function LaudosEditorPage() {
// Salvar rascunho no localStorage
const saveDraft = () => {
// Capturar conteúdo atual do editor antes de salvar
const currentContent = editorRef.current?.innerHTML || content;
const draft = {
pacienteSelecionado,
content,
content: currentContent,
campos,
solicitanteId,
solicitanteNome,
prazoDate,
prazoTime,
imagens,
@ -389,6 +440,9 @@ export default function LaudosEditorPage() {
return;
}
// Capturar conteúdo atual do editor antes de salvar
const currentContent = editorRef.current?.innerHTML || content;
const userId = user?.id || '00000000-0000-0000-0000-000000000001';
let composedDueAt = undefined;
@ -404,7 +458,7 @@ export default function LaudosEditorPage() {
diagnosis: campos.diagnostico || '',
conclusion: campos.conclusao || '',
cid_code: campos.cid || '',
content_html: content,
content_html: currentContent,
content_json: {},
requested_by: solicitanteId || userId,
due_at: composedDueAt ?? new Date().toISOString(),
@ -414,6 +468,10 @@ export default function LaudosEditorPage() {
if (createNewReport) {
await createNewReport(payload as any);
// Limpar rascunho salvo após sucesso
localStorage.removeItem('laudoDraft');
toast({
title: 'Laudo criado com sucesso!',
description: 'O laudo foi liberado e salvo.',
@ -441,7 +499,7 @@ export default function LaudosEditorPage() {
<Button
variant="ghost"
size="sm"
onClick={() => router.push('/profissional')}
onClick={() => setShowDraftConfirm(true)}
className="p-0 h-auto flex-shrink-0"
>
<ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@ -489,7 +547,7 @@ export default function LaudosEditorPage() {
<div className="font-semibold text-primary text-sm sm:text-lg truncate">{getPatientName(pacienteSelecionado)}</div>
<div className="text-xs sm:text-sm text-muted-foreground line-clamp-2">
{getPatientCpf(pacienteSelecionado) ? `CPF: ${getPatientCpf(pacienteSelecionado)} | ` : ''}
{pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
{pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date.split('T')[0].split('-').reverse().join('/')}` : getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : ''}
{getPatientSex(pacienteSelecionado) ? ` | Sexo: ${getPatientSex(pacienteSelecionado)}` : ''}
</div>
</div>
@ -536,7 +594,7 @@ export default function LaudosEditorPage() {
{/* Tabs */}
<div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
<button
onClick={() => setActiveTab('editor')}
onClick={() => handleTabChange('editor')}
className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
activeTab === 'editor'
? 'border-blue-500 text-blue-600'
@ -547,18 +605,7 @@ export default function LaudosEditorPage() {
Editor
</button>
<button
onClick={() => setActiveTab('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={() => setActiveTab('campos')}
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 ${
activeTab === 'campos'
? 'border-blue-500 text-blue-600'
@ -719,48 +766,6 @@ 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">
@ -958,14 +963,14 @@ export default function LaudosEditorPage() {
setShowDraftConfirm(false);
discardDraft();
}}
className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950"
className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
>
Descartar
</Button>
<Button
variant="outline"
onClick={() => setShowDraftConfirm(false)}
className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950"
className="text-xs sm:text-sm h-9 sm:h-10 hover:bg-gray-100 dark:hover:bg-gray-800"
>
Voltar
</Button>

191
susconecta/app/laudos/[id]/editar/page.tsx
View File

@ -12,6 +12,7 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { FileText, Settings, Eye, ArrowLeft, BookOpen } from 'lucide-react';
export default function EditarLaudoPage() {
@ -29,6 +30,7 @@ export default function EditarLaudoPage() {
const [activeTab, setActiveTab] = useState('editor');
const [showPreview, setShowPreview] = useState(false);
const [loading, setLoading] = useState(true);
const [showExitDialog, setShowExitDialog] = useState(false);
// Campos do laudo
const [campos, setCampos] = useState({
@ -69,34 +71,45 @@ export default function EditarLaudoPage() {
// Estado para rastrear alinhamento ativo
const [activeAlignment, setActiveAlignment] = useState('left');
// Salvar conteúdo no localStorage sempre que muda
// Salvar conteúdo no localStorage sempre que muda (com debounce)
useEffect(() => {
if (content && laudoId) {
localStorage.setItem(`laudo-draft-${laudoId}`, content);
}
}, [content, laudoId]);
// Sincronizar conteúdo com o editor
useEffect(() => {
if (editorRef.current && content) {
if (editorRef.current.innerHTML !== content) {
editorRef.current.innerHTML = content;
const timeoutId = setTimeout(() => {
if (laudoId) {
// Capturar conteúdo atual do editor antes de salvar
const currentContent = editorRef.current?.innerHTML || content;
const draft = {
content: currentContent,
campos,
lastSaved: new Date().toISOString(),
};
localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
}
}
}, [content]);
}, 1000); // Aguarda 1 segundo após última mudança
// Restaurar conteúdo quando volta para a aba editor
useEffect(() => {
if (activeTab === 'editor' && editorRef.current && content) {
editorRef.current.focus();
const range = document.createRange();
const sel = window.getSelection();
range.setStart(editorRef.current, editorRef.current.childNodes.length);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
return () => clearTimeout(timeoutId);
}, [content, campos, laudoId]);
// Função para trocar de aba salvando conteúdo antes
const handleTabChange = (newTab: string) => {
// Salvar conteúdo do editor antes de trocar
if (editorRef.current) {
const editorContent = editorRef.current.innerHTML;
setContent(editorContent);
}
}, [activeTab]);
// Se estiver voltando para o editor, restaurar conteúdo
if (newTab === 'editor') {
setTimeout(() => {
if (editorRef.current && content) {
editorRef.current.innerHTML = content;
}
}, 0);
}
setActiveTab(newTab);
};
// Atualizar formatações ativas ao mudar seleção
useEffect(() => {
@ -162,25 +175,49 @@ export default function EditarLaudoPage() {
mostrarAssinatura: !r.hide_signature,
});
// Preencher conteúdo
const contentHtml = r.content_html || r.conteudo_html || '';
// Preencher conteúdo - verificar todos os possíveis nomes de campo
const contentHtml = r.content_html || r.conteudo_html || r.contentHtml || r.conteudo || r.content || '';
console.log('[EditarLaudoPage] Loading content - report:', r);
console.log('[EditarLaudoPage] Content fields check:', {
content_html: r.content_html,
conteudo_html: r.conteudo_html,
contentHtml: r.contentHtml,
conteudo: r.conteudo,
content: r.content,
finalContent: contentHtml
});
// Verificar se existe rascunho salvo no localStorage
const draftContent = typeof window !== 'undefined' ? localStorage.getItem(`laudo-draft-${laudoId}`) : null;
const finalContent = draftContent || contentHtml;
let finalContent = contentHtml;
let finalCampos = {
cid: r.cid_code || r.cid || '',
diagnostico: r.diagnosis || r.diagnostico || '',
conclusao: r.conclusion || r.conclusao || '',
exame: r.exam || r.exame || '',
especialidade: r.especialidade || '',
mostrarData: !r.hide_date,
mostrarAssinatura: !r.hide_signature,
};
setContent(finalContent);
if (editorRef.current) {
editorRef.current.innerHTML = finalContent;
// Colocar cursor no final do texto
editorRef.current.focus();
const range = document.createRange();
const sel = window.getSelection();
range.setStart(editorRef.current, editorRef.current.childNodes.length);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
if (typeof window !== 'undefined') {
const draftData = localStorage.getItem(`laudo-draft-${laudoId}`);
if (draftData) {
try {
const draft = JSON.parse(draftData);
if (draft.content) finalContent = draft.content;
if (draft.campos) finalCampos = { ...finalCampos, ...draft.campos };
} catch (err) {
// Se falhar parse, tentar como string simples (formato antigo)
finalContent = draftData;
}
}
}
setCampos(finalCampos);
setContent(finalContent);
console.log('[EditarLaudoPage] Setting content state with length:', finalContent.length);
// O innerHTML será setado no useEffect separado abaixo
} catch (err) {
console.warn('Erro ao carregar laudo:', err);
toast({
@ -195,6 +232,14 @@ export default function EditarLaudoPage() {
fetchLaudo();
}, [laudoId, token, toast]);
// UseEffect separado para injetar o conteúdo no editor quando estiver pronto
useEffect(() => {
if (content && editorRef.current && !loading) {
console.log('[EditarLaudoPage] Injecting content into editor, length:', content.length);
editorRef.current.innerHTML = content;
}
}, [content, loading]);
// Formatação com contenteditable
const applyFormat = (command: string, value?: string) => {
document.execCommand(command, false, value || undefined);
@ -332,7 +377,7 @@ export default function EditarLaudoPage() {
<Button
variant="ghost"
size="sm"
onClick={() => router.back()}
onClick={() => setShowExitDialog(true)}
className="p-0 h-auto flex-shrink-0"
>
<ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@ -357,7 +402,7 @@ export default function EditarLaudoPage() {
{/* Tabs */}
<div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
<button
onClick={() => setActiveTab('editor')}
onClick={() => handleTabChange('editor')}
className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
activeTab === 'editor'
? 'border-blue-500 text-blue-600'
@ -368,7 +413,7 @@ export default function EditarLaudoPage() {
Editor
</button>
<button
onClick={() => setActiveTab('campos')}
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 ${
activeTab === 'campos'
? 'border-blue-500 text-blue-600'
@ -711,7 +756,7 @@ export default function EditarLaudoPage() {
Edite as informações do laudo e salve as alterações.
</div>
<div className="flex gap-2 w-full sm:w-auto">
<Button variant="outline" onClick={() => router.back()} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
<Button variant="outline" onClick={() => setShowExitDialog(true)} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10 hover:bg-blue-50 dark:hover:bg-blue-950">
Cancelar
</Button>
<Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10">
@ -720,6 +765,66 @@ export default function EditarLaudoPage() {
</div>
</div>
</div>
{/* Dialog de confirmação de saída */}
<Dialog open={showExitDialog} onOpenChange={setShowExitDialog}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Salvar Rascunho?</DialogTitle>
<DialogDescription>
Você tem informações não salvas. Deseja salvar como rascunho para continuar depois?
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex-col sm:flex-row gap-2">
<Button
variant="outline"
onClick={() => {
// Limpar rascunho
localStorage.removeItem(`laudo-draft-${laudoId}`);
setShowExitDialog(false);
router.back();
}}
className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
>
Descartar
</Button>
<Button
variant="outline"
onClick={() => {
setShowExitDialog(false);
router.back();
}}
className="w-full sm:w-auto hover:bg-gray-100 dark:hover:bg-gray-800"
>
Voltar
</Button>
<Button
onClick={() => {
// Salvar rascunho manualmente antes de sair
const currentContent = editorRef.current?.innerHTML || content;
const draft = {
content: currentContent,
campos,
lastSaved: new Date().toISOString(),
};
localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
toast({
title: 'Rascunho salvo!',
description: 'Suas alterações foram salvas.',
variant: 'default',
});
setShowExitDialog(false);
router.back();
}}
className="w-full sm:w-auto"
>
Salvar Rascunho
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</ProtectedRoute>
);

14
susconecta/app/laudos/[id]/page.tsx
View File

@ -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, MoreVertical } from 'lucide-react'
import { ArrowLeft, Printer, Download } 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,18 +355,6 @@ 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>

75
susconecta/app/paciente/page.tsx
View File

@ -1762,7 +1762,7 @@ export default function PacientePage() {
</div>
{/* Grid de 3 colunas (2 + 1) */}
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
<div className="grid 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,31 +1888,20 @@ 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>
{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 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="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 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>
@ -1925,23 +1914,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-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">
<Avatar className="h-10 w-10 sm:h-12 sm:w-12 md:h-12 md:w-12">
<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">
{/* 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">
<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">
MEDIConnect
</span>
</div>
<div className="h-6 w-px bg-border hidden sm:block"></div>
<Avatar className="h-10 w-10 sm:h-10 sm:w-10 shrink-0">
<AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
<AvatarFallback className="bg-primary text-white font-bold text-sm sm:text-base">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
<AvatarFallback className="bg-primary text-white font-bold text-xs sm:text-sm">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
</Avatar>
<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 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>
</div>
<div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
<div className="flex items-center gap-2 w-full sm:w-auto shrink-0">
<SimpleThemeToggle />
<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">
<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">
<Link href="/">
<Home className="h-3 w-3 sm:h-4 sm:w-4 mr-1" /> Início
<Home className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">Início</span>
</Link>
</Button>
<Button
@ -1949,9 +1950,9 @@ export default function PacientePage() {
variant="outline"
aria-label={strings.sair}
disabled={loading}
className="text-destructive border-destructive hover:bg-destructive! hover:text-white! hover:border-destructive! transition-colors"
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"
>
<LogOut className="h-4 w-4 mr-1" /> {strings.sair}
<LogOut className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">{strings.sair}</span>
</Button>
</div>
</header>

58
susconecta/app/paciente/resultados/ResultadosClient.tsx
View File

@ -876,17 +876,6 @@ export default function ResultadosClient() {
</Select>
</div>
{/* Mais filtros / Voltar */}
<div className="sm:col-span-4">
<Button
variant="outline"
className="h-10 w-full rounded-full border border-primary/30 bg-primary/5 text-primary hover:bg-primary hover:text-primary-foreground"
>
<Filter className="mr-2 h-4 w-4" />
Mais filtros
</Button>
</div>
{/* Voltar */}
<div className="sm:col-span-12">
<Button
@ -1001,7 +990,7 @@ export default function ResultadosClient() {
{/* Ações */}
<div className="flex gap-2 pt-2">
<Button
className="flex-1 h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
className="w-full h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
onClick={async () => {
setMoreTimesForDoctor(id)
void fetchSlotsForDate(id, moreTimesDate)
@ -1009,16 +998,6 @@ export default function ResultadosClient() {
>
Agendar
</Button>
<Button
variant="outline"
className="flex-1 h-10 rounded-full border-primary/40 text-primary hover:bg-primary/10"
onClick={() => {
setMoreTimesForDoctor(id)
void fetchSlotsForDate(id, moreTimesDate)
}}
>
Mais horários
</Button>
</div>
</Card>
)
@ -1051,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-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>
<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>
<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-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>
<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>
</div>
</div>
)}
@ -1186,8 +1165,17 @@ export default function ResultadosClient() {
</DialogHeader>
<div className="flex items-center gap-2 mb-4">
<input type="date" className="flex-1 rounded-md border border-border px-3 py-2 text-sm" value={moreTimesDate} onChange={(e) => setMoreTimesDate(e.target.value)} />
<Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
<input
type="date"
className="flex-1 rounded-md border border-border px-3 py-2 text-sm"
value={moreTimesDate}
onChange={(e) => {
setMoreTimesDate(e.target.value)
if (moreTimesForDoctor) {
void fetchSlotsForDate(moreTimesForDoctor, e.target.value)
}
}}
/>
</div>
<div className="mt-2">
@ -1196,12 +1184,14 @@ export default function ResultadosClient() {
) : moreTimesException ? (
<div className="text-sm text-red-500">{moreTimesException}</div>
) : (moreTimesSlots.length ? (
<div className="grid grid-cols-3 gap-2">
{moreTimesSlots.map(s => (
<button key={s.iso} type="button" className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-primary hover:bg-primary hover:text-primary-foreground" onClick={() => { if (moreTimesForDoctor) { openConfirmDialog(moreTimesForDoctor, s.iso); setMoreTimesForDoctor(null); } }}>
{s.label}
</button>
))}
<div className="max-h-[60vh] overflow-y-auto pr-2">
<div className="grid grid-cols-3 gap-2">
{moreTimesSlots.map(s => (
<button key={s.iso} type="button" className="rounded-lg bg-primary/10 px-3 py-2 text-sm text-primary hover:bg-primary hover:text-primary-foreground transition-colors" onClick={() => { if (moreTimesForDoctor) { openConfirmDialog(moreTimesForDoctor, s.iso); setMoreTimesForDoctor(null); } }}>
{s.label}
</button>
))}
</div>
</div>
) : (
<div className="text-sm text-muted-foreground">Sem horários para a data selecionada.</div>

486
susconecta/app/profissional/page.tsx
View File

@ -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 } from "@/lib/api";
import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico, listarDisponibilidades, DoctorAvailability, deletarDisponibilidade, listarExcecoes, DoctorException, deletarExcecao } from "@/lib/api";
import { ENV_CONFIG } from '@/lib/env-config';
import { useReports } from "@/hooks/useReports";
import { CreateReportData } from "@/types/report-types";
@ -19,6 +19,8 @@ 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,
@ -65,6 +67,29 @@ 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 ?? '';
@ -132,6 +157,17 @@ 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.
@ -286,6 +322,48 @@ 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({
@ -1216,14 +1294,56 @@ 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') {
@ -1315,7 +1435,7 @@ const ProfissionalPage = () => {
return;
}
} catch (e) {
console.warn('[LaudoManager] erro ao carregar laudos para pacientes atribuídos:', e);
console.warn('[LaudoManager] erro ao carregar laudos:', e);
setLaudos(reports || []);
}
};
@ -1396,13 +1516,13 @@ const ProfissionalPage = () => {
{/* Filtros */}
<div className="p-4 border-b border-border">
<div className="flex flex-wrap items-center gap-4">
<div className="flex flex-wrap items-start gap-4">
<div className="relative flex-1 min-w-[200px]">
{/* Search input integrado com busca por ID */}
<SearchBox />
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 mt-0">
<div className="flex items-center gap-1 text-sm">
<CalendarIcon className="w-4 h-4" />
<Input type="date" value={startDate ?? ''} onChange={(e) => { setStartDate(e.target.value); setSelectedRange('custom'); }} className="p-1 text-sm h-10" />
@ -1411,7 +1531,7 @@ const ProfissionalPage = () => {
</div>
</div>
<div className="flex gap-2 items-center">
<div className="flex gap-2 items-center mt-0">
{/* date range buttons: Semana / Mês */}
<DateRangeButtons />
</div>
@ -1788,7 +1908,15 @@ const ProfissionalPage = () => {
function LaudoEditor({ pacientes, laudo, onClose, isNewLaudo, preSelectedPatient, createNewReport, updateExistingReport, reloadReports, onSaved }: { pacientes?: any[]; laudo?: any; onClose: () => void; isNewLaudo?: boolean; preSelectedPatient?: any; createNewReport?: (data: any) => Promise<any>; updateExistingReport?: (id: string, data: any) => Promise<any>; reloadReports?: () => Promise<void>; onSaved?: (r:any) => void }) {
const { toast } = useToast();
const [activeTab, setActiveTab] = useState("editor");
const [content, setContent] = useState(laudo?.conteudo || "");
// Initialize content checking all possible field names
const initialContent = laudo?.conteudo ?? laudo?.content_html ?? laudo?.contentHtml ?? laudo?.content ?? "";
console.log('[LaudoEditor] Initializing content - laudo:', laudo, 'initialContent length:', initialContent?.length, 'fields:', {
conteudo: laudo?.conteudo,
content_html: laudo?.content_html,
contentHtml: laudo?.contentHtml,
content: laudo?.content
});
const [content, setContent] = useState(initialContent);
const [showPreview, setShowPreview] = useState(false);
const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null);
const [listaPacientes, setListaPacientes] = useState<any[]>([]);
@ -1875,8 +2003,10 @@ const ProfissionalPage = () => {
// Carregar dados do laudo existente quando disponível (mais robusto: suporta vários nomes de campo)
useEffect(() => {
if (laudo && !isNewLaudo) {
console.log('[LaudoEditor useEffect] Loading existing laudo data:', laudo);
// Conteúdo: aceita 'conteudo', 'content_html', 'contentHtml', 'content'
const contentValue = laudo.conteudo ?? laudo.content_html ?? laudo.contentHtml ?? laudo.content ?? "";
console.log('[LaudoEditor useEffect] Content value length:', contentValue?.length, 'Setting content...');
setContent(contentValue);
// Campos: use vários fallbacks
@ -2181,32 +2311,6 @@ 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 ${
@ -2349,50 +2453,6 @@ 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>
@ -2746,7 +2806,178 @@ 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 */}
@ -2946,42 +3177,21 @@ 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">
{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>
<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>
@ -3022,6 +3232,8 @@ const ProfissionalPage = () => {
);
case 'laudos':
return renderLaudosSection();
case 'disponibilidades':
return renderDisponibilidadesSection();
case 'comunicacao':
return renderComunicacaoSection();
case 'perfil':
@ -3042,6 +3254,18 @@ const ProfissionalPage = () => {
<div className="flex items-center justify-between gap-4 flex-wrap md:flex-nowrap">
{/* Logo/Avatar Section */}
<div className="flex items-center gap-3 min-w-0 flex-1 md:flex-none">
{/* Logo MEDIConnect */}
<div className="flex items-center gap-2 mr-2 md:mr-4">
<div className="w-8 h-8 md:w-10 md:h-10 bg-primary rounded-lg flex items-center justify-center shrink-0">
<Stethoscope className="w-4 h-4 md:w-5 md:h-5 text-primary-foreground" />
</div>
<span className="text-base md:text-lg font-semibold text-foreground hidden sm:inline">
MEDIConnect
</span>
</div>
<div className="h-8 w-px bg-border hidden sm:block"></div>
<Avatar className="h-10 w-10 md:h-12 md:w-12 flex-shrink-0">
<AvatarImage src={(profileData as any).fotoUrl || undefined} alt={profileData.nome} />
<AvatarFallback className="bg-muted text-xs md:text-sm">
@ -3146,6 +3370,17 @@ 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"
@ -3182,7 +3417,32 @@ 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">

2
susconecta/components/features/dashboard/header.tsx
View File

@ -79,7 +79,7 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
</Avatar>
</Button>
{dropdownOpen && (
<div className="absolute right-0 mt-2 w-64 sm:w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground animate-in fade-in slide-in-from-top-2">
<div className="absolute right-0 mt-2 w-64 sm:w-80 bg-popover border border-border rounded-md shadow-lg z-[100] text-popover-foreground animate-in fade-in slide-in-from-top-2">
<div className="p-3 sm:p-4 border-b border-border">
<div className="flex flex-col space-y-1">
<p className="text-xs sm:text-sm font-semibold leading-none">

59
susconecta/components/features/forms/availability-form.tsx
View File

@ -1,6 +1,6 @@
"use client"
import { useState, useEffect } from 'react'
import { useState, useEffect, useMemo } 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'
@ -18,9 +18,11 @@ export interface AvailabilityFormProps {
// when editing, pass the existing availability and set mode to 'edit'
availability?: DoctorAvailability | null
mode?: 'create' | 'edit'
// existing availabilities to prevent duplicate weekday selection
existingAvailabilities?: DoctorAvailability[]
}
export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create' }: AvailabilityFormProps) {
export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create', existingAvailabilities = [] }: AvailabilityFormProps) {
const [weekday, setWeekday] = useState<string>('segunda')
const [startTime, setStartTime] = useState<string>('09:00')
const [endTime, setEndTime] = useState<string>('17:00')
@ -31,6 +33,28 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
const { toast } = useToast()
const [blockedException, setBlockedException] = useState<null | { date: string; reason?: string; times?: string }>(null)
// Normalize weekday to standard format for comparison
const normalizeWeekdayForComparison = (w?: string) => {
if (!w) return w;
const k = String(w).toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '').replace(/[^a-z0-9]/g, '');
const map: Record<string,string> = {
'segunda':'segunda','terca':'terca','quarta':'quarta','quinta':'quinta','sexta':'sexta','sabado':'sabado','domingo':'domingo',
'monday':'segunda','tuesday':'terca','wednesday':'quarta','thursday':'quinta','friday':'sexta','saturday':'sabado','sunday':'domingo',
'1':'segunda','2':'terca','3':'quarta','4':'quinta','5':'sexta','6':'sabado','0':'domingo','7':'domingo'
};
return map[k] ?? k;
};
// 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]);
// When editing, populate state from availability prop
useEffect(() => {
if (mode === 'edit' && availability) {
@ -47,6 +71,17 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
}
}, [mode, availability])
// When creating and modal opens, set the first available weekday
useEffect(() => {
if (mode === 'create' && open) {
const allWeekdays = ['segunda', 'terca', 'quarta', 'quinta', 'sexta', 'sabado', 'domingo'];
const firstAvailable = allWeekdays.find(day => !usedWeekdays.has(day));
if (firstAvailable) {
setWeekday(firstAvailable);
}
}
}, [mode, open, usedWeekdays])
async function handleSubmit(e?: React.FormEvent) {
e?.preventDefault()
if (!doctorId) {
@ -181,25 +216,25 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Criar disponibilidade</DialogTitle>
<DialogTitle>{mode === 'edit' ? 'Editar disponibilidade' : 'Criar disponibilidade'}</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 py-4">
<div className="grid grid-cols-2 gap-4">
<div>
<Label>Dia da semana</Label>
<Select value={weekday} onValueChange={(v) => setWeekday(v)}>
<Select value={weekday} onValueChange={(v) => setWeekday(v)} disabled={mode === 'edit'}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="segunda">Segunda</SelectItem>
<SelectItem value="terca">Terça</SelectItem>
<SelectItem value="quarta">Quarta</SelectItem>
<SelectItem value="quinta">Quinta</SelectItem>
<SelectItem value="sexta">Sexta</SelectItem>
<SelectItem value="sabado">Sábado</SelectItem>
<SelectItem value="domingo">Domingo</SelectItem>
<SelectItem value="segunda" disabled={usedWeekdays.has('segunda')}>Segunda</SelectItem>
<SelectItem value="terca" disabled={usedWeekdays.has('terca')}>Terça</SelectItem>
<SelectItem value="quarta" disabled={usedWeekdays.has('quarta')}>Quarta</SelectItem>
<SelectItem value="quinta" disabled={usedWeekdays.has('quinta')}>Quinta</SelectItem>
<SelectItem value="sexta" disabled={usedWeekdays.has('sexta')}>Sexta</SelectItem>
<SelectItem value="sabado" disabled={usedWeekdays.has('sabado')}>Sábado</SelectItem>
<SelectItem value="domingo" disabled={usedWeekdays.has('domingo')}>Domingo</SelectItem>
</SelectContent>
</Select>
</div>
@ -242,7 +277,7 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
<Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar disponibilidade'}</Button>
<Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : (mode === 'edit' ? 'Salvar alterações' : 'Criar disponibilidade')}</Button>
</DialogFooter>
</form>
</DialogContent>

106
susconecta/components/features/forms/calendar-registration-form.tsx
View File

@ -414,35 +414,31 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
} catch (e) {}
const generatedSet = new Set<string>();
// Helper to create ISO-like string without timezone conversion
const toLocalISOString = (date: Date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
};
windows.forEach((w: any) => {
try {
const perWindowStep = Number(w.slotMinutes) || stepMinutes;
const startMs = w.winStart.getTime();
const endMs = w.winEnd.getTime();
const lastStartMs = endMs - perWindowStep * 60000;
const backendSlotsInWindow = (av.slots || []).filter((s: any) => {
try {
const sd = new Date(s.datetime);
const sm = sd.getHours() * 60 + sd.getMinutes();
const wmStart = w.winStart.getHours() * 60 + w.winStart.getMinutes();
const wmEnd = w.winEnd.getHours() * 60 + w.winEnd.getMinutes();
return sm >= wmStart && sm <= wmEnd;
} catch (e) { return false; }
}).map((s: any) => new Date(s.datetime).getTime()).sort((a: number, b: number) => a - b);
if (!backendSlotsInWindow.length) {
let cursorMs = startMs;
while (cursorMs <= lastStartMs) {
generatedSet.add(new Date(cursorMs).toISOString());
cursorMs += perWindowStep * 60000;
}
} else {
const lastBackendMs = backendSlotsInWindow[backendSlotsInWindow.length - 1];
let cursorMs = lastBackendMs + perWindowStep * 60000;
while (cursorMs <= lastStartMs) {
generatedSet.add(new Date(cursorMs).toISOString());
cursorMs += perWindowStep * 60000;
}
// Always generate slots from the start of the window to the end
// This ensures slots start at the configured availability start time
let cursorMs = startMs;
while (cursorMs <= lastStartMs) {
generatedSet.add(toLocalISOString(new Date(cursorMs)));
cursorMs += perWindowStep * 60000;
}
} catch (e) {}
});
@ -463,15 +459,10 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
} catch (e) { return null; }
};
(existingInWindow || []).forEach((s: any) => {
const sm = findWindowSlotMinutes(s.datetime);
mergedMap.set(s.datetime, sm ? { ...s, slot_minutes: sm } : { ...s });
});
// Use only generated slots based on availability windows
Array.from(generatedSet).forEach((dt) => {
if (!mergedMap.has(dt)) {
const sm = findWindowSlotMinutes(dt) || stepMinutes;
mergedMap.set(dt, { datetime: dt, available: true, slot_minutes: sm });
}
const sm = findWindowSlotMinutes(dt) || stepMinutes;
mergedMap.set(dt, { datetime: dt, available: true, slot_minutes: sm });
});
const merged = Array.from(mergedMap.values()).sort((a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime());
@ -869,22 +860,39 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
<div className="md:col-span-6 flex items-start justify-end">
<div className="text-right text-sm">
{loadingPatient ? (
<div>Carregando dados do paciente...</div>
<div className="text-muted-foreground">Carregando dados do paciente...</div>
) : patientDetails ? (
patientDetails.error ? (
<div className="text-red-500">Erro ao carregar paciente: {String(patientDetails.error)}</div>
) : (
<div className="text-sm text-muted-foreground space-y-1">
<div><strong>CPF:</strong> {patientDetails.cpf || '-'}</div>
<div><strong>Telefone:</strong> {patientDetails.phone_mobile || patientDetails.telefone || '-'}</div>
<div><strong>E-mail:</strong> {patientDetails.email || '-'}</div>
<div><strong>Data de nascimento:</strong> {patientDetails.birth_date || '-'}</div>
<div className="grid grid-cols-1 gap-2 bg-muted/30 p-4 rounded-lg border border-border">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">CPF:</span>
<span className="text-sm font-medium text-foreground">{patientDetails.cpf || '-'}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Telefone:</span>
<span className="text-sm font-medium text-foreground">{patientDetails.phone_mobile || patientDetails.telefone || '-'}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">E-mail:</span>
<span className="text-sm font-medium text-foreground">{patientDetails.email || '-'}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">Data de nascimento:</span>
<span className="text-sm font-medium text-foreground">
{patientDetails.birth_date
? new Date(patientDetails.birth_date + 'T00:00:00').toLocaleDateString('pt-BR')
: '-'
}
</span>
</div>
</div>
)
) : (
<div className="text-xs text-muted-foreground">Paciente não vinculado</div>
)}
<div className="mt-1 text-xs text-muted-foreground">Para editar os dados do paciente, acesse a ficha do paciente.</div>
<div className="mt-2 text-xs text-muted-foreground italic">Para editar os dados do paciente, acesse a ficha do paciente.</div>
</div>
</div>
</div>
@ -1033,7 +1041,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
const d = new Date(s.datetime);
const hh = String(d.getHours()).padStart(2, '0');
const mm = String(d.getMinutes()).padStart(2, '0');
const dateOnly = d.toISOString().split('T')[0];
// Use local date components instead of toISOString to avoid timezone conversion
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const dateOnly = `${year}-${month}-${day}`;
return dateOnly === date && `${hh}:${mm}` === time;
} catch (e) {
return false;
@ -1054,7 +1066,8 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
}
const hh = String(dt.getHours()).padStart(2, '0');
const mm = String(dt.getMinutes()).padStart(2, '0');
const dateOnly = dt.toISOString().split('T')[0];
// Keep the existing appointmentDate, don't override it
const currentDate = (formData as any).appointmentDate;
// set duration from slot if available
const sel = (availableSlots || []).find((s) => s.datetime === value) as any;
const slotMinutes = sel && sel.slot_minutes ? Number(sel.slot_minutes) : null;
@ -1065,11 +1078,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
const endM = String(endDt.getMinutes()).padStart(2, '0');
const endStr = `${endH}:${endM}`;
if (slotMinutes) {
onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, duration_minutes: slotMinutes, endTime: endStr });
onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, duration_minutes: slotMinutes, endTime: endStr });
try { setLockedDurationFromSlot(true); } catch (e) {}
try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
} else {
onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, endTime: endStr });
onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, endTime: endStr });
try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
}
} catch (e) {
@ -1171,9 +1184,8 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
type="button"
className={`h-10 rounded-md border ${formData.startTime === `${hh}:${mm}` ? 'bg-blue-600 text-white' : 'bg-background'}`}
onClick={() => {
// when selecting a slot, set appointmentDate (if missing) and startTime and duration
const isoDate = dt.toISOString();
const dateOnly = isoDate.split('T')[0];
// when selecting a slot, keep the existing appointmentDate and only update time
const currentDate = (formData as any).appointmentDate;
const slotMinutes = s.slot_minutes || null;
// compute endTime based on duration
const durationForCalc = slotMinutes || (formData as any).duration_minutes || 0;
@ -1182,11 +1194,11 @@ export function CalendarRegistrationForm({ formData, onFormChange, createMode =
const endM = String(endDt.getMinutes()).padStart(2, '0');
const endStr = `${endH}:${endM}`;
if (slotMinutes) {
onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, duration_minutes: Number(slotMinutes), endTime: endStr });
onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, duration_minutes: Number(slotMinutes), endTime: endStr });
try { setLockedDurationFromSlot(true); } catch (e) {}
try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
} else {
onFormChange({ ...formData, appointmentDate: dateOnly, startTime: `${hh}:${mm}`, endTime: endStr });
onFormChange({ ...formData, appointmentDate: currentDate, startTime: `${hh}:${mm}`, endTime: endStr });
try { (lastAutoEndRef as any).current = endStr; } catch (e) {}
}
}}

6
susconecta/components/features/forms/doctor-registration-form.tsx
View File

@ -821,7 +821,7 @@ async function handleSubmit(ev: React.FormEvent) {
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal",
"w-full justify-start text-left font-normal hover:bg-muted hover:text-foreground",
!form.data_nascimento && "text-muted-foreground"
)}
>
@ -835,6 +835,10 @@ async function handleSubmit(ev: React.FormEvent) {
selected={form.data_nascimento ?? undefined}
onSelect={(date) => setField("data_nascimento", date ?? null)}
initialFocus
captionLayout="dropdown"
fromYear={1900}
toYear={new Date().getFullYear()}
disabled={(date) => date > new Date()}
/>
</PopoverContent>
</Popover>

86
susconecta/components/features/forms/exception-form.tsx
View File

@ -6,6 +6,8 @@ import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Calendar as CalendarComponent } from '@/components/ui/calendar'
import { Calendar } from 'lucide-react'
import { criarExcecao, DoctorExceptionCreate } from '@/lib/api'
import { useToast } from '@/hooks/use-toast'
@ -23,8 +25,22 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
const [kind, setKind] = useState<'bloqueio'|'liberacao'>('bloqueio')
const [reason, setReason] = useState<string>('')
const [submitting, setSubmitting] = useState(false)
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) {
@ -50,7 +66,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)
onOpenChange(false)
handleOpenChange(false)
} catch (err: any) {
console.error('Erro ao criar exceção:', err)
toast({ title: 'Erro', description: err?.message || String(err), variant: 'destructive' })
@ -60,16 +76,74 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Criar exceção</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 py-4">
<div>
<Label>Data</Label>
<Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label className="text-[13px]">Data *</Label>
<button
type="button"
aria-label="Abrir seletor de data"
onClick={() => setShowDatePicker(!showDatePicker)}
className="h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer"
>
<Calendar className="h-4 w-4" />
</button>
</div>
<div className="relative">
<Input
type="text"
placeholder="DD/MM/AAAA"
className="h-11 w-full rounded-md pl-3 pr-3 text-[13px] transition-colors hover:bg-muted/30"
value={date ? (() => {
try {
const [y, m, d] = String(date).split('-');
return `${d}/${m}/${y}`;
} catch (e) {
return '';
}
})() : ''}
readOnly
/>
{showDatePicker && (
<div className="absolute top-full left-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg p-3">
<CalendarComponent
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) {
return undefined;
}
})() : 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);
}
}}
disabled={(checkDate) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
return checkDate < today;
}}
/>
</div>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-4">
@ -102,7 +176,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
</div>
<DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
<Button variant="ghost" onClick={() => handleOpenChange(false)} disabled={submitting}>Cancelar</Button>
<Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar exceção'}</Button>
</DialogFooter>
</form>

6
susconecta/components/features/forms/patient-registration-form.tsx
View File

@ -453,7 +453,7 @@ export function PatientRegistrationForm({
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal",
"w-full justify-start text-left font-normal hover:bg-muted hover:text-foreground",
!form.birth_date && "text-muted-foreground"
)}
>
@ -467,6 +467,10 @@ export function PatientRegistrationForm({
selected={form.birth_date ?? undefined}
onSelect={(date) => setField("birth_date", date || null)}
initialFocus
captionLayout="dropdown"
fromYear={1900}
toYear={new Date().getFullYear()}
disabled={(date) => date > new Date()}
/>
</PopoverContent>
</Popover>

30
susconecta/components/features/general/event-manager.tsx
View File

@ -55,7 +55,7 @@ export interface EventManagerProps {
const defaultColors = [
{ name: "Blue", value: "blue", bg: "bg-blue-500", text: "text-blue-700" },
{ name: "Green", value: "green", bg: "bg-green-500", text: "text-green-700" },
{ name: "Green", value: "green", bg: "bg-[#10B981]", text: "text-green-700" },
{ name: "Purple", value: "purple", bg: "bg-purple-500", text: "text-purple-700" },
{ name: "Orange", value: "orange", bg: "bg-orange-500", text: "text-orange-700" },
{ name: "Pink", value: "pink", bg: "bg-pink-500", text: "text-pink-700" },
@ -336,11 +336,11 @@ export function EventManager({
{view === "list" && "Todos os eventos"}
</h2>
<div className="flex items-center gap-2">
<Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8">
<ChevronLeft className="h-4 w-4" />
<Button variant="outline" size="icon" onClick={() => navigateDate("prev")} className="h-8 w-8 hover:bg-primary/10 hover:border-primary transition-colors hover:!text-primary">
<ChevronLeft className="h-4 w-4 text-current" />
</Button>
<Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8">
<ChevronRight className="h-4 w-4" />
<Button variant="outline" size="icon" onClick={() => navigateDate("next")} className="h-8 w-8 hover:bg-primary/10 hover:border-primary transition-colors hover:!text-primary">
<ChevronRight className="h-4 w-4 text-current" />
</Button>
</div>
</div>
@ -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" ? "secondary" : "ghost"}
variant={view === "month" ? "default" : "ghost"}
size="sm"
onClick={() => setView("month")}
className="h-8"
className={cn("h-8", view !== "month" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
>
<Calendar className="h-4 w-4" />
<span className="ml-1">Mês</span>
</Button>
<Button
variant={view === "week" ? "secondary" : "ghost"}
variant={view === "week" ? "default" : "ghost"}
size="sm"
onClick={() => setView("week")}
className="h-8"
className={cn("h-8", view !== "week" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
>
<Grid3x3 className="h-4 w-4" />
<span className="ml-1">Semana</span>
</Button>
<Button
variant={view === "day" ? "secondary" : "ghost"}
variant={view === "day" ? "default" : "ghost"}
size="sm"
onClick={() => setView("day")}
className="h-8"
className={cn("h-8", view !== "day" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
>
<Clock className="h-4 w-4" />
<span className="ml-1">Dia</span>
</Button>
<Button
variant={view === "list" ? "secondary" : "ghost"}
variant={view === "list" ? "default" : "ghost"}
size="sm"
onClick={() => setView("list")}
className="h-8"
className={cn("h-8", view !== "list" && "hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white")}
>
<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 eventos..."]')
const el = document.querySelector<HTMLInputElement>('input[placeholder="Buscar pacientes..."]')
el?.focus()
}}
>
@ -441,7 +441,7 @@ export function EventManager({
{/* Input central com altura consistente e foco visível */}
<Input
placeholder="Buscar eventos..."
placeholder="Buscar paciente..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className={cn(

2
susconecta/components/ui/button.tsx
View File

@ -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-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
"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",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost:

2
susconecta/components/ui/popover.tsx
View File

@ -30,7 +30,7 @@ function PopoverContent({
align={align}
sideOffset={sideOffset}
className={cn(
"bg-white text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
className
)}
{...props}

28
susconecta/components/ui/upload-avatar.tsx
View File

@ -74,26 +74,28 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
: 'U'
return (
<div className="space-y-4">
<div className="flex items-center gap-4">
<Avatar className="h-20 w-20">
<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">
<AvatarImage src={currentAvatarUrl} alt={userName || 'Avatar'} />
<AvatarFallback className="text-lg">
{initials}
</AvatarFallback>
</Avatar>
</div>
<div className="space-y-2">
<div className="flex gap-2">
<div className="flex-1 w-full min-w-0">
<div className="flex flex-col gap-2">
<div className="flex gap-2 flex-wrap">
<Button
variant="outline"
size="sm"
onClick={() => document.getElementById('avatar-upload')?.click()}
disabled={isUploading}
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
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"
>
<Upload className="h-4 w-4 mr-2" />
{isUploading ? 'Enviando...' : 'Upload'}
<Upload className="h-4 w-4 mr-1 sm:mr-2" />
<span className="hidden xs:inline">{isUploading ? 'Enviando...' : 'Upload'}</span>
</Button>
{currentAvatarUrl && (
@ -101,10 +103,10 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
variant="outline"
size="sm"
onClick={handleDownload}
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
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"
>
<Download className="h-4 w-4 mr-2" />
Download
<Download className="h-4 w-4 mr-1 sm:mr-2" />
<span className="hidden xs:inline">Download</span>
</Button>
)}
</div>
@ -118,8 +120,8 @@ export function UploadAvatar({ userId, currentAvatarUrl, onAvatarChange, userNam
disabled={isUploading}
/>
<p className="text-xs text-muted-foreground">
Formatos aceitos: JPG, PNG, WebP (máx. 2MB)
<p className="text-xs text-muted-foreground leading-snug">
Formatos: JPG, PNG, WebP (máx. 2MB)
</p>
{error && (

22
susconecta/lib/api.ts
View File

@ -488,11 +488,10 @@ export async function deletarDisponibilidade(id: string): Promise<void> {
headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
});
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);
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}`);
}
// ===== EXCEÇÕES (Doctor Exceptions) =====
@ -580,14 +579,21 @@ 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'),
});
if (res.status === 204) return;
if (res.status === 200) return;
await parse(res as Response);
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}`);
}