#church-sidebar { width: 220px; background: #2c3e50; color: white; padding: 20px 0; }
.nav-btn { padding: 15px 25px; cursor: pointer; border-bottom: 1px solid #34495e; font-size: 14px; }
.nav-btn:hover, .nav-btn.active { background: #3498db; }
#church-content { flex: 1; padding: 30px; background: #fff; }
.page-panel { display: none; }
.page-panel.active { display: block; }
.card { border: 1px solid #eee; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
input, select { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }
.action-btn { background: #3498db; color: white; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; width: 100%; font-weight: bold; }
.debt-text { color: #e74c3c; font-weight: bold; }
.paid-text { color: #27ae60; font-weight: bold; }
const churchApp = {
data: [],
activeID: null,
async load() {
try {
const res = await fetch(‘/wp-json/wp/v2/church_member?per_page=100&nocache=’ + Date.now());
this.data = await res.json();
this.renderReport();
} catch(e) { console.error(“Data Load Failed”, e); }
},
nav(id) {
document.querySelectorAll(‘.page-panel’).forEach(p => p.classList.remove(‘active’));
document.querySelectorAll(‘.nav-btn’).forEach(b => b.classList.remove(‘active’));
document.getElementById(id).classList.add(‘active’);
event.currentTarget.classList.add(‘active’);
},
searchDir() {
const q = document.getElementById(‘dir-search’).value.toLowerCase();
const res = document.getElementById(‘dir-results’);
if(!q) { res.innerHTML = “”; return; }
res.innerHTML = this.data.filter(m => m.title.rendered.toLowerCase().includes(q)).map(m => `
`).join(”);
},
searchPay() {
const q = document.getElementById(‘pay-search-in’).value.toLowerCase();
const res = document.getElementById(‘pay-search-results’);
if(!q) { res.innerHTML = “”; return; }
res.innerHTML = this.data.filter(m => m.title.rendered.toLowerCase().includes(q)).map(m => `
${html}`; } }; const v = id => document.getElementById(id) ? document.getElementById(id).value : ”; churchApp.load();
Panda express crab rangoonMember Directory
Register Member
Update Payments
Update Payment
New Booking
Financial Report
Loading financial totals…
Edit Details
${m.title.rendered}
${m.meta.phone}
${m.meta.phone}
${m.title.rendered} (Select to pay)
`).join(”);
},
prepPay(id, name) {
this.activeID = id;
document.getElementById(‘pay-search-results’).innerHTML = “”;
document.getElementById(‘pay-name-display’).innerText = “Updating: ” + name;
document.getElementById(‘pay-form’).style.display = “block”;
},
openEdit(id, name, ph, ad) {
this.activeID = id;
document.getElementById(‘edit-name’).value = name;
document.getElementById(‘edit-phone’).value = ph;
document.getElementById(‘edit-addr’).value = ad;
document.getElementById(‘modal-edit’).style.display = ‘block’;
},
async sync(action) {
const body = {
action, id: this.activeID,
f_name: v(‘reg-fn’), m_name: v(‘reg-mn’), l_name: v(‘reg-ln’),
phone: v(‘reg-ph’), address: v(‘reg-ad’), join_date: v(‘reg-jd’), pledge_goal: v(‘reg-pg’),
amt_sub: v(‘pay-amt-sub’), amt_fun: v(‘pay-amt-fun’), amt_pld: v(‘pay-amt-pld’),
name: v(‘bk-name’), date: v(‘bk-date’), fee: v(‘bk-fee’),
full_name: v(‘edit-name’), phone_edit: v(‘edit-phone’), addr_edit: v(‘edit-addr’)
};
await fetch(‘/wp-json/church/v7/sync’, { method: ‘POST’, headers: {‘Content-Type’: ‘application/json’}, body: JSON.stringify(body) });
alert(“Database Updated!”); location.reload();
},
renderReport() {
let totalIn = 0;
let html = ‘Member Balances
‘; const now = new Date(); this.data.forEach(m => { const months = (now.getFullYear() – new Date(m.meta.join_date).getFullYear()) * 12 + (now.getMonth() – new Date(m.meta.join_date).getMonth()) + 1; const debt = (months * 2) – (parseFloat(m.meta.paid_sub) + parseFloat(m.meta.paid_fun)); totalIn += (parseFloat(m.meta.paid_sub) + parseFloat(m.meta.paid_fun) + parseFloat(m.meta.paid_pledge)); html += `${m.title.rendered}: 0?’debt-text’:’paid-text’}”>${debt>0?’Owes $’+debt:’Paid’}
`;
});
document.getElementById(‘report-summary’).innerHTML = `Total Church Income: $${totalIn}${html}`; } }; const v = id => document.getElementById(id) ? document.getElementById(id).value : ”; churchApp.load();