fix: storefront live search relative URLs + auth error messages + TPV clock

- Storefront: use relative URLs in api.ts (fix ERR_ADDRESS_UNREACHABLE)
- Auth: show specific error for EMAIL_NOT_CONFIRMED
- TPV: add clock with date/time, modern SVG icons, panel toggle left
This commit is contained in:
chattie
2026-08-24 16:13:02 +02:00
parent 3d404de25c
commit 30a0cd3552
9 changed files with 163 additions and 21 deletions

View File

@@ -147,6 +147,13 @@ export default function RegisterPage() {
toastTimer = setTimeout(() => setAddedToast(null), 2000);
};
// Clock state for TPV header
const [currentTime, setCurrentTime] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
// POS-FIX-5: verify PIN then close session
const handleVerifyPin = async () => {
if (!config?.terminal) return;
@@ -1180,19 +1187,42 @@ export default function RegisterPage() {
<main className="flex min-w-0 flex-1 flex-col overflow-hidden border-r p-4">
<div className="mb-3">
<div className="mb-2 flex items-center gap-2">
<span className="text-sm font-bold text-[#2D6A4F]">{config.store.name}</span>
<span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">
Caja abierta
</span>
<div className="mb-2 flex items-center gap-3">
{/* Panel toggle button - LEFT */}
<button
type="button"
onClick={() => setShowSidebar((v) => !v)}
title={showSidebar ? 'Ocultar panel' : 'Mostrar panel'}
className="ml-2 rounded-lg border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50"
className="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50 transition-colors"
>
{showSidebar ? '◀' : '▶'} Panel
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d={showSidebar ? "M4 6h16M4 12h16M4 18h7" : "M4 6h16M4 12h16M4 18h16"} />
</svg>
{showSidebar ? 'Ocultar' : 'Panel'}
</button>
{/* Store name */}
<span className="text-sm font-bold text-[#2D6A4F]">{config.store.name}</span>
{/* Status badge */}
<span className="flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
Caja abierta
</span>
{/* Clock */}
<span className="ml-auto flex items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-xs font-medium text-gray-700 border border-gray-200">
<svg className="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{currentTime.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
<span className="text-gray-400">·</span>
{currentTime.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' })}
</span>
{!config?.terminal?.settings?.selfpayMode && (
<button
type="button"
@@ -1204,8 +1234,11 @@ export default function RegisterPage() {
setCloseError('');
setShowCloseSession(true);
}}
className="ml-auto rounded-lg border border-red-200 bg-red-50 px-3 py-1 text-xs font-bold text-red-600 hover:bg-red-100"
className="flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-bold text-red-600 hover:bg-red-100 transition-colors"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
Cerrar caja
</button>
)}