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

feat: improve patient registration auth,

Browse Source 
debugging in 3D calendar and register profiles
This commit is contained in:
M-Gabrielly 2025-11-06 01:01:17 -03:00
parent a857e25d2f
commit 5dd0764f0e
7 changed files with 622 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import { v4 as uuidv4 } from 'uuid'; // Usado para IDs de fallback
import { Sidebar } from "@/components/layout/sidebar"; import { Sidebar } from "@/components/layout/sidebar";
import { PagesHeader } from "@/components/features/dashboard/header"; import { PagesHeader } from "@/components/features/dashboard/header";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useAuth } from "@/hooks/useAuth";
import { mockWaitingList } from "@/lib/mocks/appointment-mocks"; import { mockWaitingList } from "@/lib/mocks/appointment-mocks";
import "./index.css"; import "./index.css";
import { import {
@ -22,6 +23,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"; // Calendário 3D mantido import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"; // Calendário 3D mantido
import { PatientRegistrationForm } from "@/components/features/forms/patient-registration-form";
const ListaEspera = dynamic( const ListaEspera = dynamic(
() => import("@/components/features/agendamento/ListaEspera"), () => import("@/components/features/agendamento/ListaEspera"),
@ -29,6 +31,7 @@ const ListaEspera = dynamic(
); );
export default function AgendamentoPage() { export default function AgendamentoPage() {
const { user, token } = useAuth();
const [appointments, setAppointments] = useState<any[]>([]); const [appointments, setAppointments] = useState<any[]>([]);
const [waitingList, setWaitingList] = useState(mockWaitingList); const [waitingList, setWaitingList] = useState(mockWaitingList);
const [activeTab, setActiveTab] = useState<"calendar" | "espera" | "3d">("calendar"); const [activeTab, setActiveTab] = useState<"calendar" | "espera" | "3d">("calendar");
@ -40,6 +43,9 @@ export default function AgendamentoPage() {
const [managerEvents, setManagerEvents] = useState<Event[]>([]); const [managerEvents, setManagerEvents] = useState<Event[]>([]);
const [managerLoading, setManagerLoading] = useState<boolean>(true); const [managerLoading, setManagerLoading] = useState<boolean>(true);
// Estado para o formulário de registro de paciente
const [showPatientForm, setShowPatientForm] = useState(false);
useEffect(() => { useEffect(() => {
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
if (event.key === "c") { if (event.key === "c") {
@ -242,6 +248,7 @@ export default function AgendamentoPage() {
events={threeDEvents} events={threeDEvents}
onAddEvent={handleAddEvent} onAddEvent={handleAddEvent}
onRemoveEvent={handleRemoveEvent} onRemoveEvent={handleRemoveEvent}
onOpenAddPatientForm={() => setShowPatientForm(true)}
/> />
</div> </div>
) : ( ) : (
@ -253,6 +260,17 @@ export default function AgendamentoPage() {
/> />
)} )}
</div> </div>
{/* Formulário de Registro de Paciente */}
<PatientRegistrationForm
open={showPatientForm}
onOpenChange={setShowPatientForm}
mode="create"
onSaved={(newPaciente) => {
console.log('[Calendar] Novo paciente registrado:', newPaciente);
setShowPatientForm(false);
}}
/>
</div> </div>
</div> </div>
); );

44
susconecta/app/globals.css
View File

@ -123,3 +123,47 @@
@apply bg-background text-foreground font-sans; @apply bg-background text-foreground font-sans;
} }
} }
/* Esconder botões com ícones de lixo */
button:has(.lucide-trash2),
button:has(.lucide-trash),
button[class*="trash"] {
display: none !important;
}
/* Esconder campos de input embaixo do calendário 3D */
input[placeholder="Nome do paciente"],
input[placeholder^="dd/mm"],
input[type="date"][value=""] {
display: none !important;
}
/* Esconder botão "Adicionar Paciente" */
/* Removido seletor vazio - será tratado por outros seletores */
/* Afastar X do popup (dialog-close) para longe das setas */
[data-slot="dialog-close"],
button[aria-label="Close"],
.fc button[aria-label*="Close"] {
right: 16px !important;
top: 8px !important;
position: absolute !important;
}
/* Esconder footer/header extras do calendário que mostram os campos */
.fc .fc-toolbar input,
.fc .fc-toolbar [type="date"],
.fc .fc-toolbar [placeholder*="paciente"] {
display: none !important;
}
/* Esconder row com campos de pesquisa - estrutura mantida pelo calendário */
/* Esconder botões de trash/delete em todos os popups */
[role="dialog"] button[class*="hover:text-destructive"],
[role="dialog"] button[aria-label*="delete"],
[role="dialog"] button[aria-label*="excluir"],
[role="dialog"] button[aria-label*="remove"] {
display: none !important;
}

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

@ -1429,95 +1429,192 @@ export default function PacientePage() {
function Perfil() { function Perfil() {
const hasAddress = Boolean(profileData.endereco || profileData.cidade || profileData.cep)
return ( return (
<div className="space-y-6 max-w-2xl mx-auto"> <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 md:px-8">
{/* Header com Título e Botão */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-foreground">Meu Perfil</h2> <div>
<h2 className="text-3xl font-bold">Meu Perfil</h2>
<p className="text-muted-foreground mt-1">Bem-vindo à sua área exclusiva.</p>
</div>
{!isEditingProfile ? ( {!isEditingProfile ? (
<Button onClick={() => setIsEditingProfile(true)} className="flex items-center gap-2"> <Button
Editar Perfil className="bg-blue-600 hover:bg-blue-700"
onClick={() => setIsEditingProfile(true)}
>
✏️ Editar Perfil
</Button> </Button>
) : ( ) : (
<div className="flex gap-2"> <div className="flex gap-2">
<Button onClick={handleSaveProfile} className="flex items-center gap-2">Salvar</Button> <Button
className="bg-green-600 hover:bg-green-700"
onClick={handleSaveProfile}
>
✓ Salvar
</Button>
<Button <Button
variant="outline" variant="outline"
onClick={handleCancelEdit} onClick={handleCancelEdit}
className="transition duration-200 hover:bg-primary/10 hover:text-primary dark:hover:bg-accent dark:hover:text-accent-foreground"
> >
Cancelar ✕ Cancelar
</Button> </Button>
</div> </div>
)} )}
</div> </div>
<div className="grid gap-6 md:grid-cols-2">
{/* Informações Pessoais */} {/* Grid de 3 colunas (2 + 1) */}
<div className="space-y-4"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Informações Pessoais</h3> {/* Coluna Esquerda - Informações Pessoais */}
<div className="space-y-2"> <div className="lg:col-span-2 space-y-6">
<Label htmlFor="nome">Nome Completo</Label> {/* Informações Pessoais */}
<p className="p-2 bg-muted rounded text-muted-foreground">{profileData.nome}</p> <div className="border border-border rounded-lg p-6">
<span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span> <h3 className="text-lg font-semibold mb-4">Informações Pessoais</h3>
<div className="space-y-4">
{/* Nome Completo */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Nome Completo
</Label>
<div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
{profileData.nome || "Não preenchido"}
</div>
<p className="text-xs text-muted-foreground mt-1">
Este campo não pode ser alterado
</p>
</div>
{/* Email */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Email
</Label>
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.email || "Não preenchido"}
</div>
<p className="text-xs text-muted-foreground mt-1">
Este campo não pode ser alterado
</p>
</div>
{/* Telefone */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Telefone
</Label>
{isEditingProfile ? (
<Input
value={profileData.telefone || ""}
onChange={(e) => handleProfileChange('telefone', e.target.value)}
className="mt-2"
placeholder="(00) 00000-0000"
maxLength={15}
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.telefone || "Não preenchido"}
</div>
)}
</div>
</div>
</div> </div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label> {/* Endereço e Contato */}
{isEditingProfile ? ( <div className="border border-border rounded-lg p-6">
<Input id="email" type="email" value={profileData.email} onChange={e => handleProfileChange('email', e.target.value)} /> <h3 className="text-lg font-semibold mb-4">Endereço e Contato</h3>
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.email}</p> <div className="space-y-4">
)} {/* Logradouro */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Logradouro
</Label>
{isEditingProfile ? (
<Input
value={profileData.endereco || ""}
onChange={(e) => handleProfileChange('endereco', e.target.value)}
className="mt-2"
placeholder="Rua, avenida, etc."
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.endereco || "Não preenchido"}
</div>
)}
</div>
{/* Cidade */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Cidade
</Label>
{isEditingProfile ? (
<Input
value={profileData.cidade || ""}
onChange={(e) => handleProfileChange('cidade', e.target.value)}
className="mt-2"
placeholder="São Paulo"
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.cidade || "Não preenchido"}
</div>
)}
</div>
{/* CEP */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
CEP
</Label>
{isEditingProfile ? (
<Input
value={profileData.cep || ""}
onChange={(e) => handleProfileChange('cep', e.target.value)}
className="mt-2"
placeholder="00000-000"
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.cep || "Não preenchido"}
</div>
)}
</div>
</div>
</div> </div>
<div className="space-y-2"> </div>
<Label htmlFor="telefone">Telefone</Label>
{/* Coluna Direita - Foto do Perfil */}
<div>
<div className="border border-border rounded-lg p-6">
<h3 className="text-lg font-semibold mb-4">Foto do Perfil</h3>
{isEditingProfile ? ( {isEditingProfile ? (
<Input id="telefone" value={profileData.telefone} onChange={e => handleProfileChange('telefone', e.target.value)} /> <div className="space-y-4">
<UploadAvatar
userId={profileData.id}
currentAvatarUrl={profileData.foto_url || "/avatars/01.png"}
onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
userName={profileData.nome}
/>
</div>
) : ( ) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.telefone}</p> <div className="flex flex-col items-center gap-4">
<Avatar className="h-24 w-24">
<AvatarFallback className="bg-primary text-primary-foreground 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-sm text-muted-foreground">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'PC'}
</p>
</div>
</div>
)} )}
</div> </div>
</div> </div>
{/* Endereço e Contato (render apenas se existir algum dado) */}
{hasAddress && (
<div className="space-y-4">
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Endereço</h3>
<div className="space-y-2">
<Label htmlFor="endereco">Endereço</Label>
{isEditingProfile ? (
<Input id="endereco" value={profileData.endereco} onChange={e => handleProfileChange('endereco', e.target.value)} />
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.endereco}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="cidade">Cidade</Label>
{isEditingProfile ? (
<Input id="cidade" value={profileData.cidade} onChange={e => handleProfileChange('cidade', e.target.value)} />
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cidade}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="cep">CEP</Label>
{isEditingProfile ? (
<Input id="cep" value={profileData.cep} onChange={e => handleProfileChange('cep', e.target.value)} />
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cep}</p>
)}
</div>
{/* Biografia removed: not used */}
</div>
)}
</div>
{/* Foto do Perfil */}
<div className="border-t border-border pt-6">
<h3 className="text-lg font-semibold mb-4 text-foreground">Foto do Perfil</h3>
<UploadAvatar
userId={profileData.id}
currentAvatarUrl={profileData.foto_url}
onAvatarChange={(newUrl) => handleProfileChange('foto_url', newUrl)}
userName={profileData.nome}
/>
</div> </div>
</div> </div>
) )

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

@ -25,7 +25,7 @@ import {
} from "@/components/ui/table"; } from "@/components/ui/table";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, Trash2, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity, Search } from "lucide-react" import { User, FolderOpen, X, Users, MessageSquare, ClipboardList, Plus, Edit, ChevronLeft, ChevronRight, Clock, FileCheck, Upload, Download, Eye, History, Stethoscope, Pill, Activity, Search } from "lucide-react"
import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react"; import { Calendar as CalendarIcon, FileText, Settings } from "lucide-react";
import { import {
Tooltip, Tooltip,
@ -41,6 +41,7 @@ import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid"; import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import ptBrLocale from "@fullcalendar/core/locales/pt-br"; import ptBrLocale from "@fullcalendar/core/locales/pt-br";
import { PatientRegistrationForm } from "@/components/features/forms/patient-registration-form";
const FullCalendar = dynamic(() => import("@fullcalendar/react"), { const FullCalendar = dynamic(() => import("@fullcalendar/react"), {
ssr: false, ssr: false,
@ -230,7 +231,7 @@ const ProfissionalPage = () => {
})(); })();
return () => { mounted = false; }; return () => { mounted = false; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, [user?.email, user?.id]);
@ -378,6 +379,9 @@ const ProfissionalPage = () => {
const [editingEvent, setEditingEvent] = useState<any>(null); const [editingEvent, setEditingEvent] = useState<any>(null);
const [showPopup, setShowPopup] = useState(false); const [showPopup, setShowPopup] = useState(false);
const [showActionModal, setShowActionModal] = useState(false); const [showActionModal, setShowActionModal] = useState(false);
const [showDayModal, setShowDayModal] = useState(false);
const [selectedDayDate, setSelectedDayDate] = useState<Date | null>(null);
const [showPatientForm, setShowPatientForm] = useState(false);
const [step, setStep] = useState(1); const [step, setStep] = useState(1);
const [newEvent, setNewEvent] = useState({ const [newEvent, setNewEvent] = useState({
title: "", title: "",
@ -686,6 +690,13 @@ const ProfissionalPage = () => {
<section className="bg-card shadow-md rounded-lg border border-border p-6"> <section className="bg-card shadow-md rounded-lg border border-border p-6">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-bold">Agenda do Dia</h2> <h2 className="text-2xl font-bold">Agenda do Dia</h2>
<Button
onClick={() => setShowPatientForm(true)}
className="flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Adicionar Paciente
</Button>
</div> </div>
{/* Navegação de Data */} {/* Navegação de Data */}
@ -718,7 +729,7 @@ const ProfissionalPage = () => {
</div> </div>
{/* Lista de Pacientes do Dia */} {/* Lista de Pacientes do Dia */}
<div className="space-y-4"> <div className="space-y-4 max-h-[calc(100vh-450px)] overflow-y-auto pr-2">
{todayEvents.length === 0 ? ( {todayEvents.length === 0 ? (
<div className="text-center py-8 text-gray-600 dark:text-muted-foreground"> <div className="text-center py-8 text-gray-600 dark:text-muted-foreground">
<CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" /> <CalendarIcon className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" />
@ -2656,150 +2667,216 @@ const ProfissionalPage = () => {
const renderPerfilSection = () => ( const renderPerfilSection = () => (
<div className="space-y-6"> <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 md:px-8">
{/* Header com Título e Botão */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-foreground">Meu Perfil</h2> <div>
<h2 className="text-3xl font-bold">Meu Perfil</h2>
<p className="text-muted-foreground mt-1">Bem-vindo à sua área exclusiva.</p>
</div>
{!isEditingProfile ? ( {!isEditingProfile ? (
<Button onClick={() => setIsEditingProfile(true)} className="flex items-center gap-2"> <Button
<Edit className="h-4 w-4" /> className="bg-blue-600 hover:bg-blue-700"
Editar Perfil onClick={() => setIsEditingProfile(true)}
>
✏️ Editar Perfil
</Button> </Button>
) : ( ) : (
<div className="flex gap-2"> <div className="flex gap-2">
<Button onClick={handleSaveProfile} className="flex items-center gap-2"> <Button
Salvar className="bg-green-600 hover:bg-green-700"
onClick={handleSaveProfile}
>
✓ Salvar
</Button> </Button>
<Button variant="outline" onClick={handleCancelEdit} className="hover:bg-primary! hover:text-white! transition-colors"> <Button
Cancelar variant="outline"
onClick={handleCancelEdit}
>
✕ Cancelar
</Button> </Button>
</div> </div>
)} )}
</div> </div>
<div className="grid gap-6 md:grid-cols-2"> {/* Grid de 3 colunas (2 + 1) */}
{/* Informações Pessoais */} <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="space-y-4"> {/* Coluna Esquerda - Informações Pessoais */}
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Informações Pessoais</h3> <div className="lg:col-span-2 space-y-6">
{/* Informações Pessoais */}
<div className="border border-border rounded-lg p-6">
<h3 className="text-lg font-semibold mb-4">Informações Pessoais</h3>
<div className="space-y-2"> <div className="space-y-4">
<Label htmlFor="nome">Nome Completo</Label> {/* Nome Completo */}
<p className="p-2 bg-muted rounded text-muted-foreground">{profileData.nome}</p> <div>
<span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span> <Label className="text-sm font-medium text-muted-foreground">
</div> Nome Completo
</Label>
<div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
{profileData.nome || "Não preenchido"}
</div>
<p className="text-xs text-muted-foreground mt-1">
Este campo não pode ser alterado
</p>
</div>
<div className="space-y-2"> {/* Email */}
<Label htmlFor="email">Email</Label> <div>
{isEditingProfile ? ( <Label className="text-sm font-medium text-muted-foreground">
<Input Email
id="email" </Label>
type="email" {isEditingProfile ? (
value={profileData.email} <Input
onChange={(e) => handleProfileChange('email', e.target.value)} value={profileData.email || ""}
/> onChange={(e) => handleProfileChange('email', e.target.value)}
) : ( className="mt-2"
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.email}</p> type="email"
)} />
</div> ) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.email || "Não preenchido"}
</div>
)}
</div>
<div className="space-y-2"> {/* Telefone */}
<Label htmlFor="telefone">Telefone</Label> <div>
{isEditingProfile ? ( <Label className="text-sm font-medium text-muted-foreground">
<Input Telefone
id="telefone" </Label>
value={profileData.telefone} {isEditingProfile ? (
onChange={(e) => handleProfileChange('telefone', e.target.value)} <Input
/> value={profileData.telefone || ""}
) : ( onChange={(e) => handleProfileChange('telefone', e.target.value)}
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.telefone}</p> className="mt-2"
)} placeholder="(00) 00000-0000"
</div> />
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.telefone || "Não preenchido"}
</div>
)}
</div>
<div className="space-y-2"> {/* CRM */}
<Label htmlFor="crm">CRM</Label> <div>
<p className="p-2 bg-muted rounded text-muted-foreground">{profileData.crm}</p> <Label className="text-sm font-medium text-muted-foreground">
<span className="text-xs text-muted-foreground">Este campo não pode ser alterado</span> CRM
</div> </Label>
<div className="mt-2 p-3 bg-muted rounded text-foreground font-medium">
{profileData.crm || "Não preenchido"}
</div>
<p className="text-xs text-muted-foreground mt-1">
Este campo não pode ser alterado
</p>
</div>
<div className="space-y-2"> {/* Especialidade */}
<Label htmlFor="especialidade">Especialidade</Label> <div>
{isEditingProfile ? ( <Label className="text-sm font-medium text-muted-foreground">
<Input Especialidade
id="especialidade" </Label>
value={profileData.especialidade} {isEditingProfile ? (
onChange={(e) => handleProfileChange('especialidade', e.target.value)} <Input
/> value={profileData.especialidade || ""}
) : ( onChange={(e) => handleProfileChange('especialidade', e.target.value)}
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.especialidade}</p> className="mt-2"
)} placeholder="Ex: Cardiologia"
</div> />
</div> ) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{/* Endereço e Contato */} {profileData.especialidade || "Não preenchido"}
<div className="space-y-4"> </div>
<h3 className="text-lg font-semibold border-b border-border text-foreground pb-2">Endereço e Contato</h3> )}
</div>
<div className="space-y-2">
<Label htmlFor="endereco">Endereço</Label>
{isEditingProfile ? (
<Input
id="endereco"
value={profileData.endereco}
onChange={(e) => handleProfileChange('endereco', e.target.value)}
/>
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.endereco}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="cidade">Cidade</Label>
{isEditingProfile ? (
<Input
id="cidade"
value={profileData.cidade}
onChange={(e) => handleProfileChange('cidade', e.target.value)}
/>
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cidade}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="cep">CEP</Label>
{isEditingProfile ? (
<Input
id="cep"
value={profileData.cep}
onChange={(e) => handleProfileChange('cep', e.target.value)}
/>
) : (
<p className="p-2 bg-muted/50 rounded text-foreground">{profileData.cep}</p>
)}
</div>
{/* Biografia removida: não é um campo no registro de médico */}
</div>
</div>
{/* Foto do Perfil */}
<div className="border-t border-border pt-6">
<h3 className="text-lg font-semibold mb-4 text-foreground">Foto do Perfil</h3>
<div className="flex items-center gap-4">
<Avatar className="h-20 w-20">
<AvatarFallback className="text-lg">
{profileData.nome.split(' ').map(n => n[0]).join('').toUpperCase()}
</AvatarFallback>
</Avatar>
{isEditingProfile && (
<div className="space-y-2">
<Button variant="outline" size="sm" className="hover:bg-primary! hover:text-white! transition-colors">
Alterar Foto
</Button>
<p className="text-xs text-muted-foreground">
Formatos aceitos: JPG, PNG (máx. 2MB)
</p>
</div> </div>
)} </div>
{/* Endereço e Contato */}
<div className="border border-border rounded-lg p-6">
<h3 className="text-lg font-semibold mb-4">Endereço e Contato</h3>
<div className="space-y-4">
{/* Logradouro */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Logradouro
</Label>
{isEditingProfile ? (
<Input
value={profileData.endereco || ""}
onChange={(e) => handleProfileChange('endereco', e.target.value)}
className="mt-2"
placeholder="Rua, avenida, etc."
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.endereco || "Não preenchido"}
</div>
)}
</div>
{/* Cidade */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
Cidade
</Label>
{isEditingProfile ? (
<Input
value={profileData.cidade || ""}
onChange={(e) => handleProfileChange('cidade', e.target.value)}
className="mt-2"
placeholder="São Paulo"
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.cidade || "Não preenchido"}
</div>
)}
</div>
{/* CEP */}
<div>
<Label className="text-sm font-medium text-muted-foreground">
CEP
</Label>
{isEditingProfile ? (
<Input
value={profileData.cep || ""}
onChange={(e) => handleProfileChange('cep', e.target.value)}
className="mt-2"
placeholder="00000-000"
/>
) : (
<div className="mt-2 p-3 bg-muted rounded text-foreground">
{profileData.cep || "Não preenchido"}
</div>
)}
</div>
</div>
</div>
</div>
{/* Coluna Direita - Foto do Perfil */}
<div>
<div className="border border-border rounded-lg p-6">
<h3 className="text-lg font-semibold mb-4">Foto do Perfil</h3>
<div className="flex flex-col items-center gap-4">
<Avatar className="h-24 w-24">
<AvatarFallback className="bg-primary text-primary-foreground text-2xl font-bold">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
</AvatarFallback>
</Avatar>
<div className="text-center space-y-2">
<p className="text-sm text-muted-foreground">
{profileData.nome?.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'MD'}
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -2838,8 +2915,8 @@ const ProfissionalPage = () => {
); );
case 'laudos': case 'laudos':
return renderLaudosSection(); return renderLaudosSection();
case 'comunicacao': // case 'comunicacao':
return renderComunicacaoSection(); // return renderComunicacaoSection();
case 'perfil': case 'perfil':
return renderPerfilSection(); return renderPerfilSection();
default: default:
@ -2910,14 +2987,15 @@ const ProfissionalPage = () => {
<FileText className="mr-2 h-4 w-4" /> <FileText className="mr-2 h-4 w-4" />
Laudos Laudos
</Button> </Button>
<Button {/* Comunicação removida - campos embaixo do calendário */}
{/* <Button
variant={activeSection === 'comunicacao' ? 'default' : 'ghost'} variant={activeSection === 'comunicacao' ? 'default' : 'ghost'}
className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer" className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
onClick={() => setActiveSection('comunicacao')} onClick={() => setActiveSection('comunicacao')}
> >
<MessageSquare className="mr-2 h-4 w-4" /> <MessageSquare className="mr-2 h-4 w-4" />
Comunicação Comunicação
</Button> </Button> */}
<Button <Button
variant={activeSection === 'perfil' ? 'default' : 'ghost'} variant={activeSection === 'perfil' ? 'default' : 'ghost'}
className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer" className="w-full justify-start transition-colors hover:bg-primary! hover:text-white! cursor-pointer"
@ -3072,14 +3150,6 @@ const ProfissionalPage = () => {
<Edit className="h-4 w-4" /> <Edit className="h-4 w-4" />
Editar Editar
</Button> </Button>
<Button
onClick={handleDeleteEvent}
variant="destructive"
className="flex-1 flex items-center gap-2"
>
<Trash2 className="h-4 w-4" />
Excluir
</Button>
</div> </div>
<Button <Button
@ -3092,6 +3162,128 @@ const ProfissionalPage = () => {
</div> </div>
</div> </div>
)} )}
{/* Modal para visualizar pacientes de um dia específico */}
{showDayModal && selectedDayDate && (
<div className="fixed inset-0 bg-black/50 flex justify-center items-center z-50 p-4">
<div className="bg-card border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
{/* Header com navegação */}
<div className="flex items-center justify-between p-4 border-b border-border">
<button
onClick={() => {
const prev = new Date(selectedDayDate);
prev.setDate(prev.getDate() - 1);
setSelectedDayDate(prev);
}}
className="p-2 hover:bg-muted rounded transition-colors"
aria-label="Dia anterior"
>
<ChevronLeft className="h-5 w-5" />
</button>
<h2 className="text-lg font-semibold flex-1 text-center">
{selectedDayDate.toLocaleDateString('pt-BR', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric'
})}
</h2>
<button
onClick={() => {
const next = new Date(selectedDayDate);
next.setDate(next.getDate() + 1);
setSelectedDayDate(next);
}}
className="p-2 hover:bg-muted rounded transition-colors"
aria-label="Próximo dia"
>
<ChevronRight className="h-5 w-5" />
</button>
<div className="w-12" />
<button
onClick={() => setShowDayModal(false)}
className="p-2 hover:bg-muted rounded transition-colors ml-2"
aria-label="Fechar"
>
<X className="h-5 w-5" />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-4">
{(() => {
const dayStr = selectedDayDate.toISOString().split('T')[0];
const dayEvents = events.filter(e => e.date === dayStr).sort((a, b) => a.time.localeCompare(b.time));
if (dayEvents.length === 0) {
return (
<div className="text-center py-8 text-muted-foreground">
<CalendarIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
<p className="text-lg">Nenhuma consulta agendada para este dia</p>
</div>
);
}
return (
<div className="space-y-3">
<p className="text-sm text-muted-foreground mb-4">
{dayEvents.length} consulta{dayEvents.length !== 1 ? 's' : ''} agendada{dayEvents.length !== 1 ? 's' : ''}
</p>
{dayEvents.map((appointment) => {
const paciente = pacientes.find(p => p.nome === appointment.title);
return (
<div
key={appointment.id}
className="border-l-4 p-4 rounded-lg bg-muted/20"
style={{ borderLeftColor: getStatusColor(appointment.type) }}
>
<div className="space-y-2">
<div className="flex items-center justify-between">
<h3 className="font-semibold flex items-center gap-2">
<User className="h-4 w-4" />
{appointment.title}
</h3>
<span className="px-2 py-1 rounded-full text-xs font-medium text-white" style={{ backgroundColor: getStatusColor(appointment.type) }}>
{appointment.type}
</span>
</div>
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<span className="flex items-center gap-1">
<Clock className="h-4 w-4" />
{appointment.time}
</span>
{paciente && (
<span>
CPF: {getPatientCpf(paciente)} • {getPatientAge(paciente)} anos
</span>
)}
</div>
</div>
</div>
);
})}
</div>
);
})()}
</div>
</div>
</div>
)}
{/* Formulário para cadastro de paciente */}
<PatientRegistrationForm
open={showPatientForm}
onOpenChange={setShowPatientForm}
mode="create"
onSaved={(newPaciente) => {
// Adicionar o novo paciente à lista e recarregar
setPacientes((prev) => [...prev, newPaciente]);
}}
/>
</div> </div>
</ProtectedRoute> </ProtectedRoute>
); );

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

@ -264,7 +264,17 @@ export function PatientRegistrationForm({
} }
async function handleSubmit(ev: React.FormEvent) { async function handleSubmit(ev: React.FormEvent) {
ev.preventDefault(); if (!validateLocal()) return; ev.preventDefault();
if (!validateLocal()) return;
// Debug: verificar se token está disponível
const tokenCheck = typeof window !== 'undefined' ? (localStorage.getItem('auth_token') || sessionStorage.getItem('auth_token')) : null;
console.debug('[PatientForm] Token disponível?', !!tokenCheck ? 'SIM' : 'NÃO - Possível causa do erro!');
if (!tokenCheck) {
setErrors({ submit: 'Sessão expirada. Por favor, faça login novamente.' });
return;
}
try { try {
if (!validarCPFLocal(form.cpf)) { setErrors((e) => ({ ...e, cpf: "CPF inválido" })); return; } if (!validarCPFLocal(form.cpf)) { setErrors((e) => ({ ...e, cpf: "CPF inválido" })); return; }
if (mode === "create") { const existe = await verificarCpfDuplicado(form.cpf); if (existe) { setErrors((e) => ({ ...e, cpf: "CPF já cadastrado no sistema" })); return; } } if (mode === "create") { const existe = await verificarCpfDuplicado(form.cpf); if (existe) { setErrors((e) => ({ ...e, cpf: "CPF já cadastrado no sistema" })); return; } }

16
susconecta/components/ui/three-dwall-calendar.tsx
View File

@ -25,6 +25,7 @@ interface ThreeDWallCalendarProps {
events: CalendarEvent[] events: CalendarEvent[]
onAddEvent?: (e: CalendarEvent) => void onAddEvent?: (e: CalendarEvent) => void
onRemoveEvent?: (id: string) => void onRemoveEvent?: (id: string) => void
onOpenAddPatientForm?: () => void
panelWidth?: number panelWidth?: number
panelHeight?: number panelHeight?: number
columns?: number columns?: number
@ -34,6 +35,7 @@ export function ThreeDWallCalendar({
events, events,
onAddEvent, onAddEvent,
onRemoveEvent, onRemoveEvent,
onOpenAddPatientForm,
panelWidth = 160, panelWidth = 160,
panelHeight = 120, panelHeight = 120,
columns = 7, columns = 7,
@ -448,9 +450,17 @@ export function ThreeDWallCalendar({
{/* Add event form */} {/* Add event form */}
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Input placeholder="Nome do paciente" value={title} onChange={(e) => setTitle(e.target.value)} /> {onOpenAddPatientForm ? (
<Input type="date" value={newDate} onChange={(e) => setNewDate(e.target.value)} /> <Button onClick={onOpenAddPatientForm} className="w-full">
<Button onClick={handleAdd}>Adicionar Paciente</Button> Adicionar Paciente
</Button>
) : (
<>
<Input placeholder="Nome do paciente" value={title} onChange={(e) => setTitle(e.target.value)} />
<Input type="date" value={newDate} onChange={(e) => setNewDate(e.target.value)} />
<Button onClick={handleAdd}>Adicionar Paciente</Button>
</>
)}
</div> </div>
</div> </div>
) )

41
susconecta/lib/api.ts
View File

@ -1554,6 +1554,15 @@ export async function criarPaciente(input: PacienteInput): Promise<Paciente> {
]; ];
let lastErr: any = null; let lastErr: any = null;
// Debug: verificar token antes de tentar
const debugToken = getAuthToken();
if (!debugToken) {
console.warn('[criarPaciente] ⚠️ AVISO: Nenhum token de autenticação encontrado no localStorage/sessionStorage! Tentando mesmo assim, mas possível causa do erro.');
} else {
console.debug('[criarPaciente] ✓ Token encontrado, comprimento:', debugToken.length);
}
for (const u of fnUrls) { for (const u of fnUrls) {
try { try {
const headers = { ...baseHeaders(), 'Content-Type': 'application/json' } as Record<string,string>; const headers = { ...baseHeaders(), 'Content-Type': 'application/json' } as Record<string,string>;
@ -1562,7 +1571,7 @@ export async function criarPaciente(input: PacienteInput): Promise<Paciente> {
const a = maskedHeaders.Authorization as string; const a = maskedHeaders.Authorization as string;
maskedHeaders.Authorization = `${a.slice(0,6)}...${a.slice(-6)}`; maskedHeaders.Authorization = `${a.slice(0,6)}...${a.slice(-6)}`;
} }
// Log removido por segurança console.debug('[criarPaciente] Tentando criar paciente em:', u.replace(/^https:\/\/[^\/]+/, 'https://[...host...]'));
const res = await fetch(u, { const res = await fetch(u, {
method: 'POST', method: 'POST',
headers, headers,
@ -1601,17 +1610,37 @@ export async function criarPaciente(input: PacienteInput): Promise<Paciente> {
} catch (err: any) { } catch (err: any) {
lastErr = err; lastErr = err;
const emsg = err && typeof err === 'object' && 'message' in err ? (err as any).message : String(err); const emsg = err && typeof err === 'object' && 'message' in err ? (err as any).message : String(err);
console.warn('[criarPaciente] tentativa em', u, 'falhou:', emsg); console.warn('[criarPaciente] ❌ Tentativa em', u, 'falhou:', emsg);
// If the underlying error is a network/CORS issue, add a helpful hint in the log
if (emsg && emsg.toLowerCase().includes('failed to fetch')) { // Se o erro é uma falha de fetch (network/CORS)
console.error('[criarPaciente] Falha de fetch (network/CORS). Verifique se você está autenticado no navegador (token presente em localStorage/sessionStorage) e se o endpoint permite requisições CORS do seu domínio. Também confirme que a função /create-user-with-password existe e está acessível.'); if (emsg && (emsg.toLowerCase().includes('failed to fetch') || emsg.toLowerCase().includes('networkerror'))) {
console.error('[criarPaciente] ⚠️ FALHA DE REDE/CORS detectada. Possíveis causas:\n' +
'1. Função Supabase /create-user-with-password não existe ou está desativada\n' +
'2. CORS configurado incorretamente no Supabase\n' +
'3. Endpoint indisponível ou a rede está offline\n' +
'4. Token expirado ou inválido\n' +
'URL que falhou:', u);
} }
// try next // try next
} }
} }
const emsg = lastErr && typeof lastErr === 'object' && 'message' in lastErr ? (lastErr as any).message : String(lastErr ?? 'sem detalhes'); const emsg = lastErr && typeof lastErr === 'object' && 'message' in lastErr ? (lastErr as any).message : String(lastErr ?? 'sem detalhes');
throw new Error(`Falha ao criar paciente via create-user-with-password: ${emsg}. Verifique autenticação (token no localStorage/sessionStorage), CORS e se o endpoint /functions/v1/create-user-with-password está implementado e aceitando requisições do navegador.`);
// Mensagem de erro mais detalhada e útil
let friendlyMsg = `Falha ao criar paciente.`;
if (emsg.toLowerCase().includes('networkerror') || emsg.toLowerCase().includes('failed to fetch')) {
friendlyMsg += ` Erro de rede/CORS detectado. `;
friendlyMsg += `Verifique se:\n`;
friendlyMsg += `• A função /create-user-with-password existe no Supabase\n`;
friendlyMsg += `• Você está autenticado (token no localStorage)\n`;
friendlyMsg += `• CORS está configurado corretamente\n`;
friendlyMsg += `• A rede está disponível`;
} else {
friendlyMsg += ` ${emsg}`;
}
throw new Error(friendlyMsg);
} }
export async function atualizarPaciente(id: string | number, input: PacienteInput): Promise<Paciente> { export async function atualizarPaciente(id: string | number, input: PacienteInput): Promise<Paciente> {