Spaces:

ITjez
/

zona

Running

App Files Files Community

ITjez commited on Aug 14, 2025

Commit

6f701f5

verified ·

1 Parent(s): 53d7769

buat editable untuk payment method dan nilai nya - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +364 -617

index.html CHANGED Viewed

@@ -3,659 +3,406 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Finance Settlement System</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .custom-checkbox input:checked ~ .checkmark {
-            background-color: #3b82f6;
-            border-color: #3b82f6;
-        }
-        .custom-checkbox .checkmark:after {
-            content: "";
-            position: absolute;
-            display: none;
-            left: 6px;
-            top: 2px;
-            width: 5px;
-            height: 10px;
-            border: solid white;
-            border-width: 0 2px 2px 0;
-            transform: rotate(45deg);
         }
-        .custom-checkbox input:checked ~ .checkmark:after {
-            display: block;
         }
-        .modal {
-            transition: opacity 0.3s ease, transform 0.3s ease;
-            transform: translateY(-20px);
-            opacity: 0;
-            pointer-events: none;
         }
-        .modal.active {
             transform: translateY(0);
-            opacity: 1;
-            pointer-events: auto;
         }
-        select option[value="all"] {
-            font-weight: bold;
-            background-color: #f3f4f6;
         }
-        select option:checked i.fa-check {
-            display: inline-block !important;
-            color: #3b82f6;
         }
-        select option i.fa-check-double {
-            color: #3b82f6;
         }
-        select option {
-            padding: 8px;
         }
     </style>
 </head>
 <body class="bg-gray-100">
-    <div class="container mx-auto px-4 py-8">
-        <h1 class="text-2xl font-bold text-gray-800 mb-6">Finance Settlement System</h1>
-        <!-- Filter Section -->
-        <div class="bg-white rounded-lg shadow p-6 mb-6">
-            <h2 class="text-lg font-semibold text-gray-700 mb-4">Filter Transaksi</h2>
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Mulai</label>
-                    <input type="date" id="startDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Akhir</label>
-                    <input type="date" id="endDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
-                    <select id="paymentMethod" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option value="">-- Pilih Payment Method --</option>
-                        <option value="all"><i class="fas fa-check-double mr-2"></i>Select All Payment Methods</option>
-                        <option value="cash"><i class="fas fa-check mr-2 hidden"></i>Cash</option>
-                        <option value="edc_bca"><i class="fas fa-check mr-2 hidden"></i>EDC BCA</option>
-                        <option value="edc_bri"><i class="fas fa-check mr-2 hidden"></i>EDC BRI</option>
-                        <option value="edc_bni"><i class="fas fa-check mr-2 hidden"></i>EDC BNI</option>
-                        <option value="transfer_bank"><i class="fas fa-check mr-2 hidden"></i>Transfer Bank</option>
-                        <option value="qris_bri"><i class="fas fa-check mr-2 hidden"></i>QRIS BRI</option>
-                    </select>
-                </div>
-                <div id="subPaymentContainer" class="hidden">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Sub Payment</label>
-                    <select id="subPayment" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option value="">-- Pilih Sub Payment --</option>
-                        <option value="all"><i class="fas fa-check-double mr-2"></i>Select All Sub Payments</option>
-                        <option value="on_us"><i class="fas fa-check mr-2 hidden"></i>On Us</option>
-                        <option value="off_us"><i class="fas fa-check mr-2 hidden"></i>Off Us</option>
-                    </select>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Outlet</label>
-                    <select id="outletFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option value="">-- Semua Outlet --</option>
-                        <option value="Outlet A">Outlet A</option>
-                        <option value="Outlet B">Outlet B</option>
-                        <option value="Outlet C">Outlet C</option>
-                    </select>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
-                    <select id="statusFilter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option value="">-- Semua Status --</option>
-                        <option value="DONE">DONE</option>
-                        <option value="SETTLEMENT">SETTLEMENT</option>
-                    </select>
-                </div>
-                <div class="md:col-span-2 flex items-end">
-                    <button id="filterButton" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md mr-2">
-                        <i class="fas fa-filter mr-2"></i>Filter
-                    </button>
-                    <button id="resetButton" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
-                        <i class="fas fa-redo mr-2"></i>Reset
-                    </button>
-                </div>
-            </div>
-        </div>
-        <!-- Summary Section -->
-        <div class="bg-white rounded-lg shadow p-6 mb-6">
-            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-700">Total Net Sales</h2>
-                    <p class="text-2xl font-bold text-blue-600" id="totalNetSales">Rp 0</p>
-                </div>
-                <div class="mt-4 md:mt-0">
-                    <p class="text-sm text-gray-500 mb-2">Selected for settlement: <span id="selectedCount">0</span> transactions</p>
-                    <p class="text-sm font-medium">Selected Net Sales: <span class="text-green-600" id="selectedNetSales">Rp 0</span></p>
-                </div>
-                <button id="settlementButton" class="mt-4 md:mt-0 bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                    <i class="fas fa-check-circle mr-2"></i>Settlement
                 </button>
             </div>
-            <div class="border-t border-gray-200 pt-4">
-                <h3 class="text-md font-semibold text-gray-700 mb-3">Net Sales by Payment Method</h3>
-                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4" id="paymentMethodTotals">
-                    <!-- Payment method totals will be inserted here -->
-                </div>
-            </div>
-        </div>
-        <!-- Transaction Table -->
-        <div class="bg-white rounded-lg shadow overflow-hidden">
-            <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
-                        <tr>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                <div class="custom-checkbox flex items-center">
-                                    <input type="checkbox" id="selectAll" class="opacity-0 absolute h-5 w-5">
-                                    <span class="checkmark bg-white border-2 border-gray-400 rounded-md w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span>
                                 </div>
-                            </th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal Transaksi</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receipt Number</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Outlet</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Qty</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Net Sales</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Method</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sub Payment</th>
-                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                        </tr>
-                    </thead>
-                    <tbody class="bg-white divide-y divide-gray-200" id="transactionTableBody">
-                        <!-- Sample data will be inserted here by JavaScript -->
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <!-- Confirmation Modal -->
-        <div id="confirmationModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-            <div class="bg-white rounded-lg p-6 w-full max-w-md">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-lg font-semibold text-gray-800">Konfirmasi Settlement</h3>
-                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
-                        <i class="fas fa-times"></i>
-                    </button>
                 </div>
-                <p class="text-gray-700 mb-6">Apakah kamu yakin melakukan SETTLEMENT Transaksi Penjualan ini?</p>
-                <div class="flex justify-end space-x-3">
-                    <button id="cancelSettlement" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100">Batalkan</button>
-                    <button id="confirmSettlement" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">Yakin</button>
                 </div>
             </div>
         </div>
     </div>
     <script>
-        // Sample transaction data
-        const transactions = [
-            {
-                id: 1,
-                date: '2023-06-01',
-                receipt: 'TRX-001',
-                outlet: 'Outlet A',
-                qty: 3,
-                netSales: 150000,
-                paymentMethod: 'cash',
-                subPayment: '',
-                status: 'DONE'
-            },
-            {
-                id: 2,
-                date: '2023-06-01',
-                receipt: 'TRX-002',
-                outlet: 'Outlet B',
-                qty: 2,
-                netSales: 250000,
-                paymentMethod: 'edc_bca',
-                subPayment: 'on_us',
-                status: 'DONE'
-            },
-            {
-                id: 3,
-                date: '2023-06-02',
-                receipt: 'TRX-003',
-                outlet: 'Outlet C',
-                qty: 5,
-                netSales: 375000,
-                paymentMethod: 'edc_bri',
-                subPayment: 'off_us',
-                status: 'DONE'
-            },
-            {
-                id: 4,
-                date: '2023-06-02',
-                receipt: 'TRX-004',
-                outlet: 'Outlet A',
-                qty: 1,
-                netSales: 80000,
-                paymentMethod: 'transfer_bank',
-                subPayment: '',
-                status: 'DONE'
-            },
-            {
-                id: 5,
-                date: '2023-06-03',
-                receipt: 'TRX-005',
-                outlet: 'Outlet B',
-                qty: 4,
-                netSales: 320000,
-                paymentMethod: 'qris_bri',
-                subPayment: '',
-                status: 'DONE'
-            },
-            {
-                id: 6,
-                date: '2023-06-03',
-                receipt: 'TRX-006',
-                outlet: 'Outlet C',
-                qty: 2,
-                netSales: 120000,
-                paymentMethod: 'edc_bni',
-                subPayment: 'on_us',
-                status: 'DONE'
-            },
-            {
-                id: 7,
-                date: '2023-06-04',
-                receipt: 'TRX-007',
-                outlet: 'Outlet A',
-                qty: 3,
-                netSales: 210000,
-                paymentMethod: 'cash',
-                subPayment: '',
-                status: 'DONE'
-            },
-            {
-                id: 8,
-                date: '2023-06-04',
-                receipt: 'TRX-008',
-                outlet: 'Outlet B',
-                qty: 1,
-                netSales: 95000,
-                paymentMethod: 'edc_bca',
-                subPayment: 'off_us',
-                status: 'SETTLEMENT'
-            }
-        ];
-        // DOM Elements
-        const transactionTableBody = document.getElementById('transactionTableBody');
-        const selectAllCheckbox = document.getElementById('selectAll');
-        const settlementButton = document.getElementById('settlementButton');
-        const totalNetSalesElement = document.getElementById('totalNetSales');
-        const selectedNetSalesElement = document.getElementById('selectedNetSales');
-        const selectedCountElement = document.getElementById('selectedCount');
-        const confirmationModal = document.getElementById('confirmationModal');
-        const closeModalButton = document.getElementById('closeModal');
-        const cancelSettlementButton = document.getElementById('cancelSettlement');
-        const confirmSettlementButton = document.getElementById('confirmSettlement');
-        const paymentMethodSelect = document.getElementById('paymentMethod');
-        const subPaymentContainer = document.getElementById('subPaymentContainer');
-        const subPaymentSelect = document.getElementById('subPayment');
-        const startDateInput = document.getElementById('startDate');
-        const endDateInput = document.getElementById('endDate');
-        const filterButton = document.getElementById('filterButton');
-        const resetButton = document.getElementById('resetButton');
-        const outletFilter = document.getElementById('outletFilter');
-        const statusFilter = document.getElementById('statusFilter');
-        // Format currency
-        const formatCurrency = (amount) => {
-            return 'Rp ' + amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-        };
-        // Calculate payment method totals
-        const calculatePaymentMethodTotals = (transactionsToCalculate) => {
-            const totals = {
-                'cash': { total: 0, settled: 0, unsettled: 0 },
-                'edc_bca': { total: 0, settled: 0, unsettled: 0 },
-                'edc_bri': { total: 0, settled: 0, unsettled: 0 },
-                'edc_bni': { total: 0, settled: 0, unsettled: 0 },
-                'transfer_bank': { total: 0, settled: 0, unsettled: 0 },
-                'qris_bri': { total: 0, settled: 0, unsettled: 0 }
-            };
-            transactionsToCalculate.forEach(transaction => {
-                totals[transaction.paymentMethod].total += transaction.netSales;
-                if (transaction.status === 'SETTLEMENT') {
-                    totals[transaction.paymentMethod].settled += transaction.netSales;
-                } else {
-                    totals[transaction.paymentMethod].unsettled += transaction.netSales;
-                }
-            });
-            return totals;
-        };
-        // Render payment method totals
-        const renderPaymentMethodTotals = (totals) => {
-            const container = document.getElementById('paymentMethodTotals');
-            container.innerHTML = '';
-            for (const [method, amounts] of Object.entries(totals)) {
-                const card = document.createElement('div');
-                card.className = 'bg-gray-50 rounded-lg p-3';
-                card.innerHTML = `
-                    <p class="text-sm font-medium text-gray-500">${getPaymentMethodLabel(method)}</p>
-                    <p class="text-lg font-semibold text-gray-800">${formatCurrency(amounts.total)}</p>
-                    <div class="flex justify-between text-xs mt-1">
-                        <span class="text-gray-500">Settled:</span>
-                        <span class="text-green-600">${formatCurrency(amounts.settled)}</span>
-                    </div>
-                    <div class="flex justify-between text-xs mt-1">
-                        <span class="text-gray-500">Unsettled:</span>
-                        <span class="text-yellow-600">${formatCurrency(amounts.unsettled)}</span>
-                    </div>
-                `;
-                container.appendChild(card);
             }
-        };
-        // Render transactions table
-        const renderTransactions = (transactionsToRender) => {
-            transactionTableBody.innerHTML = '';
-            // Calculate total net sales
-            let totalNetSales = 0;
-            // Calculate and render payment method totals
-            const paymentMethodTotals = calculatePaymentMethodTotals(transactionsToRender);
-            renderPaymentMethodTotals(paymentMethodTotals);
-            transactionsToRender.forEach(transaction => {
-                totalNetSales += transaction.netSales;
-                const row = document.createElement('tr');
-                row.className = 'hover:bg-gray-50';
-                row.innerHTML = `
-                    <td class="px-6 py-4 whitespace-nowrap">
-                        <div class="custom-checkbox flex items-center">
-                            <input type="checkbox" data-id="${transaction.id}" data-netsales="${transaction.netSales}"
-                                class="transaction-checkbox opacity-0 absolute h-5 w-5"
-                                ${transaction.status === 'SETTLEMENT' ? 'disabled' : ''}>
-                            <span class="checkmark bg-white border-2 ${transaction.status === 'SETTLEMENT' ? 'border-gray-300 bg-gray-100' : 'border-gray-400'} rounded-md w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2"></span>
-                        </div>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.date}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${transaction.receipt}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.outlet}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.qty}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(transaction.netSales)}</td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        ${getPaymentMethodLabel(transaction.paymentMethod)}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        ${transaction.subPayment ? getSubPaymentLabel(transaction.subPayment) : '-'}
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
-                            ${transaction.status === 'DONE' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}">
-                            ${transaction.status}
-                        </span>
-                    </td>
-                `;
-                transactionTableBody.appendChild(row);
-            });
-            // Update total net sales
-            totalNetSalesElement.textContent = formatCurrency(totalNetSales);
-            // Initialize checkbox events
-            initializeCheckboxes();
-        };
-        // Get payment method label
-        const getPaymentMethodLabel = (method) => {
-            const methods = {
-                'cash': 'Cash',
-                'edc_bca': 'EDC BCA',
-                'edc_bri': 'EDC BRI',
-                'edc_bni': 'EDC BNI',
-                'transfer_bank': 'Transfer Bank',
-                'qris_bri': 'QRIS BRI'
-            };
-            return methods[method] || method;
-        };
-        // Get sub payment label
-        const getSubPaymentLabel = (subPayment) => {
-            const subPayments = {
-                'on_us': 'On Us',
-                'off_us': 'Off Us'
-            };
-            return subPayments[subPayment] || subPayment;
-        };
-        // Initialize checkbox events
-        const initializeCheckboxes = () => {
-            const checkboxes = document.querySelectorAll('.transaction-checkbox:not([disabled])');
-            const selectAllCheckmark = document.querySelector('#selectAll ~ .checkmark');
-            // Individual checkbox event
-            checkboxes.forEach(checkbox => {
-                checkbox.addEventListener('change', function() {
-                    const checkmark = this.nextElementSibling;
-                    if (this.checked) {
-                        checkmark.classList.add('bg-blue-600', 'border-blue-600');
-                        checkmark.classList.remove('bg-white', 'border-gray-400');
-                    } else {
-                        checkmark.classList.remove('bg-blue-600', 'border-blue-600');
-                        checkmark.classList.add('bg-white', 'border-gray-400');
-                    }
-                    updateSelectedSummary();
-                    updateSelectAllState();
-                });
-            });
-            // Select all checkbox event
-            selectAllCheckbox.addEventListener('change', function() {
-                const isChecked = this.checked;
-                checkboxes.forEach(checkbox => {
-                    if (!checkbox.disabled) {
-                        checkbox.checked = isChecked;
-                        const checkmark = checkbox.nextElementSibling;
-                        if (isChecked) {
-                            checkmark.classList.add('bg-blue-600', 'border-blue-600');
-                            checkmark.classList.remove('bg-white', 'border-gray-400');
-                        } else {
-                            checkmark.classList.remove('bg-blue-600', 'border-blue-600');
-                            checkmark.classList.add('bg-white', 'border-gray-400');
-                        }
-                    }
-                });
-                updateSelectedSummary();
-                // Update select all checkmark
-                if (isChecked) {
-                    selectAllCheckmark.classList.add('bg-blue-600', 'border-blue-600');
-                    selectAllCheckmark.classList.remove('bg-white', 'border-gray-400');
-                } else {
-                    selectAllCheckmark.classList.remove('bg-blue-600', 'border-blue-600');
-                    selectAllCheckmark.classList.add('bg-white', 'border-gray-400');
-                }
-            });
-        };
-        // Update select all checkbox state
-        const updateSelectAllState = () => {
-            const checkboxes = document.querySelectorAll('.transaction-checkbox:not([disabled])');
-            const checkedCheckboxes = document.querySelectorAll('.transaction-checkbox:not([disabled]):checked');
-            if (checkedCheckboxes.length === checkboxes.length && checkboxes.length > 0) {
-                selectAllCheckbox.checked = true;
-                document.querySelector('#selectAll ~ .checkmark').classList.add('bg-blue-600', 'border-blue-600');
-                document.querySelector('#selectAll ~ .checkmark').classList.remove('bg-white', 'border-gray-400');
-            } else {
-                selectAllCheckbox.checked = false;
-                document.querySelector('#selectAll ~ .checkmark').classList.remove('bg-blue-600', 'border-blue-600');
-                document.querySelector('#selectAll ~ .checkmark').classList.add('bg-white', 'border-gray-400');
             }
-        };
-        // Update selected summary
-        const updateSelectedSummary = () => {
-            const checkedCheckboxes = document.querySelectorAll('.transaction-checkbox:checked');
-            let totalSelectedNetSales = 0;
-            checkedCheckboxes.forEach(checkbox => {
-                totalSelectedNetSales += parseInt(checkbox.dataset.netsales);
-            });
-            selectedNetSalesElement.textContent = formatCurrency(totalSelectedNetSales);
-            selectedCountElement.textContent = checkedCheckboxes.length;
-            // Enable/disable settlement button
-            settlementButton.disabled = checkedCheckboxes.length === 0;
-        };
-        // Show confirmation modal
-        const showConfirmationModal = () => {
-            confirmationModal.classList.add('active');
-        };
-        // Hide confirmation modal
-        const hideConfirmationModal = () => {
-            confirmationModal.classList.remove('active');
-        };
-        // Process settlement
-        const processSettlement = () => {
-            const checkedCheckboxes = document.querySelectorAll('.transaction-checkbox:checked');
-            const transactionIds = Array.from(checkedCheckboxes).map(checkbox => parseInt(checkbox.dataset.id));
-            // Update transaction status in our data
-            transactions.forEach(transaction => {
-                if (transactionIds.includes(transaction.id)) {
-                    transaction.status = 'SETTLEMENT';
-                }
-            });
-            // Re-render the table
-            renderTransactions(filterTransactions());
-            // Hide modal
-            hideConfirmationModal();
-            // Show success message (you can replace this with a proper notification)
-            alert('Settlement berhasil dilakukan!');
-        };
-        // Filter transactions based on selected filters
-        const filterTransactions = () => {
-            const startDate = startDateInput.value;
-            const endDate = endDateInput.value;
-            const paymentMethod = paymentMethodSelect.value;
-            const subPayment = subPaymentSelect.value;
-            const outlet = outletFilter.value;
-            const status = statusFilter.value;
-            const filtered = transactions.filter(transaction => {
-                // Filter by outlet
-                if (outlet && transaction.outlet !== outlet) return false;
-                // Filter by status
-                if (status && transaction.status !== status) return false;
-                // Filter by date range
-                if (startDate && transaction.date < startDate) return false;
-                if (endDate && transaction.date > endDate) return false;
-                // Filter by payment method
-                if (paymentMethod && transaction.paymentMethod !== paymentMethod) return false;
-                // Filter by sub payment (only for EDC payment methods)
-                if (paymentMethod && paymentMethod.startsWith('edc_') && subPayment && transaction.subPayment !== subPayment) {
-                    return false;
-                }
-                return true;
-            });
-        };
-        // Event Listeners
-        settlementButton.addEventListener('click', showConfirmationModal);
-        closeModalButton.addEventListener('click', hideConfirmationModal);
-        cancelSettlementButton.addEventListener('click', hideConfirmationModal);
-        confirmSettlementButton.addEventListener('click', processSettlement);
-        // Payment method change event - show/hide sub payment and handle select all
-        paymentMethodSelect.addEventListener('change', function() {
-            if (this.value === 'all') {
-                // Show checkmarks for all options when "Select All" is chosen
-                this.querySelectorAll('option i.fa-check').forEach(icon => {
-                    icon.classList.remove('hidden');
-                });
-                this.value = '';
-            } else {
-                // Show checkmark for selected option
-                this.querySelectorAll('option i.fa-check').forEach(icon => {
-                    icon.classList.add('hidden');
-                });
-                const selectedOption = this.querySelector('option:checked');
-                if (selectedOption) {
-                    selectedOption.querySelector('i.fa-check')?.classList.remove('hidden');
-                }
             }
-            if (this.value.startsWith('edc_')) {
-                subPaymentContainer.classList.remove('hidden');
-            } else {
-                subPaymentContainer.classList.add('hidden');
-                subPaymentSelect.value = '';
-            }
-        });
-        // Sub payment change event - handle select all
-        subPaymentSelect.addEventListener('change', function() {
-            if (this.value === 'all') {
-                // Show checkmarks for all options when "Select All" is chosen
-                this.querySelectorAll('option i.fa-check').forEach(icon => {
-                    icon.classList.remove('hidden');
-                });
-                this.value = '';
-            } else {
-                // Show checkmark for selected option
-                this.querySelectorAll('option i.fa-check').forEach(icon => {
-                    icon.classList.add('hidden');
-                });
-                const selectedOption = this.querySelector('option:checked');
-                if (selectedOption) {
-                    selectedOption.querySelector('i.fa-check')?.classList.remove('hidden');
-                }
-            }
-        });
-        // Filter button event
-        filterButton.addEventListener('click', function() {
-            renderTransactions(filterTransactions());
-        });
-        // Reset button event
-        resetButton.addEventListener('click', function() {
-            startDateInput.value = '';
-            endDateInput.value = '';
-            paymentMethodSelect.value = '';
-            subPaymentSelect.value = '';
-            subPaymentContainer.classList.add('hidden');
-            outletFilter.value = '';
-            statusFilter.value = '';
-            renderTransactions(transactions);
-        });
-        // Initialize with all transactions
-        renderTransactions(transactions);
-        // Set default dates (today and 7 days ago)
-        const today = new Date();
-        const sevenDaysAgo = new Date();
-        sevenDaysAgo.setDate(today.getDate() - 7);
-        startDateInput.valueAsDate = sevenDaysAgo;
-        endDateInput.valueAsDate = today;
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ITjez/zona" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sales Transaction Detail</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .popup-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
         }
+        .popup-overlay.active {
+            opacity: 1;
+            visibility: visible;
         }
+        .popup-container {
+            background-color: white;
+            border-radius: 0.5rem;
+            width: 90%;
+            max-width: 800px;
+            max-height: 90vh;
+            overflow-y: auto;
+            transform: translateY(20px);
+            transition: transform 0.3s ease;
         }
+        .popup-overlay.active .popup-container {
             transform: translateY(0);
         }
+        .payment-method-icon {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            object-fit: contain;
+        }
+        .status-badge {
+            padding: 0.25rem 0.5rem;
+            border-radius: 1rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        .status-done {
+            background-color: #d1fae5;
+            color: #065f46;
+        }
+        .status-settlement {
+            background-color: #dbeafe;
+            color: #1e40af;
         }
+        .status-outstanding {
+            background-color: #fee2e2;
+            color: #991b1b;
         }
+        .status-partial {
+            background-color: #fef3c7;
+            color: #92400e;
         }
+        @media (max-width: 640px) {
+            .responsive-grid {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
 <body class="bg-gray-100">
+    <!-- Demo button to trigger popup -->
+    <div class="container mx-auto p-4">
+        <button onclick="openPopup()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+            Show Transaction Detail
+        </button>
+    </div>
+    <!-- Popup Structure -->
+    <div id="transactionPopup" class="popup-overlay">
+        <div class="popup-container shadow-xl">
+            <!-- Header -->
+            <div class="flex justify-between items-center p-4 border-b">
+                <h2 class="text-xl font-bold text-gray-800">Transaction Detail</h2>
+                <button onclick="closePopup()" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
                 </button>
             </div>
+            <!-- Main Content -->
+            <div class="p-4">
+                <!-- Transaction Info -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                    <div class="bg-gray-50 p-3 rounded-lg">
+                        <h3 class="font-semibold text-gray-700 mb-2">Transaction Information</h3>
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Date</span>
+                                <span class="font-medium">15/07/2023 14:30:22</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Receipt Number</span>
+                                <span class="font-medium">RC-20230715-001</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Order Number</span>
+                                <span class="font-medium">ORD-20230715-001</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Outlet</span>
+                                <span class="font-medium">Main Store - Jakarta</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Transaction Status</span>
+                                <span class="status-badge status-outstanding">OUTSTANDING</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-50 p-3 rounded-lg">
+                        <div class="flex justify-between items-center mb-2">
+                            <h3 class="font-semibold text-gray-700">Payment Information</h3>
+                            <button onclick="toggleEditPayment()" class="text-blue-500 hover:text-blue-700 text-sm">
+                                <i class="fas fa-edit mr-1"></i> Edit
+                            </button>
+                        </div>
+                        <div class="space-y-3">
+                            <!-- Payment Method 1 -->
+                            <div class="border-b pb-2">
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-600">Payment Method 1</span>
+                                    <span id="paymentMethod1Display" class="font-medium">EDC BCA</span>
+                                    <select id="paymentMethod1Select" class="hidden border rounded p-1 text-sm">
+                                        <option value="EDC BCA">EDC BCA</option>
+                                        <option value="EDC BRI">EDC BRI</option>
+                                        <option value="EDC BNI">EDC BNI</option>
+                                        <option value="Cash">Cash</option>
+                                        <option value="Transfer Bank">Transfer Bank</option>
+                                    </select>
                                 </div>
+                                <div class="flex justify-between mt-1">
+                                    <span class="text-gray-600 text-sm">Amount</span>
+                                    <span id="amount1Display" class="font-medium text-sm">Rp 400,000</span>
+                                    <input id="amount1Input" type="text" class="hidden border rounded p-1 text-sm w-24" value="400000">
+                                </div>
+                                <div class="flex justify-between mt-1">
+                                    <span class="text-gray-600 text-sm">Sub Payment</span>
+                                    <span id="subPayment1Display" class="font-medium text-sm">ON US</span>
+                                    <select id="subPayment1Select" class="hidden border rounded p-1 text-sm">
+                                        <option value="ON US">ON US</option>
+                                        <option value="OFF US">OFF US</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <!-- Payment Method 2 -->
+                            <div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-600">Payment Method 2</span>
+                                    <span id="paymentMethod2Display" class="font-medium"></span>
+                                    <select id="paymentMethod2Select" class="hidden border rounded p-1 text-sm">
+                                        <option value="">None</option>
+                                        <option value="EDC BCA">EDC BCA</option>
+                                        <option value="EDC BRI">EDC BRI</option>
+                                        <option value="EDC BNI">EDC BNI</option>
+                                        <option value="Cash">Cash</option>
+                                        <option value="Transfer Bank">Transfer Bank</option>
+                                    </select>
+                                </div>
+                                <div class="flex justify-between mt-1">
+                                    <span class="text-gray-600 text-sm">Amount</span>
+                                    <span id="amount2Display" class="font-medium text-sm">Rp 0</span>
+                                    <input id="amount2Input" type="text" class="hidden border rounded p-1 text-sm w-24" value="0">
+                                </div>
+                            </div>
+                            <!-- Payment Status -->
+                            <div class="flex justify-between items-center pt-2 border-t">
+                                <span class="text-gray-600">Payment Status</span>
+                                <div class="flex items-center">
+                                    <span class="status-badge status-partial mr-2">PARTIALLY PAID</span>
+                                    <span id="remainingDisplay" class="text-red-500 font-medium">Rp 90,000 remaining</span>
+                                </div>
+                            </div>
+                            <div id="paymentEditButtons" class="hidden flex justify-end gap-2 pt-2">
+                                <button onclick="cancelEditPayment()" class="px-3 py-1 border rounded text-gray-700 hover:bg-gray-50 text-sm">
+                                    Cancel
+                                </button>
+                                <button onclick="savePaymentChanges()" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm">
+                                    Save Changes
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+                <!-- Product Info -->
+                <div class="mb-6">
+                    <h3 class="font-semibold text-gray-700 mb-3">Product Information</h3>
+                    <div class="bg-gray-50 p-3 rounded-lg overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-100">
+                                <tr>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Article ID</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Article Name</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SKU</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Qty</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gross Sales</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nameset</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Discount</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Net Sales</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200">
+                                <tr>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">ART-00123</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Premium T-Shirt</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">TS-PRM-BL-S</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">2</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Rp 500,000</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Rp 40,000</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Rp 50,000</td>
+                                    <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Rp 490,000</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <!-- Financial Info -->
+                <div class="mb-6">
+                    <h3 class="font-semibold text-gray-700 mb-3">Financial Information</h3>
+                    <div class="bg-gray-50 p-3 rounded-lg">
+                        <div class="space-y-3">
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Gross Sales</span>
+                                <span class="font-medium">Rp 500,000</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Nameset</span>
+                                <span class="font-medium">Rp 40,000</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Discount</span>
+                                <span class="font-medium">- Rp 50,000</span>
+                            </div>
+                            <div class="flex justify-between border-b pb-2">
+                                <span class="text-gray-600">Net Sales</span>
+                                <span class="font-medium">Rp 490,000</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">COGS</span>
+                                <span class="font-medium">Rp 200,000</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-600">Gross Margin</span>
+                                <span class="font-medium text-green-600">Rp 290,000 (59.18%)</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Payment Method Options (Hidden by default, shown when changing payment method) -->
+                <div class="hidden" id="paymentMethodOptions">
+                    <h3 class="font-semibold text-gray-700 mb-3">Select Payment Method</h3>
+                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>Cash</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>EDC BCA</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>EDC BRI</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>EDC BNI</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>Transfer Bank</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>QRIS BRI</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>SHOPEE</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>TIKTOK</span>
+                        </button>
+                        <button class="flex items-center p-2 border rounded hover:bg-gray-50">
+                            <span>TOKOPEDIA</span>
+                        </button>
+                    </div>
                 </div>
             </div>
+            <!-- Footer -->
+            <div class="flex justify-end p-4 border-t gap-2">
+                <button onclick="closePopup()" class="px-4 py-2 border rounded text-gray-700 hover:bg-gray-50">
+                    Close
+                </button>
+                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                    <i class="fas fa-print mr-2"></i> Print Receipt
+                </button>
+            </div>
         </div>
     </div>
     <script>
+        // Popup control functions
+        function openPopup() {
+            document.getElementById('transactionPopup').classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+        function closePopup() {
+            document.getElementById('transactionPopup').classList.remove('active');
+            document.body.style.overflow = 'auto';
+        }
+        // Close popup when clicking outside
+        document.getElementById('transactionPopup').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closePopup();
             }
+        });
+        // Toggle edit mode for payment information
+        let isEditingPayment = false;
+        function toggleEditPayment() {
+            isEditingPayment = !isEditingPayment;
+            // Toggle display elements
+            document.getElementById('paymentMethod1Display').classList.toggle('hidden');
+            document.getElementById('paymentMethod2Display').classList.toggle('hidden');
+            document.getElementById('amount1Display').classList.toggle('hidden');
+            document.getElementById('amount2Display').classList.toggle('hidden');
+            document.getElementById('subPayment1Display').classList.toggle('hidden');
+            // Toggle input elements
+            document.getElementById('paymentMethod1Select').classList.toggle('hidden');
+            document.getElementById('paymentMethod2Select').classList.toggle('hidden');
+            document.getElementById('amount1Input').classList.toggle('hidden');
+            document.getElementById('amount2Input').classList.toggle('hidden');
+            document.getElementById('subPayment1Select').classList.toggle('hidden');
+            // Toggle edit buttons
+            document.getElementById('paymentEditButtons').classList.toggle('hidden');
+        }
+        function cancelEditPayment() {
+            if (isEditingPayment) {
+                toggleEditPayment();
             }
+        }
+        function savePaymentChanges() {
+            // Get values from inputs
+            const method1 = document.getElementById('paymentMethod1Select').value;
+            const method2 = document.getElementById('paymentMethod2Select').value;
+            const amount1 = parseInt(document.getElementById('amount1Input').value) || 0;
+            const amount2 = parseInt(document.getElementById('amount2Input').value) || 0;
+            const subPayment = document.getElementById('subPayment1Select').value;
+            // Update display values
+            document.getElementById('paymentMethod1Display').textContent = method1;
+            document.getElementById('paymentMethod2Display').textContent = method2;
+            document.getElementById('amount1Display').textContent = `Rp ${amount1.toLocaleString()}`;
+            document.getElementById('amount2Display').textContent = `Rp ${amount2.toLocaleString()}`;
+            document.getElementById('subPayment1Display').textContent = subPayment;
+            // Calculate remaining amount (assuming total is 490,000 from the example)
+            const totalPaid = amount1 + amount2;
+            const remaining = 490000 - totalPaid;
+            document.getElementById('remainingDisplay').textContent = `Rp ${remaining.toLocaleString()} remaining`;
+            // Update payment status if needed
+            if (remaining <= 0) {
+                document.querySelector('.status-badge.status-partial').className = 'status-badge status-done';
+                document.querySelector('.status-badge.status-partial').textContent = 'PAID';
             }
+            // Exit edit mode
+            toggleEditPayment();
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ITjez/zona" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>