// TTG Petty Cash — Mock Data & Helpers
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ---------- Currency / Date Helpers ----------
const fmtMoney = (n, opts={}) => {
if (n == null || isNaN(n)) return '—';
const v = Number(n);
return v.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2, ...opts });
};
const fmtDate = (iso) => {
if (!iso) return '—';
const d = new Date(iso);
const months = ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'];
return `${d.getDate()} ${months[d.getMonth()]} ${(d.getFullYear()+543).toString().slice(-2)}`;
};
const fmtDateTime = (iso) => {
if (!iso) return '—';
const d = new Date(iso);
return `${fmtDate(iso)} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
};
const todayISO = () => new Date().toISOString().slice(0,10);
const addDays = (iso, days) => {
const d = new Date(iso);
d.setDate(d.getDate() + days);
return d.toISOString().slice(0,10);
};
const sumItems = (items) => items.reduce((a,b)=> a + (Number(b.amount)||0), 0);
const sumActual = (items) => items.reduce((a,b)=> a + (Number(b.actual)||0), 0);
// ---------- Departments ----------
const DEPARTMENTS = [
{ code: 'MKT-01', name: 'การตลาดและสื่อสารองค์กร' },
{ code: 'OPS-02', name: 'ปฏิบัติการ' },
{ code: 'HR-03', name: 'ทรัพยากรบุคคล' },
{ code: 'IT-04', name: 'เทคโนโลยีสารสนเทศ' },
{ code: 'FIN-05', name: 'บัญชีและการเงิน' },
{ code: 'SAL-06', name: 'ฝ่ายขาย' },
{ code: 'PRD-07', name: 'พัฒนาผลิตภัณฑ์' },
];
// ---------- Users ----------
const USERS = {
staff: { id: 'u1', name: 'สุชาดา วิจิตรกุล', initials: 'SV', position: 'Senior Marketing Officer', role: 'staff', dept: 'MKT-01' },
manager: { id: 'u2', name: 'ธนากร เจริญวงศ์', initials: 'TC', position: 'Marketing Manager', role: 'manager', dept: 'MKT-01' },
director: { id: 'u3', name: 'พิมพ์ลภัส ศรีสวัสดิ์', initials: 'PS', position: 'Director, Brand & Comms', role: 'director', dept: 'MKT-01' },
finance: { id: 'u4', name: 'อรวรรณ ดำรงพันธุ์', initials: 'OD', position: 'Finance Officer', role: 'finance', dept: 'FIN-05' },
};
const ROLE_META = {
staff: { label: 'พนักงาน', en: 'Employee' },
manager: { label: 'ผู้จัดการฝ่าย', en: 'Manager' },
director: { label: 'ผู้อำนวยการ', en: 'Director' },
finance: { label: 'เจ้าหน้าที่การเงิน', en: 'Finance' },
};
// ---------- Status ----------
const STATUS_META = {
draft: { label: 'ฉบับร่าง', en: 'Draft', cls: 'badge--draft' },
pending_mgr: { label: 'รออนุมัติฝ่าย', en: 'Manager', cls: 'badge--pending' },
pending_dir: { label: 'รออนุมัติ ผอ.', en: 'Director', cls: 'badge--pending' },
pending_fin: { label: 'รอตรวจ การเงิน', en: 'Finance', cls: 'badge--pending' },
approved: { label: 'อนุมัติแล้ว', en: 'Approved', cls: 'badge--approved' },
paid: { label: 'จ่ายเงินแล้ว', en: 'Paid out', cls: 'badge--paid' },
clearing: { label: 'รอเคลียร์', en: 'Awaiting clear', cls: 'badge--clearing' },
cleared: { label: 'เคลียร์สำเร็จ', en: 'Cleared', cls: 'badge--closed' },
rejected: { label: 'ถูกปฏิเสธ', en: 'Rejected', cls: 'badge--rejected' },
};
const statusBadge = (s) => {
const m = STATUS_META[s] || STATUS_META.draft;
return {m.label};
};
// ---------- Sample Data ----------
const SEED_REQUESTS = [
{
id: 'PCR-2026-0428',
type: 'request',
requester: USERS.staff,
dept: 'MKT-01',
purpose: 'ค่าใช้จ่ายในการจัดกิจกรรมเปิดตัวสินค้าใหม่ ไตรมาส 2 สำหรับลูกค้าโครงการคอนโดมิเนียม รวมค่าเช่าสถานที่ ค่าอาหารและของชำร่วย',
startDate: '2026-05-22',
dueDate: '2026-06-05',
submittedAt: '2026-05-15T09:24:00',
items: [
{ desc: 'ค่าเช่าสถานที่จัดงาน 1 วัน', amount: 25000 },
{ desc: 'ค่าอาหารกลางวันและของว่าง (50 ท่าน)', amount: 18500 },
{ desc: 'ของชำร่วยสำหรับลูกค้า VIP', amount: 12800 },
{ desc: 'ค่าเดินทางทีมงาน 4 คน', amount: 4200 },
],
status: 'pending_dir',
timeline: [
{ type: 'submit', who: USERS.staff, at: '2026-05-15T09:24:00', note: '' },
{ type: 'approve', who: USERS.manager, role: 'manager', at: '2026-05-15T14:02:00', note: 'อนุมัติ ขอให้เก็บใบเสร็จครบถ้วน' },
],
},
{
id: 'PCR-2026-0431',
type: 'request',
requester: USERS.staff,
dept: 'MKT-01',
purpose: 'ค่าใช้จ่ายในการเดินทางไปออกบูธงาน Property Expo 2026 ที่ศูนย์การประชุมแห่งชาติสิริกิติ์',
startDate: '2026-05-18',
dueDate: '2026-05-25',
submittedAt: '2026-05-14T11:15:00',
items: [
{ desc: 'ค่าตกแต่งบูธและพิมพ์โบรชัวร์', amount: 35000 },
{ desc: 'ค่าเดินทางและที่พักทีม 3 วัน', amount: 22000 },
{ desc: 'ค่าอาหารและเครื่องดื่ม', amount: 8000 },
],
status: 'paid',
paidAt: '2026-05-16T10:30:00',
paidAmount: 65000,
timeline: [
{ type: 'submit', who: USERS.staff, at: '2026-05-14T11:15:00' },
{ type: 'approve', who: USERS.manager, role: 'manager', at: '2026-05-14T15:20:00' },
{ type: 'approve', who: USERS.director, role: 'director', at: '2026-05-15T09:45:00', note: 'รบกวนเร่งดำเนินการ' },
{ type: 'approve', who: USERS.finance, role: 'finance', at: '2026-05-16T08:40:00' },
{ type: 'paid', who: USERS.finance, at: '2026-05-16T10:30:00', note: 'โอนเข้าบัญชีธนาคารกรุงเทพ ของผู้ขอเบิก' },
],
},
{
id: 'PCR-2026-0425',
type: 'request',
requester: USERS.staff,
dept: 'MKT-01',
purpose: 'จัดถ่ายทำคอนเทนต์โซเชียลมีเดียประจำเดือนพฤษภาคม รวมค่าโลเคชั่นและทีมโปรดักชั่น',
startDate: '2026-05-08',
dueDate: '2026-05-20',
submittedAt: '2026-05-05T08:00:00',
items: [
{ desc: 'ค่าจ้างทีมถ่ายทำ Freelance 2 วัน', amount: 28000 },
{ desc: 'ค่าโลเคชั่นและพร็อพ', amount: 12000 },
{ desc: 'ค่าเดินทาง', amount: 3500 },
],
status: 'clearing',
paidAt: '2026-05-07T11:00:00',
paidAmount: 43500,
timeline: [
{ type: 'submit', who: USERS.staff, at: '2026-05-05T08:00:00' },
{ type: 'approve', who: USERS.manager, role: 'manager', at: '2026-05-05T10:00:00' },
{ type: 'approve', who: USERS.director, role: 'director', at: '2026-05-06T09:00:00' },
{ type: 'approve', who: USERS.finance, role: 'finance', at: '2026-05-07T08:30:00' },
{ type: 'paid', who: USERS.finance, at: '2026-05-07T11:00:00' },
],
},
{
id: 'PCR-2026-0419',
type: 'request',
requester: USERS.staff,
dept: 'MKT-01',
purpose: 'ประชุมสัมมนาทีมการตลาดประจำไตรมาส',
startDate: '2026-04-22',
dueDate: '2026-05-01',
submittedAt: '2026-04-15T10:00:00',
items: [
{ desc: 'ค่าห้องสัมมนาและอาหาร', amount: 15000 },
],
status: 'cleared',
paidAt: '2026-04-21T09:00:00',
paidAmount: 15000,
actualTotal: 13750,
clearedAt: '2026-04-30T16:00:00',
timeline: [
{ type: 'submit', who: USERS.staff, at: '2026-04-15T10:00:00' },
{ type: 'approve', who: USERS.manager, role: 'manager', at: '2026-04-15T14:00:00' },
{ type: 'approve', who: USERS.director, role: 'director', at: '2026-04-16T09:00:00' },
{ type: 'approve', who: USERS.finance, role: 'finance', at: '2026-04-20T08:00:00' },
{ type: 'paid', who: USERS.finance, at: '2026-04-21T09:00:00' },
{ type: 'clear', who: USERS.staff, at: '2026-04-30T14:00:00', note: 'ส่งใบเสร็จและคืนเงิน 1,250 บาท' },
{ type: 'close', who: USERS.finance, at: '2026-04-30T16:00:00' },
],
},
{
id: 'PCR-2026-0411',
type: 'request',
requester: USERS.staff,
dept: 'MKT-01',
purpose: 'ของรางวัลแคมเปญลูกค้าใหม่ ไตรมาส 1',
startDate: '2026-04-01',
dueDate: '2026-04-15',
submittedAt: '2026-03-28T13:00:00',
items: [
{ desc: 'บัตรกำนัล Central 50 ใบ', amount: 50000 },
],
status: 'rejected',
timeline: [
{ type: 'submit', who: USERS.staff, at: '2026-03-28T13:00:00' },
{ type: 'reject', who: USERS.manager, role: 'manager', at: '2026-03-29T09:00:00', note: 'ขอให้แบ่งของรางวัลเป็นมูลค่าย่อยกว่านี้ และระบุเงื่อนไขแคมเปญให้ชัดเจน' },
],
},
{
id: 'PCR-2026-0435',
type: 'request',
requester: USERS.staff,
dept: 'MKT-01',
purpose: 'ค่าใช้จ่ายเตรียมงานแถลงข่าวประจำไตรมาส 2',
startDate: '2026-05-25',
dueDate: '2026-06-10',
submittedAt: '2026-05-17T08:30:00',
items: [
{ desc: 'ค่าห้องประชุมและอุปกรณ์', amount: 18000 },
{ desc: 'ค่าอาหารสื่อมวลชน', amount: 9500 },
],
status: 'pending_mgr',
timeline: [
{ type: 'submit', who: USERS.staff, at: '2026-05-17T08:30:00' },
],
},
];
// ---------- ICONS (Lucide-like inline) ----------
const Icon = ({ name, size=18, stroke=1.8, className='' }) => {
const paths = {
home: <>,
inbox: <>,
file: <>,
fileText: <>,
fileCheck: <>,
plus: <>,
search: <>,
bell: <>,
chevDown: ,
chevRight: ,
chevLeft: ,
arrowUp: <>,
arrowDown: <>,
arrowLeft: <>,
arrowRight: <>,
check: ,
x: <>,
close: <>,
trash: <>,
download: <>,
upload: <>,
paperclip: ,
image: <>,
user: <>,
users: <>,
settings: <>,
money: <>,
wallet: <>,
clock: <>,
calendar: <>,
edit: <>,
eye: <>,
filter: ,
sortDesc: <>,
refresh: <>,
info: <>,
alert: <>,
checkCircle: <>,
send: <>,
swap: <>,
chart: <>,
list: <>,
receipt: <>,
history: <>,
save: <>,
logout: <>,
more: <>,
moreV: <>,
copy: <>,
printer: <>,
};
return (
);
};
Object.assign(window, {
React, useState, useEffect, useMemo, useRef, useCallback,
fmtMoney, fmtDate, fmtDateTime, todayISO, addDays, sumItems, sumActual,
DEPARTMENTS, USERS, ROLE_META, STATUS_META, statusBadge, SEED_REQUESTS,
Icon,
});