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

Compare commits

base: RiseUP:main
Branches Tags
RiseUP:main
RiseUP:fix/visual-adjustments
RiseUP:hotfix/edit-report
RiseUP:develop
RiseUP:backup/visual-adjustments
RiseUP:feature/ajust-interface-Chat
RiseUP:feature/chatbot-ui-redesign
RiseUP:feature/add-report-notification
RiseUP:fix/mode-dark
RiseUP:backup/dark-mode
RiseUP:feature/agenteIa
RiseUP:fix/dark-mode
RiseUP:feature/add-search
RiseUP:fix/report-editor
..
compare: RiseUP:fix/mode-dark
Branches Tags
RiseUP:main
RiseUP:fix/visual-adjustments
RiseUP:hotfix/edit-report
RiseUP:develop
RiseUP:backup/visual-adjustments
RiseUP:feature/ajust-interface-Chat
RiseUP:feature/chatbot-ui-redesign
RiseUP:feature/add-report-notification
RiseUP:fix/mode-dark
RiseUP:backup/dark-mode
RiseUP:feature/agenteIa
RiseUP:fix/dark-mode
RiseUP:feature/add-search
RiseUP:fix/report-editor

No commits in common. "main" and "fix/mode-dark" have entirely different histories.
main ... fix/mode-d

36 changed files with 1203 additions and 3326 deletions
Show Stats Expand all files Collapse all files

379
README.md
View File

@ -1,379 +1,2 @@
<div align="center"> # riseup-squad20
# 🏥 MEDIConnect
### Plataforma de Gestão de Saúde Inteligente
*Combatendo o absenteísmo em clínicas e hospitais através de tecnologia e inovação*
[![Next.js](https://img.shields.io/badge/Next.js_15-000000?style=flat&logo=next.js&logoColor=white)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-2B7FFF?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React_19-2B7FFF?style=flat&logo=react&logoColor=white)](https://react.dev/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-2B7FFF?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![Supabase](https://img.shields.io/badge/Supabase-2B7FFF?style=flat&logo=supabase&logoColor=white)](https://supabase.com/)
</div>
---
## Índice
1. [Visão Geral](#-visão-geral)
2. [Problema e Solução](#-problema-e-solução)
3. [Funcionalidades](#-funcionalidades)
4. [Tecnologias](#️-tecnologias)
5. [Instalação](#-instalação)
6. [Como Usar](#-como-usar)
7. [Fluxos de Usuário](#-fluxos-de-usuário)
8. [Componentes Principais](#-componentes-principais)
9. [Contribuindo](#-contribuindo)
10. [Licença](#-licença)
11. [Contato](#-contato)
---
## Visão Geral
**MEDIConnect** é uma plataforma web moderna e intuitiva desenvolvida para revolucionar a gestão de saúde em clínicas e hospitais. Com foco na redução do absenteísmo (faltas em consultas), a plataforma oferece uma experiência completa para pacientes, profissionais de saúde e administradores.
### Diferenciais
- **Zoe IA Assistant**: Assistente virtual inteligente para suporte aos usuários
- **Interface Responsiva**: Design moderno e adaptável a qualquer dispositivo
- **Autenticação Segura**: Sistema robusto com perfis diferenciados
- **Performance**: Construído com Next.js 15 para máxima velocidade
- **UX/UI Premium**: Interface limpa e profissional voltada para área da saúde
---
## Problema e Solução
### O Problema
O **absenteísmo** (não comparecimento a consultas agendadas) é um problema crítico em clínicas e hospitais, causando:
- Desperdício de tempo dos profissionais
- Perda de receita para estabelecimentos
- Redução da eficiência operacional
- Impacto negativo no atendimento de outros pacientes
### Nossa Solução
MEDIConnect oferece um sistema inteligente de gestão que:
- Facilita o agendamento e reagendamento de consultas
- Permite visualização clara da agenda para profissionais
- Oferece assistência via IA para dúvidas e suporte
---
## Funcionalidades
### Para Pacientes
- **Dashboard Personalizado**: Visão geral de consultas e exames
- **Agendamento**: Sistema fácil de marcar consultas
- **Resultados de Exames**: Acesso seguro a laudos e resultados
- **Busca de Profissionais**: Encontre médicos por especialidade
- **Zoe IA Assistant**: Tire dúvidas 24/7 com nossa assistente virtual
### Para Profissionais
- **Dashboard Profissional**: Visão completa de atendimentos
- **Editor de Laudos**: Crie e edite laudos médicos de forma rápida
- **Gestão de Pacientes**: Acesse informações dos pacientes
- **Agenda**: Visualização clara de consultas
### Para Administradores
- **Dashboard Administrativo**: Métricas e estatísticas em tempo real
- **Relatórios Detalhados**: Análise de comparecimento e absenteísmo
- **Gestão Completa**: Gerencie pacientes, profissionais e agendamentos
- **Painel de Controle**: Visão 360° da operação da clínica
---
## Tecnologias
### Frontend (Atual)
- **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
- **[React 19](https://react.dev/)** - Biblioteca JavaScript para interfaces
- **[TypeScript](https://www.typescriptlang.org/)** - Tipagem estática para JavaScript
- **[Tailwind CSS](https://tailwindcss.com/)** - Framework CSS utilitário
- **[Shadcn/ui](https://ui.shadcn.com/)** - Componentes UI reutilizáveis
- **[React Hook Form](https://react-hook-form.com/)** - Gerenciamento de formulários
- **[Zod](https://zod.dev/)** - Validação de schemas
- **[date-fns](https://date-fns.org/)** - Manipulação de datas
### Backend (Integrado)
- **[Supabase](https://supabase.com/)** - Backend as a Service (PostgreSQL)
- **Authentication** - Sistema de autenticação completo
- **Storage** - Armazenamento de arquivos e documentos
- **REST API** - Endpoints integrados para todas as funcionalidades
### Ferramentas de Desenvolvimento
- **[ESLint](https://eslint.org/)** - Linter para código JavaScript/TypeScript
- **[PostCSS](https://postcss.org/)** - Transformação de CSS
- **[Autoprefixer](https://github.com/postcss/autoprefixer)** - Prefixos CSS automáticos
---
## Instalação
### Pré-requisitos
Certifique-se de ter instalado:
- **Node.js** 18.17 ou superior
- **npm**
- **Git**
### Passo a Passo
1. **Clone o repositório**
```bash
git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
cd susconecta
```
2. **Instale as dependências**
```bash
npm install
```
3. **Configuração de ambiente (desenvolvimento)**
> Observação: o projeto possui valores _fallback_ em `susconecta/lib/env-config.ts`, mas o recomendado é criar um arquivo `.env.local` não versionado com suas credenciais locais.
```env
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://seu-projeto.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=pk_... (anon key)
# Aplicação
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3000/api
```
**Boas práticas de segurança**
- Nunca exponha a `service_role` key no frontend.
- Proteja operações sensíveis com Row-Level Security (RLS) no Supabase ou mova-as para rotas/Edge Functions server-side.
- Não commite `.env.local` no repositório (adicione ao `.gitignore`).
4. **Inicie o servidor de desenvolvimento**
```bash
npm run dev
```
5. **Acesse a aplicação**
Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
---
## Como Usar
### Navegação Principal
#### Página Inicial
Acesse `/home` para conhecer a plataforma e suas funcionalidades.
#### Autenticação
O sistema possui três níveis de acesso:
- **Pacientes**: `/login-paciente`
- **Profissionais**: `/login-profissional`
- **Administradores**: `/login-admin`
#### Funcionalidades por Perfil
**Como Paciente:**
1. Faça login em `/login-paciente`
2. Acesse seu dashboard em `/paciente`
3. Agende consultas em `/consultas`
4. Visualize resultados em `/paciente/resultados`
5. Gerencie seu perfil em `/perfil`
**Como Profissional:**
1. Faça login em `/login-profissional`
2. Acesse seu dashboard em `/profissional`
3. Gerencie sua agenda em `/agenda`
4. Crie laudos em `/laudos-editor`
5. Visualize pacientes em `/pacientes`
**Como Administrador:**
1. Faça login em `/login-admin`
2. Acesse o painel em `/dashboard`
3. Visualize relatórios em `/dashboard/relatorios`
4. Gerencie o sistema completo
---
## Fluxos de Usuário
### Fluxo de Agendamento (Paciente)
```mermaid
graph LR
A[Login Paciente] --> B[Dashboard]
B --> C[Buscar Médico]
C --> D[Selecionar Especialidade]
D --> E[Escolher Horário]
E --> F[Confirmar Agendamento]
F --> G[Receber Confirmação]
```
### Fluxo de Atendimento (Profissional)
```mermaid
graph LR
A[Login Profissional] --> B[Ver Agenda]
B --> C[Realizar Consulta]
C --> D[Criar Laudo]
D --> E[Enviar para Paciente]
E --> F[Atualizar Status]
```
### Fluxo Administrativo
```mermaid
graph LR
A[Login Admin] --> B[Dashboard]
B --> C[Visualizar Métricas]
C --> D[Gerar Relatórios]
D --> E[Analisar Absenteísmo]
E --> F[Tomar Decisões]
```
---
## Componentes Principais
### Zoe IA Assistant
Assistente virtual inteligente que oferece:
- Suporte 24/7 aos usuários
- Respostas a dúvidas frequentes
- Upload de arquivos para análise
- Interação por voz
**Arquivos:**
- `components/ZoeIA/ai-assistant-interface.tsx`
- `components/ZoeIA/voice-powered-orb.tsx`
- `components/ZoeIA/demo.tsx`
### Sistema de Agendamento
Gerenciamento completo de consultas e exames:
- Calendário interativo
- Seleção de horários disponíveis
- Confirmação automática
- Lembretes e notificações
**Arquivos:**
- `components/features/agendamento/`
- `components/features/Calendario/`
- `app/(main-routes)/consultas/`
### Editor de Laudos
Ferramenta profissional para criação de laudos médicos:
- Interface intuitiva
- Frases pré-definidas
- Exportação em PDF
**Arquivos:**
- `app/laudos-editor/`
- `lib/laudo-exemplos.ts`
- `lib/laudo-notification.ts`
### Dashboard Analytics
Painéis administrativos com:
- Métricas em tempo real
- Gráficos interativos
- Relatórios de absenteísmo
- Análise de desempenho
**Arquivos:**
- `components/features/dashboard/`
- `app/(main-routes)/dashboard/`
- `lib/reportService.ts`
---
## Contribuindo
Contribuições são bem-vindas! Siga estes passos:
### 1. Fork o projeto
Clique no botão "Fork" no topo da página.
### 2. Clone seu fork
```bash
git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
cd susconecta
```
### 3. Crie uma branch
```bash
git checkout -b feature/nova-funcionalidade
```
### 4. Faça suas alterações
Desenvolva sua funcionalidade seguindo os padrões do projeto.
### 5. Commit suas mudanças
```bash
git add .
git commit -m "feat: adiciona nova funcionalidade X"
```
**Padrão de commits:**
- `feat:` Nova funcionalidade
- `fix:` Correção de bug
- `docs:` Documentação
- `style:` Formatação
- `refactor:` Refatoração
- `test:` Testes
- `chore:` Manutenção
### 6. Push para seu fork
```bash
git push origin feature/nova-funcionalidade
```
### 7. Abra um Pull Request
Descreva suas mudanças detalhadamente.
---
## Licença
Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
## Contato
**MEDIConnect Team**
- Website: [mediconnect.com](https://mediconecta-app-liart.vercel.app/)
- Email dos Desenvolvedores:
- [Jonas Francisco](mailto:jonastom478@gmail.com)
- [João Gustavo](mailto:jgcmendonca@gmail.com)
- [Maria Gabrielly](mailto:maria.gabrielly221106@gmail.com)
- [Pedro Gomes](mailto:pedrogomes5913@gmail.com)
---
<div align="center">
**Desenvolvido pelo squad 20**
*Transformando a gestão de saúde através da tecnologia*
[![Next.js](https://img.shields.io/badge/Powered%20by-Next.js-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
</div>

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

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

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

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

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

@ -9,6 +9,7 @@ import {
getUpcomingAppointments, getUpcomingAppointments,
getAppointmentsByDateRange, getAppointmentsByDateRange,
getNewUsersLastDays, getNewUsersLastDays,
getPendingReports,
getDisabledUsers, getDisabledUsers,
getDoctorsAvailabilityToday, getDoctorsAvailabilityToday,
getPatientById, getPatientById,
@ -17,7 +18,7 @@ import {
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Alert, AlertDescription } from '@/components/ui/alert'; import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertCircle, Calendar, Users, Stethoscope, Clock, AlertTriangle, Plus, ArrowLeft } from 'lucide-react'; import { AlertCircle, Calendar, Users, Stethoscope, Clock, FileText, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
import Link from 'next/link'; import Link from 'next/link';
import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form'; import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form';
import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form'; import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form';
@ -48,6 +49,7 @@ export default function DashboardPage() {
const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]); const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]);
const [appointmentData, setAppointmentData] = useState<any[]>([]); const [appointmentData, setAppointmentData] = useState<any[]>([]);
const [newUsers, setNewUsers] = useState<any[]>([]); const [newUsers, setNewUsers] = useState<any[]>([]);
const [pendingReports, setPendingReports] = useState<any[]>([]);
const [disabledUsers, setDisabledUsers] = useState<any[]>([]); const [disabledUsers, setDisabledUsers] = useState<any[]>([]);
const [doctors, setDoctors] = useState<Map<string, any>>(new Map()); const [doctors, setDoctors] = useState<Map<string, any>>(new Map());
const [patients, setPatients] = useState<Map<string, any>>(new Map()); const [patients, setPatients] = useState<Map<string, any>>(new Map());
@ -81,16 +83,18 @@ export default function DashboardPage() {
}); });
// 2. Carrega dados dos widgets em paralelo // 2. Carrega dados dos widgets em paralelo
const [upcomingAppts, appointmentDataRange, newUsersList, disabledUsersList] = await Promise.all([ const [upcomingAppts, appointmentDataRange, newUsersList, pendingReportsList, disabledUsersList] = await Promise.all([
getUpcomingAppointments(5), getUpcomingAppointments(5),
getAppointmentsByDateRange(7), getAppointmentsByDateRange(7),
getNewUsersLastDays(7), getNewUsersLastDays(7),
getPendingReports(5),
getDisabledUsers(5), getDisabledUsers(5),
]); ]);
setAppointments(upcomingAppts); setAppointments(upcomingAppts);
setAppointmentData(appointmentDataRange); setAppointmentData(appointmentDataRange);
setNewUsers(newUsersList); setNewUsers(newUsersList);
setPendingReports(pendingReportsList);
setDisabledUsers(disabledUsersList); setDisabledUsers(disabledUsersList);
// 3. Busca detalhes de pacientes e médicos para as próximas consultas // 3. Busca detalhes de pacientes e médicos para as próximas consultas
@ -260,7 +264,15 @@ export default function DashboardPage() {
</div> </div>
</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> </div>
{/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */} {/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */}
@ -282,12 +294,17 @@ export default function DashboardPage() {
<span className="hidden sm:inline">Novo Médico</span> <span className="hidden sm:inline">Novo Médico</span>
<span className="sm:hidden">Médico</span> <span className="sm:hidden">Médico</span>
</Button> </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>
</div> </div>
{/* 2. PRÓXIMAS CONSULTAS */} {/* 2. PRÓXIMAS CONSULTAS */}
<div className="grid grid-cols-1 gap-4 md:gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border"> <div className="lg:col-span-2 bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2> <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 ? ( {appointments.length > 0 ? (
<div className="space-y-2 sm:space-y-3"> <div className="space-y-2 sm:space-y-3">
@ -313,7 +330,28 @@ export default function DashboardPage() {
)} )}
</div> </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> </div>
{/* 4. NOVOS USUÁRIOS */} {/* 4. NOVOS USUÁRIOS */}

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

@ -2,11 +2,10 @@
"use client"; "use client";
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react"; import { FileDown, BarChart2, Users, CalendarCheck } from "lucide-react";
import jsPDF from "jspdf"; import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
import { import {
countAppointmentsToday, countAppointmentsToday,
@ -31,51 +30,10 @@ const FALLBACK_MEDICOS = [
// Helper Functions // Helper Functions
// ============================================================================ // ============================================================================
async function exportPDF(title: string, content: string, chartElementId?: string) { function exportPDF(title: string, content: string) {
const doc = new jsPDF(); const doc = new jsPDF();
let yPosition = 15; doc.text(title, 10, 10);
doc.text(content, 10, 20);
// 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`); doc.save(`${title.toLowerCase().replace(/ /g, "-")}.pdf`);
} }
@ -245,7 +203,7 @@ export default function RelatoriosPage() {
size="sm" size="sm"
variant="outline" variant="outline"
className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto" className="hover:bg-primary! hover:text-white! transition-colors w-full md:w-auto"
onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.", "chart-consultas")} onClick={() => exportPDF("Consultas por Período", "Resumo das consultas realizadas por período.")}
> >
<FileDown className="w-4 h-4 mr-1" /> Exportar PDF <FileDown className="w-4 h-4 mr-1" /> Exportar PDF
</Button> </Button>
@ -253,17 +211,15 @@ export default function RelatoriosPage() {
{loading ? ( {loading ? (
<div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</div> <div className="h-[220px] flex items-center justify-center text-muted-foreground">Carregando dados...</div>
) : ( ) : (
<div id="chart-consultas"> <ResponsiveContainer width="100%" height={220}>
<ResponsiveContainer width="100%" height={220}> <BarChart data={consultasData}>
<BarChart data={consultasData}> <CartesianGrid strokeDasharray="3 3" />
<CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="periodo" />
<XAxis dataKey="periodo" /> <YAxis />
<YAxis /> <Tooltip />
<Tooltip /> <Bar dataKey="consultas" fill="#6366f1" name="Consultas" />
<Bar dataKey="consultas" fill="#6366f1" name="Consultas" /> </BarChart>
</BarChart> </ResponsiveContainer>
</ResponsiveContainer>
</div>
)} )}
</div> </div>
</div> </div>
@ -273,10 +229,9 @@ export default function RelatoriosPage() {
<div className="bg-card border border-border rounded-lg shadow p-6"> <div className="bg-card border border-border rounded-lg shadow p-6">
<div className="flex items-center justify-between mb-2"> <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> <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Pacientes Mais Atendidos</h2>
<Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.", "table-pacientes")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button> <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Pacientes Mais Atendidos", "Lista dos pacientes mais atendidos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
</div> </div>
<div id="table-pacientes"> <table className="w-full text-sm mt-4">
<table className="w-full text-sm mt-4">
<thead> <thead>
<tr className="text-muted-foreground"> <tr className="text-muted-foreground">
<th className="text-left font-medium">Paciente</th> <th className="text-left font-medium">Paciente</th>
@ -302,17 +257,15 @@ export default function RelatoriosPage() {
)} )}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
{/* Médicos mais produtivos */} {/* Médicos mais produtivos */}
<div className="bg-card border border-border rounded-lg shadow p-6"> <div className="bg-card border border-border rounded-lg shadow p-6">
<div className="flex items-center justify-between mb-2"> <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> <h2 className="font-semibold text-lg text-foreground flex items-center gap-2"><Users className="w-5 h-5" /> Médicos Mais Produtivos</h2>
<Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.", "table-medicos")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button> <Button size="sm" variant="outline" className="hover:bg-primary! hover:text-white! transition-colors" onClick={() => exportPDF("Médicos Mais Produtivos", "Lista dos médicos mais produtivos.")}> <FileDown className="w-4 h-4 mr-1" /> Exportar PDF</Button>
</div> </div>
<div id="table-medicos"> <table className="w-full text-sm mt-4">
<table className="w-full text-sm mt-4">
<thead> <thead>
<tr className="text-muted-foreground"> <tr className="text-muted-foreground">
<th className="text-left font-medium">Médico</th> <th className="text-left font-medium">Médico</th>
@ -338,7 +291,6 @@ export default function RelatoriosPage() {
)} )}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>

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

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

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

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

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

@ -297,7 +297,7 @@ export default function PacientesPage() {
aria-label="Ordenar por" aria-label="Ordenar por"
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)} onChange={(e) => setSortBy(e.target.value as any)}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="name_asc">A–Z</option> <option value="name_asc">A–Z</option>
<option value="name_desc">Z–A</option> <option value="name_desc">Z–A</option>
@ -539,27 +539,27 @@ export default function PacientesPage() {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label className="text-left sm:text-right">Nome</Label> <Label className="text-right">Nome</Label>
<span className="col-span-1 sm:col-span-3 font-medium">{viewingPatient.full_name}</span> <span className="col-span-3 font-medium">{viewingPatient.full_name}</span>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label className="text-left sm:text-right">CPF</Label> <Label className="text-right">CPF</Label>
<span className="col-span-1 sm:col-span-3">{viewingPatient.cpf}</span> <span className="col-span-3">{viewingPatient.cpf}</span>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label className="text-left sm:text-right">Telefone</Label> <Label className="text-right">Telefone</Label>
<span className="col-span-1 sm:col-span-3">{viewingPatient.phone_mobile}</span> <span className="col-span-3">{viewingPatient.phone_mobile}</span>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label className="text-left sm:text-right">Endereço</Label> <Label className="text-right">Endereço</Label>
<span className="col-span-1 sm:col-span-3"> <span className="col-span-3">
{`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`} {`${viewingPatient.street || ''}, ${viewingPatient.number || ''} - ${viewingPatient.neighborhood || ''}, ${viewingPatient.city || ''} - ${viewingPatient.state || ''}`}
</span> </span>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-4 items-start sm:items-center gap-2 sm:gap-4"> <div className="grid grid-cols-4 items-center gap-4">
<Label className="text-left sm:text-right">Observações</Label> <Label className="text-right">Observações</Label>
<span className="col-span-1 sm:col-span-3">{viewingPatient.notes || "Nenhuma"}</span> <span className="col-span-3">{viewingPatient.notes || "Nenhuma"}</span>
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>

22
susconecta/app/audio-teste/page.tsx
View File

@ -1,22 +0,0 @@
"use client";
import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
import { useTheme } from "next-themes";
import React from "react";
export default function VozPage() {
const { theme } = useTheme();
const isDark = theme === "dark";
// Classes condicionais para manter coerência com o chat
const bgClass = isDark
? "bg-gray-900 text-white"
: "bg-gray-50 text-gray-900";
return (
<div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
<AIVoiceFlow />
</div>
);
}

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

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

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

@ -12,7 +12,6 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; 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'; import { FileText, Settings, Eye, ArrowLeft, BookOpen } from 'lucide-react';
export default function EditarLaudoPage() { export default function EditarLaudoPage() {
@ -30,7 +29,6 @@ export default function EditarLaudoPage() {
const [activeTab, setActiveTab] = useState('editor'); const [activeTab, setActiveTab] = useState('editor');
const [showPreview, setShowPreview] = useState(false); const [showPreview, setShowPreview] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [showExitDialog, setShowExitDialog] = useState(false);
// Campos do laudo // Campos do laudo
const [campos, setCampos] = useState({ const [campos, setCampos] = useState({
@ -71,45 +69,34 @@ export default function EditarLaudoPage() {
// Estado para rastrear alinhamento ativo // Estado para rastrear alinhamento ativo
const [activeAlignment, setActiveAlignment] = useState('left'); const [activeAlignment, setActiveAlignment] = useState('left');
// Salvar conteúdo no localStorage sempre que muda (com debounce) // Salvar conteúdo no localStorage sempre que muda
useEffect(() => { useEffect(() => {
const timeoutId = setTimeout(() => { if (content && laudoId) {
if (laudoId) { localStorage.setItem(`laudo-draft-${laudoId}`, content);
// Capturar conteúdo atual do editor antes de salvar }
const currentContent = editorRef.current?.innerHTML || content; }, [content, laudoId]);
const draft = { // Sincronizar conteúdo com o editor
content: currentContent, useEffect(() => {
campos, if (editorRef.current && content) {
lastSaved: new Date().toISOString(), if (editorRef.current.innerHTML !== content) {
}; editorRef.current.innerHTML = content;
localStorage.setItem(`laudo-draft-${laudoId}`, JSON.stringify(draft));
} }
}, 1000); // Aguarda 1 segundo após última mudança
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);
} }
}, [content]);
// Se estiver voltando para o editor, restaurar conteúdo
if (newTab === 'editor') { // Restaurar conteúdo quando volta para a aba editor
setTimeout(() => { useEffect(() => {
if (editorRef.current && content) { if (activeTab === 'editor' && editorRef.current && content) {
editorRef.current.innerHTML = content; editorRef.current.focus();
} const range = document.createRange();
}, 0); const sel = window.getSelection();
range.setStart(editorRef.current, editorRef.current.childNodes.length);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
} }
}, [activeTab]);
setActiveTab(newTab);
};
// Atualizar formatações ativas ao mudar seleção // Atualizar formatações ativas ao mudar seleção
useEffect(() => { useEffect(() => {
@ -175,49 +162,25 @@ export default function EditarLaudoPage() {
mostrarAssinatura: !r.hide_signature, mostrarAssinatura: !r.hide_signature,
}); });
// Preencher conteúdo - verificar todos os possíveis nomes de campo // Preencher conteúdo
const contentHtml = r.content_html || r.conteudo_html || r.contentHtml || r.conteudo || r.content || ''; const contentHtml = r.content_html || r.conteudo_html || '';
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 // Verificar se existe rascunho salvo no localStorage
let finalContent = contentHtml; const draftContent = typeof window !== 'undefined' ? localStorage.getItem(`laudo-draft-${laudoId}`) : null;
let finalCampos = { const finalContent = draftContent || contentHtml;
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,
};
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); setContent(finalContent);
console.log('[EditarLaudoPage] Setting content state with length:', finalContent.length); if (editorRef.current) {
editorRef.current.innerHTML = finalContent;
// O innerHTML será setado no useEffect separado abaixo // 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);
}
} catch (err) { } catch (err) {
console.warn('Erro ao carregar laudo:', err); console.warn('Erro ao carregar laudo:', err);
toast({ toast({
@ -232,27 +195,6 @@ export default function EditarLaudoPage() {
fetchLaudo(); fetchLaudo();
}, [laudoId, token, toast]); }, [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);
// Só injetar se o conteúdo do editor estiver vazio ou muito diferente
const currentContent = editorRef.current.innerHTML;
if (!currentContent || currentContent.length === 0) {
editorRef.current.innerHTML = content;
// Mover cursor para o final
const range = document.createRange();
const sel = window.getSelection();
if (editorRef.current.childNodes.length > 0) {
range.selectNodeContents(editorRef.current);
range.collapse(false); // false = colapsar no final
sel?.removeAllRanges();
sel?.addRange(range);
}
}
}
}, [content, loading]);
// Formatação com contenteditable // Formatação com contenteditable
const applyFormat = (command: string, value?: string) => { const applyFormat = (command: string, value?: string) => {
document.execCommand(command, false, value || undefined); document.execCommand(command, false, value || undefined);
@ -390,7 +332,7 @@ export default function EditarLaudoPage() {
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => setShowExitDialog(true)} onClick={() => router.back()}
className="p-0 h-auto flex-shrink-0" className="p-0 h-auto flex-shrink-0"
> >
<ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" /> <ArrowLeft className="w-4 sm:w-5 h-4 sm:h-5" />
@ -415,7 +357,7 @@ export default function EditarLaudoPage() {
{/* Tabs */} {/* Tabs */}
<div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0"> <div className="flex border-b border-border bg-card overflow-x-auto flex-shrink-0">
<button <button
onClick={() => handleTabChange('editor')} onClick={() => setActiveTab('editor')}
className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${ className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
activeTab === 'editor' activeTab === 'editor'
? 'border-blue-500 text-blue-600' ? 'border-blue-500 text-blue-600'
@ -426,7 +368,7 @@ export default function EditarLaudoPage() {
Editor Editor
</button> </button>
<button <button
onClick={() => handleTabChange('campos')} onClick={() => setActiveTab('campos')}
className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${ className={`px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
activeTab === 'campos' activeTab === 'campos'
? 'border-blue-500 text-blue-600' ? 'border-blue-500 text-blue-600'
@ -597,10 +539,7 @@ export default function EditarLaudoPage() {
<div <div
ref={editorRef} ref={editorRef}
contentEditable contentEditable
onInput={(e) => { onInput={(e) => setContent(e.currentTarget.innerHTML)}
// Capturar conteúdo sem perder posição do cursor
setContent(e.currentTarget.innerHTML);
}}
onPaste={(e) => { onPaste={(e) => {
e.preventDefault(); e.preventDefault();
const text = e.clipboardData.getData('text/plain'); const text = e.clipboardData.getData('text/plain');
@ -772,7 +711,7 @@ export default function EditarLaudoPage() {
Edite as informações do laudo e salve as alterações. Edite as informações do laudo e salve as alterações.
</div> </div>
<div className="flex gap-2 w-full sm:w-auto"> <div className="flex gap-2 w-full sm:w-auto">
<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"> <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">
Cancelar Cancelar
</Button> </Button>
<Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10"> <Button onClick={handleSave} className="flex-1 sm:flex-none text-xs sm:text-sm h-8 sm:h-10">
@ -781,66 +720,6 @@ export default function EditarLaudoPage() {
</div> </div>
</div> </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> </div>
</ProtectedRoute> </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 { useTheme } from 'next-themes'
import Image from 'next/image' import Image from 'next/image'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { ArrowLeft, Printer, Download } from 'lucide-react' import { ArrowLeft, Printer, Download, MoreVertical } from 'lucide-react'
import { buscarRelatorioPorId, getDoctorById, buscarMedicosPorIds, buscarPacientePorId } from '@/lib/api' import { buscarRelatorioPorId, getDoctorById, buscarMedicosPorIds, buscarPacientePorId } from '@/lib/api'
import { ENV_CONFIG } from '@/lib/env-config' import { ENV_CONFIG } from '@/lib/env-config'
import ProtectedRoute from '@/components/shared/ProtectedRoute' import ProtectedRoute from '@/components/shared/ProtectedRoute'
@ -355,6 +355,18 @@ export default function LaudoPage() {
> >
<Printer className="w-5 h-5" /> <Printer className="w-5 h-5" />
</Button> </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> </div>
</div> </div>

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

@ -602,7 +602,7 @@ export default function PacientePage() {
{/* Cards com Informações */} {/* Cards com Informações */}
<div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 md:grid-cols-2"> <div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 md:grid-cols-2">
<Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md"> <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3"> <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
<div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary"> <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
<Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden /> <Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@ -616,7 +616,7 @@ export default function PacientePage() {
</div> </div>
</Card> </Card>
<Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md"> <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
<div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3"> <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
<div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary"> <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
<FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden /> <FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@ -1698,6 +1698,7 @@ export default function PacientePage() {
</div> </div>
<div className="flex gap-2 w-full md:w-auto flex-col sm:flex-row"> <div className="flex gap-2 w-full md:w-auto flex-col sm:flex-row">
<Button variant="outline" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { router.push(`/laudos/${r.id}`); }}>{strings.visualizarLaudo}</Button> <Button variant="outline" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { router.push(`/laudos/${r.id}`); }}>{strings.visualizarLaudo}</Button>
<Button variant="secondary" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { try { await navigator.clipboard.writeText(JSON.stringify(r)); setToast({ type: 'success', msg: 'Laudo copiado.' }) } catch { setToast({ type: 'error', msg: 'Falha ao copiar.' }) } }}>{strings.compartilhar}</Button>
</div> </div>
</div> </div>
))} ))}
@ -1762,7 +1763,7 @@ export default function PacientePage() {
</div> </div>
{/* Grid de 3 colunas (2 + 1) */} {/* Grid de 3 colunas (2 + 1) */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6"> <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6">
{/* Coluna Esquerda - Informações Pessoais */} {/* Coluna Esquerda - Informações Pessoais */}
<div className="lg:col-span-2 space-y-4 sm:space-y-5 md:space-y-6"> <div className="lg:col-span-2 space-y-4 sm:space-y-5 md:space-y-6">
{/* Informações Pessoais */} {/* Informações Pessoais */}
@ -1888,20 +1889,31 @@ export default function PacientePage() {
<div className="border border-border rounded-lg p-3 sm:p-4 md:p-6"> <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> <h3 className="text-base sm:text-lg md:text-lg font-semibold mb-3 sm:mb-4">Foto do Perfil</h3>
<div className="flex flex-col items-center gap-3 sm:gap-4"> {isEditingProfile ? (
<Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28"> <div className="space-y-3 sm:space-y-4">
<AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} /> <UploadAvatar
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-xl md:text-2xl font-bold"> userId={profileData.id}
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'} currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
</AvatarFallback> onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
</Avatar> userName={profileData.nome}
/>
<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 className="flex flex-col items-center gap-3 sm:gap-4">
<Avatar className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28">
<AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-xl md:text-2xl font-bold">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
</AvatarFallback>
</Avatar>
<div className="text-center space-y-2">
<p className="text-xs sm:text-sm md:text-base text-muted-foreground">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
</p>
</div>
</div>
)}
</div> </div>
</div> </div>
</div> </div>
@ -1914,35 +1926,23 @@ export default function PacientePage() {
<ProtectedRoute requiredUserType={["paciente"]}> <ProtectedRoute requiredUserType={["paciente"]}>
<div className="container mx-auto px-2 sm:px-4 py-6 sm:py-8"> <div className="container mx-auto px-2 sm:px-4 py-6 sm:py-8">
{/* Header com informações do paciente */} {/* Header com informações do paciente */}
<header className="sticky top-0 z-40 bg-card shadow-md rounded-lg border border-border p-2 sm:p-3 md:p-4 mb-4 sm:mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4"> <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-3 min-w-0 flex-1"> <div className="flex items-center gap-2 sm:gap-4">
{/* Logo MEDIConnect */} <Avatar className="h-10 w-10 sm:h-12 sm:w-12 md:h-12 md:w-12">
<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'} /> <AvatarImage src={profileData.foto_url} alt={profileData.nome || 'Avatar'} />
<AvatarFallback className="bg-primary text-white font-bold text-xs sm:text-sm">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback> <AvatarFallback className="bg-primary text-white font-bold text-sm sm:text-base">{profileData.nome?.charAt(0) || 'P'}</AvatarFallback>
</Avatar> </Avatar>
<div className="flex flex-col min-w-0 flex-1"> <div className="flex flex-col min-w-0">
<span className="text-xs text-muted-foreground truncate">Conta do paciente</span> <span className="text-xs sm:text-sm md:text-sm text-muted-foreground">Conta do paciente</span>
<span className="font-bold text-xs sm:text-sm leading-tight truncate">{profileData.nome || 'Paciente'}</span> <span className="font-bold text-sm sm:text-base md:text-lg leading-none">{profileData.nome || 'Paciente'}</span>
<span className="text-xs text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span> <span className="text-xs sm:text-sm md:text-sm text-muted-foreground truncate">{profileData.email || 'Email não disponível'}</span>
</div> </div>
</div> </div>
<div className="flex items-center gap-2 w-full sm:w-auto shrink-0"> <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
<SimpleThemeToggle /> <SimpleThemeToggle />
<Button asChild variant="outline" className="hover:bg-blue-500 hover:text-white transition-colors flex-1 sm:flex-none text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3"> <Button asChild variant="outline" className="hover:bg-primary! hover:text-white! hover:border-primary! transition-colors flex-1 sm:flex-none text-xs sm:text-sm">
<Link href="/"> <Link href="/">
<Home className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">Início</span> <Home className="h-3 w-3 sm:h-4 sm:w-4 mr-1" /> Início
</Link> </Link>
</Button> </Button>
<Button <Button
@ -1950,9 +1950,9 @@ export default function PacientePage() {
variant="outline" variant="outline"
aria-label={strings.sair} aria-label={strings.sair}
disabled={loading} disabled={loading}
className="text-destructive border-destructive hover:bg-destructive/20 hover:text-destructive transition-colors text-xs sm:text-sm py-1.5 sm:py-2 h-8 sm:h-9 px-2 sm:px-3" className="text-destructive border-destructive hover:bg-destructive! hover:text-white! hover:border-destructive! transition-colors"
> >
<LogOut className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline ml-1">{strings.sair}</span> <LogOut className="h-4 w-4 mr-1" /> {strings.sair}
</Button> </Button>
</div> </div>
</header> </header>
@ -1960,8 +1960,8 @@ export default function PacientePage() {
{/* Layout com sidebar e conteúdo */} {/* Layout com sidebar e conteúdo */}
<div className="grid grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[220px_1fr] gap-4 sm:gap-5 md:gap-6"> <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[220px_1fr] gap-4 sm:gap-5 md:gap-6">
{/* Sidebar vertical - sticky */} {/* Sidebar vertical - sticky */}
<aside className="sticky top-24 h-fit md:top-24 z-40"> <aside className="sticky top-24 h-fit md:top-24">
<nav aria-label="Navegação do dashboard" className="relative isolate bg-card shadow-lg rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-50"> <nav aria-label="Navegação do dashboard" className="bg-card shadow-md rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-30">
<div className="grid grid-cols-2 md:grid-cols-1 gap-1 sm:gap-1.5"> <div className="grid grid-cols-2 md:grid-cols-1 gap-1 sm:gap-1.5">
<Button <Button
variant={tab==='dashboard'?'default':'ghost'} variant={tab==='dashboard'?'default':'ghost'}

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

@ -9,7 +9,7 @@ import { Card } from '@/components/ui/card'
import { Toggle } from '@/components/ui/toggle' import { Toggle } from '@/components/ui/toggle'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { import {
@ -31,7 +31,6 @@ import {
buscarPacientes, buscarPacientes,
listarDisponibilidades, listarDisponibilidades,
listarExcecoes, listarExcecoes,
getAvatarPublicUrl,
type Medico, type Medico,
} from '@/lib/api' } from '@/lib/api'
@ -67,9 +66,6 @@ export default function ResultadosClient() {
const [patientId, setPatientId] = useState<string | null>(null) const [patientId, setPatientId] = useState<string | null>(null)
const [medicos, setMedicos] = useState<Medico[]>([]) const [medicos, setMedicos] = useState<Medico[]>([])
const [loadingMedicos, setLoadingMedicos] = useState(false) const [loadingMedicos, setLoadingMedicos] = useState(false)
// Avatares dos médicos
const [medicosAvatars, setMedicosAvatars] = useState<Record<string, string>>({})
// agenda por médico e loading por médico // agenda por médico e loading por médico
const [agendaByDoctor, setAgendaByDoctor] = useState<Record<string, DayAgenda[]>>({}) const [agendaByDoctor, setAgendaByDoctor] = useState<Record<string, DayAgenda[]>>({})
@ -254,22 +250,6 @@ export default function ResultadosClient() {
return () => { mounted = false } return () => { mounted = false }
}, [medicoFiltro, paramsSync]) }, [medicoFiltro, paramsSync])
// Carregar avatares dos médicos quando a lista mudar
useEffect(() => {
if (!medicos || medicos.length === 0) return
const avatars: Record<string, string> = {}
// Gerar URLs dos avatares sem fazer verificação (deixar o browser carregar)
for (const medico of medicos) {
if (!medico.id) continue
// Usar jpg como padrão (mais comum)
avatars[medico.id] = getAvatarPublicUrl(medico.id, 'jpg')
}
setMedicosAvatars(avatars)
}, [medicos])
// 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia // 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> { async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
if (!doctorId) return null if (!doctorId) return null
@ -876,6 +856,17 @@ export default function ResultadosClient() {
</Select> </Select>
</div> </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 */} {/* Voltar */}
<div className="sm:col-span-12"> <div className="sm:col-span-12">
<Button <Button
@ -909,7 +900,7 @@ export default function ResultadosClient() {
const cidade = medico.city || '—' const cidade = medico.city || '—'
const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —' const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —'
// Usar os próxios 3 horários já memoizados // Usar os próximos 3 horários já memoizados
const proximos3Horarios = proximosHorariosPorMedico[id] || [] const proximos3Horarios = proximosHorariosPorMedico[id] || []
return ( return (
@ -920,7 +911,6 @@ export default function ResultadosClient() {
{/* Header com Avatar, Nome, Especialidade e Botão Ver Perfil */} {/* Header com Avatar, Nome, Especialidade e Botão Ver Perfil */}
<div className="flex gap-4 items-start"> <div className="flex gap-4 items-start">
<Avatar className="h-20 w-20 border-2 border-primary/20 bg-primary/5 flex-shrink-0"> <Avatar className="h-20 w-20 border-2 border-primary/20 bg-primary/5 flex-shrink-0">
{medicosAvatars[id] && <AvatarImage src={medicosAvatars[id]} alt={nome} />}
<AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold"> <AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">
{nome.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()} {nome.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
</AvatarFallback> </AvatarFallback>
@ -990,7 +980,7 @@ export default function ResultadosClient() {
{/* Ações */} {/* Ações */}
<div className="flex gap-2 pt-2"> <div className="flex gap-2 pt-2">
<Button <Button
className="w-full h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90" className="flex-1 h-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90"
onClick={async () => { onClick={async () => {
setMoreTimesForDoctor(id) setMoreTimesForDoctor(id)
void fetchSlotsForDate(id, moreTimesDate) void fetchSlotsForDate(id, moreTimesDate)
@ -998,6 +988,16 @@ export default function ResultadosClient() {
> >
Agendar Agendar
</Button> </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> </div>
</Card> </Card>
) )
@ -1030,11 +1030,11 @@ export default function ResultadosClient() {
</div> </div>
<div className="flex items-center gap-2 w-full sm:w-auto"> <div className="flex items-center gap-2 w-full sm:w-auto">
<Button variant="outline" size="sm" onClick={() => setCurrentPage(1)} disabled={currentPage === 1} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Primeira</Button> <Button variant="outline" size="sm" onClick={() => setCurrentPage(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-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Anterior</Button> <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p - 1))} disabled={currentPage === 1} className="hover:bg-primary! hover:text-white!">Anterior</Button>
<span className="text-sm text-muted-foreground">Página {currentPage} de {totalPages}</span> <span className="text-sm text-muted-foreground">Página {currentPage} de {totalPages}</span>
<Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages} className="hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Próxima</Button> <Button variant="outline" size="sm" onClick={() => setCurrentPage(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-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white">Última</Button> <Button variant="outline" size="sm" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages} className="hover:bg-primary! hover:text-white!">Última</Button>
</div> </div>
</div> </div>
)} )}
@ -1165,17 +1165,8 @@ export default function ResultadosClient() {
</DialogHeader> </DialogHeader>
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<input <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)} />
type="date" <Button className="h-10" onClick={async () => { if (moreTimesForDoctor) await fetchSlotsForDate(moreTimesForDoctor, moreTimesDate) }}>Buscar horários</Button>
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>
<div className="mt-2"> <div className="mt-2">
@ -1184,14 +1175,12 @@ export default function ResultadosClient() {
) : moreTimesException ? ( ) : moreTimesException ? (
<div className="text-sm text-red-500">{moreTimesException}</div> <div className="text-sm text-red-500">{moreTimesException}</div>
) : (moreTimesSlots.length ? ( ) : (moreTimesSlots.length ? (
<div className="max-h-[60vh] overflow-y-auto pr-2"> <div className="grid grid-cols-3 gap-2">
<div className="grid grid-cols-3 gap-2"> {moreTimesSlots.map(s => (
{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); } }}>
<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}
{s.label} </button>
</button> ))}
))}
</div>
</div> </div>
) : ( ) : (
<div className="text-sm text-muted-foreground">Sem horários para a data selecionada.</div> <div className="text-sm text-muted-foreground">Sem horários para a data selecionada.</div>

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

@ -9,18 +9,15 @@ import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { useAvatarUrl } from "@/hooks/useAvatarUrl"; import { useAvatarUrl } from "@/hooks/useAvatarUrl";
import { UploadAvatar } from '@/components/ui/upload-avatar'; import { UploadAvatar } from '@/components/ui/upload-avatar';
import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico, listarDisponibilidades, DoctorAvailability, deletarDisponibilidade, listarExcecoes, DoctorException, deletarExcecao } from "@/lib/api"; import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesPorIds, buscarMedicoPorId, buscarMedicosPorIds, buscarMedicos, listarAgendamentos, type Paciente, buscarRelatorioPorId, atualizarMedico } from "@/lib/api";
import { ENV_CONFIG } from '@/lib/env-config'; import { ENV_CONFIG } from '@/lib/env-config';
import { useReports } from "@/hooks/useReports"; import { useReports } from "@/hooks/useReports";
import { CreateReportData } from "@/types/report-types"; import { CreateReportData } from "@/types/report-types";
import { createAndNotifyReport } from "@/lib/reportService";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select"; 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 { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
import { import {
Table, Table,
@ -67,29 +64,6 @@ const colorsByType = {
Oftalmologia: "#2ecc71" 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) // Helpers para normalizar dados de paciente (suporta schema antigo e novo)
const getPatientName = (p: any) => p?.full_name ?? p?.nome ?? ''; const getPatientName = (p: any) => p?.full_name ?? p?.nome ?? '';
const getPatientCpf = (p: any) => p?.cpf ?? ''; const getPatientCpf = (p: any) => p?.cpf ?? '';
@ -157,17 +131,6 @@ const ProfissionalPage = () => {
const [isEditingProfile, setIsEditingProfile] = useState(false); const [isEditingProfile, setIsEditingProfile] = useState(false);
const [doctorId, setDoctorId] = useState<string | null>(null); 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 // Hook para carregar automaticamente o avatar do médico
const { avatarUrl: retrievedAvatarUrl } = useAvatarUrl(doctorId); const { avatarUrl: retrievedAvatarUrl } = useAvatarUrl(doctorId);
// Removemos o placeholder extenso — inicializamos com valores minimalistas e vazios. // Removemos o placeholder extenso — inicializamos com valores minimalistas e vazios.
@ -322,48 +285,6 @@ const ProfissionalPage = () => {
} }
}, [retrievedAvatarUrl]); }, [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 // Estados para campos principais da consulta
const [consultaAtual, setConsultaAtual] = useState({ const [consultaAtual, setConsultaAtual] = useState({
@ -1294,56 +1215,14 @@ const ProfissionalPage = () => {
// helper to load laudos for the patients assigned to the logged-in user // helper to load laudos for the patients assigned to the logged-in user
const loadAssignedLaudos = async () => { const loadAssignedLaudos = async () => {
try { 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 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) : []; const patientIds = Array.isArray(assignments) ? assignments.map(a => String(a.patient_id)).filter(Boolean) : [];
if (patientIds.length === 0) { if (patientIds.length === 0) {
console.log('[LaudoManager] Nenhum paciente atribuído, laudos vazios');
setLaudos([]); setLaudos([]);
return; return;
} }
console.log('[LaudoManager] Carregando laudos de', patientIds.length, 'pacientes atribuídos');
try { try {
const reportsMod = await import('@/lib/reports'); const reportsMod = await import('@/lib/reports');
if (typeof reportsMod.listarRelatoriosPorPacientes === 'function') { if (typeof reportsMod.listarRelatoriosPorPacientes === 'function') {
@ -1435,7 +1314,7 @@ const ProfissionalPage = () => {
return; return;
} }
} catch (e) { } catch (e) {
console.warn('[LaudoManager] erro ao carregar laudos:', e); console.warn('[LaudoManager] erro ao carregar laudos para pacientes atribuídos:', e);
setLaudos(reports || []); setLaudos(reports || []);
} }
}; };
@ -1516,13 +1395,13 @@ const ProfissionalPage = () => {
{/* Filtros */} {/* Filtros */}
<div className="p-4 border-b border-border"> <div className="p-4 border-b border-border">
<div className="flex flex-wrap items-start gap-4"> <div className="flex flex-wrap items-center gap-4">
<div className="relative flex-1 min-w-[200px]"> <div className="relative flex-1 min-w-[200px]">
{/* Search input integrado com busca por ID */} {/* Search input integrado com busca por ID */}
<SearchBox /> <SearchBox />
</div> </div>
<div className="flex items-center gap-2 mt-0"> <div className="flex items-center gap-2">
<div className="flex items-center gap-1 text-sm"> <div className="flex items-center gap-1 text-sm">
<CalendarIcon className="w-4 h-4" /> <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" /> <Input type="date" value={startDate ?? ''} onChange={(e) => { setStartDate(e.target.value); setSelectedRange('custom'); }} className="p-1 text-sm h-10" />
@ -1531,7 +1410,7 @@ const ProfissionalPage = () => {
</div> </div>
</div> </div>
<div className="flex gap-2 items-center mt-0"> <div className="flex gap-2 items-center">
{/* date range buttons: Semana / Mês */} {/* date range buttons: Semana / Mês */}
<DateRangeButtons /> <DateRangeButtons />
</div> </div>
@ -1908,15 +1787,7 @@ 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 }) { 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 { toast } = useToast();
const [activeTab, setActiveTab] = useState("editor"); const [activeTab, setActiveTab] = useState("editor");
// Initialize content checking all possible field names const [content, setContent] = useState(laudo?.conteudo || "");
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 [showPreview, setShowPreview] = useState(false);
const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null); const [pacienteSelecionado, setPacienteSelecionado] = useState<any>(preSelectedPatient || null);
const [listaPacientes, setListaPacientes] = useState<any[]>([]); const [listaPacientes, setListaPacientes] = useState<any[]>([]);
@ -2003,10 +1874,8 @@ const ProfissionalPage = () => {
// Carregar dados do laudo existente quando disponível (mais robusto: suporta vários nomes de campo) // Carregar dados do laudo existente quando disponível (mais robusto: suporta vários nomes de campo)
useEffect(() => { useEffect(() => {
if (laudo && !isNewLaudo) { if (laudo && !isNewLaudo) {
console.log('[LaudoEditor useEffect] Loading existing laudo data:', laudo);
// Conteúdo: aceita 'conteudo', 'content_html', 'contentHtml', 'content' // Conteúdo: aceita 'conteudo', 'content_html', 'contentHtml', 'content'
const contentValue = laudo.conteudo ?? laudo.content_html ?? laudo.contentHtml ?? laudo.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); setContent(contentValue);
// Campos: use vários fallbacks // Campos: use vários fallbacks
@ -2311,6 +2180,32 @@ const ProfissionalPage = () => {
<FileText className="w-4 h-4 inline mr-1" /> <FileText className="w-4 h-4 inline mr-1" />
Editor Editor
</button> </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 <button
onClick={() => setActiveTab("campos")} 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 ${ className={`px-2 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
@ -2453,6 +2348,50 @@ const ProfissionalPage = () => {
</div> </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" && ( {activeTab === "campos" && (
<div className="flex-1 p-2 sm:p-4 space-y-2 sm:space-y-4 overflow-y-auto"> <div className="flex-1 p-2 sm:p-4 space-y-2 sm:space-y-4 overflow-y-auto">
<div> <div>
@ -2649,9 +2588,6 @@ const ProfissionalPage = () => {
if (isNewLaudo) { if (isNewLaudo) {
if (createNewReport) { if (createNewReport) {
const created = await createNewReport(payload as any); const created = await createNewReport(payload as any);
console.log('[LaudoEditor] Report criado:', { created, patient_id: payload.patient_id });
// ✅ Webhook agora é enviado automaticamente dentro de createNewReport() / criarRelatorio()
if (onSaved) onSaved(created); if (onSaved) onSaved(created);
} }
} else { } else {
@ -2806,178 +2742,7 @@ const ProfissionalPage = () => {
</div> </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 = () => ( 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"> <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 */} {/* Header com Título e Botão */}
@ -3177,21 +2942,42 @@ const ProfissionalPage = () => {
<h3 className="text-base sm:text-lg font-semibold mb-4">Foto do Perfil</h3> <h3 className="text-base sm:text-lg font-semibold mb-4">Foto do Perfil</h3>
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<Avatar className="h-20 w-20 sm:h-24 sm:w-24"> {isEditingProfile ? (
{(profileData as any).fotoUrl ? ( <UploadAvatar
<AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} /> userId={String(doctorId || (user && (user as any).id) || '')}
) : ( currentAvatarUrl={(profileData as any).fotoUrl}
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-2xl font-bold"> userName={(profileData as any).nome}
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'} onAvatarChange={async (newUrl: string) => {
</AvatarFallback> try {
)} setProfileData((prev) => ({ ...prev, fotoUrl: newUrl }));
</Avatar> // Foto foi salva no Supabase Storage - atualizar apenas o estado local
// Para persistir no banco, o usuário deve clicar em "Salvar" após isso
try { toast({ title: 'Foto enviada', description: 'Clique em "Salvar" para confirmar as alterações.', variant: 'default' }); } catch (e) { /* ignore toast errors */ }
} catch (err) {
console.error('[ProfissionalPage] erro ao processar upload de foto:', err);
try { toast({ title: 'Erro ao processar foto', description: (err as any)?.message || 'Falha ao processar a foto do perfil.', variant: 'destructive' }); } catch (e) {}
}
}}
/>
) : (
<>
<Avatar className="h-20 w-20 sm:h-24 sm:w-24">
{(profileData as any).fotoUrl ? (
<AvatarImage src={(profileData as any).fotoUrl} alt={(profileData as any).nome} />
) : (
<AvatarFallback className="bg-primary text-primary-foreground text-lg sm:text-2xl font-bold">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
</AvatarFallback>
)}
</Avatar>
<div className="text-center space-y-2"> <div className="text-center space-y-2">
<p className="text-xs sm:text-sm text-muted-foreground"> <p className="text-xs sm:text-sm text-muted-foreground">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'} {profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
</p> </p>
</div> </div>
</>
)}
</div> </div>
</div> </div>
</div> </div>
@ -3232,8 +3018,6 @@ const ProfissionalPage = () => {
); );
case 'laudos': case 'laudos':
return renderLaudosSection(); return renderLaudosSection();
case 'disponibilidades':
return renderDisponibilidadesSection();
case 'comunicacao': case 'comunicacao':
return renderComunicacaoSection(); return renderComunicacaoSection();
case 'perfil': case 'perfil':
@ -3254,18 +3038,6 @@ const ProfissionalPage = () => {
<div className="flex items-center justify-between gap-4 flex-wrap md:flex-nowrap"> <div className="flex items-center justify-between gap-4 flex-wrap md:flex-nowrap">
{/* Logo/Avatar Section */} {/* Logo/Avatar Section */}
<div className="flex items-center gap-3 min-w-0 flex-1 md:flex-none"> <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"> <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} /> <AvatarImage src={(profileData as any).fotoUrl || undefined} alt={profileData.nome} />
<AvatarFallback className="bg-muted text-xs md:text-sm"> <AvatarFallback className="bg-muted text-xs md:text-sm">
@ -3370,17 +3142,6 @@ const ProfissionalPage = () => {
<FileText className="mr-2 h-4 w-4" /> <FileText className="mr-2 h-4 w-4" />
Laudos Laudos
</Button> </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 <Button
variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} 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" className="w-full justify-start text-sm md:text-base transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
@ -3417,32 +3178,7 @@ const ProfissionalPage = () => {
</main> </main>
</div> </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 && ( {showPopup && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50"> <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex justify-center items-center z-50">

632
susconecta/components/ZoeIA/ai-assistant-interface.tsx
View File

@ -46,8 +46,6 @@ export function AIAssistantInterface({
const [manualSelection, setManualSelection] = useState(false); const [manualSelection, setManualSelection] = useState(false);
const [historyPanelOpen, setHistoryPanelOpen] = useState(false); const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
const messageListRef = useRef<HTMLDivElement | null>(null); const messageListRef = useRef<HTMLDivElement | null>(null);
const pdfInputRef = useRef<HTMLInputElement | null>(null);
const [pdfFile, setPdfFile] = useState<File | null>(null); // arquivo PDF selecionado
const history = internalHistory; const history = internalHistory;
const historyRef = useRef<ChatSession[]>(history); const historyRef = useRef<ChatSession[]>(history);
const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?"; const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
@ -84,6 +82,17 @@ export function AIAssistantInterface({
const activeMessages = activeSession?.messages ?? []; const activeMessages = activeSession?.messages ?? [];
const formatDateTime = useCallback(
(value: string) =>
new Date(value).toLocaleString("pt-BR", {
day: "2-digit",
month: "2-digit",
hour: "2-digit",
minute: "2-digit",
}),
[]
);
const formatTime = useCallback( const formatTime = useCallback(
(value: string) => (value: string) =>
new Date(value).toLocaleTimeString("pt-BR", { new Date(value).toLocaleTimeString("pt-BR", {
@ -93,19 +102,92 @@ export function AIAssistantInterface({
[] []
); );
useEffect(() => {
if (history.length === 0) {
setActiveSessionId(null);
setManualSelection(false);
return;
}
if (!activeSessionId && !manualSelection) {
setActiveSessionId(history[history.length - 1].id);
return;
}
const exists = history.some((session) => session.id === activeSessionId);
if (!exists && !manualSelection) {
setActiveSessionId(history[history.length - 1].id);
}
}, [history, activeSessionId, manualSelection]);
useEffect(() => {
if (!messageListRef.current) return;
messageListRef.current.scrollTo({
top: messageListRef.current.scrollHeight,
behavior: "smooth",
});
}, [activeMessages.length]);
useEffect(() => {
setTypedGreeting("");
setTypedIndex(0);
setIsTypingGreeting(true);
}, []);
useEffect(() => {
if (!isTypingGreeting) return;
if (typedIndex >= greetingWords.length) {
setIsTypingGreeting(false);
return;
}
const timeout = window.setTimeout(() => {
setTypedGreeting((previous) =>
previous
? `${previous} ${greetingWords[typedIndex]}`
: greetingWords[typedIndex]
);
setTypedIndex((previous) => previous + 1);
}, 260);
return () => window.clearTimeout(timeout);
}, [greetingWords, isTypingGreeting, typedIndex]);
const handleDocuments = () => {
if (onOpenDocuments) {
onOpenDocuments();
return;
}
console.log("[ZoeIA] Abrir fluxo de documentos");
};
const handleOpenRealtimeChat = () => {
if (onOpenChat) {
onOpenChat();
return;
}
console.log("[ZoeIA] Abrir chat em tempo real");
};
const buildSessionTopic = useCallback((content: string) => {
const normalized = content.trim();
if (!normalized) return "Atendimento";
return normalized.length > 60 ? `${normalized.slice(0, 57)}…` : normalized;
}, []);
const upsertSession = useCallback( const upsertSession = useCallback(
(session: ChatSession) => { (session: ChatSession) => {
if (onAddHistory) { if (onAddHistory) {
onAddHistory(session); onAddHistory(session);
} else { } else {
setInternalHistory((prev) => { setInternalHistory((previous) => {
const index = prev.findIndex((s) => s.id === session.id); const index = previous.findIndex((item) => item.id === session.id);
if (index >= 0) { if (index >= 0) {
const updated = [...prev]; const updated = [...previous];
updated[index] = session; updated[index] = session;
return updated; return updated;
} }
return [...prev, session]; return [...previous, session];
}); });
} }
setActiveSessionId(session.id); setActiveSessionId(session.id);
@ -120,6 +202,8 @@ export function AIAssistantInterface({
const appendAssistantMessage = (content: string) => { const appendAssistantMessage = (content: string) => {
const createdAt = new Date().toISOString(); const createdAt = new Date().toISOString();
const latestSession =
historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
const assistantMessage: ChatMessage = { const assistantMessage: ChatMessage = {
id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
sender: "assistant", sender: "assistant",
@ -127,12 +211,9 @@ export function AIAssistantInterface({
createdAt, createdAt,
}; };
const latestSession =
historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
const updatedSession: ChatSession = { const updatedSession: ChatSession = {
...latestSession, ...latestSession,
updatedAt: createdAt, updatedAt: assistantMessage.createdAt,
messages: [...latestSession.messages, assistantMessage], messages: [...latestSession.messages, assistantMessage],
}; };
@ -140,50 +221,37 @@ export function AIAssistantInterface({
}; };
try { try {
let replyText = ""; const response = await fetch(API_ENDPOINT, {
let response: Response; method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ message: prompt }),
});
if (pdfFile) { if (!response.ok) {
// Monta FormData conforme especificação: campos 'pdf' e 'message' throw new Error(`HTTP ${response.status}`);
const formData = new FormData();
formData.append("pdf", pdfFile);
formData.append("message", prompt);
response = await fetch(API_ENDPOINT, {
method: "POST",
body: formData, // multipart/form-data gerenciado pelo browser
});
} else {
response = await fetch(API_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ message: prompt }),
});
} }
const rawPayload = await response.text(); const rawPayload = await response.text();
let replyText = "";
if (rawPayload.trim()) { if (rawPayload.trim().length > 0) {
try { try {
const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown }; const parsed = JSON.parse(rawPayload) as { reply?: unknown };
if (typeof parsed.reply === "string") { replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
replyText = parsed.reply.trim(); } catch (parseError) {
} else if (typeof parsed.message === "string") { console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
replyText = parsed.message.trim();
}
} catch (error) {
console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
} }
} }
appendAssistantMessage(replyText || FALLBACK_RESPONSE); appendAssistantMessage(replyText || FALLBACK_RESPONSE);
} catch (error) { } catch (error) {
console.error("[ZoeIA] Erro ao buscar resposta da API", error); console.error("[ZoeIA] Falha ao obter resposta da API", error);
appendAssistantMessage(FALLBACK_RESPONSE); appendAssistantMessage(FALLBACK_RESPONSE);
} }
}, },
[upsertSession, pdfFile] [upsertSession]
); );
const handleSendMessage = () => { const handleSendMessage = () => {
@ -198,124 +266,420 @@ export function AIAssistantInterface({
createdAt: now.toISOString(), createdAt: now.toISOString(),
}; };
const session = history.find((s) => s.id === activeSessionId); const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
const sessionToUse: ChatSession = session
const sessionToPersist: ChatSession = existingSession
? { ? {
...session, ...existingSession,
updatedAt: userMessage.createdAt, updatedAt: userMessage.createdAt,
messages: [...session.messages, userMessage], topic:
existingSession.messages.length === 0
? buildSessionTopic(trimmed)
: existingSession.topic,
messages: [...existingSession.messages, userMessage],
} }
: { : {
id: `session-${now.getTime()}`, id: `session-${now.getTime()}`,
startedAt: now.toISOString(), startedAt: now.toISOString(),
updatedAt: userMessage.createdAt, updatedAt: userMessage.createdAt,
topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed, topic: buildSessionTopic(trimmed),
messages: [userMessage], messages: [userMessage],
}; };
upsertSession(sessionToUse); upsertSession(sessionToPersist);
console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
setQuestion(""); setQuestion("");
setHistoryPanelOpen(false); setHistoryPanelOpen(false);
void sendMessageToAssistant(trimmed, sessionToUse);
void sendMessageToAssistant(trimmed, sessionToPersist);
}; };
const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => { const RealtimeTriggerButton = () => (
const file = e.target.files?.[0]; <button
if (file && file.type === "application/pdf") { type="button"
setPdfFile(file); onClick={handleOpenRealtimeChat}
className="flex h-12 w-12 items-center justify-center rounded-full bg-white text-foreground shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-zinc-900 dark:text-white"
aria-label="Abrir chat Zoe em tempo real"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
className="h-5 w-5"
fill="currentColor"
aria-hidden
>
<rect x="4" y="7" width="2" height="10" rx="1" />
<rect x="8" y="5" width="2" height="14" rx="1" />
<rect x="12" y="7" width="2" height="10" rx="1" />
<rect x="16" y="9" width="2" height="6" rx="1" />
<rect x="20" y="8" width="2" height="8" rx="1" />
</svg>
</button>
);
const handleClearHistory = () => {
if (onClearHistory) {
onClearHistory();
} else {
setInternalHistory([]);
} }
// Permite re-selecionar o mesmo arquivo setActiveSessionId(null);
e.target.value = ""; setManualSelection(false);
setQuestion("");
setHistoryPanelOpen(false);
}; };
const removePdf = () => setPdfFile(null); const handleSelectSession = useCallback((sessionId: string) => {
setManualSelection(true);
setActiveSessionId(sessionId);
setHistoryPanelOpen(false);
}, []);
const startNewConversation = useCallback(() => {
setManualSelection(true);
setActiveSessionId(null);
setQuestion("");
setHistoryPanelOpen(false);
}, []);
return ( return (
<div className="w-full max-w-3xl mx-auto p-4 space-y-4"> <div className="min-h-screen bg-background text-foreground">
{/* Área superior exibindo PDF selecionado */} <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
{pdfFile && ( <motion.section
<div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50"> initial={{ opacity: 0, y: -14 }}
<div className="flex items-center gap-3 min-w-0"> animate={{ opacity: 1, y: 0 }}
<Upload className="w-5 h-5 text-primary" /> transition={{ duration: 0.6, ease: "easeOut" }}
<div className="min-w-0"> className="rounded-3xl border border-primary/10 bg-gradient-to-br from-primary/15 via-background to-background/95 p-6 shadow-xl backdrop-blur-sm"
<p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p> >
<p className="text-xs text-muted-foreground"> <div className="flex flex-col gap-6">
PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
</p> <div className="flex items-center gap-4">
</div> <span className="flex h-12 w-12 items-center justify-center rounded-3xl bg-gradient-to-br from-primary via-indigo-500 to-sky-500 text-base font-semibold text-white shadow-lg">
</div> Zoe
<Button variant="secondary" size="sm" onClick={removePdf}> </span>
Remover <div className="space-y-1">
</Button> <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
</div> Assistente Clínica Zoe
)} </p>
<motion.h1
{/* Lista de mensagens */} key={typedGreeting}
<div className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
ref={messageListRef} initial={{ opacity: 0.6 }}
className="border rounded-lg p-4 h-96 overflow-y-auto space-y-3 bg-background" animate={{ opacity: 1 }}
> transition={{ duration: 0.3 }}
{activeMessages.length === 0 && ( >
<p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p> {gradientGreeting && (
)} <span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
{activeMessages.map((m) => ( {gradientGreeting}
<div {plainGreeting ? " " : ""}
key={m.id} </span>
className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`} )}
> {plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
<div <span
className={`px-3 py-2 rounded-lg max-w-xs text-sm whitespace-pre-wrap ${ className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
m.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted" isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
}`} }`}
> />
{m.content} </motion.h1>
<div className="mt-1 text-[10px] opacity-70"> </div>
{formatTime(m.createdAt)} </div>
<div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
{history.length > 0 && (
<Button
type="button"
variant="ghost"
className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
onClick={() => setHistoryPanelOpen(true)}
>
Ver históricos
</Button>
)}
{history.length > 0 && (
<Button
type="button"
variant="ghost"
className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground transition hover:text-destructive"
onClick={handleClearHistory}
>
Limpar histórico
</Button>
)}
<Button
type="button"
variant="outline"
className="rounded-full border-primary/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10"
onClick={startNewConversation}
>
Novo atendimento
</Button>
<SimpleThemeToggle />
</div> </div>
</div> </div>
<motion.p
className="max-w-2xl text-sm text-muted-foreground"
initial={{ opacity: 0, y: -6 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3, duration: 0.4 }}
>
Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
</motion.p>
</div> </div>
))} </motion.section>
<motion.div
initial={{ opacity: 0, y: -8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.15, duration: 0.4 }}
className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs text-primary shadow-sm"
>
<Lock className="h-4 w-4" />
<span>Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
</motion.div>
<motion.section
className="space-y-6 rounded-3xl border border-primary/15 bg-card/70 p-6 shadow-lg backdrop-blur"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<motion.div
className="rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-background/50 to-background p-6 text-sm leading-relaxed text-muted-foreground"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.25, duration: 0.4 }}
>
<div className="mb-4 flex items-center gap-3 text-primary">
<Info className="h-5 w-5" />
<span className="text-base font-semibold">Informativo importante</span>
</div>
<p>
A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
</p>
<p className="mt-4 font-medium text-foreground">
Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
</p>
</motion.div>
<div className="grid gap-3 sm:grid-cols-2">
<Button
onClick={handleDocuments}
size="lg"
className="justify-start gap-3 rounded-2xl bg-primary text-primary-foreground shadow-md transition hover:shadow-xl"
>
<Upload className="h-5 w-5" />
Enviar documentos clínicos
</Button>
<Button
onClick={handleOpenRealtimeChat}
size="lg"
variant="outline"
className="justify-start gap-3 rounded-2xl border-primary/40 bg-background shadow-md transition hover:border-primary hover:text-primary"
>
<MessageCircle className="h-5 w-5" />
Conversar com a equipe Zoe
</Button>
</div>
<div className="rounded-2xl border border-border bg-background/80 p-4 shadow-inner">
<p className="text-sm text-muted-foreground">
Estamos reunindo o histórico da sua jornada. Enquanto isso, você pode anexar exames, enviar dúvidas ou solicitar contato com a equipe Zoe.
</p>
</div>
</motion.section>
<motion.section
className="flex flex-col gap-5 rounded-3xl border border-primary/10 bg-card/70 p-6 shadow-lg backdrop-blur"
initial={{ opacity: 0, y: 14 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.25, duration: 0.45 }}
>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
{activeSession ? "Atendimento em andamento" : "Inicie uma conversa"}
</p>
<p className="text-sm font-semibold text-foreground sm:text-base">
{activeSession?.topic ?? "O primeiro contato orienta nossas recomendações clínicas"}
</p>
</div>
{activeSession && (
<span className="mt-1 inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary shadow-inner sm:mt-0">
Atualizado às {formatTime(activeSession.updatedAt)}
</span>
)}
</div>
<div
ref={messageListRef}
className="flex max-h-[45vh] min-h-[220px] flex-col gap-3 overflow-y-auto rounded-2xl border border-border/40 bg-background/70 p-4"
>
{activeMessages.length > 0 ? (
activeMessages.map((message) => (
<div
key={message.id}
className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
>
<div
className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
message.sender === "user"
? "bg-primary text-primary-foreground"
: "border border-border/60 bg-background text-foreground"
}`}
>
<p className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</p>
<span
className={`mt-2 block text-[0.68rem] uppercase tracking-[0.18em] ${
message.sender === "user"
? "text-primary-foreground/75"
: "text-muted-foreground"
}`}
>
{formatTime(message.createdAt)}
</span>
</div>
</div>
))
) : (
<div className="flex flex-1 flex-col items-center justify-center rounded-2xl border border-dashed border-primary/25 bg-background/80 px-6 py-12 text-center text-sm text-muted-foreground">
<p className="text-sm font-medium text-foreground">Envie sua primeira mensagem</p>
<p className="mt-2 max-w-md text-sm text-muted-foreground">
Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.
</p>
</div>
)}
</div>
</motion.section>
<div className="flex flex-col gap-3 rounded-3xl border border-border bg-card/70 px-4 py-3 shadow-xl sm:flex-row sm:items-center">
<div className="flex items-center gap-2">
<Button
type="button"
variant="ghost"
size="icon"
className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
onClick={handleDocuments}
>
<Plus className="h-5 w-5" />
</Button>
</div>
<Input
value={question}
onChange={(event) => setQuestion(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter") {
event.preventDefault();
handleSendMessage();
}
}}
placeholder="Pergunte qualquer coisa para a Zoe"
className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
/>
<div className="flex items-center justify-end gap-2">
<Button
type="button"
className="rounded-full bg-primary px-5 text-primary-foreground shadow-md transition hover:bg-primary/90"
onClick={handleSendMessage}
>
Enviar
</Button>
<RealtimeTriggerButton />
</div>
</div>
</div> </div>
{/* Input & ações */} {historyPanelOpen && (
<div className="flex items-center gap-2"> <aside className="fixed inset-y-0 right-0 z-[160] w-[min(22rem,80vw)] border-l border-border bg-card shadow-2xl">
<div className="flex gap-2"> <div className="flex h-full flex-col">
<Button <div className="flex items-center justify-between border-b border-border px-4 py-4">
type="button" <div className="flex items-center gap-3">
variant="secondary" <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-sm font-semibold text-white shadow-md">
size="sm" Zoe
onClick={() => pdfInputRef.current?.click()} </span>
> <div>
PDF <h2 className="text-sm font-semibold text-foreground">Históricos de atendimento</h2>
</Button> <p className="text-xs text-muted-foreground">{history.length} registro{history.length === 1 ? "" : "s"}</p>
<input </div>
ref={pdfInputRef} </div>
type="file" <Button
accept="application/pdf" type="button"
className="hidden" variant="ghost"
onChange={handleSelectPdf} size="icon"
/> className="rounded-full"
</div> onClick={() => setHistoryPanelOpen(false)}
<Input >
placeholder="Digite sua pergunta" <span aria-hidden>×</span>
value={question} <span className="sr-only">Fechar históricos</span>
onChange={(e) => setQuestion(e.target.value)} </Button>
onKeyDown={(e) => { </div>
if (e.key === "Enter" && !e.shiftKey) { <div className="border-b border-border px-4 py-3">
e.preventDefault(); <Button
handleSendMessage(); type="button"
} className="w-full justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
}} onClick={startNewConversation}
/> >
<Button onClick={handleSendMessage} disabled={!question.trim()}> <Plus className="h-4 w-4" />
Enviar Novo atendimento
</Button> </Button>
</div> </div>
<div className="text-xs text-muted-foreground"> <div className="flex-1 overflow-y-auto px-4 py-4">
{pdfFile {history.length === 0 ? (
? "A próxima mensagem será enviada junto ao PDF como multipart/form-data." <p className="text-sm text-muted-foreground">
: "Selecione um PDF para anexar ao próximo envio."} Nenhum atendimento registrado ainda. Envie uma mensagem para começar um acompanhamento.
</div> </p>
) : (
<ul className="flex flex-col gap-3 text-sm">
{[...history].reverse().map((session) => {
const lastMessage = session.messages[session.messages.length - 1];
const isActive = session.id === activeSessionId;
return (
<li key={session.id}>
<button
type="button"
onClick={() => handleSelectSession(session.id)}
className={`flex w-full flex-col gap-2 rounded-xl border px-3 py-3 text-left shadow-sm transition hover:border-primary hover:shadow-md ${
isActive ? "border-primary/60 bg-primary/10" : "border-border/60 bg-background/90"
}`}
>
<div className="flex items-center justify-between gap-3">
<p className="font-semibold text-foreground line-clamp-2">{session.topic}</p>
<span className="text-xs text-muted-foreground">{formatDateTime(session.updatedAt)}</span>
</div>
{lastMessage && (
<p className="text-xs text-muted-foreground line-clamp-2">
{lastMessage.sender === "assistant" ? "Zoe: " : "Você: "}
{lastMessage.content}
</p>
)}
<div className="flex items-center gap-2 text-[0.68rem] uppercase tracking-[0.18em] text-muted-foreground">
<Clock className="h-4 w-4" />
<span>
{session.messages.length} mensagem{session.messages.length === 1 ? "" : "s"}
</span>
</div>
</button>
</li>
);
})}
</ul>
)}
</div>
{history.length > 0 && (
<div className="border-t border-border px-4 py-3">
<Button
type="button"
variant="ghost"
className="w-full justify-center text-xs font-medium text-muted-foreground transition hover:text-destructive"
onClick={handleClearHistory}
>
Limpar todo o histórico
</Button>
</div>
)}
</div>
</aside>
)}
</div> </div>
); );
} }

196
susconecta/components/ZoeIA/ai-voice-flow.tsx
View File

@ -1,196 +0,0 @@
"use client";
import React, { useRef, useState } from "react";
import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
import { Button } from "@/components/ui/button";
import { Mic, MicOff } from "lucide-react";
// ⚠ Coloque aqui o webhook real do seu n8n
const N8N_WEBHOOK_URL = "https://n8n.jonasbomfim.store/webhook/zoe2";
const AIVoiceFlow: React.FC = () => {
const [isRecording, setIsRecording] = useState(false);
const [isSending, setIsSending] = useState(false);
const [voiceDetected, setVoiceDetected] = useState(false);
const [status, setStatus] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [replyAudioUrl, setReplyAudioUrl] = useState<string | null>(null); // URL do áudio retornado
const [replyAudio, setReplyAudio] = useState<HTMLAudioElement | null>(null); // elemento de áudio reproduzido
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const streamRef = useRef<MediaStream | null>(null);
const chunksRef = useRef<BlobPart[]>([]);
// 🚀 Inicia gravação
const startRecording = async () => {
try {
setError(null);
setStatus("Iniciando microfone...");
// Se estava reproduzindo áudio da IA → parar imediatamente
if (replyAudio) {
replyAudio.pause();
replyAudio.currentTime = 0;
}
setReplyAudio(null);
setReplyAudioUrl(null);
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
streamRef.current = stream;
const recorder = new MediaRecorder(stream);
mediaRecorderRef.current = recorder;
chunksRef.current = [];
recorder.ondataavailable = (e) => {
if (e.data.size > 0) chunksRef.current.push(e.data);
};
recorder.onstop = async () => {
setStatus("Processando áudio...");
const blob = new Blob(chunksRef.current, { type: "audio/webm" });
await sendToN8N(blob);
chunksRef.current = [];
};
recorder.start();
setIsRecording(true);
setStatus("Gravando... fale algo.");
} catch (err) {
console.error(err);
setError("Erro ao acessar microfone.");
}
};
// ⏹ Finaliza gravação
const stopRecording = () => {
try {
setIsRecording(false);
setStatus("Finalizando gravação...");
if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
mediaRecorderRef.current.stop();
}
if (streamRef.current) {
streamRef.current.getTracks().forEach((t) => t.stop());
streamRef.current = null;
}
} catch (err) {
console.error(err);
setError("Erro ao parar gravação.");
}
};
// 📤 Envia áudio ao N8N e recebe o MP3
const sendToN8N = async (audioBlob: Blob) => {
try {
setIsSending(true);
setStatus("Enviando áudio para IA...");
const formData = new FormData();
formData.append("audio", audioBlob, "voz.webm");
const resp = await fetch(N8N_WEBHOOK_URL, {
method: "POST",
body: formData,
});
if (!resp.ok) {
throw new Error("N8N retornou erro");
}
const replyBlob = await resp.blob();
// gera url local
const url = URL.createObjectURL(replyBlob);
setReplyAudioUrl(url);
const audio = new Audio(url);
setReplyAudio(audio);
setStatus("Reproduzindo resposta...");
audio.play().catch(() => {});
} catch (err) {
console.error(err);
setError("Erro ao enviar/receber áudio.");
} finally {
setIsSending(false);
}
};
const toggleRecording = () => {
if (isRecording) stopRecording();
else startRecording();
};
return (
<div className="flex flex-col items-center justify-center gap-6 p-6">
{/* ORB — agora com comportamento inteligente */}
<div className="w-72 h-72 relative">
<VoicePoweredOrb
className="w-full h-full"
/* 🔥 LÓGICA DO ORB:
- Gravando? → usa microfone
- Não gravando, mas tem MP3? → usa áudio da IA
- Caso contrário → parado (none)
*/
{...({ sourceMode:
isRecording
? "microphone"
: replyAudio
? "playback"
: "none"
} as any)}
audioElement={replyAudio}
onVoiceDetected={setVoiceDetected}
/>
{isRecording && (
<span className="absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs font-medium text-white shadow-lg">
{voiceDetected ? "Ouvindo…" : "Aguardando voz…"}
</span>
)}
</div>
{/* 🟣 Botão de gravação */}
<Button
onClick={toggleRecording}
variant={isRecording ? "destructive" : "default"}
size="lg"
disabled={isSending}
>
{isRecording ? (
<>
<MicOff className="w-5 h-5 mr-2" /> Parar gravação
</>
) : (
<>
<Mic className="w-5 h-5 mr-2" /> Começar gravação
</>
)}
</Button>
{/* STATUS */}
{status && <p className="text-sm text-muted-foreground">{status}</p>}
{error && <p className="text-sm text-red-500">{error}</p>}
{/* PLAYER MANUAL DA RESPOSTA */}
{replyAudioUrl && (
<div className="w-full max-w-md mt-2 flex flex-col items-center gap-2">
<span className="text-xs text-muted-foreground">Última resposta da IA:</span>
<audio controls src={replyAudioUrl} className="w-full" />
</div>
)}
</div>
);
};
export default AIVoiceFlow;

5
susconecta/components/ZoeIA/demo-file-upload.tsx
View File

@ -1,5 +0,0 @@
import Component from "@/components/ui/file-upload-and-chat";
export default function FileUploadChat() {
return <Component />;
}

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

@ -33,89 +33,105 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
}, [dropdownOpen]); }, [dropdownOpen]);
return ( return (
<header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-3 sm:px-6 py-2 flex flex-wrap items-center gap-3"> <header className="h-16 border-b border-border bg-background px-6 flex items-center justify-between">
<div className="flex items-center gap-3 min-w-0"> <div className="flex flex-row items-center gap-4">
<SidebarTrigger /> <SidebarTrigger />
<div className="flex flex-col justify-center leading-tight min-w-0"> <div className="flex items-start flex-col justify-center py-2">
<h1 className="text-sm sm:text-lg font-semibold text-foreground truncate max-w-[55vw] sm:max-w-none">{title}</h1> <h1 className="text-lg font-semibold text-foreground">{title}</h1>
{subtitle && ( <p className="text-muted-foreground">{subtitle}</p>
<p className="text-[11px] sm:text-xs text-muted-foreground truncate max-w-[55vw] sm:max-w-none">{subtitle}</p>
)}
</div> </div>
</div> </div>
<div className="flex items-center gap-2 ml-auto">
<Button variant="ghost" size="icon" className="hover-primary-blue hidden xs:flex"> <div className="flex items-center space-x-4">
<Button variant="ghost" size="icon" className="hover-primary-blue">
<Bell className="h-4 w-4" /> <Bell className="h-4 w-4" />
</Button> </Button>
<SimpleThemeToggle /> <SimpleThemeToggle />
<Button
variant="outline"
className="text-blue-500 border-blue-500 bg-transparent shadow-sm shadow-blue-500/10 border hover-primary-blue"
asChild
></Button>
{/* Avatar Dropdown Simples */}
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
<Button <Button
variant="ghost" variant="ghost"
className="relative h-8 w-8 rounded-full border border-border hover:border-primary" className="relative h-8 w-8 rounded-full border-2 border-border hover:border-primary"
onClick={() => setDropdownOpen(!dropdownOpen)} onClick={() => setDropdownOpen(!dropdownOpen)}
aria-label="Abrir menu do perfil"
> >
{/* Mostrar foto do usuário quando disponível; senão, mostrar fallback com iniciais */}
<Avatar className="h-8 w-8"> <Avatar className="h-8 w-8">
{(() => { {
const userPhoto = (user as any)?.profile?.foto_url || (user as any)?.profile?.fotoUrl || (user as any)?.profile?.avatar_url (() => {
const alt = user?.name || user?.email || 'Usuário' const userPhoto = (user as any)?.profile?.foto_url || (user as any)?.profile?.fotoUrl || (user as any)?.profile?.avatar_url
const getInitials = (name?: string, email?: string) => { const alt = user?.name || user?.email || 'Usuário'
if (name) {
const parts = name.trim().split(/\s+/) const getInitials = (name?: string, email?: string) => {
const first = parts[0]?.charAt(0) ?? '' if (name) {
const second = parts[1]?.charAt(0) ?? '' const parts = name.trim().split(/\s+/)
return (first + second).toUpperCase() || (email?.charAt(0) ?? 'U').toUpperCase() const first = parts[0]?.charAt(0) ?? ''
const second = parts[1]?.charAt(0) ?? ''
return (first + second).toUpperCase() || (email?.charAt(0) ?? 'U').toUpperCase()
}
if (email) return email.charAt(0).toUpperCase()
return 'U'
} }
if (email) return email.charAt(0).toUpperCase()
return 'U' return (
} <>
return ( <AvatarImage src={userPhoto || undefined} alt={alt} />
<> <AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback>
<AvatarImage src={userPhoto || undefined} alt={alt} /> </>
<AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback> )
</> })()
) }
})()}
</Avatar> </Avatar>
</Button> </Button>
{/* Dropdown Content */}
{dropdownOpen && ( {dropdownOpen && (
<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="absolute right-0 mt-2 w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground">
<div className="p-3 sm:p-4 border-b border-border"> <div className="p-4 border-b border-border">
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<p className="text-xs sm:text-sm font-semibold leading-none"> <p className="text-sm font-semibold leading-none">
{user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'} {user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'}
</p> </p>
{user?.email ? ( {user?.email ? (
<p className="text-[10px] sm:text-xs leading-none text-muted-foreground truncate">{user.email}</p> <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
) : ( ) : (
<p className="text-[10px] sm:text-xs leading-none text-muted-foreground">Email não disponível</p> <p className="text-xs leading-none text-muted-foreground">Email não disponível</p>
)} )}
<p className="text-[10px] sm:text-xs leading-none text-primary font-medium"> <p className="text-xs leading-none text-primary font-medium">
Tipo: {user?.userType === 'administrador' ? 'Administrador' : user?.userType || 'Não definido'} Tipo: {user?.userType === 'administrador' ? 'Administrador' : user?.userType || 'Não definido'}
</p> </p>
</div> </div>
</div> </div>
<div className="py-1"> <div className="py-1">
<button <button
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setDropdownOpen(false); setDropdownOpen(false);
router.push('/perfil'); router.push('/perfil');
}} }}
className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm hover:bg-accent cursor-pointer" className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer"
> >
Perfil Perfil
</button> </button>
<div className="border-t border-border my-1" />
<button <div className="border-t border-border my-1"></div>
<button
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setDropdownOpen(false); setDropdownOpen(false);
// Usar sempre o logout do hook useAuth (ele já redireciona corretamente)
logout(); logout();
}} }}
className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm text-destructive hover:bg-destructive/10 cursor-pointer" className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
> >
Sair Sair
</button> </button>
</div> </div>
</div> </div>

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

@ -1,6 +1,6 @@
"use client" "use client"
import { useState, useEffect, useMemo } from 'react' import { useState, useEffect } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@/components/ui/alert-dialog' import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
@ -18,11 +18,9 @@ export interface AvailabilityFormProps {
// when editing, pass the existing availability and set mode to 'edit' // when editing, pass the existing availability and set mode to 'edit'
availability?: DoctorAvailability | null availability?: DoctorAvailability | null
mode?: 'create' | 'edit' mode?: 'create' | 'edit'
// existing availabilities to prevent duplicate weekday selection
existingAvailabilities?: DoctorAvailability[]
} }
export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create', existingAvailabilities = [] }: AvailabilityFormProps) { export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved, availability = null, mode = 'create' }: AvailabilityFormProps) {
const [weekday, setWeekday] = useState<string>('segunda') const [weekday, setWeekday] = useState<string>('segunda')
const [startTime, setStartTime] = useState<string>('09:00') const [startTime, setStartTime] = useState<string>('09:00')
const [endTime, setEndTime] = useState<string>('17:00') const [endTime, setEndTime] = useState<string>('17:00')
@ -33,28 +31,6 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
const { toast } = useToast() const { toast } = useToast()
const [blockedException, setBlockedException] = useState<null | { date: string; reason?: string; times?: string }>(null) 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 // When editing, populate state from availability prop
useEffect(() => { useEffect(() => {
if (mode === 'edit' && availability) { if (mode === 'edit' && availability) {
@ -71,17 +47,6 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
} }
}, [mode, availability]) }, [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) { async function handleSubmit(e?: React.FormEvent) {
e?.preventDefault() e?.preventDefault()
if (!doctorId) { if (!doctorId) {
@ -216,25 +181,25 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{mode === 'edit' ? 'Editar disponibilidade' : 'Criar disponibilidade'}</DialogTitle> <DialogTitle>Criar disponibilidade</DialogTitle>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 py-4"> <form onSubmit={handleSubmit} className="space-y-4 py-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<Label>Dia da semana</Label> <Label>Dia da semana</Label>
<Select value={weekday} onValueChange={(v) => setWeekday(v)} disabled={mode === 'edit'}> <Select value={weekday} onValueChange={(v) => setWeekday(v)}>
<SelectTrigger> <SelectTrigger>
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="segunda" disabled={usedWeekdays.has('segunda')}>Segunda</SelectItem> <SelectItem value="segunda">Segunda</SelectItem>
<SelectItem value="terca" disabled={usedWeekdays.has('terca')}>Terça</SelectItem> <SelectItem value="terca">Terça</SelectItem>
<SelectItem value="quarta" disabled={usedWeekdays.has('quarta')}>Quarta</SelectItem> <SelectItem value="quarta">Quarta</SelectItem>
<SelectItem value="quinta" disabled={usedWeekdays.has('quinta')}>Quinta</SelectItem> <SelectItem value="quinta">Quinta</SelectItem>
<SelectItem value="sexta" disabled={usedWeekdays.has('sexta')}>Sexta</SelectItem> <SelectItem value="sexta">Sexta</SelectItem>
<SelectItem value="sabado" disabled={usedWeekdays.has('sabado')}>Sábado</SelectItem> <SelectItem value="sabado">Sábado</SelectItem>
<SelectItem value="domingo" disabled={usedWeekdays.has('domingo')}>Domingo</SelectItem> <SelectItem value="domingo">Domingo</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@ -277,7 +242,7 @@ export function AvailabilityForm({ open, onOpenChange, doctorId = null, onSaved,
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button> <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
<Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : (mode === 'edit' ? 'Salvar alterações' : 'Criar disponibilidade')}</Button> <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar disponibilidade'}</Button>
</DialogFooter> </DialogFooter>
</form> </form>
</DialogContent> </DialogContent>

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

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

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

@ -6,8 +6,6 @@ import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' 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 { criarExcecao, DoctorExceptionCreate } from '@/lib/api'
import { useToast } from '@/hooks/use-toast' import { useToast } from '@/hooks/use-toast'
@ -25,22 +23,8 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
const [kind, setKind] = useState<'bloqueio'|'liberacao'>('bloqueio') const [kind, setKind] = useState<'bloqueio'|'liberacao'>('bloqueio')
const [reason, setReason] = useState<string>('') const [reason, setReason] = useState<string>('')
const [submitting, setSubmitting] = useState(false) const [submitting, setSubmitting] = useState(false)
const [showDatePicker, setShowDatePicker] = useState(false)
const { toast } = useToast() 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) { async function handleSubmit(e?: React.FormEvent) {
e?.preventDefault() e?.preventDefault()
if (!doctorId) { if (!doctorId) {
@ -66,7 +50,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
const saved = await criarExcecao(payload) const saved = await criarExcecao(payload)
toast({ title: 'Exceção criada', description: `${payload.date} • ${kind}`, variant: 'default' }) toast({ title: 'Exceção criada', description: `${payload.date} • ${kind}`, variant: 'default' })
onSaved?.(saved) onSaved?.(saved)
handleOpenChange(false) onOpenChange(false)
} catch (err: any) { } catch (err: any) {
console.error('Erro ao criar exceção:', err) console.error('Erro ao criar exceção:', err)
toast({ title: 'Erro', description: err?.message || String(err), variant: 'destructive' }) toast({ title: 'Erro', description: err?.message || String(err), variant: 'destructive' })
@ -76,74 +60,16 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
} }
return ( return (
<Dialog open={open} onOpenChange={handleOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Criar exceção</DialogTitle> <DialogTitle>Criar exceção</DialogTitle>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4 py-4"> <form onSubmit={handleSubmit} className="space-y-4 py-4">
<div className="space-y-2"> <div>
<div className="flex items-center gap-2"> <Label>Data</Label>
<Label className="text-[13px]">Data *</Label> <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
<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>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
@ -176,7 +102,7 @@ export default function ExceptionForm({ open, onOpenChange, doctorId = null, onS
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => handleOpenChange(false)} disabled={submitting}>Cancelar</Button> <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={submitting}>Cancelar</Button>
<Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar exceção'}</Button> <Button type="submit" disabled={submitting}>{submitting ? 'Salvando...' : 'Criar exceção'}</Button>
</DialogFooter> </DialogFooter>
</form> </form>

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

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

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

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

131
susconecta/components/features/pacientes/chat-widget.tsx
View File

@ -1,19 +1,22 @@
"use client"; "use client";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { useTheme } from "next-themes"; import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
import { ArrowLeft, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import FileUploadChat from "@/components/ui/file-upload-and-chat"; import {
AIAssistantInterface,
// 👉 AQUI você importa o fluxo correto de voz (já testado e funcionando) ChatSession,
import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow"; } from "@/components/ZoeIA/ai-assistant-interface";
import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
export function ChatWidget() { export function ChatWidget() {
const [assistantOpen, setAssistantOpen] = useState(false); const [assistantOpen, setAssistantOpen] = useState(false);
const [realtimeOpen, setRealtimeOpen] = useState(false); const [realtimeOpen, setRealtimeOpen] = useState(false);
const { theme } = useTheme(); const [isRecording, setIsRecording] = useState(false);
const isDark = theme === "dark"; const [voiceDetected, setVoiceDetected] = useState(false);
const [history, setHistory] = useState<ChatSession[]>([]);
useEffect(() => { useEffect(() => {
if (!assistantOpen && !realtimeOpen) return; if (!assistantOpen && !realtimeOpen) return;
@ -30,7 +33,7 @@ export function ChatWidget() {
() => ( () => (
<span <span
aria-hidden aria-hidden
className="absolute inset-0 rounded-full bg-linear-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100" className="absolute inset-0 rounded-full bg-gradient-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
/> />
), ),
[] []
@ -43,45 +46,87 @@ export function ChatWidget() {
const closeRealtime = () => { const closeRealtime = () => {
setRealtimeOpen(false); setRealtimeOpen(false);
setAssistantOpen(true); setAssistantOpen(true);
setIsRecording(false);
setVoiceDetected(false);
};
const toggleRecording = () => {
setIsRecording((prev) => {
const next = !prev;
if (!next) {
setVoiceDetected(false);
}
return next;
});
};
const handleOpenDocuments = () => {
console.log("[ChatWidget] Abrindo fluxo de documentos");
closeAssistant();
};
const handleOpenChat = () => {
console.log("[ChatWidget] Encaminhando para chat em tempo real");
setAssistantOpen(false);
openRealtime();
};
const handleUpsertHistory = (session: ChatSession) => {
setHistory((previous) => {
const index = previous.findIndex((item) => item.id === session.id);
if (index >= 0) {
const updated = [...previous];
updated[index] = session;
return updated;
}
return [...previous, session];
});
};
const handleClearHistory = () => {
setHistory([]);
}; };
return ( return (
<> <>
{/* ----------------- ASSISTANT PANEL ----------------- */}
{assistantOpen && ( {assistantOpen && (
<div <div
id="ai-assistant-overlay" id="ai-assistant-overlay"
className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`} className="fixed inset-0 z-[100] flex flex-col bg-background"
> >
<div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}> <div className="flex items-center justify-between border-b border-border px-4 py-3">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`} className="flex items-center gap-2"
onClick={closeAssistant} onClick={closeAssistant}
> >
<ArrowLeft className="h-4 w-4" aria-hidden /> <ArrowLeft className="h-4 w-4" aria-hidden />
<span className="text-sm font-semibold">Voltar</span> <span className="text-sm">Voltar</span>
</Button> </Button>
</div> </div>
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto">
<FileUploadChat onOpenVoice={openRealtime} /> <AIAssistantInterface
onOpenDocuments={handleOpenDocuments}
onOpenChat={handleOpenChat}
history={history}
onAddHistory={handleUpsertHistory}
onClearHistory={handleClearHistory}
/>
</div> </div>
</div> </div>
)} )}
{/* ----------------- REALTIME VOICE PANEL ----------------- */}
{realtimeOpen && ( {realtimeOpen && (
<div <div
id="ai-realtime-overlay" id="ai-realtime-overlay"
className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`} className="fixed inset-0 z-[110] flex flex-col bg-background"
> >
<div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}> <div className="flex items-center justify-between border-b border-border px-4 py-3">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`} className="flex items-center gap-2"
onClick={closeRealtime} onClick={closeRealtime}
> >
<ArrowLeft className="h-4 w-4" aria-hidden /> <ArrowLeft className="h-4 w-4" aria-hidden />
@ -89,19 +134,57 @@ export function ChatWidget() {
</Button> </Button>
</div> </div>
{/* 🔥 Aqui entra o AIVoiceFlow COMPLETO */} <div className="flex-1 overflow-auto">
<div className="flex-1 overflow-auto flex items-center justify-center"> <div className="mx-auto flex h-full w-full max-w-4xl flex-col items-center justify-center gap-8 px-6 py-10 text-center">
<AIVoiceFlow /> <div className="relative w-full max-w-md aspect-square">
<VoicePoweredOrb
enableVoiceControl={isRecording}
className="h-full w-full rounded-3xl shadow-2xl"
onVoiceDetected={setVoiceDetected}
/>
{voiceDetected && (
<span className="absolute bottom-6 right-6 rounded-full bg-primary/90 px-3 py-1 text-xs font-semibold text-primary-foreground shadow-lg">
Ouvindo…
</span>
)}
</div>
<div className="flex flex-col items-center gap-4">
<Button
onClick={toggleRecording}
size="lg"
className="px-8 py-3"
variant={isRecording ? "destructive" : "default"}
>
{isRecording ? (
<>
<MicOff className="mr-2 h-5 w-5" aria-hidden />
Parar captura de voz
</>
) : (
<>
<Mic className="mr-2 h-5 w-5" aria-hidden />
Iniciar captura de voz
</>
)}
</Button>
<p className="max-w-md text-sm text-muted-foreground">
Ative a captura para falar com a equipe em tempo real. Assim que sua voz for detectada, a Zoe sinaliza visualmente e encaminha o atendimento.
</p>
</div>
</div>
</div> </div>
</div> </div>
)} )}
{/* ----------------- FLOATING BUTTON ----------------- */}
<div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8"> <div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
<button <button
type="button" type="button"
onClick={openAssistant} onClick={openAssistant}
className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2" className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
aria-haspopup="dialog"
aria-expanded={assistantOpen}
aria-controls="ai-assistant-overlay"
> >
{gradientRing} {gradientRing}
<span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95"> <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95">

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

@ -14,7 +14,7 @@ const buttonVariants = cva(
destructive: 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", "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: outline:
"border bg-background shadow-xs hover:bg-blue-500 hover:text-white dark:bg-input/30 dark:border-input dark:hover:bg-blue-600 dark:hover:text-white", "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: ghost:

586
susconecta/components/ui/file-upload-and-chat.tsx
View File

@ -1,586 +0,0 @@
"use client";
import React, { useState, useRef, useCallback, useEffect } from "react";
import { useTheme } from "next-themes";
import {
Upload,
Paperclip,
Send,
Moon,
Sun,
X,
FileText,
ImageIcon,
Video,
Music,
Archive,
MessageCircle,
Bot,
User,
Info,
Lock,
Mic,
AudioLines,
Plus,
} from "lucide-react";
const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
const FALLBACK_RESPONSE =
"Tive um problema para responder agora. Tente novamente em alguns instantes.";
const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
// Usa tema global fornecido por next-themes
const { theme, setTheme } = useTheme();
const isDarkMode = theme === "dark";
const [messages, setMessages] = useState([
{
id: 1,
type: "ai",
content:
"Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.",
timestamp: new Date(),
},
]);
const [inputValue, setInputValue] = useState("");
const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
const [isDragOver, setIsDragOver] = useState(false);
const [isTyping, setIsTyping] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const chatEndRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
// Placeholder responsivo (não quebra, adapta o texto)
const [responsivePlaceholder, setResponsivePlaceholder] = useState("Pergunte qualquer coisa para a Zoe");
const computePlaceholder = (w: number) => {
if (w < 340) return "Pergunte à Zoe"; // ultra pequeno
if (w < 400) return "Pergunte algo à Zoe"; // pequeno
if (w < 520) return "Pergunte algo para a Zoe"; // médio estreito
return "Pergunte qualquer coisa para a Zoe"; // normal
};
useEffect(() => {
const update = () => setResponsivePlaceholder(computePlaceholder(window.innerWidth));
update();
window.addEventListener("resize", update);
return () => window.removeEventListener("resize", update);
}, []);
useEffect(() => {
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = "auto";
textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
}
}, [inputValue]);
const getFileIcon = (fileName: string) => {
const ext = fileName.split(".").pop()?.toLowerCase();
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
return <Video className="w-4 h-4" aria-hidden="true" />;
if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
return <Music className="w-4 h-4" aria-hidden="true" />;
if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
return <Archive className="w-4 h-4" aria-hidden="true" />;
return <FileText className="w-4 h-4" aria-hidden="true" />;
};
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
const handleFileSelect = (files: FileList | null) => {
if (!files) return;
const newFiles = Array.from(files).map((file) => ({
id: Date.now() + Math.random(),
name: file.name,
size: file.size,
type: file.type,
file: file,
}));
setUploadedFiles((prev) => [...prev, ...newFiles]);
// Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
};
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setIsDragOver(false);
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFileSelect(files);
}
}, []);
const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setIsDragOver(true);
}, []);
const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
setIsDragOver(false);
}, []);
const removeFile = (fileId: number) => {
setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
};
const generateAIResponse = useCallback(
async (userMessage: string, files: any[]) => {
try {
const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
let response: Response;
if (pdfFile) {
const formData = new FormData();
formData.append("pdf", pdfFile.file); // campo 'pdf'
formData.append("message", userMessage); // campo 'message'
response = await fetch(API_ENDPOINT, {
method: "POST",
body: formData, // multipart/form-data automático
});
} else {
response = await fetch(API_ENDPOINT, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userMessage }),
});
}
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
let replyText = "";
try {
const parsed = await response.json(); // ← já trata como JSON direto
if (typeof parsed.message === "string") {
replyText = parsed.message.trim();
} else if (typeof parsed.reply === "string") {
replyText = parsed.reply.trim();
} else {
console.warn(
"[Zoe] Nenhum campo 'message' ou 'reply' na resposta:",
parsed
);
}
} catch (err) {
console.error("[Zoe] Erro ao processar resposta JSON:", err);
}
return replyText || FALLBACK_RESPONSE;
} catch (error) {
console.error("[FileUploadChat] Failed to get API response", error);
return FALLBACK_RESPONSE;
}
},
[]
);
const sendMessage = useCallback(async () => {
if (inputValue.trim() || uploadedFiles.length > 0) {
const newMessage = {
id: Date.now(),
type: "user",
content: inputValue.trim(),
files: [...uploadedFiles],
timestamp: new Date(),
};
setMessages((prev) => [...prev, newMessage]);
const messageContent = inputValue.trim();
const attachedFiles = [...uploadedFiles];
setInputValue("");
setUploadedFiles([]);
setIsTyping(true);
// Get AI response from API
const aiResponseContent = await generateAIResponse(
messageContent,
attachedFiles
);
const aiResponse = {
id: Date.now() + 1,
type: "ai",
content: aiResponseContent,
timestamp: new Date(),
};
setMessages((prev) => [...prev, aiResponse]);
setIsTyping(false);
}
}, [inputValue, uploadedFiles, generateAIResponse]);
const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
};
const themeClasses = {
background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
text: isDarkMode ? "text-white" : "text-gray-900",
textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
border: isDarkMode ? "border-gray-700" : "border-gray-200",
inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
uploadArea: isDragOver
? isDarkMode
? "bg-blue-900/50 border-blue-500"
: "bg-blue-50 border-blue-400"
: isDarkMode
? "bg-gray-700 border-gray-600"
: "bg-gray-50 border-gray-300",
userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
systemMessage: isDarkMode
? "bg-yellow-900/30 text-yellow-200"
: "bg-yellow-100 text-yellow-800",
};
return (
<div
className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
>
<div className="max-w-6xl mx-auto p-3 sm:p-6">
{/* Main Card - Zoe Assistant Section */}
<div
className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
isDarkMode
? "from-primary/15 via-gray-800 to-gray-900"
: "from-blue-50 via-white to-indigo-50"
} p-4 sm:p-8 ${
isDarkMode ? "border-gray-700" : "border-blue-200"
} mb-4 sm:mb-6 backdrop-blur-sm`}
>
<div className="flex flex-col gap-4 sm:gap-8">
{/* Header */}
<div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="flex items-center gap-2 sm:gap-4">
<span className="flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-sm sm:text-base font-semibold text-white shadow-lg">
Zoe
</span>
<div className="space-y-1">
<p className="text-xs font-semibold uppercase tracking-[0.18em] sm:tracking-[0.24em] text-primary/80">
Assistente Clínica Zoe
</p>
<h1 className="text-lg sm:text-3xl font-semibold tracking-tight text-foreground">
<span className="bg-linear-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
Olá, eu sou Zoe.
</span>
<span className="text-foreground"> Como posso ajudar?</span>
</h1>
</div>
</div>
<div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
<button
type="button"
className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
>
Novo atendimento
</button>
<button
onClick={() => setTheme(isDarkMode ? "light" : "dark")}
className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
aria-label="Alternar tema"
>
<Moon className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
</div>
</div>
{/* Description */}
<p
className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
isDarkMode ? "text-muted-foreground" : "text-gray-700"
}`}
>
Organizamos exames, orientações e tarefas assistenciais em um
painel único para acelerar decisões clínicas. Utilize a Zoe para
revisar resultados, registrar percepções e alinhar próximos passos
com a equipe de saúde.
</p>
{/* Security Info */}
<div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
<Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
<span className="text-xs sm:text-sm">
Suas informações permanecem criptografadas e seguras com a
equipe Zoe.
</span>
</div>
{/* Info Section */}
<div
className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
isDarkMode
? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
: "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
} p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
>
<div
className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
isDarkMode ? "text-primary" : "text-blue-600"
}`}
>
<Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
<span className="text-sm sm:text-base font-semibold">
Informativo importante
</span>
</div>
<p
className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
isDarkMode ? "text-muted-foreground" : "text-gray-700"
}`}
>
A Zoe acompanha toda a jornada clínica, consolida exames e
registra orientações para que você tenha clareza em cada etapa
do cuidado. As respostas são informativas e complementam a
avaliação de um profissional de saúde qualificado.
</p>
<p
className={`font-medium text-xs sm:text-sm ${
isDarkMode ? "text-foreground" : "text-gray-900"
}`}
>
Em situações de urgência, entre em contato com a equipe médica
presencial ou acione os serviços de emergência da sua região.
</p>
</div>
{/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
</div>
</div>
{/* Chat Area */}
<div
className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
>
{/* Chat Header */}
<div
className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
>
<div className="flex items-center gap-2 sm:gap-3">
<div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
<h3
className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
>
Chat with AI Assistant
</h3>
<span
className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
>
Online
</span>
</div>
</div>
{/* Chat Messages */}
<div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
{messages.map((message: any) => (
<div
key={message.id}
className={`flex ${
message.type === "user"
? "justify-end"
: message.type === "system"
? "justify-center"
: "justify-start"
}`}
>
{message.type !== "system" && message.type === "ai" && (
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
Z
</span>
)}
<div
className={`max-w-xs sm:max-w-sm lg:max-w-md ${
message.type === "user"
? `${themeClasses.userMessage} text-white ml-3`
: message.type === "ai"
? `${themeClasses.aiMessage} ${themeClasses.text}`
: `${themeClasses.systemMessage} text-xs`
} px-4 py-3 rounded-2xl ${
message.type === "user"
? "rounded-br-md"
: message.type === "ai"
? "rounded-bl-md"
: "rounded-lg"
}`}
>
{message.content && (
<p className="wrap-break-word text-xs sm:text-sm">
{message.content}
</p>
)}
{message.files && message.files.length > 0 && (
<div className="mt-1 sm:mt-2 space-y-1">
{message.files.map((file: any) => (
<div
key={file.id}
className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
>
{getFileIcon(file.name)}
<span className="truncate text-xs">{file.name}</span>
<span className="text-xs">
({formatFileSize(file.size)})
</span>
</div>
))}
</div>
)}
<p className="text-xs opacity-70 mt-1 sm:mt-2">
{message.timestamp.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}
</p>
</div>
{message.type === "user" && (
<div
className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
>
<User className="w-5 h-5 text-white" />
</div>
)}
</div>
))}
{/* Typing Indicator */}
{isTyping && (
<div className="flex justify-start">
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
Z
</span>
<div
className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
>
<div className="flex space-x-1">
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
<div
className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
style={{ animationDelay: "0.1s" }}
></div>
<div
className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
style={{ animationDelay: "0.2s" }}
></div>
</div>
</div>
</div>
)}
<div ref={chatEndRef} />
</div>
{/* Chat Input */}
<div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
<div className="flex flex-col gap-2">
{/* Anexos selecionados (chips) */}
{uploadedFiles.length > 0 && (
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
{uploadedFiles.map((file) => (
<div
key={file.id}
className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
>
{getFileIcon(file.name)}
<div className="min-w-0 max-w-[160px]">
<p className={`text-xs font-medium truncate ${themeClasses.text}`}>
{file.name}
</p>
<p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
{formatFileSize(file.size)}
</p>
</div>
<button
onClick={() => removeFile(file.id)}
className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
aria-label="Remover arquivo"
>
<X className="w-3 h-3" />
</button>
</div>
))}
<button
onClick={() => setUploadedFiles([])}
className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
>
Limpar tudo
</button>
</div>
)}
{/* Input unificado com ícones embutidos */}
<div className="flex w-full">
<div className={`flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} h-11 px-2 gap-2`}>
<button
onClick={() => fileInputRef.current?.click()}
type="button"
className={`flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
aria-label="Anexar arquivos"
>
<Plus className="w-4 h-4" />
</button>
<input
ref={fileInputRef}
type="file"
multiple
className="hidden"
onChange={(e) => handleFileSelect(e.target.files)}
/>
<textarea
ref={textareaRef}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={handleKeyPress}
placeholder={responsivePlaceholder}
rows={1}
className={`flex-1 bg-transparent resize-none focus:outline-none leading-snug py-3 pr-2 ${themeClasses.text} placeholder-gray-400 text-[13px] sm:text-sm placeholder:text-[12px] sm:placeholder:text-sm whitespace-nowrap overflow-hidden text-ellipsis placeholder:overflow-hidden placeholder:text-ellipsis`}
style={{ minHeight: 'auto', overflow: 'hidden' }}
/>
<button
onClick={() => onOpenVoice?.()}
type="button"
className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
aria-label="Entrada de voz"
>
<AudioLines className="w-4 h-4" />
</button>
<button
onClick={sendMessage}
disabled={!inputValue.trim() && uploadedFiles.length === 0}
type="button"
className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md flex-shrink-0"
aria-label="Enviar mensagem"
>
<Send className="w-4 h-4" />
</button>
</div>
</div>
</div>
{/* Quick Actions */}
</div>
</div>
</div>
</div>
);
};
export default FileUploadChat;

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

@ -30,7 +30,7 @@ function PopoverContent({
align={align} align={align}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"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", "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",
className className
)} )}
{...props} {...props}

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

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

22
susconecta/lib/api.ts
View File

@ -488,10 +488,11 @@ export async function deletarDisponibilidade(id: string): Promise<void> {
headers: withPrefer({ ...baseHeaders() }, 'return=minimal'), headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
}); });
if (res.status === 204 || res.status === 200) return; if (res.status === 204) return;
// Some deployments may return 200 with a representation — accept that too
// Se chegou aqui e não foi sucesso, lance erro if (res.status === 200) return;
throw new Error(`Erro ao deletar disponibilidade: ${res.status}`); // Otherwise surface a friendly error using parse()
await parse(res as Response);
} }
// ===== EXCEÇÕES (Doctor Exceptions) ===== // ===== EXCEÇÕES (Doctor Exceptions) =====
@ -579,21 +580,14 @@ export async function listarExcecoes(params?: { doctorId?: string; date?: string
export async function deletarExcecao(id: string): Promise<void> { export async function deletarExcecao(id: string): Promise<void> {
if (!id) throw new Error('ID da exceção é obrigatório'); if (!id) throw new Error('ID da exceção é obrigatório');
const url = `${REST}/doctor_exceptions?id=eq.${encodeURIComponent(String(id))}`; const url = `${REST}/doctor_exceptions?id=eq.${encodeURIComponent(String(id))}`;
console.log('[deletarExcecao] Deletando exceção:', id, 'URL:', url);
const res = await fetch(url, { const res = await fetch(url, {
method: 'DELETE', method: 'DELETE',
headers: withPrefer({ ...baseHeaders() }, 'return=minimal'), headers: withPrefer({ ...baseHeaders() }, 'return=minimal'),
}); });
console.log('[deletarExcecao] Status da resposta:', res.status); if (res.status === 204) return;
if (res.status === 200) return;
if (res.status === 204 || res.status === 200) { await parse(res as Response);
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}`);
} }

275
susconecta/lib/laudo-exemplos.ts
View File

@ -1,275 +0,0 @@
/**
* EXEMPLO DE USO: Automação n8n para Notificação de Laudos
*
* Este arquivo demonstra como usar a função criarLaudo com integração n8n
* para criar um laudo e notificar automaticamente o paciente.
*/
import { criarLaudo, CriarLaudoData } from '@/lib/reports';
/**
* Exemplo 1: Uso básico - criar um laudo simples
*/
export async function exemploBasico() {
try {
const laudoData: CriarLaudoData = {
pacienteId: 'patient-uuid-123', // ID do paciente (obrigatório)
textoLaudo: 'Paciente apresenta boa saúde geral. Sem achados relevantes.',
};
const novoLaudo = await criarLaudo(laudoData);
console.log('✓ Laudo criado com sucesso!');
console.log('ID do laudo:', novoLaudo.id);
console.log('Mensagem:', novoLaudo.mensagem);
return novoLaudo;
} catch (erro) {
console.error('✗ Erro ao criar laudo:', erro);
throw erro;
}
}
/**
* Exemplo 2: Criar laudo com dados médicos completos
*/
export async function exemploCompleto() {
try {
const laudoData: CriarLaudoData = {
pacienteId: 'patient-uuid-789',
medicoId: 'doctor-uuid-456', // Opcional
textoLaudo: `
AVALIAÇÃO CLÍNICA COMPLETA
Queixa Principal: Dor de cabeça persistente
História Presente:
Paciente relata dor de cabeça tipo tensional há 2 semanas,
intensidade 5/10, sem irradiação.
Exame Físico:
- PA: 120/80 mmHg
- FC: 72 bpm
- Sem alterações neurológicas
Impressão Diagnóstica:
Cefaleia tensional
Conduta:
- Repouso adequado
- Analgésicos conforme necessidade
- Retorno em 2 semanas se persistir
`,
exame: 'Consulta Neurologia',
diagnostico: 'Cefaleia tensional',
conclusao: 'Prescrição: Dipirona 500mg 6/6h conforme necessidade',
cidCode: 'G44.2', // CID da cefaleia tensional
status: 'concluido',
};
const novoLaudo = await criarLaudo(laudoData);
console.log('✓ Laudo completo criado com sucesso!');
console.log('ID:', novoLaudo.id);
console.log('Status:', novoLaudo.status);
console.log('CID:', novoLaudo.cid_code);
return novoLaudo;
} catch (erro) {
console.error('✗ Erro:', erro);
throw erro;
}
}
/**
* Exemplo 3: Integração em um componente React
* Este exemplo mostra como usar a função em um formulário
*
* NOTA: Este código deve ser usado em um arquivo .tsx (não .ts)
* e com o import de React importado corretamente
*/
export async function exemploComponenteReact() {
// Este é apenas um exemplo de estrutura para o componente
// Copie o código abaixo para um arquivo .tsx:
/*
'use client';
import React from 'react';
import { criarLaudo, CriarLaudoData } from '@/lib/reports';
export function ComponenteLaudoExemplo() {
const [carregando, setCarregando] = React.useState(false);
const [mensagem, setMensagem] = React.useState('');
const handleCriarLaudo = async (formData: any) => {
setCarregando(true);
setMensagem('');
try {
const laudoData: CriarLaudoData = {
pacienteId: formData.pacienteId,
medicoId: formData.medicoId,
textoLaudo: formData.texto,
exame: formData.exame,
diagnostico: formData.diagnostico,
conclusao: formData.conclusao,
cidCode: formData.cid,
status: 'concluido',
};
const resultado = await criarLaudo(laudoData);
setMensagem(`✓ ${resultado.mensagem}`);
console.log('Laudo criado:', resultado.id);
// Você pode fazer mais algo aqui, como:
// - Redirecionar para página do laudo
// - Atualizar lista de laudos
// - Limpar formulário
} catch (erro) {
setMensagem(`✗ Erro: ${erro instanceof Error ? erro.message : String(erro)}`);
} finally {
setCarregando(false);
}
};
return (
<div>
<form onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
handleCriarLaudo(Object.fromEntries(formData));
}}>
<textarea
name="texto"
placeholder="Texto do laudo"
required
/>
<input
type="text"
name="pacienteId"
placeholder="ID do Paciente"
required
/>
<input
type="text"
name="medicoId"
placeholder="ID do Médico"
required
/>
<button type="submit" disabled={carregando}>
{carregando ? 'Criando...' : 'Criar Laudo'}
</button>
</form>
{mensagem && <p>{mensagem}</p>}
</div>
);
}
*/
}
/**
* Exemplo 4: Tratamento de erros específicos
*/
export async function exemploTratamentoErros() {
try {
const laudoData: CriarLaudoData = {
pacienteId: 'patient-id',
medicoId: 'doctor-id',
textoLaudo: 'Texto do laudo',
};
const resultado = await criarLaudo(laudoData);
console.log('Sucesso:', resultado);
} catch (erro) {
if (erro instanceof Error) {
// Trata diferentes tipos de erro
if (erro.message.includes('Paciente ID') || erro.message.includes('Médico ID')) {
console.error('Erro de validação: dados incompletos');
} else if (erro.message.includes('Supabase')) {
console.error('Erro de conexão com banco de dados');
} else if (erro.message.includes('n8n')) {
console.warn('Laudo criado, mas notificação falhou');
} else {
console.error('Erro desconhecido:', erro.message);
}
}
}
}
/**
* DOCUMENTAÇÃO DO FLUXO N8N
*
* A função criarLaudo executa o seguinte fluxo:
*
* 1. CRIAÇÃO NO SUPABASE
* - Salva o report na tabela 'reports' do Supabase
* - Status padrão: 'concluido'
* - Retorna o report criado com seu ID
*
* 2. NOTIFICAÇÃO N8N
* - Se o report foi criado com sucesso, faz um POST para:
* URL: https://joaogustavo.me/webhook/notificar-laudo
* - Envia payload com:
* - pacienteId: ID do paciente (patient_id)
* - reportId: ID do report criado
*
* 3. NO N8N
* O webhook deve estar configurado para:
* - Receber o payload JSON POST
* - Extrair pacienteId e reportId
* - Buscar informações do paciente
* - Enviar notificação (email, SMS, push, etc.)
* - Registrar log da notificação
*
* 4. COMPORTAMENTO EM CASO DE FALHA
* - Se a criação do report falhar: exceção é lançada
* - Se o envio para n8n falhar: report é mantido, erro é logado
* (não bloqueia a operação de criação)
*
* EXEMPLO DE USO:
*
* const novoReport = await criarLaudo({
* pacienteId: "3854866a-5476-48be-8313-77029ccdb70f",
* textoLaudo: "Texto do laudo aqui..."
* });
*
* // Depois disto, automaticamente:
* // 1. Report é salvo no Supabase
* // 2. n8n recebe: { pacienteId: "...", reportId: "..." }
* // 3. Paciente é notificado
*/
/**
* EXEMPLO DE WEBHOOK N8N (Configuração)
*
* No n8n, você deve:
* 1. Criar um novo workflow
* 2. Adicionar trigger: "Webhook"
* 3. Configurar:
* - HTTP Method: POST
* - Path: /notificar-laudo
* - Authentication: None (ou Bearer token se desejar)
* 4. Adicionar nós para:
* - Parse do payload JSON recebido
* - Query no banco de dados para buscar paciente
* - Enviar email/SMS/notificação push
* - Logging do resultado
*
* Exemplo de nó JavaScript no n8n:
*
* const { pacienteId, laudoId, pacienteName, pacienteEmail } = $input.first().json;
*
* return {
* pacienteId,
* laudoId,
* pacienteName,
* pacienteEmail,
* notificationType: 'laudo_criado',
* timestamp: new Date().toISOString(),
* message: `Novo laudo ${laudoId} disponível para ${pacienteName}`
* };
*/

193
susconecta/lib/laudo-notification.ts
View File

@ -1,193 +0,0 @@
/**
* Módulo de notificação de laudos via n8n
* Integração com automação n8n para notificar pacientes quando laudos são criados
*/
import { ENV_CONFIG } from '@/lib/env-config';
/**
* Configurações do webhook n8n
*/
const N8N_WEBHOOK_CONFIG = {
// URL do webhook configurado no n8n
webhookUrl: 'https://joaogustavo.me/webhook/notificar-laudo',
// Timeout para a requisição (em ms)
timeout: 30000,
// Tentativas de retry em caso de falha
maxRetries: 3,
};
/**
* Tipos de dados para notificação de laudo
*/
export interface NotificacaoLaudoPayload {
pacienteId: string;
laudoId: string;
pacienteName?: string;
pacienteEmail?: string;
medicalDetails?: {
examType?: string;
medico?: string;
dataEmissao?: string;
};
}
/**
* Resultado da notificação
*/
export interface NotificacaoLaudoResult {
sucesso: boolean;
mensagem: string;
n8nResponse?: any;
erro?: string;
}
/**
* Notifica o n8n sobre a criação de um novo laudo
* @param payload Dados do laudo e paciente para notificação
* @returns Resultado da notificação
*/
export async function notificarLaudoCriadoN8n(
payload: NotificacaoLaudoPayload
): Promise<NotificacaoLaudoResult> {
try {
// Validação básica dos dados
if (!payload.pacienteId || !payload.laudoId) {
return {
sucesso: false,
mensagem: 'Dados de paciente ou laudo inválidos',
erro: 'pacienteId e laudoId são obrigatórios',
};
}
// Constrói o payload para o webhook
const webhookPayload = {
pacienteId: payload.pacienteId,
laudoId: payload.laudoId,
pacienteName: payload.pacienteName || '',
pacienteEmail: payload.pacienteEmail || '',
// Adiciona dados médicos se disponíveis
...(payload.medicalDetails && {
examType: payload.medicalDetails.examType,
medico: payload.medicalDetails.medico,
dataEmissao: payload.medicalDetails.dataEmissao,
}),
// Timestamp da notificação
notificadoEm: new Date().toISOString(),
};
console.log('[n8n] Enviando notificação de laudo criado:', {
pacienteId: payload.pacienteId,
laudoId: payload.laudoId,
webhookUrl: N8N_WEBHOOK_CONFIG.webhookUrl,
});
// Tenta enviar o webhook com retry
let ultimoErro: any = null;
for (let tentativa = 1; tentativa <= N8N_WEBHOOK_CONFIG.maxRetries; tentativa++) {
try {
const controller = new AbortController();
const timeoutId = setTimeout(
() => controller.abort(),
N8N_WEBHOOK_CONFIG.timeout
);
const response = await fetch(N8N_WEBHOOK_CONFIG.webhookUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify(webhookPayload),
signal: controller.signal,
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(
`HTTP ${response.status}: ${response.statusText}`
);
}
const responseData = await response.json();
console.log('[n8n] Notificação enviada com sucesso:', {
status: response.status,
laudoId: payload.laudoId,
});
return {
sucesso: true,
mensagem: 'Paciente notificado com sucesso',
n8nResponse: responseData,
};
} catch (erro) {
ultimoErro = erro;
console.warn(
`[n8n] Tentativa ${tentativa}/${N8N_WEBHOOK_CONFIG.maxRetries} falhou:`,
erro instanceof Error ? erro.message : String(erro)
);
// Se não for a última tentativa, aguarda um pouco antes de tentar novamente
if (tentativa < N8N_WEBHOOK_CONFIG.maxRetries) {
await new Promise((resolve) =>
setTimeout(resolve, 1000 * tentativa) // Backoff exponencial
);
}
}
}
// Se chegou aqui, todas as tentativas falharam
console.error('[n8n] Todas as tentativas de notificação falharam:', ultimoErro);
return {
sucesso: false,
mensagem: 'Falha ao notificar paciente através do n8n',
erro: ultimoErro instanceof Error ? ultimoErro.message : String(ultimoErro),
};
} catch (erro) {
console.error('[notificarLaudoCriadoN8n] Erro inesperado:', erro);
return {
sucesso: false,
mensagem: 'Erro ao processar notificação de laudo',
erro: erro instanceof Error ? erro.message : String(erro),
};
}
}
/**
* Versão assíncrona que não bloqueia - envia notificação em background
* Útil para não aumentar o tempo de resposta da API
* @param payload Dados do laudo e paciente
*/
export function notificarLaudoAsyncBackground(
payload: NotificacaoLaudoPayload
): void {
// Envia notificação em background sem aguardar
notificarLaudoCriadoN8n(payload)
.then((result) => {
if (!result.sucesso) {
console.warn('[n8n] Notificação de laudo falhou (background):', result.erro);
}
})
.catch((erro) => {
console.error('[n8n] Erro ao notificar laudo em background:', erro);
});
}
/**
* Determina se as notificações n8n estão habilitadas
* Pode ser controlado via variável de ambiente
*/
export function notificacoesHabilitadas(): boolean {
if (typeof window === 'undefined') {
// Server-side: verificar variável de ambiente
return process.env.NEXT_PUBLIC_N8N_ENABLED !== 'false';
}
// Client-side: sempre habilitado
return true;
}

148
susconecta/lib/reportService.ts
View File

@ -1,148 +0,0 @@
/**
* serviço para criar relatórios e notificar pacientes via n8n
*
* Este serviço encapsula a lógica de:
* 1. Criar um novo report no Supabase
* 2. Notificar o paciente via webhook n8n (que dispara SMS via Twilio)
*/
interface CreateReportData {
patientId: string; // UUID do paciente
requestedBy: string; // UUID de quem solicitou (médico)
exam: string;
diagnosis: string;
conclusion: string;
contentHtml: string;
}
interface CreateReportResult {
success: boolean;
report?: any;
error?: string;
}
/**
* Cria um novo report no Supabase e notifica o paciente via n8n
*
* Fluxo:
* 1. Insere um novo registro na tabela 'reports' com status 'draft'
* 2. Envia webhook para n8n com pacienteId e reportId
* 3. n8n recebe e dispara notificação SMS via Twilio
* 4. Retorna o report criado (mesmo que a notificação falhe)
*
* @param data Dados do report a ser criado
* @returns { success: true, report } ou { success: false, error }
*/
export const createAndNotifyReport = async (data: CreateReportData): Promise<CreateReportResult> => {
try {
// Validação básica
if (!data.patientId || !data.exam || !data.conclusion) {
throw new Error('Faltam campos obrigatórios: patientId, exam, conclusion');
}
console.log('[reportService] Criando novo report para paciente:', data.patientId);
// 1. Criar report no Supabase
const BASE_API = 'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports';
let token: string | undefined = undefined;
if (typeof window !== 'undefined') {
token =
localStorage.getItem('auth_token') ||
localStorage.getItem('token') ||
sessionStorage.getItem('auth_token') ||
sessionStorage.getItem('token') ||
undefined;
}
const headers: HeadersInit = {
'Content-Type': 'application/json',
'Accept': 'application/json',
'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ',
'Prefer': 'return=representation',
};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const reportPayload = {
patient_id: data.patientId,
status: 'draft',
requested_by: data.requestedBy,
exam: data.exam,
diagnosis: data.diagnosis,
conclusion: data.conclusion,
content_html: data.contentHtml,
created_at: new Date().toISOString(),
};
const responseSupabase = await fetch(BASE_API, {
method: 'POST',
headers,
body: JSON.stringify(reportPayload),
});
if (!responseSupabase.ok) {
const errorText = await responseSupabase.text();
console.error('[reportService] Erro ao criar report no Supabase:', errorText);
throw new Error(`Supabase error: ${responseSupabase.statusText}`);
}
const newReport = await responseSupabase.json();
// Supabase retorna array
const report = Array.isArray(newReport) ? newReport[0] : newReport;
if (!report || !report.id) {
throw new Error('Report criado mas sem ID retornado');
}
console.log('[reportService] Report criado com sucesso. ID:', report.id);
// 2. Notificar paciente via n8n → Twilio
try {
console.log('[reportService] Enviando notificação para n8n...');
const notificationResponse = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
pacienteId: report.patient_id, // UUID do paciente
reportId: report.id, // UUID do report
}),
});
if (!notificationResponse.ok) {
console.warn(
'[reportService] Erro ao enviar notificação SMS. Status:',
notificationResponse.status
);
// Não falha a criação do report se SMS falhar
} else {
console.log('[reportService] Notificação enviada com sucesso ao n8n');
}
} catch (erroNotificacao) {
console.warn('[reportService] Erro ao enviar notificação para n8n:', erroNotificacao);
// Não falha a criação do report se a notificação falhar
}
return {
success: true,
report,
};
} catch (error) {
console.error('[reportService] Erro ao criar report:', error);
return {
success: false,
error: error instanceof Error ? error.message : String(error),
};
}
};
/**
* Interface exportada para uso em componentes
*/
export type { CreateReportData, CreateReportResult };

178
susconecta/lib/reports.ts
View File

@ -47,7 +47,6 @@ import {
ReportsResponse, ReportsResponse,
ReportResponse ReportResponse
} from '@/types/report-types'; } from '@/types/report-types';
import { buscarPacientePorId } from '@/lib/api';
// Definição local para ApiError // Definição local para ApiError
type ApiError = { type ApiError = {
@ -215,52 +214,7 @@ export async function criarRelatorio(dadosRelatorio: CreateReportData, token?: s
const resultado = await resposta.json(); const resultado = await resposta.json();
// Supabase retorna array // Supabase retorna array
if (Array.isArray(resultado) && resultado.length > 0) { if (Array.isArray(resultado) && resultado.length > 0) {
const novoRelatorio = resultado[0]; return resultado[0];
// ✅ ENVIAR NOTIFICAÇÃO PARA N8N APÓS CRIAR RELATÓRIO
if (novoRelatorio && novoRelatorio.id && dadosRelatorio.patient_id) {
try {
console.log('[criarRelatorio] Enviando notificação para n8n webhook...');
// Buscar dados do paciente para incluir nome e telefone
const pacienteData = await buscarPacientePorId(dadosRelatorio.patient_id).catch(e => {
console.warn('[criarRelatorio] Erro ao buscar paciente:', e);
return null;
});
const pacienteNome = pacienteData?.full_name || '';
const pacienteCelular = pacienteData?.phone_mobile || '';
const payloadWebhook = {
pacienteId: dadosRelatorio.patient_id,
reportId: novoRelatorio.id,
pacienteNome: pacienteNome,
pacienteCelular: pacienteCelular
};
console.log('[criarRelatorio] Payload do webhook:', payloadWebhook);
const resNotificacao = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payloadWebhook)
}).catch(e => {
console.warn('[criarRelatorio] Erro de rede ao enviar webhook:', e);
return null;
});
if (resNotificacao?.ok) {
console.log('[criarRelatorio] ✅ Notificação enviada com sucesso ao n8n');
} else if (resNotificacao) {
console.warn('[criarRelatorio] ⚠️ Notificação ao n8n retornou status:', resNotificacao.status);
}
} catch (erroNotificacao) {
console.warn('[criarRelatorio] ❌ Erro ao enviar notificação para n8n:', erroNotificacao);
// Não falha a criação do relatório se a notificação falhar
}
}
return novoRelatorio;
} }
throw new Error('Resposta inesperada da API Supabase'); throw new Error('Resposta inesperada da API Supabase');
} }
@ -430,134 +384,4 @@ export async function listarRelatoriosParaMedicoAtribuido(userId?: string): Prom
console.error('[listarRelatoriosParaMedicoAtribuido] erro:', err); console.error('[listarRelatoriosParaMedicoAtribuido] erro:', err);
throw err; throw err;
} }
}
/**
* Interface para dados necessários ao criar um laudo
*/
export interface CriarLaudoData {
pacienteId: string; // ID do paciente (obrigatório)
textoLaudo: string; // Texto do laudo (obrigatório)
medicoId?: string; // ID do médico que criou (opcional)
exame?: string; // Tipo de exame (opcional)
diagnostico?: string; // Diagnóstico (opcional)
conclusao?: string; // Conclusão (opcional)
cidCode?: string; // Código CID (opcional)
status?: 'rascunho' | 'concluido' | 'enviado'; // Status (opcional, padrão: 'concluido')
contentHtml?: string; // Conteúdo HTML (opcional)
contentJson?: any; // Conteúdo JSON (opcional)
}
/**
* Cria um novo laudo no Supabase e notifica o paciente via n8n
*
* Fluxo:
* 1. Salva o laudo no Supabase (tabela 'reports')
* 2. Envia notificação ao n8n com pacienteId e laudoId
* 3. Retorna o laudo criado
*
* @param laudoData Dados do laudo a criar
* @returns Laudo criado com ID
* @throws Erro se falhar ao criar o laudo
*/
export async function criarLaudo(laudoData: CriarLaudoData): Promise<any> {
try {
// 1. Validação dos dados obrigatórios
if (!laudoData.pacienteId || !laudoData.textoLaudo) {
throw new Error('Paciente ID e Texto do Laudo são obrigatórios');
}
console.log('[criarLaudo] Criando laudo para paciente:', laudoData.pacienteId);
// 2. Monta o payload para Supabase
const payloadSupabase = {
patient_id: laudoData.pacienteId,
...(laudoData.medicoId && { requested_by: laudoData.medicoId }),
...(laudoData.exame && { exam: laudoData.exame }),
...(laudoData.diagnostico && { diagnosis: laudoData.diagnostico }),
...(laudoData.conclusao && { conclusion: laudoData.conclusao }),
...(laudoData.cidCode && { cid_code: laudoData.cidCode }),
...(laudoData.contentHtml && { content_html: laudoData.contentHtml }),
...(laudoData.contentJson && { content_json: laudoData.contentJson }),
status: laudoData.status || 'concluido',
};
// 3. Salva o laudo no Supabase
const urlSupabase = 'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports';
let tokenAuth: string | undefined = undefined;
if (typeof window !== 'undefined') {
tokenAuth =
localStorage.getItem('auth_token') ||
localStorage.getItem('token') ||
sessionStorage.getItem('auth_token') ||
sessionStorage.getItem('token') ||
undefined;
}
const headersSupabase: HeadersInit = {
'Content-Type': 'application/json',
'Accept': 'application/json',
'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ',
'Prefer': 'return=representation',
};
if (tokenAuth) {
headersSupabase['Authorization'] = `Bearer ${tokenAuth}`;
}
const resSupabase = await fetch(urlSupabase, {
method: 'POST',
headers: headersSupabase,
body: JSON.stringify(payloadSupabase),
});
if (!resSupabase.ok) {
const errorText = await resSupabase.text();
console.error('[criarLaudo] Erro ao salvar laudo no Supabase:', errorText);
throw new Error(`Falha ao salvar laudo: ${resSupabase.statusText}`);
}
const novoLaudo = await resSupabase.json();
const laudoId = novoLaudo?.id;
if (!laudoId) {
throw new Error('Laudo criado mas sem ID retornado');
}
console.log('[criarLaudo] Laudo salvo com sucesso. ID:', laudoId);
// 4. CHAMAR O N8N para notificar o paciente
// Padrão simples: apenas pacienteId e reportId
try {
console.log('[criarLaudo] Enviando notificação para n8n...');
const resNotificacao = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
pacienteId: laudoData.pacienteId, // ← ID do paciente
reportId: laudoId // ← ID do report criado
})
});
if (resNotificacao.ok) {
console.log('[criarLaudo] Notificação enviada com sucesso ao n8n');
} else {
console.warn('[criarLaudo] Notificação ao n8n retornou status:', resNotificacao.status);
}
} catch (erroNotificacao) {
// Não falha a criação do laudo se a notificação falhar
console.warn('[criarLaudo] Erro ao enviar notificação para n8n:', erroNotificacao);
}
// 5. Retorna o laudo criado
return {
...novoLaudo,
mensagem: 'Laudo criado e paciente notificado com sucesso!',
};
} catch (erro) {
console.error('[criarLaudo] Erro ao criar laudo:', erro);
throw erro;
}
} }

14
susconecta/types/lamejs.d.ts vendored
View File

@ -1,14 +0,0 @@
// Minimal type declarations for lamejs used in demo-voice-orb
// Extend if more APIs are required.
declare module 'lamejs' {
class Mp3Encoder {
constructor(channels: number, sampleRate: number, kbps: number);
encodeBuffer(buffer: Int16Array): Uint8Array;
flush(): Uint8Array;
}
export { Mp3Encoder };
// Default export pattern support
const _default: { Mp3Encoder: typeof Mp3Encoder };
export default _default;
}