830 lines
30 KiB
TypeScript
830 lines
30 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, 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;
|
|
settings?: {
|
|
touchNavigationEnabled?: boolean;
|
|
quickProductVariantIds?: Array<string | null>;
|
|
lineDiscountsEnabled?: boolean;
|
|
};
|
|
}
|
|
interface CatalogOption {
|
|
variantId: string;
|
|
name: string;
|
|
sku: string;
|
|
}
|
|
interface PaymentMethod {
|
|
id: string;
|
|
storeId: string;
|
|
code: string;
|
|
label: string;
|
|
kind: 'cash' | 'card' | 'other';
|
|
active: boolean;
|
|
sortOrder: number;
|
|
}
|
|
interface PosCashier {
|
|
id: string;
|
|
email: string;
|
|
role: 'pos_cashier';
|
|
active: boolean;
|
|
deactivatedAt: string | null;
|
|
deletedAt: string | null;
|
|
createdAt: string;
|
|
status: 'active' | 'inactive' | 'deleted';
|
|
}
|
|
interface ReceiptSettings {
|
|
storeId: string;
|
|
name: string;
|
|
address: string;
|
|
taxId: string;
|
|
contactEmail: string;
|
|
contactPhone: string;
|
|
receiptHeader: string;
|
|
receiptFooter: string;
|
|
prefix: string;
|
|
nextNumber: number;
|
|
padding: number;
|
|
returnPolicy: string;
|
|
}
|
|
|
|
const emptyReceipt: ReceiptSettings = {
|
|
storeId: '',
|
|
name: '',
|
|
address: '',
|
|
taxId: '',
|
|
contactEmail: '',
|
|
contactPhone: '',
|
|
receiptHeader: '',
|
|
receiptFooter: '',
|
|
prefix: 'TPV',
|
|
nextNumber: 1,
|
|
padding: 6,
|
|
returnPolicy: 'Se admiten devoluciones durante 15 días con el ticket de compra.',
|
|
};
|
|
|
|
export default function PosAdminPage() {
|
|
const [stores, setStores] = useState<PosStore[]>([]);
|
|
const [terminals, setTerminals] = useState<PosTerminal[]>([]);
|
|
const [catalogOptions, setCatalogOptions] = useState<CatalogOption[]>([]);
|
|
const [storeId, setStoreId] = useState('');
|
|
const [terminalName, setTerminalName] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const [creating, setCreating] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [newCode, setNewCode] = useState('');
|
|
const [copied, setCopied] = useState('');
|
|
const [configuring, setConfiguring] = useState<PosTerminal | null>(null);
|
|
const [touchEnabled, setTouchEnabled] = useState(true);
|
|
const [discountsEnabled, setDiscountsEnabled] = useState(true);
|
|
const [quickSlots, setQuickSlots] = useState<Array<string | null>>(
|
|
Array.from({ length: 8 }, () => null),
|
|
);
|
|
const [savingTouch, setSavingTouch] = useState(false);
|
|
const [touchMessage, setTouchMessage] = useState('');
|
|
const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
|
|
const [cashiers, setCashiers] = useState<PosCashier[]>([]);
|
|
const [newCashier, setNewCashier] = useState({ email: '', password: '' });
|
|
const [savingCashier, setSavingCashier] = useState(false);
|
|
const [cashierMessage, setCashierMessage] = useState('');
|
|
const [newMethod, setNewMethod] = useState({
|
|
code: '',
|
|
label: '',
|
|
kind: 'other' as PaymentMethod['kind'],
|
|
});
|
|
const [savingMethod, setSavingMethod] = useState(false);
|
|
const [paymentMessage, setPaymentMessage] = useState('');
|
|
const [receipt, setReceipt] = useState<ReceiptSettings>(emptyReceipt);
|
|
const [savingReceipt, setSavingReceipt] = useState(false);
|
|
const [receiptMessage, setReceiptMessage] = useState('');
|
|
|
|
const loadStoreConfiguration = useCallback(async (selectedStoreId: string) => {
|
|
if (!selectedStoreId) return;
|
|
try {
|
|
const [methodData, receiptData] = await Promise.all([
|
|
api.get<{ items: PaymentMethod[] }>(
|
|
`/api/pos/admin/payment-methods?storeId=${encodeURIComponent(selectedStoreId)}`,
|
|
),
|
|
api.get<Partial<ReceiptSettings>>(
|
|
`/api/pos/admin/receipt-settings?storeId=${encodeURIComponent(selectedStoreId)}`,
|
|
),
|
|
]);
|
|
setPaymentMethods(methodData.items);
|
|
setReceipt({ ...emptyReceipt, ...receiptData, storeId: selectedStoreId });
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'No se pudo cargar la configuración de cobro');
|
|
}
|
|
}, []);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const [storeData, terminalData, catalogData, userData] = 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'),
|
|
api.get<{ items: Array<PosCashier | { role: string }> }>('/api/pos/users'),
|
|
]);
|
|
setStores(storeData.stores);
|
|
setTerminals(terminalData.terminals);
|
|
setCatalogOptions(catalogData.items);
|
|
setCashiers(userData.items.filter((item): item is PosCashier => item.role === 'pos_cashier'));
|
|
const selected = storeId || storeData.stores.find((store) => store.active)?.id || '';
|
|
setStoreId(selected);
|
|
await loadStoreConfiguration(selected);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'No se pudo cargar la configuración TPV');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [loadStoreConfiguration, storeId]);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const changeStore = (nextStoreId: string) => {
|
|
setStoreId(nextStoreId);
|
|
setReceiptMessage('');
|
|
setPaymentMessage('');
|
|
void loadStoreConfiguration(nextStoreId);
|
|
};
|
|
|
|
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: terminalName.trim(),
|
|
});
|
|
setTerminalName('');
|
|
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);
|
|
setDiscountsEnabled(terminal.settings?.lineDiscountsEnabled !== false);
|
|
const configured = terminal.settings?.quickProductVariantIds ?? [];
|
|
setQuickSlots(Array.from({ length: 8 }, (_, 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,
|
|
lineDiscountsEnabled: discountsEnabled,
|
|
quickProductVariantIds: quickSlots,
|
|
});
|
|
setTouchMessage('Configuración del terminal guardada');
|
|
await load();
|
|
} catch (err) {
|
|
setTouchMessage(err instanceof Error ? err.message : 'No se pudo guardar');
|
|
} finally {
|
|
setSavingTouch(false);
|
|
}
|
|
};
|
|
|
|
const createPaymentMethod = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
setSavingMethod(true);
|
|
setPaymentMessage('');
|
|
try {
|
|
await api.post('/api/pos/admin/payment-methods', {
|
|
storeId,
|
|
code: newMethod.code.trim().toLowerCase(),
|
|
label: newMethod.label.trim(),
|
|
kind: newMethod.kind,
|
|
active: true,
|
|
sortOrder: paymentMethods.length,
|
|
});
|
|
setNewMethod({ code: '', label: '', kind: 'other' });
|
|
setPaymentMessage('Forma de pago creada');
|
|
await loadStoreConfiguration(storeId);
|
|
} catch (err) {
|
|
setPaymentMessage(err instanceof Error ? err.message : 'No se pudo crear la forma de pago');
|
|
} finally {
|
|
setSavingMethod(false);
|
|
}
|
|
};
|
|
|
|
const togglePaymentMethod = async (method: PaymentMethod) => {
|
|
setPaymentMessage('');
|
|
try {
|
|
await api.patch(`/api/pos/admin/payment-methods/${method.id}`, { active: !method.active });
|
|
setPaymentMessage(method.active ? 'Forma de pago desactivada' : 'Forma de pago activada');
|
|
await loadStoreConfiguration(storeId);
|
|
} catch (err) {
|
|
setPaymentMessage(err instanceof Error ? err.message : 'No se pudo actualizar');
|
|
}
|
|
};
|
|
|
|
const createCashier = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
setSavingCashier(true);
|
|
setCashierMessage('');
|
|
try {
|
|
await api.post('/api/pos/users', {
|
|
email: newCashier.email.trim().toLowerCase(),
|
|
password: newCashier.password,
|
|
role: 'pos_cashier',
|
|
});
|
|
setNewCashier({ email: '', password: '' });
|
|
setCashierMessage('Cajero creado');
|
|
await load();
|
|
} catch (err) {
|
|
setCashierMessage(err instanceof Error ? err.message : 'No se pudo crear el cajero');
|
|
} finally {
|
|
setSavingCashier(false);
|
|
}
|
|
};
|
|
|
|
const toggleCashier = async (cashier: PosCashier) => {
|
|
const nextActive = !cashier.active;
|
|
const action = nextActive ? 'reactivar' : 'desactivar';
|
|
if (!window.confirm(`¿Quieres ${action} a ${cashier.email}?`)) return;
|
|
setCashierMessage('');
|
|
try {
|
|
await api.patch(`/api/pos/users/${cashier.id}/status`, { active: nextActive });
|
|
setCashierMessage(nextActive ? 'Cajero reactivado' : 'Cajero desactivado');
|
|
await load();
|
|
} catch (err) {
|
|
setCashierMessage(err instanceof Error ? err.message : `No se pudo ${action} el cajero`);
|
|
}
|
|
};
|
|
|
|
const deleteCashier = async (cashier: PosCashier) => {
|
|
if (
|
|
!window.confirm(
|
|
`¿Eliminar definitivamente a ${cashier.email}? No podrá reactivarse. Su historial de ventas y caja se conservará.`,
|
|
)
|
|
)
|
|
return;
|
|
setCashierMessage('');
|
|
try {
|
|
await api.delete(`/api/pos/users/${cashier.id}`);
|
|
setCashierMessage('Cajero eliminado; su histórico se conserva');
|
|
await load();
|
|
} catch (err) {
|
|
setCashierMessage(err instanceof Error ? err.message : 'No se pudo eliminar el cajero');
|
|
}
|
|
};
|
|
|
|
const saveReceipt = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
setSavingReceipt(true);
|
|
setReceiptMessage('');
|
|
try {
|
|
await api.patch('/api/pos/admin/receipt-settings', receipt);
|
|
setReceiptMessage('Datos y numeración del ticket guardados');
|
|
await loadStoreConfiguration(storeId);
|
|
} catch (err) {
|
|
setReceiptMessage(err instanceof Error ? err.message : 'No se pudo guardar el ticket');
|
|
} finally {
|
|
setSavingReceipt(false);
|
|
}
|
|
};
|
|
|
|
const copyCode = async (code: string) => {
|
|
await navigator.clipboard.writeText(code);
|
|
setCopied(code);
|
|
window.setTimeout(() => setCopied(''), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<header>
|
|
<h1 className="text-2xl font-bold text-gray-900">TPV</h1>
|
|
<p className="mt-0.5 text-sm text-gray-500">
|
|
Configura terminales táctiles, formas de pago y contenido fiscal del ticket.
|
|
</p>
|
|
</header>
|
|
|
|
<label className="block max-w-md text-sm font-medium text-gray-700">
|
|
Tienda que estás configurando
|
|
<select
|
|
value={storeId}
|
|
onChange={(event) => changeStore(event.target.value)}
|
|
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>
|
|
|
|
<form onSubmit={createTerminal} className="rounded-xl border border-gray-200 bg-white p-6">
|
|
<h2 className="mb-4 font-bold text-gray-900">Crear y vincular terminal</h2>
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<label className="min-w-64 flex-1 text-sm font-medium text-gray-700">
|
|
Nombre del terminal
|
|
<input
|
|
value={terminalName}
|
|
onChange={(event) => setTerminalName(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
|
|
disabled={creating || !storeId || !terminalName.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: <strong className="font-mono text-lg tracking-widest">{newCode}</strong>
|
|
</p>
|
|
)}
|
|
{error && <p className="mt-4 text-sm text-red-600">{error}</p>}
|
|
</form>
|
|
|
|
<section className="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
|
<div className="border-b px-6 py-4">
|
|
<h2 className="font-bold">Terminales</h2>
|
|
</div>
|
|
{loading ? (
|
|
<p className="p-6 text-sm text-gray-500">Cargando…</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">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">Configuración</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{terminals
|
|
.filter((terminal) => terminal.storeId === storeId)
|
|
.map((terminal) => (
|
|
<tr key={terminal.id}>
|
|
<td className="px-4 py-3 font-medium">{terminal.name}</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"
|
|
>
|
|
{copied === terminal.bindingCode
|
|
? 'Copiado'
|
|
: (terminal.bindingCode ?? '—')}
|
|
</button>
|
|
</td>
|
|
<td className="px-4 py-3">{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]"
|
|
>
|
|
Configurar terminal
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="rounded-xl border border-gray-200 bg-white p-6">
|
|
<div>
|
|
<h2 className="font-bold">Cajeros</h2>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Desactivar corta el acceso y permite reactivarlo. Eliminar es irreversible, pero
|
|
conserva la atribución histórica de ventas y sesiones de caja.
|
|
</p>
|
|
</div>
|
|
<form
|
|
onSubmit={createCashier}
|
|
className="mt-5 grid gap-3 rounded-xl bg-gray-50 p-4 md:grid-cols-[1fr_1fr_auto] md:items-end"
|
|
>
|
|
<label className="text-sm font-medium">
|
|
Email
|
|
<input
|
|
type="email"
|
|
value={newCashier.email}
|
|
onChange={(event) => setNewCashier({ ...newCashier, email: event.target.value })}
|
|
required
|
|
className="mt-1 w-full rounded-xl border px-3 py-2.5"
|
|
/>
|
|
</label>
|
|
<label className="text-sm font-medium">
|
|
Contraseña inicial
|
|
<input
|
|
type="password"
|
|
value={newCashier.password}
|
|
onChange={(event) => setNewCashier({ ...newCashier, password: event.target.value })}
|
|
required
|
|
minLength={8}
|
|
maxLength={200}
|
|
className="mt-1 w-full rounded-xl border px-3 py-2.5"
|
|
/>
|
|
</label>
|
|
<button
|
|
disabled={savingCashier}
|
|
className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50"
|
|
>
|
|
{savingCashier ? 'Creando…' : 'Crear cajero'}
|
|
</button>
|
|
</form>
|
|
<div className="mt-5 overflow-x-auto rounded-xl border">
|
|
<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">Email</th>
|
|
<th className="px-4 py-3">Estado</th>
|
|
<th className="px-4 py-3">Creado</th>
|
|
<th className="px-4 py-3 text-right">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{cashiers.map((cashier) => (
|
|
<tr key={cashier.id} className={cashier.status === 'deleted' ? 'opacity-60' : ''}>
|
|
<td className="px-4 py-3 font-medium">{cashier.email}</td>
|
|
<td className="px-4 py-3">
|
|
<span
|
|
className={`rounded-full px-2.5 py-1 text-xs font-semibold ${
|
|
cashier.status === 'active'
|
|
? 'bg-green-100 text-green-800'
|
|
: cashier.status === 'inactive'
|
|
? 'bg-amber-100 text-amber-800'
|
|
: 'bg-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
{cashier.status === 'active'
|
|
? 'Activo'
|
|
: cashier.status === 'inactive'
|
|
? 'Inactivo'
|
|
: 'Eliminado'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-500">
|
|
{new Date(cashier.createdAt).toLocaleDateString('es-ES')}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{cashier.status !== 'deleted' && (
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => void toggleCashier(cashier)}
|
|
className="rounded-lg border px-3 py-2 text-xs font-semibold"
|
|
>
|
|
{cashier.active ? 'Desactivar' : 'Reactivar'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => void deleteCashier(cashier)}
|
|
className="rounded-lg border border-red-200 px-3 py-2 text-xs font-semibold text-red-700"
|
|
>
|
|
Eliminar
|
|
</button>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{!loading && cashiers.length === 0 && (
|
|
<tr>
|
|
<td colSpan={4} className="px-4 py-8 text-center text-gray-500">
|
|
No hay cajeros configurados.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{cashierMessage && <p className="mt-3 text-sm">{cashierMessage}</p>}
|
|
</section>
|
|
|
|
{configuring && (
|
|
<section className="rounded-xl border border-gray-200 bg-white p-6">
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<h2 className="font-bold">Interfaz táctil · {configuring.name}</h2>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Elige hasta ocho productos rápidos y las funciones disponibles en esta caja.
|
|
</p>
|
|
</div>
|
|
<button type="button" onClick={() => setConfiguring(null)} aria-label="Cerrar">
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="mt-5 grid gap-3 md:grid-cols-2">
|
|
<label className="flex items-center gap-3 rounded-xl bg-gray-50 p-4 text-sm font-medium">
|
|
<input
|
|
type="checkbox"
|
|
checked={touchEnabled}
|
|
onChange={(event) => setTouchEnabled(event.target.checked)}
|
|
className="h-5 w-5 accent-[#2D6A4F]"
|
|
/>{' '}
|
|
Navegación táctil por categorías
|
|
</label>
|
|
<label className="flex items-center gap-3 rounded-xl bg-gray-50 p-4 text-sm font-medium">
|
|
<input
|
|
type="checkbox"
|
|
checked={discountsEnabled}
|
|
onChange={(event) => setDiscountsEnabled(event.target.checked)}
|
|
className="h-5 w-5 accent-[#2D6A4F]"
|
|
/>{' '}
|
|
Permitir descuentos por línea
|
|
</label>
|
|
</div>
|
|
<p className="mt-2 text-xs text-gray-500">
|
|
Desactiva descuentos para terminales de autopago.
|
|
</p>
|
|
<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 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 terminal'}
|
|
</button>
|
|
{touchMessage && <p className="text-sm">{touchMessage}</p>}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<section className="rounded-xl border border-gray-200 bg-white p-6">
|
|
<div>
|
|
<h2 className="font-bold">Formas de pago</h2>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Crea Bizum, Stripe, Apple Pay u otro método. “Tarjeta” y “otro” se registran
|
|
manualmente; no activan una pasarela externa.
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
{paymentMethods.map((method) => (
|
|
<div
|
|
key={method.id}
|
|
className={`flex items-center justify-between rounded-xl border p-4 ${method.active ? 'border-green-200 bg-green-50' : 'border-gray-200 bg-gray-50 opacity-70'}`}
|
|
>
|
|
<div>
|
|
<strong className="block">{method.label}</strong>
|
|
<span className="text-xs text-gray-500">
|
|
{method.code} · {method.kind}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => void togglePaymentMethod(method)}
|
|
className="rounded-lg border bg-white px-3 py-2 text-xs font-semibold"
|
|
>
|
|
{method.active ? 'Desactivar' : 'Activar'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<form
|
|
onSubmit={createPaymentMethod}
|
|
className="mt-5 grid gap-3 rounded-xl bg-gray-50 p-4 md:grid-cols-[1fr_1fr_1fr_auto] md:items-end"
|
|
>
|
|
<label className="text-sm font-medium">
|
|
Código
|
|
<input
|
|
value={newMethod.code}
|
|
onChange={(event) =>
|
|
setNewMethod({
|
|
...newMethod,
|
|
code: event.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, ''),
|
|
})
|
|
}
|
|
required
|
|
maxLength={32}
|
|
placeholder="bizum"
|
|
className="mt-1 w-full rounded-xl border px-3 py-2.5"
|
|
/>
|
|
</label>
|
|
<label className="text-sm font-medium">
|
|
Nombre visible
|
|
<input
|
|
value={newMethod.label}
|
|
onChange={(event) => setNewMethod({ ...newMethod, label: event.target.value })}
|
|
required
|
|
maxLength={64}
|
|
placeholder="Bizum"
|
|
className="mt-1 w-full rounded-xl border px-3 py-2.5"
|
|
/>
|
|
</label>
|
|
<label className="text-sm font-medium">
|
|
Tipo
|
|
<select
|
|
value={newMethod.kind}
|
|
onChange={(event) =>
|
|
setNewMethod({ ...newMethod, kind: event.target.value as PaymentMethod['kind'] })
|
|
}
|
|
className="mt-1 w-full rounded-xl border bg-white px-3 py-2.5"
|
|
>
|
|
<option value="cash">Efectivo</option>
|
|
<option value="card">Tarjeta</option>
|
|
<option value="other">Otro</option>
|
|
</select>
|
|
</label>
|
|
<button
|
|
disabled={savingMethod}
|
|
className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50"
|
|
>
|
|
Añadir
|
|
</button>
|
|
</form>
|
|
{paymentMessage && <p className="mt-3 text-sm">{paymentMessage}</p>}
|
|
</section>
|
|
|
|
<form onSubmit={saveReceipt} className="rounded-xl border border-gray-200 bg-white p-6">
|
|
<div>
|
|
<h2 className="font-bold">Empresa, numeración y política del ticket</h2>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Estos datos se congelan en cada ticket emitido.
|
|
</p>
|
|
</div>
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
<Field
|
|
label="Razón social / nombre"
|
|
value={receipt.name}
|
|
onChange={(value) => setReceipt({ ...receipt, name: value })}
|
|
required
|
|
/>
|
|
<Field
|
|
label="NIF / CIF"
|
|
value={receipt.taxId}
|
|
onChange={(value) => setReceipt({ ...receipt, taxId: value })}
|
|
/>
|
|
<Field
|
|
label="Dirección"
|
|
value={receipt.address}
|
|
onChange={(value) => setReceipt({ ...receipt, address: value })}
|
|
/>
|
|
<Field
|
|
label="Email"
|
|
type="email"
|
|
value={receipt.contactEmail}
|
|
onChange={(value) => setReceipt({ ...receipt, contactEmail: value })}
|
|
/>
|
|
<Field
|
|
label="Teléfono"
|
|
value={receipt.contactPhone}
|
|
onChange={(value) => setReceipt({ ...receipt, contactPhone: value })}
|
|
/>
|
|
<Field
|
|
label="Cabecera"
|
|
value={receipt.receiptHeader}
|
|
onChange={(value) => setReceipt({ ...receipt, receiptHeader: value })}
|
|
/>
|
|
<Field
|
|
label="Pie"
|
|
value={receipt.receiptFooter}
|
|
onChange={(value) => setReceipt({ ...receipt, receiptFooter: value })}
|
|
/>
|
|
<Field
|
|
label="Prefijo de ticket"
|
|
value={receipt.prefix}
|
|
onChange={(value) =>
|
|
setReceipt({ ...receipt, prefix: value.toUpperCase().replace(/[^A-Z0-9_-]/g, '') })
|
|
}
|
|
required
|
|
/>
|
|
<Field
|
|
label="Próximo número"
|
|
type="number"
|
|
value={String(receipt.nextNumber)}
|
|
onChange={(value) => setReceipt({ ...receipt, nextNumber: Number(value) })}
|
|
required
|
|
min={1}
|
|
/>
|
|
<Field
|
|
label="Dígitos (relleno)"
|
|
type="number"
|
|
value={String(receipt.padding)}
|
|
onChange={(value) => setReceipt({ ...receipt, padding: Number(value) })}
|
|
required
|
|
min={1}
|
|
max={12}
|
|
/>
|
|
</div>
|
|
<label className="mt-4 block text-sm font-medium">
|
|
Política de devolución
|
|
<textarea
|
|
value={receipt.returnPolicy}
|
|
onChange={(event) => setReceipt({ ...receipt, returnPolicy: event.target.value })}
|
|
required
|
|
maxLength={2000}
|
|
rows={3}
|
|
className="mt-1 w-full rounded-xl border px-3 py-2.5"
|
|
/>
|
|
</label>
|
|
<div className="mt-5 flex items-center gap-4">
|
|
<button
|
|
disabled={savingReceipt}
|
|
className="rounded-xl bg-[#2D6A4F] px-5 py-2.5 text-sm font-semibold text-white disabled:opacity-50"
|
|
>
|
|
{savingReceipt ? 'Guardando…' : 'Guardar ticket'}
|
|
</button>
|
|
{receiptMessage && <p className="text-sm">{receiptMessage}</p>}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({
|
|
label,
|
|
value,
|
|
onChange,
|
|
type = 'text',
|
|
required = false,
|
|
min,
|
|
max,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
type?: string;
|
|
required?: boolean;
|
|
min?: number;
|
|
max?: number;
|
|
}) {
|
|
return (
|
|
<label className="text-sm font-medium text-gray-700">
|
|
{label}
|
|
<input
|
|
type={type}
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
required={required}
|
|
min={min}
|
|
max={max}
|
|
className="mt-1 w-full rounded-xl border border-gray-300 px-3 py-2.5"
|
|
/>
|
|
</label>
|
|
);
|
|
}
|