196 lines
10 KiB
TypeScript
196 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { api } from '@/lib/api-client';
|
|
|
|
interface PosStore { id: string; name: string; active: boolean }
|
|
interface PosTerminal {
|
|
id: string;
|
|
storeId: string;
|
|
name: string;
|
|
bindingCode: string | null;
|
|
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[]>([]);
|
|
const [terminals, setTerminals] = useState<PosTerminal[]>([]);
|
|
const [storeId, setStoreId] = useState('');
|
|
const [name, setName] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const [creating, setCreating] = useState(false);
|
|
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, 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');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { void load(); }, []);
|
|
|
|
const createTerminal = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
setCreating(true);
|
|
setError('');
|
|
setNewCode('');
|
|
try {
|
|
const terminal = await api.post<PosTerminal>('/api/pos/admin/terminals', { storeId, name: name.trim() });
|
|
setName('');
|
|
setNewCode(terminal.bindingCode ?? '');
|
|
await load();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'No se pudo crear el terminal');
|
|
} finally {
|
|
setCreating(false);
|
|
}
|
|
};
|
|
|
|
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);
|
|
setTimeout(() => setCopied(''), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">TPV</h1>
|
|
<p className="mt-0.5 text-sm text-gray-500">Configura dispositivos y obtén el código para vincular cada caja.</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="rounded-xl border border-blue-200 bg-blue-50 p-5 text-sm text-blue-900">
|
|
<h2 className="font-bold">1. Vincular terminal</h2>
|
|
<p className="mt-1">Crea un terminal aquí y escribe su código de 8 caracteres en el navegador del TPV. Esto identifica qué caja física está vendiendo.</p>
|
|
</div>
|
|
<div className="rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-900">
|
|
<h2 className="font-bold">2. Abrir sesión de caja</h2>
|
|
<p className="mt-1">Después de vincular, el cajero indica el efectivo inicial en el propio TPV. La sesión representa el turno diario de caja.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={createTerminal} className="rounded-xl border border-gray-200 bg-white p-6">
|
|
<h2 className="mb-4 font-bold text-gray-900">Crear terminal</h2>
|
|
<div className="grid gap-4 md:grid-cols-[1fr_1fr_auto] md:items-end">
|
|
<label className="text-sm font-medium text-gray-700">
|
|
Tienda
|
|
<select value={storeId} onChange={(event) => setStoreId(event.target.value)} required className="mt-1 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5">
|
|
{stores.filter((store) => store.active).map((store) => <option key={store.id} value={store.id}>{store.name}</option>)}
|
|
</select>
|
|
</label>
|
|
<label className="text-sm font-medium text-gray-700">
|
|
Nombre del terminal
|
|
<input value={name} onChange={(event) => setName(event.target.value)} required maxLength={100} placeholder="Caja principal" className="mt-1 w-full rounded-xl border border-gray-300 px-3 py-2.5" />
|
|
</label>
|
|
<button type="submit" disabled={creating || !storeId || !name.trim()} className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50">
|
|
{creating ? 'Creando…' : 'Crear terminal'}
|
|
</button>
|
|
</div>
|
|
{newCode && <p className="mt-4 rounded-lg bg-green-50 p-3 text-sm text-green-800">Código creado: <strong className="font-mono text-lg tracking-widest">{newCode}</strong></p>}
|
|
{error && <p className="mt-4 text-sm text-red-600">{error}</p>}
|
|
</form>
|
|
|
|
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
|
<div className="border-b border-gray-200 px-6 py-4"><h2 className="font-bold text-gray-900">Terminales</h2></div>
|
|
{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><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><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>
|
|
);
|
|
}
|