Rempah Cantik

`); receiptWindow.document.close(); } // Send receipt via WhatsApp function sendReceiptWhatsapp() { const totalHarga = transactions.reduce((sum, t) => sum + t.product.price * t.quantity, 0); let diskonPercent = 0; if (totalHarga >= 200000) diskonPercent = 10; else if (totalHarga >= 100000) diskonPercent = 5; const diskonValue = totalHarga * diskonPercent / 100; const totalBayar = totalHarga - diskonValue; let message = `*Struk Transaksi Rempah Cantik*\nTanggal: ${new Date().toLocaleString('id-ID')}\n\n`; message += `Produk:\n`; transactions.forEach(t => { message += `- ${t.product.name} x${t.quantity} = ${formatRupiah(t.product.price * t.quantity)}\n`; }); message += `\nTotal Harga: ${formatRupiah(totalHarga)}\n`; message += `Diskon: ${diskonPercent}% (-${formatRupiah(diskonValue)})\n`; message += `*Total Bayar: ${formatRupiah(totalBayar)}*\n\n`; message += `Terima kasih telah berbelanja di Rempah Cantik!`; const encodedMessage = encodeURIComponent(message); // WhatsApp API link (opens WhatsApp Web or app) const waLink = `https://wa.me/?text=${encodedMessage}`; window.open(waLink, '_blank', 'noopener,noreferrer'); } } // Panel Ringkasan: Summary metrics & chart function renderRingkasanPanel(container) { container.innerHTML = ''; // Summary cards container const summaryGrid = createElement('div', { class: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8' }); // Calculate summary metrics const totalTransaksi = transactions.length; const totalItems = transactions.reduce((sum, t) => sum + t.quantity, 0); const totalPendapatan = transactions.reduce((sum, t) => sum + t.product.price * t.quantity, 0); let diskonPercent = 0; if (totalPendapatan >= 200000) diskonPercent = 10; else if (totalPendapatan >= 100000) diskonPercent = 5; const diskonValue = totalPendapatan * diskonPercent / 100; const totalPendapatanBersih = totalPendapatan - diskonValue; // Cards const cardTotalTransaksi = createSummaryCard('Total Transaksi', totalTransaksi.toString(), 'fas fa-receipt', 'primary'); const cardTotalItems = createSummaryCard('Total Item Terjual', totalItems.toString(), 'fas fa-boxes', 'primary'); const cardPendapatan = createSummaryCard('Pendapatan Bersih', formatRupiah(totalPendapatanBersih), 'fas fa-wallet', 'primary'); summaryGrid.appendChild(cardTotalTransaksi); summaryGrid.appendChild(cardTotalItems); summaryGrid.appendChild(cardPendapatan); container.appendChild(summaryGrid); // Chart container const chartCard = createElement('section', { class: 'bg-white rounded-lg shadow p-6 border border-gray-100' }, createElement('h2', { class: 'text-2xl font-semibold mb-4 text-primary-700' }, 'Grafik Pendapatan per Produk'), createElement('div', { id: 'chartContainer', class: 'w-full h-80' }) ); container.appendChild(chartCard); // Prepare data for chart const productSalesMap = new Map(); transactions.forEach(t => { const prev = productSalesMap.get(t.product.name) || 0; productSalesMap.set(t.product.name, prev + t.product.price * t.quantity); }); const chartOptions = { chart: { type: 'bar', height: 320, toolbar: { show: false }, animations: { enabled: true, easing: 'easeinout', speed: 600 } }, series: [{ name: 'Pendapatan', data: Array.from(productSalesMap.values()) }], xaxis: { categories: Array.from(productSalesMap.keys()), labels: { rotate: -45, style: { fontSize: '12px' } } }, yaxis: { labels: { formatter: val => formatRupiah(val), style: { fontSize: '12px' } } }, tooltip: { y: { formatter: val => formatRupiah(val) } }, colors: ['#4f46e5'], dataLabels: { enabled: false } }; const chart = new ApexCharts(document.querySelector('#chartContainer'), chartOptions); chart.render(); // Helper for summary card function createSummaryCard(title, value, iconClass, colorType = 'primary') { return createElement('div', { class: 'bg-white rounded-lg shadow p-6 border border-gray-100 flex items-center gap-4' }, createElement('div', { class: `p-3 rounded-full bg-${colorType}-100 text-${colorType}-600 text-2xl flex items-center justify-center flex-shrink-0` }, createElement('i', { class: iconClass })), createElement('div', {}, createElement('p', { class: 'text-gray-600 font-semibold' }, title), createElement('p', { class: `text-${colorType}-700 font-bold text-xl mt-1` }, value) ) ); } } // Initialization document.addEventListener('DOMContentLoaded', () => { currentUser = loadUserFromStorage(); if (currentUser) { renderApp(); } else { renderLogin(); } });