Subject Focus: "Zaphyr Zur Pomicpic",designation:"Director of Operations",assignment:"Client A, Client B",status:"Active",rate:12,workEmail:"z.pomicpic@example.com",joinDate:"2018-11-26",address:"Block 2 Lot 6 Rambutan St. Tierra Verde Village, Sasa, Davao, Davao Del Sur, 8000, Philippines",sss:"34-1234567-8",pagibig:"1234-5678-9012",philhealth:"01-0123456789-0",tin:"123-456-789-000",bankName:"BDO",accountNumber:"0012-3456-7890"},{id:"ZBP-1004",fullName:"Fatima May Namalata",designation:"Business Development Manager",assignment:"Client A",status:"Active",rate:6,workEmail:"f.namalata@example.com",joinDate:"2020-02-17",address:"48 MARS STREET MACASANDIG, CAGAYAN DE ORO, MISAMIS ORIENTAL, 9000, Philippines",sss:"34-2345678-9",pagibig:"2345-6789-0123",philhealth:"02-0234567890-1",tin:"234-567-890-000",bankName:"BPI",accountNumber:"1123-4567-8901"},{id:"ZBP-1050",fullName:"Shelly (Michelle) Jose",designation:"Maintenance Manager",assignment:"Client B",status:"Active",rate:4.75,workEmail:"s.jose@example.com",joinDate:"2022-03-18",address:"Block 1 Lot 49 Kensington 21, Lancaster New City, General Trias, Cavite, 4107, Philippines",sss:"34-3456789-0",pagibig:"3456-7890-1234",philhealth:"03-0345678901-2",tin:"345-678-901-000",bankName:"Metrobank",accountNumber:"2234-5678-9012"},{id:"ZBP-1005",fullName:"Mary Galillaga",designation:"Customer Success Rep",assignment:"Client A",status:"Active",rate:4.25,workEmail:"m.galillaga@example.com",joinDate:"2022-05-06",address:"7350 Maria Clara St. La Huerta, Paranaque City, Manila, 1700, Philippines",sss:"34-4567890-1",pagibig:"4567-8901-2345",philhealth:"04-0456789012-3",tin:"456-789-012-000",bankName:"BPI",accountNumber:"3345-6789-0123"},{id:"ZBP-1070",fullName:"Belle (Maybelline) Martinez",designation:"Customer Success Rep",assignment:"Client A",status:"Active",rate:5,workEmail:"b.martinez@example.com",joinDate:"2023-01-09",address:"89 S Mateo Street, Taytay, Rizal, 1920, Philippines",sss:"34-5678901-2",pagibig:"5678-9012-3456",philhealth:"05-0567890123-4",tin:"567-890-123-000",bankName:"BDO",accountNumber:"4456-7890-1234"}];let processedPayrollData=[],currentExchangeRate=58.75;document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll(".tab"),t=document.querySelectorAll(".tab-content"),a=document.getElementById("payrollFile"),l=document.getElementById("processPayrollBtn"),n=document.getElementById("downloadTemplateBtn"),o=document.querySelector("#payroll-register-table tbody"),r=document.querySelector("#employee-database-table tbody"),i=document.getElementById("payslipEmployeeSelect"),s=document.getElementById("certEmployeeSelect"),c=document.getElementById("generatePayslipBtn"),d=document.getElementById("generateCertBtn"),p=document.getElementById("payslip-view"),u=document.getElementById("certificate-view"),m=document.getElementById("printReportBtn"),y=document.getElementById("printPayslipBtn"),g=document.getElementById("printCertBtn"),h=document.getElementById("file-name"),f=document.getElementById("contact-form"),v=document.getElementById("contactModal"),b=document.getElementById("openModalBtn"),E=document.getElementById("closeModalBtn"),L=new Date,k=new Date(L.setDate(L.getDate()-L.getDay()+1)),H=new Date(k);function x(e){processedPayrollData=[],headerRowIndex=e.findIndex(e=>e.map(e=>String(e||"").toLowerCase()).includes("employee")),-1===headerRowIndex?alert("Could not find a valid header row in the timesheet. The header must contain a column named 'Employee'."):(_=e[headerRowIndex].map(e=>String(e||"").trim().toLowerCase()),A=e.slice(headerRowIndex+1),w={employee:_.indexOf("employee"),"weekly hours rendered":_.indexOf("weekly hours rendered"),"paid timeoff hours":_.indexOf("paid timeoff hours"),commissions:_.indexOf("commissions"),bonus:_.indexOf("bonus"),"health card credit":_.indexOf("health card credit"),sss:_.indexOf("sss"),"pag ibig":_.indexOf("pag ibig"),philhealth:_.indexOf("philhealth"),"cash adv/loans":_.indexOf("cash adv/loans"),"compliance adjustment":_.indexOf("compliance adjustment")},A.forEach(e=>{const t=e[w.employee];if(t){const a=employeeDatabase.find(e=>e.fullName.toLowerCase()===t.toLowerCase());if(a){const t=e=>parseFloat(e[w[key]])||0,l=t("weekly hours rendered"),n=t("paid timeoff hours"),o=a.rate||0,r=l*o,i=n*o,s=t("commissions"),c=t("bonus"),d=t("health card credit"),p=t("sss"),u=t("pag ibig"),m=t("philhealth"),y=t("cash adv/loans"),g=t("compliance adjustment"),h=r+i+s+c+d+p+u+m+g;processedPayrollData.push({id:a.id,fullName:a.fullName,rate:o,weeklyHours:l,ptoHours:n,grossHourlyPay:r,grossPtoPay:i,commissions:s,bonus:c,healthCard:d,sss:p,pagibig:u,philhealth:m,loans:y,adjustments:g,totalGrossPay:h,takeHomePay:h-y})}else console.warn(`Employee not found in database: ${t}`)}}),C(),S(),alert("Payroll processed successfully. You can now generate payslips and certificates."))}function C(){o.innerHTML="";let e={weeklyHours:0,ptoHours:0,grossHourlyPay:0,grossPtoPay:0,commissions:0,bonus:0,healthCard:0,sss:0,pagibig:0,philhealth:0,loans:0,adjustments:0,totalGrossPay:0,takeHomePay:0};processedPayrollData.forEach(t=>{const a=document.createElement("tr");a.innerHTML=`\n ${t.id}${t.fullName}${t.rate.toFixed(2)}\n ${t.weeklyHours.toFixed(2)}${t.ptoHours.toFixed(2)}\n ${t.grossHourlyPay.toFixed(2)}${t.grossPtoPay.toFixed(2)}\n ${t.commissions.toFixed(2)}${t.bonus.toFixed(2)}\n ${t.healthCard.toFixed(2)}${t.sss.toFixed(2)}\n ${t.pagibig.toFixed(2)}${t.philhealth.toFixed(2)}\n ${t.loans.toFixed(2)}${t.adjustments.toFixed(2)}\n ${t.totalGrossPay.toFixed(2)}${t.takeHomePay.toFixed(2)}\n `,o.appendChild(a);for(const a in e)e[a]+=t[a]||0});const t=document.querySelector("#payroll-register-table tfoot");t.innerHTML=`\n \n TOTALS\n ${e.weeklyHours.toFixed(2)}${e.ptoHours.toFixed(2)}\n ${e.grossHourlyPay.toFixed(2)}${e.grossPtoPay.toFixed(2)}\n ${e.commissions.toFixed(2)}${e.bonus.toFixed(2)}\n ${e.healthCard.toFixed(2)}${e.sss.toFixed(2)}\n ${e.pagibig.toFixed(2)}${e.philhealth.toFixed(2)}\n ${e.loans.toFixed(2)}${e.adjustments.toFixed(2)}\n ${e.totalGrossPay.toFixed(2)}${e.takeHomePay.toFixed(2)}\n \n `}function S(){i.innerHTML='-- Select Employee --',s.innerHTML='-- Select Employee --',processedPayrollData.forEach(e=>{const t=`${e.fullName}`;i.innerHTML+=t,s.innerHTML+=t})}function P(e,t){if(!e||!t)return void(p.innerHTML='Could not generate payslip. Data not found.');const a=t=>(t*currentExchangeRate).toLocaleString("en-US",{style:"currency",currency:"PHP"}),l=e.grossHourlyPay+e.grossPtoPay+e.commissions+e.bonus,n=e.sss,o=e.pagibig,r=e.philhealth,i=e.adjustments,s=e.loans,c=n+o+r,d=c+i+s,u=l-d,m=c,y=u+m,g=new Date(document.getElementById("payPeriodStart").value).toLocaleDateString("en-US",{month:"long",day:"numeric"}),h=new Date(document.getElementById("payPeriodEnd").value).toLocaleDateString("en-US",{day:"numeric",year:"numeric"}),f=new Date(document.getElementById("payPeriodEnd").value);f.setDate(f.getDate()+1),p.innerHTML=`\n \n \n \n \n \n \n Weekly Payslip\n \n Pay Period: ${g} - ${h}\n Pay Date: ${f.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"})}\n \n \n \n \n \n \n 👤 Employee Details\n \n Full Name:${t.fullName}\n Employee ID:${t.id}\n Position:${t.designation}\n Work Location:${t.address.split(",").slice(-3).join(", ").trim()}\n Govt. IDs:SSS: ${t.sss} | PhilHealth: ${t.philhealth} | Pag-IBIG: ${t.pagibig} | TIN: ${t.tin}\n \n \n \n 🌐 Employer Details\n \n Company:Z-BridgePay Solutions\n Address:123 Innovation Drive, Austin, TX, USA\n Contact:payroll@z-bridgepay.com\n \n \n \n \n 💵 Compensation Breakdown\n \n DescriptionAmount (PHP)\n \n Basic Pay (${e.weeklyHours.toFixed(2)} hrs @ $${e.rate.toFixed(2)}/hr)${a(e.grossHourlyPay)}\n Overtime/PTO Pay (${e.ptoHours.toFixed(2)} hrs)${a(e.grossPtoPay)}\n Performance Bonus / Commissions${a(e.commissions+e.bonus)}\n Gross Pay${a(l)}\n \n \n\n 📉 Deductions (Employee-Paid, Reimbursable by Company)\n \n DescriptionAmount (PHP)\n \n SSS Contribution(${a(n)})\n PhilHealth Contribution(${a(r)})\n Pag-IBIG Contribution(${a(o)})\n Withholding Tax (from Adjustments)(${a(i)})\n Cash Advance / Loans(${a(s)})\n Total Deductions(${a(d)})\n \n \n \n 💰 Net Pay & Reimbursement\n \n DescriptionAmount (PHP)\n \n Net Pay (Take-Home)${a(u)}\n Reimbursement of Gov’t Deductions${a(m)}\n Total Credited to Bank${a(y)}\n \n \n\n \n \n 🏦 Bank Deposit Details\n \n Bank Name:${t.bankName}\n Account Number:${t.accountNumber}\n Payment Method:Direct Deposit\n Currency:PHP\n \n \n \n 📌 Notes for Verification\n \n This payslip reflects weekly compensation for a remote employee under a foreign employer.\n All Philippine government-mandated deductions are paid by the employee and reimbursed in full by the company.\n This document is valid for income verification for housing or car loan applications.\n For questions, contact HR at payroll@z-bridgepay.com.\n \n \n \n\n \n Z-BridgePay Solutions | 123 Innovation Drive, Austin, TX, USA\n \n \n `}function D(e,t){if(!e||!t)return void(u.innerHTML='Could not generate certificate. Data not found.');const a=new Date(document.getElementById("certDate").value).toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}),l=new Date(t.joinDate).toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"});u.innerHTML=`\n \n \n \n \n \n \n Certificate of Employment & Compensation\n \n \n \n Date: ${a}\n TO WHOM IT MAY CONCERN:\n This is to certify that ${t.fullName} is an active, full-time remote contractor for Z-BridgePay Solutions.\n He/She holds the position of ${t.designation}, and has been engaged with the company since ${l}.\n This certification is issued to attest that for the pay period ending on the date of this certificate, the contractor has an average weekly compensation, inclusive of all bonuses and fees, amounting to approximately $${e.takeHomePay.toFixed(2)} USD.\n This document is issued upon the request of the aforementioned individual for whatever legal and lawful purpose it may serve.\n \n \n Sincerely,\n \n Zaphyr Zur Pomicpic\n Authorizing Manager\n Z-BridgePay Solutions\n \n \n \n \n Z-BridgePay Solutions | 123 Innovation Drive, Austin, TX, USA\n This is a legally binding document. All information contained herein is accurate as of the date of generation.\n \n \n `}function B(){r.innerHTML="",employeeDatabase.forEach(e=>{const t=document.createElement("tr");t.innerHTML=`\n ${e.id}${e.fullName}${e.designation}\n ${e.assignment}${e.status}\n ${e.rate?e.rate.toFixed(2):"N/A"}\n ${e.workEmail}${e.joinDate}\n `,r.appendChild(t)})}H.setDate(H.getDate()+6),document.getElementById("payPeriodStart").valueAsDate=k,document.getElementById("payPeriodEnd").valueAsDate=H,document.getElementById("certDate").valueAsDate=new Date,e.forEach(e=>{e.addEventListener("click",()=>{e.forEach(e=>e.classList.remove("active")),t.forEach(e=>{e.classList.remove("active"),e.classList.remove("animate-fadeIn")}),e.classList.add("active");const a=document.getElementById(`${e.dataset.tab}-tab`);a.classList.add("active"),void a.offsetWidth,a.classList.add("animate-fadeIn")})}),a.addEventListener("change",e=>{h.textContent=e.target.files.length>0?`Selected file: ${e.target.files[0].name}`:""}),l.addEventListener("click",()=>{const e=a.files[0];if(e){currentExchangeRate=parseFloat(document.getElementById("exchangeRate").value)||58.75;const t=new FileReader;t.onload=function(t){let a;try{e.name.endsWith(".xlsx")?(workbook=XLSX.read(t.target.result,{type:"binary"}),sheetName=workbook.SheetNames[0],a=XLSX.utils.sheet_to_json(workbook.Sheets[sheetName],{header:1})):e.name.endsWith(".csv")?(parsed=Papa.parse(t.target.result,{header:!1}),a=parsed.data):function(){throw new Error("Unsupported file type.")}(),x(a)}catch(e){console.error("Error processing file:",e),alert("Error processing file. Please ensure it's a valid .csv or .xlsx file and the format is correct.")}},e.name.endsWith(".xlsx")?t.readAsBinaryString(e):t.readAsText(e)}else alert("Please upload a payroll timesheet file first.")}),c.addEventListener("click",()=>{const e=i.value;if(e){const t=processedPayrollData.find(t=>t.id===e),a=employeeDatabase.find(t=>t.id===e);P(t,a)}else alert("Please select an employee to generate a payslip.")}),d.addEventListener("click",()=>{const e=s.value;if(e){const t=processedPayrollData.find(t=>t.id===e),a=employeeDatabase.find(t=>t.id===e);D(t,a)}else alert("Please select an employee to generate a certificate.")}),n.addEventListener("click",()=>{const e=["Employee","Weekly Hours Rendered","Paid TimeOff Hours","Commissions","Bonus","Health Card Credit","SSS","Pag Ibig","PhilHealth","Cash Adv/Loans","Compliance Adjustment"],t=["Zaphyr Zur Pomicpic","40","0","50","0","0","10","5","5","0","0"];let a=[e,t].map(e=>e.join(",")).join("\r\n");const l=new Blob([a],{type:"text/csv;charset=utf-8;"}),n=document.createElement("a");void 0!==n.download&&(url=URL.createObjectURL(l),n.setAttribute("href",url),n.setAttribute("download","payroll_template.csv"),n.style.visibility="hidden",document.body.appendChild(n),n.click(),document.body.removeChild(n))}),m.addEventListener("click",()=>{const e=document.getElementById("payroll-tab"),a=e.classList.contains("active");a||e.classList.add("active"),window.print(),a||e.classList.remove("active")}),y.addEventListener("click",()=>{const e=document.getElementById("payslip-to-print");e?html2canvas(e).then(e=>{const t=e.toDataURL("image/png"),{jsPDF:a}=window.jspdf,l=new a({orientation:"p",unit:"px",format:[e.width,e.height]});l.addImage(t,"PNG",0,0,e.width,e.height),l.save(`${i.options[i.selectedIndex].text}_payslip.pdf`)}):alert("Please generate a payslip first.")}),g.addEventListener("click",()=>{const e=document.getElementById("certificate-to-print");e?html2canvas(e).then(e=>{const t=e.toDataURL("image/png"),{jsPDF:a}=window.jspdf,l=new a({orientation:"p",unit:"px",format:[e.width,e.height]});l.addImage(t,"PNG",0,0,e.width,e.height),l.save(`${s.options[s.selectedIndex].text}_certificate.pdf`)}):alert("Please generate a certificate first.")}),b.addEventListener("click",()=>v.classList.add("active")),E.addEventListener("click",()=>v.classList.remove("active")),v.addEventListener("click",e=>{e.target===v&&v.classList.remove("active")}),f.addEventListener("submit",function(e){e.preventDefault();const t=document.getElementById("form-message");t.textContent="Thank you for your message! We will get back to you shortly.",t.style.backgroundColor="var(--secondary-color)",t.style.color="var(--white)",t.style.display="block",f.reset(),setTimeout(()=>{t.style.display="none",v.classList.remove("active")},3e3)}),B()});. General operational documentation detailing procedural guidelines. To the end-user or system maintainer, this acts as a clear, readable manual that outlines the day-to-step architecture maintenance required to keep Z-Bridges online.