// onboarding-monitor.jsx — Onboarding Monitor page
function OnboardingMonitorPage({ onLogout, onNavigate, primary, secondary, sidebarColor, pendingApproval = 0, role = 'super', user }) {
  const TEAL = primary || '#0056D2';
  const ORANGE = secondary || '#cf5a27';
  const GREEN = '#74b50c', RED = '#ed3151', AMBER = '#d9920b';

  const getMockDetail = (m) => {
    if (!m) return null;
    return {
      nmid: 'NMID' + m.id.slice(-8),
      merchantName: m.merchant,
      mcc: m.type === 'Corporate' ? 'Reguler — Peralatan Telekomunikasi & Penjualan Telepon (4812)' : 'Reguler — Eating Places / Restoran (5812)',
      mccCode: m.type === 'Corporate' ? '4812' : '5812',
      businessType: m.type === 'Corporate' || m.type === 'Koperasi' ? 'Badan Hukum' : 'Individual',
      legalName: m.type === 'Corporate' ? m.merchant : '-',
      npwp: '11.232.131.2-321.313',
      omset: m.type === 'Corporate' ? 'UME — > 200 Juta s/d 4 Milyar' : 'Mikro — < 50 Juta',
      address: `Jl. Jenderal Sudirman No. ${m.id.slice(-2)}, Gedung Sentosa`,
      province: 'DKI Jakarta',
      city: m.city,
      kecamatan: 'Tanah Abang',
      kelurahan: 'Karet Tengsin',
      postalCode: '10220',
      picName: m.owner,
      picPhone: '0812 3456 ' + m.id.slice(-2),
      picNik: '317101' + m.id.slice(-4) + '0002',
      picEmail: m.owner.toLowerCase().replace(/\s+/g, '.') + '@gmail.com',
      picAddress: `Jl. Melati Indah No. ${m.id.slice(-2)}`,
      picProvince: 'DKI Jakarta',
      picCity: m.city,
      picKecamatan: 'Tanah Abang',
      picKelurahan: 'Karet Tengsin',
      picPostalCode: '10220',
      bankName: 'hibank (BNI Group)',
      accountNumber: '1234' + m.id.slice(-4),
      accountHolder: m.owner.toUpperCase(),
      ktpFile: 'KTP_' + m.owner.toUpperCase().replace(/\s+/g, '_') + '.jpg',
      npwpFile: 'NPWP_' + m.merchant.toUpperCase().replace(/\s+/g, '_') + '.pdf',
    };
  };

  const renderDetailStepContent = (dm) => {
    if (!dm) return null;
    if (activeDetailTab === 0) {
      return (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: `${ORANGE}10`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bx bx-store-alt" style={{ fontSize: 18, color: ORANGE }} />
            </div>
            <div>
              <h4 style={{ fontSize: 15, fontWeight: 700, color: '#171919', margin: 0 }}>Data Merchant</h4>
              <p style={{ fontSize: 12, color: '#a7a8a8', margin: 0 }}>Identitas usaha dan kategori QRIS.</p>
            </div>
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Existing NMID Merchant (opsional)</label>
              <input value={dm.nmid} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Nama Merchant / QR *</label>
              <input value={dm.merchantName} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div style={{ gridColumn: 'span 2' }}>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Merchant Category *</label>
              <input value={dm.mcc} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Merchant Category Code</label>
              <input value={dm.mccCode} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Jenis Usaha *</label>
              <input value={dm.businessType} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div style={{ gridColumn: 'span 2' }}>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Nama Badan Hukum</label>
              <input value={dm.legalName} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>NPWP *</label>
              <input value={dm.npwp} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Rata-Rata Omset Perbulan *</label>
              <input value={dm.omset} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
          </div>
        </div>
      );
    }
    if (activeDetailTab === 1) {
      return (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: `${ORANGE}10`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bx bx-map-alt" style={{ fontSize: 18, color: ORANGE }} />
            </div>
            <div>
              <h4 style={{ fontSize: 15, fontWeight: 700, color: '#171919', margin: 0 }}>Alamat Merchant</h4>
              <p style={{ fontSize: 12, color: '#a7a8a8', margin: 0 }}>Lokasi operasional usaha.</p>
            </div>
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div style={{ gridColumn: 'span 2' }}>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Alamat Lengkap *</label>
              <textarea value={dm.address} readOnly rows="3" style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none', resize: 'none', fontFamily: 'inherit' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Provinsi *</label>
              <input value={dm.province} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kabupaten/Kota *</label>
              <input value={dm.city} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kecamatan *</label>
              <input value={dm.kecamatan} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kelurahan *</label>
              <input value={dm.kelurahan} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kode Pos *</label>
              <input value={dm.postalCode} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
          </div>
        </div>
      );
    }
    if (activeDetailTab === 2) {
      return (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: `${ORANGE}10`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bx bx-user" style={{ fontSize: 18, color: ORANGE }} />
            </div>
            <div>
              <h4 style={{ fontSize: 15, fontWeight: 700, color: '#171919', margin: 0 }}>Penanggung Jawab (PIC)</h4>
              <p style={{ fontSize: 12, color: '#a7a8a8', margin: 0 }}>Data pemilik atau penanggung jawab.</p>
            </div>
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div style={{ gridColumn: 'span 2' }}>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Nama Penanggung Jawab *</label>
              <input value={dm.picName} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>No. HP *</label>
              <input value={dm.picPhone} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>NIK e-KTP *</label>
              <input value={dm.picNik} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div style={{ gridColumn: 'span 2' }}>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Alamat Email *</label>
              <input value={dm.picEmail} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            
            <div style={{ gridColumn: 'span 2', marginTop: 8 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#171919', marginBottom: 12, borderTop: '1px solid #efefef', paddingTop: 14 }}>Alamat PIC</div>
            </div>
            
            <div style={{ gridColumn: 'span 2' }}>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Alamat Lengkap *</label>
              <textarea value={dm.picAddress} readOnly rows="2" style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none', resize: 'none', fontFamily: 'inherit' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Provinsi *</label>
              <input value={dm.picProvince} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kabupaten/Kota *</label>
              <input value={dm.picCity} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kecamatan *</label>
              <input value={dm.picKecamatan} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kelurahan *</label>
              <input value={dm.picKelurahan} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Kode Pos *</label>
              <input value={dm.picPostalCode} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
            </div>
          </div>
        </div>
      );
    }
    if (activeDetailTab === 3) {
      return (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: `${ORANGE}10`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bx bx-credit-card" style={{ fontSize: 18, color: ORANGE }} />
            </div>
            <div>
              <h4 style={{ fontSize: 15, fontWeight: 700, color: '#171919', margin: 0 }}>Rekening Bank & Dokumen</h4>
              <p style={{ fontSize: 12, color: '#a7a8a8', margin: 0 }}>Rekening pencairan dan unggah dokumen.</p>
            </div>
          </div>
          
          <div style={{ border: '1.5px solid #efefef', borderRadius: 12, padding: 18, background: `linear-gradient(135deg, #fff, ${TEAL}02)`, marginBottom: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: TEAL, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ color: '#fff', fontWeight: 800, fontSize: 14 }}>hi</span>
                </div>
                <div>
                  <span style={{ fontSize: 10, fontWeight: 600, color: '#a7a8a8', textTransform: 'uppercase' }}>Nama Bank</span>
                  <div style={{ fontSize: 14, fontWeight: 700, color: '#171919' }}>hibank</div>
                </div>
              </div>
              <span style={{ background: 'rgba(217,146,11,0.12)', color: AMBER, fontSize: 11, fontWeight: 700, borderRadius: 6, padding: '4px 10px', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <i className="bx bx-lock-alt" /> Otomatis
              </span>
            </div>
            
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Nomor Rekening *</label>
                <input value={dm.accountNumber} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none', fontWeight: 600 }} />
              </div>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 600, color: '#a7a8a8', marginBottom: 4 }}>Nama Pemilik Rekening</label>
                <input value={dm.accountHolder} readOnly style={{ width: '100%', padding: '10px 12px', border: '1.5px solid #efefef', borderRadius: 8, fontSize: 13, background: '#f6f6f6', color: '#171919', outline: 'none' }} />
              </div>
            </div>
          </div>

          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#171919', marginBottom: 12 }}>Dokumen Pendukung</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              
              <div style={{ border: '1.5px dashed #cbd5e1', borderRadius: 12, padding: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', background: '#fafbfc' }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(0,86,210,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
                  <i className="bx bx-id-card" style={{ fontSize: 20, color: TEAL }} />
                </div>
                <span style={{ fontSize: 12, fontWeight: 700, color: '#171919' }}>Foto e-KTP</span>
                <span style={{ fontSize: 10, color: '#a7a8a8', marginTop: 2, fontFamily: "'JetBrains Mono', monospace" }}>{dm.ktpFile}</span>
                <button onClick={() => alert(`Mengunduh berkas ${dm.ktpFile}`)} style={{ marginTop: 12, background: 'none', border: `1.5px solid ${TEAL}`, color: TEAL, fontSize: 11, fontWeight: 700, borderRadius: 6, padding: '4px 12px', cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 4, transition: 'all 150ms' }} onMouseEnter={e => { e.currentTarget.style.background = TEAL; e.currentTarget.style.color = '#fff'; }} onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = TEAL; }}>
                  <i className="bx bx-download" /> Unduh File
                </button>
              </div>
              
              <div style={{ border: '1.5px dashed #cbd5e1', borderRadius: 12, padding: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', background: '#fafbfc' }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(217,146,11,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
                  <i className="bx bx-file" style={{ fontSize: 20, color: AMBER }} />
                </div>
                <span style={{ fontSize: 12, fontWeight: 700, color: '#171919' }}>Foto NPWP</span>
                <span style={{ fontSize: 10, color: '#a7a8a8', marginTop: 2, fontFamily: "'JetBrains Mono', monospace" }}>{dm.npwpFile}</span>
                <button onClick={() => alert(`Mengunduh berkas ${dm.npwpFile}`)} style={{ marginTop: 12, background: 'none', border: `1.5px solid ${TEAL}`, color: TEAL, fontSize: 11, fontWeight: 700, borderRadius: 6, padding: '4px 12px', cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 4, transition: 'all 150ms' }} onMouseEnter={e => { e.currentTarget.style.background = TEAL; e.currentTarget.style.color = '#fff'; }} onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = TEAL; }}>
                  <i className="bx bx-download" /> Unduh File
                </button>
              </div>

            </div>
          </div>
        </div>
      );
    }
    if (activeDetailTab === 4) {
      return (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: `${ORANGE}10`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bx bx-checkbox-checked" style={{ fontSize: 22, color: ORANGE }} />
            </div>
            <div>
              <h4 style={{ fontSize: 15, fontWeight: 700, color: '#171919', margin: 0 }}>Tinjau Ulang Data</h4>
              <p style={{ fontSize: 12, color: '#a7a8a8', margin: 0 }}>Ringkasan seluruh informasi onboarding merchant.</p>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            
            {/* Section 1: Merchant */}
            <div style={{ border: '1.5px solid #efefef', borderRadius: 12, padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, borderBottom: '1px solid #efefef', paddingBottom: 8 }}>
                <i className="bx bx-store-alt" style={{ fontSize: 16, color: TEAL }} />
                <span style={{ fontSize: 13, fontWeight: 700, color: '#171919' }}>Informasi Merchant</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px' }}>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>NMID</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.nmid || '-'}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Nama Merchant</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.merchantName}</div>
                </div>
                <div style={{ gridColumn: 'span 2' }}>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Kategori Merchant (MCC)</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.mcc}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Jenis Usaha</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.businessType}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Nama Badan Hukum</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.legalName || '-'}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>NPWP</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.npwp}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Estimasi Omset/Bulan</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.omset}</div>
                </div>
              </div>
            </div>

            {/* Section 2: Alamat */}
            <div style={{ border: '1.5px solid #efefef', borderRadius: 12, padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, borderBottom: '1px solid #efefef', paddingBottom: 8 }}>
                <i className="bx bx-map" style={{ fontSize: 16, color: TEAL }} />
                <span style={{ fontSize: 13, fontWeight: 700, color: '#171919' }}>Alamat Usaha</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px' }}>
                <div style={{ gridColumn: 'span 2' }}>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Alamat Lengkap</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.address}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Provinsi</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.province}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Kabupaten / Kota</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.city}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Kecamatan</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.kecamatan}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Kelurahan</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.kelurahan}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Kode Pos</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.postalCode}</div>
                </div>
              </div>
            </div>

            {/* Section 3: PIC */}
            <div style={{ border: '1.5px solid #efefef', borderRadius: 12, padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, borderBottom: '1px solid #efefef', paddingBottom: 8 }}>
                <i className="bx bx-user" style={{ fontSize: 16, color: TEAL }} />
                <span style={{ fontSize: 13, fontWeight: 700, color: '#171919' }}>Penanggung Jawab (PIC)</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px' }}>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Nama Lengkap</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.picName}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>No. HP</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.picPhone}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>NIK e-KTP</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.picNik}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Alamat Email</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.picEmail}</div>
                </div>
                <div style={{ gridColumn: 'span 2' }}>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Alamat PIC</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.picAddress}</div>
                </div>
              </div>
            </div>

            {/* Section 4: Bank & Dokumen */}
            <div style={{ border: '1.5px solid #efefef', borderRadius: 12, padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, borderBottom: '1px solid #efefef', paddingBottom: 8 }}>
                <i className="bx bx-credit-card" style={{ fontSize: 16, color: TEAL }} />
                <span style={{ fontSize: 13, fontWeight: 700, color: '#171919' }}>Rekening Settlement & Dokumen</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 16px' }}>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Bank</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.bankName}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Nomor Rekening</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.accountNumber}</div>
                </div>
                <div style={{ gridColumn: 'span 2' }}>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Nama Pemilik Rekening</span>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{dm.accountHolder}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Berkas KTP</span>
                  <div style={{ fontSize: 12, fontWeight: 600, color: TEAL, marginTop: 2 }}>{dm.ktpFile}</div>
                </div>
                <div>
                  <span style={{ fontSize: 11, color: '#a7a8a8' }}>Berkas NPWP</span>
                  <div style={{ fontSize: 12, fontWeight: 600, color: TEAL, marginTop: 2 }}>{dm.npwpFile}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      );
    }
    return null;
  };

  const [sidebarOpen, setSidebarOpen] = React.useState(true);
  const [filter, setFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [sortCol, setSortCol] = React.useState('submittedAt');
  const [sortAsc, setSortAsc] = React.useState(false);
  const [trackingModal, setTrackingModal] = React.useState(null);
  const [detailModal, setDetailModal] = React.useState(null);
  const [activeDetailTab, setActiveDetailTab] = React.useState(0);

  // ── Sample data ──
  const records = [
    { id: 'ONB-2026-0051', merchant: 'PT Maju Jaya Abadi', owner: 'Budi Santoso', type: 'UMKM', city: 'Jakarta', status: 'completed', submittedAt: '2026-06-20', completedAt: '2026-06-22', duration: 2, step: 'Selesai', checker: 'Rina M.', approver: 'Arief B.' },
    { id: 'ONB-2026-0050', merchant: 'CV Karya Nusantara', owner: 'Siti Rahayu', type: 'Corporate', city: 'Surabaya', status: 'in_review', submittedAt: '2026-06-21', completedAt: null, duration: 3, step: 'Review Dokumen', checker: 'Dani P.', approver: '-' },
    { id: 'ONB-2026-0049', merchant: 'Toko Berkah Mandiri', owner: 'Andi Wijaya', type: 'UMKM', city: 'Bandung', status: 'pending', submittedAt: '2026-06-22', completedAt: null, duration: 2, step: 'Menunggu Checker', checker: '-', approver: '-' },
    { id: 'ONB-2026-0048', merchant: 'Restoran Sederhana Pak D', owner: 'Dewi Lestari', type: 'UMKM', city: 'Yogyakarta', status: 'completed', submittedAt: '2026-06-18', completedAt: '2026-06-20', duration: 2, step: 'Selesai', checker: 'Arief B.', approver: 'Hendra G.' },
    { id: 'ONB-2026-0047', merchant: 'PT Global Tekno', owner: 'Reza Firmansyah', type: 'Corporate', city: 'Jakarta', status: 'rejected', submittedAt: '2026-06-19', completedAt: '2026-06-21', duration: 2, step: 'Ditolak', checker: 'Rina M.', approver: 'Hendra G.' },
    { id: 'ONB-2026-0046', merchant: 'Apotek Sehat Farma', owner: 'Fitri Handayani', type: 'UMKM', city: 'Semarang', status: 'in_review', submittedAt: '2026-06-22', completedAt: null, duration: 2, step: 'Verifikasi KYC', checker: 'Dani P.', approver: '-' },
    { id: 'ONB-2026-0045', merchant: 'Koperasi Mitra Usaha', owner: 'Hendra Gunawan', type: 'Koperasi', city: 'Medan', status: 'pending', submittedAt: '2026-06-23', completedAt: null, duration: 1, step: 'Menunggu Checker', checker: '-', approver: '-' },
    { id: 'ONB-2026-0044', merchant: 'Warung Kopi Nusantara', owner: 'Linda Kusuma', type: 'UMKM', city: 'Makassar', status: 'completed', submittedAt: '2026-06-15', completedAt: '2026-06-17', duration: 2, step: 'Selesai', checker: 'Arief B.', approver: 'Hendra G.' },
    { id: 'ONB-2026-0043', merchant: 'PT Solusi Digital', owner: 'Bambang Prakoso', type: 'Corporate', city: 'Jakarta', status: 'in_review', submittedAt: '2026-06-23', completedAt: null, duration: 1, step: 'Validasi Bisnis', checker: 'Rina M.', approver: '-' },
    { id: 'ONB-2026-0042', merchant: 'UD Makmur Sentosa', owner: 'Yuliana Sari', type: 'UMKM', city: 'Denpasar', status: 'expired', submittedAt: '2026-06-01', completedAt: null, duration: 23, step: 'Expired', checker: '-', approver: '-' },
  ];

  const statusConfig = {
    completed: { label: 'Completed', bg: 'rgba(116,181,12,0.12)', color: GREEN, icon: 'bx-check-circle' },
    in_review: { label: 'In Review', bg: 'rgba(0,86,210,0.10)', color: TEAL, icon: 'bx-loader-alt' },
    pending: { label: 'Pending', bg: 'rgba(217,146,11,0.12)', color: AMBER, icon: 'bx-time' },
    rejected: { label: 'Rejected', bg: 'rgba(237,49,81,0.10)', color: RED, icon: 'bx-x-circle' },
    expired: { label: 'Expired', bg: 'rgba(161,168,168,0.15)', color: '#777', icon: 'bx-hourglass' },
  };

  // ── Stats ──
  const counts = {
    total: records.length,
    completed: records.filter(r => r.status === 'completed').length,
    in_review: records.filter(r => r.status === 'in_review').length,
    pending: records.filter(r => r.status === 'pending').length,
    rejected: records.filter(r => r.status === 'rejected').length,
  };

  const avgDuration = (records.filter(r => r.status === 'completed').reduce((s, r) => s + r.duration, 0) / (counts.completed || 1)).toFixed(1);

  // ── Filter & Search ──
  const filtered = records
    .filter(r => filter === 'all' || r.status === filter)
    .filter(r => {
      if (!search) return true;
      const q = search.toLowerCase();
      return r.id.toLowerCase().includes(q) || r.merchant.toLowerCase().includes(q) || r.owner.toLowerCase().includes(q) || r.city.toLowerCase().includes(q);
    })
    .sort((a, b) => {
      const av = a[sortCol], bv = b[sortCol];
      if (av < bv) return sortAsc ? -1 : 1;
      if (av > bv) return sortAsc ? 1 : -1;
      return 0;
    });

  const handleSort = (col) => {
    if (sortCol === col) setSortAsc(!sortAsc);
    else { setSortCol(col); setSortAsc(true); }
  };

  const SortIcon = ({ col }) => {
    if (sortCol !== col) return <i className="bx bx-sort-alt-2" style={{ fontSize: 12, opacity: 0.3 }} />;
    return <i className={`bx bx-sort-${sortAsc ? 'up' : 'down'}`} style={{ fontSize: 12, color: TEAL }} />;
  };

  // ── Activity timeline ──
  const timeline = [
    { text: 'ONB-0051 telah disetujui & aktif', time: '2 jam lalu', color: GREEN },
    { text: 'ONB-0050 masuk tahap review dokumen', time: '3 jam lalu', color: TEAL },
    { text: 'ONB-0047 ditolak — dokumen tidak valid', time: '5 jam lalu', color: RED },
    { text: 'ONB-0049 disubmit oleh Andi Wijaya', time: '6 jam lalu', color: AMBER },
    { text: 'ONB-0046 verifikasi KYC dimulai', time: '8 jam lalu', color: TEAL },
  ];

  // ── Stat cards ──
  const stats = [
    { label: 'Total Pengajuan', value: counts.total, icon: 'bx-folder-open', color: TEAL, change: '+12%', up: true },
    { label: 'Completed', value: counts.completed, icon: 'bx-check-circle', color: GREEN, change: '+8%', up: true },
    { label: 'In Review', value: counts.in_review, icon: 'bx-loader-alt', color: TEAL, change: '+3', up: true },
    { label: 'Pending', value: counts.pending, icon: 'bx-time', color: AMBER, change: '-2', up: false },
    { label: 'Rejected', value: counts.rejected, icon: 'bx-x-circle', color: RED, change: '0', up: false },
    { label: 'Rata-rata Durasi', value: avgDuration + ' hr', icon: 'bx-timer', color: ORANGE, change: '-0.5', up: false },
  ];

  // ── Filter tabs ──
  const filterTabs = [
    { key: 'all', label: 'Semua', count: counts.total },
    { key: 'pending', label: 'Pending', count: counts.pending },
    { key: 'in_review', label: 'In Review', count: counts.in_review },
    { key: 'completed', label: 'Completed', count: counts.completed },
    { key: 'rejected', label: 'Rejected', count: counts.rejected },
  ];

  const columns = [
    { key: 'id', label: 'ID Pengajuan', w: 130 },
    { key: 'merchant', label: 'Nama Merchant', w: null },
    { key: 'type', label: 'Tipe', w: 85 },
    { key: 'city', label: 'Kota', w: 95 },
    { key: 'step', label: 'Tahap', w: 130 },
    { key: 'status', label: 'Status', w: 100 },
    { key: 'submittedAt', label: 'Tanggal', w: 90 },
    { key: 'checker', label: 'Checker', w: 85 },
    { key: 'approver', label: 'Approver', w: 85 },
    { key: 'actions', label: 'Aksi', w: 150 },
  ];

  return (
    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden', fontFamily: "'Open Sans', sans-serif" }}>
      <Sidebar activeNav="onboarding_monitor" setActiveNav={(id) => onNavigate(id)} sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} onLogout={onLogout} pendingApproval={pendingApproval} primary={TEAL} secondary={ORANGE} sidebarBg={sidebarColor} role={role} user={user} />

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: '#f6f6f6' }}>

        {/* TOPBAR */}
        <div style={{ height: 64, background: '#fff', borderBottom: '1px solid #efefef', display: 'flex', alignItems: 'center', padding: '0 28px', gap: 16, flexShrink: 0, boxShadow: '0 1px 2px rgba(23,25,25,0.04)' }}>
          <button onClick={() => setSidebarOpen(!sidebarOpen)} style={{ background: '#f6f6f6', border: '1px solid #efefef', borderRadius: 8, width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#515252' }}>
            <i className="bx bx-menu" style={{ fontSize: 18 }} />
          </button>
          <div style={{ flex: 1 }}>
            <span style={{ fontSize: 15, fontWeight: 700, color: '#171919' }}>{detailModal ? 'Detail Pengajuan' : 'Onboarding Monitor'}</span>
            <span style={{ fontSize: 12, color: '#a7a8a8', marginLeft: 8 }}>{detailModal ? `Detail onboarding merchant ${detailModal.merchant}` : 'Pantau status pengajuan merchant QRIS'}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: `linear-gradient(135deg, ${TEAL}, #0041A8)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ color: '#fff', fontWeight: 700, fontSize: 12 }}>AB</span>
            </div>
          </div>
        </div>

        {/* CONTENT */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '28px 32px 56px' }}>
          {detailModal ? (() => {
            const dm = getMockDetail(detailModal);
            const steps = [
              { label: 'Merchant', icon: 'bx-store-alt', sub: 'Data dasar bisnis' },
              { label: 'Alamat', icon: 'bx-map-alt', sub: 'Lokasi tempat usaha' },
              { label: 'PIC', icon: 'bx-user', sub: 'Identitas PIC merchant' },
              { label: 'Bank & Dokumen', icon: 'bx-credit-card', sub: 'Rekening settlement' },
              { label: 'Tinjau', icon: 'bx-checkbox-checked', sub: 'Tinjau ulang data' }
            ];

            return (
              <div style={{ animation: 'fadeIn 0.25s ease-out' }}>
                {/* Back Breadcrumb */}
                <div style={{ marginBottom: 20 }}>
                  <button
                    onClick={() => setDetailModal(null)}
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 8,
                      background: 'none',
                      border: 'none',
                      color: '#515252',
                      fontSize: 13,
                      fontWeight: 600,
                      cursor: 'pointer',
                      padding: 0,
                      fontFamily: 'inherit',
                      transition: 'color 150ms'
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = TEAL}
                    onMouseLeave={e => e.currentTarget.style.color = '#515252'}
                  >
                    <i className="bx bx-arrow-back" style={{ fontSize: 18 }} /> Kembali ke Daftar Pengajuan
                  </button>
                </div>

                {/* Double column layout */}
                <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 28, alignItems: 'flex-start' }}>
                  {/* Stepper sidebar */}
                  <div style={{ position: 'sticky', top: 0 }}>
                    <div style={{ background: '#fff', borderRadius: 15, padding: '20px 18px', border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)' }}>
                      <div style={{ fontSize: 11, fontWeight: 700, color: '#a7a8a8', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>Langkah Detail</div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, position: 'relative' }}>
                        {/* connector line */}
                        <div style={{ position: 'absolute', left: 15, top: 14, bottom: 14, width: 2, background: '#efefef' }} />
                        <div style={{ position: 'absolute', left: 15, top: 14, width: 2, height: `${(activeDetailTab / 4) * 100}%`, background: TEAL, transition: 'height 250ms' }} />

                        {steps.map((s, idx) => {
                          const done = idx < activeDetailTab;
                          const active = idx === activeDetailTab;
                          return (
                            <button
                              key={idx}
                              onClick={() => setActiveDetailTab(idx)}
                              style={{
                                display: 'flex',
                                alignItems: 'flex-start',
                                gap: 12,
                                padding: '10px 8px',
                                border: 'none',
                                background: 'transparent',
                                textAlign: 'left',
                                cursor: 'pointer',
                                borderRadius: 8,
                                position: 'relative',
                                zIndex: 1,
                                width: '100%'
                              }}
                            >
                              <div style={{
                                width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
                                background: done ? TEAL : active ? '#fff' : '#fff',
                                border: active ? `2px solid ${TEAL}` : done ? 'none' : '2px solid #efefef',
                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                                transition: 'all 200ms',
                                boxShadow: active ? `0 0 0 3px ${TEAL}25` : 'none'
                              }}>
                                {done ? (
                                  <i className="bx bx-check" style={{ color: '#fff', fontSize: 18, fontWeight: 700 }} />
                                ) : (
                                  <span style={{ fontSize: 12, fontWeight: 700, color: active ? TEAL : '#a7a8a8' }}>{idx + 1}</span>
                                )}
                              </div>
                              <div style={{ paddingTop: 4 }}>
                                <div style={{ fontSize: 13, fontWeight: active || done ? 600 : 500, color: active ? '#171919' : done ? '#515252' : '#a7a8a8' }}>
                                  {s.label}
                                </div>
                                <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 2 }}>
                                  {s.sub}
                                </div>
                              </div>
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  </div>

                  {/* Detail Card Content */}
                  <div>
                    <div style={{ background: '#fff', borderRadius: 15, padding: '28px 32px', border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.06)' }}>
                      {renderDetailStepContent(dm)}
                    </div>

                    {/* Bottom Action Bar */}
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18, padding: '0 4px' }}>
                      <button
                        disabled={activeDetailTab === 0}
                        onClick={() => setActiveDetailTab(prev => Math.max(0, prev - 1))}
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: 6,
                          padding: '11px 22px',
                          borderRadius: 100,
                          border: '1.5px solid #efefef',
                          background: '#fff',
                          color: activeDetailTab === 0 ? '#cbd5e1' : '#515252',
                          cursor: activeDetailTab === 0 ? 'not-allowed' : 'pointer',
                          fontSize: 14,
                          fontWeight: 600,
                          fontFamily: 'inherit',
                          transition: 'all 150ms'
                        }}
                      >
                        <i className="bx bx-chevron-left" style={{ fontSize: 18 }} /> Sebelumnya
                      </button>

                      <div style={{ fontSize: 13, color: '#a7a8a8' }}>
                        Langkah <strong style={{ color: '#171919' }}>{activeDetailTab + 1}</strong> dari {steps.length}
                      </div>

                      {activeDetailTab < 4 ? (
                        <button
                          onClick={() => setActiveDetailTab(prev => Math.min(4, prev + 1))}
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 6,
                            padding: '12px 26px',
                            borderRadius: 100,
                            border: 'none',
                            background: TEAL,
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 600,
                            fontFamily: 'inherit',
                            cursor: 'pointer',
                            boxShadow: `0 4px 16px ${TEAL}28`,
                            transition: 'all 200ms'
                          }}
                          onMouseEnter={e => e.currentTarget.style.background = '#3A7EE0'}
                          onMouseLeave={e => e.currentTarget.style.background = TEAL}
                        >
                          Lanjut <i className="bx bx-chevron-right" style={{ fontSize: 18 }} />
                        </button>
                      ) : (
                        <button
                          onClick={() => setDetailModal(null)}
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 6,
                            padding: '12px 26px',
                            borderRadius: 100,
                            border: 'none',
                            background: ORANGE,
                            color: '#fff',
                            fontSize: 14,
                            fontWeight: 600,
                            fontFamily: 'inherit',
                            cursor: 'pointer',
                            boxShadow: `0 4px 16px rgba(207,90,39,0.3)`,
                            transition: 'all 200ms'
                          }}
                          onMouseEnter={e => e.currentTarget.style.background = '#e87a4d'}
                          onMouseLeave={e => e.currentTarget.style.background = ORANGE}
                        >
                          Selesai <i className="bx bx-check-circle" style={{ fontSize: 18 }} />
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })() : (
            <React.Fragment>
              {/* Page header */}
              <div style={{ marginBottom: 24 }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Onboarding Monitor</div>
                <h1 style={{ fontSize: 24, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', margin: 0 }}>Monitor Onboarding Merchant</h1>
                <p style={{ fontSize: 14, color: '#515252', marginTop: 4, marginBottom: 0 }}>Pantau seluruh proses onboarding merchant dari awal hingga selesai.</p>
              </div>

              {/* STAT CARDS */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14, marginBottom: 24 }}>
                {stats.map((s, i) => (
                  <div key={i} style={{
                    background: '#fff', borderRadius: 14, padding: '18px 16px',
                    boxShadow: '0 2px 8px rgba(23,25,25,0.06)', border: '1px solid #efefef',
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                      <span style={{ fontSize: 11, color: '#515252', fontWeight: 500, lineHeight: 1.3 }}>{s.label}</span>
                      <div style={{ width: 32, height: 32, borderRadius: '50%', background: `${s.color}14`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <i className={`bx ${s.icon}`} style={{ fontSize: 16, color: s.color }} />
                      </div>
                    </div>
                    <div style={{ fontSize: 24, fontWeight: 700, color: '#171919', fontVariantNumeric: 'tabular-nums', marginBottom: 4 }}>{s.value}</div>
                    <span style={{
                      fontSize: 11, fontWeight: 600, borderRadius: 100, padding: '2px 8px',
                      background: s.up ? 'rgba(116,181,12,0.12)' : 'rgba(237,49,81,0.10)',
                      color: s.up ? GREEN : RED,
                      display: 'inline-flex', alignItems: 'center', gap: 2,
                    }}>
                      <i className={`bx bx-trending-${s.up ? 'up' : 'down'}`} style={{ fontSize: 12 }} />
                      {s.change}
                    </span>
                  </div>
                ))}
              </div>

              {/* MAIN GRID — Table (Full Width) */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

                {/* TABLE CARD */}
                <div style={{ background: '#fff', borderRadius: 15, boxShadow: '0 2px 8px rgba(23,25,25,0.06)', border: '1px solid #efefef', overflow: 'hidden' }}>
                  {/* Filter dropdown + search */}
                  <div style={{ padding: '16px 20px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyBetween: 'space-between', justifyContent: 'space-between', gap: 12 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontSize: 13, fontWeight: 600, color: '#515252' }}>Status:</span>
                        <div style={{ position: 'relative' }}>
                          <select
                            value={filter}
                            onChange={e => setFilter(e.target.value)}
                            style={{
                              padding: '6px 32px 6px 12px',
                              borderRadius: 8,
                              border: '1.5px solid #efefef',
                              fontSize: 12,
                              fontWeight: 600,
                              color: '#171919',
                              fontFamily: 'inherit',
                              background: '#fff',
                              cursor: 'pointer',
                              outline: 'none',
                              appearance: 'none',
                              transition: 'border-color 150ms',
                            }}
                            onFocus={e => e.target.style.borderColor = TEAL}
                            onBlur={e => e.target.style.borderColor = '#efefef'}
                          >
                            {filterTabs.map(t => (
                              <option key={t.key} value={t.key}>
                                {t.label} ({t.count})
                              </option>
                            ))}
                          </select>
                          <i className="bx bx-chevron-down" style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 16, color: '#a7a8a8', pointerEvents: 'none' }} />
                        </div>
                      </div>
                      <div style={{ position: 'relative', width: 220 }}>
                        <i className="bx bx-search" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 16, color: '#a7a8a8' }} />
                        <input
                          value={search} onChange={e => setSearch(e.target.value)}
                          placeholder="Cari ID, merchant, kota..."
                          style={{
                            width: '100%', padding: '8px 12px 8px 32px', borderRadius: 8,
                            border: '1px solid #e5e7eb', fontSize: 12, fontFamily: 'inherit',
                            outline: 'none', transition: 'border-color 150ms',
                          }}
                          onFocus={e => e.target.style.borderColor = TEAL}
                          onBlur={e => e.target.style.borderColor = '#e5e7eb'}
                        />
                      </div>
                    </div>
                  </div>

                  {/* Table */}
                  <div style={{ overflowX: 'auto', padding: '12px 20px 20px' }}>
                    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
                      <thead>
                        <tr>
                          {columns.map(col => {
                            const canSort = col.key !== 'actions';
                            return (
                              <th key={col.key} onClick={() => canSort && handleSort(col.key)} style={{
                                textAlign: 'left', padding: '10px 8px', borderBottom: '2px solid #efefef',
                                color: '#515252', fontWeight: 600, fontSize: 11, textTransform: 'uppercase',
                                letterSpacing: '0.05em', cursor: canSort ? 'pointer' : 'default', whiteSpace: 'nowrap',
                                width: col.w || 'auto', userSelect: 'none',
                              }}>
                                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                                  {col.label} {canSort && <SortIcon col={col.key} />}
                                </span>
                              </th>
                            );
                          })}
                        </tr>
                      </thead>
                      <tbody>
                        {filtered.length === 0 && (
                          <tr><td colSpan={columns.length} style={{ padding: 32, textAlign: 'center', color: '#a7a8a8' }}>
                            <i className="bx bx-search-alt" style={{ fontSize: 28, display: 'block', marginBottom: 8 }} />
                            Tidak ada data ditemukan
                          </td></tr>
                        )}
                        {filtered.map((r, i) => {
                          const sc = statusConfig[r.status];
                          return (
                            <tr key={r.id}
                              style={{ transition: 'background 150ms' }}
                              onMouseEnter={e => e.currentTarget.style.background = '#fafbfc'}
                              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', fontWeight: 600, color: TEAL, fontSize: 12, fontFamily: "'JetBrains Mono', monospace" }}>{r.id}</td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6' }}>
                                <div style={{ fontWeight: 600, color: '#171919', fontSize: 13 }}>{r.merchant}</div>
                                <div style={{ fontSize: 11, color: '#a7a8a8' }}>{r.owner}</div>
                              </td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6' }}>
                                <span style={{ fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 6, background: r.type === 'Corporate' ? `${TEAL}14` : r.type === 'Koperasi' ? 'rgba(217,146,11,0.12)' : '#f3f4f6', color: r.type === 'Corporate' ? TEAL : r.type === 'Koperasi' ? AMBER : '#515252' }}>
                                  {r.type}
                                </span>
                              </td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', fontSize: 12, color: '#515252' }}>{r.city}</td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', fontSize: 12, color: '#515252' }}>{r.step}</td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6' }}>
                                <span style={{
                                  display: 'inline-flex', alignItems: 'center', gap: 4,
                                  fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 100,
                                  background: sc.bg, color: sc.color,
                                }}>
                                  <i className={`bx ${sc.icon}`} style={{ fontSize: 13 }} />
                                  {sc.label}
                                </span>
                              </td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', fontSize: 12, color: '#515252', fontVariantNumeric: 'tabular-nums' }}>{r.submittedAt}</td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', fontSize: 12, color: '#515252' }}>{r.checker}</td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', fontSize: 12, color: '#515252' }}>{r.approver || '-'}</td>
                              <td style={{ padding: '12px 8px', borderBottom: '1px solid #f3f4f6', whiteSpace: 'nowrap' }}>
                                <div style={{ display: 'flex', gap: 6 }}>
                                  <button
                                    onClick={(e) => { e.stopPropagation(); setDetailModal(r); setActiveDetailTab(0); }}
                                    style={{
                                      padding: '5px 10px',
                                      borderRadius: 6,
                                      border: `1.5px solid ${TEAL}25`,
                                      background: `${TEAL}0a`,
                                      color: TEAL,
                                      fontSize: 11,
                                      fontWeight: 700,
                                      cursor: 'pointer',
                                      fontFamily: 'inherit',
                                      display: 'inline-flex',
                                      alignItems: 'center',
                                      gap: 4,
                                      transition: 'all 150ms',
                                    }}
                                    onMouseEnter={e => { e.currentTarget.style.background = TEAL; e.currentTarget.style.color = '#fff'; }}
                                    onMouseLeave={e => { e.currentTarget.style.background = `${TEAL}0a`; e.currentTarget.style.color = TEAL; }}
                                  >
                                    <i className="bx bx-show" style={{ fontSize: 13 }} /> Detail
                                  </button>
                                  <button
                                    onClick={(e) => { e.stopPropagation(); setTrackingModal(r); }}
                                    style={{
                                      padding: '5px 10px',
                                      borderRadius: 6,
                                      border: `1.5px solid ${ORANGE}25`,
                                      background: `${ORANGE}0a`,
                                      color: ORANGE,
                                      fontSize: 11,
                                      fontWeight: 700,
                                      cursor: 'pointer',
                                      fontFamily: 'inherit',
                                      display: 'inline-flex',
                                      alignItems: 'center',
                                      gap: 4,
                                      transition: 'all 150ms',
                                    }}
                                    onMouseEnter={e => { e.currentTarget.style.background = ORANGE; e.currentTarget.style.color = '#fff'; }}
                                    onMouseLeave={e => { e.currentTarget.style.background = `${ORANGE}0a`; e.currentTarget.style.color = ORANGE; }}
                                  >
                                    <i className="bx bx-git-commit" style={{ fontSize: 13 }} /> Tracking
                                  </button>
                                </div>
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                  {/* Footer */}
                  <div style={{ padding: '12px 20px', borderTop: '1px solid #efefef', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: 12, color: '#a7a8a8' }}>Menampilkan {filtered.length} dari {records.length} pengajuan</span>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {[1, 2, 3].map(p => (
                        <button key={p} style={{
                          width: 28, height: 28, borderRadius: 6, border: 'none', cursor: 'pointer',
                          fontSize: 12, fontWeight: 600, fontFamily: 'inherit',
                          background: p === 1 ? TEAL : '#f3f4f6',
                          color: p === 1 ? '#fff' : '#515252',
                        }}>{p}</button>
                      ))}
                    </div>
                  </div>
                </div>

              </div>
            </React.Fragment>
          )}
        </div>
      </div>

      {/* Tracking Modal Popup */}
      {trackingModal && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(4px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 1000, animation: 'fadeIn 0.2s ease-out'
        }} onClick={() => setTrackingModal(null)}>
          
          <div style={{
            background: '#fff', borderRadius: 16, width: 440, maxWidth: '90%',
            padding: 24, boxShadow: '0 20px 40px rgba(0,0,0,0.15)',
            position: 'relative', animation: 'slideUp 0.3s cubic-bezier(0.22,0.68,0,1.1)'
          }} onClick={e => e.stopPropagation()}>
            
            {/* Header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
              <div>
                <span style={{ fontSize: 10, fontWeight: 700, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Tracking Status</span>
                <h3 style={{ fontSize: 16, fontWeight: 800, color: '#171919', marginTop: 4 }}>{trackingModal.merchant}</h3>
                <span style={{ fontSize: 11, color: '#a7a8a8', fontFamily: "'JetBrains Mono', monospace" }}>{trackingModal.id}</span>
              </div>
              <button onClick={() => setTrackingModal(null)} style={{ background: '#f6f6f6', border: 'none', borderRadius: '50%', width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#515252' }}>
                <i className="bx bx-x" style={{ fontSize: 18 }} />
              </button>
            </div>

            {/* Timeline body */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginBottom: 8 }}>
              {(() => {
                const steps = [];
                // Step 1: Submission
                steps.push({ text: 'Pengajuan onboarding disubmit oleh Merchant', time: `${trackingModal.submittedAt} · 08:30`, color: GREEN, done: true });
                
                // Step 2: Checker review
                if (trackingModal.status === 'pending') {
                  steps.push({ text: 'Menunggu review dokumen oleh Checker', time: 'Tahap berjalan', color: AMBER, active: true });
                  steps.push({ text: 'Validasi data & KYC', time: 'Antrean', color: '#cbd5e1' });
                  steps.push({ text: 'Approval oleh L2 Manager', time: 'Antrean', color: '#cbd5e1' });
                } else if (trackingModal.status === 'in_review') {
                  steps.push({ text: 'Dokumen sedang ditinjau oleh Checker', time: `Diperiksa oleh ${trackingModal.checker}`, color: TEAL, done: true });
                  steps.push({ text: `Verifikasi KYC & Tahap: ${trackingModal.step}`, time: 'Tahap berjalan', color: AMBER, active: true });
                  steps.push({ text: 'Approval oleh L2 Manager', time: 'Antrean', color: '#cbd5e1' });
                } else if (trackingModal.status === 'completed') {
                  steps.push({ text: 'Dokumen disetujui oleh Checker', time: `Checker: ${trackingModal.checker}`, color: GREEN, done: true });
                  steps.push({ text: 'Verifikasi KYC berhasil', time: `Selesai`, color: GREEN, done: true });
                  steps.push({ text: `Merchant QRIS Aktif & Live`, time: `Disetujui oleh ${trackingModal.approver} pada L2`, color: GREEN, done: true });
                } else if (trackingModal.status === 'rejected') {
                  steps.push({ text: 'Dokumen ditolak pada tahap review', time: `Ditolak oleh ${trackingModal.checker}`, color: RED, failed: true });
                } else if (trackingModal.status === 'expired') {
                  steps.push({ text: 'Pengajuan kadaluarsa (Expired)', time: 'Tidak dilanjutkan', color: '#777', failed: true });
                }

                return steps.map((t, idx) => (
                  <div key={idx} style={{ display: 'flex', gap: 14, paddingBottom: idx < steps.length - 1 ? 20 : 0, position: 'relative' }}>
                    {idx < steps.length - 1 && (
                      <div style={{ position: 'absolute', left: 7, top: 16, width: 2, bottom: 0, background: t.done ? GREEN : '#efefef' }} />
                    )}
                    
                    <div style={{
                      width: 16, height: 16, borderRadius: '50%',
                      background: t.done ? GREEN : t.active ? AMBER : t.failed ? RED : '#fff',
                      border: t.done || t.active || t.failed ? 'none' : '2.5px solid #cbd5e1',
                      boxShadow: t.active ? `0 0 0 3px ${AMBER}33` : t.done ? `0 0 0 3px ${GREEN}25` : 'none',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      zIndex: 2, marginTop: 2, flexShrink: 0
                    }}>
                      {t.done && <i className="bx bx-check" style={{ color: '#fff', fontSize: 11 }} />}
                      {t.failed && <i className="bx bx-x" style={{ color: '#fff', fontSize: 11 }} />}
                    </div>

                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: t.active || t.done ? '#171919' : '#a7a8a8', lineHeight: 1.3 }}>{t.text}</div>
                      <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 3 }}>{t.time}</div>
                    </div>
                  </div>
                ));
              })()}
            </div>
            
            {/* Footer */}
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}>
              <button onClick={() => setTrackingModal(null)} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer', boxShadow: `0 4px 12px ${TEAL}25` }}>
                Tutup
              </button>
            </div>

          </div>
        </div>
      )}


    </div>
  );
}

Object.assign(window, { OnboardingMonitorPage });