diff --git a/dental-server/dental-client/src/components/ThumbImg.jsx b/dental-server/dental-client/src/components/ThumbImg.jsx new file mode 100644 index 0000000..9e8861d --- /dev/null +++ b/dental-server/dental-client/src/components/ThumbImg.jsx @@ -0,0 +1,46 @@ +import { useState } from 'react'; + +/** + * Renderiza um thumbnail com fallback automático quando a imagem falha + * (404 ou erro de rede). Enquanto aguarda reenvio pelo cliente Windows + * exibe placeholder com ícone e label configuráveis. + */ +export default function ThumbImg({ src, className, style, placeholder = '🦷', label = 'Aguardando reenvio' }) { + const [failed, setFailed] = useState(false); + + if (!src || failed) { + return ( +
+ {placeholder} + {label && ( + + {label} + + )} +
+ ); + } + + return ( + setFailed(true)} + /> + ); +} diff --git a/dental-server/dental-client/src/pages/DashboardPage.jsx b/dental-server/dental-client/src/pages/DashboardPage.jsx index 50ca5f8..88241b9 100644 --- a/dental-server/dental-client/src/pages/DashboardPage.jsx +++ b/dental-server/dental-client/src/pages/DashboardPage.jsx @@ -5,6 +5,7 @@ import { useSocket } from '../contexts/SocketContext'; import { useToast } from '../contexts/ToastContext'; import { useAuth } from '../contexts/AuthContext'; import TransformModal from '../components/TransformModal'; +import ThumbImg from '../components/ThumbImg'; import CreatePatientModal from '../components/CreatePatientModal'; import SettingsModal from '../components/SettingsModal'; import UserManagementModal from '../components/UserManagementModal'; @@ -336,10 +337,11 @@ export default function DashboardPage() { return (
openPatient(p)}>
- {thumb - ? - :
🦷
- } +