const APP_URL = "https://script.google.com/macros/s/AKfycby4OOQSjzy0CBqhHubhFkVzkhD5pN3EhrxJYhOMbQcpgW-1NwpjliocEm1-3p_uxDv6Bw/exec"; /* GANTI */

const PREVIEW_MODE = false; /* GANTI */

</script>

</div>

<h1 class="text-2xl font-bold text-slate-900">BaitulMal Digital</h1>

<p class="text-slate-500 text-sm mt-1">Sistem Keuangan Majelis Taklim</p>

</div>

<div>

<label class="block text-sm font-semibold text-slate-700 mb-2">Username</label>

</div>

<div>

<label class="block text-sm font-semibold text-slate-700 mb-2">Password</label>

</div>

<span>Masuk ke System</span>

</button>

</form>

Akses Default Demo: <span class="font-semibold text-slate-700">admin / 123</span>

</div>

</div>

<div>

<h2 class="font-bold text-slate-900 text-base leading-tight">BaitulMal</h2>

<span class="text-xs text-slate-400 font-medium">Digital Admin</span>

</div>

</button>

</div>

<i class='bx bxs-grid-alt text-lg'></i> Dashboard

</button>

<i class='bx bxs-group text-lg'></i> Data Anggota & KK

</button>

<i class='bx bxs-wallet-in text-lg text-emerald-600'></i> Infaq & Sadaqah

</button>

<i class='bx bxs-wallet-out text-lg text-rose-600'></i> Kas Keluar

</button>

<i class='bx bxs-file-blank text-lg text-amber-600'></i> Rekap per KK

</button>

<p class="px-4 text-[10px] font-bold tracking-wider text-slate-400 uppercase mb-2">Roadmap Fitur</p>

<span class="flex items-center gap-3"><i class='bx bx-printer text-lg'></i> Cetak Kuitansi</span>

</button>

<span class="flex items-center gap-3"><i class='bx bxl-whatsapp text-lg'></i> Broadcast WA</span>

</button>

</div>

</nav>

</div>

<p id="user-name-display" class="text-sm font-semibold text-slate-800 truncate">Administrator</p>

<span class="text-xs text-slate-500">Bendahara Utama</span>

</div>

</button>

</div>

</aside>

</button>

</div>

<span class="font-bold text-slate-800 text-sm">BaitulMal</span>

</div>

</header>

<div>

<h2 class="text-2xl font-bold text-slate-900">Ringkasan Kas Majelis</h2>

<p class="text-slate-500 text-sm mt-0.5">Pantau arus kas infaq & pengeluaran taklim secara real-time.</p>

</div>

<i class='bx bx-plus-circle text-lg'></i> Catat Infaq

</button>

</div>

<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Total Kas Saat Ini</span>

</div>

<i class='bx bx-trending-up'></i> Keuangan Stabil

</p>

</div>

<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Infaq & Sadaqah Masuk</span>

</div>

<p class="text-xs text-slate-400 mt-2">Total akumulasi penerimaan</p>

</div>

<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Kas Keluar / Operasional</span>

</div>

<p class="text-xs text-slate-400 mt-2">Total pengeluaran majelis</p>

</div>

<h3 class="font-bold text-slate-900 text-lg">Transaksi Terakhir</h3>

<button onclick="switchTab('rekap')" class="text-sm font-semibold text-primary-600 hover:text-primary-700">Lihat Semua</button>

</div>

<tr>

<th class="p-3.5 rounded-l-xl">Tanggal</th>

<th class="p-3.5">Keterangan / Penyerah</th>

<th class="p-3.5 text-right rounded-r-xl">Nominal</th>

</tr>

</thead>

</tbody>

</table>

</div>

</section>

<div>

<h2 class="text-2xl font-bold text-slate-900">Data Anggota & Kepala Keluarga</h2>

<p class="text-slate-500 text-sm mt-0.5">Kelola data jamaah berdasarkan struktur keluarga.</p>

</div>

<i class='bx bx-user-plus text-lg'></i> Tambah Anggota

</button>

</div>

</div>

<tr>

<th class="p-3.5 rounded-l-xl">Nama Jamaah</th>

<th class="p-3.5">Kepala Keluarga (KK)</th>

<th class="p-3.5">Status Hubungan</th>

<th class="p-3.5">No. WhatsApp</th>

</tr>

</thead>

</tbody>

</table>

</div>

</section>

<div>

<h2 class="text-2xl font-bold text-slate-900">Pencatatan Infaq & Sadaqah</h2>

<p class="text-slate-500 text-sm mt-0.5">Catat kas masuk dari jamaah atau hamba Allah.</p>

</div>

<i class='bx bx-plus-circle text-lg'></i> Catat Kas Masuk

</button>

</div>

<tr>

<th class="p-3.5 rounded-l-xl">Tanggal</th>

<th class="p-3.5">Penyerah (Nama / KK)</th>

<th class="p-3.5">Jenis Infaq</th>

<th class="p-3.5">Keterangan</th>

<th class="p-3.5 text-right rounded-r-xl">Nominal</th>

</tr>

</thead>

</tbody>

</table>

</div>

</section>

<div>

<h2 class="text-2xl font-bold text-slate-900">Pengeluaran & Operasional</h2>

<p class="text-slate-500 text-sm mt-0.5">Pencatatan kas keluar majelis taklim.</p>

</div>

<i class='bx bx-minus-circle text-lg'></i> Catat Kas Keluar

</button>

</div>

<tr>

<th class="p-3.5 rounded-l-xl">Tanggal</th>

<th class="p-3.5">Kategori</th>

<th class="p-3.5">Keperluan / Keterangan</th>

<th class="p-3.5 text-right rounded-r-xl">Nominal Pengeluaran</th>

</tr>

</thead>

</tbody>

</table>

</div>

</section>

<div>

<h2 class="text-2xl font-bold text-slate-900">Rekap Infaq per Kepala Keluarga</h2>

<p class="text-slate-500 text-sm mt-0.5">Rekapitulasi kontribusi jamaah terkelompokkan per KK.</p>

</div>

<tr>

<th class="p-3.5 rounded-l-xl">Kepala Keluarga</th>

<th class="p-3.5">Jumlah Anggota</th>

<th class="p-3.5">Total Infaq Masuk</th>

<th class="p-3.5 text-center rounded-r-xl">Status Keaktifan</th>

</tr>

</thead>

</tbody>

</table>

</div>

</section>

</main>

</div>

<h3 class="font-bold text-slate-900 text-lg" id="modal-member-title">Tambah Jamaah Baru</h3>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Nama Lengkap Jamaah</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Nama Kepala Keluarga (KK)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Status Hubungan</label>

<option value="Kepala Keluarga">Kepala Keluarga</option>

<option value="Istri">Istri</option>

<option value="Orang Tua/Lainnya">Orang Tua/Lainnya</option>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">No. WhatsApp</label>

</div>

<button type="button" onclick="closeModal('modal-member')" class="px-4 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold">Batal</button>

<button type="submit" class="px-5 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-sm font-semibold shadow-sm">Simpan Data</button>

</div>

</form>

</div>

<h3 class="font-bold text-slate-900 text-lg">Catat Infaq / Sadaqah</h3>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Pilih Jamaah / Penyerah</label>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Jenis Penerimaan</label>

<option value="Infaq Wajib Taklim">Infaq Wajib Taklim</option>

<option value="Sadaqah Sukarela">Sadaqah Sukarela</option>

<option value="Donasi Acara">Donasi Acara</option>

<option value="Hamba Allah">Hamba Allah</option>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Nominal (Rp)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Keterangan Tambahan</label>

</div>

<button type="button" onclick="closeModal('modal-cashin')" class="px-4 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold">Batal</button>

<button type="submit" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-sm font-semibold shadow-sm">Simpan Infaq</button>

</div>

</form>

</div>

<h3 class="font-bold text-slate-900 text-lg">Catat Kas Keluar</h3>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Kategori Pengeluaran</label>

<option value="Operasional Pengajian">Operasional Pengajian</option>

<option value="Bisyaroh Ustadz">Bisyaroh Ustadz</option>

<option value="Konsumsi Jamaah">Konsumsi Jamaah</option>

<option value="Bantuan Sosial">Bantuan Sosial</option>

</select>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Nominal Pengeluaran (Rp)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-700 mb-1">Rincian Keperluan</label>

</div>

<button type="button" onclick="closeModal('modal-cashout')" class="px-4 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold">Batal</button>

<button type="submit" class="px-5 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-sm font-semibold shadow-sm">Catat Pengeluaran</button>

</div>

</form>

</div>

// APP STATE

let state = {

user: null,

activeTab: 'dashboard',

members: [],

cashIn: [],

cashOut: []

};

// MOCK DATA FOR PREVIEW MODE (Minimal items to prevent cutoff)

const mockMembers = [

{ id: 'M-1', nama: 'Ustadz Abdullah', kk: 'Abdullah', status: 'Kepala Keluarga', hp: '08123456789' },

{ id: 'M-2', nama: 'Siti Aminah', kk: 'Abdullah', status: 'Istri', hp: '08123456788' },

{ id: 'M-3', nama: 'Hasan Basri', kk: 'Hasan Basri', status: 'Kepala Keluarga', hp: '08198765432' },

{ id: 'M-4', nama: 'Ahmad Dahlan', kk: 'Ahmad Dahlan', status: 'Kepala Keluarga', hp: '08571234567' }

];

const mockCashIn = [

{ id: 'CI-1', tgl: '2026-09-01', memberNama: 'Ustadz Abdullah', kk: 'Abdullah', jenis: 'Infaq Wajib Taklim', nominal: 100000, ket: 'Infaq Rutin' },

{ id: 'CI-2', tgl: '2026-09-05', memberNama: 'Hasan Basri', kk: 'Hasan Basri', jenis: 'Sadaqah Sukarela', nominal: 250000, ket: 'Sadaqah Syukuran' },

{ id: 'CI-3', tgl: '2026-09-08', memberNama: 'Ahmad Dahlan', kk: 'Ahmad Dahlan', jenis: 'Infaq Wajib Taklim', nominal: 100000, ket: 'Infaq Rutin' }

];

const mockCashOut = [

{ id: 'CO-1', tgl: '2026-09-02', kategori: 'Bisyaroh Ustadz', nominal: 200000, ket: 'Pengajian Rutin Pekan 1' },

{ id: 'CO-2', tgl: '2026-09-06', kategori: 'Konsumsi Jamaah', nominal: 85000, ket: 'Snack & Air Mineral' }

];

// INIT APP

window.addEventListener('DOMContentLoaded', () => {

if (PREVIEW_MODE) {

state.members = mockMembers;

state.cashIn = mockCashIn;

state.cashOut = mockCashOut;

}

checkSession();

});

// TOAST SYSTEM

function showToast(msg, type = 'success') {

const container = document.getElementById('toast-container');

const toast = document.createElement('div');

const bgClass = type === 'success' ? 'bg-slate-900 text-white' : 'bg-rose-600 text-white';

const icon = type === 'success' ? 'bx-check-circle text-emerald-400' : 'bx-error-circle text-white';

toast.className = `flex items-center gap-3 px-4 py-3 rounded-2xl shadow-xl ${bgClass} pointer-events-auto transition-all duration-300 transform translate-y-2 text-sm font-medium`;

toast.innerHTML = `<i class='bx ${icon} text-xl'></i> <span>${msg}</span>`;

container.appendChild(toast);

setTimeout(() => {

toast.classList.add('opacity-0', '-translate-y-2');

setTimeout(() => toast.remove(), 300);

}, 3000);

}

// LOGIN / LOGOUT

function handleLogin(e) {

e.preventDefault();

const u = document.getElementById('login-username').value;

const p = document.getElementById('login-password').value;

if (u === 'admin' && p === '123') {

state.user = { name: 'Administrator', username: u };

localStorage.setItem('bm_user', JSON.stringify(state.user));

document.getElementById('login-view').classList.add('hidden');

document.getElementById('main-app').classList.remove('hidden');

showToast('Selamat datang kembali, Bendahara!');

renderAllData();

} else {

showToast('Username atau password salah!', 'error');

}

function checkSession() {

const saved = localStorage.getItem('bm_user');

if (saved) {

state.user = JSON.parse(saved);

document.getElementById('login-view').classList.add('hidden');

document.getElementById('main-app').classList.remove('hidden');

renderAllData();

}

function handleLogout() {

localStorage.removeItem('bm_user');

state.user = null;

document.getElementById('main-app').classList.add('hidden');

document.getElementById('login-view').classList.remove('hidden');

showToast('Berhasil keluar sistem');

}

// NAVIGATION & TABS

function switchTab(tabId) {

state.activeTab = tabId;

document.querySelectorAll('main > section').forEach(sec => sec.classList.add('hidden'));

document.getElementById(`view-${tabId}`).classList.remove('hidden');

document.querySelectorAll('.nav-item').forEach(btn => {

btn.classList.remove('bg-primary-50', 'text-primary-700', 'font-bold');

btn.classList.add('text-slate-600');

});

const activeBtn = document.getElementById(`nav-${tabId}`);

if (activeBtn) {

activeBtn.classList.add('bg-primary-50', 'text-primary-700', 'font-bold');

}

toggleSidebar(false);

}

function toggleSidebar(show) {

const sb = document.getElementById('sidebar');

const bd = document.getElementById('sidebar-backdrop');

if (show) {

sb.classList.remove('-translate-x-full');

bd.classList.remove('hidden');

} else {

sb.classList.add('-translate-x-full');

bd.classList.add('hidden');

}

function showComingSoon(feature) {

showToast(`�� Fitur [${feature}] akan hadir di versi V2!`);

}

// FORMAT CURRENCY

function formatRp(val) {

return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(val);

}

// RENDER DATA ENGINE

function renderAllData() {

renderDashboard();

renderMembers();

renderCashIn();

renderCashOut();

renderRekap();

populateMemberDropdown();

}

function renderDashboard() {

const totalIn = state.cashIn.reduce((acc, curr) => acc + Number(curr.nominal), 0);

const totalOut = state.cashOut.reduce((acc, curr) => acc + Number(curr.nominal), 0);

const saldo = totalIn - totalOut;

document.getElementById('stat-total-kas').innerText = formatRp(saldo);

document.getElementById('stat-kas-masuk').innerText = formatRp(totalIn);

document.getElementById('stat-kas-keluar').innerText = formatRp(totalOut);

// Recent Transactions (Combined & sorted)

const combined = [

...state.cashIn.map(i => ({ ...i, type: 'IN' })),

...state.cashOut.map(o => ({ ...o, type: 'OUT' }))

].sort((a, b) => new Date(b.tgl) - new Date(a.tgl)).slice(0, 5);

const tbody = document.getElementById('recent-transactions-list');

if (combined.length === 0) {

tbody.innerHTML = `<tr><td colspan="4" class="p-4 text-center text-slate-400">Belum ada transaksi</td></tr>`;

return;

}

tbody.innerHTML = combined.map(item => `

${item.type === 'IN' ? 'Infaq' : 'Pengeluaran'}

</span>

</td>

<td class="p-3.5 font-medium text-slate-800">${item.type === 'IN' ? (item.memberNama + ' (KK ' + item.kk + ')') : item.kategori + ' - ' + item.ket}</td>

${item.type === 'IN' ? '+' : '-'}${formatRp(item.nominal)}

</td>

</tr>

`).join('');

}

function renderMembers() {

const search = document.getElementById('search-member')?.value.toLowerCase() || '';

const filtered = state.members.filter(m =>

m.nama.toLowerCase().includes(search) ||

m.kk.toLowerCase().includes(search) ||

m.status.toLowerCase().includes(search)

);

const tbody = document.getElementById('member-table-body');

if (filtered.length === 0) {

tbody.innerHTML = `<tr><td colspan="5" class="p-4 text-center text-slate-400">Data jamaah tidak ditemukan</td></tr>`;

return;

}

tbody.innerHTML = filtered.map(m => `

${m.status}

</span>

</td>

</button>

</td>

</tr>

`).join('');

}

function renderCashIn() {

const tbody = document.getElementById('cashin-table-body');

if (state.cashIn.length === 0) {

tbody.innerHTML = `<tr><td colspan="5" class="p-4 text-center text-slate-400">Belum ada riwayat infaq</td></tr>`;

return;

}

tbody.innerHTML = state.cashIn.map(c => `

<td class="p-3.5 font-semibold text-slate-800">${c.memberNama} <span class="text-xs font-normal text-slate-400">(KK ${c.kk})</span></td>

<td class="p-3.5"><span class="px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-medium">${c.jenis}</span></td>

<td class="p-3.5 text-right font-extrabold text-emerald-600">${formatRp(c.nominal)}</td>

</tr>

`).join('');

}

function renderCashOut() {

const tbody = document.getElementById('cashout-table-body');

if (state.cashOut.length === 0) {

tbody.innerHTML = `<tr><td colspan="4" class="p-4 text-center text-slate-400">Belum ada data kas keluar</td></tr>`;

return;

}

tbody.innerHTML = state.cashOut.map(o => `

<td class="p-3.5 font-semibold text-slate-800">${o.kategori}</td>

<td class="p-3.5 text-right font-extrabold text-rose-600">${formatRp(o.nominal)}</td>

</tr>

`).join('');

}

function renderRekap() {

// Group cashIn by KK

const kkMap = {};

state.members.forEach(m => {

if (!kkMap[m.kk]) {

kkMap[m.kk] = { count: 0, totalInfaq: 0 };

}

kkMap[m.kk].count += 1;

});

state.cashIn.forEach(c => {

if (kkMap[c.kk]) {

kkMap[c.kk].totalInfaq += Number(c.nominal);

}

});

const tbody = document.getElementById('rekap-table-body');

const entries = Object.entries(kkMap);

if (entries.length === 0) {

tbody.innerHTML = `<tr><td colspan="4" class="p-4 text-center text-slate-400">Data rekap tidak tersedia</td></tr>`;

return;

}

tbody.innerHTML = entries.map(([kkName, info]) => `

<td class="p-3.5 font-bold text-slate-800">KK. ${kkName}</td>

<td class="p-3.5 text-slate-600">${info.count} Orang</td>

<td class="p-3.5 font-extrabold text-primary-700">${formatRp(info.totalInfaq)}</td>

<span class="px-3 py-1 rounded-full text-xs font-semibold ${info.totalInfaq > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'}">

${info.totalInfaq > 0 ? 'Aktif Berinfaq' : 'Belum Ada Infaq'}

</span>

</td>

</tr>

`).join('');

}

function populateMemberDropdown() {

const select = document.getElementById('cashin-member');

if (!select) return;

select.innerHTML = state.members.map(m => `<option value="${m.id}">${m.nama} (KK ${m.kk})</option>`).join('');

}

// MODAL HANDLERS

function openModalMember() { document.getElementById('modal-member').classList.remove('hidden'); }

function openModalCashIn() { populateMemberDropdown(); document.getElementById('modal-cashin').classList.remove('hidden'); }

function openModalCashOut() { document.getElementById('modal-cashout').classList.remove('hidden'); }

function closeModal(id) { document.getElementById(id).classList.add('hidden'); }

// CRUD ACTIONS (Optimistic UI)

function saveMember(e) {

e.preventDefault();

const newMem = {

id: 'M-' + Date.now(),

nama: document.getElementById('member-nama').value,

kk: document.getElementById('member-kk').value,

status: document.getElementById('member-status').value,

hp: document.getElementById('member-hp').value

};

state.members.push(newMem);

renderAllData();

closeModal('modal-member');

showToast('Jamaah berhasil ditambahkan!');

document.getElementById('form-member').reset();

}

function deleteMember(id) {

if (confirm('Yakin ingin menghapus jamaah ini?')) {

state.members = state.members.filter(m => m.id !== id);

renderAllData();

showToast('Data jamaah terhapus');

}

function saveCashIn(e) {

e.preventDefault();

const memberId = document.getElementById('cashin-member').value;

const selectedMem = state.members.find(m => m.id === memberId) || { nama: 'Hamba Allah', kk: 'Lainnya' };

const newIn = {

id: 'CI-' + Date.now(),

tgl: new Date().toISOString().split('T')[0],

memberNama: selectedMem.nama,

kk: selectedMem.kk,

jenis: document.getElementById('cashin-jenis').value,

nominal: Number(document.getElementById('cashin-nominal').value),

ket: document.getElementById('cashin-ket').value

};

state.cashIn.unshift(newIn);

renderAllData();

closeModal('modal-cashin');

showToast('Infaq berhasil dicatat!');

document.getElementById('form-cashin').reset();

}

function saveCashOut(e) {

e.preventDefault();

const newOut = {

id: 'CO-' + Date.now(),

tgl: new Date().toISOString().split('T')[0],

kategori: document.getElementById('cashout-kategori').value,

nominal: Number(document.getElementById('cashout-nominal').value),

ket: document.getElementById('cashout-ket').value

};

state.cashOut.unshift(newOut);

renderAllData();

closeModal('modal-cashout');

showToast('Pengeluaran berhasil dicatat!');

document.getElementById('form-cashout').reset();

}

/* PLACEHOLDER: JS BARU */

</script>