Merge pull request 'fix-reponse' (#71) from backup/reports into develop
Reviewed-on: #71
This commit is contained in:
commit
82c5f61f2a
@ -351,22 +351,22 @@ export default function LaudoPage() {
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex justify-center py-12 px-4 print:py-0 print:px-0 min-h-[calc(100vh-80px)] print:min-h-screen">
|
||||
<div className="flex justify-center py-6 sm:py-8 md:py-12 px-2 sm:px-4 print:py-0 print:px-0 min-h-[calc(100vh-80px)] print:min-h-screen">
|
||||
{/* Document Container */}
|
||||
<div className={`w-full max-w-4xl transition-colors duration-300 shadow-2xl rounded-xl overflow-hidden print:shadow-none print:rounded-none print:max-w-full ${
|
||||
<div className={`w-full max-w-2xl sm:max-w-3xl md:max-w-4xl transition-colors duration-300 shadow-lg sm:shadow-xl rounded-lg sm:rounded-xl overflow-hidden print:shadow-none print:rounded-none print:max-w-full ${
|
||||
isDark ? 'bg-slate-800' : 'bg-white'
|
||||
}`}>
|
||||
{/* Document Content */}
|
||||
<div className="p-16 space-y-8 print:p-12 print:space-y-6">
|
||||
<div className="p-4 sm:p-8 md:p-12 lg:p-16 space-y-4 sm:space-y-6 md:space-y-8 print:p-12 print:space-y-6">
|
||||
|
||||
{/* Title */}
|
||||
<div className={`text-center mb-12 pb-8 border-b-2 ${
|
||||
<div className={`text-center mb-6 sm:mb-8 md:mb-12 pb-4 sm:pb-6 md:pb-8 border-b-2 ${
|
||||
isDark ? 'border-blue-900' : 'border-blue-200'
|
||||
}`}>
|
||||
<h1 className={`text-4xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
<h1 className={`text-2xl sm:text-3xl md:text-4xl font-bold mb-2 sm:mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
RELATÓRIO MÉDICO
|
||||
</h1>
|
||||
<div className={`text-sm space-y-1 ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
<div className={`text-xs sm:text-sm space-y-0.5 sm:space-y-1 ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
<p className="font-medium">
|
||||
<span className={isDark ? 'text-slate-400' : 'text-slate-500'}>Data:</span> {reportDate}
|
||||
</p>
|
||||
@ -380,28 +380,28 @@ export default function LaudoPage() {
|
||||
</div>
|
||||
|
||||
{/* Patient/Header Info */}
|
||||
<div className={`rounded-lg p-6 border transition-colors duration-300 ${
|
||||
<div className={`rounded-lg p-3 sm:p-4 md:p-6 border transition-colors duration-300 ${
|
||||
isDark
|
||||
? 'bg-slate-900 border-slate-700'
|
||||
: 'bg-slate-50 border-slate-200'
|
||||
}`}>
|
||||
<div className="grid grid-cols-2 gap-6 text-sm">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-6 text-xs sm:text-sm">
|
||||
{cid && (
|
||||
<div>
|
||||
<label className={`text-xs uppercase font-semibold tracking-wide block mb-2 ${
|
||||
<label className={`text-xs uppercase font-semibold tracking-wide block mb-1.5 sm:mb-2 ${
|
||||
isDark ? 'text-slate-400' : 'text-slate-600'
|
||||
}`}>CID</label>
|
||||
<p className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
<p className={`text-base sm:text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
{cid}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{exam && (
|
||||
<div>
|
||||
<label className={`text-xs uppercase font-semibold tracking-wide block mb-2 ${
|
||||
<label className={`text-xs uppercase font-semibold tracking-wide block mb-1.5 sm:mb-2 ${
|
||||
isDark ? 'text-slate-400' : 'text-slate-600'
|
||||
}`}>Exame / Tipo</label>
|
||||
<p className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
<p className={`text-base sm:text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
{exam}
|
||||
</p>
|
||||
</div>
|
||||
@ -411,11 +411,11 @@ export default function LaudoPage() {
|
||||
|
||||
{/* Diagnosis Section */}
|
||||
{diagnosis && (
|
||||
<div className="space-y-3">
|
||||
<h2 className={`text-xl font-bold uppercase tracking-wide ${
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
<h2 className={`text-lg sm:text-xl font-bold uppercase tracking-wide ${
|
||||
isDark ? 'text-blue-400' : 'text-blue-700'
|
||||
}`}>Diagnóstico</h2>
|
||||
<div className={`whitespace-pre-wrap text-base leading-relaxed rounded-lg p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
<div className={`whitespace-pre-wrap text-sm sm:text-base leading-relaxed rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
isDark
|
||||
? 'bg-slate-900 text-slate-200'
|
||||
: 'bg-blue-50 text-slate-800'
|
||||
@ -427,11 +427,11 @@ export default function LaudoPage() {
|
||||
|
||||
{/* Conclusion Section */}
|
||||
{conclusion && (
|
||||
<div className="space-y-3">
|
||||
<h2 className={`text-xl font-bold uppercase tracking-wide ${
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
<h2 className={`text-lg sm:text-xl font-bold uppercase tracking-wide ${
|
||||
isDark ? 'text-blue-400' : 'text-blue-700'
|
||||
}`}>Conclusão</h2>
|
||||
<div className={`whitespace-pre-wrap text-base leading-relaxed rounded-lg p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
<div className={`whitespace-pre-wrap text-sm sm:text-base leading-relaxed rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
isDark
|
||||
? 'bg-slate-900 text-slate-200'
|
||||
: 'bg-blue-50 text-slate-800'
|
||||
@ -443,13 +443,13 @@ export default function LaudoPage() {
|
||||
|
||||
{/* Notes/Content Section */}
|
||||
{(notesHtml || notesText) && (
|
||||
<div className="space-y-3">
|
||||
<h2 className={`text-xl font-bold uppercase tracking-wide ${
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
<h2 className={`text-lg sm:text-xl font-bold uppercase tracking-wide ${
|
||||
isDark ? 'text-blue-400' : 'text-blue-700'
|
||||
}`}>Notas do Profissional</h2>
|
||||
{notesHtml ? (
|
||||
<div
|
||||
className={`prose prose-sm max-w-none rounded-lg p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
className={`prose prose-sm max-w-none rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 text-xs sm:text-sm ${
|
||||
isDark
|
||||
? 'prose-invert bg-slate-900 text-slate-200'
|
||||
: 'bg-blue-50 text-slate-800'
|
||||
@ -457,7 +457,7 @@ export default function LaudoPage() {
|
||||
dangerouslySetInnerHTML={{ __html: String(notesHtml) }}
|
||||
/>
|
||||
) : (
|
||||
<div className={`whitespace-pre-wrap text-base leading-relaxed rounded-lg p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
<div className={`whitespace-pre-wrap text-sm sm:text-base leading-relaxed rounded-lg p-3 sm:p-4 border-l-4 border-blue-500 transition-colors duration-300 ${
|
||||
isDark
|
||||
? 'bg-slate-900 text-slate-200'
|
||||
: 'bg-blue-50 text-slate-800'
|
||||
@ -470,9 +470,9 @@ export default function LaudoPage() {
|
||||
|
||||
{/* Signature Section */}
|
||||
{report.doctor_signature && (
|
||||
<div className={`pt-8 border-t-2 ${isDark ? 'border-slate-600' : 'border-slate-300'}`}>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className={`rounded-lg p-4 border transition-colors duration-300 ${
|
||||
<div className={`pt-6 sm:pt-8 border-t-2 ${isDark ? 'border-slate-600' : 'border-slate-300'}`}>
|
||||
<div className="flex flex-col items-center gap-3 sm:gap-4">
|
||||
<div className={`rounded-lg p-2 sm:p-4 border transition-colors duration-300 ${
|
||||
isDark
|
||||
? 'bg-slate-900 border-slate-600'
|
||||
: 'bg-slate-100 border-slate-300'
|
||||
@ -482,16 +482,16 @@ export default function LaudoPage() {
|
||||
alt="Assinatura do profissional"
|
||||
width={150}
|
||||
height={100}
|
||||
className="h-20 w-auto"
|
||||
className="h-16 sm:h-20 w-auto"
|
||||
/>
|
||||
</div>
|
||||
{doctorName && (
|
||||
<div className="text-center">
|
||||
<p className={`text-sm font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
<p className={`text-xs sm:text-sm font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||||
{doctorName}
|
||||
</p>
|
||||
{doctor?.crm && (
|
||||
<p className={`text-xs mt-1 ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
|
||||
<p className={`text-xs mt-0.5 sm:mt-1 ${isDark ? 'text-slate-400' : 'text-slate-600'}`}>
|
||||
CRM: {doctor.crm}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -741,28 +741,28 @@ export default function PacientePage() {
|
||||
</header>
|
||||
|
||||
{/* Date Navigation */}
|
||||
<div className="flex flex-col gap-3 sm:gap-4 rounded-2xl border border-primary/20 bg-linear-to-r from-primary/5 to-primary/10 p-3 sm:p-4 md:p-6 sm:flex-row sm:items-center sm:justify-between shadow-sm">
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<div className="flex flex-col gap-2 sm:gap-3 rounded-2xl border border-primary/20 bg-linear-to-r from-primary/5 to-primary/10 p-3 sm:p-4 md:p-6 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e: any) => { e.stopPropagation(); e.preventDefault(); navigateDate('prev') }}
|
||||
aria-label="Dia anterior"
|
||||
className={`group shadow-sm hover:bg-primary! hover:text-white! hover:border-primary! transition-all ${hoverPrimaryIconClass}`}
|
||||
className={`shadow-sm hover:bg-primary! hover:text-white! hover:border-primary! transition-all p-1.5 sm:p-2`}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 sm:h-5 sm:w-5 transition group-hover:text-white" />
|
||||
<ChevronLeft className="h-4 w-4 sm:h-4 sm:w-4" />
|
||||
</Button>
|
||||
<span className="text-sm sm:text-base md:text-lg font-semibold text-foreground min-w-fit">{formatDatePt(currentDate)}</span>
|
||||
<span className="text-xs sm:text-sm md:text-base font-semibold text-foreground flex-1 sm:flex-none line-clamp-1">{formatDatePt(currentDate)}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e: any) => { e.stopPropagation(); e.preventDefault(); navigateDate('next') }}
|
||||
aria-label="Próximo dia"
|
||||
className={`group shadow-sm hover:bg-primary! hover:text-white! hover:border-primary! transition-all ${hoverPrimaryIconClass}`}
|
||||
className={`shadow-sm hover:bg-primary! hover:text-white! hover:border-primary! transition-all p-1.5 sm:p-2`}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4 sm:h-5 sm:w-5 transition group-hover:text-white" />
|
||||
<ChevronRight className="h-4 w-4 sm:h-4 sm:w-4" />
|
||||
</Button>
|
||||
{isSelectedDateToday && (
|
||||
<Button
|
||||
@ -771,14 +771,13 @@ export default function PacientePage() {
|
||||
size="sm"
|
||||
onClick={goToToday}
|
||||
disabled
|
||||
className="border border-border/50 text-foreground focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-[0.97] hover:bg-primary/5 hover:text-foreground transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-foreground text-xs sm:text-sm"
|
||||
className="border border-border/50 text-foreground focus-visible:ring-2 focus-visible:ring-primary/40 active:scale-[0.97] hover:bg-primary/5 hover:text-foreground transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-foreground text-xs px-2 py-1 h-auto"
|
||||
>
|
||||
Hoje
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm font-medium text-muted-foreground bg-background/50 px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg">
|
||||
|
||||
<div className="text-xs sm:text-sm font-medium text-muted-foreground bg-background/50 px-3 py-1.5 rounded-lg w-fit">
|
||||
<span className="text-primary font-semibold">{_todaysAppointments.length}</span> consulta{_todaysAppointments.length !== 1 ? 's' : ''} agendada{_todaysAppointments.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
@ -1781,40 +1780,45 @@ export default function PacientePage() {
|
||||
<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 */}
|
||||
<aside className="sticky top-24 h-fit md:top-24">
|
||||
<nav aria-label="Navegação do dashboard" className="bg-card shadow-md rounded-lg border border-border p-2 sm:p-3 md:p-3 space-y-1 z-30 flex md:flex-col flex-row md:overflow-auto overflow-x-auto">
|
||||
<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">
|
||||
<Button
|
||||
variant={tab==='dashboard'?'default':'ghost'}
|
||||
aria-current={tab==='dashboard'}
|
||||
onClick={()=>setTab('dashboard')}
|
||||
className={`flex-1 md:flex-none md:w-full flex items-center justify-center md:justify-start gap-1 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs sm:text-sm`}
|
||||
className={`flex flex-col md:flex-row items-center justify-center md:justify-start gap-0.5 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs px-1.5 sm:px-3 py-1.5 sm:py-2 h-auto`}
|
||||
title="Dashboard"
|
||||
>
|
||||
<Calendar className="h-3 w-3 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span>{strings.dashboard}</span>
|
||||
<Calendar className="h-4 w-4 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span className="text-xs sm:text-sm">{strings.dashboard}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={tab==='consultas'?'default':'ghost'}
|
||||
aria-current={tab==='consultas'}
|
||||
onClick={()=>setTab('consultas')}
|
||||
className={`flex-1 md:flex-none md:w-full flex items-center justify-center md:justify-start gap-1 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs sm:text-sm`}
|
||||
className={`flex flex-col md:flex-row items-center justify-center md:justify-start gap-0.5 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs px-1.5 sm:px-3 py-1.5 sm:py-2 h-auto`}
|
||||
title="Consultas"
|
||||
>
|
||||
<Calendar className="h-3 w-3 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span>{strings.consultas}</span>
|
||||
<Calendar className="h-4 w-4 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span className="text-xs sm:text-sm">{strings.consultas}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={tab==='exames'?'default':'ghost'}
|
||||
aria-current={tab==='exames'}
|
||||
onClick={()=>setTab('exames')}
|
||||
className={`flex-1 md:flex-none md:w-full flex items-center justify-center md:justify-start gap-1 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs sm:text-sm`}
|
||||
className={`flex flex-col md:flex-row items-center justify-center md:justify-start gap-0.5 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs px-1.5 sm:px-3 py-1.5 sm:py-2 h-auto`}
|
||||
title="Exames"
|
||||
>
|
||||
<FileText className="h-3 w-3 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span>{strings.exames}</span>
|
||||
<FileText className="h-4 w-4 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span className="text-xs sm:text-sm">{strings.exames}</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={tab==='perfil'?'default':'ghost'}
|
||||
aria-current={tab==='perfil'}
|
||||
onClick={()=>setTab('perfil')}
|
||||
className={`flex-1 md:flex-none md:w-full flex items-center justify-center md:justify-start gap-1 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs sm:text-sm`}
|
||||
className={`flex flex-col md:flex-row items-center justify-center md:justify-start gap-0.5 md:gap-2 transition-colors hover:bg-primary! hover:text-white! cursor-pointer text-xs px-1.5 sm:px-3 py-1.5 sm:py-2 h-auto`}
|
||||
title="Perfil"
|
||||
>
|
||||
<UserCog className="h-3 w-3 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span>{strings.perfil}</span>
|
||||
<UserCog className="h-4 w-4 sm:h-4 sm:w-4 md:h-4 md:w-4 flex-shrink-0" /><span className="text-xs sm:text-sm">{strings.perfil}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
||||
@ -786,45 +786,45 @@ const ProfissionalPage = () => {
|
||||
const todayEvents = getTodayEvents();
|
||||
|
||||
return (
|
||||
<section className="bg-card shadow-md rounded-lg border border-border p-6 overflow-x-hidden">{/* adicionada overflow-x-hidden */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl sm:text-2xl font-bold">Agenda do Dia</h2>
|
||||
<section className="bg-card shadow-md rounded-lg border border-border p-3 sm:p-4 md:p-6 overflow-x-hidden">
|
||||
<div className="flex justify-between items-center mb-3 sm:mb-4">
|
||||
<h2 className="text-lg sm:text-xl md:text-2xl font-bold">Agenda do Dia</h2>
|
||||
</div>
|
||||
|
||||
{/* Navegação de Data - Responsiva */}
|
||||
<div className="flex items-center justify-between mb-6 p-3 sm:p-4 bg-blue-50 rounded-lg dark:bg-muted flex-wrap gap-2 sm:gap-4">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-blue-50 rounded-lg dark:bg-muted">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-4 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigateDate('prev')}
|
||||
className="p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors"
|
||||
className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<h3 className="text-base sm:text-lg font-medium text-foreground whitespace-nowrap line-clamp-2">
|
||||
<h3 className="text-sm sm:text-base md:text-lg font-medium text-foreground flex-1 line-clamp-1">
|
||||
{formatDate(currentCalendarDate)}
|
||||
</h3>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigateDate('next')}
|
||||
className="p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors"
|
||||
className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-gray-600 dark:text-muted-foreground whitespace-nowrap">
|
||||
{todayEvents.length} consulta{todayEvents.length !== 1 ? 's' : ''}
|
||||
<div className="text-xs sm:text-sm text-gray-600 dark:text-muted-foreground">
|
||||
<span className="font-semibold">{todayEvents.length}</span> consulta{todayEvents.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista de Pacientes do Dia */}
|
||||
<div className="space-y-4 max-h-[calc(100vh-450px)] overflow-y-auto overflow-x-hidden pr-2">{/* adicionada overflow-x-hidden */}
|
||||
<div className="space-y-2 sm:space-y-3 max-h-[calc(100vh-450px)] overflow-y-auto overflow-x-hidden pr-2">
|
||||
{todayEvents.length === 0 ? (
|
||||
<div className="text-center py-6 sm:py-8 text-gray-600 dark:text-muted-foreground">
|
||||
<CalendarIcon className="h-10 sm:h-12 w-10 sm:w-12 mx-auto mb-3 sm:mb-4 text-gray-400 dark:text-muted-foreground/50" />
|
||||
<p className="text-base sm:text-lg mb-2">Nenhuma consulta agendada para este dia</p>
|
||||
<CalendarIcon className="h-8 sm:h-10 md:h-12 w-8 sm:w-10 md:w-12 mx-auto mb-2 sm:mb-3 text-gray-400 dark:text-muted-foreground/50" />
|
||||
<p className="text-sm sm:text-base font-medium mb-1">Nenhuma consulta agendada para este dia</p>
|
||||
<p className="text-xs sm:text-sm">Agenda livre para este dia</p>
|
||||
</div>
|
||||
) : (
|
||||
@ -833,42 +833,42 @@ const ProfissionalPage = () => {
|
||||
return (
|
||||
<div
|
||||
key={appointment.id}
|
||||
className="border-l-4 border-t border-r border-b p-3 sm:p-4 rounded-lg shadow-sm bg-card border-border"
|
||||
className="border-l-4 border-t border-r border-b p-2.5 sm:p-3 md:p-4 rounded-lg shadow-sm bg-card border-border hover:shadow-md transition-shadow"
|
||||
style={{ borderLeftColor: getStatusColor(appointment.type) }}
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-col sm:grid sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-3 md:gap-4 items-start sm:items-center">
|
||||
<div className="flex items-start sm:items-center gap-2 min-w-0">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
className="w-2.5 h-2.5 rounded-full flex-shrink-0 mt-1 sm:mt-0"
|
||||
style={{ backgroundColor: getStatusColor(appointment.type) }}
|
||||
></div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium text-sm sm:text-base flex items-center gap-2">
|
||||
<User className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500 dark:text-muted-foreground flex-shrink-0" />
|
||||
<div className="font-medium text-xs sm:text-sm md:text-base flex items-center gap-1.5 flex-wrap">
|
||||
<User className="h-3 w-3 sm:h-3.5 sm:w-3.5 text-gray-500 dark:text-muted-foreground flex-shrink-0" />
|
||||
<span className="truncate">{appointment.title}</span>
|
||||
</div>
|
||||
{paciente && (
|
||||
<div className="text-xs text-gray-600 dark:text-muted-foreground truncate">
|
||||
<div className="text-xs text-gray-600 dark:text-muted-foreground truncate mt-0.5">
|
||||
CPF: {getPatientCpf(paciente)} • {getPatientAge(paciente)} anos
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500 dark:text-muted-foreground flex-shrink-0" />
|
||||
<span className="font-medium text-sm sm:text-base">{appointment.time}</span>
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm md:text-base">
|
||||
<Clock className="h-3 w-3 sm:h-3.5 sm:w-3.5 text-gray-500 dark:text-muted-foreground flex-shrink-0" />
|
||||
<span className="font-medium">{appointment.time}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className="px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm font-medium text-white whitespace-nowrap"
|
||||
className="px-2 sm:px-2.5 md:px-3 py-1 rounded-full text-xs font-medium text-white whitespace-nowrap"
|
||||
style={{ backgroundColor: getStatusColor(appointment.type) }}
|
||||
>
|
||||
{appointment.type}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<div className="hidden md:flex items-center justify-end">
|
||||
<div className="relative group">
|
||||
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
|
||||
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50">
|
||||
Ver informações do paciente
|
||||
<div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
|
||||
</div>
|
||||
@ -2051,43 +2051,43 @@ const ProfissionalPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
|
||||
<div className="bg-background rounded-none md:rounded-lg shadow-xl w-full h-full md:h-auto md:max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-2 sm:p-4">
|
||||
<div className="bg-background rounded-none md:rounded-lg shadow-xl w-full h-full md:h-auto md:max-w-6xl max-h-[95vh] overflow-hidden flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="border-b border-border">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center justify-between p-2 sm:p-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-foreground">
|
||||
<h2 className="text-base sm:text-xl font-bold text-foreground">
|
||||
{isNewLaudo ? "Novo Laudo Médico" : "Editar Laudo Existente"}
|
||||
</h2>
|
||||
{isNewLaudo ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
Crie um novo laudo selecionando um paciente
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="text-xs sm:text-sm text-muted-foreground">
|
||||
Paciente: {getPatientName(pacienteSelecionado) || getPatientName(laudo?.paciente) || getPatientName(laudo) || '-'} | CPF: {getReportPatientCpf(laudo) ?? laudo?.patient_cpf ?? '-'} | {laudo?.especialidade}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={onClose}>
|
||||
<Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 p-0 flex-shrink-0">
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Seleção de Paciente (apenas para novos laudos) */}
|
||||
{isNewLaudo && (
|
||||
<div className="px-4 pb-4">
|
||||
<div className="px-2 sm:px-4 pb-2 sm:pb-4">
|
||||
{!pacienteSelecionado ? (
|
||||
<div className="bg-muted border border-border rounded-lg p-4">
|
||||
<Label htmlFor="select-paciente" className="text-sm font-medium mb-2 block">
|
||||
<div className="bg-muted border border-border rounded-lg p-2 sm:p-4">
|
||||
<Label htmlFor="select-paciente" className="text-xs sm:text-sm font-medium mb-2 block">
|
||||
Selecionar Paciente *
|
||||
</Label>
|
||||
<Select onValueChange={(value) => {
|
||||
const paciente = listaPacientes.find(p => p.id === value);
|
||||
if (paciente) setPacienteSelecionado(paciente);
|
||||
}}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectTrigger className="w-full text-xs sm:text-sm">
|
||||
<SelectValue placeholder="Escolha um paciente para criar o laudo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -2100,9 +2100,9 @@ const ProfissionalPage = () => {
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-primary/10 border border-primary/20 rounded-lg p-3 flex items-center justify-between">
|
||||
<div className="bg-primary/10 border border-primary/20 rounded-lg p-2 sm:p-3 flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div className="font-semibold text-primary">{getPatientName(pacienteSelecionado)}</div>
|
||||
<div className="font-semibold text-primary text-sm sm:text-base">{getPatientName(pacienteSelecionado)}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{getPatientCpf(pacienteSelecionado) ? `CPF: ${getPatientCpf(pacienteSelecionado)} | ` : ''}
|
||||
{pacienteSelecionado?.birth_date ? `Nascimento: ${pacienteSelecionado.birth_date}` : (getPatientAge(pacienteSelecionado) ? `Idade: ${getPatientAge(pacienteSelecionado)} anos` : '')}
|
||||
@ -2114,25 +2114,26 @@ const ProfissionalPage = () => {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPacienteSelecionado(null)}
|
||||
className="text-xs flex-shrink-0"
|
||||
>
|
||||
Trocar Paciente
|
||||
Trocar
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Novos campos: Solicitante e Prazo */}
|
||||
<div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="mt-2 sm:mt-3 grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3">
|
||||
<div>
|
||||
<Label htmlFor="solicitante">Solicitante</Label>
|
||||
<Label htmlFor="solicitante" className="text-xs sm:text-sm">Solicitante</Label>
|
||||
{/* Mostrar o nome do usuário logado de forma estática (não editável) */}
|
||||
<Input id="solicitante" value={displaySolicitante} readOnly disabled />
|
||||
<Input id="solicitante" value={displaySolicitante} readOnly disabled className="text-xs sm:text-sm h-8 sm:h-10" />
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="prazoDate">Prazo do Laudo</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input id="prazoDate" type="date" value={prazoDate} onChange={(e) => setPrazoDate(e.target.value)} />
|
||||
<Input id="prazoTime" type="time" value={prazoTime} onChange={(e) => setPrazoTime(e.target.value)} />
|
||||
<Label htmlFor="prazoDate" className="text-xs sm:text-sm">Prazo do Laudo</Label>
|
||||
<div className="flex gap-1 sm:gap-2">
|
||||
<Input id="prazoDate" type="date" value={prazoDate} onChange={(e) => setPrazoDate(e.target.value)} className="text-xs sm:text-sm h-8 sm:h-10" />
|
||||
<Input id="prazoTime" type="time" value={prazoTime} onChange={(e) => setPrazoTime(e.target.value)} className="text-xs sm:text-sm h-8 sm:h-10" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">Defina a data e hora do prazo (opcional).</p>
|
||||
</div>
|
||||
@ -2142,11 +2143,11 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-border">
|
||||
<div className="flex border-b border-border overflow-x-auto">
|
||||
{/* Informações tab removed - only Editor/Imagens/Campos/Pré-visualização remain */}
|
||||
<button
|
||||
onClick={() => setActiveTab("editor")}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
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 === "editor"
|
||||
? "border-blue-500 text-blue-600"
|
||||
: "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
|
||||
@ -2172,7 +2173,7 @@ const ProfissionalPage = () => {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("imagens")}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
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"
|
||||
@ -2198,7 +2199,7 @@ const ProfissionalPage = () => {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("campos")}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
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 === "campos"
|
||||
? "border-blue-500 text-blue-600"
|
||||
: "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
|
||||
@ -2224,7 +2225,7 @@ const ProfissionalPage = () => {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPreview(!showPreview)}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
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 ${
|
||||
showPreview
|
||||
? "border-green-500 text-green-600"
|
||||
: "border-transparent text-gray-600 dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-blue-900"
|
||||
@ -2259,26 +2260,26 @@ const ProfissionalPage = () => {
|
||||
{activeTab === "editor" && (
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Toolbar */}
|
||||
<div className="p-3 border-b border-border">
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<div className="p-1.5 sm:p-3 border-b border-border overflow-x-auto">
|
||||
<div className="flex flex-wrap gap-1 sm:gap-2 items-center">
|
||||
{/* Tamanho da fonte */}
|
||||
<label className="text-xs mr-1">Tamanho</label>
|
||||
<label className="text-xs mr-0.5 sm:mr-1 whitespace-nowrap">Tamanho</label>
|
||||
<input
|
||||
type="number"
|
||||
min={8}
|
||||
max={32}
|
||||
defaultValue={14}
|
||||
onBlur={e => formatText('font-size', e.target.value)}
|
||||
className="w-14 border rounded px-1 py-0.5 text-xs mr-2"
|
||||
className="w-12 border rounded px-1 py-0.5 text-xs mr-1 sm:mr-2"
|
||||
title="Tamanho da fonte"
|
||||
/>
|
||||
{/* Família da fonte */}
|
||||
<label className="text-xs mr-1">Fonte</label>
|
||||
<label className="text-xs mr-0.5 sm:mr-1 whitespace-nowrap">Fonte</label>
|
||||
<select
|
||||
defaultValue={'Arial'}
|
||||
onBlur={e => formatText('font-family', e.target.value)}
|
||||
className="border rounded px-1 py-0.5 text-xs mr-2 bg-white text-gray-900 dark:bg-gray-800 dark:text-white"
|
||||
style={{ minWidth: 140, fontWeight: 500 }}
|
||||
className="border rounded px-1 py-0.5 text-xs mr-1 sm:mr-2 bg-white text-gray-900 dark:bg-gray-800 dark:text-white"
|
||||
style={{ minWidth: 100, fontWeight: 500 }}
|
||||
title="Família da fonte"
|
||||
>
|
||||
<option value="Arial" style={{ color: '#222', background: '#fff', fontWeight: 600 }}>Arial</option>
|
||||
@ -2327,52 +2328,51 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Editor */}
|
||||
<div className="flex-1 p-4 overflow-auto max-h-[500px]">
|
||||
<div className="flex-1 p-2 sm:p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-blue-100 dark:scrollbar-thumb-blue-400 dark:scrollbar-track-blue-950 max-h-[calc(100vh-500px)] sm:max-h-[calc(100vh-400px)]">
|
||||
<Textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="Digite o conteúdo do laudo aqui. Use ** para negrito, * para itálico, <u></u> para sublinhado."
|
||||
className="h-full min-h-[400px] resize-none scrollbar-thin scrollbar-thumb-blue-400 scrollbar-track-blue-100"
|
||||
style={{ maxHeight: 400, overflow: 'auto' }}
|
||||
className="w-full min-h-[200px] sm:min-h-[300px] resize-none text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "imagens" && (
|
||||
<div className="flex-1 p-4">
|
||||
<div className="mb-4">
|
||||
<Label htmlFor="upload-images">Upload de Imagens</Label>
|
||||
<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"
|
||||
className="mt-1 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<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-2">
|
||||
<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-32 object-cover rounded"
|
||||
className="w-full h-24 sm:h-32 object-cover rounded"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-32 bg-muted rounded flex items-center justify-center">
|
||||
<FileText className="w-8 h-8 text-muted-foreground" />
|
||||
<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"
|
||||
className="w-full mt-1 text-xs"
|
||||
onClick={() => setImagens(prev => prev.filter(i => i.id !== img.id))}
|
||||
>
|
||||
Remover
|
||||
@ -2384,54 +2384,59 @@ const ProfissionalPage = () => {
|
||||
)}
|
||||
|
||||
{activeTab === "campos" && (
|
||||
<div className="flex-1 p-4 space-y-4 max-h-[500px] overflow-y-auto">
|
||||
<div className="flex-1 p-2 sm:p-4 space-y-2 sm:space-y-4 overflow-y-auto">
|
||||
<div>
|
||||
<Label htmlFor="cid">CID</Label>
|
||||
<Label htmlFor="cid" className="text-xs sm:text-sm">CID</Label>
|
||||
<Input
|
||||
id="cid"
|
||||
value={campos.cid}
|
||||
onChange={(e) => setCampos(prev => ({ ...prev, cid: e.target.value }))}
|
||||
placeholder="Ex: M25.5, I10, etc."
|
||||
className="text-xs sm:text-sm h-8 sm:h-10"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="exame">Exame</Label>
|
||||
<Label htmlFor="exame" className="text-xs sm:text-sm">Exame</Label>
|
||||
<Input
|
||||
id="exame"
|
||||
value={campos.exame}
|
||||
onChange={(e) => setCampos(prev => ({ ...prev, exame: e.target.value }))}
|
||||
placeholder="Exame realizado"
|
||||
className="text-xs sm:text-sm h-8 sm:h-10"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="diagnostico">Diagnóstico</Label>
|
||||
<Label htmlFor="diagnostico" className="text-xs sm:text-sm">Diagnóstico</Label>
|
||||
<Textarea
|
||||
id="diagnostico"
|
||||
value={campos.diagnostico}
|
||||
onChange={(e) => setCampos(prev => ({ ...prev, diagnostico: e.target.value }))}
|
||||
placeholder="Diagnóstico principal"
|
||||
rows={3}
|
||||
rows={2}
|
||||
className="text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="conclusao">Conclusão</Label>
|
||||
<Label htmlFor="conclusao" className="text-xs sm:text-sm">Conclusão</Label>
|
||||
<Textarea
|
||||
id="conclusao"
|
||||
value={campos.conclusao}
|
||||
onChange={(e) => setCampos(prev => ({ ...prev, conclusao: e.target.value }))}
|
||||
placeholder="Conclusão do laudo"
|
||||
rows={3}
|
||||
rows={2}
|
||||
className="text-xs sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1.5 sm:space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mostrar-data"
|
||||
checked={campos.mostrarData}
|
||||
onChange={(e) => setCampos(prev => ({ ...prev, mostrarData: e.target.checked }))}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Label htmlFor="mostrar-data">Mostrar data no laudo</Label>
|
||||
<Label htmlFor="mostrar-data" className="text-xs sm:text-sm">Mostrar data no laudo</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
@ -2439,8 +2444,9 @@ const ProfissionalPage = () => {
|
||||
id="mostrar-assinatura"
|
||||
checked={campos.mostrarAssinatura}
|
||||
onChange={(e) => setCampos(prev => ({ ...prev, mostrarAssinatura: e.target.checked }))}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<Label htmlFor="mostrar-assinatura">Mostrar assinatura no laudo</Label>
|
||||
<Label htmlFor="mostrar-assinatura" className="text-xs sm:text-sm">Mostrar assinatura no laudo</Label>
|
||||
</div>
|
||||
</div>
|
||||
{/* Assinatura Digital removida dos campos */}
|
||||
@ -2450,106 +2456,98 @@ const ProfissionalPage = () => {
|
||||
|
||||
{/* Preview Panel */}
|
||||
{showPreview && (
|
||||
<div className="w-1/2 border-l border-border bg-muted/20">
|
||||
<div className="p-4 border-b border-border">
|
||||
<h3 className="font-semibold text-foreground">Pré-visualização do Laudo</h3>
|
||||
<div className="hidden md:flex md:w-1/2 border-l border-border bg-muted/20 flex-col">
|
||||
<div className="p-2 md:p-2.5 border-b border-border flex-shrink-0">
|
||||
<h3 className="font-semibold text-xs md:text-sm text-foreground">Pré-visualização do Laudo</h3>
|
||||
</div>
|
||||
<div className="p-4 max-h-[600px] overflow-y-auto">
|
||||
<div className="bg-background border border-border rounded-lg p-6 shadow-sm">
|
||||
<div className="flex-1 overflow-y-auto p-1.5 md:p-2">
|
||||
<div className="bg-background border border-border rounded p-2 md:p-2.5 text-xs">
|
||||
{/* Header do Laudo */}
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-lg font-bold">
|
||||
<div className="text-center mb-2 pb-2 border-b border-border/40">
|
||||
<h2 className="text-sm font-bold leading-tight">
|
||||
LAUDO MÉDICO {campos.especialidade ? `- ${campos.especialidade.toUpperCase()}` : ''}
|
||||
</h2>
|
||||
{campos.exame && (
|
||||
<h3 className="text-md font-semibold mt-2">{campos.exame}</h3>
|
||||
)}
|
||||
{campos.cid && (
|
||||
<h3 className="text-md font-semibold mt-2">CID: {campos.cid}</h3>
|
||||
)}
|
||||
{campos.diagnostico && (
|
||||
<h3 className="text-md font-semibold mt-2">Diagnóstico: {campos.diagnostico}</h3>
|
||||
)}
|
||||
{campos.conclusao && (
|
||||
<h3 className="text-md font-semibold mt-2">Conclusão: {campos.conclusao}</h3>
|
||||
<p className="text-xs font-semibold mt-1">{campos.exame}</p>
|
||||
)}
|
||||
{campos.mostrarData && (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Data: {new Date().toLocaleDateString('pt-BR')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dados do Paciente */}
|
||||
{/* Dados do Paciente - Compacto */}
|
||||
{(isNewLaudo ? pacienteSelecionado : laudo?.paciente) && (
|
||||
<div className="mb-4 p-3 bg-muted rounded">
|
||||
<h3 className="font-semibold mb-2">Dados do Paciente:</h3>
|
||||
{isNewLaudo && pacienteSelecionado ? (
|
||||
<>
|
||||
<p><strong>Nome:</strong> {getPatientName(pacienteSelecionado)}</p>
|
||||
<p><strong>ID:</strong> {getPatientId(pacienteSelecionado)}</p>
|
||||
<p><strong>CPF:</strong> {getPatientCpf(pacienteSelecionado)}</p>
|
||||
<p><strong>Idade:</strong> {getPatientAge(pacienteSelecionado)} anos</p>
|
||||
<p><strong>Sexo:</strong> {getPatientSex(pacienteSelecionado)}</p>
|
||||
<p><strong>CID:</strong> {campos.cid || '---'}</p>
|
||||
<p><strong>Diagnóstico:</strong> {campos.diagnostico || '---'}</p>
|
||||
<p><strong>Conclusão:</strong> {campos.conclusao || '---'}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p><strong>Nome:</strong> {getPatientName(laudo?.paciente)}</p>
|
||||
<p><strong>ID:</strong> {getPatientId(laudo?.paciente)}</p>
|
||||
<p><strong>CPF:</strong> {getPatientCpf(laudo?.paciente)}</p>
|
||||
<p><strong>Idade:</strong> {getPatientAge(laudo?.paciente)} anos</p>
|
||||
<p><strong>Sexo:</strong> {getPatientSex(laudo?.paciente)}</p>
|
||||
<p><strong>CID:</strong> {campos.cid || laudo?.cid || '---'}</p>
|
||||
<p><strong>Diagnóstico:</strong> {campos.diagnostico || laudo?.diagnostico || '---'}</p>
|
||||
<p><strong>Conclusão:</strong> {campos.conclusao || laudo?.conclusao || '---'}</p>
|
||||
</>
|
||||
)}
|
||||
<div className="mb-2 pb-2 border-b border-border/40 space-y-0.5">
|
||||
<div><span className="font-semibold">Paciente:</span> {isNewLaudo ? getPatientName(pacienteSelecionado) : getPatientName(laudo?.paciente)}</div>
|
||||
<div><span className="font-semibold">CPF:</span> {isNewLaudo ? getPatientCpf(pacienteSelecionado) : getPatientCpf(laudo?.paciente)}</div>
|
||||
<div><span className="font-semibold">Idade:</span> {isNewLaudo ? getPatientAge(pacienteSelecionado) : getPatientAge(laudo?.paciente)} anos</div>
|
||||
<div><span className="font-semibold">Sexo:</span> {isNewLaudo ? getPatientSex(pacienteSelecionado) : getPatientSex(laudo?.paciente)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="mb-4">
|
||||
{/* Informações Clínicas */}
|
||||
<div className="mb-2 pb-2 border-b border-border/40 space-y-0.5">
|
||||
{campos.cid && (
|
||||
<div><span className="font-semibold">CID:</span> <span className="text-blue-600 dark:text-blue-400 font-semibold">{campos.cid}</span></div>
|
||||
)}
|
||||
{campos.diagnostico && (
|
||||
<div><span className="font-semibold">Diagnóstico:</span> {campos.diagnostico}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Conteúdo Principal */}
|
||||
{content && (
|
||||
<div className="mb-2 pb-2 border-b border-border/40">
|
||||
<div
|
||||
className="text-xs leading-normal [&_p]:my-0.5 [&_br]:mb-0.5 whitespace-pre-wrap"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: processContent(content)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Imagens */}
|
||||
{/* Conclusão */}
|
||||
{campos.conclusao && (
|
||||
<div className="mb-2 pb-2 border-b border-border/40">
|
||||
<div><span className="font-semibold">Conclusão:</span></div>
|
||||
<div className="text-xs leading-normal mt-0.5">{campos.conclusao}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Imagens Compactas */}
|
||||
{imagens.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<h3 className="font-semibold mb-2">Imagens:</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="mb-2 pb-2 border-b border-border/40">
|
||||
<div className="font-semibold mb-1">Imagens:</div>
|
||||
<div className="grid grid-cols-2 gap-1">
|
||||
{imagens.map((img) => (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
key={img.id}
|
||||
src={img.url}
|
||||
alt={img.name}
|
||||
className="w-full h-32 object-cover rounded border"
|
||||
className="w-full h-14 object-cover rounded border border-border/40"
|
||||
title={img.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Assinatura Digital em tempo real */}
|
||||
{/* Assinatura Digital - Compacta */}
|
||||
{campos.mostrarAssinatura && (
|
||||
<div className="mt-8 text-center">
|
||||
<div className="pt-1 mt-1 border-t border-border/40 text-center">
|
||||
{assinaturaImg && assinaturaImg.length > 30 ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={assinaturaImg} alt="Assinatura Digital" className="mx-auto h-16 object-contain mb-2" />
|
||||
<img src={assinaturaImg} alt="Assinatura Digital" className="mx-auto h-8 object-contain mb-0.5" />
|
||||
) : (
|
||||
<div className="h-16 mb-2 text-xs text-muted-foreground">Assine no campo ao lado para visualizar aqui.</div>
|
||||
<div className="text-xs text-muted-foreground italic">Assinatura pendente</div>
|
||||
)}
|
||||
<div className="border-b border-border mb-2"></div>
|
||||
<p className="text-sm">{((profileData as any)?.nome || (profileData as any)?.nome_social) || user?.name || 'Squad-20'}</p>
|
||||
<div className="border-t border-border/40 my-0.5"></div>
|
||||
<p className="text-xs font-semibold">{((profileData as any)?.nome || (profileData as any)?.nome_social) || user?.name || 'Squad-20'}</p>
|
||||
{(((profileData as any)?.crm) || ((user?.profile as any)?.crm)) ? (
|
||||
// Ensure we render a single 'CRM ' prefix followed by the raw number
|
||||
<p className="text-xs text-muted-foreground">CRM {(((profileData as any)?.crm) || (user?.profile as any)?.crm).toString().replace(/^(?:CRM\s*)+/i, '').trim()}</p>
|
||||
) : null}
|
||||
</div>
|
||||
@ -2561,13 +2559,13 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-border bg-muted/20">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
<div className="p-2 sm:p-4 border-t border-border bg-muted/20">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
|
||||
<div className="text-xs text-muted-foreground hidden sm:block">
|
||||
Este editor permite escrever relatórios de forma livre, com formatação de texto rica.
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={onClose} className="hover:bg-primary! hover:text-white! transition-colors">
|
||||
<div className="flex gap-2 w-full sm:w-auto">
|
||||
<Button variant="outline" onClick={onClose} className="flex-1 sm:flex-none hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm">
|
||||
Cancelar
|
||||
</Button>
|
||||
{/* botão 'Salvar Rascunho' removido por não ser utilizado */}
|
||||
@ -2676,6 +2674,7 @@ const ProfissionalPage = () => {
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="flex-1 sm:flex-none text-xs sm:text-sm"
|
||||
>
|
||||
{isNewLaudo ? "Liberar Laudo" : "Atualizar Laudo"}
|
||||
</Button>
|
||||
|
||||
10
susconecta/pnpm-lock.yaml
generated
10
susconecta/pnpm-lock.yaml
generated
@ -137,6 +137,9 @@ importers:
|
||||
geist:
|
||||
specifier: ^1.3.1
|
||||
version: 1.5.1(next@15.5.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
|
||||
html2canvas:
|
||||
specifier: ^1.4.1
|
||||
version: 1.4.1
|
||||
input-otp:
|
||||
specifier: latest
|
||||
version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@ -4860,8 +4863,7 @@ snapshots:
|
||||
|
||||
balanced-match@1.0.2: {}
|
||||
|
||||
base64-arraybuffer@1.0.2:
|
||||
optional: true
|
||||
base64-arraybuffer@1.0.2: {}
|
||||
|
||||
baseline-browser-mapping@2.8.4: {}
|
||||
|
||||
@ -4982,7 +4984,6 @@ snapshots:
|
||||
css-line-break@2.1.0:
|
||||
dependencies:
|
||||
utrie: 1.0.2
|
||||
optional: true
|
||||
|
||||
csstype@3.1.3: {}
|
||||
|
||||
@ -5634,7 +5635,6 @@ snapshots:
|
||||
dependencies:
|
||||
css-line-break: 2.1.0
|
||||
text-segmentation: 1.0.3
|
||||
optional: true
|
||||
|
||||
ignore@5.3.2: {}
|
||||
|
||||
@ -6582,7 +6582,6 @@ snapshots:
|
||||
text-segmentation@1.0.3:
|
||||
dependencies:
|
||||
utrie: 1.0.2
|
||||
optional: true
|
||||
|
||||
tiny-invariant@1.3.3: {}
|
||||
|
||||
@ -6729,7 +6728,6 @@ snapshots:
|
||||
utrie@1.0.2:
|
||||
dependencies:
|
||||
base64-arraybuffer: 1.0.2
|
||||
optional: true
|
||||
|
||||
uuid@13.0.0: {}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user