fix(inventory-opt): inventory optimization: pagination, queries, filters for 10k+ products
This commit is contained in:
Deploy
@@ -1,26 +1,16 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { productsApi, inventoryApi, pricingApi } from '@/lib/api-client';
|
||||
import type { ProductVariant, StockAvailability, VariantPrice } from '@/types';
|
||||
|
||||
interface ProductRow {
|
||||
productId: string;
|
||||
productName: string;
|
||||
productSlug: string;
|
||||
productActive: boolean;
|
||||
variant: ProductVariant;
|
||||
stock: StockAvailability | null;
|
||||
price: VariantPrice | null;
|
||||
expirationDate: string | null;
|
||||
loading: boolean;
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { inventoryApi, productsApi } from '@/lib/api-client';
|
||||
import type { InventoryOverviewItem } from '@/types';
|
||||
|
||||
interface ProductRow extends InventoryOverviewItem {
|
||||
editing: boolean;
|
||||
editValue: string;
|
||||
saving: boolean;
|
||||
msg: string;
|
||||
editingEan: boolean;
|
||||
editEanValue: string;
|
||||
savingEan: boolean;
|
||||
// F-130: caducidad editable inline
|
||||
editingExp: boolean;
|
||||
editExpValue: string;
|
||||
savingExp: boolean;
|
||||
@@ -37,19 +27,30 @@ const FILTER_LABELS: Record<RowFilter, string> = {
|
||||
low_margin: '📉 Margen <30%',
|
||||
};
|
||||
|
||||
const VAT_MULTIPLIER: Record<string, number> = {
|
||||
general: 1.21,
|
||||
reduced: 1.1,
|
||||
'super-reduced': 1.04,
|
||||
};
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
function StockBadge({ qty }: { qty: number }) {
|
||||
if (qty === 0) return <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">Sin stock</span>;
|
||||
if (qty < 5) return <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">Stock bajo ({qty})</span>;
|
||||
return <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">En stock ({qty})</span>;
|
||||
if (qty === 0) {
|
||||
return (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
|
||||
Sin stock
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (qty < 5) {
|
||||
return (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
|
||||
Stock bajo ({qty})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
|
||||
En stock ({qty})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Días hasta la fecha de caducidad (negativo si ya caducó). */
|
||||
function daysUntil(dateIso: string): number {
|
||||
const target = new Date(`${dateIso.slice(0, 10)}T00:00:00`);
|
||||
const today = new Date();
|
||||
@@ -57,26 +58,27 @@ function daysUntil(dateIso: string): number {
|
||||
return Math.round((target.getTime() - today.getTime()) / 86_400_000);
|
||||
}
|
||||
|
||||
/** Margen bruto % = (PVP − coste) / PVP × 100. Null si falta coste o precio. */
|
||||
function marginPercent(price: VariantPrice | null): number | null {
|
||||
if (!price || price.costCents === null) return null;
|
||||
const grossCents = Math.round(price.netUnitAmountCents * (VAT_MULTIPLIER[price.vatRate] ?? 1.21));
|
||||
if (grossCents <= 0) return null;
|
||||
return Math.round(((grossCents - price.costCents) / grossCents) * 100);
|
||||
}
|
||||
|
||||
function ExpirationCell({ dateIso }: { dateIso: string | null }) {
|
||||
if (!dateIso) return <span className="text-gray-300">—</span>;
|
||||
const days = daysUntil(dateIso);
|
||||
const label = new Date(`${dateIso.slice(0, 10)}T00:00:00`).toLocaleDateString('es-ES', {
|
||||
day: '2-digit', month: '2-digit', year: 'numeric',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
if (days < 0) {
|
||||
return <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">Caducado ({label})</span>;
|
||||
return (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
|
||||
Caducado ({label})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (days <= 30) {
|
||||
return (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700" title={label}>
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700"
|
||||
title={label}
|
||||
>
|
||||
Caduca en {days} día{days === 1 ? '' : 's'}
|
||||
</span>
|
||||
);
|
||||
@@ -84,6 +86,21 @@ function ExpirationCell({ dateIso }: { dateIso: string | null }) {
|
||||
return <span className="text-xs text-gray-600">{label}</span>;
|
||||
}
|
||||
|
||||
function toRow(item: InventoryOverviewItem): ProductRow {
|
||||
return {
|
||||
...item,
|
||||
editing: false,
|
||||
editValue: String(item.stock.availableQuantity),
|
||||
saving: false,
|
||||
editingEan: false,
|
||||
editEanValue: item.variant.ean ?? '',
|
||||
savingEan: false,
|
||||
editingExp: false,
|
||||
editExpValue: item.expirationDate?.slice(0, 10) ?? '',
|
||||
savingExp: false,
|
||||
};
|
||||
}
|
||||
|
||||
export default function InventoryPage() {
|
||||
const [rows, setRows] = useState<ProductRow[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -91,103 +108,65 @@ export default function InventoryPage() {
|
||||
const [filter, setFilter] = useState<RowFilter>('all');
|
||||
const [search, setSearch] = useState('');
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [stats, setStats] = useState({ total: 0, inStock: 0, lowStock: 0, outOfStock: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebouncedSearch(search), 400);
|
||||
return () => clearTimeout(t);
|
||||
}, [search]);
|
||||
|
||||
// Load products + single internal variant + stock + price (F-108/F-110)
|
||||
useEffect(() => {
|
||||
setOffset(0);
|
||||
}, [debouncedSearch, filter]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const { items: products } = await productsApi.list({
|
||||
limit: 100,
|
||||
const result = await inventoryApi.listOverview({
|
||||
q: debouncedSearch || undefined,
|
||||
filter,
|
||||
limit: PAGE_SIZE,
|
||||
offset,
|
||||
});
|
||||
|
||||
const productRows: ProductRow[] = [];
|
||||
|
||||
for (const product of products ?? []) {
|
||||
const { items: variants } = await productsApi.getVariants(product.id);
|
||||
const variant = variants?.[0];
|
||||
if (!variant) continue;
|
||||
productRows.push({
|
||||
productId: product.id,
|
||||
productName: product.name,
|
||||
productSlug: product.slug,
|
||||
productActive: product.state === 'active',
|
||||
variant,
|
||||
stock: null,
|
||||
price: null,
|
||||
expirationDate: product.expirationDate ?? null,
|
||||
loading: true,
|
||||
editing: false,
|
||||
editValue: '',
|
||||
saving: false,
|
||||
msg: '',
|
||||
editingEan: false,
|
||||
editEanValue: '',
|
||||
savingEan: false,
|
||||
editingExp: false,
|
||||
editExpValue: product.expirationDate?.slice(0, 10) ?? '',
|
||||
savingExp: false,
|
||||
});
|
||||
}
|
||||
|
||||
setRows(productRows);
|
||||
|
||||
for (const row of productRows) {
|
||||
inventoryApi.getAvailability(row.variant.id)
|
||||
.then((stock) => {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? { ...r, stock, loading: false, editValue: String(stock.availableQuantity) }
|
||||
: r,
|
||||
),
|
||||
);
|
||||
})
|
||||
.catch(() => {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id ? { ...r, loading: false, editValue: '0' } : r,
|
||||
),
|
||||
);
|
||||
});
|
||||
|
||||
pricingApi.getVariantPrice(row.variant.id)
|
||||
.then((price) => {
|
||||
setRows((prev) =>
|
||||
prev.map((r) => (r.variant.id === row.variant.id ? { ...r, price } : r)),
|
||||
);
|
||||
})
|
||||
.catch(() => {
|
||||
// Sin precio: margen no disponible.
|
||||
});
|
||||
}
|
||||
setRows(result.items.map(toRow));
|
||||
setTotal(result.total);
|
||||
setStats(result.stats);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Error al cargar inventario');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [debouncedSearch]);
|
||||
}, [debouncedSearch, filter, offset]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
// Save EAN inline
|
||||
const handleSaveEan = async (variantId: string, productId: string, newEan: string) => {
|
||||
setRows(prev => prev.map(r => r.variant.id === variantId ? { ...r, savingEan: true } : r));
|
||||
setRows((prev) => prev.map((r) => (r.variant.id === variantId ? { ...r, savingEan: true } : r)));
|
||||
try {
|
||||
const updated = await productsApi.updateVariant(productId, variantId, { ean: newEan || null });
|
||||
setRows(prev => prev.map(r => r.variant.id === variantId ? { ...r, variant: { ...r.variant, ean: updated.ean }, editingEan: false, savingEan: false } : r));
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === variantId
|
||||
? {
|
||||
...r,
|
||||
variant: { ...r.variant, ean: updated.ean },
|
||||
editingEan: false,
|
||||
editEanValue: updated.ean ?? '',
|
||||
savingEan: false,
|
||||
}
|
||||
: r,
|
||||
),
|
||||
);
|
||||
} catch {
|
||||
setRows(prev => prev.map(r => r.variant.id === variantId ? { ...r, savingEan: false } : r));
|
||||
setRows((prev) => prev.map((r) => (r.variant.id === variantId ? { ...r, savingEan: false } : r)));
|
||||
}
|
||||
};
|
||||
|
||||
// Save expiration date inline (F-130)
|
||||
const handleSaveExp = async (variantId: string, productId: string, value: string) => {
|
||||
setRows((prev) => prev.map((r) => (r.variant.id === variantId ? { ...r, savingExp: true } : r)));
|
||||
try {
|
||||
@@ -195,7 +174,7 @@ export default function InventoryPage() {
|
||||
const newIso = updated.expirationDate ?? null;
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === variantId
|
||||
r.productId === productId
|
||||
? {
|
||||
...r,
|
||||
expirationDate: newIso,
|
||||
@@ -211,14 +190,13 @@ export default function InventoryPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Save Stock inline (used by Stock cell on blur/Enter)
|
||||
const saveStockInline = async (variantId: string, value: string) => {
|
||||
const qty = parseInt(value, 10);
|
||||
if (isNaN(qty) || qty < 0) {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === variantId
|
||||
? { ...r, editing: false, editValue: String(r.stock?.availableQuantity ?? 0), msg: 'Error' }
|
||||
? { ...r, editing: false, editValue: String(r.stock.availableQuantity) }
|
||||
: r,
|
||||
),
|
||||
);
|
||||
@@ -236,14 +214,11 @@ export default function InventoryPage() {
|
||||
editing: false,
|
||||
saving: false,
|
||||
editValue: String(result.available),
|
||||
msg: '✓ Guardado',
|
||||
}
|
||||
: r,
|
||||
),
|
||||
);
|
||||
setTimeout(() => {
|
||||
setRows((prev) => prev.map((r) => (r.variant.id === variantId ? { ...r, msg: '' } : r)));
|
||||
}, 3000);
|
||||
await load();
|
||||
} catch {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
@@ -252,8 +227,7 @@ export default function InventoryPage() {
|
||||
...r,
|
||||
saving: false,
|
||||
editing: false,
|
||||
editValue: String(r.stock?.availableQuantity ?? 0),
|
||||
msg: 'Error',
|
||||
editValue: String(r.stock.availableQuantity),
|
||||
}
|
||||
: r,
|
||||
),
|
||||
@@ -261,57 +235,37 @@ export default function InventoryPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Filter + sort rows
|
||||
const filtered = (() => {
|
||||
let result = rows.filter((r) => {
|
||||
const qty = r.stock?.availableQuantity ?? 0;
|
||||
if (filter === 'in_stock') return qty >= 5;
|
||||
if (filter === 'low_stock') return qty > 0 && qty < 5;
|
||||
if (filter === 'out_of_stock') return qty === 0;
|
||||
if (filter === 'expiring') {
|
||||
return r.expirationDate !== null && daysUntil(r.expirationDate) <= 30;
|
||||
}
|
||||
if (filter === 'low_margin') {
|
||||
const margin = marginPercent(r.price);
|
||||
return margin !== null && margin < 30;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
if (filter === 'expiring') {
|
||||
result = [...result].sort(
|
||||
(a, b) => daysUntil(a.expirationDate ?? '') - daysUntil(b.expirationDate ?? ''),
|
||||
);
|
||||
} else if (filter === 'low_margin') {
|
||||
result = [...result].sort(
|
||||
(a, b) => (marginPercent(a.price) ?? 0) - (marginPercent(b.price) ?? 0),
|
||||
);
|
||||
}
|
||||
return result;
|
||||
})();
|
||||
|
||||
const inStockCount = rows.filter((r) => (r.stock?.availableQuantity ?? 0) >= 5).length;
|
||||
const lowStockCount = rows.filter((r) => {
|
||||
const q = r.stock?.availableQuantity ?? 0;
|
||||
return q > 0 && q < 5;
|
||||
}).length;
|
||||
const outOfStockCount = rows.filter((r) => (r.stock?.availableQuantity ?? 0) === 0).length;
|
||||
const page = Math.floor(offset / PAGE_SIZE) + 1;
|
||||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||||
const from = total === 0 ? 0 : offset + 1;
|
||||
const to = Math.min(offset + PAGE_SIZE, total);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Inventario</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{rows.length} productos</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{total} variantes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
{ label: 'En stock', count: inStockCount, cls: 'bg-green-50 border-green-100 text-green-700' },
|
||||
{ label: 'Stock bajo', count: lowStockCount, cls: 'bg-amber-50 border-amber-100 text-amber-700' },
|
||||
{ label: 'Sin stock', count: outOfStockCount, cls: 'bg-red-50 border-red-100 text-red-700' },
|
||||
{
|
||||
label: 'En stock',
|
||||
count: stats.inStock,
|
||||
cls: 'bg-green-50 border-green-100 text-green-700',
|
||||
},
|
||||
{
|
||||
label: 'Stock bajo',
|
||||
count: stats.lowStock,
|
||||
cls: 'bg-amber-50 border-amber-100 text-amber-700',
|
||||
},
|
||||
{
|
||||
label: 'Sin stock',
|
||||
count: stats.outOfStock,
|
||||
cls: 'bg-red-50 border-red-100 text-red-700',
|
||||
},
|
||||
].map(({ label, count, cls }) => (
|
||||
<div key={label} className={`p-4 rounded-xl border ${cls}`}>
|
||||
<p className="text-2xl font-bold">{count}</p>
|
||||
@@ -320,48 +274,50 @@ export default function InventoryPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search + filters */}
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="relative flex-1 max-w-sm min-w-52">
|
||||
<input
|
||||
type="search"
|
||||
id="admin-inventory-search"
|
||||
name="q"
|
||||
placeholder="Buscar por EAN o nombre..."
|
||||
placeholder="Buscar por nombre, SKU o EAN..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] focus:border-transparent outline-none"
|
||||
/>
|
||||
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="M21 21l-4.35-4.35" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{(Object.keys(FILTER_LABELS) as RowFilter[]).map((f) => (
|
||||
{(Object.keys(FILTER_LABELS) as RowFilter[]).map((currentFilter) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
key={currentFilter}
|
||||
onClick={() => setFilter(currentFilter)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
filter === f
|
||||
filter === currentFilter
|
||||
? 'bg-[#2D6A4F] text-white'
|
||||
: 'bg-white border border-gray-300 text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{FILTER_LABELS[f]}
|
||||
{FILTER_LABELS[currentFilter]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={load}
|
||||
className="text-sm text-[#2D6A4F] hover:underline"
|
||||
>
|
||||
<button onClick={() => void load()} className="text-sm text-[#2D6A4F] hover:underline">
|
||||
Recargar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-12 flex items-center justify-center gap-3 text-gray-400">
|
||||
@@ -369,58 +325,104 @@ export default function InventoryPage() {
|
||||
<span className="text-sm">Cargando inventario...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center">
|
||||
<div className="p-12 text-center">
|
||||
<p className="text-red-600 text-sm mb-3">{error}</p>
|
||||
<button onClick={load} className="text-sm text-[#2D6A4F] hover:underline">Reintentar</button>
|
||||
<button onClick={() => void load()} className="text-sm text-[#2D6A4F] hover:underline">
|
||||
Reintentar
|
||||
</button>
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
) : rows.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<p className="text-4xl mb-3">📦</p>
|
||||
<p className="text-gray-500 text-sm">No hay productos para este filtro</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200 text-left">
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">Producto</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">EAN</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">Caducidad</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">Margen</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">Stock</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">Estado</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">Tienda</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{filtered.map((row) => {
|
||||
const margin = marginPercent(row.price);
|
||||
return (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200 text-left">
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
Producto
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
SKU / EAN
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
Caducidad
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
Margen
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
Stock
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
Estado
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-gray-600 text-xs uppercase tracking-wide">
|
||||
Tienda
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{rows.map((row) => (
|
||||
<tr key={row.variant.id} className="hover:bg-gray-50/50 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<p className="text-sm font-medium text-gray-900">{row.productName}</p>
|
||||
<p className="text-xs text-gray-400">{row.variant.sku}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{row.editingEan ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={row.editEanValue}
|
||||
onChange={e => setRows(prev => prev.map(r => r.variant.id === row.variant.id ? { ...r, editEanValue: e.target.value } : r))}
|
||||
onBlur={() => handleSaveEan(row.variant.id, row.productId, row.editEanValue)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSaveEan(row.variant.id, row.productId, row.editEanValue); if (e.key === 'Escape') setRows(prev => prev.map(r => r.variant.id === row.variant.id ? { ...r, editingEan: false } : r)); }}
|
||||
disabled={row.savingEan}
|
||||
placeholder="—"
|
||||
className="w-full px-2 py-1 border border-[#2D6A4F] rounded text-xs focus:ring-1 focus:ring-[#2D6A4F] outline-none disabled:opacity-50"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setRows(prev => prev.map(r => r.variant.id === row.variant.id ? { ...r, editingEan: true, editEanValue: row.variant.ean ?? '' } : r))}
|
||||
title="Clic para editar EAN"
|
||||
className="font-mono text-xs text-gray-400 hover:text-[#2D6A4F] cursor-text text-left w-full truncate block disabled:opacity-50"
|
||||
>
|
||||
{row.variant.ean ?? '—'}
|
||||
</button>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
<p className="font-mono text-xs text-gray-500">SKU: {row.variant.sku}</p>
|
||||
{row.editingEan ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={row.editEanValue}
|
||||
onChange={(e) =>
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? { ...r, editEanValue: e.target.value }
|
||||
: r,
|
||||
),
|
||||
)
|
||||
}
|
||||
onBlur={() => void handleSaveEan(row.variant.id, row.productId, row.editEanValue)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
void handleSaveEan(row.variant.id, row.productId, row.editEanValue);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id ? { ...r, editingEan: false } : r,
|
||||
),
|
||||
);
|
||||
}
|
||||
}}
|
||||
disabled={row.savingEan}
|
||||
placeholder="EAN"
|
||||
className="w-full px-2 py-1 border border-[#2D6A4F] rounded text-xs focus:ring-1 focus:ring-[#2D6A4F] outline-none disabled:opacity-50"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={() =>
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? { ...r, editingEan: true, editEanValue: row.variant.ean ?? '' }
|
||||
: r,
|
||||
),
|
||||
)
|
||||
}
|
||||
className="font-mono text-xs text-gray-400 hover:text-[#2D6A4F] cursor-text text-left"
|
||||
title="Clic para editar EAN"
|
||||
>
|
||||
EAN: {row.variant.ean ?? '—'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{row.editingExp ? (
|
||||
@@ -437,15 +439,18 @@ export default function InventoryPage() {
|
||||
),
|
||||
)
|
||||
}
|
||||
onBlur={() => handleSaveExp(row.variant.id, row.productId, row.editExpValue)}
|
||||
onBlur={() => void handleSaveExp(row.variant.id, row.productId, row.editExpValue)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSaveExp(row.variant.id, row.productId, row.editExpValue);
|
||||
if (e.key === 'Escape')
|
||||
if (e.key === 'Enter') {
|
||||
void handleSaveExp(row.variant.id, row.productId, row.editExpValue);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id ? { ...r, editingExp: false } : r,
|
||||
),
|
||||
);
|
||||
}
|
||||
}}
|
||||
disabled={row.savingExp}
|
||||
className="px-2 py-1 border border-[#2D6A4F] rounded text-xs focus:ring-1 focus:ring-[#2D6A4F] outline-none disabled:opacity-50"
|
||||
@@ -467,78 +472,80 @@ export default function InventoryPage() {
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{margin === null ? (
|
||||
{row.marginPercent === null ? (
|
||||
<span className="text-gray-300">—</span>
|
||||
) : (
|
||||
<span className={`text-xs font-bold ${margin >= 30 ? 'text-green-600' : margin >= 10 ? 'text-amber-600' : 'text-red-600'}`}>
|
||||
{margin}%
|
||||
<span
|
||||
className={`text-xs font-bold ${
|
||||
row.marginPercent >= 30
|
||||
? 'text-green-600'
|
||||
: row.marginPercent >= 10
|
||||
? 'text-amber-600'
|
||||
: 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{row.marginPercent}%
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{row.loading ? (
|
||||
<span className="text-gray-300">—</span>
|
||||
) : row.editing ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
autoFocus
|
||||
type="number"
|
||||
min={0}
|
||||
value={row.editValue}
|
||||
onChange={(e) =>
|
||||
{row.editing ? (
|
||||
<input
|
||||
autoFocus
|
||||
type="number"
|
||||
min={0}
|
||||
value={row.editValue}
|
||||
onChange={(e) =>
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? { ...r, editValue: e.target.value }
|
||||
: r,
|
||||
),
|
||||
)
|
||||
}
|
||||
onBlur={() => void saveStockInline(row.variant.id, row.editValue)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
void saveStockInline(row.variant.id, row.editValue);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? { ...r, editValue: e.target.value }
|
||||
? {
|
||||
...r,
|
||||
editing: false,
|
||||
editValue: String(r.stock.availableQuantity),
|
||||
}
|
||||
: r,
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
onBlur={() => saveStockInline(row.variant.id, row.editValue)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') saveStockInline(row.variant.id, row.editValue);
|
||||
if (e.key === 'Escape')
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? {
|
||||
...r,
|
||||
editing: false,
|
||||
editValue: String(r.stock?.availableQuantity ?? 0),
|
||||
}
|
||||
: r,
|
||||
),
|
||||
);
|
||||
}}
|
||||
disabled={row.saving}
|
||||
className="w-20 px-2 py-1 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-[#2D6A4F] outline-none"
|
||||
/>
|
||||
{row.msg && (
|
||||
<span className={`text-xs ${row.msg === '✓' || row.msg === '✓ Guardado' ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{row.msg}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}}
|
||||
disabled={row.saving}
|
||||
className="w-20 px-2 py-1 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-[#2D6A4F] outline-none"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={() =>
|
||||
setRows((prev) =>
|
||||
prev.map((r) =>
|
||||
r.variant.id === row.variant.id
|
||||
? { ...r, editing: true, editValue: String(r.stock?.availableQuantity ?? 0) }
|
||||
? { ...r, editing: true, editValue: String(r.stock.availableQuantity) }
|
||||
: r,
|
||||
),
|
||||
)
|
||||
}
|
||||
className="font-medium text-gray-900 hover:text-[#2D6A4F] cursor-text"
|
||||
title="Clic para editar stock"
|
||||
className="font-medium text-gray-900 hover:text-[#2D6A4F] cursor-text disabled:opacity-50"
|
||||
>
|
||||
{row.stock?.availableQuantity ?? '—'}
|
||||
{row.stock.availableQuantity}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<StockBadge qty={row.stock?.availableQuantity ?? 0} />
|
||||
<StockBadge qty={row.stock.availableQuantity} />
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{row.productActive ? (
|
||||
@@ -550,8 +557,19 @@ export default function InventoryPage() {
|
||||
title="Ver en la tienda"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-green-50 text-green-600 transition-colors hover:bg-green-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2D6A4F]"
|
||||
>
|
||||
<svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
) : (
|
||||
@@ -559,11 +577,38 @@ export default function InventoryPage() {
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-gray-100 px-4 py-3 text-sm text-gray-500">
|
||||
<p>
|
||||
Mostrando {from}-{to} de {total}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOffset((current) => Math.max(0, current - PAGE_SIZE))}
|
||||
disabled={offset === 0}
|
||||
className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Anterior
|
||||
</button>
|
||||
<span>
|
||||
Página {page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOffset((current) => current + PAGE_SIZE)}
|
||||
disabled={offset + PAGE_SIZE >= total}
|
||||
className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Siguiente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -202,6 +202,24 @@ export const categoriesApi = {
|
||||
// ── Inventory ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export const inventoryApi = {
|
||||
listOverview: (params?: {
|
||||
q?: string;
|
||||
filter?: 'all' | 'in_stock' | 'low_stock' | 'out_of_stock' | 'expiring' | 'low_margin';
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
}) => {
|
||||
const sp = new URLSearchParams();
|
||||
if (params?.q) sp.set('q', params.q);
|
||||
if (params?.filter) sp.set('filter', params.filter);
|
||||
if (params?.limit) sp.set('limit', String(params.limit));
|
||||
if (params?.offset) sp.set('offset', String(params.offset));
|
||||
const qs = sp.toString();
|
||||
return api.get<{
|
||||
items: import('@/types').InventoryOverviewItem[];
|
||||
total: number;
|
||||
stats: import('@/types').InventoryOverviewStats;
|
||||
}>(`/api/inventory/admin/overview${qs ? `?${qs}` : ''}`);
|
||||
},
|
||||
getAvailability: (variantId: string) =>
|
||||
api.get<import('@/types').StockAvailability>(`/api/inventory/${variantId}/availability`),
|
||||
setStock: (id: string, quantity: number) =>
|
||||
|
||||
@@ -72,6 +72,25 @@ export interface StockItem {
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface InventoryOverviewItem {
|
||||
productId: string;
|
||||
productName: string;
|
||||
productSlug: string;
|
||||
productActive: boolean;
|
||||
expirationDate: string | null;
|
||||
variant: ProductVariant;
|
||||
stock: StockAvailability;
|
||||
price: VariantPrice | null;
|
||||
marginPercent: number | null;
|
||||
}
|
||||
|
||||
export interface InventoryOverviewStats {
|
||||
total: number;
|
||||
inStock: number;
|
||||
lowStock: number;
|
||||
outOfStock: number;
|
||||
}
|
||||
|
||||
// ── Orders ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export type OrderState =
|
||||
|
||||
Reference in New Issue
Block a user