From 51cbd0712522dac32f590af2ab3ab0e44afe79d6 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Thu, 14 May 2026 07:11:58 +0200
Subject: [PATCH] fix(pacientes): alias dataNascimento in query; show full
 name; add CopyField component per data field

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/views/PatientsView.tsx | 67 ++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/frontend/views/PatientsView.tsx b/frontend/views/PatientsView.tsx
index 91ee9aa..6ce9832 100644
--- a/frontend/views/PatientsView.tsx
+++ b/frontend/views/PatientsView.tsx
@@ -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>