:root { –primary: #2c3e50; –accent: #c0392b; –light: #ecf0f1; –success: #27ae60; } #dfm-app { font-family: ‘Helvetica’, sans-serif; max-width: 100%; background: #f4f6f7; border:1px solid #ddd; } /* Login */ #dfm-login-screen { max-width: 400px; margin: 50px auto; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; } #dfm-login-screen input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } #dfm-login-screen button { width: 100%; padding: 12px; background: var(–primary); color: white; border: none; font-size: 16px; cursor: pointer; } /* Dashboard */ #dfm-dashboard { display: none; display: flex; flex-wrap: wrap; min-height: 600px; } .dfm-nav { width: 250px; background: var(–primary); color: white; flex-shrink: 0; } .dfm-nav-item { padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: 0.2s; } .dfm-nav-item:hover, .dfm-nav-item.active { background: var(–accent); } .dfm-main { flex-grow: 1; padding: 25px; overflow-x: auto; } /* Components */ .dfm-card { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 20px; } .dfm-stat-box { background: white; padding: 15px; border-left: 4px solid var(–accent); margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .dfm-btn { padding: 8px 15px; border:none; color:white; cursor:pointer; border-radius:3px; margin: 2px; } .btn-blue { background: var(–primary); } .btn-green { background: var(–success); } .btn-red { background: var(–accent); } table.dfm-table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; } table.dfm-table th { background: #34495e; color: white; padding: 10px; text-align: left; } table.dfm-table td { padding: 10px; border-bottom: 1px solid #eee; } .hidden-view { display: none; } .active-view { display: block; } // Define AJAX URL specifically for WordPress const wp_ajax_url = ‘/wp-admin/admin-ajax.php’; const DFM = { user: null, data: { members:[], transactions:[], events:[] }, login: function() { let u = $(‘#login_user’).val(); let p = $(‘#login_pass’).val(); $(‘#login_status’).text(“Connecting…”); $.ajax({ url: wp_ajax_url, type: ‘POST’, data: { action: ‘dfm_api_v2’, request_type: ‘login’, username: u, password: p }, success: function(res) { try { let r = JSON.parse(res); if(r.status === ‘success’) { DFM.user = r.user; $(‘#dfm-login-screen’).hide(); $(‘#dfm-dashboard’).css(‘display’,’flex’); if(DFM.user.username === ‘Tafadzwa’) $(‘#nav-admin’).show(); DFM.loadData(); } else { $(‘#login_status’).text(r.message); } } catch(e) { console.log(res); $(‘#login_status’).text(“Server Error. Please check functions.php”); } }, error: function() { $(‘#login_status’).text(“Connection Failed. Is functions.php updated?”); } }); }, loadData: function() { $.post(wp_ajax_url, { action: ‘dfm_api_v2’, request_type: ‘get_all_data’ }, function(res) { let r = JSON.parse(res); DFM.data = r; DFM.render(); }); }, render: function() { // Stats $(‘#s-members’).text(DFM.data.members.length); // Members Table let mHtml = ”; let tOpt = ‘Select Member’; DFM.data.members.forEach(m => { mHtml += `${m.first_name} ${m.last_name}${m.phone}${m.branch}${m.church_title}`; tOpt += `${m.first_name} ${m.last_name}`; }); $(‘#table-members tbody’).html(mHtml); $(‘#t-member’).html(tOpt); // Finance Table let fHtml = ”; let totalIncome = 0; DFM.data.members.forEach(m => { let trans = DFM.data.transactions.filter(t => t.member_id == m.id); let paid = trans.filter(t => t.type == ‘subscription’).reduce((a,b)=>a+parseFloat(b.amount),0); // Simple Debt Logic: Assume $12/year required for simplicity let required = 12; let debt = required – paid; let debtText = debt > 0 ? `-$${debt}` : `Paid`; fHtml += `${m.first_name} ${m.last_name}$${paid}${debtText}–View`; // Total Income Calculation trans.forEach(t => { if(t.is_pledge_commitment == 0) totalIncome += parseFloat(t.amount); }); }); $(‘#table-finance tbody’).html(fHtml); $(‘#s-income’).text(‘$’+totalIncome); }, nav: function(page) { $(‘.active-view’).hide().removeClass(‘active-view’).addClass(‘hidden-view’); $(‘#view-‘+page).show().addClass(‘active-view’); $(‘.dfm-nav-item’).removeClass(‘active’); // Visual feedback on nav items would go here }, // ADD ACTIONS addMember: function() { $.post(wp_ajax_url, { action: ‘dfm_api_v2′, request_type:’add_member’, fname: $(‘#m-fname’).val(), lname: $(‘#m-lname’).val(), phone: $(‘#m-phone’).val(), address: $(‘#m-address’).val(), branch: $(‘#m-branch’).val(), relation: $(‘#m-relation’).val(), title: $(‘#m-title’).val() }, function(){ alert(‘Saved’); $(‘#modal-member’).fadeOut(); DFM.loadData(); }); }, addTrans: function() { let type = $(‘#t-type’).val(); let isPledge = (type === ‘pledge_make’) ? 1 : 0; $.post(wp_ajax_url, { action: ‘dfm_api_v2′, request_type:’add_transaction’, member_id: $(‘#t-member’).val(), trans_type: type, amount: $(‘#t-amount’).val(), is_pledge: isPledge, desc: ‘manual entry’ }, function(){ alert(‘Saved’); $(‘#modal-trans’).fadeOut(); DFM.loadData(); }); }, addStaff: function() { $.post(wp_ajax_url, { action: ‘dfm_api_v2′, request_type:’add_staff’, new_user: $(‘#staff-user’).val(), new_pass: $(‘#staff-pass’).val(), rights: $(‘#staff-rights’).val() }, function() { alert(‘User Created’); }); }, pdf: function(type) { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.text(“DFM Secretariates Report”, 10, 10); if(type === ‘full’) doc.autoTable({ html: ‘#table-members’ }); else doc.autoTable({ html: ‘#table-finance’ }); doc.save(‘dfm_report.pdf’); }, filterMembers: function() { var value = $(“#search-mem”).val().toLowerCase(); $(“#table-members tbody tr”).filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); } };

Panda express federal way