ruicesar/scoreodonto.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pacientes): alias dataNascimento in query; show full name; add CopyField component per data field

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
VPS 4 Builder
2026-05-14 07:11:58 +02:00
parent 162404f4e8
commit 51cbd07125
1 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/views/PatientsView.tsx
+41 -26
View File
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react';
import { Search, Plus, DollarSign, X, Printer, CreditCard, Rocket, Loader2, FolderOpen, CalendarDays, RadioTower, Pencil, Wallet, PlusCircle, Banknote, History, FileText, Calendar } from 'lucide-react';
import { Search, Plus, DollarSign, X, Printer, CreditCard, Rocket, Loader2, FolderOpen, CalendarDays, RadioTower, Pencil, Wallet, PlusCircle, Banknote, History, FileText, Calendar, Copy, CheckCircle2 } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { Paciente, Dentista, Agendamento } from '../types.ts';
import { useHybridBackend } from '../hooks/useHybridBackend.ts';
@@ -375,6 +375,30 @@ const EditarPacienteModal: React.FC<{ patient: Paciente; onClose: () => void; on
import { PageHeader } from '../components/PageHeader.tsx';
const CopyField: React.FC<{ label: string; value?: string | null }> = ({ label, value }) => {
const [copied, setCopied] = useState(false);
const copy = () => {
if (!value) return;
navigator.clipboard.writeText(value).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
});
};
return (
<div className="flex items-center justify-between bg-gray-50/70 border border-gray-200/50 rounded-lg px-2 py-1.5 gap-1 min-w-0">
<div className="min-w-0 flex-1">
<p className="text-gray-400 text-[9px] font-bold uppercase leading-none mb-0.5">{label}</p>
<p className="text-gray-800 font-semibold text-xs truncate leading-tight">{value || '—'}</p>
</div>
{value && (
<button onClick={copy} className="flex-shrink-0 text-gray-300 hover:text-blue-500 transition-colors ml-1" title={`Copiar ${label}`}>
{copied ? <CheckCircle2 size={13} className="text-green-500" /> : <Copy size={13} />}
</button>
)}
</div>
);
};
export const PatientsView: React.FC = () => {
const [busca, setBusca] = useState('');
const debouncedBusca = useDebounce(busca, 500);
@@ -471,41 +495,32 @@ export const PatientsView: React.FC = () => {
{displayedPacientes && displayedPacientes.map(p => (
<div key={p.id} className="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col">
<div className="p-5 flex-grow flex flex-col">
<div className="flex justify-between items-start mb-4">
<h3 className="font-bold text-blue-700 text-lg truncate pr-2 uppercase">{p.nome}</h3>
<div className="p-4 flex-grow flex flex-col gap-3">
{/* Nome completo + convênio */}
<div className="flex items-start justify-between gap-2">
<h3 className="font-bold text-blue-700 text-sm leading-snug uppercase break-words">{p.nome}</h3>
{p.convenio && (
<span className="bg-green-100 text-green-800 text-xs font-bold px-2.5 py-1 rounded-full uppercase shrink-0">{p.convenio}</span>
<span className="bg-green-100 text-green-800 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase shrink-0 mt-0.5">{p.convenio}</span>
)}
</div>
<div className="grid grid-cols-2 gap-3 mb-4 flex-grow">
<div className="bg-gray-50/70 border border-gray-200/50 rounded-lg p-2">
<label className="text-gray-400 text-[10px] font-bold uppercase">CPF</label>
<p className="text-gray-800 font-semibold text-sm truncate">{p.cpf}</p>
</div>
<div className="bg-gray-50/70 border border-gray-200/50 rounded-lg p-2">
<label className="text-gray-400 text-[10px] font-bold uppercase">TEL</label>
<p className="text-gray-800 font-semibold text-sm truncate">{p.telefone}</p>
</div>
<div className="bg-gray-50/70 border border-gray-200/50 rounded-lg p-2">
<label className="text-gray-400 text-[10px] font-bold uppercase">NASC</label>
<p className="text-gray-800 font-semibold text-sm truncate">{p.dataNascimento}</p>
</div>
<div className="bg-gray-50/70 border border-gray-200/50 rounded-lg p-2">
<label className="text-gray-400 text-[10px] font-bold uppercase">CONV</label>
<p className="text-gray-800 font-semibold text-sm truncate">{p.convenio}</p>
</div>
{/* Dados copiáveis */}
<div className="grid grid-cols-2 gap-1.5">
<CopyField label="CPF" value={p.cpf} />
<CopyField label="Telefone" value={p.telefone} />
<CopyField label="Nascimento" value={p.dataNascimento} />
<CopyField label="Convênio" value={p.convenio} />
{p.email && <div className="col-span-2"><CopyField label="E-mail" value={p.email} /></div>}
</div>
</div>
<div className="flex border-t border-gray-200 mt-auto">
<button onClick={() => setModal({ type: 'clinical', patient: p })} className="w-1/2 flex items-center justify-center gap-2 py-3 text-blue-600 hover:bg-blue-50 rounded-bl-xl text-sm font-bold transition-colors uppercase">
<FolderOpen size={16} /> Clínico
<button onClick={() => setModal({ type: 'clinical', patient: p })} className="w-1/2 flex items-center justify-center gap-2 py-2.5 text-blue-600 hover:bg-blue-50 rounded-bl-xl text-xs font-bold transition-colors uppercase">
<FolderOpen size={14} /> Clínico
</button>
<div className="border-l border-gray-200"></div>
<button onClick={() => setModal({ type: 'financial', patient: p })} className="w-1/2 flex items-center justify-center gap-2 py-3 text-green-700 hover:bg-green-50 rounded-br-xl text-sm font-bold transition-colors uppercase">
<DollarSign size={16} /> Financeiro
<button onClick={() => setModal({ type: 'financial', patient: p })} className="w-1/2 flex items-center justify-center gap-2 py-2.5 text-green-700 hover:bg-green-50 rounded-br-xl text-xs font-bold transition-colors uppercase">
<DollarSign size={14} /> Financeiro
</button>
</div>
</div>