import { useMemo, useState } from 'react';
import { Head, router } from '@inertiajs/react';
import { Search, PackageSearch, RotateCcw, Loader2 } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout';
import { FilterPill } from '@/Components/ui/filter-pill';
import { useToast } from '@/Components/Toast';
import { EXPIRED_FIRST_CELL, EXPIRED_ROW, ExpiredBadge, ExpiredNotice } from '@/Components/NetSuite/ExpiredMark';
/**
* Stock Barang Logistik — Netsuite Integration (legacy menu 442).
*
* The logistics desk's variant of Stock Barang. Same card grammar as its sibling (deliberately —
* the two screens sit next to each other in the menu), with the three legacy differences:
* · a WAREHOUSE picker, and (since 2026-08-03) a multi-select PRINCIPAL and PRODUCT too —
* the summary here is already a per-item table, so several brands/items need no relayout;
* · ANY ONE of warehouse / principal / product is enough to search;
* · no Order section, and the summary is a per-item TABLE instead of one strip — this screen
* can legitimately match a whole brand or a whole warehouse.
*
* ⚠️ Expect an empty result today: every NetSuite table behind this screen is empty except the
* two picker searches, and `getmasterwarehouse` (the Warehouse picker) is among the empty ones.
* That is a data gap, not a bug — module PRD §2.1.
*/
const CARD = 'rounded-2xl border border-border bg-card shadow-sm';
const TABLE = 'w-full border-separate border-spacing-0 text-foreground [&_thead_th]:whitespace-nowrap [&_thead_th]:bg-[color-mix(in_srgb,var(--color-secondary)_50%,var(--color-card))] [&_thead_th]:px-3 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground [&_thead_th:first-child]:rounded-l-full [&_thead_th:first-child]:pl-4 [&_thead_th:last-child]:rounded-r-full [&_thead_th:last-child]:pr-4 [&_th.num]:!text-right [&_tbody_td]:border-b [&_tbody_td]:border-border/60 [&_tbody_td:first-child]:pl-4 [&_tbody_td:last-child]:pr-4 [&_tbody_td]:px-3 [&_tbody_td]:py-[16px] [&_tbody_td]:align-top [&_tbody_td]:text-[12px] [&_tbody_td.num]:text-right [&_tbody_td.num]:tabular-nums [&_tbody_tr:last-child_td]:border-b-0 [&_tbody_tr:nth-child(even)_td]:bg-secondary/25 [&_tbody_tr:hover_td]:bg-secondary/60';
const TFOOT_LABEL = 'border-t border-border/60 px-3 py-3 text-[11px] font-medium text-muted-foreground';
const TFOOT_TOTAL = 'border-t border-border/60 px-3 py-3 text-right text-sm font-extrabold tabular-nums text-foreground';
const EMPTY_CELL = '!bg-transparent px-4 py-10 text-center text-[13px] text-muted-foreground';
const formatNumber = (num) => {
if (num === null || num === undefined) return '—';
return Number(num).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const formatDate = (value) => {
if (!value) return '—';
const [y, m, d] = String(value).split('-').map(Number);
if (!y || !m || !d) return '—';
return `${String(d).padStart(2, '0')}-${MONTHS[m - 1]}-${y}`;
};
const sumBy = (rows, key) => rows.reduce((acc, r) => acc + Number(r[key] || 0), 0);
export default function NetsuiteStockBarangLogistikIndex({
principals = [],
products = [],
warehouses = [],
filters = {},
stock = null,
}) {
const { show: showToast } = useToast();
const [principals_, setPrincipals] = useState(filters.principals ?? []);
const [products_, setProducts] = useState(filters.products ?? []);
const [picked, setPicked] = useState(filters.warehouses ?? []);
const [loading, setLoading] = useState(false);
const [activeTab, setActiveTab] = useState('stock');
const visibleProducts = useMemo(
() => (principals_.length ? products.filter((p) => principals_.includes(p.manufacturer)) : products),
[products, principals_],
);
// Narrowing the brands drops any product that no longer belongs to one of them — otherwise a
// stale pick keeps filtering the search while its name is no longer visible in the picker.
const pickPrincipals = (values) => {
setPrincipals(values);
if (values.length) {
setProducts((prev) => prev.filter(
(id) => products.some((p) => p.internalid === id && values.includes(p.manufacturer)),
));
}
};
// The whole point of this variant: any ONE of the three is enough.
const canSearch = products_.length > 0 || principals_.length > 0 || picked.length > 0;
const resetFilters = () => {
setPrincipals([]);
setProducts([]);
setPicked([]);
};
const checkStock = () => {
if (!canSearch) return;
router.get(
route('netsuite.stock-barang-logistik'),
{
principals: principals_.length ? principals_ : undefined,
products: products_.length ? products_ : undefined,
warehouses: picked.length ? picked : undefined,
},
{
only: ['stock', 'filters'],
preserveState: true,
preserveScroll: true,
replace: true,
onStart: () => setLoading(true),
onFinish: () => setLoading(false),
onError: () => showToast('Please check the form and try again.', 'error'),
},
);
};
const unit = stock?.unit ?? 'Kg';
const summary = stock?.summary ?? [];
const lots = stock?.lots ?? [];
const incoming = stock?.incoming ?? [];
const inTransit = stock?.inTransit ?? [];
const isEmptyResult = stock && !summary.length && !lots.length && !incoming.length && !inTransit.length;
const hasExpired = summary.some((r) => r.expiredQty > 0);
// Counted up front so the banner can state it before the user scrolls into the lot table.
const expiredLots = lots.filter((l) => l.expired).length;
const expiredQty = summary.reduce((sum, r) => sum + (r.expiredQty || 0), 0);
const tabBtn = (id, label, count) => (
);
const emptyRow = (cols) => (
|
No data
|
);
return (
<>