// ===== Supabase client + shared helpers =====
const SUPABASE_URL = window.__ENV.SUPABASE_URL;
const SUPABASE_ANON_KEY = window.__ENV.SUPABASE_ANON_KEY;
const sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
auth: { persistSession: true, autoRefreshToken: true }
});
// ----- Formatters -----
function fmtRp(n) {
if (n === null || n === undefined || isNaN(n)) return 'Rp 0';
return 'Rp ' + Math.round(Number(n)).toLocaleString('id-ID');
}
function fmtRpOrDash(n) {
if (!n || n === 0 || isNaN(n)) return 'โ';
return fmtRp(n);
}
function fmtNumber(n) {
if (n === null || n === undefined || isNaN(n)) return '0';
return Math.round(Number(n)).toLocaleString('id-ID');
}
function fmtDate(d) {
if (!d) return '-';
const date = new Date(d);
return date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
}
function fmtTime(t) {
if (!t) return '-';
return t.slice(0, 5);
}
function todayStr() {
return new Date().toISOString().split('T')[0];
}
function nowTimeStr() {
const d = new Date();
return d.toTimeString().slice(0, 5);
}
function currentMonth() {
return new Date().toISOString().slice(0, 7);
}
// =====================================================
// SERVICES CATALOG
// =====================================================
const SERVICES = [
{ name: 'Korean Natural (Eyelash)', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Skinny Volume (Eyelash)', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Russian Volume (Eyelash)', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Anime Volume (Eyelash)', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Lash Lift', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Retouch Korean', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Retouch Skinny/Double', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Retouch Russian', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Removal Eyelash', category: 'lash', commission_type: 'percent', baseRate: 5 },
{ name: 'Brow Lamination', category: 'brow', commission_type: 'percent', baseRate: 5 },
{ name: 'Brow Bomber', category: 'brow', commission_type: 'percent', baseRate: 5 },
{ name: 'Sulam Alis', category: 'brow', commission_type: 'fixed_amount', baseRate: 0 },
{ name: 'Sulam Alis by Master', category: 'brow', commission_type: 'fixed_amount', baseRate: 0 },
{ name: 'Sulam Alis by Owner', category: 'brow', commission_type: 'fixed_amount', baseRate: 0 },
{ name: 'Sulam Alis by Junior', category: 'brow', commission_type: 'fixed_amount', baseRate: 0 },
{ name: 'Sulam Alis by Senior', category: 'brow', commission_type: 'fixed_amount', baseRate: 0 },
{ name: 'Retouch Sulam Alis', category: 'brow', commission_type: 'fixed_amount', baseRate: 0 },
{ name: 'Cukur Alis', category: 'brow', commission_type: 'percent', baseRate: 5 },
{ name: 'Korean Vit C Glow', category: 'facial', commission_type: 'percent', baseRate: 5 },
{ name: 'Korean BB Glow', category: 'facial', commission_type: 'percent', baseRate: 5 },
{ name: 'Nail Art', category: 'nail', commission_type: 'percent', baseRate: 10 },
{ name: 'Nail Polish (Polos)', category: 'nail', commission_type: 'percent', baseRate: 10 },
{ name: 'Nail Extension', category: 'nail', commission_type: 'percent', baseRate: 10 },
{ name: 'Manicure', category: 'nail', commission_type: 'percent', baseRate: 10 },
{ name: 'Pedicure', category: 'nail', commission_type: 'percent', baseRate: 10 },
{ name: 'Menipedi', category: 'nail', commission_type: 'percent', baseRate: 10 },
{ name: 'Removal Nails', category: 'nail', commission_type: 'percent', baseRate: 10 },
];
const JOB_TITLES = [
'Owner',
'Manager',
'Senior Therapist',
'Lash Technician',
'Nail Artist',
'Beauty Therapist',
'Kasir',
];
// Jabatan yang tidak wajib gaji pokok (biasanya owner/manager dapat profit sharing, bukan gaji)
const SALARY_OPTIONAL_TITLES = ['Owner', 'Manager'];
function isSalaryOptional(jobTitle) {
return SALARY_OPTIONAL_TITLES.includes(jobTitle);
}
const ROLES = [
{ value: 'super_admin', label: 'Super Admin (Owner JBB Group)' },
{ value: 'branch_admin', label: 'Branch Admin (Manager Cabang)' },
{ value: 'employee', label: 'Karyawan' },
];
// =====================================================
// Payment Methods โ Tahap F
// =====================================================
const PAYMENT_METHODS = [
{ value: 'cash', label: 'Cash', icon: '๐ต', category: 'cash' },
{ value: 'qris', label: 'QRIS', icon: '๐ฑ', category: 'digital' },
{ value: 'bca', label: 'Transfer BCA', icon: '๐ฆ', category: 'bank' },
{ value: 'mandiri', label: 'Transfer Mandiri', icon: '๐ฆ', category: 'bank' },
{ value: 'bni', label: 'Transfer BNI', icon: '๐ฆ', category: 'bank' },
{ value: 'btn', label: 'Transfer BTN', icon: '๐ฆ', category: 'bank' },
];
function getPaymentMethodLabel(value) {
const m = PAYMENT_METHODS.find(p => p.value === value);
return m ? m.label : (value || 'Cash');
}
function getPaymentMethodIcon(value) {
const m = PAYMENT_METHODS.find(p => p.value === value);
return m ? m.icon : '๐ต';
}
// =====================================================
// Commission calculator
// =====================================================
function isOvertime(timeStr) {
if (!timeStr) return false;
const h = parseInt(timeStr.split(':')[0]);
return h >= 18;
}
function getServiceDef(serviceName) {
return SERVICES.find(s => s.name === serviceName);
}
function calcCommission({ serviceName, price, fixedAmount, isOT, branchId }) {
const svc = getServiceDef(serviceName);
if (!svc) return { rate: 0, amount: 0, type: 'percent' };
if (svc.commission_type === 'percent') {
const rate = svc.baseRate + (isOT ? 5 : 0);
const amount = Math.round((Number(price) || 0) * rate / 100);
return { rate, amount, type: 'percent' };
}
let amount = Number(fixedAmount) || 0;
if (isOT && branchId !== 'bdg') {
amount += 5000;
}
return { rate: 0, amount, type: 'fixed_amount' };
}
function getRoleLabel(role) {
const r = ROLES.find(x => x.value === role);
return r ? r.label : role;
}
// =====================================================
// Toast
// =====================================================
const toastListeners = new Set();
function toast(message, type = 'default') {
const t = { id: Math.random().toString(36), message, type };
toastListeners.forEach(fn => fn(t));
}
function useToasts() {
const [items, setItems] = React.useState([]);
React.useEffect(() => {
const listener = (t) => {
setItems(prev => [...prev, t]);
setTimeout(() => {
setItems(prev => prev.filter(x => x.id !== t.id));
}, 3500);
};
toastListeners.add(listener);
return () => toastListeners.delete(listener);
}, []);
return items;
}
// =====================================================
// Auth
// =====================================================
async function loginWithEmail(email, password) {
const { data, error } = await sb.auth.signInWithPassword({ email, password });
if (error) throw error;
return data;
}
async function logout() {
await sb.auth.signOut();
}
async function getCurrentSession() {
const { data } = await sb.auth.getSession();
return data.session;
}
async function getMyProfile() {
const { data: { user } } = await sb.auth.getUser();
if (!user) return null;
const { data: profile, error } = await sb
.from('employees')
.select('*, branch:branches(id, name, city, status)')
.eq('id', user.id)
.single();
if (error) {
console.error('Profile fetch error:', error);
return null;
}
return { ...profile, email: user.email };
}
// =====================================================
// Branches
// =====================================================
async function listBranches() {
const { data, error } = await sb
.from('branches')
.select('*')
.order('name', { ascending: true });
if (error) throw error;
return data || [];
}
function canAccessAllBranches(profile) {
return profile?.role === 'super_admin';
}
function canManageBranch(profile, branchId) {
if (profile?.role === 'super_admin') return true;
if (profile?.role === 'branch_admin' && profile?.branch_id === branchId) return true;
return false;
}
// =====================================================
// Employees
// =====================================================
async function listEmployees(branchId = null, activeOnly = true) {
let query = sb
.from('employees')
.select('*, branch:branches(id, name, city)')
.order('full_name', { ascending: true });
if (branchId) query = query.eq('branch_id', branchId);
if (activeOnly) query = query.eq('is_active', true);
const { data, error } = await query;
if (error) throw error;
return data || [];
}
async function updateEmployee(id, patch) {
const { data, error } = await sb
.from('employees').update(patch).eq('id', id).select().single();
if (error) throw error;
return data;
}
async function deactivateEmployee(id) {
return updateEmployee(id, { is_active: false });
}
async function reactivateEmployee(id) {
return updateEmployee(id, { is_active: true });
}
// =====================================================
// CREATE EMPLOYEE (via Edge Function)
// =====================================================
async function createEmployee(payload) {
const { data: { session } } = await sb.auth.getSession();
if (!session) throw new Error('Sesi login tidak ditemukan');
const url = `${SUPABASE_URL}/functions/v1/create-employee`;
const resp = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${session.access_token}`,
'apikey': SUPABASE_ANON_KEY,
},
body: JSON.stringify(payload),
});
const result = await resp.json();
if (!resp.ok || result.error) {
throw new Error(result.error || `HTTP ${resp.status}`);
}
return result.employee;
}
// =====================================================
// DELETE EMPLOYEE (permanent, via Edge Function)
// =====================================================
async function deleteEmployee(employeeId) {
const { data: { session } } = await sb.auth.getSession();
if (!session) throw new Error('Sesi login tidak ditemukan');
const url = `${SUPABASE_URL}/functions/v1/delete-employee`;
const resp = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${session.access_token}`,
'apikey': SUPABASE_ANON_KEY,
},
body: JSON.stringify({ employee_id: employeeId }),
});
const result = await resp.json();
if (!resp.ok || result.error) {
const err = new Error(result.error || `HTTP ${resp.status}`);
err.hasTransactions = result.has_transactions;
err.transactionCount = result.transaction_count;
throw err;
}
return result;
}
// =====================================================
// Clients
// =====================================================
async function findClientByPhone(branchId, phone) {
if (!phone || !phone.trim()) return null;
const { data, error } = await sb
.from('clients')
.select('*')
.eq('branch_id', branchId)
.eq('phone', phone.trim())
.maybeSingle();
if (error) {
console.error('Find client error:', error);
return null;
}
return data;
}
async function upsertClient(branchId, fullName, phone) {
const { data, error } = await sb.rpc('upsert_client', {
p_branch_id: branchId,
p_full_name: fullName,
p_phone: phone || null,
});
if (error) throw error;
return data;
}
// =====================================================
// Transactions
// =====================================================
async function createTransaction({
branchId, clientName, clientPhone, date, startTime,
isHomeService, homeServiceFee, notes, items, createdBy,
paymentMethod = 'cash',
payments = null, // [{ method, amount, is_dp, paid_at }] - if null, single payment with paymentMethod
tips = null, // [{ employee_id, amount, payment_method }] - tips per beautician (transfer/qris only)
}) {
const isOT = isOvertime(startTime);
const totalAmount = items.reduce((sum, it) => sum + (Number(it.price) || 0), 0);
const totalCommission = items.reduce((sum, it) => sum + (Number(it.commission_amount) || 0), 0);
let clientId = null;
if (clientName && clientName.trim()) {
try {
clientId = await upsertClient(branchId, clientName.trim(), clientPhone);
} catch (err) {
console.warn('Client upsert failed:', err);
}
}
const { data: trx, error: trxErr } = await sb
.from('transactions')
.insert({
branch_id: branchId,
client_id: clientId,
client_name_snapshot: clientName?.trim() || null,
client_phone_snapshot: clientPhone?.trim() || null,
date, start_time: startTime,
is_overtime: isOT,
is_home_service: !!isHomeService,
home_service_fee: Number(homeServiceFee) || 0,
total_amount: totalAmount,
total_commission: totalCommission + (isHomeService ? (Number(homeServiceFee) || 0) : 0),
notes: notes || null,
created_by: createdBy,
payment_method: paymentMethod,
})
.select().single();
if (trxErr) throw trxErr;
const itemRows = items.map(it => {
const svc = getServiceDef(it.service_name);
return {
transaction_id: trx.id,
branch_id: branchId,
employee_id: it.employee_id,
service_name: it.service_name,
service_category: svc?.category || 'other',
price: Number(it.price) || 0,
commission_type: it.commission_type,
commission_rate: Number(it.commission_rate) || 0,
commission_amount: Number(it.commission_amount) || 0,
notes: it.notes || null,
share_group_id: it.share_group_id || null,
share_percent: it.share_percent != null ? Number(it.share_percent) : 100,
original_price: it.original_price != null ? Number(it.original_price) : (Number(it.price) || 0),
discount_type: it.discount_type || null,
discount_value: it.discount_value != null ? Number(it.discount_value) : null,
discount_amount: it.discount_amount != null ? Number(it.discount_amount) : 0,
};
});
const { error: itemErr } = await sb.from('transaction_items').insert(itemRows);
if (itemErr) {
await sb.from('transactions').delete().eq('id', trx.id);
throw itemErr;
}
// Insert payments
const grandTotal = totalAmount + (isHomeService ? (Number(homeServiceFee) || 0) : 0);
try {
if (payments && payments.length > 0) {
// Use provided payments (DP + Sisa, or single)
await insertTransactionPayments(trx.id, branchId, payments, createdBy);
} else {
// Single payment with paymentMethod
await insertTransactionPayments(trx.id, branchId, [{
method: paymentMethod,
amount: grandTotal,
is_dp: false,
paid_at: date,
}], createdBy);
}
} catch (payErr) {
console.warn('Payment insert failed (transaction still saved):', payErr);
}
// Insert tips (per beautician) โ separate from omset, but recorded for payroll & cash flow
try {
if (tips && tips.length > 0) {
const tipRows = tips
.filter(t => t.employee_id && Number(t.amount) > 0)
.map(t => ({
transaction_id: trx.id,
branch_id: branchId,
employee_id: t.employee_id,
amount: Number(t.amount) || 0,
payment_method: t.payment_method || 'qris',
created_by: createdBy || null,
}));
if (tipRows.length > 0) {
const { error: tipErr } = await sb.from('transaction_tips').insert(tipRows);
if (tipErr) console.warn('Tips insert failed (transaction still saved):', tipErr);
}
}
} catch (tipErr) {
console.warn('Tips insert error (transaction still saved):', tipErr);
}
return trx;
}
async function listRecentTransactions(branchId = null, limit = 20) {
let query = sb
.from('transactions')
.select('*, items:transaction_items(*, employee:employees(full_name)), payments:transaction_payments(*), tips:transaction_tips(id, amount, payment_method, employee_id), branch:branches(name)')
.order('date', { ascending: false })
.order('created_at', { ascending: false })
.limit(limit);
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) throw error;
return data || [];
}
// List transactions in a date range (no limit, for Tab Transaksi)
async function listTransactionsByDateRange({ branchId = null, from, to, searchQuery = '' }) {
let query = sb
.from('transactions')
.select('*, items:transaction_items(*, employee:employees(full_name)), payments:transaction_payments(*), tips:transaction_tips(id, amount, payment_method, employee_id), branch:branches(name)')
.gte('date', from)
.lte('date', to)
.order('date', { ascending: false })
.order('start_time', { ascending: false })
.order('created_at', { ascending: false });
if (branchId) query = query.eq('branch_id', branchId);
if (searchQuery && searchQuery.trim()) {
const q = searchQuery.trim();
query = query.or(`client_name_snapshot.ilike.%${q}%,client_phone_snapshot.ilike.%${q}%`);
}
const { data, error } = await query;
if (error) throw error;
return data || [];
}
async function getTodayStats(branchId = null) {
const today = todayStr();
let query = sb
.from('transactions')
.select('total_amount, total_commission')
.eq('date', today);
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) return { count: 0, total: 0, commission: 0 };
return {
count: (data || []).length,
total: (data || []).reduce((s, r) => s + Number(r.total_amount || 0), 0),
commission: (data || []).reduce((s, r) => s + Number(r.total_commission || 0), 0),
};
}
async function getMonthStats(branchId = null) {
const ym = currentMonth();
const firstDay = ym + '-01';
const nextMonth = new Date(ym + '-01');
nextMonth.setMonth(nextMonth.getMonth() + 1);
const nextFirst = nextMonth.toISOString().split('T')[0];
let query = sb
.from('transactions')
.select('total_amount')
.gte('date', firstDay)
.lt('date', nextFirst);
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) return { total: 0 };
return { total: (data || []).reduce((s, r) => s + Number(r.total_amount || 0), 0) };
}
// =====================================================
// Date Range Presets (Senin = awal minggu, ISO 8601)
// =====================================================
function startOfWeekMonday(date = new Date()) {
const d = new Date(date);
const day = d.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
// Distance back to Monday. If today is Sun (0), back 6 days. If Mon (1), back 0.
const diff = day === 0 ? 6 : day - 1;
d.setDate(d.getDate() - diff);
d.setHours(0, 0, 0, 0);
return d;
}
function endOfWeekSunday(date = new Date()) {
const start = startOfWeekMonday(date);
const end = new Date(start);
end.setDate(start.getDate() + 6);
end.setHours(23, 59, 59, 999);
return end;
}
function dateToYMD(d) {
// Format Date object to YYYY-MM-DD (local time, not UTC)
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${y}-${m}-${day}`;
}
const DATE_PRESETS = [
{
id: 'today',
label: 'Hari Ini',
getRange() {
const t = todayStr();
return { from: t, to: t };
}
},
{
id: 'yesterday',
label: 'Kemarin',
getRange() {
const d = new Date();
d.setDate(d.getDate() - 1);
const y = dateToYMD(d);
return { from: y, to: y };
}
},
{
id: 'this_week',
label: 'Minggu Ini',
getRange() {
const start = startOfWeekMonday();
const end = endOfWeekSunday();
return { from: dateToYMD(start), to: dateToYMD(end) };
}
},
{
id: 'last_week',
label: 'Minggu Lalu',
getRange() {
const d = new Date();
d.setDate(d.getDate() - 7);
const start = startOfWeekMonday(d);
const end = endOfWeekSunday(d);
return { from: dateToYMD(start), to: dateToYMD(end) };
}
},
{
id: 'this_month',
label: 'Bulan Ini',
getRange() {
const now = new Date();
const first = new Date(now.getFullYear(), now.getMonth(), 1);
const last = new Date(now.getFullYear(), now.getMonth() + 1, 0);
return { from: dateToYMD(first), to: dateToYMD(last) };
}
},
{
id: 'last_month',
label: 'Bulan Lalu',
getRange() {
const now = new Date();
const first = new Date(now.getFullYear(), now.getMonth() - 1, 1);
const last = new Date(now.getFullYear(), now.getMonth(), 0);
return { from: dateToYMD(first), to: dateToYMD(last) };
}
},
{
id: 'custom',
label: 'Custom',
getRange() { return null; } // Caller handles custom
},
];
// =====================================================
// REPORTS โ Query Functions
// =====================================================
// Get all transactions in date range (with items)
async function getReportTransactions({ from, to, branchId = null, employeeId = null }) {
let query = sb
.from('transactions')
.select('*, items:transaction_items(*, employee:employees(id, full_name, job_title)), payments:transaction_payments(*), branch:branches(id, name)')
.gte('date', from)
.lte('date', to)
.order('date', { ascending: false })
.order('created_at', { ascending: false });
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) throw error;
let result = data || [];
// If employee filter set, filter transactions that have at least one item by that employee
if (employeeId) {
result = result.filter(t =>
(t.items || []).some(it => it.employee_id === employeeId)
);
}
return result;
}
// Aggregate stats from transactions
function aggregateReport(transactions, employeeFilter = null) {
const trxs = transactions || [];
const allItems = trxs.flatMap(t => (t.items || []).map(it => ({ ...it, _trx: t })));
const items = employeeFilter
? allItems.filter(it => it.employee_id === employeeFilter)
: allItems;
// Totals
const totalRevenue = employeeFilter
? items.reduce((s, it) => s + Number(it.price || 0), 0)
: trxs.reduce((s, t) => s + Number(t.total_amount || 0), 0);
const totalCommission = items.reduce((sum, it) => sum + Number(it.commission_amount || 0), 0);
const totalHomeServiceFee = employeeFilter
? 0 // HS fee tied to transaction, not employee โ skip when filtering by employee
: trxs.filter(t => t.is_home_service).reduce((s, t) => s + Number(t.home_service_fee || 0), 0);
const trxCount = employeeFilter
? new Set(items.map(it => it.transaction_id)).size
: trxs.length;
const itemCount = items.length;
const avgPerTrx = trxCount > 0 ? totalRevenue / trxCount : 0;
// Breakdown by service category
const byCategory = {};
for (const it of items) {
const cat = it.service_category || 'other';
if (!byCategory[cat]) byCategory[cat] = { count: 0, revenue: 0, commission: 0 };
byCategory[cat].count += 1;
byCategory[cat].revenue += Number(it.price || 0);
byCategory[cat].commission += Number(it.commission_amount || 0);
}
// Breakdown by service name (top services)
const byService = {};
for (const it of items) {
const name = it.service_name;
if (!byService[name]) byService[name] = { count: 0, revenue: 0, commission: 0 };
byService[name].count += 1;
byService[name].revenue += Number(it.price || 0);
byService[name].commission += Number(it.commission_amount || 0);
}
// Top performers (by employee commission)
const byEmployee = {};
for (const it of items) {
const empId = it.employee_id;
if (!empId) continue;
if (!byEmployee[empId]) {
byEmployee[empId] = {
employee_id: empId,
full_name: it.employee?.full_name || 'โ',
job_title: it.employee?.job_title || '',
items: 0,
revenue: 0,
commission: 0,
};
}
byEmployee[empId].items += 1;
byEmployee[empId].revenue += Number(it.price || 0);
byEmployee[empId].commission += Number(it.commission_amount || 0);
}
const topPerformers = Object.values(byEmployee)
.sort((a, b) => b.commission - a.commission);
// Top spenders (by client total spend)
const byClient = {};
for (const t of trxs) {
const key = t.client_phone_snapshot || t.client_name_snapshot || t.id;
if (!byClient[key]) {
byClient[key] = {
name: t.client_name_snapshot || 'โ',
phone: t.client_phone_snapshot || '',
visits: 0,
spent: 0,
};
}
byClient[key].visits += 1;
byClient[key].spent += Number(t.total_amount || 0);
}
const topSpenders = Object.values(byClient)
.sort((a, b) => b.spent - a.spent);
// Overtime stats
const overtimeTrxs = trxs.filter(t => t.is_overtime).length;
const homeServiceTrxs = trxs.filter(t => t.is_home_service).length;
return {
totalRevenue,
totalCommission,
totalHomeServiceFee,
trxCount,
itemCount,
avgPerTrx,
byCategory,
byService,
topPerformers,
topSpenders,
overtimeTrxs,
homeServiceTrxs,
};
}
// =====================================================
// PAYROLL โ Period Helpers (matches DB get_payroll_period)
// =====================================================
// Get payroll period for a given date.
// Period rule: tanggal 26 bulan X โ tanggal 25 bulan X+1
function getPayrollPeriod(date = new Date()) {
const d = new Date(date);
const day = d.getDate();
let startYear, startMonth, endYear, endMonth;
if (day >= 26) {
// Periode mulai dari tanggal 26 bulan ini
startYear = d.getFullYear();
startMonth = d.getMonth();
endYear = (startMonth === 11) ? startYear + 1 : startYear;
endMonth = (startMonth + 1) % 12;
} else {
// Periode bulan sebelumnya (26 bulan lalu โ 25 bulan ini)
endYear = d.getFullYear();
endMonth = d.getMonth();
startYear = (endMonth === 0) ? endYear - 1 : endYear;
startMonth = (endMonth === 0) ? 11 : endMonth - 1;
}
const periodStart = new Date(startYear, startMonth, 26);
const periodEnd = new Date(endYear, endMonth, 25);
return {
period_start: dateToYMD(periodStart),
period_end: dateToYMD(periodEnd),
period_start_date: periodStart,
period_end_date: periodEnd,
};
}
// Get payroll period by year & month-of-end (the month containing the 25th)
function getPayrollPeriodForMonth(year, month) {
// month is 1-12 (Jan=1)
const periodEnd = new Date(year, month - 1, 25);
const startMonth = month === 1 ? 12 : month - 1;
const startYear = month === 1 ? year - 1 : year;
const periodStart = new Date(startYear, startMonth - 1, 26);
return {
period_start: dateToYMD(periodStart),
period_end: dateToYMD(periodEnd),
period_start_date: periodStart,
period_end_date: periodEnd,
};
}
// Generate list of recent payroll periods (e.g. last 12 months) for dropdown
function listRecentPayrollPeriods(count = 12) {
const list = [];
const now = new Date();
// Start from current period
const currentPeriod = getPayrollPeriod(now);
let year = currentPeriod.period_end_date.getFullYear();
let month = currentPeriod.period_end_date.getMonth() + 1; // 1-12
for (let i = 0; i < count; i++) {
const p = getPayrollPeriodForMonth(year, month);
const monthNames = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
list.push({
id: `${year}-${String(month).padStart(2,'0')}`,
year,
month,
label: `${monthNames[month-1]} ${year}`,
range_label: `26 ${monthNames[startMonthForPeriod(month)-1]} โ 25 ${monthNames[month-1]} ${year}`,
...p,
});
// Previous month
month -= 1;
if (month < 1) { month = 12; year -= 1; }
}
return list;
}
function startMonthForPeriod(endMonth) {
return endMonth === 1 ? 12 : endMonth - 1;
}
// =====================================================
// PAYROLL โ Data Functions
// =====================================================
// List employees eligible for payroll (excludes Owner/Manager who get profit sharing)
async function listPayrollEligibleEmployees(branchId = null) {
let query = sb
.from('employees')
.select('*, branch:branches(id, name)')
.eq('is_active', true)
.not('job_title', 'in', '("Owner","Manager")')
.order('full_name', { ascending: true });
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) throw error;
return data || [];
}
// Get commission totals per employee in a period
async function getPeriodCommissionByEmployee(periodStart, periodEnd, branchId = null) {
let query = sb
.from('transaction_items')
.select('employee_id, commission_amount, transactions!inner(date, is_home_service, home_service_fee, branch_id)')
.gte('transactions.date', periodStart)
.lte('transactions.date', periodEnd);
if (branchId) query = query.eq('transactions.branch_id', branchId);
const { data, error } = await query;
if (error) throw error;
// Aggregate by employee
const byEmployee = {};
for (const row of (data || [])) {
const empId = row.employee_id;
if (!byEmployee[empId]) {
byEmployee[empId] = {
employee_id: empId,
treatment_commission: 0,
items_count: 0,
transaction_ids: new Set(),
};
}
byEmployee[empId].treatment_commission += Number(row.commission_amount || 0);
byEmployee[empId].items_count += 1;
byEmployee[empId].transaction_ids.add(row.transactions?.id);
}
// Home service fees (counted at transaction level, but we need to attribute to employees who worked on it)
// For simplicity: HS fee โ all items in that transaction share it equally
// We need a separate query for transactions with HS
let hsQuery = sb
.from('transactions')
.select('id, home_service_fee, items:transaction_items(employee_id)')
.gte('date', periodStart)
.lte('date', periodEnd)
.eq('is_home_service', true);
if (branchId) hsQuery = hsQuery.eq('branch_id', branchId);
const { data: hsData, error: hsErr } = await hsQuery;
if (!hsErr && hsData) {
for (const trx of hsData) {
const fee = Number(trx.home_service_fee || 0);
const empIds = [...new Set((trx.items || []).map(i => i.employee_id).filter(Boolean))];
if (empIds.length > 0 && fee > 0) {
const perEmp = fee / empIds.length;
for (const empId of empIds) {
if (!byEmployee[empId]) {
byEmployee[empId] = {
employee_id: empId,
treatment_commission: 0,
items_count: 0,
transaction_ids: new Set(),
hs_commission: 0,
};
}
byEmployee[empId].hs_commission = (byEmployee[empId].hs_commission || 0) + perEmp;
}
}
}
}
// Tips per employee (Tahap 3) โ from transaction_tips, scoped to period via parent transaction date
let tipsQuery = sb
.from('transaction_tips')
.select('employee_id, amount, transactions!inner(date, branch_id)')
.gte('transactions.date', periodStart)
.lte('transactions.date', periodEnd);
if (branchId) tipsQuery = tipsQuery.eq('transactions.branch_id', branchId);
const { data: tipsData, error: tipsErr } = await tipsQuery;
if (!tipsErr && tipsData) {
for (const row of tipsData) {
const empId = row.employee_id;
if (!byEmployee[empId]) {
byEmployee[empId] = {
employee_id: empId,
treatment_commission: 0,
items_count: 0,
transaction_ids: new Set(),
hs_commission: 0,
};
}
byEmployee[empId].tips = (byEmployee[empId].tips || 0) + Number(row.amount || 0);
}
}
return byEmployee;
}
async function listPayrollAdjustments(periodStart, branchId = null) {
let query = sb
.from('payroll_adjustments')
.select('*')
.eq('period_start', periodStart);
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) throw error;
return data || [];
}
// Upsert payroll adjustment
async function upsertPayrollAdjustment(payload) {
// payload: { employee_id, branch_id, period_start, period_end, standard_work_days,
// annual_leave_days, sick_leave_certified_days, unpaid_leave_days,
// bonus, extra_deduction, notes, adjusted_by }
const { data, error } = await sb
.from('payroll_adjustments')
.upsert(payload, { onConflict: 'employee_id,period_start' })
.select()
.single();
if (error) throw error;
return data;
}
// Get annual leave balances for employees in a year
async function getAnnualLeaveBalances(year, branchId = null) {
let query = sb
.from('annual_leave_balance')
.select('*')
.eq('year', year);
if (branchId) query = query.eq('branch_id', branchId);
const { data, error } = await query;
if (error) throw error;
return data || [];
}
// Calculate full payroll details for one employee
// Pure function โ no async, takes all needed data
function calculatePayroll({ employee, commissions, adjustment, defaultStandardDays = 26 }) {
const baseSalary = Number(employee.base_salary) || 0;
const mealAllowance = Number(employee.meal_allowance) || 0;
const treatmentCommission = Number(commissions?.treatment_commission || 0);
const hsCommission = Number(commissions?.hs_commission || 0);
const tips = Number(commissions?.tips || 0);
// Adjustments (or defaults if no adjustment row exists)
const standardDays = Number(adjustment?.standard_work_days) || defaultStandardDays;
const annualLeave = Number(adjustment?.annual_leave_days) || 0;
const sickCertified = Number(adjustment?.sick_leave_certified_days) || 0;
const unpaidLeave = Number(adjustment?.unpaid_leave_days) || 0;
const unpaidLeaveWeekend = Number(adjustment?.unpaid_leave_weekend_days) || 0;
const bonus = Number(adjustment?.bonus) || 0;
const extraDeduction = Number(adjustment?.extra_deduction) || 0;
// Daily wage = base salary / standard work days
// Weekend absence counts as 2 days (double deduction)
const effectiveAbsentDays = unpaidLeave + (unpaidLeaveWeekend * 2);
// Actual work days (for new employees who started mid-period).
// If set (>0), salary is prorated by actualWorkDays / standardDays,
// THEN any absence deduction is applied on top of the prorated amount.
const actualWorkDays = Number(adjustment?.actual_work_days) || 0;
const isProrated = actualWorkDays > 0 && actualWorkDays < standardDays;
let baseSalaryActual;
if (isProrated) {
// Prorate to days actually worked, then subtract any absences within those days
const proratedBase = baseSalary * (actualWorkDays / standardDays);
baseSalaryActual = effectiveAbsentDays > 0
? Math.round(proratedBase * (1 - effectiveAbsentDays / actualWorkDays))
: Math.round(proratedBase);
if (baseSalaryActual < 0) baseSalaryActual = 0;
} else {
baseSalaryActual = effectiveAbsentDays > 0
? Math.round(baseSalary * (1 - effectiveAbsentDays / standardDays))
: baseSalary;
}
const salaryDeduction = baseSalary - baseSalaryActual;
// Meal allowance is paid per day actually present.
// Rules: unpaid absence reduces it (weekend counted ONCE, not doubled like base
// salary), while paid leave (annual leave / certified sick) does NOT reduce it.
const mealAbsentDays = unpaidLeave + unpaidLeaveWeekend;
let mealAllowanceActual;
let mealDaysBase; // days the meal allowance is counted against
if (isProrated) {
mealDaysBase = actualWorkDays;
const proratedMeal = mealAllowance * (actualWorkDays / standardDays);
mealAllowanceActual = mealAbsentDays > 0
? Math.round(proratedMeal * (1 - mealAbsentDays / actualWorkDays))
: Math.round(proratedMeal);
} else {
mealDaysBase = standardDays;
mealAllowanceActual = mealAbsentDays > 0
? Math.round(mealAllowance * (1 - mealAbsentDays / standardDays))
: mealAllowance;
}
if (mealAllowanceActual < 0) mealAllowanceActual = 0;
const mealDeduction = mealAllowance - mealAllowanceActual;
const mealDaysPaid = Math.max(0, mealDaysBase - mealAbsentDays);
// BPJS Kesehatan subsidy from company (fixed monthly amount, not prorated โ
// the premium is due monthly regardless of days worked)
const bpjsKesehatan = Number(adjustment?.bpjs_kesehatan) || 0;
// Gross take-home BEFORE any extra deduction (kasbon etc).
// Shown on the slip so the employee sees their salary without deductions.
const totalBeforeDeduction = baseSalaryActual + mealAllowanceActual + bpjsKesehatan
+ treatmentCommission + hsCommission + tips + bonus;
// Final take-home after extra deduction (kasbon)
const total = totalBeforeDeduction - extraDeduction;
return {
base_salary: baseSalary,
base_salary_actual: baseSalaryActual,
salary_deduction: salaryDeduction,
meal_allowance: mealAllowanceActual,
meal_allowance_full: mealAllowance,
meal_deduction: mealDeduction,
meal_absent_days: mealAbsentDays,
meal_days_paid: mealDaysPaid,
meal_days_base: mealDaysBase,
bpjs_kesehatan: bpjsKesehatan,
treatment_commission: treatmentCommission,
hs_commission: hsCommission,
tips: tips,
annual_leave_days: annualLeave,
sick_leave_certified_days: sickCertified,
unpaid_leave_days: unpaidLeave,
unpaid_leave_weekend_days: unpaidLeaveWeekend,
effective_absent_days: effectiveAbsentDays,
standard_work_days: standardDays,
actual_work_days: actualWorkDays,
is_prorated: isProrated,
bonus,
extra_deduction: extraDeduction,
notes: adjustment?.notes || null,
total_before_deduction: totalBeforeDeduction,
total,
};
}
// =====================================================
// AUDIT LOG โ Only accessible by super_admin
// =====================================================
async function listAuditLog({ limit = 100, tableName = null, action = null, userId = null, branchId = null, dateFrom = null, dateTo = null } = {}) {
let query = sb
.from('audit_log_readable')
.select('*')
.order('created_at', { ascending: false })
.limit(limit);
if (tableName) query = query.eq('table_name', tableName);
if (action) query = query.eq('action', action);
if (userId) query = query.eq('changed_by', userId);
if (branchId) query = query.eq('branch_id', branchId);
if (dateFrom) query = query.gte('created_at', dateFrom);
if (dateTo) query = query.lte('created_at', dateTo);
const { data, error } = await query;
if (error) throw error;
return markInputTimeUpdates(data || []);
}
// Re-classify UPDATE entries that happen at input-time as part of "input", not a real edit.
// An UPDATE on a record is considered input-time if it occurs within INPUT_WINDOW_MS
// of that same record's INSERT (e.g. trigger recalculating totals right after creation).
// Adds `is_input_side_effect: true` to such rows so the UI can label them as "Input".
function markInputTimeUpdates(logs, windowMs = 15000) {
if (!logs || !logs.length) return logs || [];
// Find earliest INSERT time per record_id
const insertTime = {};
for (const l of logs) {
if (l.action === 'INSERT' && l.record_id) {
const t = new Date(l.created_at).getTime();
if (!(l.record_id in insertTime) || t < insertTime[l.record_id]) {
insertTime[l.record_id] = t;
}
}
}
return logs.map(l => {
if (l.action === 'UPDATE' && l.record_id && (l.record_id in insertTime)) {
const t = new Date(l.created_at).getTime();
const diff = Math.abs(t - insertTime[l.record_id]);
if (diff <= windowMs) {
return { ...l, is_input_side_effect: true };
}
}
return l;
});
}
async function getAuditSummary(days = 7) {
const { data, error } = await sb.rpc('get_audit_summary', { p_days: days });
if (error) throw error;
return data?.[0] || { total_changes: 0, inserts: 0, updates: 0, deletes: 0, active_users: 0 };
}
// Helper to format JSON diff for display (for UPDATE actions)
function formatAuditDiff(oldData, newData, changedFields) {
if (!changedFields || !changedFields.length) return [];
return changedFields.map(field => ({
field,
old: oldData ? oldData[field] : null,
new: newData ? newData[field] : null,
}));
}
// Friendly label for action
function getActionLabel(action) {
const map = { INSERT: 'Tambah', UPDATE: 'Edit', DELETE: 'Hapus' };
return map[action] || action;
}
function getActionColor(action) {
const map = { INSERT: 'var(--green)', UPDATE: 'var(--mauve)', DELETE: 'var(--red)' };
return map[action] || 'var(--muted)';
}
function getActionBadge(action) {
const map = { INSERT: 'badge-green', UPDATE: 'badge-mauve', DELETE: 'badge-red' };
return map[action] || 'badge-mauve';
}
// Field label translations
const AUDIT_FIELD_LABELS = {
// transactions
date: 'Tanggal',
start_time: 'Jam Mulai',
total_amount: 'Total Omset',
total_commission: 'Total Komisi',
is_overtime: 'Lembur',
is_home_service: 'Home Service',
home_service_fee: 'Biaya HS',
client_name_snapshot: 'Nama Pelanggan',
client_phone_snapshot: 'HP Pelanggan',
notes: 'Catatan',
// transaction_items
service_name: 'Treatment',
price: 'Harga',
commission_amount: 'Komisi',
commission_rate: 'Rate Komisi',
commission_type: 'Tipe Komisi',
employee_id: 'Karyawan',
// employees
full_name: 'Nama',
username: 'Username',
job_title: 'Jabatan',
role: 'Role',
base_salary: 'Gaji Pokok',
meal_allowance: 'Uang Makan',
bpjs_kesehatan: 'BPJS Kesehatan',
branch_id: 'Cabang',
is_active: 'Status Aktif',
// payroll
standard_work_days: 'Standar Hari Kerja',
annual_leave_days: 'Cuti Tahunan',
sick_leave_certified_days: 'Sakit + Surat',
unpaid_leave_days: 'Absen (tanpa surat)',
unpaid_leave_weekend_days: 'Absen Weekend',
bonus: 'Bonus',
extra_deduction: 'Potongan Tambahan',
// clients
full_name: 'Nama',
phone: 'HP',
total_visits: 'Total Kunjungan',
total_spent: 'Total Belanja',
};
function getFieldLabel(field) {
return AUDIT_FIELD_LABELS[field] || field;
}
// Format value for display in audit (currency, dates, booleans)
function formatAuditValue(field, value) {
if (value === null || value === undefined) return 'โ';
if (typeof value === 'boolean') return value ? 'Ya' : 'Tidak';
if (['base_salary','meal_allowance','total_amount','total_commission','home_service_fee','price','commission_amount','bonus','extra_deduction','total_spent'].includes(field)) {
return fmtRp(value);
}
if (field === 'date') return fmtDate(value);
if (field === 'start_time') return fmtTime(value);
if (typeof value === 'string' && value.length > 60) {
return value.slice(0, 60) + 'โฆ';
}
return String(value);
}
// =====================================================
// EXCEL EXPORT โ pakai SheetJS (xlsx library, loaded via CDN)
// =====================================================
// Generic: export array of objects to .xlsx
async function exportToExcel(filename, sheets) {
// sheets: [{ name: 'Sheet1', rows: [{col1: val, col2: val}, ...] }, ...]
// Lazy-load the Excel library on first use (kept out of initial page load for speed)
if (typeof XLSX === 'undefined') {
if (typeof window.__loadXLSX === 'function') {
try {
toast('Menyiapkan file Excelโฆ', 'success');
await window.__loadXLSX();
} catch (e) {
toast('Gagal memuat library Excel. Cek koneksi internet.', 'error');
return;
}
} else {
toast('Library Excel belum ter-load. Refresh halaman.', 'error');
return;
}
}
const wb = XLSX.utils.book_new();
for (const sheet of sheets) {
const ws = XLSX.utils.json_to_sheet(sheet.rows || []);
// Auto-fit column widths (approximate)
if (sheet.rows && sheet.rows.length > 0) {
const cols = Object.keys(sheet.rows[0]).map(key => {
let maxLen = key.length;
for (const row of sheet.rows) {
const val = String(row[key] ?? '');
if (val.length > maxLen) maxLen = val.length;
}
return { wch: Math.min(Math.max(maxLen + 2, 10), 50) };
});
ws['!cols'] = cols;
}
XLSX.utils.book_append_sheet(wb, ws, sheet.name.slice(0, 31)); // Max 31 chars
}
// Generate & download
const today = todayStr();
const finalName = filename.endsWith('.xlsx') ? filename : `${filename}_${today}.xlsx`;
XLSX.writeFile(wb, finalName);
}
// Export report data (transactions list + aggregates)
function exportReportToExcel({ transactions, stats, periodLabel, branchLabel }) {
const sheets = [];
// Sheet 1: Summary
sheets.push({
name: 'Ringkasan',
rows: [
{ Metric: 'Periode', Nilai: periodLabel },
{ Metric: 'Cabang', Nilai: branchLabel },
{ Metric: 'Total Omset', Nilai: stats.totalRevenue },
{ Metric: 'Total Komisi', Nilai: stats.totalCommission },
{ Metric: 'Jumlah Transaksi', Nilai: stats.trxCount },
{ Metric: 'Jumlah Treatment', Nilai: stats.itemCount },
{ Metric: 'Rata-rata per Transaksi', Nilai: Math.round(stats.avgPerTrx) },
{ Metric: 'Transaksi Lembur', Nilai: stats.overtimeTrxs },
{ Metric: 'Transaksi Home Service', Nilai: stats.homeServiceTrxs },
],
});
// Sheet 2: Transaksi Detail
const trxRows = [];
for (const t of transactions) {
for (const item of (t.items || [])) {
trxRows.push({
Tanggal: t.date,
Jam: t.start_time?.slice(0, 5) || '',
Cabang: t.branch?.name || '',
Pelanggan: t.client_name_snapshot || '',
'No HP': t.client_phone_snapshot || '',
Karyawan: item.employee?.full_name || '',
Treatment: item.service_name,
Kategori: item.service_category,
Harga: Number(item.price) || 0,
Komisi: Number(item.commission_amount) || 0,
Lembur: t.is_overtime ? 'Ya' : 'Tidak',
'Home Service': t.is_home_service ? 'Ya' : 'Tidak',
'Biaya HS': Number(t.home_service_fee) || 0,
});
}
}
sheets.push({ name: 'Transaksi Detail', rows: trxRows });
// Sheet 3: Top Performer
const performerRows = stats.topPerformers.map((emp, i) => ({
Rank: i + 1,
Karyawan: emp.full_name,
Jabatan: emp.job_title,
Treatment: emp.items,
Revenue: emp.revenue,
Komisi: emp.commission,
}));
sheets.push({ name: 'Top Performer', rows: performerRows });
// Sheet 4: Top Pelanggan
const spenderRows = stats.topSpenders.map((c, i) => ({
Rank: i + 1,
Nama: c.name,
HP: c.phone || '',
Kunjungan: c.visits,
'Total Belanja': c.spent,
}));
sheets.push({ name: 'Top Pelanggan', rows: spenderRows });
// Sheet 5: Per Kategori
const categoryRows = Object.entries(stats.byCategory).map(([cat, d]) => ({
Kategori: cat,
'Jumlah Treatment': d.count,
Revenue: d.revenue,
Komisi: d.commission,
'% dari Omset': stats.totalRevenue > 0 ? Math.round(d.revenue / stats.totalRevenue * 100) : 0,
}));
sheets.push({ name: 'Per Kategori', rows: categoryRows });
// Sheet 6: Per Treatment
const serviceRows = Object.entries(stats.byService)
.sort(([,a], [,b]) => b.count - a.count)
.map(([name, d]) => ({
Treatment: name,
Jumlah: d.count,
Revenue: d.revenue,
Komisi: d.commission,
}));
sheets.push({ name: 'Per Treatment', rows: serviceRows });
const fname = `JBB_Laporan_${(branchLabel || 'all').replace(/\s/g, '_')}_${periodLabel.replace(/\s/g,'_').replace(/[\/]/g,'-')}`;
exportToExcel(fname, sheets);
}
// Export payroll to Excel
function exportPayrollToExcel({ rows, periodLabel, branchLabel, totals }) {
const sheets = [];
// Sheet 1: Ringkasan
sheets.push({
name: 'Ringkasan',
rows: [
{ Metric: 'Periode', Nilai: periodLabel },
{ Metric: 'Cabang', Nilai: branchLabel },
{ Metric: 'Jumlah Karyawan', Nilai: rows.length },
{ Metric: 'Total Gaji Pokok (setelah potong)', Nilai: totals.base },
{ Metric: 'Total Uang Makan', Nilai: totals.meal },
{ Metric: 'Total BPJS Kesehatan', Nilai: totals.bpjs || 0 },
{ Metric: 'Total Komisi', Nilai: totals.commission },
{ Metric: 'Total Tips', Nilai: totals.tips || 0 },
{ Metric: 'Total Bonus', Nilai: totals.bonus },
{ Metric: 'Total Potongan / Kasbon', Nilai: totals.deduction },
{ Metric: 'TOTAL PAYROLL', Nilai: totals.total },
],
});
// Sheet 2: Detail per Karyawan
const payrollRows = rows.map(r => ({
Nama: r.employee.full_name,
Jabatan: r.employee.job_title,
Cabang: r.employee.branch?.name || '',
'Gaji Pokok (Asli)': r.payroll.base_salary,
'Gaji Pokok (Aktual)': r.payroll.base_salary_actual,
Potongan: r.payroll.salary_deduction,
'Uang Makan': r.payroll.meal_allowance,
'BPJS Kesehatan': r.payroll.bpjs_kesehatan || 0,
'Komisi Treatment': r.payroll.treatment_commission,
'Komisi HS': r.payroll.hs_commission,
'Tips': r.payroll.tips || 0,
'Cuti Tahunan (hari)': r.payroll.annual_leave_days,
'Sakit + Surat (hari)': r.payroll.sick_leave_certified_days,
'Izin/Absen (hari)': r.payroll.unpaid_leave_days,
'Absen Weekend (hari)': r.payroll.unpaid_leave_weekend_days || 0,
'Standar Hari Kerja': r.payroll.standard_work_days,
Bonus: r.payroll.bonus,
'Gaji Diterima (sblm potongan)': r.payroll.total_before_deduction != null ? r.payroll.total_before_deduction : (r.payroll.total + r.payroll.extra_deduction),
'Potongan / Kasbon': r.payroll.extra_deduction,
'TOTAL GAJI': r.payroll.total,
}));
sheets.push({ name: 'Detail Gaji', rows: payrollRows });
const fname = `JBB_RekapGaji_${(branchLabel || 'all').replace(/\s/g, '_')}_${periodLabel.replace(/\s/g,'_').replace(/[\/]/g,'-')}`;
exportToExcel(fname, sheets);
}
// =====================================================
// SLIP GAJI โ Generate HTML for printing
// =====================================================
// Determine brand for a branch
function getBrandForBranch(branchId) {
// VIALI Tangerang punya brand sendiri
if (branchId === 'vli') {
return {
name: 'VIALI',
tagline: 'BEAUTY',
color: '#7a667e',
};
}
return {
name: 'JBB',
tagline: '์๋ฆ๋ค์',
color: '#7a667e',
};
}
// =====================================================
// INVOICE / RECEIPT โ Thermal 58mm
// =====================================================
// Per-branch invoice header info (address, phone, instagram).
// Keyed by branch_id. Falls back to JBB generic if not found.
const BRANCH_INFO = {
bdg: {
name: 'Jewel Beauty Bandung',
address: 'Commercial Area Apartment La Grande Tamansari, Jalan Merdeka No. 25-29, Bandung 40117',
phone: '0813-2465-5419',
ig: '@jewelbeautybandung',
},
smr: {
name: 'Jewel Beauty Summarecon',
address: 'Ruko Shappire No. 6, Summarecon Bandung',
phone: '+62 853-5350-6458',
ig: '@jewelbeautybandung.summarecon',
},
vli: {
name: 'VIALI Beauty',
address: 'Piazza The Mozia, Blok E9 No. 22, BSD City',
phone: '+62 881-0825-39229',
ig: '@vialibeauty',
},
jgj: {
name: 'JBB Jogja',
address: 'Ruko Kuning No. 8B, Jalan Ring Road Utara (Samping Pakuwon Mall), Yogyakarta',
phone: '+62 821-2817-0907',
ig: '@jogjabeautybar',
},
jmb: {
name: 'JBB Jogja Jambon',
address: 'Ruko IBC Nomor 5, Jalan Jambon, Kota Yogyakarta',
phone: '+62 858-4632-4762',
ig: '@jogjabeautybar.jambon',
},
cms: {
name: 'JBB Ciamis',
address: 'Perum Imbanagara Estate No. 2-4, Jl. Yogaswara, Warungwetan, Imbanagara, Kec. Ciamis, Kabupaten Ciamis, Jawa Barat 46219',
phone: '+62 822-1687-7778',
ig: '@jbb.ciamis',
},
};
function getBranchInfo(branchId, fallbackName = '') {
return BRANCH_INFO[branchId] || {
name: fallbackName || 'Jewel Beauty',
address: '',
phone: '',
ig: '',
};
}
// Generate thermal-receipt HTML (58mm) for a transaction.
// trx = result of getTransactionDetail (has branch, items[].employee, payments[])
// Group items done together (same share_group_id) into one logical line for invoices.
// A treatment done by 2+ beauticians is stored as multiple rows (split price);
// for the client-facing invoice we merge them: combined names + full price.
function groupSharedInvoiceItems(rawItems) {
const groups = [];
const byGroup = {};
for (const it of (rawItems || [])) {
const gid = it.share_group_id;
if (gid) {
if (!byGroup[gid]) {
byGroup[gid] = {
service_name: it.service_name,
discount_type: it.discount_type,
discount_value: it.discount_value,
price: 0, original_price: 0, discount_amount: 0,
names: [],
};
groups.push(byGroup[gid]);
}
const g = byGroup[gid];
g.price += Number(it.price || 0);
g.original_price += Number(it.original_price != null ? it.original_price : it.price || 0);
g.discount_amount += Number(it.discount_amount || 0);
if (it.employee?.full_name) g.names.push(it.employee.full_name);
} else {
groups.push({
service_name: it.service_name,
discount_type: it.discount_type,
discount_value: it.discount_value,
price: Number(it.price || 0),
original_price: Number(it.original_price != null ? it.original_price : it.price || 0),
discount_amount: Number(it.discount_amount || 0),
names: it.employee?.full_name ? [it.employee.full_name] : [],
});
}
}
return groups;
}
// Format names naturally: "A", "A dan B", "A, B dan C"
function formatBeauticianNames(names) {
if (!names || names.length === 0) return 'โ';
if (names.length === 1) return names[0];
if (names.length === 2) return `${names[0]} dan ${names[1]}`;
return names.slice(0, -1).join(', ') + ' dan ' + names[names.length - 1];
}
function generateInvoiceHTML(trx) {
const brand = getBrandForBranch(trx.branch_id);
const isViali = trx.branch_id === 'vli';
const info = getBranchInfo(trx.branch_id, trx.branch?.name || '');
const items = trx.items || [];
const payments = (trx.payments || []).slice().sort((a, b) => (b.is_dp ? 1 : 0) - (a.is_dp ? 1 : 0));
// Subtotal = sum of final (discounted) prices. Also compute original subtotal & total discount.
const subtotal = items.reduce((s, it) => s + Number(it.price || 0), 0);
const originalSubtotal = items.reduce((s, it) => s + Number(it.original_price != null ? it.original_price : it.price || 0), 0);
const totalDiscount = items.reduce((s, it) => s + Number(it.discount_amount || 0), 0);
const hsFee = trx.is_home_service ? Number(trx.home_service_fee || 0) : 0;
const grandTotal = subtotal + hsFee;
// Format short transaction number from id (last 6 chars uppercase)
const trxNo = (trx.id || '').replace(/-/g, '').slice(-6).toUpperCase();
// Date = transaction date. Time = WHEN INVOICE IS PRINTED (now), not treatment start time.
const dateStr = fmtDate(trx.date);
const now = new Date();
const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
// Group items done together (same share_group_id) into ONE line for the invoice.
const groupedItems = groupSharedInvoiceItems(items);
// Build items rows. Show original price (struck) + discount + final when discounted.
const itemRows = groupedItems.map(it => {
const empName = formatBeauticianNames(it.names);
const hasDiscount = Number(it.discount_amount || 0) > 0 && Number(it.original_price) > Number(it.price);
const discLabel = it.discount_type === 'percent' && it.discount_value
? `Diskon ${it.discount_value}%`
: 'Diskon';
if (hasDiscount) {
return `
${escapeHtml(it.service_name)}
oleh ${escapeHtml(empName)}
${fmtRp(it.original_price)}
${discLabel}
โ${fmtRp(it.discount_amount)}
${fmtRp(it.price)}
`;
}
return `
${escapeHtml(it.service_name)}
oleh ${escapeHtml(empName)}
${fmtRp(it.price)}
`;
}).join('');
// Payments: DP rows come first (shown near top of payment block), pelunasan after.
const dpPayments = payments.filter(p => p.is_dp);
const totalPaid = payments.reduce((s, p) => s + Number(p.amount || 0), 0);
const totalDp = dpPayments.reduce((s, p) => s + Number(p.amount || 0), 0);
const hasDp = dpPayments.length > 0;
const sisa = grandTotal - totalPaid;
const showSisa = payments.length > 0 && totalPaid < grandTotal;
// Payment breakdown: show each payment (DP + pelunasan) with method & amount.
// Example: "DP (QRIS) Rp 150.000" + "Pelunasan (QRIS) Rp 249.000"
const paymentBreakdownRows = payments.length > 0
? payments.map(p => {
const label = p.is_dp ? `DP (${getPaymentMethodLabel(p.payment_method)})` : `Pelunasan (${getPaymentMethodLabel(p.payment_method)})`;
return `${label} ${fmtRp(p.amount)}
`;
}).join('')
: `Pembayaran (${getPaymentMethodLabel(trx.payment_method || 'cash')}) ${fmtRp(grandTotal)}
`;
const officialName = isViali ? 'VIALI' : 'JBB';
return `
Invoice ${trxNo}
${escapeHtml(brand.name)}
${escapeHtml(brand.tagline)}
${escapeHtml(info.name)}
${info.address ? `
${escapeHtml(info.address)}
` : ''}
${info.phone ? `
Telp: ${escapeHtml(info.phone)}
` : ''}
${info.ig ? `
IG: ${escapeHtml(info.ig)}
` : ''}
${itemRows}
${totalDiscount > 0 ? `
Subtotal (sebelum diskon) ${fmtRp(originalSubtotal)}
` : ''}
${totalDiscount > 0 ? `
Total Diskon โ${fmtRp(totalDiscount)}
` : ''}
Subtotal ${fmtRp(subtotal)}
${hsFee > 0 ? `
Biaya Home Service ${fmtRp(hsFee)}
` : ''}
TOTAL ${fmtRp(grandTotal)}
${paymentBreakdownRows}
${sisa > 0 ? `
SISA BELUM DIBAYAR ${fmtRp(sisa)}
` : ''}
${sisa > 0 ? 'SUDAH DIBAYAR' : 'TOTAL DIBAYAR'}
${fmtRp(totalPaid)}
${(sisa <= 0 && payments.length > 0) ? `
โ LUNAS
` : ''}
`;
}
// Show invoice in print/download modal (reuses showSlipModal)
async function printInvoice(transactionId) {
try {
const trx = await getTransactionDetail(transactionId);
const html = generateInvoiceHTML(trx);
const trxNo = (trx.id || '').replace(/-/g, '').slice(-6).toUpperCase();
showSlipModal(html, `invoice-${trxNo}`, '๐งพ Invoice', () => downloadInvoicePNG(trx));
} catch (err) {
toast('Gagal membuat invoice: ' + (err.message || err), 'error');
}
}
// Render a receipt to a canvas (no external library) and return the canvas element.
// Single-pass layout: each op stores its own y-step so measure & render stay in sync.
function drawInvoiceToCanvas(trx) {
const brand = getBrandForBranch(trx.branch_id);
const isViali = trx.branch_id === 'vli';
const info = getBranchInfo(trx.branch_id, trx.branch?.name || '');
const items = trx.items || [];
const payments = (trx.payments || []).slice().sort((a, b) => (b.is_dp ? 1 : 0) - (a.is_dp ? 1 : 0));
const subtotal = items.reduce((s, it) => s + Number(it.price || 0), 0);
const originalSubtotal = items.reduce((s, it) => s + Number(it.original_price != null ? it.original_price : it.price || 0), 0);
const totalDiscount = items.reduce((s, it) => s + Number(it.discount_amount || 0), 0);
const hsFee = trx.is_home_service ? Number(trx.home_service_fee || 0) : 0;
const grandTotal = subtotal + hsFee;
const trxNo = (trx.id || '').replace(/-/g, '').slice(-6).toUpperCase();
const dateStr = fmtDate(trx.date);
const now = new Date();
const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
const totalPaid = payments.reduce((s, p) => s + Number(p.amount || 0), 0);
const dpPayments = payments.filter(p => p.is_dp);
const hasDp = dpPayments.length > 0;
const sisa = grandTotal - totalPaid;
const finalPayment = payments.find(p => !p.is_dp);
const finalMethodLabel = finalPayment ? getPaymentMethodLabel(finalPayment.payment_method) : getPaymentMethodLabel(trx.payment_method || 'cash');
const officialName = isViali ? 'VIALI' : 'JBB';
const SCALE = 3;
const W = 384;
const PAD = 20;
const innerW = W - PAD * 2;
const cv = document.createElement('canvas');
const ctx = cv.getContext('2d');
const F = (size, weight = 'normal', family = "'Courier New', monospace") => `${weight} ${size}px ${family}`;
const SERIF = "Georgia, 'Times New Roman', serif";
function wrapText(text, font, maxW) {
ctx.font = font;
const words = String(text).split(/\s+/);
const lines = [];
let line = '';
for (const w of words) {
const test = line ? line + ' ' + w : w;
if (ctx.measureText(test).width > maxW && line) {
lines.push(line); line = w;
} else { line = test; }
}
if (line) lines.push(line);
return lines;
}
// Build ops list, each with explicit step. Then total height = sum of steps + paddings.
const ops = [];
const addText = (text, font, color, align, step) => ops.push({ type: 'text', text, font, color, align, step });
const addWrapped = (text, font, color, align, stepPerLine, maxW) => {
for (const ln of wrapText(text, font, maxW || innerW)) ops.push({ type: 'text', text: ln, font, color, align, step: stepPerLine });
};
const addGap = (px) => ops.push({ type: 'gap', step: px });
const addDivider = () => ops.push({ type: 'divider', step: 12 });
const addRow = (left, right, font, color) => ops.push({ type: 'row', left, right, font, color, step: 16 });
// HEADER
addText(brand.name, F(30, 'bold', SERIF), '#000', 'center', 32);
addText(brand.tagline, F(11), '#555', 'center', 15);
addText(info.name, F(13, 'bold'), '#000', 'center', 17);
if (info.address) addWrapped(info.address, F(10), '#333', 'center', 13);
if (info.phone) addText('Telp: ' + info.phone, F(10), '#333', 'center', 13);
if (info.ig) addText('IG: ' + info.ig, F(10), '#333', 'center', 13);
addGap(4);
addDivider();
// META
addRow('No', '#' + trxNo, F(12), '#000');
addRow('Tgl', dateStr, F(12), '#000');
addRow('Jam', timeStr, F(12), '#000');
addRow('Klien', trx.client_name_snapshot || '-', F(12), '#000');
if (trx.is_home_service) addRow('', '(Home Service)', F(12), '#000');
addDivider();
// ITEMS (grouped: treatment done together shows as one line with combined names)
const groupedItems = groupSharedInvoiceItems(items);
for (const it of groupedItems) {
const empName = formatBeauticianNames(it.names);
const hasDiscount = Number(it.discount_amount || 0) > 0 && Number(it.original_price) > Number(it.price);
addWrapped(it.service_name, F(13, 'bold'), '#000', 'left', 16);
if (hasDiscount) {
const discLabel = it.discount_type === 'percent' && it.discount_value ? `Diskon ${it.discount_value}%` : 'Diskon';
addRow('oleh ' + empName, fmtRp(it.original_price), F(11), '#999');
addRow(discLabel, '-' + fmtRp(it.discount_amount), F(10), '#a00');
addRow('', fmtRp(it.price), F(12, 'bold'), '#000');
} else {
addRow('oleh ' + empName, fmtRp(it.price), F(11), '#333');
}
addGap(3);
}
addDivider();
// TOTALS
if (totalDiscount > 0) {
addRow('Subtotal (asli)', fmtRp(originalSubtotal), F(11), '#666');
addRow('Total Diskon', '-' + fmtRp(totalDiscount), F(11), '#a00');
}
addRow('Subtotal', fmtRp(subtotal), F(12), '#000');
if (hsFee > 0) addRow('Biaya Home Service', fmtRp(hsFee), F(11), '#000');
addRow('TOTAL', fmtRp(grandTotal), F(15, 'bold'), '#000');
addDivider();
// PAYMENT BREAKDOWN โ DP + pelunasan, each with method
if (payments.length > 0) {
for (const p of payments) {
const label = p.is_dp ? `DP (${getPaymentMethodLabel(p.payment_method)})` : `Pelunasan (${getPaymentMethodLabel(p.payment_method)})`;
addRow(label, fmtRp(p.amount), F(11), '#000');
}
} else {
addRow(`Pembayaran (${getPaymentMethodLabel(trx.payment_method || 'cash')})`, fmtRp(grandTotal), F(11), '#000');
}
if (sisa > 0) addRow('SISA BELUM DIBAYAR', fmtRp(sisa), F(12, 'bold'), '#a00');
addDivider();
// TOTAL DIBAYAR (bold, bottom)
addRow(sisa > 0 ? 'SUDAH DIBAYAR' : 'TOTAL DIBAYAR', fmtRp(totalPaid), F(15, 'bold'), '#000');
if (sisa <= 0 && payments.length > 0) addRow('', 'โ LUNAS', F(10), '#4a7c59');
// FOOTER
addGap(8);
addText('Terima Kasih', F(15, 'bold', SERIF), '#000', 'center', 18);
addText('Sampai jumpa kembali', F(11), '#333', 'center', 16);
addGap(4);
addWrapped('Jika Anda puas, ceritakan ke teman. Jika ada kekurangan, sampaikan dulu kepada kami โ akan kami perbaiki segera.', F(10, 'bold'), '#111', 'center', 13);
addGap(2);
addWrapped('Sebagai UMKM yang sedang berjuang, ulasan baik & masukan langsung dari Anda sangat berarti untuk kami terus berkembang.', F(9.5), '#333', 'center', 12);
addGap(4);
addWrapped('Kritik & saran, silakan sampaikan ke www.jbb-indonesia.com', F(9), '#444', 'center', 12);
addGap(6);
addDivider();
addWrapped(`${officialName} tidak bertanggung jawab atas transaksi atau pembayaran yang dilakukan di luar nama resmi ${officialName} atau di luar rekening resmi ${officialName}. Pastikan setiap pembayaran dilakukan melalui jalur resmi.`, F(8.5), '#555', 'left', 11);
// Total height
const totalH = ops.reduce((s, o) => s + o.step, 0) + PAD * 2;
cv.width = W * SCALE;
cv.height = Math.ceil(totalH * SCALE);
ctx.scale(SCALE, SCALE);
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, W, totalH);
// Render
let yy = PAD;
for (const op of ops) {
if (op.type === 'text') {
ctx.font = op.font;
ctx.fillStyle = op.color;
ctx.textBaseline = 'top';
ctx.textAlign = op.align === 'center' ? 'center' : 'left';
ctx.fillText(op.text, op.align === 'center' ? W / 2 : PAD, yy);
} else if (op.type === 'divider') {
ctx.strokeStyle = '#000';
ctx.setLineDash([3, 3]);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(PAD, yy + 2);
ctx.lineTo(W - PAD, yy + 2);
ctx.stroke();
ctx.setLineDash([]);
} else if (op.type === 'row') {
ctx.font = op.font;
ctx.fillStyle = op.color;
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.fillText(op.left, PAD, yy);
ctx.textAlign = 'right';
ctx.fillText(op.right, W - PAD, yy);
}
yy += op.step;
}
return cv;
}
// Trigger PNG download of the invoice.
function downloadInvoicePNG(trx) {
try {
const cv = drawInvoiceToCanvas(trx);
const trxNo = (trx.id || '').replace(/-/g, '').slice(-6).toUpperCase();
cv.toBlob((blob) => {
if (!blob) { toast('Gagal membuat PNG', 'error'); return; }
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `invoice-${trxNo}-${new Date().toISOString().split('T')[0]}.png`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 1000);
}, 'image/png');
} catch (err) {
console.error('PNG export failed:', err);
toast('Gagal membuat PNG: ' + (err.message || err), 'error');
}
}
// Fetch transactions for an employee in a period (for slip detail)
async function getEmployeePeriodTransactions(employeeId, periodStart, periodEnd) {
const { data, error } = await sb
.from('transaction_items')
.select(`
id, service_name, price, commission_amount, commission_rate, commission_type,
share_group_id, share_percent,
transaction:transactions(
id, date, start_time, is_overtime, is_home_service, home_service_fee,
client_name_snapshot, client_phone_snapshot,
all_items:transaction_items(employee_id)
)
`)
.eq('employee_id', employeeId)
.gte('transaction.date', periodStart)
.lte('transaction.date', periodEnd);
if (error) throw error;
// Filter out rows where transaction is null (RLS edge case)
return (data || []).filter(r => r.transaction);
}
// Get tip detail (per transaction) for one employee in a period โ for slip breakdown
async function getEmployeePeriodTips(employeeId, periodStart, periodEnd) {
const { data, error } = await sb
.from('transaction_tips')
.select(`
id, amount, payment_method,
transaction:transactions!inner(id, date, client_name_snapshot)
`)
.eq('employee_id', employeeId)
.gte('transaction.date', periodStart)
.lte('transaction.date', periodEnd);
if (error) return [];
return (data || []).filter(r => r.transaction).sort((a, b) => {
const dA = a.transaction?.date || '';
const dB = b.transaction?.date || '';
return dA < dB ? -1 : dA > dB ? 1 : 0;
});
}
// Generate slip HTML for one employee
function generateSlipHTML({ employee, payroll, items, period, branch, generatedBy, isApproved = false, tipsDetail = [] }) {
const brand = getBrandForBranch(employee.branch_id);
const periodStartFmt = fmtDate(period.period_start);
const periodEndFmt = fmtDate(period.period_end);
const generatedAt = new Date().toLocaleString('id-ID', {
day: '2-digit', month: 'long', year: 'numeric',
hour: '2-digit', minute: '2-digit'
});
// Sort items by date
const sortedItems = [...items].sort((a, b) => {
const dA = a.transaction?.date || '';
const dB = b.transaction?.date || '';
return dA.localeCompare(dB);
});
// Group by transaction
const byTrx = {};
for (const it of sortedItems) {
const tid = it.transaction?.id;
if (!tid) continue;
if (!byTrx[tid]) {
byTrx[tid] = {
date: it.transaction.date,
start_time: it.transaction.start_time,
is_overtime: it.transaction.is_overtime,
is_home_service: it.transaction.is_home_service,
home_service_fee: Number(it.transaction.home_service_fee || 0),
client_name: it.transaction.client_name_snapshot || 'โ',
client_phone: it.transaction.client_phone_snapshot || '',
// How many distinct beauticians worked this transaction โ the home service
// fee is shared equally between them (not given in full to each).
worker_count: Math.max(1, new Set(
(it.transaction.all_items || []).map(x => x.employee_id).filter(Boolean)
).size),
items: [],
};
}
byTrx[tid].items.push(it);
}
// Build transaction detail rows
let detailRows = '';
let runningCommission = 0;
const trxList = Object.values(byTrx).sort((a, b) => a.date.localeCompare(b.date));
for (const trx of trxList) {
// Home service fee is shared equally between all beauticians who worked the
// transaction. This slip belongs to ONE employee, so take their share first,
// then spread that share across their own items in the transaction.
const isHS = trx.is_home_service;
const hsFee = Number(trx.home_service_fee || 0);
const workerCount = Math.max(1, Number(trx.worker_count) || 1);
const hsShareForThisEmployee = isHS ? Math.round(hsFee / workerCount) : 0;
const hsPortionPerItem = isHS && trx.items.length > 0 ? Math.round(hsShareForThisEmployee / trx.items.length) : 0;
// Handle remainder so the employee's items still total their full share
const hsRemainder = isHS ? hsShareForThisEmployee - (hsPortionPerItem * trx.items.length) : 0;
for (let i = 0; i < trx.items.length; i++) {
const it = trx.items[i];
const isFirst = i === 0;
const isLast = i === trx.items.length - 1;
// Shared treatment info
const sharePercent = Number(it.share_percent || 100);
const isShared = it.share_group_id && sharePercent < 100;
const sharedTag = isShared ? ` shared ${sharePercent}% ` : '';
// Calculate effective commission to display
let displayCommission;
let commissionColor;
if (isHS) {
// HS: show portion of HS fee in gold
displayCommission = hsPortionPerItem + (isLast ? hsRemainder : 0);
commissionColor = '#a8884a'; // gold
runningCommission += displayCommission;
} else {
// Regular: show treatment commission as usual
displayCommission = Number(it.commission_amount || 0);
commissionColor = ''; // default mauve via CSS
runningCommission += displayCommission;
}
detailRows += `
${isFirst ? fmtDate(trx.date) : ''}
${isFirst ? fmtTime(trx.start_time) : ''}
${isFirst ? escapeHtml(trx.client_name) : ''}
${escapeHtml(it.service_name)}
${trx.is_overtime && isFirst ? 'lembur ' : ''}
${trx.is_home_service && isFirst ? 'HS ' : ''}
${sharedTag}
${fmtRp(it.price)}
${fmtRp(displayCommission)}
`;
}
}
// Empty state
if (!trxList.length) {
detailRows = `
Tidak ada transaksi di periode ini. Slip Gaji โ ${escapeHtml(employee.full_name)} โ ${periodEndFmt}
๐จ Print / Save PDF
Tutup
${!isApproved ? '
PREVIEW
' : ''}
Absensi Periode Ini
Cuti Tahunan
${payroll.annual_leave_days} hari
Sakit + Surat Dokter
${payroll.sick_leave_certified_days} hari
Absen (tanpa surat)
${payroll.unpaid_leave_days} hari
${payroll.unpaid_leave_weekend_days > 0 ? `
Absen Weekend (2x potongan)
${payroll.unpaid_leave_weekend_days} hari
` : ''}
Standar hari kerja: ${payroll.standard_work_days} hari. Cuti tahunan & sakit dengan surat dokter tidak dipotong dari gaji pokok. Absen weekend dihitung 2x gaji harian.
Detail Transaksi & Komisi
Tanggal
Jam
Pelanggan
Treatment
Harga
Komisi
${detailRows}
Total Komisi Treatment
${fmtRp(payroll.treatment_commission)}
${hsCommission > 0 ? `
Total Komisi Home Service
${fmtRp(hsCommission)}
` : ''}
${(tipsDetail && tipsDetail.length > 0) ? `
Rincian Tips dari Client ๐
Tanggal
Client
Metode
Tips
${tipsDetail.map(t => `
${fmtDate(t.transaction?.date)}
${escapeHtml(t.transaction?.client_name_snapshot || '-')}
${escapeHtml(getPaymentMethodLabel(t.payment_method))}
${fmtRp(t.amount)}
`).join('')}
Total Tips
${fmtRp(tipsDetail.reduce((s, t) => s + Number(t.amount || 0), 0))}
` : ''}
Perhitungan Gaji
Gaji Pokok
${fmtRp(payroll.base_salary)}
${payroll.salary_deduction > 0 ? `
${payroll.is_prorated
? `Pro-rata: kerja ${payroll.actual_work_days} dari ${payroll.standard_work_days} hari${payroll.effective_absent_days > 0 ? ` (โ ${payroll.effective_absent_days} hari absen)` : ''}`
: `Potongan absen (${payroll.unpaid_leave_days} hari biasa${payroll.unpaid_leave_weekend_days > 0 ? ` + ${payroll.unpaid_leave_weekend_days} hari weekend ร 2` : ''} = ${payroll.effective_absent_days} hari ร ${fmtRp(Math.round(payroll.base_salary / payroll.standard_work_days))})`}
โ${fmtRp(payroll.salary_deduction)}
Gaji Pokok Aktual
${fmtRp(payroll.base_salary_actual)}
` : ''}
${(payroll.meal_deduction || 0) > 0 ? `
Uang Makan
${fmtRp(payroll.meal_allowance_full)}
${payroll.is_prorated
? `Pro-rata + absen: dibayar ${payroll.meal_days_paid} dari ${payroll.standard_work_days} hari`
: `Potongan absen ${payroll.meal_absent_days} hari (dibayar ${payroll.meal_days_paid} dari ${payroll.meal_days_base} hari)`}
โ${fmtRp(payroll.meal_deduction)}
Uang Makan Aktual
${fmtRp(payroll.meal_allowance)}
` : `
Uang Makan
${fmtRp(payroll.meal_allowance)}
`}
${(payroll.bpjs_kesehatan || 0) > 0 ? `
BPJS Kesehatan (tunjangan dari perusahaan)
${fmtRp(payroll.bpjs_kesehatan)}
` : ''}
Komisi Treatment
${fmtRp(payroll.treatment_commission)}
${hsCommission > 0 ? `
Komisi Home Service
${fmtRp(hsCommission)}
` : ''}
${(payroll.tips || 0) > 0 ? `
Tips dari Client ๐
+${fmtRp(payroll.tips)}
` : ''}
${payroll.bonus > 0 ? `
Bonus${(payroll.notes && !(payroll.extra_deduction > 0)) ? ` (${escapeHtml(payroll.notes)})` : ''}
+${fmtRp(payroll.bonus)}
` : ''}
${payroll.extra_deduction > 0 ? `
GAJI DITERIMA
${fmtRp(payroll.total_before_deduction != null ? payroll.total_before_deduction : (payroll.total + payroll.extra_deduction))}
Potongan / Kasbon${payroll.notes ? ` (${escapeHtml(payroll.notes)})` : ''}
โ${fmtRp(payroll.extra_deduction)}
GAJI DITERIMA SETELAH POTONGAN
${fmtRp(payroll.total)}
` : `
GAJI DITERIMA
${fmtRp(payroll.total)}
`}
${escapeHtml(employee.full_name)}
Karyawan
([\s\S]*?)<\/div>\s*<\/body>/);
if (slipMatch) {
return `
${slipMatch[1]}
`;
}
return '';
}).join('\n');
combinedHtml = firstSlip.replace('
', additionalSections + '\n');
}
showSlipModal(combinedHtml, `slip-gaji-${slips.length}-karyawan`);
}
// Show slip in iframe modal (works on iOS Safari, Android, all browsers)
function showSlipModal(slipHtml, downloadName = 'slip-gaji', modalTitle = '๐ Slip Gaji', onPng = null) {
// Remove any existing modal
const existing = document.getElementById('jbb-slip-modal');
if (existing) existing.remove();
// Create modal overlay
const overlay = document.createElement('div');
overlay.id = 'jbb-slip-modal';
overlay.style.cssText = `
position: fixed;
inset: 0;
background: rgba(36, 26, 44, 0.85);
z-index: 99999;
display: flex;
flex-direction: column;
backdrop-filter: blur(4px);
`;
// Header bar with action buttons
const header = document.createElement('div');
header.style.cssText = `
background: #fdfbf9;
padding: 12px 16px;
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
border-bottom: 1px solid #e5dce5;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding-top: max(12px, env(safe-area-inset-top));
`;
header.innerHTML = `