index.html

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank Statement Converter to Odoo / Excel</title>
    <!-- Library SheetJS untuk Ekspor & Baca Excel .xlsx -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <!-- Library PDF.js untuk Ekstraksi PDF BCA Client-Side -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        if (typeof pdfjsLib !== 'undefined') {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }
    </script>
    <!-- Google Font Plus Jakarta Sans -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="src/css/style.css">
</head>

<body>

    <div class="container">
        <div class="header-section">
            <span class="header-tag">Client-Side Multi-Bank Converter</span>
            <h1>Bank Statement Converter</h1>
            <p class="subtitle">Konversi mutasi rekening Bank menjadi format Odoo</p>
        </div>

        <!-- 4 Bank Tab Selector -->
        <div class="tabs-nav">
            <button id="tabMANDIRI" class="tab-btn active mandiri-tab" onclick="switchBank('mandiri')">
                <img src="public/Mandiri.png" alt="Bank Mandiri" class="tab-logo" onerror="this.style.display='none'">
                <span>Mandiri</span>
                <span class="tab-badge badge-mandiri">CSV</span>
            </button>
            <button id="tabBCA" class="tab-btn bca-tab" onclick="switchBank('bca')">
                <img src="public/BCA.png" alt="Bank BCA" class="tab-logo" onerror="this.style.display='none'">
                <span>BCA</span>
                <span class="tab-badge badge-bca">PDF</span>
            </button>
            <button id="tabBRI" class="tab-btn bri-tab" onclick="switchBank('bri')">
                <img src="public/BRI.png" alt="Bank BRI" class="tab-logo" onerror="this.style.display='none'">
                <span>BRI</span>
                <span class="tab-badge badge-bri">CSV</span>
            </button>
            <button id="tabBSI" class="tab-btn bsi-tab" onclick="switchBank('bsi')">
                <img src="public/BSI.png" alt="Bank BSI" class="tab-logo" onerror="this.style.display='none'">
                <span>BSI</span>
                <span class="tab-badge badge-bsi">XLSX / XLS</span>
            </button>
        </div>

        <!-- Upload Area -->
        <div class="upload-area" id="dropZone" onclick="document.getElementById('fileInput').click();">
            <span class="upload-icon">📄</span>
            <span class="file-label" id="uploadLabel">Pilih atau Seret File Rekening Koran Mandiri</span>
            <span class="file-sublabel" id="uploadSublabel">Format: .csv</span>
            <div class="file-name" id="fileNameDisplay" style="display: none;"></div>
            <input type="file" id="fileInput" accept=".csv, .xlsx, .xls" onchange="handleFileSelect(event)">
        </div>

        <!-- Action Buttons (Unified Dual Export for All Banks) -->
        <div class="btn-group">
            <button id="downloadOdooBtn" class="btn" disabled>
                Download Odoo Statement (.xlsx)
            </button>
            <button id="downloadMutasiBtn" class="btn btn-secondary" disabled>
                Download Tabel Mutasi Lengkap (.xlsx)
            </button>
        </div>

        <!-- Status Box -->
        <div id="statusBox" class="status-box"></div>

        <!-- Account Info Card -->
        <div id="accountCard" class="account-card">
            <div class="account-grid">
                <div class="meta-item">
                    <span class="meta-label">Bank</span>
                    <span class="meta-value" id="metaBank">-</span>
                </div>
                <div class="meta-item">
                    <span class="meta-label">Nama Rekening</span>
                    <span class="meta-value" id="metaNama">-</span>
                </div>
                <div class="meta-item">
                    <span class="meta-label">No. Rekening</span>
                    <span class="meta-value" id="metaNoRek">-</span>
                </div>
                <div class="meta-item">
                    <span class="meta-label">Periode Mutasi</span>
                    <span class="meta-value" id="metaPeriode">-</span>
                </div>
                <div class="meta-item">
                    <span class="meta-label">Integritas Data</span>
                    <span class="meta-value success" id="metaIntegrity">OK</span>
                </div>
            </div>
        </div>

        <!-- Interactive Data Preview -->
        <div id="previewSection" class="preview-section">
            <div class="preview-header">
                <span class="preview-title" id="previewTitle">Preview Transaksi</span>
                <span class="preview-count" id="previewCount">0 baris</span>
            </div>
            <div class="table-wrapper">
                <table id="previewTable">
                    <thead>
                        <tr id="previewTableHead"></tr>
                    </thead>
                    <tbody id="previewTableBody"></tbody>
                </table>
            </div>
        </div>

        <!-- Rules / Guidance Card -->
        <div class="rules-card" id="rulesCard">
            <strong id="rulesTitle">Keterangan Format File Bank Mandiri:</strong>
            <ul id="rulesList">
                <li>Mendukung file <code>.csv</code>asli unduhan Kopra</li>
                <li>Kolom otomatis terdeteksi: <code>PostDate/Date</code>, <code>Remarks/Keterangan</code>, <code>Credit</code>, <code>Debit</code>.</li>
                <li>Mendukung ekspor ke <b>Odoo Clean (.xlsx)</b> dan <b>Tabel Mutasi Lengkap (.xlsx)</b>.</li>
            </ul>
        </div>

        <div class="footer-credit">
            &copy; 2026 Imam Wahyudi dan Indah Tri Hartini
        </div>
    </div>

    <!-- Scripts -->
    <script src="src/js/csv-utils.js"></script>
    <script src="src/js/mandiri-parser.js"></script>
    <script src="src/js/bca-parser.js"></script>
    <script src="src/js/bri-parser.js"></script>
    <script src="src/js/bsi-parser.js"></script>
    <script src="src/js/app.js"></script>

</body>

</html>