/* CSS Styling */
#dfm-app { font-family: ‘Segoe UI’, sans-serif; max-width: 1200px; margin: 0 auto; background: #f4f6f9; min-height: 600px; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0,0,0,0.1); display: flex; }
/* Login Screen */
#dfm-login { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.login-box { background: white; padding: 40px; border-radius: 8px; width: 350px; text-align: center; }
.login-box input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; }
.login-box button { width: 100%; padding: 10px; background: #2c3e50; color: white; border: none; cursor: pointer; }
/* Layout */
.dfm-sidebar { width: 250px; background: #2c3e50; color: white; display: flex; flex-direction: column; }
.dfm-sidebar h2 { padding: 20px; margin: 0; font-size: 18px; background: #1a252f; }
.dfm-nav-item { padding: 15px 20px; cursor: pointer; border-bottom: 1px solid #34495e; transition: 0.3s; }
.dfm-nav-item:hover, .dfm-nav-item.active { background: #3498db; }
.dfm-content { flex: 1; padding: 30px; overflow-y: auto; height: 800px; position: relative; }
/* Sections */
.section { display: none; }
.section.active { display: block; }
.card { background: white; padding: 20px; border-radius: 5px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.stat-box { background: white; padding: 20px; text-align: center; border-radius: 5px; border-left: 5px solid #3498db; }
.stat-box.debt { border-color: #e74c3c; }
/* Tables & Forms */
table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; }
th, td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
th { background: #f8f9fa; font-weight: 600; }
.debt-text { color: #e74c3c; font-weight: bold; }
.surplus-text { color: #27ae60; font-weight: bold; }
.form-row { display: flex; gap: 10px; margin-bottom: 10px; }
input, select, textarea { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex: 1; }
.btn { padding: 8px 15px; background: #3498db; color: white; border: none; cursor: pointer; border-radius: 3px; }
.btn-danger { background: #e74c3c; }
.btn-success { background: #27ae60; }
/* Calendar */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day { background: white; height: 80px; padding: 5px; font-size: 12px; border: 1px solid #eee; }
.cal-day.event { background: #e8f6ff; border-color: #3498db; }
Welcome,
Members
0
Monthly Income
$0
Total Debts
$0
Events This Month
0
Quick Actions
Member Register
Add New Member
| Name | Title | Phone | Subs Status | Funeral Status | Pledge (Pd/Total) |
|---|
Financial Section
Record Payment / Transaction
General / Unknown
Monthly Subscription ($1)
Funeral Subscription ($1)
Pledge Payment
Seed Money
Tithe
Transaction History
| Date | Member | Type | Amount | Notes |
|---|
Bookings & Consultations
Note: Access Restricted to Secretaries.
Upcoming Appointments
No active appointments.
Church Attendance & Teachings
Yearly Calendar
// CONFIG
const ajaxurl = ‘/wp-admin/admin-ajax.php’; // Standard WP AJAX URL
let currentUser = null;
// — LOGIN LOGIC —
function attemptLogin() {
const u = document.getElementById(‘login-user’).value;
const p = document.getElementById(‘login-pass’).value;
const formData = new FormData();
formData.append(‘action’, ‘dfm_login’);
formData.append(‘username’, u);
formData.append(‘password’, p);
fetch(ajaxurl, { method: ‘POST’, body: formData })
.then(res => res.json())
.then(data => {
if(data.success) {
currentUser = data.data;
document.getElementById(‘dfm-login’).style.display = ‘none’;
document.getElementById(‘dfm-app’).style.display = ‘flex’;
document.getElementById(‘user-display’).innerText = currentUser.username;
loadData(); // Load initial data
} else {
document.getElementById(‘login-msg’).innerText = “Incorrect Password or Username”;
}
});
}
// — NAVIGATION —
function nav(id) {
document.querySelectorAll(‘.section’).forEach(el => el.classList.remove(‘active’));
document.querySelectorAll(‘.dfm-nav-item’).forEach(el => el.classList.remove(‘active’));
document.getElementById(id).classList.add(‘active’);
// Highlight nav item logic omitted for brevity
}
// — DATA LOADING & LOGIC —
function loadData() {
// 1. Get Members
const fd = new FormData();
fd.append(‘action’, ‘dfm_api’);
fd.append(‘action_type’, ‘get_members’);
fetch(ajaxurl, { method: ‘POST’, body: fd })
.then(res => res.json())
.then(data => {
const members = data.data;
const tbody = document.getElementById(‘members-table’);
const select = document.getElementById(‘f_member’);
tbody.innerHTML = ”;
select.innerHTML = ‘General’;
document.getElementById(‘total-members’).innerText = members.length;
let totalDebt = 0;
members.forEach(m => {
// Populate Select Dropdown
let opt = document.createElement(‘option’);
opt.value = m.id;
opt.innerText = m.first_name + ‘ ‘ + m.last_name;
select.appendChild(opt);
// Populate Table
let tr = document.createElement(‘tr’);
// Debt Logic Display
let subClass = m.financials.sub_status < 0 ? 'debt-text' : 'surplus-text';
let funClass = m.financials.funeral_status < 0 ? 'debt-text' : 'surplus-text';
if(m.financials.sub_status < 0) totalDebt += Math.abs(m.financials.sub_status);
tr.innerHTML = `
${m.first_name} ${m.last_name} |
${m.title} |
${m.phone} |
${m.financials.sub_status >= 0 ? ‘+$’ : ‘-$’}${Math.abs(m.financials.sub_status)} |
${m.financials.funeral_status >= 0 ? ‘+$’ : ‘-$’}${Math.abs(m.financials.funeral_status)} |
$${m.financials.pledge_paid} / $${m.financials.pledge_target} |
`;
tbody.appendChild(tr);
});
document.getElementById(‘total-debts’).innerText = ‘$’ + totalDebt;
});
// 2. Get Finance History
const fd2 = new FormData();
fd2.append(‘action’, ‘dfm_api’);
fd2.append(‘action_type’, ‘get_finance_report’);
fetch(ajaxurl, { method: ‘POST’, body: fd2 })
.then(res => res.json())
.then(data => {
const trans = data.data;
const tbody = document.getElementById(‘finance-table’);
tbody.innerHTML = ”;
trans.forEach(t => {
let tr = document.createElement(‘tr’);
let name = t.member_id == 0 ? ‘General’ : t.first_name + ‘ ‘ + t.last_name;
tr.innerHTML = `
${t.date.split(‘ ‘)[0]} | ${name} | ${t.type} | $${t.amount} | ${t.notes} | `;
tbody.appendChild(tr);
});
});
// 3. Get Events
const fd3 = new FormData();
fd3.append(‘action’, ‘dfm_api’);
fd3.append(‘action_type’, ‘get_events’);
fetch(ajaxurl, { method: ‘POST’, body: fd3 })
.then(res => res.json())
.then(data => {
const events = data.data;
let calHtml = ‘
‘;
// Simplified Visualization for demo
events.forEach(e => {
calHtml += `
${e.start_date}
${e.title}
`;
});
calHtml += ‘
‘;
document.getElementById(‘calendar-view’).innerHTML = calHtml;
});
}
// — ACTIONS —
function addMember() {
const fd = new FormData();
fd.append(‘action’, ‘dfm_api’);
fd.append(‘action_type’, ‘add_member’);
fd.append(‘fname’, document.getElementById(‘m_fname’).value);
fd.append(‘lname’, document.getElementById(‘m_lname’).value);
fd.append(‘phone’, document.getElementById(‘m_phone’).value);
fd.append(‘address’, document.getElementById(‘m_address’).value);
fd.append(‘title’, document.getElementById(‘m_title’).value);
fd.append(‘relation’, document.getElementById(‘m_relation’).value);
fd.append(‘pledge_target’, document.getElementById(‘m_pledge’).value);
fetch(ajaxurl, { method: ‘POST’, body: fd }).then(() => { alert(‘Saved!’); loadData(); });
}
function addTransaction() {
const fd = new FormData();
fd.append(‘action’, ‘dfm_api’);
fd.append(‘action_type’, ‘add_transaction’);
fd.append(‘member_id’, document.getElementById(‘f_member’).value);
fd.append(‘trans_type’, document.getElementById(‘f_type’).value);
fd.append(‘amount’, document.getElementById(‘f_amount’).value);
fd.append(‘notes’, document.getElementById(‘f_notes’).value);
fetch(ajaxurl, { method: ‘POST’, body: fd }).then(() => { alert(‘Saved!’); loadData(); });
}
function addAttendance() {
const fd = new FormData();
fd.append(‘action’, ‘dfm_api’);
fd.append(‘action_type’, ‘add_attendance’);
fd.append(‘date’, document.getElementById(‘att_date’).value);
fd.append(‘branch’, document.getElementById(‘att_branch’).value);
fd.append(‘topic’, document.getElementById(‘att_topic’).value);
fd.append(‘count’, document.getElementById(‘att_count’).value);
fd.append(‘offering’, document.getElementById(‘att_offer’).value);
fetch(ajaxurl, { method: ‘POST’, body: fd }).then(() => { alert(‘Attendance & Offering Saved!’); });
}
function addExpense() {
const fd = new FormData();
fd.append(‘action’, ‘dfm_api’);
fd.append(‘action_type’, ‘add_transaction’);
fd.append(‘member_id’, 0);
fd.append(‘trans_type’, ‘expense’);
fd.append(‘amount’, ‘-‘ + document.getElementById(‘exp_amount’).value); // Negative for expense
fd.append(‘notes’, document.getElementById(‘exp_desc’).value);
fetch(ajaxurl, { method: ‘POST’, body: fd }).then(() => { alert(‘Expense Recorded!’); loadData(); });
}
function addEvent() {
const fd = new FormData();
fd.append(‘action’, ‘dfm_api’);
fd.append(‘action_type’, ‘add_event’);
fd.append(‘title’, document.getElementById(‘cal_title’).value);
fd.append(‘date’, document.getElementById(‘cal_date’).value);
fd.append(‘desc’, ”);
fetch(ajaxurl, { method: ‘POST’, body: fd }).then(() => { alert(‘Event Added!’); loadData(); });
}
function downloadPDF() {
const element = document.getElementById(‘print-area’);
const opt = {
margin: 1,
filename: ‘DFM_Report.pdf’,
image: { type: ‘jpeg’, quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: ‘in’, format: ‘letter’, orientation: ‘landscape’ }
};
html2pdf().set(opt).from(element).save();
}
Panda menu items