import { useMemo, useState } from 'react'; import { TOOLBAR_GEAR, TOOLBAR_FILTERS } from '@/Components/Table'; import { Link, router } from '@inertiajs/react'; import { Search, RotateCcw, Settings, Download, Pencil, Trash2, X } from 'lucide-react'; import AppLayout from '@/Layouts/AppLayout'; import { SelectPill } from '@/Components/MenuQuotations/QuotationListPage/QuotationListPills'; import { CustomizeColumnsModal } from '@/Components/Proto/Modals/CustomizeColumnsModal'; import { ListFooter } from '@/Components/Table/ListFooter'; import { CreateActionButton } from '@/Components/Table/CreateActionButton'; import { ExportButton } from '@/lib/excel/ExportButton'; import { SortButton } from '@/lib/ClientSort'; import { useServerSortNav } from '@/lib/ServerSort'; import { useResizableColumns, ColumnResizeGrip } from '@/lib/useResizableColumns'; import { cn } from '@/lib/utils'; /** * PrincipalDocuments › Index — admin document library (server-driven). * Visual style adapted from Pages/Proto/Documents/Index.jsx; filtering / paging * are server-side (PrincipalDocumentController@index) via Inertia partial reloads * (only:['documents','filters']) — the project's base server-paginated-list pattern * (see Pages/MenuCompanies/Companies/List.jsx). */ const CARD = 'rounded-2xl border border-border bg-card shadow-sm'; const TH = 'whitespace-nowrap bg-secondary/50 px-3.5 py-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground first:rounded-l-full first:pl-5 last:rounded-r-full last:pr-5'; const TD = 'overflow-hidden whitespace-nowrap border-b border-border/60 px-3.5 py-[16px] align-middle text-[12px] first:pl-5 last:pr-5'; // Column catalogue — `groupId` buckets the column inside the Customize Columns modal // (hide + reorder). Name stays `required` as the row anchor. Order here = default order. const COLUMN_GROUPS = [ { id: 'actions', label: 'Actions' }, { id: 'document', label: 'Document' }, { id: 'file', label: 'File' }, ]; const COLUMN_DEFS = [ { id: 'no', label: 'No', groupId: 'document' }, { id: 'show', label: 'Show', groupId: 'actions' }, { id: 'download', label: 'Download', groupId: 'actions' }, { id: 'principal', label: 'Principal Name', groupId: 'document' }, { id: 'category', label: 'Document Category', groupId: 'document' }, { id: 'name', label: 'Name', groupId: 'document', required: true }, { id: 'type', label: 'Type', groupId: 'file' }, { id: 'size', label: 'Size', num: true, groupId: 'file' }, { id: 'expiry', label: 'Expiry Date', groupId: 'file' }, { id: 'edit', label: 'Actions', num: true, groupId: 'actions' }, ]; // Pinned chrome columns — not draggable and not drop targets for the header drag. const FIXED_COL_IDS = new Set(['no', 'download', 'edit']); // 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 validExpiry = (v) => v && v !== '0000-00-00'; // Legacy size display = nf(size/1000): kilobytes (÷1000) with 2 decimals + " kb". const fmtKb = (bytes) => (Number(bytes || 0) / 1000).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' kb'; // Sortable columns — id → RAW row value (data columns only; No / Download / Actions excluded). // 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(['show', 'principal', 'category', 'name', 'type', 'size', 'expiry']); // Default column widths (px) for the resizable table-fixed layout. const COL_W = { no: 64, show: 90, download: 120, principal: 190, category: 180, name: 260, type: 160, size: 110, expiry: 130, edit: 110 }; // Per-column cell renderer — markup identical to the previous hardcoded s. // `ctx` carries the row number + the two row actions the action column needs. function renderCell(d, colId, ctx) { switch (colId) { case 'no': return {ctx.rowNumber}; case 'edit': return (
{d.IsDeleted ? ( ) : ( <> )}
); case 'show': return d.IsShow ? Yes : No; case 'download': return ( Download ); case 'principal': return {d.PrincipalName || '—'}; case 'category': return {d.DocumentCategoryName || '—'}; case 'name': return ( {d.name} {d.IsDeleted && } ); case 'type': return {d.type}; case 'size': return {fmtKb(d.size)}; case 'expiry': return {validExpiry(d.ExpiryDate) ? d.ExpiryDate : '—'}; default: return null; } } export default function Index({ canCreate = false, documents, filters = {}, principals = [], categories = [] }) { const [principalId, setPrincipalId] = useState(filters.PrincipalID ? String(filters.PrincipalID) : ''); const [categoryId, setCategoryId] = useState(filters.CategoryID ? String(filters.CategoryID) : ''); const [name, setName] = useState(filters.Name || ''); const [isDeleted, setIsDeleted] = useState(Boolean(filters.IsDeleted)); const [deleteTarget, setDeleteTarget] = useState(null); // Column show/hide + reorder, persisted per user (same grammar as the Sample Order lists). const storageKey = 'principalDocumentColumns_v2'; const colDefById = useMemo(() => new Map(COLUMN_DEFS.map((d) => [d.id, d])), []); 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 persistCols = (next) => { try { localStorage.setItem(storageKey, JSON.stringify(next)); } catch { /* ignore */ } }; const handleApplyColumns = (next) => { setColumnState(next); persistCols(next); }; // Direct header drag-to-reorder (LwrListPage pattern) — splices columnState and // persists via persistCols; resizeRef bails out so a grip drag never starts a column drag. const [dragColId, setDragColId] = useState(null); const [dragOverColId, setDragOverColId] = useState(null); const reorderCols = (fromId, toId) => { if (!fromId || !toId || fromId === toId || FIXED_COL_IDS.has(fromId) || FIXED_COL_IDS.has(toId)) return; setColumnState((prev) => { const from = prev.findIndex((c) => c.id === fromId); const to = prev.findIndex((c) => c.id === toId); if (from < 0 || to < 0) return prev; const next = [...prev]; const [moved] = next.splice(from, 1); next.splice(to, 0, moved); persistCols(next); return next; }); }; const dragProps = (id) => (FIXED_COL_IDS.has(id) ? {} : { draggable: true, onDragStart: (e) => { if (resizeRef.current) { e.preventDefault(); return; } setDragColId(id); }, onDragOver: (e) => { e.preventDefault(); setDragOverColId(id); }, onDrop: () => { reorderCols(dragColId, id); setDragColId(null); setDragOverColId(null); }, onDragEnd: () => { setDragColId(null); setDragOverColId(null); }, title: 'Drag to reorder · drag right edge to resize', }); const dragClass = (id) => (FIXED_COL_IDS.has(id) ? '' : cn('cursor-grab select-none active:cursor-grabbing', dragColId === id && 'opacity-40', dragOverColId === id && dragColId !== id && 'bg-accent text-primary')); // 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; }; // Client-side sort over the current server page + resizable columns (house pattern). // Server-side sort: the DATABASE orders the whole table, not the browser the page. const { sortKey, sortDir, toggleSort } = useServerSortNav('documents.principal.index', filters); const rows = documents.data ?? []; const { widthOf, startResize, resizingId, resizeRef } = useResizableColumns(COL_W); const tableWidth = useMemo(() => visibleCols.reduce((sum, c) => sum + widthOf(c.id), 0), [visibleCols, widthOf]); const perPage = Number(filters.npp || documents.per_page || 10); const from = documents.from ?? 0; const hasActiveFilter = principalId !== '' || categoryId !== '' || name !== '' || isDeleted; // Build params from control state (+ overrides) and fire a partial reload of the list. const go = (overrides = {}) => { const src = { PrincipalID: principalId, CategoryID: categoryId, Name: name, IsDeleted: isDeleted ? 'on' : '', npp: perPage, ...overrides, }; const defaults = { npp: 10, page: 1 }; const params = {}; Object.entries(src).forEach(([k, v]) => { if (v === '' || v === null || v === undefined || v === false) return; if (k in defaults && String(v) === String(defaults[k])) return; params[k] = v; }); router.get(route('documents.principal.index'), params, { only: ['documents', 'filters'], preserveState: true, preserveScroll: true, replace: true, }); }; const reset = () => { setPrincipalId(''); setCategoryId(''); setName(''); setIsDeleted(false); router.get(route('documents.principal.index'), {}, { only: ['documents', 'filters'], preserveState: true, preserveScroll: true, replace: true, }); }; const restore = (d) => router.patch(route('documents.principal.restore', d.ID), {}, { preserveScroll: true }); const confirmDelete = () => { if (!deleteTarget) return; router.delete(route('documents.principal.destroy', deleteTarget.ID), { preserveScroll: true, onSuccess: () => setDeleteTarget(null), }); }; return (

Documents

{/* Params mirror go()'s `src` exactly — the live filter state, not the URL. */}
{/* Compact filter toolbar — same grammar as the Sample Order / Quotation lists. */}
{/* ⚙ 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. */}
({ id: String(p.ID), name: p.PrincipalName }))} onPick={(v) => { setPrincipalId(v); go({ page: 1, PrincipalID: v }); }} /> ({ id: String(c.ID), name: c.DocumentCategoryName }))} onPick={(v) => { setCategoryId(v); go({ page: 1, CategoryID: v }); }} /> {/* Toggle pill for soft-deleted rows — canonical red-dot pill (house rule) */} {hasActiveFilter && ( )}
{!isDefaultOrder && ( )}
{visibleCols.map((c) => )} {visibleCols.map((c) => ( ))} {rows.length === 0 ? ( ) : rows.map((d, i) => ( { if (e.target.closest('a,button,input,label')) return; if (!d.IsDeleted) router.visit(route('documents.principal.edit', d.ID)); }} className={cn('transition-colors', !d.IsDeleted && 'cursor-pointer', d.IsDeleted ? 'bg-danger-bg/50 hover:bg-danger-bg/70' : 'even:bg-secondary/25 hover:bg-secondary/60')}> {visibleCols.map((c) => ( ))} ))}
{SORTABLE.has(c.id) ? : c.label} startResize(e, c.id)} active={resizingId === c.id} />
No document matches the filter.
{renderCell(d, c.id, { rowNumber: from + i, restore, setDeleteTarget })}
go({ page: p })} pageSize={perPage} onPageSize={(n) => go({ npp: n, page: 1 })} pageSizeOptions={[10, 20, 50, 100]} total={documents.total ?? 0} itemLabel="documents" />
setCustomizeOpen(false)} groups={COLUMN_GROUPS} definitions={COLUMN_DEFS} state={columnState} onApply={handleApplyColumns} onReset={resetCols} /> {deleteTarget && (
setDeleteTarget(null)}>
e.stopPropagation()}>

Delete Document

Hapus dokumen {deleteTarget.name}? Data akan disembunyikan (soft delete) dan bisa dipulihkan lewat filter IsDeleted.
)}
); } Index.layout = [AppLayout];