feat(F-182): completed feature
This commit is contained in:
chattie
@@ -12,7 +12,9 @@ interface PosTerminal {
|
||||
boundAt: string | null;
|
||||
status: string;
|
||||
lastSeenAt: string | null;
|
||||
settings?: { touchNavigationEnabled?: boolean; quickProductVariantIds?: Array<string | null> };
|
||||
}
|
||||
interface CatalogOption { variantId: string; productId: string; name: string; sku: string; priceCents: number }
|
||||
|
||||
export default function PosAdminPage() {
|
||||
const [stores, setStores] = useState<PosStore[]>([]);
|
||||
@@ -24,17 +26,25 @@ export default function PosAdminPage() {
|
||||
const [error, setError] = useState('');
|
||||
const [newCode, setNewCode] = useState('');
|
||||
const [copied, setCopied] = useState('');
|
||||
const [catalogOptions, setCatalogOptions] = useState<CatalogOption[]>([]);
|
||||
const [configuring, setConfiguring] = useState<PosTerminal | null>(null);
|
||||
const [touchEnabled, setTouchEnabled] = useState(true);
|
||||
const [quickSlots, setQuickSlots] = useState<Array<string | null>>([null, null, null, null]);
|
||||
const [savingTouch, setSavingTouch] = useState(false);
|
||||
const [touchMessage, setTouchMessage] = useState('');
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const [storeData, terminalData] = await Promise.all([
|
||||
const [storeData, terminalData, catalogData] = await Promise.all([
|
||||
api.get<{ stores: PosStore[] }>('/api/pos/admin/stores'),
|
||||
api.get<{ terminals: PosTerminal[] }>('/api/pos/admin/terminals'),
|
||||
api.get<{ items: CatalogOption[] }>('/api/pos/admin/catalog-products'),
|
||||
]);
|
||||
setStores(storeData.stores);
|
||||
setTerminals(terminalData.terminals);
|
||||
setCatalogOptions(catalogData.items);
|
||||
setStoreId((current) => current || storeData.stores.find((store) => store.active)?.id || '');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'No se pudo cargar la configuración TPV');
|
||||
@@ -62,6 +72,32 @@ export default function PosAdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const openTouchConfig = (terminal: PosTerminal) => {
|
||||
setConfiguring(terminal);
|
||||
setTouchEnabled(terminal.settings?.touchNavigationEnabled !== false);
|
||||
const configured = terminal.settings?.quickProductVariantIds ?? [];
|
||||
setQuickSlots([0, 1, 2, 3].map((slot) => configured[slot] ?? null));
|
||||
setTouchMessage('');
|
||||
};
|
||||
|
||||
const saveTouchConfig = async () => {
|
||||
if (!configuring) return;
|
||||
setSavingTouch(true);
|
||||
setTouchMessage('');
|
||||
try {
|
||||
await api.patch(`/api/pos/admin/terminals/${configuring.id}/touch-config`, {
|
||||
touchNavigationEnabled: touchEnabled,
|
||||
quickProductVariantIds: quickSlots,
|
||||
});
|
||||
setTouchMessage('Configuración táctil guardada');
|
||||
await load();
|
||||
} catch (err) {
|
||||
setTouchMessage(err instanceof Error ? err.message : 'No se pudo guardar');
|
||||
} finally {
|
||||
setSavingTouch(false);
|
||||
}
|
||||
};
|
||||
|
||||
const copyCode = async (code: string) => {
|
||||
await navigator.clipboard.writeText(code);
|
||||
setCopied(code);
|
||||
@@ -112,17 +148,48 @@ export default function PosAdminPage() {
|
||||
{loading ? <p className="p-6 text-sm text-gray-500">Cargando…</p> : terminals.length === 0 ? <p className="p-6 text-sm text-gray-500">No hay terminales.</p> : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 text-left text-xs uppercase text-gray-500"><tr><th className="px-4 py-3">Nombre</th><th className="px-4 py-3">Tienda</th><th className="px-4 py-3">Código</th><th className="px-4 py-3">Estado</th><th className="px-4 py-3">Vinculado</th></tr></thead>
|
||||
<thead className="bg-gray-50 text-left text-xs uppercase text-gray-500"><tr><th className="px-4 py-3">Nombre</th><th className="px-4 py-3">Tienda</th><th className="px-4 py-3">Código</th><th className="px-4 py-3">Estado</th><th className="px-4 py-3">Vinculado</th><th className="px-4 py-3">Interfaz</th></tr></thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{terminals.map((terminal) => {
|
||||
const store = stores.find((item) => item.id === terminal.storeId);
|
||||
return <tr key={terminal.id}><td className="px-4 py-3 font-medium">{terminal.name}</td><td className="px-4 py-3">{store?.name ?? terminal.storeId}</td><td className="px-4 py-3"><button type="button" onClick={() => terminal.bindingCode && void copyCode(terminal.bindingCode)} disabled={!terminal.bindingCode} className="rounded-lg bg-gray-100 px-3 py-1 font-mono tracking-wider hover:bg-gray-200 disabled:opacity-40">{copied === terminal.bindingCode ? 'Copiado' : terminal.bindingCode ?? '—'}</button></td><td className="px-4 py-3 capitalize">{terminal.status}</td><td className="px-4 py-3">{terminal.boundAt ? 'Sí' : 'No'}</td></tr>;
|
||||
return <tr key={terminal.id}><td className="px-4 py-3 font-medium">{terminal.name}</td><td className="px-4 py-3">{store?.name ?? terminal.storeId}</td><td className="px-4 py-3"><button type="button" onClick={() => terminal.bindingCode && void copyCode(terminal.bindingCode)} disabled={!terminal.bindingCode} className="rounded-lg bg-gray-100 px-3 py-1 font-mono tracking-wider hover:bg-gray-200 disabled:opacity-40">{copied === terminal.bindingCode ? 'Copiado' : terminal.bindingCode ?? '—'}</button></td><td className="px-4 py-3 capitalize">{terminal.status}</td><td className="px-4 py-3">{terminal.boundAt ? 'Sí' : 'No'}</td><td className="px-4 py-3"><button type="button" onClick={() => openTouchConfig(terminal)} className="rounded-lg border border-[#2D6A4F] px-3 py-1.5 text-xs font-semibold text-[#2D6A4F] hover:bg-green-50">Configurar táctil</button></td></tr>;
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{configuring && (
|
||||
<section className="rounded-xl border border-gray-200 bg-white p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="font-bold text-gray-900">Interfaz táctil · {configuring.name}</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">Las categorías y subcategorías se administran en Categorías. Aquí activas su navegación en este terminal y eliges cuatro productos rápidos.</p>
|
||||
</div>
|
||||
<button type="button" onClick={() => setConfiguring(null)} className="text-gray-400 hover:text-gray-700" aria-label="Cerrar">✕</button>
|
||||
</div>
|
||||
<label className="mt-5 flex items-center gap-3 rounded-xl bg-gray-50 p-4 text-sm font-medium text-gray-800">
|
||||
<input type="checkbox" checked={touchEnabled} onChange={(event) => setTouchEnabled(event.target.checked)} className="h-5 w-5 accent-[#2D6A4F]" />
|
||||
Activar botones grandes categoría → subcategoría → producto
|
||||
</label>
|
||||
<div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
{quickSlots.map((variantId, slot) => (
|
||||
<label key={slot} className="text-sm font-medium text-gray-700">
|
||||
Producto rápido {slot + 1}
|
||||
<select value={variantId ?? ''} onChange={(event) => setQuickSlots((current) => current.map((value, index) => index === slot ? event.target.value || null : value))} className="mt-1 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5">
|
||||
<option value="">Sin asignar</option>
|
||||
{catalogOptions.map((product) => <option key={product.variantId} value={product.variantId}>{product.name} · {product.sku}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-5 flex items-center gap-4">
|
||||
<button type="button" onClick={() => void saveTouchConfig()} disabled={savingTouch} className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50">{savingTouch ? 'Guardando…' : 'Guardar interfaz táctil'}</button>
|
||||
{touchMessage && <p className={`text-sm ${touchMessage.includes('guardada') ? 'text-green-700' : 'text-red-600'}`}>{touchMessage}</p>}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user