// Shared UI Components + CRUDPage const { useState, useEffect, useRef, useMemo, useCallback, useContext } = React; // ── Context ────────────────────────────────────────────── const AppCtx = React.createContext({}); window.AppCtx = AppCtx; // ── Global Floating Overlay System ─────────────────────────────────────────── // Single source of truth for EVERY dropdown/menu/popover in the ERP (filter // selects, searchable selects, company switcher, user menu, period pickers, // challan search, etc). Renders its content through a React portal straight // onto with `position:fixed` coordinates computed live from the // trigger element's bounding rect — this is what guarantees the panel always // paints on the top-most layer and is never clipped by an ancestor's // `overflow:hidden`, `transform` (which silently creates a new stacking // context), or a lower z-index card/table/sticky-header. No per-module // z-index bumping is needed — every floating panel in the app shares this // one component and therefore one consistent stacking rule. // // Usage: replace a panel that was `position:'absolute'` inside a // `position:'relative'` trigger wrapper with: // // ...exact same panel markup... // // Keep the wrapper's ref (wrapRef) — FloatingLayer reads its rect every open, // scroll and resize. Outside-click handlers must also check the portaled // panel's own ref (see PANEL_LAYER_ZINDEX below) in addition to the trigger. window.PANEL_LAYER_ZINDEX = 9500; // above modals (1000-1050), below toasts (9999) function FloatingLayer({ anchorRef, open, placement, align, matchWidth, minWidth, offset, zIndex, panelRef, style, children }) { const [geo, setGeo] = React.useState(null); React.useLayoutEffect(() => { if (!open || !anchorRef || !anchorRef.current) { setGeo(null); return; } function update() { if (!anchorRef.current) return; const r = anchorRef.current.getBoundingClientRect(); let dir = placement || 'down'; if (!placement || placement === 'auto') { dir = (window.innerHeight - r.bottom) < 260 && r.top > 260 ? 'up' : 'down'; } setGeo({ r, dir }); } update(); window.addEventListener('scroll', update, true); window.addEventListener('resize', update); return () => { window.removeEventListener('scroll', update, true); window.removeEventListener('resize', update); }; }, [open, anchorRef, placement]); if (!open || !geo) return null; const { r, dir } = geo; const gap = offset == null ? 5 : offset; const base = { position: 'fixed', zIndex: zIndex || window.PANEL_LAYER_ZINDEX, ...(dir === 'up' ? { bottom: window.innerHeight - r.top + gap } : { top: r.bottom + gap }), ...(align === 'right' ? { right: window.innerWidth - r.right } : { left: r.left }), ...(matchWidth ? { width: r.width } : {}), ...(minWidth ? { minWidth } : {}), }; return ReactDOM.createPortal(
{children}
, document.body ); } window.FloatingLayer = FloatingLayer; // ── Export Menu ────────────────────────────────────────────────────────────── // Same visible "Export" button as always. When the signed-in user holds the // "Can Export Confidential Pricing" permission, clicking it reveals a small // premium dropdown with Standard / Confidential Export — everyone else just // gets the plain button they've always had, with no hint anything else exists. const SVGExportIco = () => ; const SVGShieldIco = () => ; const SVGChevronIco = () => ; function ExportMenu({ onStandard, onConfidential, canConfidential, label, className, size }) { const [open, setOpen] = React.useState(false); const wrapRef = React.useRef(); const panelRef = React.useRef(); React.useEffect(() => { if (!open) return; function handler(e) { if (wrapRef.current && !wrapRef.current.contains(e.target) && panelRef.current && !panelRef.current.contains(e.target)) setOpen(false); } document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [open]); const btnClass = className || `btn btn-wh ${size || 'btn-sm'}`; // Unauthorized (or unauthenticated) users only ever see the plain button — // no dropdown chevron, no trace that a second export type exists. if (!canConfidential) { return ( ); } return (
{ setOpen(false); onStandard(); }}> Standard Export
{ setOpen(false); onConfidential(); }}> Confidential Export
); } window.ExportMenu = ExportMenu; // ── Toast System ───────────────────────────────────────── // Centralized, non-blocking notifications tuned for high-speed data entry. // Success/info toasts auto-dismiss fast and never stack (latest replaces prior). // Error toasts persist until the user dismisses them and stay fully readable. const NOTIF_SPEEDS = { standard: 2000, fast: 800, highspeed: 550 }; function getNotifSpeed() { const v = localStorage.getItem('om_notif_speed'); return NOTIF_SPEEDS[v] ? v : 'fast'; } function setNotifSpeed(v) { if (!NOTIF_SPEEDS[v]) return; localStorage.setItem('om_notif_speed', v); window.dispatchEvent(new Event('om-notif-speed-change')); } window.getNotifSpeed = getNotifSpeed; window.setNotifSpeed = setNotifSpeed; let _toast = null; let _toastSeq = 0; function ToastHost() { const [items, setItems] = useState([]); const timers = useRef({}); const remove = useCallback((id) => { setItems(p => p.map(t => t.id === id ? { ...t, exiting: true } : t)); setTimeout(() => setItems(p => p.filter(t => t.id !== id)), 160); }, []); useEffect(() => { _toast = (msg, type='ok') => { const id = ++_toastSeq; const isErr = type === 'er'; if (!isErr) { // Success/info never stack — replace whichever ok/in toast is showing. Object.keys(timers.current).forEach(k => { const t = timers.current[k]; if (!t.isErr) { clearTimeout(t.handle); delete timers.current[k]; remove(Number(k)); } }); setItems(p => [...p.filter(t => t.type === 'er'), { id, msg, type, exiting:false }]); const dur = NOTIF_SPEEDS[getNotifSpeed()]; timers.current[id] = { isErr:false, handle: setTimeout(() => { delete timers.current[id]; remove(id); }, dur) }; } else { // Errors persist until dismissed — keep visible, no auto-timeout. setItems(p => [...p, { id, msg, type, exiting:false }]); timers.current[id] = { isErr:true }; } }; window.toast = _toast; }, [remove]); const icons = { ok:, er:, in: }; return (
{items.map(t => (
{icons[t.type]} {t.msg} {t.type === 'er' && ( )}
))}
); } window.ToastHost = ToastHost; // ── Badge ──────────────────────────────────────────────── function Badge({ v }) { const map = { Active:'gn', Delivered:'gn', Completed:'gn', Approved:'gn', Inactive:'rd', Cancelled:'rd', Failed:'rd', Rejected:'rd', Pending:'yw', Draft:'yw', 'In Transit':'bl', Processing:'bl', SUPER_ADMIN:'or', ADMIN:'pu', MANAGER:'bl', ACCOUNTANT:'gn', OPERATOR:'gy', VIEWER:'gy', Active_:'gn', }; const cls = map[v] || 'gy'; return {v}; } window.Badge = Badge; // ── Confirm Dialog ──────────────────────────────────────── function Confirm({ msg, onOk, onCancel }) { return (
e.target===e.currentTarget && onCancel()}>

Confirm Delete

{msg || 'Are you sure? This action cannot be undone.'}

); } window.Confirm = Confirm; // ── DiscardChangesModal — unsaved changes confirmation ──────────────────────── function DiscardChangesModal({ onContinue, onDiscard }) { return (

Unsaved Changes

You have unsaved changes.
Are you sure you want to discard them?

); } window.DiscardChangesModal = DiscardChangesModal; // ── Level-0 Group Company Selector (shown only on OM GROUP dashboard) ── // Renders a mandatory Company dropdown as the first field of a transaction // form when the user is at Level 0 (companyId === 'group'). On Level-1 // company dashboards the company is already known, so this renders nothing. function GroupCompanyField({ value, onChange }) { const companies = Store.all('companies'); const v = (value && value !== 'group') ? value : ''; return (
({value:c.id,label:c.name}))}/> This transaction will be assigned to the selected company.
); } window.GroupCompanyField = GroupCompanyField; // ── SearchableSelect — Premium ERPSelect — single global dropdown standard ──── // Shared by: Purchases · Sales · Transfers · Debris · Transporter · Vehicle // Stockyard · Diesel · all future modules // API: options=[{value,label}], value, onChange(value,label), // placeholder, noOptionsMsg, inputStyle // Visual: light panel · strong border+shadow · smooth hover · selected accent function SearchableSelect({ options, value, onChange, placeholder, noOptionsMsg, inputStyle, disabled }) { const [open, setOpen] = React.useState(false); const [query, setQuery] = React.useState(''); const [dropDir, setDropDir] = React.useState('down'); const [hlIdx, setHlIdx] = React.useState(-1); const inputRef = React.useRef(null); const wrapRef = React.useRef(null); const listRef = React.useRef(null); const currentOpt = React.useMemo(() => options.find(o => o.value === value), [options, value]); const filtered = React.useMemo(() => { const q = query.trim().toLowerCase(); if (!q) return options; return options.filter(o => o.label.toLowerCase().includes(q)); }, [options, query]); React.useEffect(() => { if (!open) return; function handler(e) { if (wrapRef.current && !wrapRef.current.contains(e.target) && listRef.current && !listRef.current.contains(e.target)) { setOpen(false); setQuery(''); } } document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, [open]); React.useEffect(() => { if (!open) setHlIdx(-1); }, [open]); React.useEffect(() => { if (hlIdx < 0 || !listRef.current) return; const el = listRef.current.children[hlIdx]; if (el) el.scrollIntoView({ block: 'nearest' }); }, [hlIdx]); function calcDir() { if (wrapRef.current) { var r = wrapRef.current.getBoundingClientRect(); setDropDir(window.innerHeight - r.bottom < 252 && r.top > 252 ? 'up' : 'down'); } } function handleInputChange(e) { setQuery(e.target.value); if (!open) { calcDir(); } setOpen(true); } function handleFocus() { calcDir(); setOpen(true); setQuery(''); } function handleSelect(opt) { onChange(opt.value, opt.label); setOpen(false); setQuery(''); } function handleClear(e) { e.stopPropagation(); onChange('', ''); setQuery(''); inputRef.current && inputRef.current.focus(); } function handleKeyDown(e) { const count = filtered.length; if (!open) { if (e.key==='ArrowDown'||e.key==='Enter'||e.key===' ') { e.preventDefault(); calcDir(); setOpen(true); setHlIdx(0); setQuery(''); } return; } if (e.key==='Escape') { e.preventDefault(); setOpen(false); setQuery(''); setHlIdx(-1); return; } if (e.key==='ArrowDown') { e.preventDefault(); setHlIdx(i=>ii>0?i-1:0); return; } if (e.key==='Enter'&&hlIdx>=0&&filtered[hlIdx]) { e.preventDefault(); handleSelect(filtered[hlIdx]); return; } if (e.key==='Tab') { if(hlIdx>=0&&filtered[hlIdx])handleSelect(filtered[hlIdx]); setOpen(false); setQuery(''); setHlIdx(-1); } } const displayVal = open ? query : (currentOpt ? currentOpt.label : ''); return (
{/* ── Trigger ── */}
{value && !disabled && ( )} {/* Animated chevron */}
{/* ── Dropdown panel — portaled to , fixed-positioned, always top layer ── */} {filtered.length === 0 ?
{noOptionsMsg || 'No results found'}
: filtered.map((opt, i) => (
{ e.preventDefault(); handleSelect(opt); }} onMouseEnter={() => setHlIdx(i)} style={{ background: i === hlIdx && opt.value !== value ? 'var(--or-lt)' : undefined, color: opt.value === value ? 'var(--or)' : i === hlIdx ? 'var(--or)' : 'var(--txt)', ...(inputStyle ? { fontFamily: inputStyle.fontFamily || 'var(--font)' } : {}), }} >{opt.label}
)) }
); } window.SearchableSelect = SearchableSelect; // ── Global Dropdown Standard — ERPSelect is the canonical alias ────────────────── // Use for any new searchable dropdown anywhere in the ERP. // Identical API to SearchableSelect: {options, value, onChange, placeholder} window.ERPSelect = SearchableSelect; // ── FiltSelect — compact SearchableSelect for .frow filter bars ────────────────── // Drop-in replacement for inside a
. // API: {options=[{value,label}], value, onChange(value), placeholder, disabled, style} // Matches .sel sizing (38px, 13px, 9px radius padding) · inherits ERPSelect visuals. function FormSelect({ options, value, onChange, placeholder, disabled, style }) { return (
); } window.FormSelect = FormSelect; // ── SmartTooltip — OM Group unified hover card ─────────────────────────────── // White card, 14px radius, soft shadow, thin border — matches Calendar style. // Intelligently positions right→left→above→below based on available space. // Touch: tap to open, tap outside to close. function SmartTooltip({ children, content, width }) { const [pos, setPos] = React.useState(null); const refEl = React.useRef(null); const TIP_W = width || 240; const GAP = 10, MARGIN = 10, TIP_H_EST = 180; function openTip() { if (!refEl.current) return; var r = refEl.current.getBoundingClientRect(); var vw = window.innerWidth, vh = window.innerHeight; // Prefer right of trigger; flip left if not enough room var left = r.right + GAP; if (left + TIP_W > vw - MARGIN) left = r.left - TIP_W - GAP; // Vertically centre on trigger; clamp to viewport var top = r.top + r.height / 2 - TIP_H_EST / 2; top = Math.max(MARGIN, Math.min(top, vh - TIP_H_EST - MARGIN)); left = Math.max(MARGIN, left); setPos({ top, left }); } // Touch: tap-to-toggle function handleTap(e) { e.stopPropagation(); if (pos) { setPos(null); } else { openTip(); } } React.useEffect(function() { if (!pos) return; function dismiss() { setPos(null); } document.addEventListener('click', dismiss); return function() { document.removeEventListener('click', dismiss); }; }, [pos]); return ( {children} {pos&&(
{content}
)} ); } window.SmartTooltip = SmartTooltip; // ── smartDropDir — utility: returns 'up' or 'down' for any dropdown ────────── // Pass the wrapper DOM element; returns preferred open direction. window.smartDropDir = function(wrapEl, dropH) { if (!wrapEl || !wrapEl.getBoundingClientRect) return 'down'; var r = wrapEl.getBoundingClientRect(); var h = dropH || 220; return (window.innerHeight - r.bottom) < h && r.top > (window.innerHeight - r.bottom) ? 'up' : 'down'; }; // Validate a company was picked at Level 0. Returns an error string or null. window.requireGroupCompany = function(isGroup, companyId) { if (isGroup && (!companyId || companyId === 'group')) return 'Please select a Company for this transaction.'; return null; }; // ── CRUDPage ────────────────────────────────────────────── function CRUDPage({ title, subtitle, entityKey, columns, fields, searchFields = [], filters = [], modalSize = 'md', canAdd = true, canEdit = true, canDelete = true, addLabel, saveLabel, customActions, extraHeader, onFormChange, }) { const { companyId } = useContext(AppCtx); const [items, setItems] = useState([]); const [search, setSearch] = useState(''); const [fvals, setFvals] = useState({}); const [page, setPage] = useState(1); const [modal, setModal] = useState(null); const [editItem, setEditItem] = useState(null); const [form, setForm] = useState({}); const [delId, setDelId] = useState(null); const PER = 10; useEffect(() => { load(); }, [companyId]); function load() { setItems(Store.all(entityKey, companyId)); } function resolveOpts(f) { if (f.options) return f.options; if (f.entityOptions) return Store.all(f.entityOptions, companyId).map(e => ({ value: e.id, label: e.name })); return []; } const filtered = useMemo(() => { return items.filter(item => { if (search) { const q = search.toLowerCase(); if (!searchFields.some(k => String(item[k]||'').toLowerCase().includes(q))) return false; } for (const [k, v] of Object.entries(fvals)) { if (v && String(item[k]) !== String(v)) return false; } return true; }); }, [items, search, fvals]); const totalPgs = Math.ceil(filtered.length / PER); const paged = filtered.slice((page-1)*PER, page*PER); function openAdd() { const defs = {}; fields.forEach(f => { if (f.type==='divider'||f.type==='section') return; defs[f.key] = f.default !== undefined ? f.default : ''; }); defs.companyId = companyId; setForm(defs); setEditItem(null); setModal('form'); } function openEdit(item) { setForm({ ...item }); setEditItem(item); setModal('form'); } function setField(k, v) { setForm(p => { const next = { ...p, [k]: v }; if (onFormChange) onFormChange(next, k, setForm); return next; }); } function handleSave(e) { e.preventDefault(); if (editItem) { Store.update(entityKey, editItem.id, form); Store.addLog('UPDATE', title, `Updated: ${form.name||editItem.id}`); } else { Store.add(entityKey, form); Store.addLog('CREATE', title, `Created: ${form.name||'record'}`); } setModal(null); load(); window.toast && window.toast(editItem ? 'Updated successfully' : 'Created successfully', 'ok'); } function handleDelete() { Store.del(entityKey, delId); Store.addLog('DELETE', title, `Deleted record: ${delId}`); setDelId(null); load(); window.toast && window.toast('Deleted successfully', 'ok'); } function exportCSV() { const hdr = columns.map(c => c.label).join(','); const rows = filtered.map(item => columns.map(c => { let v = item[c.key]; if (c.entityKey) { const e=Store.byId(c.entityKey,v); v=e?e.name:v; } return `"${String(v||'').replace(/"/g,'""')}"`; }).join(',') ).join('\n'); const blob = new Blob([hdr+'\n'+rows], {type:'text/csv'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href=url; a.download=`${entityKey}_export.csv`; a.click(); Store.addLog('EXPORT', title, `Exported ${filtered.length} records`); window.toast && window.toast('CSV exported', 'ok'); } function renderCell(col, item) { const v = item[col.key]; if (col.render) return col.render(v, item); if (col.entityKey) { const e=Store.byId(col.entityKey,v); return e?e.name:(v||'-'); } if (col.badge) return ; if (col.currency) return v ? window.fmtCur(v) : '-'; if (col.number) return v !== undefined && v !== '' ? window.fmtNum(v) : '-'; if (col.date) return window.fmtDate(v); return v || '-'; } const SVGSearch = () => ; const SVGPlus = () => ; const SVGExport = () => ; return (
{/* Page header */}

{title}

{subtitle &&

{subtitle}

}
{extraHeader} {canAdd && ( )}
{/* Filters */}
{setSearch(e.target.value);setPage(1);}} placeholder="Search…" />
{filters.map(f => { const opts = f.options || (f.entityOptions ? Store.all(f.entityOptions, companyId).map(e=>({value:e.id,label:e.name})) : []); return ( ); })} {(search || Object.values(fvals).some(Boolean)) && ( )} {filtered.length} record{filtered.length!==1?'s':''}
{/* Table */}
{columns.map(c=>)} {(canEdit||canDelete||customActions) && } {paged.length===0 ? ( ) : paged.map(item=>( {columns.map(c=>)} {(canEdit||canDelete||customActions) && ( )} ))}
{c.label}Actions
No records found
{renderCell(c,item)}
{canEdit && } {canDelete && } {customActions && customActions(item)}
{/* Pagination */} {totalPgs>1 && (
Page {page} of {totalPgs}
)} {/* Add/Edit Modal */} {modal==='form' && (

{editItem?'Edit':'Add'} {title.replace(/s$/, '')}

{fields.map(f => { if (f.type==='divider') return
; if (f.type==='section') return
{f.label}
; const opts = resolveOpts(f); return (
{f.type==='select' ? ( setField(f.key, v)} options={opts}/> ) : f.type==='textarea' ? (