import {
AssignmentTurnedIn,
CheckCircle,
Close,
FolderOpen,
Inventory2,
Lock,
Print,
Search,
Undo,
Warehouse,
} from "@mui/icons-material";
import {
Alert,
Autocomplete,
Box,
Button,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
FormControl,
FormControlLabel,
IconButton,
InputAdornment,
InputLabel,
MenuItem,
Paper,
Select,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Tab,
Tabs,
Switch,
ToggleButton,
ToggleButtonGroup,
Tooltip,
Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import {
cerrarSesion,
cerrarZona,
crearSesion,
getProductosZona,
getZonasAplicadas,
listarSesiones,
progresoPorZona,
registrarConteo,
eliminarConteo,
getProductosNoContados,
} from "../../api/inventario-fisico.service";
import { getCategorias } from "../../api/categorias.service";
import { getMarcas } from "../../api/marcas.service";
import { getDepositos } from "../../api";
import { getErrorApi } from "../../utils/errorUtils";
import { escapeHtml } from "../_standards";
// ── Helpers ───────────────────────────────────────────────────────────────
function getPadreId(c) {
return c.padre_id ?? c.padre?.id ?? null;
}
function buildCategoriasJerarquicas(categorias) {
const padres = categorias.filter((c) => !getPadreId(c));
const hijas = categorias.filter((c) => !!getPadreId(c));
const result = [];
for (const padre of padres) {
const children = hijas.filter((h) => getPadreId(h) === padre.id);
result.push({ ...padre, _esParent: true, _childrenIds: children.map((c) => c.id) });
for (const child of children) {
result.push({ ...child, _esParent: false, _childrenIds: [] });
}
}
const sinPadre = hijas.filter((h) => !padres.find((p) => p.id === getPadreId(h)));
for (const c of sinPadre) result.push({ ...c, _esParent: false, _childrenIds: [] });
return result;
}
function imprimirPlanilla(deposito, categoria, productos) {
const win = window.open("", "_blank");
const fecha = new Date().toLocaleDateString("es-PY", { day: "2-digit", month: "2-digit", year: "numeric" });
const rows = productos
.map((p, i) => {
const stock = p.stock_sistema ?? 0;
const contado = p.contado ? p.cantidad_contada : null;
const diff = contado !== null ? contado - stock : null;
const diffStr = diff !== null
? ` 0 ? "#1565c0" : "red"};font-weight:600">${diff > 0 ? "+" : ""}${diff}`
: "";
return `
| ${i + 1} |
${escapeHtml(p.cod_producto || "-")} |
${escapeHtml(p.descripcion)} |
${stock} |
${contado !== null ? contado : " "} |
${diffStr} |
`;
})
.join("");
win.document.write(`
Planilla Inventario
Planilla de Inventario Físico
Depósito: ${escapeHtml(deposito)} |
Categoría: ${escapeHtml(categoria || "Todas")} |
Fecha: ${escapeHtml(fecha)} |
Responsable: _______________________
| # |
Código |
Descripción |
Stock sistema |
Cant. contada |
Diferencia |
${rows}
`);
win.document.close();
setTimeout(() => win.print(), 300);
}
// ── Progreso de zonas ─────────────────────────────────────────────────────
function ProgresoZonas({ sesion }) {
const { data: zonas = [], isLoading } = useQuery({
queryKey: ["inventario-progreso", sesion.id],
queryFn: () => progresoPorZona(sesion.id),
refetchInterval: 15000, // refresca cada 15s automáticamente
});
const totalContados = zonas.reduce((s, z) => s + z.productos_contados, 0);
return (
Progreso de zonas
{totalContados > 0 && (
)}
{isLoading ? (
) : zonas.length === 0 ? (
Sin conteos registrados aún
) : (
{zonas.map((z, i) => (
{z.deposito}
{z.categoria}
))}
)}
);
}
// ── Panel de sesiones ─────────────────────────────────────────────────────
function SesionesPanel({ onSeleccionar, sesionActiva }) {
const qc = useQueryClient();
const [nombre, setNombre] = useState("");
const [confirmCerrar, setConfirmCerrar] = useState(null);
const { data: sesiones = [], isLoading } = useQuery({
queryKey: ["inventario-sesiones"],
queryFn: listarSesiones,
});
const crearMut = useMutation({
mutationFn: () => crearSesion(nombre),
onSuccess: () => {
toast.success("Sesión creada");
setNombre("");
qc.invalidateQueries({ queryKey: ["inventario-sesiones"] });
},
onError: (e) => toast.error(getErrorApi(e)),
});
const cerrarMut = useMutation({
mutationFn: (id) => cerrarSesion(id),
onSuccess: () => {
toast.success("Sesión cerrada — no se pueden agregar más conteos");
setConfirmCerrar(null);
qc.invalidateQueries({ queryKey: ["inventario-sesiones"] });
},
onError: (e) => toast.error(getErrorApi(e)),
});
return (
Nueva sesión
setNombre(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && nombre && crearMut.mutate()}
/>
Sesiones
{isLoading ? (
) : sesiones.length === 0 ? (
No hay sesiones
) : (
sesiones.map((s) => (
s.estado === "abierto" && onSeleccionar(s)}
>
{s.estado === "abierto" ? (
) : (
)}
{s.nombre}
{new Date(s.created_at).toLocaleDateString("es-PY")} —{" "}
{s._count?.conteos ?? 0} productos contados
{s.estado === "abierto" && (
)}
))
)}
);
}
// ── Panel de conteo ───────────────────────────────────────────────────────
function ConteoPanel({ sesion }) {
const qc = useQueryClient();
const [depositoId, setDepositoId] = useState("");
const [categoriasSeleccionadas, setCategoriasSeleccionadas] = useState([]);
const [marcasSeleccionadas, setMarcasSeleccionadas] = useState([]);
const [filtroConteo, setFiltroConteo] = useState("todos"); // 'todos' | 'contados' | 'pendientes'
const [busqueda, setBusqueda] = useState("");
const [debouncedBusqueda, setDebouncedBusqueda] = useState("");
const [cantidades, setCantidades] = useState({});
const [confirmAjuste, setConfirmAjuste] = useState(false);
const [mantenerStockNoContados, setMantenerStockNoContados] = useState(false);
const [skip, setSkip] = useState(0);
const take = 50;
useEffect(() => {
const t = setTimeout(() => setDebouncedBusqueda(busqueda), 350);
return () => clearTimeout(t);
}, [busqueda]);
const categoriaId = categoriasSeleccionadas.map((c) => c.id).join(",");
const marcaId = marcasSeleccionadas.map((m) => m.id).join(",");
const { data: depositosData = [] } = useQuery({
queryKey: ["depositos"],
queryFn: () => getDepositos(),
select: (d) => d?.data ?? d ?? [],
});
const { data: categoriasData } = useQuery({
queryKey: ["categorias-all"],
queryFn: () => getCategorias(1, 500),
});
const categoriasJerarquicas = useMemo(
() => buildCategoriasJerarquicas(categoriasData?.data ?? []),
[categoriasData]
);
const { data: marcasData } = useQuery({
queryKey: ["marcas-all"],
queryFn: () => getMarcas(),
select: (d) => (d?.data ?? d ?? []).filter((m) => m.active !== false),
});
const { data: zonaData, isLoading: loadingProductos } = useQuery({
queryKey: ["productos-zona", sesion.id, depositoId, categoriaId, marcaId, debouncedBusqueda, skip, filtroConteo],
queryFn: () =>
getProductosZona({
sesionId: sesion.id,
depositoId: depositoId || undefined,
categoriaId: categoriaId || undefined,
marcaId: marcaId || undefined,
busqueda: debouncedBusqueda || undefined,
filtro: filtroConteo !== "todos" ? filtroConteo : undefined,
skip,
take,
}),
});
const productos = zonaData?.data ?? [];
const total = zonaData?.total ?? 0;
// Historial de aplicaciones de ajuste por zona (append-only).
// Lo usamos para avisar al operador si la zona actual ya fue ajustada.
const { data: zonasAplicadas = [] } = useQuery({
queryKey: ["inventario-zonas-aplicadas", sesion.id],
queryFn: () => getZonasAplicadas(sesion.id),
enabled: !!sesion.id,
});
// Aplicaciones previas que matchean depósito + categoría seleccionados ahora.
// categoria_id null en BD = "todas las categorías" — debe coincidir literalmente.
const aplicacionesZonaActual = useMemo(() => {
if (!depositoId) return [];
const catActual = categoriaId || null;
return zonasAplicadas.filter(
(z) => z.deposito_id === depositoId && (z.categoria_id ?? null) === catActual,
);
}, [zonasAplicadas, depositoId, categoriaId]);
const yaAplicada = aplicacionesZonaActual.length > 0;
const ultimaAplicacion = aplicacionesZonaActual[0]; // ya viene desc por aplicada_at
const guardarMut = useMutation({
mutationFn: ({ productoId, cantidad, catId }) =>
registrarConteo(sesion.id, {
deposito_id: depositoId,
categoria_id: catId || undefined,
producto_id: productoId,
cantidad_contada: parseFloat(cantidad),
}),
onSuccess: () => {
qc.invalidateQueries({ queryKey: ["productos-zona"] });
qc.invalidateQueries({ queryKey: ["inventario-sesiones"] });
qc.invalidateQueries({ queryKey: ["inventario-progreso"] });
},
onError: (e) => toast.error(getErrorApi(e)),
});
const deshacerMut = useMutation({
mutationFn: (productoId) => eliminarConteo(sesion.id, productoId, depositoId),
onSuccess: (_, productoId) => {
setCantidades((prev) => { const n = { ...prev }; delete n[productoId]; return n; });
qc.invalidateQueries({ queryKey: ["productos-zona"] });
qc.invalidateQueries({ queryKey: ["inventario-progreso"] });
toast.success("Conteo eliminado");
},
onError: (e) => toast.error(getErrorApi(e)),
});
const ajusteMut = useMutation({
mutationFn: () =>
cerrarZona(sesion.id, {
deposito_id: depositoId,
categoria_id: categoriaId || undefined,
mantener_stock_no_contados: mantenerStockNoContados,
}),
onSuccess: (res) => {
toast.success(
mantenerStockNoContados
? `Ajuste aplicado: ${res.contados} productos contados actualizados. ${res.en_cero} sin contar (stock conservado). Total: ${res.total_productos}.`
: `Ajuste aplicado: ${res.contados} con stock real, ${res.en_cero} en cero. Total: ${res.total_productos} productos.`
);
setConfirmAjuste(false);
setCantidades({});
qc.invalidateQueries({ queryKey: ["productos-zona"] });
qc.invalidateQueries({ queryKey: ["inventario-sesiones"] });
qc.invalidateQueries({ queryKey: ["inventario-progreso"] });
qc.invalidateQueries({ queryKey: ["inventario-zonas-aplicadas", sesion.id] });
},
onError: (e) => toast.error(getErrorApi(e)),
});
// Auto-guardado al salir del campo (onBlur)
const handleBlurGuardar = useCallback(
(p, val) => {
if (val === "" || val === undefined) return;
if (!depositoId) { toast.warning("Seleccioná un depósito para registrar el conteo"); return; }
if (p.contado && String(p.cantidad_contada) === val) return; // sin cambio
guardarMut.mutate({
productoId: p.id,
cantidad: val,
catId: p.categoria_id || categoriaId,
});
},
[depositoId, categoriaId, guardarMut]
);
const deposito = depositosData.find((d) => d.id === depositoId);
return (
{/* Barra de filtros */}
Sesión: {sesion.nombre}
{/* Depósito */}
Depósito
{/* Categoría — multi-select con jerarquía */}
o.descripcion ?? ""}
value={categoriasSeleccionadas}
onChange={(_, newValue, reason, details) => {
const opt = details?.option;
let next = newValue;
if (opt && opt._esParent && opt._childrenIds?.length > 0) {
const adding = newValue.some((v) => v.id === opt.id);
if (adding) {
// Agregar padre + todos sus hijos
const hijos = categoriasJerarquicas.filter((c) => opt._childrenIds.includes(c.id));
const merged = [...newValue];
for (const h of hijos) {
if (!merged.find((m) => m.id === h.id)) merged.push(h);
}
next = merged;
} else {
// Quitar padre + todos sus hijos
const removeIds = new Set([opt.id, ...opt._childrenIds]);
next = newValue.filter((v) => !removeIds.has(v.id));
}
}
setCategoriasSeleccionadas(next);
setSkip(0);
setCantidades({});
}}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderOption={(props, o, { selected }) => {
const { key, ...rest } = props;
return (
0 &&
!selected &&
o._childrenIds.some((id) => categoriasSeleccionadas.some((c) => c.id === id))
}
sx={{ mr: 0.5, p: 0.5 }}
/>
{o._esParent ? (
{o.descripcion}
) : (
└ {o.descripcion}
)}
);
}}
renderTags={(value, getTagProps) => {
if (value.length === 0) return null;
if (value.length > 2) {
return (
{ setCategoriasSeleccionadas([]); setSkip(0); setCantidades({}); }}
/>
);
}
return value.map((opt, idx) => (
));
}}
renderInput={(params) => (
)}
sx={{ minWidth: 240 }}
clearOnEscape
noOptionsText="Sin resultados"
limitTags={2}
/>
{/* Marca — multi-select */}
o.descripcion ?? ""}
value={marcasSeleccionadas}
onChange={(_, newValue) => {
setMarcasSeleccionadas(newValue);
setSkip(0);
setCantidades({});
}}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderOption={(props, o, { selected }) => {
const { key, ...rest } = props;
return (
{o.descripcion}
);
}}
renderTags={(value, getTagProps) => {
if (value.length > 2) {
return (
{ setMarcasSeleccionadas([]); setSkip(0); setCantidades({}); }}
/>
);
}
return value.map((opt, idx) => (
));
}}
renderInput={(params) => (
)}
sx={{ minWidth: 200 }}
clearOnEscape
noOptionsText="Sin resultados"
limitTags={2}
/>
{/* Buscador — ocupa el espacio restante */}
{
setBusqueda(e.target.value);
setSkip(0); // resetea paginación inmediatamente al escribir
}}
sx={{ flex: 1, minWidth: 220 }}
InputProps={{
startAdornment: (
{busqueda !== debouncedBusqueda ? (
) : (
)}
),
}}
/>
}
disabled={!depositoId || productos.length === 0}
onClick={() =>
imprimirPlanilla(
deposito?.descripcion ?? "Todos los depósitos",
categoriasSeleccionadas.map((c) => c.descripcion).join(", ") || undefined,
productos
)
}
>
Imprimir planilla
}
disabled={!depositoId}
onClick={() => setConfirmAjuste(true)}
>
{yaAplicada ? "Re-aplicar ajuste de zona" : "Aplicar ajuste de zona"}
{!depositoId && (
Modo visualización — seleccioná un depósito para poder registrar conteos.
)}
{loadingProductos ? (
) : (
<>
{total} productos en esta zona
{ if (v) { setFiltroConteo(v); setSkip(0); } }}
sx={{ height: 28 }}
>
Todos
Contados
Pendientes
{skip + 1}–{Math.min(skip + take, total)} de {total}
Código
Descripción
Marca
Estado
Stock
Cant. contada
Dif.
{productos.map((p) => {
const yaContado = p.contado;
const val =
cantidades[p.id] !== undefined
? cantidades[p.id]
: yaContado
? String(p.cantidad_contada)
: "";
const contadoNum = val !== "" ? parseFloat(val) : null;
const stockSistema = p.stock_sistema ?? 0;
const diff = contadoNum !== null ? contadoNum - stockSistema : null;
return (
{p.cod_producto || "—"}
{p.descripcion}
{p.marcas?.descripcion ?? "—"}
{yaContado ? (
{depositoId && (
deshacerMut.mutate(p.id)}
sx={{ p: 0.25 }}
>
)}
) : (
)}
{stockSistema}
setCantidades((prev) => ({ ...prev, [p.id]: e.target.value }))
}
onBlur={() => handleBlurGuardar(p, val)}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleBlurGuardar(p, val);
const inputs = document.querySelectorAll("input[type=number]");
const idx = Array.from(inputs).indexOf(e.target);
if (idx >= 0 && inputs[idx + 1]) inputs[idx + 1].focus();
}
}}
inputProps={{ min: 0, step: 1, style: { textAlign: "right" } }}
sx={{ width: 120 }}
/>
{diff !== null && (
0 ? "primary.main" : "error.main"}
>
{diff > 0 ? `+${diff}` : diff}
)}
);
})}
)}
{/* Diálogo aplicar ajuste de zona */}
);
}
// ── Tab principal ─────────────────────────────────────────────────────────
// ── Panel de productos NO contados ────────────────────────────────────────
function FaltantesPanel({ sesion }) {
const [depositoId, setDepositoId] = useState("");
const [categoriasSeleccionadas, setCategoriasSeleccionadas] = useState([]);
const [busqueda, setBusqueda] = useState("");
const [debouncedBusqueda, setDebouncedBusqueda] = useState("");
const [skip, setSkip] = useState(0);
const [imprimiendo, setImprimiendo] = useState(false);
const take = 50;
useEffect(() => {
const t = setTimeout(() => setDebouncedBusqueda(busqueda), 350);
return () => clearTimeout(t);
}, [busqueda]);
const { data: depositosData = [] } = useQuery({
queryKey: ["depositos"],
queryFn: () => getDepositos(),
select: (d) => d?.data ?? d ?? [],
});
const { data: categoriasData } = useQuery({
queryKey: ["categorias-all"],
queryFn: () => getCategorias(1, 500),
});
const categoriasJerarquicas = useMemo(
() => buildCategoriasJerarquicas(categoriasData?.data ?? []),
[categoriasData]
);
const categoriaId = categoriasSeleccionadas.map((c) => c.id).join(",");
const { data, isLoading } = useQuery({
queryKey: ["no-contados", sesion.id, depositoId, categoriaId, debouncedBusqueda, skip],
queryFn: () =>
getProductosNoContados(sesion.id, {
depositoId: depositoId || undefined,
categoriaId: categoriaId || undefined,
busqueda: debouncedBusqueda || undefined,
skip,
take,
}),
});
const productos = data?.data ?? [];
const total = data?.total ?? 0;
const totalPages = Math.ceil(total / take);
const page = Math.floor(skip / take) + 1;
const handleImprimirPdf = async () => {
setImprimiendo(true);
try {
let todos = [];
let s = 0;
const t = 500;
while (true) {
const r = await getProductosNoContados(sesion.id, {
depositoId: depositoId || undefined,
categoriaId: categoriaId || undefined,
busqueda: debouncedBusqueda || undefined,
skip: s,
take: t,
});
todos = [...todos, ...(r?.data ?? [])];
if (todos.length >= (r?.total ?? 0)) break;
s += t;
}
const depositoLabel = depositosData.find((d) => d.id === depositoId)?.descripcion ?? "Todos los depósitos";
const categLabel = categoriasSeleccionadas.length
? categoriasSeleccionadas.map((c) => c.descripcion).join(", ")
: "Todas las categorías";
const fecha = new Date().toLocaleDateString("es-PY", { day: "2-digit", month: "2-digit", year: "numeric" });
const filas = todos
.map(
(p, i) => `
| ${i + 1} |
${p.cod_producto ?? ""} |
${p.descripcion ?? ""} |
${p.categoria ?? ""} |
${p.stock_sistema ?? 0} |
`
)
.join("");
const html = `
Productos no contados — ${sesion.nombre}
Inventario Físico — Productos No Contados
Sesión: ${sesion.nombre} |
Depósito: ${depositoLabel} |
Categoría: ${categLabel} |
Fecha: ${fecha}
| # |
Código |
Descripción |
Categoría |
Stock sistema |
${filas}
| Total no contados: ${todos.length} productos |
Stock acumulado: ${todos.reduce((s, p) => s + (p.stock_sistema ?? 0), 0)} |
`;
const win = window.open("", "_blank");
win.document.write(html);
win.document.close();
win.focus();
setTimeout(() => win.print(), 400);
} catch (e) {
toast.error("Error al generar el PDF");
} finally {
setImprimiendo(false);
}
};
return (
{/* Barra de filtros */}
Depósito
o.descripcion ?? ""}
value={categoriasSeleccionadas}
onChange={(_, newValue, _reason, details) => {
const opt = details?.option;
let next = newValue;
if (opt?._esParent && opt._childrenIds?.length > 0) {
const adding = newValue.some((v) => v.id === opt.id);
if (adding) {
const hijos = categoriasJerarquicas.filter((c) => opt._childrenIds.includes(c.id));
const merged = [...newValue];
for (const h of hijos) { if (!merged.find((m) => m.id === h.id)) merged.push(h); }
next = merged;
} else {
const removeIds = new Set([opt.id, ...opt._childrenIds]);
next = newValue.filter((v) => !removeIds.has(v.id));
}
}
setCategoriasSeleccionadas(next);
setSkip(0);
}}
isOptionEqualToValue={(a, b) => a.id === b.id}
renderOption={(props, o, { selected }) => {
const { key, ...rest } = props;
return (
{o._esParent
? {o.descripcion}
: └ {o.descripcion}}
);
}}
renderTags={(value) => value.length > 2
? { setCategoriasSeleccionadas([]); setSkip(0); }} />
: value.map((opt, idx) => { setCategoriasSeleccionadas((prev) => prev.filter((c) => c.id !== opt.id)); setSkip(0); }} />)
}
renderInput={(params) => (
)}
sx={{ minWidth: 240 }}
noOptionsText="Sin resultados"
limitTags={2}
/>
{ setBusqueda(e.target.value); setSkip(0); }}
sx={{ flex: 1, minWidth: 200 }}
slotProps={{ input: { startAdornment: } }}
/>
{/* Contador + botón imprimir */}
0 ? "warning" : "success"}
size="small"
icon={}
/>
{total === 0 && !isLoading && (
¡Todos los productos fueron contados!
)}
}
onClick={handleImprimirPdf}
disabled={imprimiendo || isLoading || total === 0}
>
{imprimiendo ? "Cargando..." : "Imprimir PDF"}
{/* Tabla */}
Código
Descripción
Categoría
{isLoading ? (
) : productos.length === 0 ? (
{total === 0 ? "Sin productos faltantes" : "Sin resultados para la búsqueda"}
) : (
productos.map((p) => (
{p.cod_producto}
{p.descripcion}
))
)}
{/* Paginación */}
{totalPages > 1 && (
{page} / {totalPages}
)}
);
}
export function InventarioFisicoTab() {
const [sesionActiva, setSesionActiva] = useState(null);
const [tabActivo, setTabActivo] = useState(0);
return (
Inventario Físico
{ setSesionActiva(s); setTabActivo(0); }} sesionActiva={sesionActiva} />
{sesionActiva && (
)}
{sesionActiva ? (
<>
setTabActivo(v)}
sx={{ mb: 2, borderBottom: 1, borderColor: "divider" }}
variant="scrollable"
>
} iconPosition="start" />
}
iconPosition="start"
sx={{ color: tabActivo === 1 ? "warning.main" : undefined }}
/>
{tabActivo === 0 && }
{tabActivo === 1 && }
) : (
Seleccioná una sesión abierta para empezar a contar
)}
);
}