import { useEffect, useMemo, useRef, useState } from 'react'; import { TOOLBAR_GEAR, TOOLBAR_FILTERS } from '@/Components/Table'; import { router } from '@inertiajs/react'; import { RotateCcw, Search, Settings } from 'lucide-react'; import AppLayout from '@/Layouts/AppLayout'; import { cn } from '@/lib/utils'; import { ListFooter } from '@/Components/Table/ListFooter'; import { StatusBadge } from '@/Components/Proto/UI/StatusBadge'; import { CustomizeColumnsModal } from '@/Components/Proto/Modals/CustomizeColumnsModal'; import { statusTone } from '@/lib/sampleOrderStatusTones'; import { SelectPill } from '@/Components/MenuQuotations/QuotationListPage/QuotationListPills'; import { useResizableColumns, ColumnResizeGrip } from '@/lib/useResizableColumns'; import { SortButton } from '@/lib/ClientSort'; import { useServerSortNav } from '@/lib/ServerSort'; // Sortable columns — id → row value (alphabetical A→Z on first click). // Columns the SERVER can order by — must mirror the controller's SORT_COLUMNS. // A column not listed here renders a plain label instead of a dead sort button. const SORTABLE = new Set(['id', 'company', 'status', 'division', 'delivery', 'tanggal', 'sales', 'creator', 'awb', 'lines', 'comment']); // ───────────────────────────────────────────────────────────────────────────── // Feedback queue (PRD §6.13 / BR-23). Lists the actor's status-8 (Sample Received) // sample orders awaiting feedback — the creator-only scope (UserIDInput = me; // legacy-literal, a deliberate divergence from Good Issue's mine-or-admin) is // enforced server-side. Click a row to open the feedback screen. UNWIRED until the // controller + routes land: rendered by SampleOrderController@feedback via // Inertia::render('MenuSampleOrders/Feedback/Index', [...]) and expects these route // names (mirrors the Good Issue queue): // sample-orders.feedback (GET this queue) // sample-orders.feedback.show (GET the feedback screen for {id}) // Props (mirror the Good Issue / Surat Jalan queues): // sampleOrders: Laravel paginator → { data: [{ id, company, division, delivery, // tanggal, sales, creator, awb, lines, comment }], current_page, // last_page, per_page, from, to, total } (lines = # status-5 items) // filters: { search, division, sales, per_page } // filterOptions:{ divisions: [], sales: [] } // ───────────────────────────────────────────────────────────────────────────── const FILTER_PILLS = [ { key: 'division', label: 'Division', opt: 'divisions' }, { key: 'sales', label: 'Sales', opt: 'sales' }, ]; // Column catalogue — `groupId` buckets the column inside the Customize Columns modal // (hide + reorder); SO No stays `required` as the row anchor. Order here = default order. const COLUMN_GROUPS = [ { id: 'identifiers', label: 'Identifiers' }, { id: 'metadata', label: 'Metadata' }, { id: 'order', label: 'Order & Dates' }, ]; const COLUMN_DEFS = [ { id: 'id', label: 'SO No', groupId: 'identifiers', required: true }, { id: 'company', label: 'Company', groupId: 'identifiers' }, { id: 'status', label: 'Status', groupId: 'identifiers' }, { id: 'division', label: 'Division', groupId: 'metadata' }, { id: 'delivery', label: 'Delivery', groupId: 'order' }, { id: 'tanggal', label: 'Date', groupId: 'order' }, { id: 'sales', label: 'Sales', groupId: 'metadata' }, { id: 'creator', label: 'Creator', groupId: 'metadata' }, { id: 'awb', label: 'AWB', groupId: 'order' }, { id: 'lines', label: 'Items', numeric: true, groupId: 'order' }, { id: 'comment', label: 'Comment', groupId: 'order' }, ]; const COL_W = { id: 110, company: 220, status: 140, division: 130, delivery: 130, tanggal: 130, sales: 130, creator: 130, awb: 150, lines: 110, comment: 220, }; const COL_W_FALLBACK = 150; // Per-column cell renderer — markup identical to the previous hardcoded s. function renderCell(so, colId) { switch (colId) { case 'id': return #{so.id}; case 'company': return so.company ? {so.company} : '—'; case 'status': return so.status ? {so.status} : '—'; case 'division': return so.division ? {so.division} : '—'; case 'delivery': return so.delivery ? {so.delivery} : '—'; case 'tanggal': return so.tanggal ? {so.tanggal} : '—'; case 'sales': return so.sales || '—'; case 'creator': return so.creator || '—'; case 'awb': return so.awb ? {so.awb} : '—'; case 'lines': return so.lines; case 'comment': return so.comment ? {so.comment} : '—'; default: return null; } } // Column state = ordered [{id, visible}] — order AND visibility both persist. const defaultColumnState = () => COLUMN_DEFS.map((d) => ({ id: d.id, visible: true })); function loadColumnState(storageKey) { try { const raw = localStorage.getItem(storageKey); if (!raw) return defaultColumnState(); const parsed = JSON.parse(raw).filter((c) => c && COLUMN_DEFS.some((d) => d.id === c.id)); COLUMN_DEFS.forEach((d, i) => { if (!parsed.some((c) => c.id === d.id)) parsed.splice(i, 0, { id: d.id, visible: true }); }); return parsed; } catch { return defaultColumnState(); } } const EMPTY_PAGINATOR = { data: [], current_page: 1, last_page: 1, per_page: 10, from: 0, to: 0, total: 0 }; export default function SampleOrderFeedbackIndex({ sampleOrders = EMPTY_PAGINATOR, filters = {}, filterOptions = {} }) { // Server-side sort: the DATABASE orders the whole table, not the browser the page. const { sortKey, sortDir, toggleSort } = useServerSortNav('sample-orders.feedback', filters); const rows = sampleOrders.data ?? []; const pageSize = filters.per_page || 10; const currentPage = sampleOrders.current_page; const totalPages = sampleOrders.last_page; const [quickQuery, setQuickQuery] = useState(filters.search || ''); const [openPill, setOpenPill] = useState(null); const filterBarRef = useRef(null); const searchDebounce = useRef(null); // One pill open at a time; click outside closes it. useEffect(() => { if (!openPill) return undefined; const onDoc = (e) => { if (filterBarRef.current && !filterBarRef.current.contains(e.target)) setOpenPill(null); }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [openPill]); const buildParams = (overrides = {}) => { const params = {}; const search = overrides.search ?? quickQuery; const perPage = overrides.per_page ?? pageSize; const page = overrides.page ?? currentPage; if (search) params.search = search; if (perPage && Number(perPage) !== 10) params.per_page = perPage; if (page && Number(page) !== 1) params.page = page; FILTER_PILLS.forEach(({ key }) => { const v = overrides[key] ?? filters[key] ?? ''; if (v) params[key] = v; }); return params; }; // only: — see SampleOrders/List.jsx; `filters` drives the page size. const go = (overrides) => router.get(route('sample-orders.feedback'), buildParams(overrides), { only: ['sampleOrders', 'filters'], preserveState: true, preserveScroll: true, replace: true, }); const onSearchChange = (val) => { setQuickQuery(val); clearTimeout(searchDebounce.current); searchDebounce.current = setTimeout(() => go({ search: val, page: 1 }), 300); }; const setFilter = (key, value) => { setOpenPill(null); go({ [key]: value, page: 1 }); }; const activeFilterCount = FILTER_PILLS.reduce((n, { key }) => n + (filters[key] ? 1 : 0), 0); const clearFilters = () => { setOpenPill(null); go(Object.fromEntries([...FILTER_PILLS.map(({ key }) => [key, '']), ['page', 1]])); }; // Resizable columns — drag a header's right edge to resize. // Column show/hide + reorder, persisted per user (same grammar as View Details). const colDefById = useMemo(() => new Map(COLUMN_DEFS.map((d) => [d.id, d])), []); const storageKey = 'sampleOrderFeedbackColumns_v1'; const [columnState, setColumnState] = useState(() => loadColumnState(storageKey)); const [customizeOpen, setCustomizeOpen] = useState(false); const visibleCols = useMemo(() => columnState.filter((c) => c.visible).map((c) => colDefById.get(c.id)).filter(Boolean), [columnState, colDefById]); const isDefaultOrder = columnState.length === COLUMN_DEFS.length && columnState.every((c, i) => c.id === COLUMN_DEFS[i].id && c.visible); const persist = (next) => { try { localStorage.setItem(storageKey, JSON.stringify(next)); } catch { /* ignore */ } }; const handleApplyColumns = (next) => { setColumnState(next); persist(next); }; // Returns the default state so the modal's Reset can seed its draft with it. const resetCols = () => { const next = defaultColumnState(); setColumnState(next); try { localStorage.removeItem(storageKey); } catch { /* ignore */ } return next; }; // Header drag-to-reorder — drop one column title onto another; splices the same // columnState order and persists it (mirrors LwrListPage). const [dragColId, setDragColId] = useState(null); const [dragOverColId, setDragOverColId] = useState(null); const reorderCols = (fromId, toId) => { if (!fromId || !toId || fromId === toId) return; setColumnState((prev) => { const fi = prev.findIndex((c) => c.id === fromId); const ti = prev.findIndex((c) => c.id === toId); if (fi < 0 || ti < 0) return prev; const next = [...prev]; const [moved] = next.splice(fi, 1); next.splice(ti, 0, moved); persist(next); return next; }); }; const { widthOf, startResize, resizingId, resizeRef } = useResizableColumns(COL_W, COL_W_FALLBACK); const tableWidth = useMemo(() => visibleCols.reduce((s, c) => s + widthOf(c.id), 0), [visibleCols, widthOf]); return (

Sample Order Feedback

Feedback — Sample Order

{/* Toolbar: search far left, filter pills, count on the right. */}
{/* ⚙ on line ONE: DOM position, not `order` — a flex line is filled in order sequence and TOOLBAR_FILTERS is w-full. See TOOLBAR_ROW in Components/Table. */}
{FILTER_PILLS.map(({ key, label, opt }) => ( setOpenPill(openPill === key ? null : key)} onPick={(v) => setFilter(key, v)} /> ))} {activeFilterCount > 0 && ( )}
{!isDefaultOrder && ( )}
{visibleCols.map((col) => )} {visibleCols.map((col) => ( ))} {rows.length === 0 ? ( ) : ( rows.map((so) => ( router.visit(route('sample-orders.feedback.show', so.id))}> {visibleCols.map((col) => ( ))} )) )}
{ if (resizeRef.current) { e.preventDefault(); return; } setDragColId(col.id); }} onDragOver={(e) => { e.preventDefault(); setDragOverColId(col.id); }} onDrop={() => { reorderCols(dragColId, col.id); setDragColId(null); setDragOverColId(null); }} onDragEnd={() => { setDragColId(null); setDragOverColId(null); }} title="Drag to reorder" className={cn('group/col relative cursor-grab select-none active:cursor-grabbing', col.numeric && '!text-right', dragColId === col.id && 'opacity-40', dragOverColId === col.id && dragColId !== col.id && '!bg-accent !text-primary')}> {SORTABLE.has(col.id) ? : col.label} startResize(e, col.id)} active={resizingId === col.id} />
No sample orders waiting for feedback.
{renderCell(so, col.id)}
{/* Footer — design-system ListFooter (Showing · ghost pager · rows-per-page) */} go({ page: p })} pageSize={Number(pageSize)} onPageSize={(n) => go({ per_page: n, page: 1 })} pageSizeOptions={[5, 10, 15, 20]} total={sampleOrders.total} from={sampleOrders.from} to={sampleOrders.to} itemLabel="entries" />
setCustomizeOpen(false)} groups={COLUMN_GROUPS} definitions={COLUMN_DEFS} state={columnState} onApply={handleApplyColumns} onReset={resetCols} />
); } SampleOrderFeedbackIndex.layout = [AppLayout];