/* ========================================================================= ui.jsx — shared primitives, icons, app shell ========================================================================= */ const { useState:uS, useEffect:uE, useRef:uR } = React; /* ---------- icons (simple line glyphs) ---------- */ function Icon({ name, size=20, stroke=1.8, className='' }){ const p = { dashboard: <>, workers: <>, site: <>, check: <>, clock: <>, payroll: <>, slip: <>, settings: <>, plus: <>, edit: <>, trash: <>, print: <>, search: <>, money: <>, arrow: <>, chevdown: <>, close: <>, logout: <>, pin: <>, calendar: <>, bolt: <>, phone: <>, user: <>, lock: <>, menu: <>, download: <>, warn: <>, helmet: <>, shop: <>, fuel: <>, chart: <>, camera: <>, target: <>, history: <>, trend: <>, fire: <>, }[name] || null; return ( {p} ); } /* ---------- Button ---------- */ function Button({ children, variant='primary', size='md', icon, iconR, className='', ...rest }){ const base = 'tap inline-flex items-center justify-center gap-2 font-display font-semibold rounded-lg whitespace-nowrap select-none disabled:opacity-40 disabled:pointer-events-none'; const sizes = { sm:'text-sm px-3 py-1.5', md:'text-[15px] px-4 py-2.5', lg:'text-base px-5 py-3' }; const vars = { primary: 'bg-brand text-ink hover:bg-brand-hi shadow-[0_6px_18px_-6px_rgba(232,133,43,0.6)]', dark: 'bg-raised text-chalk border border-line hover:border-haze/60', ghost: 'text-haze hover:text-chalk hover:bg-raised', danger: 'bg-bad/15 text-bad border border-bad/40 hover:bg-bad/25', hazard: 'bg-hazard text-ink hover:brightness-110', }; return ( ); } /* ---------- Card ---------- */ function Card({ children, className='', pad=true }){ return
{children}
; } /* ---------- Badge ---------- */ function Badge({ children, tone='brand', soft=true, className='' }){ const map = { brand:'text-brand bg-brand/12 border-brand/30', hazard:'text-hazard bg-hazard/12 border-hazard/30', ok:'text-ok bg-ok/12 border-ok/30', warn:'text-warn bg-warn/12 border-warn/30', bad:'text-bad bg-bad/12 border-bad/30', haze:'text-haze bg-white/5 border-line', }; return {children}; } function TypeBadge({ type }){ const t=TYPE[type]; return {t.short}; } /* ---------- Field / Input ---------- */ function Field({ label, children, hint, req=false, className='' }){ return ( ); } const inputCls = 'w-full bg-ink border border-line rounded-lg px-3.5 py-2.5 text-chalk placeholder:text-haze/50 focus:outline-none focus:border-brand focus:ring-1 focus:ring-brand/40 transition'; function Input(props){ return ; } function Select({ children, ...p }){ return (
);} /* ---------- NumberInput: ลูกศรขึ้น/ลง + คลิกแล้วเลือกทั้งหมด (พิมพ์ทับได้ ไม่ติด 0) ---------- */ function NumberInput({ value, onChange, min=0, max=Infinity, step=1, placeholder='0', blankZero=false, className='' }){ const show = (v)=> (blankZero && !v) ? '' : ((v===0||v) ? String(v) : ''); const [text,setText] = uS(show(value)); const focused = uR(false); uE(()=>{ if(!focused.current) setText(show(value)); }, [value]); const emit = (v)=>{ if(v===''||v==='.'){ onChange(0); return; } const n=Number(v); if(!isNaN(n)) onChange(Math.min(max,Math.max(min,n))); }; const bump = (d)=>{ let n=(Number(text)||0)+d*step; n=Math.min(max,Math.max(min,n)); setText(String(n)); onChange(n); }; return (
{ focused.current=true; e.target.select(); }} onBlur={()=>{ focused.current=false; setText(show(value)); }} onChange={e=>{ const v=e.target.value.replace(/[^0-9.]/g,''); setText(v); emit(v); }} className="num flex-1 min-w-0 bg-transparent px-3.5 py-2.5 text-chalk placeholder:text-haze/50 focus:outline-none"/>
); } /* ---------- Modal ---------- */ function Modal({ open, onClose, title, children, footer, wide=false }){ uE(()=>{ if(!open) return; const h=e=>e.key==='Escape'&&onClose(); window.addEventListener('keydown',h); return ()=>window.removeEventListener('keydown',h); },[open,onClose]); if(!open) return null; return (

{title}

{children}
{footer &&
{footer}
}
); } /* ---------- Stat ---------- */ function Stat({ label, value, sub, icon, tone='brand', strip=false }){ const tones = { brand:'text-brand', hazard:'text-hazard', ok:'text-ok', bad:'text-bad', chalk:'text-chalk' }; return ( {strip &&
}
{label}
{value}
{sub &&
{sub}
}
{icon &&
}
); } /* ---------- Empty ---------- */ function Empty({ icon='search', title, sub, action }){ return (
{title}
{sub &&
{sub}
} {action &&
{action}
}
); } /* ---------- Avatar (รองรับรูปถ่าย) ---------- */ function Avatar({ name, photo, size=40, className='' }){ const initials = (name||'?').trim().slice(0,1); const hues = ['#E8852B','#3fae6e','#F4C542','#5b8def','#c96e1d']; const h = hues[(name||'').length % hues.length]; if(photo) return ( {name} ); return (
{initials}
); } /* ---------- Section header ---------- */ function PageHead({ title, sub, actions }){ return (

{title}

{sub &&

{sub}

}
{actions &&
{actions}
}
); } /* ---------- Month / Period picker ---------- */ function MonthPicker({ value, onChange }){ const [y,m] = value.split('-').map(Number); const opts = []; for(let i=0;i<8;i++){ const d=new Date(TODAY.getFullYear(),TODAY.getMonth()-i,1); opts.push(ym(d)); } return ( ); } function PeriodPicker({ value, onChange }){ const periods = listPeriods(8); return ( ); } /* ---------- grouped work-type select ---------- */ function WorkTypeSelect({ value, onChange, placeholder='— เลือกประเภทงาน —', ...p }){ const types = (window.__workTypes || WORK_TYPES).filter(t=>t.active!==0); return ( ); } /* ---------- progress bar ---------- */ function Progress({ value, max, tone='brand', height=8 }){ const pct = max>0 ? Math.min(100, (value/max)*100) : 0; const over = max>0 && value>max; const color = over ? 'bg-bad' : (pct>85 ? 'bg-warn' : (tone==='brand'?'bg-brand':tone==='ok'?'bg-ok':'bg-hazard')); return (
); } Object.assign(window, { Icon, Button, Card, Badge, TypeBadge, Field, Input, Select, NumberInput, Modal, Stat, Empty, Avatar, PageHead, MonthPicker, PeriodPicker, WorkTypeSelect, Progress, inputCls, });