// Shared components for Solution Order Management const { useState, useMemo, useRef, useEffect } = React; // ---------- Formatters ---------- const fmtBaht = (n, opts = {}) => { const { compact = false, sign = false } = opts; const x = parseFloat(n) || 0; if (compact && Math.abs(x) >= 1_000_000) return (sign && x > 0 ? '+' : '') + '฿' + (x / 1_000_000).toFixed(1) + 'M'; if (compact && Math.abs(x) >= 1_000) return (sign && x > 0 ? '+' : '') + '฿' + (x / 1_000).toFixed(0) + 'K'; return (sign && x > 0 ? '+' : '') + '฿' + x.toLocaleString('en-US', { maximumFractionDigits: 0 }); }; const fmtInt = n => Math.round(parseFloat(n) || 0).toLocaleString('en-US'); const fmtDate = (d) => { if (!d) return '—'; const x = (d instanceof Date) ? d : new Date(d); return x.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }); }; const fmtDateShort = (d) => { if (!d) return '—'; const x = (d instanceof Date) ? d : new Date(d); return x.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }); }; const relTime = (d) => { const x = (d instanceof Date) ? d : new Date(d); const days = Math.floor((Date.now() - x.getTime()) / 86400000); if (days === 0) return 'today'; if (days === 1) return 'yesterday'; if (days < 7) return days + 'd ago'; if (days < 30) return Math.floor(days / 7) + 'w ago'; return Math.floor(days / 30) + 'mo ago'; }; // ---------- Icons (16x16 stroke 1.5) ---------- const Icon = ({ name, size = 14, color }) => { const props = { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', stroke: color || 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { grid: <>, list: <>, cart: <>, package: <>, users: <>, building: <>, plus: <>, search: <>, filter: <>, download: <>, upload: <>, chevron: , chevronDown: , chevronLeft: , close: <>, check: , bell: <>, cog: <>, info: <>, alert: <>, file: <>, fileCheck: <>, clock: <>, calendar: <>, dot: , arrowUp: <>, arrowDown: <>, arrowRight: <>, edit: <>, more: <>, phone: <>, mail: <>, shield: <>, pipeline: <>, sparkles: <>, grid3: <>, kanban: <>, lock: <>, lockOpen: <>, eye: <>, eyeOff: <>, logOut: <>, }; return {paths[name] || null}; }; // ---------- Product icons (named SVG paths, 16×16 viewBox) ---------- const PRODUCT_ICONS = { phone: { label: 'Phone', path: }, headset: { label: 'Headset', path: <> }, cloud: { label: 'Cloud', path: }, cloud_phone: { label: 'Cloud+Phone', path: <> }, server: { label: 'Server', path: <> }, database: { label: 'Database', path: <> }, globe: { label: 'Globe', path: <> }, grid: { label: 'Grid', path: <> }, mail: { label: 'Mail', path: <> }, message: { label: 'Message', path: }, monitor: { label: 'Monitor', path: <> }, mobile: { label: 'Mobile', path: <> }, video: { label: 'Video', path: <> }, wifi: { label: 'WiFi', path: <> }, shield: { label: 'Shield', path: }, key: { label: 'Key', path: <> }, zap: { label: 'Zap', path: }, chart: { label: 'Bar chart', path: <> }, layers: { label: 'Layers', path: <> }, cpu: { label: 'CPU', path: <> }, broadcast: { label: 'Broadcast', path: <> }, pos: { label: 'POS', path: <> }, printer: { label: 'Printer', path: <> }, link: { label: 'Link', path: <> }, box: { label: 'Box', path: <> }, }; // Backward-compat map for products that never had an icon field const LEGACY_GLYPHS = { cloud_pbx: 'cloud_phone', ccc: 'headset', one_call: 'phone', gws: 'globe', m365: 'grid', }; // ---------- Product glyph (visual identity for each product) ---------- const ProductGlyph = ({ productId, size = 28 }) => { const product = (window.PRODUCTS || PRODUCTS).find(p => p.id === productId); if (!product) return null; const iconKey = product.icon || LEGACY_GLYPHS[productId] || 'box'; const iconDef = PRODUCT_ICONS[iconKey] || PRODUCT_ICONS.box; return (
{iconDef.path}
); }; // ---------- Status chip ---------- const StatusChip = ({ status, dense = false }) => { if (!status) return null; return ( {status.label} ); }; // ---------- Avatar (initials, deterministic color) ---------- const initials = (name) => { if (!name) return '?'; // Strip honorific prefixes const clean = name.replace(/^(คุณ|Khun|Mr\.?|Mrs\.?|Ms\.?)\s*/i, '').trim(); const parts = clean.split(/\s+/); if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase(); return (parts[0][0] + parts[1][0]).toUpperCase(); }; const AVATAR_COLORS = ['#2d3a8c','#d97b2e','#1f7a4d','#6b4a8a','#3a6b8a','#a8553a']; const avatarColor = (s) => { let h = 0; for (let i = 0; i < (s || '').length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return AVATAR_COLORS[h % AVATAR_COLORS.length]; }; const Avatar = ({ name, size = 26, square = false }) => (
{initials(name)}
); // ---------- Segmented control ---------- const Segmented = ({ options, value, onChange, dense = false }) => (
{options.map(o => { const v = typeof o === 'string' ? o : o.value; const lbl = typeof o === 'string' ? o : o.label; const icon = typeof o === 'string' ? null : o.icon; const disabled = typeof o === 'object' && o.disabled; const active = value === v; return ( ); })}
); // ---------- Buttons ---------- const Button = ({ children, variant = 'secondary', size = 'md', icon, iconRight, onClick, disabled, type = 'button', style = {} }) => { const base = { display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'Kanit, sans-serif', fontSize: size === 'sm' ? 11.5 : 12, fontWeight: 500, borderRadius: 3, cursor: disabled ? 'not-allowed' : 'pointer', padding: size === 'sm' ? '5px 10px' : '7px 14px', border: '1px solid transparent', transition: 'all 120ms', whiteSpace: 'nowrap', }; const variants = { primary: { background: 'var(--ink)', color: '#fff' }, accent: { background: 'var(--accent)', color: '#fff' }, secondary: { background: 'var(--panel)', color: 'var(--ink)', borderColor: 'var(--ink)' }, ghost: { background: 'transparent', color: 'var(--ink-2)', borderColor: 'var(--line)' }, text: { background: 'transparent', color: 'var(--ink-2)', padding: size === 'sm' ? '4px 6px' : '6px 8px' }, danger: { background: 'var(--panel)', color: 'var(--negative)', borderColor: 'var(--negative)' }, }; const disabledStyle = disabled ? { background: 'var(--bg-3)', color: 'var(--ink-4)', borderColor: 'transparent' } : {}; return ( ); }; // ---------- Empty state ---------- const Empty = ({ icon = 'file', title, hint }) => (
{title}
{hint &&
{hint}
}
); // ---------- Toast ---------- function ensureToastHost() { let host = document.getElementById('__toast_host'); if (!host) { host = document.createElement('div'); host.id = '__toast_host'; Object.assign(host.style, { position: 'fixed', bottom: '24px', right: '24px', zIndex: 9999, display: 'flex', flexDirection: 'column', gap: '8px', pointerEvents: 'none', }); document.body.appendChild(host); const style = document.createElement('style'); style.textContent = ` @keyframes __toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes __toastOut { to { transform: translateY(-4px); opacity: 0; } } `; document.head.appendChild(style); } return host; } function showToast(message, opts = {}) { const host = ensureToastHost(); const { variant = 'info', detail, duration = 3200 } = opts; const colors = { success: { bg: '#1f7a4d', dot: '#7ad6a3' }, error: { bg: '#b8492f', dot: '#f5b9a8' }, info: { bg: '#1a1d24', dot: '#d97b2e' }, }; const c = colors[variant] || colors.info; const toast = document.createElement('div'); Object.assign(toast.style, { background: c.bg, color: '#fff', padding: '12px 16px', borderRadius: '4px', fontFamily: 'Kanit, sans-serif', fontSize: '12.5px', minWidth: '240px', maxWidth: '380px', boxShadow: '0 8px 24px rgba(0,0,0,0.18)', pointerEvents: 'auto', cursor: 'pointer', animation: '__toastIn 180ms ease-out', display: 'flex', gap: '10px', alignItems: 'flex-start', }); toast.innerHTML = `
${message}
${detail ? `
${detail}
` : ''}
`; toast.onclick = () => { toast.style.animation = '__toastOut 160ms forwards'; setTimeout(() => toast.remove(), 160); }; host.appendChild(toast); setTimeout(() => { if (toast.parentNode) { toast.style.animation = '__toastOut 200ms forwards'; setTimeout(() => toast.remove(), 200); } }, duration); } // ---------- Modal ---------- const Modal = ({ open, title, subtitle, onClose, children, footer, width = 480 }) => { if (!open) return null; return (
e.stopPropagation()} style={{ background: 'var(--panel)', width, maxWidth: '92vw', maxHeight: '88vh', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-modal)', borderRadius: 4, }}>

{title}

{subtitle &&
{subtitle}
}
{children}
{footer &&
{footer}
}
); }; // ---------- Inputs ---------- const Field = ({ label, hint, required, children, error }) => ( ); const inputStyle = { fontFamily: 'Kanit, sans-serif', fontSize: 13, padding: '8px 10px', background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 3, color: 'var(--ink)', width: '100%', outline: 'none', transition: 'border-color 120ms', }; const TextInput = (props) => e.currentTarget.style.borderColor = 'var(--ink)'} onBlur={e => e.currentTarget.style.borderColor = 'var(--line)'}/>; const Select = (props) =>