/* Mereka v2 — Finance kit: lucide-style icons, toast, primitives, mock data.
Faithful port of the "Finance Page for Transactions" Figma Make export. */
/* ---------------- Mock data (from src/app/data/mockData.ts) ---------------- */
const FIN_HUBS = [
{ id: 'hub1', name: 'Creative Hub KL' },
{ id: 'hub2', name: 'Tech Incubator MY' },
{ id: 'hub3', name: 'Design Center SG' },
];
const FIN_BANK_ACCOUNTS = [
{ id: 'ba1', bankName: 'STRIPE TEST BANK', last4: '6000', isDefault: true, holder: 'Creative Hub KL Admin', type: 'business' },
];
const FIN_TRANSACTIONS = [
{ id: 't1', date: '2025-05-18', description: 'Website Designer', mainType: 'PURCHASE', subType: 'Jobs', gross: 3433.00, net: 3429.00, fees: 1.19, status: 'on hold', type: 'expense', category: 'Jobs', hubId: 'hub1', vendor: 'Lucas Miller', vendorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop', id_long: 'pi_3RR4lfAXr3UuDcCV1iibQ7vp', timeline: [ { status: 'pending', label: 'On Hold', date: '18 May 2025, 14:00' }, { status: 'completed', label: 'Payment initiated', date: '18 May 2025, 12:30' } ] },
{ id: 't2', date: '2025-05-18', description: 'Regulatory Reporting Expert – Transa...', subDescription: 'Week 2: Nov 11 - Nov 17', mainType: 'REFUND', subType: 'Experiences', gross: 25.00, net: 28.00, fees: 0, status: 'completed', type: 'earning', category: 'Experiences', hubId: 'hub1', vendor: 'Lucas Miller', vendorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop', id_long: 'pi_4BB8lkCXr5UuDdBV2jkbW8wq', timeline: [ { status: 'completed', label: 'Refund successful', date: '18 May 2025, 12:30' } ] },
{ id: 't3', date: '2025-05-18', description: 'Punch & Create: Needle Punch Works...', subDescription: '1 x Paid Ticket', mainType: 'PURCHASE', subType: 'Experiences', gross: 82.46, net: 78.00, fees: 1.19, status: 'on hold', type: 'expense', category: 'Experiences', hubId: 'hub1', vendor: 'Mereka', vendorSub: 'Felicia Wong', vendorAvatar: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=100&h=100&fit=crop', id_long: 'pi_9ZZ2lmDXr8UuEeCV4lkbY9zz', timeline: [ { status: 'pending', label: 'On Hold', date: '18 May 2025, 09:00' } ] },
{ id: 't4', date: '2025-05-17', description: 'UI/UX Design Mentorship', subDescription: 'Session #4', mainType: 'PURCHASE', subType: 'Expertise', gross: 150.00, net: 145.00, fees: 5.00, status: 'completed', type: 'earning', category: 'Expertise', hubId: 'hub2', vendor: 'Sarah Chen', vendorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop', id_long: 'pi_2RR3lfAXr2UuDcCV1iibQ6xx', timeline: [ { status: 'completed', label: 'Payment received', date: '17 May 2025, 15:00' } ] },
{ id: 't5', date: '2025-05-16', description: 'Cloud Infrastructure Fee', subDescription: 'AWS Monthly Sub', mainType: 'PURCHASE', subType: 'Software', gross: 45.99, net: 45.99, fees: 0, status: 'completed', type: 'expense', category: 'Infrastructure', hubId: 'hub3', vendor: 'Amazon Web Services', vendorAvatar: 'https://images.unsplash.com/photo-1614680376593-902f74cf0d41?w=100&h=100&fit=crop', id_long: 'pi_1RR2lfAXr1UuDcCV1iibQ5yy', timeline: [ { status: 'completed', label: 'Paid', date: '16 May 2025, 10:00' } ] },
{ id: 't6', date: '2026-01-24', description: 'Bulk Expert Payout', subDescription: '12 Experts', mainType: 'WITHDRAWAL', subType: 'Payout', gross: 12450.00, net: 12400.00, fees: 50.00, status: 'succeeded', type: 'withdrawal', hubId: 'hub1', vendor: 'Multiple Experts', destination: 'Stripe Payout to Bank', id_long: 'po_5LL9mmEXr9UuFfDV5lkbZ0aa', timeline: [ { status: 'completed', label: 'Withdrawal initiated', date: '24 Jan 2026, 09:00' }, { status: 'completed', label: 'Funds sent to bank', date: '24 Jan 2026, 14:00' } ] },
{ id: 't7', date: '2026-01-25', description: 'Personal Earnings Withdrawal', subDescription: 'Wallet to Bank', mainType: 'WITHDRAWAL', subType: 'Transfer', gross: 850.00, net: 845.00, fees: 5.00, status: 'pending', type: 'withdrawal', hubId: 'hub1', vendor: 'Sarah Chen', destination: 'Maybank •••• 4421', id_long: 'po_6MM0nnFXs0VvGgEV6mlca1bb', timeline: [ { status: 'completed', label: 'Withdrawal initiated', date: '25 Jan 2026, 10:00' }, { status: 'pending', label: 'Processing by bank', date: 'Expected 26 Jan 2026' } ] },
{ id: 't8', date: '2026-02-15', description: 'Expert Skills Workshop Revenue', subDescription: '15 x Corporate Bookings', mainType: 'EARNING', subType: 'Expertise', gross: 4500.00, net: 4050.00, fees: 450.00, status: 'completed', type: 'earning', category: 'Expertise', hubId: 'hub1', vendor: 'Mereka', vendorSub: 'Multiple Experts', vendorAvatar: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=100&h=100&fit=crop', id_long: 'pi_7KK1ooGXv1WwHhFV7nlcb2cc', timeline: [ { status: 'completed', label: 'Revenue processed', date: '15 Feb 2026, 09:00' }, { status: 'completed', label: 'Funds added to balance', date: '15 Feb 2026, 11:30' } ] },
];
const FIN_SERVICES = [
{ id: 's1', name: 'Experiences', expertSplit: 80, hubSplit: 20 },
{ id: 's2', name: 'Expertise', expertSplit: 70, hubSplit: 30 },
{ id: 's3', name: 'Jobs', expertSplit: 90, hubSplit: 10 },
];
const FIN_USERS = [
{ id: 'u1', name: 'Shuhada Rabi', email: 'shuhada@ouch.my', department: 'Customer Service', balance: 1500.00, status: 'active', cards: [ { id: 'c1', bankName: 'Maybank', last4: '4421', type: 'Savings', isDefault: true }, { id: 'c2', bankName: 'CIMB', last4: '8892', type: 'Current' } ] },
{ id: 'u2', name: 'Raymond Hong Yeow Him', email: 'raymondhong@ouch.my', department: 'Finance', balance: 3250.50, status: 'active', cards: [ { id: 'c3', bankName: 'Public Bank', last4: '1122', type: 'Savings', isDefault: true } ] },
{ id: 'u3', name: 'Tan Jia Ming', email: 'jiaming@ouch.my', department: 'Human Resource (HR)', balance: 800.00, status: 'active', cards: [ { id: 'c4', bankName: 'Hong Leong', last4: '3344', type: 'Savings', isDefault: true } ] },
{ id: 'u4', name: 'Mohamed Asyraf Bin Jaafar', email: 'asyraf@ouch.my', department: 'Human Resource (HR)', balance: 1200.00, status: 'active', cards: [ { id: 'c5', bankName: 'RHB', last4: '5566', type: 'Savings', isDefault: true }, { id: 'c6', bankName: 'Maybank', last4: '9988', type: 'Current' } ] },
];
const FIN_EXPERT_HUB_BALANCES = [
{ hubId: 'hub1', hubName: 'Creative Hub KL', balance: 4500.00 },
{ hubId: 'hub2', hubName: 'Tech Incubator MY', balance: 2150.50 },
{ hubId: 'hub3', hubName: 'Design Center SG', balance: 800.00 },
];
/* ---------------- Icons (lucide paths) ---------------- */
const FIN_ICONS = {
building2: <>,
creditCard: <>,
plus: ,
trash2: <>,
download: <>,
refreshCw: <>,
search: <>,
fileText: <>,
settings: <>,
helpCircle: <>,
arrowLeft: <>,
alertCircle: <>,
checkCircle2: <>,
clock: <>,
arrowUpRight: <>,
arrowDownRight: <>,
chevronRight: ,
calendar: <>,
sparkles: <>,
info: <>,
wallet: <>,
check: ,
pencil: <>,
externalLink: <>,
percent: <>,
dollarSign: <>,
filter: ,
users: <>,
briefcase: <>,
x: ,
moreHorizontal: <>,
userCheck: <>,
chevronDown: ,
};
function FIcon({ name, size = 18, className = '', strokeWidth = 2 }) {
const p = FIN_ICONS[name];
if (!p) return null;
return (
);
}
/* ---------------- Toast (sonner-like) ---------------- */
function finToast(title, opts = {}) {
let host = document.getElementById('fin-toast-host');
if (!host) {
host = document.createElement('div');
host.id = 'fin-toast-host';
host.style.cssText = 'position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:380px;';
document.body.appendChild(host);
}
const type = opts.type || 'default';
const ring = type === 'success' ? '#16a34a' : type === 'error' ? '#dc2626' : '#111827';
const el = document.createElement('div');
el.style.cssText = `background:#fff;border:1px solid #e5e7eb;border-left:4px solid ${ring};border-radius:12px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.12);font-family:Inter,system-ui,sans-serif;animation:slideInRight .25s ease both;`;
el.innerHTML = `${title}
` +
(opts.description ? `${opts.description}
` : '');
host.appendChild(el);
setTimeout(() => { el.style.transition = 'opacity .3s, transform .3s'; el.style.opacity = '0'; el.style.transform = 'translateX(12px)'; setTimeout(() => el.remove(), 320); }, opts.duration || 4000);
}
finToast.success = (t, o = {}) => finToast(t, { ...o, type: 'success' });
finToast.error = (t, o = {}) => finToast(t, { ...o, type: 'error' });
/* ---------------- Primitives ---------------- */
function FSelect({ value, onValueChange, options = [], placeholder, leftIcon, rightIcon, className = '', triggerClassName = '' }) {
return (
{leftIcon && {leftIcon}}
{rightIcon || }
);
}
function FAvatar({ src, fallback, className = '' }) {
const [err, setErr] = useState(false);
return (
{src && !err
?
setErr(true)} className="w-full h-full object-cover" alt="" />
:
{fallback}}
e.stopPropagation()} className={`relative bg-white rounded-2xl shadow-2xl w-full ${panelClassName}`} style={{ animation: 'fadeUp .2s ease both' }}>
{children}
);
}
/* Helper: format date like 'en-GB' short */
function finDate(d, opts) { return new Date(d).toLocaleDateString('en-GB', opts || { day: 'numeric', month: 'short', year: 'numeric' }); }
function finNum(n, min = 2) { return Number(n || 0).toLocaleString(undefined, { minimumFractionDigits: min }); }
Object.assign(window, {
FIN_HUBS, FIN_BANK_ACCOUNTS, FIN_TRANSACTIONS, FIN_SERVICES, FIN_USERS, FIN_EXPERT_HUB_BALANCES,
FIcon, finToast, FSelect, FAvatar, FSwitch, FModal, finDate, finNum,
});