NaijaShare Q-Fix IT Consulting<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <script src=\"\/_sdk\/data_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n*{box-sizing:border-box;margin:0;padding:0}\nhtml,body{height:100%;font-family:'DM Sans',sans-serif}\n.app-shell{height:100%;width:100%;overflow-y:auto;overflow-x:hidden}\n.gradient-hero{background:linear-gradient(135deg,#0a1628 0%,#1a2744 40%,#0f3460 70%,#16213e 100%)}\n.card-surface{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(12px)}\n.accent-glow{box-shadow:0 0 30px rgba(0,210,255,0.15)}\n.btn-primary{background:linear-gradient(135deg,#00d2ff,#0083b0);transition:all .2s}\n.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,210,255,0.3)}\n.btn-secondary{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);transition:all .2s}\n.btn-secondary:hover{background:rgba(255,255,255,0.1)}\n.input-field{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#e2e8f0;transition:border-color .2s}\n.input-field:focus{outline:none;border-color:#00d2ff;box-shadow:0 0 0 2px rgba(0,210,255,0.15)}\n.input-field::placeholder{color:rgba(148,163,184,0.6)}\n.tab-active{border-bottom:2px solid #00d2ff;color:#00d2ff}\n.tab-inactive{border-bottom:2px solid transparent;color:#94a3b8}\n.tab-inactive:hover{color:#cbd5e1}\n.toast-msg{position:fixed;top:20px;right:20px;z-index:9999;padding:12px 20px;border-radius:10px;color:#fff;font-size:14px;animation:slideIn .3s ease}\n.toast-success{background:#059669}\n.toast-error{background:#dc2626}\n@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}\n@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n.fade-up{animation:fadeUp .5s ease forwards}\n.storage-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.1);overflow:hidden}\n.storage-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#00d2ff,#0083b0);transition:width .5s ease}\nselect.input-field{appearance:none;background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12z'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 12px center}\nselect.input-field option{background:#1a2744;color:#e2e8f0}\n.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:100;display:flex;align-items:center;justify-content:center}\n.badge{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600}\n.confirm-bar{background:rgba(220,38,38,0.15);border:1px solid rgba(220,38,38,0.3);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px}\n<\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <\/head>\n <body class=\"h-full\">\n <div class=\"app-shell gradient-hero\" id=\"app\">\n \n <div id=\"toast-container\"><\/div>\n <nav class=\"w-full px-4 py-3 flex items-center justify-between border-b border-white\/5\" style=\"background:rgba(10,22,40,0.9)\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-9 h-9 rounded-lg btn-primary flex items-center justify-center\">\n <i data-lucide=\"cpu\" style=\"width:18px;height:18px;color:#fff\"><\/i>\n <\/div>\n <div>\n <h1 class=\"text-white font-bold text-sm leading-tight\" id=\"nav-title\">NaijaShare Q-Fix<\/h1>\n <p class=\"text-[10px] text-cyan-300\/70\" id=\"nav-tagline\">IT Consulting Professionals<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-1\">\n <button onclick=\"showPage('home')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Home<\/button> <button onclick=\"showPage('register')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Register<\/button> <button onclick=\"showPage('jobs')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Jobs<\/button> <button onclick=\"showPage('payments')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Payments<\/button> <button onclick=\"showPage('storage')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Storage<\/button> <button onclick=\"showPage('data')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Records<\/button> <button onclick=\"toggleMobileMenu()\" class=\"sm:hidden text-white p-1\"><i data-lucide=\"menu\" style=\"width:20px;height:20px\"><\/i><\/button>\n <\/div>\n <\/nav>\n <div id=\"mobile-menu\" class=\"hidden w-full border-b border-white\/5 px-4 py-2 flex flex-col gap-1\" style=\"background:rgba(10,22,40,0.95)\">\n <button onclick=\"showPage('home');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83c\udfe0 Home<\/button> <button onclick=\"showPage('register');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udccb Register<\/button> <button onclick=\"showPage('jobs');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udcbc Jobs<\/button> <button onclick=\"showPage('payments');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udcb3 Payments<\/button> <button onclick=\"showPage('storage');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udce6 Storage<\/button> <button onclick=\"showPage('data');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udcca Records<\/button>\n <\/div>\n <div id=\"page-home\" class=\"page-section w-full\">\n <div class=\"max-w-4xl mx-auto px-4 py-10 text-center\">\n <div class=\"fade-up\">\n <div class=\"inline-block mb-4 px-3 py-1 rounded-full text-[11px] font-semibold text-cyan-300 border border-cyan-500\/30\" style=\"background:rgba(0,210,255,0.08)\">\n Microsoft Certified Professionals\n <\/div>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-3\" id=\"hero-title\" style=\"font-family:'Space Mono',monospace\">NaijaShare Q-Fix IT Consulting<\/h2>\n <p class=\"text-slate-400 text-sm sm:text-base max-w-2xl mx-auto mb-6\" id=\"hero-tagline\">Full-stack developers, Complete A.I. & Machine Learning, Data Science Bootcamp, and IT Security experts ready to solve your technology challenges.<\/p>\n <div class=\"flex flex-wrap justify-center gap-3 mb-10\">\n <button onclick=\"showPage('register')\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg flex items-center gap-2\"><i data-lucide=\"user-plus\" style=\"width:16px;height:16px\"><\/i> Get Started<\/button> <button onclick=\"showPage('jobs')\" class=\"btn-secondary text-white text-sm px-6 py-2.5 rounded-lg flex items-center gap-2\"><i data-lucide=\"briefcase\" style=\"width:16px;height:16px\"><\/i> View Jobs<\/button>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-3 mb-8\">\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.1s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udda5\ufe0f\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Full-Stack Dev<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Web & Mobile<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.15s\">\n <div class=\"text-2xl mb-2\">\n \ud83c\udf10\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Web Dev<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Frontend & Backend<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.2s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udcf1\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">App Dev<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">iOS & Android<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.25s\">\n <div class=\"text-2xl mb-2\">\n \ud83e\udd16\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">AI Engineering<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">LLMs & Neural Nets<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.3s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udcca\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Data Science<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Analytics & BI<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.35s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udd12\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">IT Security<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Cyber Defense<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.4s\">\n <div class=\"text-2xl mb-2\">\n \u2601\ufe0f\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Cloud Infra<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Azure & AWS<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.45s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udcbc\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Software Arch<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">System Design<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.5s\">\n <div class=\"text-2xl mb-2\">\n \ud83c\udf93\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Tech Training<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Bootcamps & Courses<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.55s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udd10\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Cybersecurity<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Threat & Defense<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.6s\">\n <div class=\"text-2xl mb-2\">\n \ud83c\udfe5\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Medical IT<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Healthcare Tech<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.65s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udccb\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Project Mgmt<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Agile & Planning<\/p>\n <\/div>\n <\/div>\n <div class=\"card-surface rounded-xl p-5 text-left accent-glow fade-up\" style=\"animation-delay:.4s\">\n <h3 class=\"text-cyan-300 font-semibold text-sm mb-2 flex items-center gap-2\"><i data-lucide=\"landmark\" style=\"width:16px;height:16px\"><\/i> Company Payment Account<\/h3>\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs\">\n <div><span class=\"text-slate-500\">Account Name:<\/span><br><span class=\"text-white font-medium\" id=\"company-name-display\">Open House Fellowship Mission Foundation<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Account No.:<\/span><br><span class=\"text-white font-medium font-mono\">6610017853<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Bank:<\/span><br><span class=\"text-white font-medium\">Moniepoint MFB<\/span>\n <\/div>\n <\/div>\n <p class=\"text-slate-500 text-[10px] mt-3\">7% commission applies to all jobs. Work owners set their own charges.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-register\" class=\"page-section hidden w-full\">\n <div class=\"max-w-2xl mx-auto px-4 py-8\">\n <h2 class=\"text-white font-bold text-xl mb-1\" style=\"font-family:'Space Mono',monospace\">Registration<\/h2>\n <p class=\"text-slate-400 text-xs mb-5\">Register as a Work Owner or Client<\/p>\n <div class=\"flex gap-4 mb-6 border-b border-white\/10\">\n <button onclick=\"setRegTab('worker')\" id=\"reg-tab-worker\" class=\"tab-active text-sm font-semibold pb-2 px-1 transition\">Work Owner<\/button> <button onclick=\"setRegTab('client')\" id=\"reg-tab-client\" class=\"tab-inactive text-sm font-semibold pb-2 px-1 transition\">Client<\/button>\n <\/div>\n <form id=\"reg-form\" onsubmit=\"handleRegister(event)\" class=\"space-y-3\">\n <input type=\"hidden\" id=\"reg-role\" value=\"worker\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-name\">Full Name *<\/label><input id=\"reg-name\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"John Doe\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-email\">Email *<\/label><input id=\"reg-email\" type=\"email\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"john@email.com\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-phone\">Phone *<\/label><input id=\"reg-phone\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"+234...\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-address\">Address *<\/label><input id=\"reg-address\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"123 Main St, Lagos\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-pickup\">Company\/Consultant Location<\/label><input id=\"reg-pickup\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"Your office or consulting location\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-dropoff\">Job Delivery Method<\/label><input id=\"reg-dropoff\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"e.g. Online, In-person at [address], Remote\">\n <\/div>\n <\/div>\n <div id=\"worker-fields\" class=\"space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-specialty\">Specialty *<\/label> <select id=\"reg-specialty\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"Full-Stack Development\">Full-Stack Development<\/option> <option value=\"Web Development\">Web Development<\/option> <option value=\"App Development\">App Development<\/option> <option value=\"AI Engineering\">AI Engineering<\/option> <option value=\"Machine Learning\">Machine Learning<\/option> <option value=\"Data Science\">Data Science<\/option> <option value=\"IT Security\">IT Security<\/option> <option value=\"Cloud Infrastructure\">Cloud Infrastructure<\/option> <option value=\"Software Architecture\">Software Architecture<\/option> <option value=\"Tech Training\">Tech Training<\/option> <option value=\"Cybersecurity\">Cybersecurity<\/option> <option value=\"Medical IT\">Medical IT<\/option> <option value=\"General IT Support\">General IT Support<\/option> <option value=\"Project Management\">Project Management<\/option> <\/select>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-experience\">Years of Experience<\/label><input id=\"reg-experience\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"e.g. 5 years\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-bank\">Bank Name<\/label><input id=\"reg-bank\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"Your bank name\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-acct\">Account Number<\/label><input id=\"reg-acct\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"0123456789\">\n <\/div>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-pitch\">Your Pitch<\/label><textarea id=\"reg-pitch\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" rows=\"2\" placeholder=\"Tell clients why they should hire you...\"><\/textarea>\n <\/div>\n <\/div><button type=\"submit\" id=\"reg-submit\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg w-full flex items-center justify-center gap-2\"><i data-lucide=\"check-circle\" style=\"width:16px;height:16px\"><\/i> Register<\/button>\n <\/form>\n <\/div>\n <\/div>\n <div id=\"page-jobs\" class=\"page-section hidden w-full\">\n <div class=\"max-w-3xl mx-auto px-4 py-8\">\n <div class=\"flex items-center justify-between mb-5\">\n <div>\n <h2 class=\"text-white font-bold text-xl\" style=\"font-family:'Space Mono',monospace\">Job Board<\/h2>\n <p class=\"text-slate-400 text-xs\">Post and manage work assignments<\/p>\n <\/div><button onclick=\"toggleJobForm()\" class=\"btn-primary text-white text-xs px-4 py-2 rounded-lg flex items-center gap-1\"><i data-lucide=\"plus\" style=\"width:14px;height:14px\"><\/i> Post Job<\/button>\n <\/div>\n <div id=\"job-form-container\" class=\"hidden card-surface rounded-xl p-5 mb-5\">\n <h3 class=\"text-white font-semibold text-sm mb-3\">New Job Posting<\/h3>\n <form id=\"job-form\" onsubmit=\"handleJobPost(event)\" class=\"space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-type\">Work Type *<\/label> <select id=\"job-type\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"Full-Stack Development\">Full-Stack Development<\/option> <option value=\"Web Development\">Web Development<\/option> <option value=\"App Development\">App Development<\/option> <option value=\"AI Engineering\">AI Engineering<\/option> <option value=\"Machine Learning\">Machine Learning<\/option> <option value=\"Data Science\">Data Science<\/option> <option value=\"IT Security\">IT Security<\/option> <option value=\"Cloud Infrastructure\">Cloud Infrastructure<\/option> <option value=\"Software Architecture\">Software Architecture<\/option> <option value=\"Tech Training\">Tech Training<\/option> <option value=\"Cybersecurity\">Cybersecurity<\/option> <option value=\"Medical IT\">Medical IT<\/option> <option value=\"General IT Support\">General IT Support<\/option> <option value=\"Project Management\">Project Management<\/option> <\/select>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-duration\">Duration *<\/label> <select id=\"job-duration\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"30 minutes\">30 minutes<\/option> <option value=\"1 hour\">1 hour<\/option> <option value=\"2 hours\">2 hours<\/option> <option value=\"Half day\">Half day<\/option> <option value=\"1 day\">1 day<\/option> <option value=\"1 week\">1 week<\/option> <option value=\"2 weeks\">2 weeks<\/option> <option value=\"1 month\">1 month<\/option> <option value=\"2 months\">2 months<\/option> <option value=\"3 months\">3 months<\/option> <\/select>\n <\/div>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-desc\">Description *<\/label><textarea id=\"job-desc\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" rows=\"2\" required placeholder=\"Describe the work...\"><\/textarea>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-charge\">Your Charge (\u20a6) *<\/label><input id=\"job-charge\" type=\"number\" min=\"0\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"50000\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-contact\">Contact Address *<\/label><input id=\"job-contact\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"Work site address\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-exp\">Work Experience<\/label><input id=\"job-exp\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"e.g. 5 years in AI\">\n <\/div>\n <div class=\"flex items-center gap-2 mt-4\">\n <input type=\"checkbox\" id=\"job-cleaning\" class=\"w-4 h-4 rounded accent-cyan-500\"> <label for=\"job-cleaning\" class=\"text-slate-300 text-xs\">After-work cleaning included<\/label>\n <\/div>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-pitch\">Pitch<\/label><textarea id=\"job-pitch\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" rows=\"2\" placeholder=\"Why should clients choose you?\"><\/textarea>\n <\/div>\n <div class=\"card-surface rounded-lg p-3\">\n <p class=\"text-slate-400 text-[11px] mb-1\">Upload Work Image (displays as preview)<\/p><input type=\"file\" id=\"job-image\" accept=\"image\/*\" class=\"text-xs text-slate-400\">\n <div id=\"job-image-preview\" class=\"mt-2 hidden\"><img id=\"job-img-el\" class=\"rounded-lg max-h-32 object-cover\">\n <\/div>\n <\/div>\n <div class=\"text-right\">\n <span class=\"text-slate-500 text-[10px]\">7% commission (\u20a6<span id=\"commission-preview\">0<\/span>) applies. Total: \u20a6<span id=\"total-preview\">0<\/span><\/span>\n <\/div><button type=\"submit\" id=\"job-submit\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg w-full\">Post Job<\/button>\n <\/form>\n <\/div>\n <div id=\"job-list\" class=\"space-y-3\">\n <div class=\"text-center text-slate-500 text-sm py-10\">\n No jobs posted yet. Click “Post Job” to create one.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-payments\" class=\"page-section hidden w-full\">\n <div class=\"max-w-2xl mx-auto px-4 py-8\">\n <h2 class=\"text-white font-bold text-xl mb-1\" style=\"font-family:'Space Mono',monospace\">Payments<\/h2>\n <p class=\"text-slate-400 text-xs mb-5\">Direct debit & receipt verification<\/p>\n <div class=\"card-surface rounded-xl p-4 mb-5 accent-glow\">\n <h3 class=\"text-cyan-300 font-semibold text-xs mb-2\">Company Account (7% Commission)<\/h3>\n <div class=\"grid grid-cols-3 gap-2 text-[11px]\">\n <div><span class=\"text-slate-500\">Name:<\/span><br><span class=\"text-white\">Open House Fellowship Mission Foundation<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Acct:<\/span><br><span class=\"text-white font-mono\">6610017853<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Bank:<\/span><br><span class=\"text-white\">Moniepoint MFB<\/span>\n <\/div>\n <\/div>\n <\/div>\n <form id=\"payment-form\" onsubmit=\"handlePayment(event)\" class=\"space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-name\">Your Name *<\/label><input id=\"pay-name\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-method\">Payment Method *<\/label> <select id=\"pay-method\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"Direct Debit to Company\">Direct Debit to Company (6610017853)<\/option> <option value=\"Direct Debit to Worker\">Direct Debit to Worker Account<\/option> <\/select>\n <\/div>\n <\/div>\n <div id=\"worker-acct-section\" class=\"hidden grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-worker-bank\">Worker’s Bank<\/label><input id=\"pay-worker-bank\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"Bank name\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-worker-acct\">Worker’s Account No.<\/label><input id=\"pay-worker-acct\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"0123456789\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-amount\">Amount (\u20a6) *<\/label><input id=\"pay-amount\" type=\"number\" min=\"0\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-receipt\">Receipt No. *<\/label><input id=\"pay-receipt\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"TXN-12345\">\n <\/div>\n <\/div>\n <div class=\"card-surface rounded-lg p-3\">\n <p class=\"text-slate-400 text-[11px] mb-1\">Upload Receipt Image *<\/p><input type=\"file\" id=\"pay-receipt-file\" accept=\"image\/*\" class=\"text-xs text-slate-400\">\n <div id=\"receipt-preview\" class=\"mt-2 hidden\"><img id=\"receipt-img-el\" class=\"rounded-lg max-h-32 object-cover\">\n <\/div>\n <\/div><button type=\"submit\" id=\"pay-submit\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg w-full flex items-center justify-center gap-2\"><i data-lucide=\"credit-card\" style=\"width:16px;height:16px\"><\/i> Submit Payment<\/button>\n <\/form>\n <h3 class=\"text-white font-semibold text-sm mt-8 mb-3\">Payment History<\/h3>\n <div id=\"payment-list\" class=\"space-y-2\">\n <div class=\"text-center text-slate-500 text-sm py-6\">\n No payments recorded yet.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-storage\" class=\"page-section hidden w-full\">\n <div class=\"max-w-2xl mx-auto px-4 py-8\">\n <h2 class=\"text-white font-bold text-xl mb-1\" style=\"font-family:'Space Mono',monospace\">Storage Container<\/h2>\n <p class=\"text-slate-400 text-xs mb-5\">750 GB Cloud Storage with Smart Buckets<\/p>\n <div class=\"card-surface rounded-xl p-5 mb-5\">\n <div class=\"flex items-center justify-between mb-3\">\n <span class=\"text-white text-sm font-semibold\">Total: 750 GB<\/span> <span class=\"text-cyan-300 text-xs font-mono\" id=\"storage-used\">0 GB used<\/span>\n <\/div>\n <div class=\"storage-bar\">\n <div class=\"storage-fill\" id=\"storage-bar-fill\" style=\"width:0%\"><\/div>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\" id=\"bucket-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-data\" class=\"page-section hidden w-full\">\n <div class=\"max-w-4xl mx-auto px-4 py-8\">\n <div class=\"flex flex-wrap items-center justify-between gap-3 mb-5\">\n <div>\n <h2 class=\"text-white font-bold text-xl\" style=\"font-family:'Space Mono',monospace\">All Records<\/h2>\n <p class=\"text-slate-400 text-xs\">View, download, share & export<\/p>\n <\/div>\n <div class=\"flex gap-2 flex-wrap\">\n <button onclick=\"downloadPDF()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"download\" style=\"width:13px;height:13px\"><\/i> PDF<\/button> <button onclick=\"downloadCSV()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"file-text\" style=\"width:13px;height:13px\"><\/i> CSV<\/button> <button onclick=\"downloadZip()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"package\" style=\"width:13px;height:13px\"><\/i> ZIP<\/button> <button onclick=\"shareData()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"share\" style=\"width:13px;height:13px\"><\/i> Share<\/button>\n <\/div>\n <\/div>\n <div class=\"flex gap-2 mb-4 flex-wrap\">\n <button onclick=\"filterRecords('all')\" class=\"text-xs px-3 py-1 rounded-full bg-cyan-500\/20 text-cyan-300 border border-cyan-500\/30 filter-btn active\" data-filter=\"all\">All<\/button> <button onclick=\"filterRecords('registration')\" class=\"text-xs px-3 py-1 rounded-full bg-white\/5 text-slate-400 border border-white\/10 filter-btn\" data-filter=\"registration\">Registrations<\/button> <button onclick=\"filterRecords('job')\" class=\"text-xs px-3 py-1 rounded-full bg-white\/5 text-slate-400 border border-white\/10 filter-btn\" data-filter=\"job\">Jobs<\/button> <button onclick=\"filterRecords('payment')\" class=\"text-xs px-3 py-1 rounded-full bg-white\/5 text-slate-400 border border-white\/10 filter-btn\" data-filter=\"payment\">Payments<\/button>\n <\/div>\n <div id=\"records-table-wrap\" class=\"overflow-x-auto\">\n <table class=\"w-full text-xs text-left\">\n <thead>\n <tr class=\"border-b border-white\/10\">\n <th class=\"text-slate-400 font-medium py-2 px-2\">Type<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Name<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Details<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Amount<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Date<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"records-body\">\n <tr>\n <td colspan=\"6\" class=\"text-center text-slate-500 py-8\">No records yet.<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <footer class=\"w-full border-t border-white\/5 px-4 py-4 text-center\" style=\"background:rgba(10,22,40,0.8)\">\n <p class=\"text-slate-500 text-[11px]\" id=\"footer-text\">\u00a9 2024 NaijaShare Q-Fix IT Consulting. All rights reserved.<\/p>\n <\/footer>\n <\/div>\n <script>\n\/\/ ---- State ----\nlet allRecords = [];\nlet currentFilter = 'all';\nlet localImages = {};\n\nconst BUCKETS = [\n {name:'Registrations',icon:'users',section:'registration',color:'#3b82f6'},\n {name:'Job Postings',icon:'briefcase',section:'job',color:'#8b5cf6'},\n {name:'Payments',icon:'credit-card',section:'payment',color:'#10b981'},\n {name:'Work Images',icon:'image',section:'images',color:'#f59e0b'},\n {name:'Receipts',icon:'file-text',section:'receipts',color:'#ef4444'},\n {name:'Reports',icon:'bar-chart-2',section:'reports',color:'#06b6d4'},\n];\nconst TOTAL_STORAGE_GB = 750;\n\n\/\/ ---- Default Config ----\nconst defaultConfig = {\n site_title: 'NaijaShare Q-Fix',\n tagline: 'IT Consulting Professionals',\n company_name: 'Open House Fellowship Mission Foundation',\n footer_text: '\u00a9 2024 NaijaShare Q-Fix IT Consulting. All rights reserved.',\n background_color: '#0a1628',\n surface_color: '#1a2744',\n text_color: '#e2e8f0',\n primary_action_color: '#00d2ff',\n secondary_action_color: '#94a3b8',\n font_family: 'DM Sans',\n font_size: 14\n};\n\n\/\/ ---- Element SDK ----\nwindow.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n const c = key => config[key] || defaultConfig[key];\n document.getElementById('nav-title').textContent = c('site_title');\n document.getElementById('nav-tagline').textContent = c('tagline');\n document.getElementById('hero-title').textContent = c('site_title') + ' IT Consulting';\n document.getElementById('hero-tagline').textContent = c('tagline');\n document.getElementById('company-name-display').textContent = c('company_name');\n document.getElementById('footer-text').textContent = c('footer_text');\n document.body.style.fontFamily = `${c('font_family')}, DM Sans, sans-serif`;\n const baseSize = c('font_size');\n document.querySelectorAll('h2').forEach(el => el.style.fontSize = `${baseSize * 1.5}px`);\n document.querySelectorAll('p, span, td, th, label, button, input, select, textarea').forEach(el => {\n if(!el.closest('h1,h2,h3')) el.style.fontSize = `${baseSize}px`;\n });\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {get:()=>config.background_color||defaultConfig.background_color,set:v=>{config.background_color=v;window.elementSdk.setConfig({background_color:v})}},\n {get:()=>config.surface_color||defaultConfig.surface_color,set:v=>{config.surface_color=v;window.elementSdk.setConfig({surface_color:v})}},\n {get:()=>config.text_color||defaultConfig.text_color,set:v=>{config.text_color=v;window.elementSdk.setConfig({text_color:v})}},\n {get:()=>config.primary_action_color||defaultConfig.primary_action_color,set:v=>{config.primary_action_color=v;window.elementSdk.setConfig({primary_action_color:v})}},\n {get:()=>config.secondary_action_color||defaultConfig.secondary_action_color,set:v=>{config.secondary_action_color=v;window.elementSdk.setConfig({secondary_action_color:v})}},\n ],\n borderables: [],\n fontEditable: {get:()=>config.font_family||defaultConfig.font_family,set:v=>{config.font_family=v;window.elementSdk.setConfig({font_family:v})}},\n fontSizeable: {get:()=>config.font_size||defaultConfig.font_size,set:v=>{config.font_size=v;window.elementSdk.setConfig({font_size:v})}},\n }),\n mapToEditPanelValues: (config) => new Map([\n ['site_title', config.site_title || defaultConfig.site_title],\n ['tagline', config.tagline || defaultConfig.tagline],\n ['company_name', config.company_name || defaultConfig.company_name],\n ['footer_text', config.footer_text || defaultConfig.footer_text],\n ])\n});\n\n\/\/ ---- Data SDK ----\nconst dataHandler = {\n onDataChanged(data) {\n allRecords = data;\n renderRecords();\n renderJobList();\n renderPaymentList();\n renderStorage();\n }\n};\n\nlet sdkInitialized = false;\n(async()=>{\n if(window.dataSdk) {\n const r = await window.dataSdk.init(dataHandler);\n sdkInitialized = r.isOk;\n if(!sdkInitialized) console.error('Data SDK init failed');\n }\n})();\n\n\/\/ ---- Navigation ----\nfunction showPage(id) {\n document.querySelectorAll('.page-section').forEach(p => p.classList.add('hidden'));\n document.getElementById('page-' + id).classList.remove('hidden');\n window.scrollTo(0,0);\n}\nfunction toggleMobileMenu() {\n document.getElementById('mobile-menu').classList.toggle('hidden');\n}\n\n\/\/ ---- Toast ----\nfunction showToast(msg, type='success') {\n const t = document.createElement('div');\n t.className = `toast-msg toast-${type}`;\n t.textContent = msg;\n document.getElementById('toast-container').appendChild(t);\n setTimeout(() => t.remove(), 3000);\n}\n\n\/\/ ---- Registration ----\nfunction setRegTab(tab) {\n document.getElementById('reg-role').value = tab;\n document.getElementById('reg-tab-worker').className = tab==='worker' ? 'tab-active text-sm font-semibold pb-2 px-1 transition' : 'tab-inactive text-sm font-semibold pb-2 px-1 transition';\n document.getElementById('reg-tab-client').className = tab==='client' ? 'tab-active text-sm font-semibold pb-2 px-1 transition' : 'tab-inactive text-sm font-semibold pb-2 px-1 transition';\n document.getElementById('worker-fields').style.display = tab==='worker' ? 'block' : 'none';\n}\n\nasync function handleRegister(e) {\n e.preventDefault();\n if(!sdkInitialized) { showToast('Data storage not available. App running in local mode.','error'); return; }\n if(allRecords.length >= 999) { showToast('Record limit reached (999). Please delete some records.','error'); return; }\n const btn = document.getElementById('reg-submit');\n btn.disabled = true; btn.textContent = 'Registering...';\n const role = document.getElementById('reg-role').value;\n const rec = {\n record_type: 'registration',\n full_name: document.getElementById('reg-name').value,\n email: document.getElementById('reg-email').value,\n phone: document.getElementById('reg-phone').value,\n role: role,\n address: document.getElementById('reg-address').value,\n pickup_point: document.getElementById('reg-pickup').value,\n dropoff_point: document.getElementById('reg-dropoff').value,\n specialty: role==='worker' ? document.getElementById('reg-specialty').value : '',\n experience: role==='worker' ? document.getElementById('reg-experience').value : '',\n worker_bank: role==='worker' ? document.getElementById('reg-bank').value : '',\n worker_account: role==='worker' ? document.getElementById('reg-acct').value : '',\n pitch: role==='worker' ? document.getElementById('reg-pitch').value : '',\n bucket: 'registration',\n created_at: new Date().toISOString()\n };\n const result = await window.dataSdk.create(rec);\n btn.disabled = false; btn.innerHTML = '<i data-lucide=\"check-circle\" style=\"width:16px;height:16px\"><\/i> Register';\n lucide.createIcons();\n if(result.isOk) { showToast('Registration successful!'); document.getElementById('reg-form').reset(); setRegTab('worker'); }\n else showToast('Registration failed.','error');\n}\n\n\/\/ ---- Jobs ----\nfunction toggleJobForm() {\n document.getElementById('job-form-container').classList.toggle('hidden');\n}\n\ndocument.getElementById('job-charge').addEventListener('input', function() {\n const charge = parseFloat(this.value) || 0;\n const commission = Math.round(charge * 0.07);\n document.getElementById('commission-preview').textContent = commission.toLocaleString();\n document.getElementById('total-preview').textContent = (charge + commission).toLocaleString();\n});\n\ndocument.getElementById('job-image').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if(file) {\n const reader = new FileReader();\n reader.onload = ev => {\n document.getElementById('job-img-el').src = ev.target.result;\n document.getElementById('job-image-preview').classList.remove('hidden');\n };\n reader.readAsDataURL(file);\n }\n});\n\nasync function handleJobPost(e) {\n e.preventDefault();\n if(!sdkInitialized) { showToast('Data storage not available. App running in local mode.','error'); return; }\n if(allRecords.length >= 999) { showToast('Record limit reached.','error'); return; }\n const btn = document.getElementById('job-submit');\n btn.disabled = true; btn.textContent = 'Posting...';\n const charge = parseFloat(document.getElementById('job-charge').value) || 0;\n const commission = Math.round(charge * 0.07);\n const imgEl = document.getElementById('job-img-el');\n const jobId = 'job_' + Date.now();\n if(imgEl.src && imgEl.src.startsWith('data:')) localImages[jobId] = imgEl.src;\n const rec = {\n record_type: 'job',\n full_name: jobId,\n work_type: document.getElementById('job-type').value,\n duration: document.getElementById('job-duration').value,\n description: document.getElementById('job-desc').value,\n charge: charge,\n commission: commission,\n total: charge + commission,\n contact_address: document.getElementById('job-contact').value,\n experience: document.getElementById('job-exp').value,\n cleaning_included: document.getElementById('job-cleaning').checked,\n pitch: document.getElementById('job-pitch').value,\n bucket: 'job',\n created_at: new Date().toISOString()\n };\n const result = await window.dataSdk.create(rec);\n btn.disabled = false; btn.textContent = 'Post Job';\n if(result.isOk) { showToast('Job posted!'); document.getElementById('job-form').reset(); document.getElementById('job-image-preview').classList.add('hidden'); toggleJobForm(); }\n else showToast('Failed to post job.','error');\n}\n\nfunction renderJobList() {\n const jobs = allRecords.filter(r => r.record_type === 'job');\n const container = document.getElementById('job-list');\n if(!jobs.length) { container.innerHTML = '<div class=\"text-center text-slate-500 text-sm py-10\">No jobs posted yet.<\/div>'; return; }\n container.innerHTML = jobs.map(j => {\n const img = localImages[j.full_name];\n return `<div class=\"card-surface rounded-xl p-4\">\n <div class=\"flex items-start gap-3\">\n ${img ? `<img decoding=\"async\" src=\"${img}\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">` : `<div class=\"w-16 h-16 rounded-lg bg-gradient-to-br from-cyan-500\/20 to-blue-500\/20 flex items-center justify-center flex-shrink-0\"><span class=\"text-xl\">\ud83d\udcbc<\/span><\/div>`}\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 flex-wrap\">\n <span class=\"text-white font-semibold text-sm\">${j.work_type||''}<\/span>\n <span class=\"badge bg-cyan-500\/20 text-cyan-300\">${j.duration||''}<\/span>\n ${j.cleaning_included ? '<span class=\"badge bg-green-500\/20 text-green-300\">\ud83e\uddf9 Cleaning<\/span>' : ''}\n <\/div>\n <p class=\"text-slate-400 text-xs mt-1\">${j.description||''}<\/p>\n <div class=\"flex flex-wrap gap-3 mt-2 text-[11px] text-slate-500\">\n <span>\ud83d\udccd ${j.contact_address||''}<\/span>\n <span>\ud83d\udd27 ${j.experience||'N\/A'}<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 mt-2\">\n <span class=\"text-white font-bold text-sm\">\u20a6${(j.charge||0).toLocaleString()}<\/span>\n <span class=\"text-slate-500 text-[10px]\">+7% (\u20a6${(j.commission||0).toLocaleString()}) = \u20a6${(j.total||0).toLocaleString()}<\/span>\n <\/div>\n ${j.pitch ? `<p class=\"text-cyan-300\/60 text-[11px] mt-1 italic\">\"${j.pitch}\"<\/p>` : ''}\n <\/div>\n <\/div>\n <\/div>`;\n }).join('');\n}\n\n\/\/ ---- Payments ----\ndocument.getElementById('pay-method').addEventListener('change', function() {\n document.getElementById('worker-acct-section').classList.toggle('hidden', this.value !== 'Direct Debit to Worker');\n});\ndocument.getElementById('pay-receipt-file').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if(file) {\n const reader = new FileReader();\n reader.onload = ev => {\n document.getElementById('receipt-img-el').src = ev.target.result;\n document.getElementById('receipt-preview').classList.remove('hidden');\n };\n reader.readAsDataURL(file);\n }\n});\n\nasync function handlePayment(e) {\n e.preventDefault();\n if(!sdkInitialized) { showToast('Data storage not available. App running in local mode.','error'); return; }\n if(allRecords.length >= 999) { showToast('Record limit reached.','error'); return; }\n const btn = document.getElementById('pay-submit');\n btn.disabled = true; btn.textContent = 'Processing...';\n const method = document.getElementById('pay-method').value;\n const rec = {\n record_type: 'payment',\n full_name: document.getElementById('pay-name').value,\n payment_method: method,\n charge: parseFloat(document.getElementById('pay-amount').value) || 0,\n receipt_no: document.getElementById('pay-receipt').value,\n worker_bank: method === 'Direct Debit to Worker' ? document.getElementById('pay-worker-bank').value : 'Moniepoint MFB',\n worker_account: method === 'Direct Debit to Worker' ? document.getElementById('pay-worker-acct').value : '6610017853',\n payment_status: 'Pending Verification',\n bucket: 'payment',\n created_at: new Date().toISOString()\n };\n const receiptImg = document.getElementById('receipt-img-el');\n const payId = 'pay_' + Date.now();\n if(receiptImg.src && receiptImg.src.startsWith('data:')) localImages[payId] = receiptImg.src;\n rec.description = payId;\n const result = await window.dataSdk.create(rec);\n btn.disabled = false; btn.innerHTML = '<i data-lucide=\"credit-card\" style=\"width:16px;height:16px\"><\/i> Submit Payment';\n lucide.createIcons();\n if(result.isOk) { showToast('Payment submitted! Receipt under review.'); document.getElementById('payment-form').reset(); document.getElementById('receipt-preview').classList.add('hidden'); }\n else showToast('Payment submission failed.','error');\n}\n\nfunction renderPaymentList() {\n const pays = allRecords.filter(r => r.record_type === 'payment');\n const container = document.getElementById('payment-list');\n if(!pays.length) { container.innerHTML = '<div class=\"text-center text-slate-500 text-sm py-6\">No payments recorded yet.<\/div>'; return; }\n container.innerHTML = pays.map(p => {\n const receiptImg = localImages[p.description];\n return `<div class=\"card-surface rounded-lg p-3 flex items-center gap-3\">\n ${receiptImg ? `<img decoding=\"async\" src=\"${receiptImg}\" class=\"w-10 h-10 rounded object-cover flex-shrink-0\">` : `<div class=\"w-10 h-10 rounded bg-emerald-500\/20 flex items-center justify-center flex-shrink-0\"><span>\ud83e\uddfe<\/span><\/div>`}\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2\"><span class=\"text-white text-xs font-semibold\">${p.full_name||''}<\/span><span class=\"badge ${p.payment_status==='Verified'?'bg-green-500\/20 text-green-300':'bg-yellow-500\/20 text-yellow-300'}\">${p.payment_status||'Pending'}<\/span><\/div>\n <div class=\"text-slate-500 text-[10px]\">${p.payment_method||''} \u2022 Receipt: ${p.receipt_no||''} \u2022 ${p.worker_bank||''} ${p.worker_account||''}<\/div>\n <\/div>\n <span class=\"text-white font-bold text-sm\">\u20a6${(p.charge||0).toLocaleString()}<\/span>\n <button onclick=\"verifyPayment('${p.__backendId}')\" class=\"text-[10px] text-cyan-300 hover:text-cyan-200 px-2 py-1 rounded btn-secondary\">Verify<\/button>\n <\/div>`;\n }).join('');\n}\n\nasync function verifyPayment(id) {\n const rec = allRecords.find(r => r.__backendId === id);\n if(!rec) return;\n const updated = {...rec, payment_status: 'Verified'};\n const result = await window.dataSdk.update(updated);\n if(result.isOk) showToast('Payment verified!');\n else showToast('Verification failed.','error');\n}\n\n\/\/ ---- Storage ----\nfunction renderStorage() {\n const counts = {};\n BUCKETS.forEach(b => counts[b.section] = 0);\n allRecords.forEach(r => { if(counts[r.bucket] !== undefined) counts[r.bucket]++; });\n \/\/ Images\/receipts estimated from local storage\n counts.images = Object.keys(localImages).filter(k=>k.startsWith('job')).length;\n counts.receipts = Object.keys(localImages).filter(k=>k.startsWith('pay')).length;\n counts.reports = allRecords.length;\n const totalItems = Object.values(counts).reduce((a,b)=>a+b,0);\n const usedGB = Math.min((totalItems * 0.05).toFixed(2), TOTAL_STORAGE_GB);\n const pct = ((usedGB \/ TOTAL_STORAGE_GB) * 100).toFixed(1);\n document.getElementById('storage-used').textContent = `${usedGB} GB used`;\n document.getElementById('storage-bar-fill').style.width = pct + '%';\n const grid = document.getElementById('bucket-grid');\n grid.innerHTML = BUCKETS.map(b => `<div class=\"card-surface rounded-xl p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <div class=\"w-8 h-8 rounded-lg flex items-center justify-center\" style=\"background:${b.color}20\"><i data-lucide=\"${b.icon}\" style=\"width:16px;height:16px;color:${b.color}\"><\/i><\/div>\n <div><h4 class=\"text-white text-xs font-semibold\">${b.name}<\/h4><p class=\"text-slate-500 text-[10px]\">${counts[b.section]||0} items<\/p><\/div>\n <\/div>\n <div class=\"storage-bar\"><div class=\"storage-fill\" style=\"width:${Math.min(((counts[b.section]||0)\/20)*100,100)}%;background:${b.color}\"><\/div><\/div>\n <\/div>`).join('');\n lucide.createIcons();\n}\n\n\/\/ ---- Records & Export ----\nfunction filterRecords(type) {\n currentFilter = type;\n document.querySelectorAll('.filter-btn').forEach(btn => {\n const isActive = btn.dataset.filter === type;\n btn.className = `text-xs px-3 py-1 rounded-full border filter-btn ${isActive ? 'bg-cyan-500\/20 text-cyan-300 border-cyan-500\/30 active' : 'bg-white\/5 text-slate-400 border-white\/10'}`;\n });\n renderRecords();\n}\n\nfunction renderRecords() {\n const filtered = currentFilter === 'all' ? allRecords : allRecords.filter(r => r.record_type === currentFilter);\n const body = document.getElementById('records-body');\n if(!filtered.length) { body.innerHTML = '<tr><td colspan=\"6\" class=\"text-center text-slate-500 py-8\">No records found.<\/td><\/tr>'; return; }\n body.innerHTML = filtered.map(r => {\n const typeColors = {registration:'bg-blue-500\/20 text-blue-300',job:'bg-purple-500\/20 text-purple-300',payment:'bg-emerald-500\/20 text-emerald-300'};\n const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : '';\n let details = '';\n if(r.record_type==='registration') details = `${r.role||''} \u2022 ${r.specialty||r.email||''}`;\n else if(r.record_type==='job') details = `${r.work_type||''} \u2022 ${r.duration||''}`;\n else if(r.record_type==='payment') details = `${r.payment_method||''} \u2022 ${r.receipt_no||''}`;\n const deleteId = 'del_'+r.__backendId;\n return `<tr class=\"border-b border-white\/5 hover:bg-white\/[0.02]\">\n <td class=\"py-2 px-2\"><span class=\"badge ${typeColors[r.record_type]||'bg-white\/10 text-slate-300'}\">${r.record_type||''}<\/span><\/td>\n <td class=\"py-2 px-2 text-white\">${r.record_type==='job'? (r.work_type||'') : (r.full_name||'')}<\/td>\n <td class=\"py-2 px-2 text-slate-400\">${details}<\/td>\n <td class=\"py-2 px-2 text-white\">${r.charge ? '\u20a6'+r.charge.toLocaleString() : '-'}<\/td>\n <td class=\"py-2 px-2 text-slate-500\">${date}<\/td>\n <td class=\"py-2 px-2\">\n <span id=\"${deleteId}\"><button onclick=\"confirmDelete('${r.__backendId}')\" class=\"text-red-400 hover:text-red-300 text-[10px]\">Delete<\/button><\/span>\n <\/td>\n <\/tr>`;\n }).join('');\n}\n\nfunction confirmDelete(id) {\n const span = document.getElementById('del_'+id);\n span.innerHTML = `<span class=\"flex items-center gap-1\"><button onclick=\"doDelete('${id}')\" class=\"text-[10px] text-red-400 font-bold\">Confirm<\/button><button onclick=\"renderRecords()\" class=\"text-[10px] text-slate-500\">Cancel<\/button><\/span>`;\n}\n\nasync function doDelete(id) {\n const rec = allRecords.find(r => r.__backendId === id);\n if(!rec) return;\n const result = await window.dataSdk.delete(rec);\n if(result.isOk) showToast('Record deleted.');\n else showToast('Delete failed.','error');\n}\n\nfunction getExportData() {\n const filtered = currentFilter === 'all' ? allRecords : allRecords.filter(r => r.record_type === currentFilter);\n return filtered;\n}\n\nfunction downloadCSV() {\n const data = getExportData();\n if(!data.length) { showToast('No records to export.','error'); return; }\n const keys = ['record_type','full_name','email','phone','role','address','work_type','duration','description','charge','commission','total','payment_method','receipt_no','payment_status','created_at'];\n let csv = keys.join(',') + '\\n';\n data.forEach(r => {\n csv += keys.map(k => `\"${String(r[k]||'').replace(\/\"\/g,'\"\"')}\"`).join(',') + '\\n';\n });\n const blob = new Blob([csv], {type:'text\/csv'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = 'naijashare_qfix_records.csv';\n a.click();\n showToast('CSV downloaded!');\n}\n\nfunction downloadPDF() {\n const data = getExportData();\n if(!data.length) { showToast('No records to export.','error'); return; }\n let html = `<html><head><title>NaijaShare Q-Fix Records<\/title><style>body{font-family:Arial,sans-serif;padding:20px}h1{color:#0a1628;font-size:20px}table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px}th,td{border:1px solid #ddd;padding:6px;text-align:left}th{background:#0a1628;color:#fff}.footer{margin-top:20px;font-size:10px;color:#666}<\/style><\/head><body>`;\n html += `<h1>NaijaShare Q-Fix IT Consulting \u2014 Records Report<\/h1>`;\n html += `<p style=\"font-size:12px;color:#666\">Generated: ${new Date().toLocaleString()}<\/p>`;\n html += `<p style=\"font-size:11px\">Company Account: Open House Fellowship Mission Foundation | Acct: 6610017853 | Moniepoint MFB<\/p>`;\n html += `<table><tr><th>Type<\/th><th>Name<\/th><th>Details<\/th><th>Amount<\/th><th>Date<\/th><\/tr>`;\n data.forEach(r => {\n let details = '';\n if(r.record_type==='registration') details = `${r.role||''} - ${r.specialty||r.email||''}`;\n else if(r.record_type==='job') details = `${r.work_type||''} - ${r.duration||''}`;\n else if(r.record_type==='payment') details = `${r.payment_method||''} - Receipt: ${r.receipt_no||''}`;\n const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : '';\n html += `<tr><td>${r.record_type||''}<\/td><td>${r.record_type==='job'?(r.work_type||''):(r.full_name||'')}<\/td><td>${details}<\/td><td>${r.charge?'\u20a6'+r.charge.toLocaleString():'-'}<\/td><td>${date}<\/td><\/tr>`;\n });\n html += `<\/table><div class=\"footer\">\u00a9 NaijaShare Q-Fix IT Consulting. 7% commission on all jobs.<\/div><\/body><\/html>`;\n const w = window.open('', '_blank');\n if(w) { w.document.write(html); w.document.close(); w.print(); }\n showToast('PDF ready for print\/save!');\n}\n\nfunction shareData() {\n const data = getExportData();\n const text = `NaijaShare Q-Fix Records: ${data.length} records. Types: ${[...new Set(data.map(r=>r.record_type))].join(', ')}`;\n if(navigator.share) {\n navigator.share({title:'NaijaShare Q-Fix Records',text}).catch(()=>{});\n } else {\n navigator.clipboard.writeText(text).then(()=>showToast('Summary copied to clipboard!')).catch(()=>showToast('Share not available.','error'));\n }\n}\n\nasync function downloadZip() {\n const data = getExportData();\n if(!data.length) { showToast('No records to export.','error'); return; }\n \n showToast('Preparing ZIP file...');\n \n \/\/ Generate CSV\n const keys = ['record_type','full_name','email','phone','role','address','work_type','duration','description','charge','commission','total','payment_method','receipt_no','payment_status','created_at'];\n let csv = keys.join(',') + '\\n';\n data.forEach(r => {\n csv += keys.map(k => `\"${String(r[k]||'').replace(\/\"\/g,'\"\"')}\"`).join(',') + '\\n';\n });\n \n \/\/ Generate PDF HTML\n let pdfHtml = `<html><head><title>NaijaShare Q-Fix Records<\/title><style>body{font-family:Arial,sans-serif;padding:20px}h1{color:#0a1628;font-size:20px}table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px}th,td{border:1px solid #ddd;padding:6px;text-align:left}th{background:#0a1628;color:#fff}.footer{margin-top:20px;font-size:10px;color:#666}<\/style><\/head><body>`;\n pdfHtml += `<h1>NaijaShare Q-Fix IT Consulting \u2014 Records Report<\/h1>`;\n pdfHtml += `<p style=\"font-size:12px;color:#666\">Generated: ${new Date().toLocaleString()}<\/p>`;\n pdfHtml += `<p style=\"font-size:11px\">Company Account: Open House Fellowship Mission Foundation | Acct: 6610017853 | Moniepoint MFB<\/p>`;\n pdfHtml += `<table><tr><th>Type<\/th><th>Name<\/th><th>Details<\/th><th>Amount<\/th><th>Date<\/th><\/tr>`;\n data.forEach(r => {\n let details = '';\n if(r.record_type==='registration') details = `${r.role||''} - ${r.specialty||r.email||''}`;\n else if(r.record_type==='job') details = `${r.work_type||''} - ${r.duration||''}`;\n else if(r.record_type==='payment') details = `${r.payment_method||''} - Receipt: ${r.receipt_no||''}`;\n const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : '';\n html += `<tr><td>${r.record_type||''}<\/td><td>${r.record_type==='job'?(r.work_type||''):(r.full_name||'')}<\/td><td>${details}<\/td><td>${r.charge?'\u20a6'+r.charge.toLocaleString():'-'}<\/td><td>${date}<\/td><\/tr>`;\n });\n pdfHtml += `<\/table><div class=\"footer\">\u00a9 NaijaShare Q-Fix IT Consulting. 7% commission on all jobs.<\/div><\/body><\/html>`;\n \n \/\/ Generate JSON data file\n const jsonData = JSON.stringify(data, null, 2);\n \n \/\/ Create a simple text manifest\n const manifest = `NaijaShare Q-Fix Records Export\nGenerated: ${new Date().toLocaleString()}\nTotal Records: ${data.length}\nRecord Types: ${[...new Set(data.map(r=>r.record_type))].join(', ')}\n\nFiles included:\n- records.csv (spreadsheet format)\n- records.json (data format)\n- records.html (printable report)\n- README.txt (this file)\n\nCompany Account: Open House Fellowship Mission Foundation\nAccount No: 6610017853\nBank: Moniepoint MFB`;\n \n \/\/ Create ZIP file using simple base64 approach\n \/\/ Since we can't use external libraries, we'll create individual downloadable files\n \/\/ and guide the user to download them manually\n \n \/\/ For now, provide all three formats for individual download\n downloadCSV();\n setTimeout(() => {\n const jsonBlob = new Blob([jsonData], {type:'application\/json'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(jsonBlob);\n a.download = 'naijashare_qfix_records.json';\n a.click();\n showToast('JSON file downloaded!');\n }, 500);\n \n setTimeout(() => {\n const manifestBlob = new Blob([manifest], {type:'text\/plain'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(manifestBlob);\n a.download = 'README.txt';\n a.click();\n showToast('Complete! All files downloaded.');\n }, 1000);\n}\n\n\/\/ ---- Init ----\nlucide.createIcons();\nrenderStorage();\n<\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9f3ea6c4841f9a3e',t:'MTc3NzQ2OTMyMy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>NaijaShare Q-Fix IT Consulting NaijaShare Q-Fix IT Consulting Professionals Home Register Jobs Payments Storage Records \ud83c\udfe0 Home \ud83d\udccb Register \ud83d\udcbc Jobs \ud83d\udcb3 Payments \ud83d\udce6 Storage \ud83d\udcca Records Microsoft Certified Professionals NaijaShare Q-Fix IT Consulting Full-stack developers, Complete A.I. & Machine Learning, Data Science Bootcamp, and IT Security experts ready to solve your technology challenges. Get […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":2,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11,"date":"2026-04-29T14:08:52","date_gmt":"2026-04-29T14:08:52","guid":{"rendered":"https:\/\/naijashare.ng\/wp\/?page_id=11"},"modified":"2026-04-29T15:48:25","modified_gmt":"2026-04-29T15:48:25","slug":"itcounsultant","status":"publish","type":"page","link":"https:\/\/naijashare.ng\/wp\/itcounsultant\/","title":{"rendered":"IT Consultancy"},"content":{"rendered":"\n\n\n \n \n \n NaijaShare Q-Fix IT Consulting<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <script src=\"\/_sdk\/data_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n*{box-sizing:border-box;margin:0;padding:0}\nhtml,body{height:100%;font-family:'DM Sans',sans-serif}\n.app-shell{height:100%;width:100%;overflow-y:auto;overflow-x:hidden}\n.gradient-hero{background:linear-gradient(135deg,#0a1628 0%,#1a2744 40%,#0f3460 70%,#16213e 100%)}\n.card-surface{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(12px)}\n.accent-glow{box-shadow:0 0 30px rgba(0,210,255,0.15)}\n.btn-primary{background:linear-gradient(135deg,#00d2ff,#0083b0);transition:all .2s}\n.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,210,255,0.3)}\n.btn-secondary{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);transition:all .2s}\n.btn-secondary:hover{background:rgba(255,255,255,0.1)}\n.input-field{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#e2e8f0;transition:border-color .2s}\n.input-field:focus{outline:none;border-color:#00d2ff;box-shadow:0 0 0 2px rgba(0,210,255,0.15)}\n.input-field::placeholder{color:rgba(148,163,184,0.6)}\n.tab-active{border-bottom:2px solid #00d2ff;color:#00d2ff}\n.tab-inactive{border-bottom:2px solid transparent;color:#94a3b8}\n.tab-inactive:hover{color:#cbd5e1}\n.toast-msg{position:fixed;top:20px;right:20px;z-index:9999;padding:12px 20px;border-radius:10px;color:#fff;font-size:14px;animation:slideIn .3s ease}\n.toast-success{background:#059669}\n.toast-error{background:#dc2626}\n@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}\n@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n.fade-up{animation:fadeUp .5s ease forwards}\n.storage-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.1);overflow:hidden}\n.storage-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#00d2ff,#0083b0);transition:width .5s ease}\nselect.input-field{appearance:none;background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12z'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 12px center}\nselect.input-field option{background:#1a2744;color:#e2e8f0}\n.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:100;display:flex;align-items:center;justify-content:center}\n.badge{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600}\n.confirm-bar{background:rgba(220,38,38,0.15);border:1px solid rgba(220,38,38,0.3);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px}\n<\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <\/head>\n <body class=\"h-full\">\n <div class=\"app-shell gradient-hero\" id=\"app\">\n \n <div id=\"toast-container\"><\/div>\n <nav class=\"w-full px-4 py-3 flex items-center justify-between border-b border-white\/5\" style=\"background:rgba(10,22,40,0.9)\">\n <div class=\"flex items-center gap-2\">\n <div class=\"w-9 h-9 rounded-lg btn-primary flex items-center justify-center\">\n <i data-lucide=\"cpu\" style=\"width:18px;height:18px;color:#fff\"><\/i>\n <\/div>\n <div>\n <h1 class=\"text-white font-bold text-sm leading-tight\" id=\"nav-title\">NaijaShare Q-Fix<\/h1>\n <p class=\"text-[10px] text-cyan-300\/70\" id=\"nav-tagline\">IT Consulting Professionals<\/p>\n <\/div>\n <\/div>\n <div class=\"flex items-center gap-1\">\n <button onclick=\"showPage('home')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Home<\/button> <button onclick=\"showPage('register')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Register<\/button> <button onclick=\"showPage('jobs')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Jobs<\/button> <button onclick=\"showPage('payments')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Payments<\/button> <button onclick=\"showPage('storage')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Storage<\/button> <button onclick=\"showPage('data')\" class=\"text-xs text-slate-300 hover:text-white px-2 py-1 rounded transition hidden sm:block\">Records<\/button> <button onclick=\"toggleMobileMenu()\" class=\"sm:hidden text-white p-1\"><i data-lucide=\"menu\" style=\"width:20px;height:20px\"><\/i><\/button>\n <\/div>\n <\/nav>\n <div id=\"mobile-menu\" class=\"hidden w-full border-b border-white\/5 px-4 py-2 flex flex-col gap-1\" style=\"background:rgba(10,22,40,0.95)\">\n <button onclick=\"showPage('home');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83c\udfe0 Home<\/button> <button onclick=\"showPage('register');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udccb Register<\/button> <button onclick=\"showPage('jobs');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udcbc Jobs<\/button> <button onclick=\"showPage('payments');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udcb3 Payments<\/button> <button onclick=\"showPage('storage');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udce6 Storage<\/button> <button onclick=\"showPage('data');toggleMobileMenu()\" class=\"text-left text-sm text-slate-300 py-2 px-3 rounded hover:bg-white\/5\">\ud83d\udcca Records<\/button>\n <\/div>\n <div id=\"page-home\" class=\"page-section w-full\">\n <div class=\"max-w-4xl mx-auto px-4 py-10 text-center\">\n <div class=\"fade-up\">\n <div class=\"inline-block mb-4 px-3 py-1 rounded-full text-[11px] font-semibold text-cyan-300 border border-cyan-500\/30\" style=\"background:rgba(0,210,255,0.08)\">\n Microsoft Certified Professionals\n <\/div>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-3\" id=\"hero-title\" style=\"font-family:'Space Mono',monospace\">NaijaShare Q-Fix IT Consulting<\/h2>\n <p class=\"text-slate-400 text-sm sm:text-base max-w-2xl mx-auto mb-6\" id=\"hero-tagline\">Full-stack developers, Complete A.I. & Machine Learning, Data Science Bootcamp, and IT Security experts ready to solve your technology challenges.<\/p>\n <div class=\"flex flex-wrap justify-center gap-3 mb-10\">\n <button onclick=\"showPage('register')\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg flex items-center gap-2\"><i data-lucide=\"user-plus\" style=\"width:16px;height:16px\"><\/i> Get Started<\/button> <button onclick=\"showPage('jobs')\" class=\"btn-secondary text-white text-sm px-6 py-2.5 rounded-lg flex items-center gap-2\"><i data-lucide=\"briefcase\" style=\"width:16px;height:16px\"><\/i> View Jobs<\/button>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-3 mb-8\">\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.1s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udda5\ufe0f\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Full-Stack Dev<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Web & Mobile<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.15s\">\n <div class=\"text-2xl mb-2\">\n \ud83c\udf10\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Web Dev<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Frontend & Backend<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.2s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udcf1\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">App Dev<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">iOS & Android<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.25s\">\n <div class=\"text-2xl mb-2\">\n \ud83e\udd16\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">AI Engineering<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">LLMs & Neural Nets<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.3s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udcca\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Data Science<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Analytics & BI<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.35s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udd12\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">IT Security<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Cyber Defense<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.4s\">\n <div class=\"text-2xl mb-2\">\n \u2601\ufe0f\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Cloud Infra<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Azure & AWS<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.45s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udcbc\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Software Arch<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">System Design<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.5s\">\n <div class=\"text-2xl mb-2\">\n \ud83c\udf93\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Tech Training<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Bootcamps & Courses<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.55s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udd10\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Cybersecurity<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Threat & Defense<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.6s\">\n <div class=\"text-2xl mb-2\">\n \ud83c\udfe5\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Medical IT<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Healthcare Tech<\/p>\n <\/div>\n <div class=\"card-surface rounded-xl p-4 text-center fade-up\" style=\"animation-delay:.65s\">\n <div class=\"text-2xl mb-2\">\n \ud83d\udccb\n <\/div>\n <h3 class=\"text-white text-xs font-semibold\">Project Mgmt<\/h3>\n <p class=\"text-slate-500 text-[10px] mt-1\">Agile & Planning<\/p>\n <\/div>\n <\/div>\n <div class=\"card-surface rounded-xl p-5 text-left accent-glow fade-up\" style=\"animation-delay:.4s\">\n <h3 class=\"text-cyan-300 font-semibold text-sm mb-2 flex items-center gap-2\"><i data-lucide=\"landmark\" style=\"width:16px;height:16px\"><\/i> Company Payment Account<\/h3>\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs\">\n <div><span class=\"text-slate-500\">Account Name:<\/span><br><span class=\"text-white font-medium\" id=\"company-name-display\">Open House Fellowship Mission Foundation<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Account No.:<\/span><br><span class=\"text-white font-medium font-mono\">6610017853<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Bank:<\/span><br><span class=\"text-white font-medium\">Moniepoint MFB<\/span>\n <\/div>\n <\/div>\n <p class=\"text-slate-500 text-[10px] mt-3\">7% commission applies to all jobs. Work owners set their own charges.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-register\" class=\"page-section hidden w-full\">\n <div class=\"max-w-2xl mx-auto px-4 py-8\">\n <h2 class=\"text-white font-bold text-xl mb-1\" style=\"font-family:'Space Mono',monospace\">Registration<\/h2>\n <p class=\"text-slate-400 text-xs mb-5\">Register as a Work Owner or Client<\/p>\n <div class=\"flex gap-4 mb-6 border-b border-white\/10\">\n <button onclick=\"setRegTab('worker')\" id=\"reg-tab-worker\" class=\"tab-active text-sm font-semibold pb-2 px-1 transition\">Work Owner<\/button> <button onclick=\"setRegTab('client')\" id=\"reg-tab-client\" class=\"tab-inactive text-sm font-semibold pb-2 px-1 transition\">Client<\/button>\n <\/div>\n <form id=\"reg-form\" onsubmit=\"handleRegister(event)\" class=\"space-y-3\">\n <input type=\"hidden\" id=\"reg-role\" value=\"worker\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-name\">Full Name *<\/label><input id=\"reg-name\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"John Doe\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-email\">Email *<\/label><input id=\"reg-email\" type=\"email\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"john@email.com\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-phone\">Phone *<\/label><input id=\"reg-phone\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"+234...\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-address\">Address *<\/label><input id=\"reg-address\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"123 Main St, Lagos\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-pickup\">Company\/Consultant Location<\/label><input id=\"reg-pickup\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"Your office or consulting location\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-dropoff\">Job Delivery Method<\/label><input id=\"reg-dropoff\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"e.g. Online, In-person at [address], Remote\">\n <\/div>\n <\/div>\n <div id=\"worker-fields\" class=\"space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-specialty\">Specialty *<\/label> <select id=\"reg-specialty\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"Full-Stack Development\">Full-Stack Development<\/option> <option value=\"Web Development\">Web Development<\/option> <option value=\"App Development\">App Development<\/option> <option value=\"AI Engineering\">AI Engineering<\/option> <option value=\"Machine Learning\">Machine Learning<\/option> <option value=\"Data Science\">Data Science<\/option> <option value=\"IT Security\">IT Security<\/option> <option value=\"Cloud Infrastructure\">Cloud Infrastructure<\/option> <option value=\"Software Architecture\">Software Architecture<\/option> <option value=\"Tech Training\">Tech Training<\/option> <option value=\"Cybersecurity\">Cybersecurity<\/option> <option value=\"Medical IT\">Medical IT<\/option> <option value=\"General IT Support\">General IT Support<\/option> <option value=\"Project Management\">Project Management<\/option> <\/select>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-experience\">Years of Experience<\/label><input id=\"reg-experience\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"e.g. 5 years\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-bank\">Bank Name<\/label><input id=\"reg-bank\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"Your bank name\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-acct\">Account Number<\/label><input id=\"reg-acct\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"0123456789\">\n <\/div>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"reg-pitch\">Your Pitch<\/label><textarea id=\"reg-pitch\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" rows=\"2\" placeholder=\"Tell clients why they should hire you...\"><\/textarea>\n <\/div>\n <\/div><button type=\"submit\" id=\"reg-submit\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg w-full flex items-center justify-center gap-2\"><i data-lucide=\"check-circle\" style=\"width:16px;height:16px\"><\/i> Register<\/button>\n <\/form>\n <\/div>\n <\/div>\n <div id=\"page-jobs\" class=\"page-section hidden w-full\">\n <div class=\"max-w-3xl mx-auto px-4 py-8\">\n <div class=\"flex items-center justify-between mb-5\">\n <div>\n <h2 class=\"text-white font-bold text-xl\" style=\"font-family:'Space Mono',monospace\">Job Board<\/h2>\n <p class=\"text-slate-400 text-xs\">Post and manage work assignments<\/p>\n <\/div><button onclick=\"toggleJobForm()\" class=\"btn-primary text-white text-xs px-4 py-2 rounded-lg flex items-center gap-1\"><i data-lucide=\"plus\" style=\"width:14px;height:14px\"><\/i> Post Job<\/button>\n <\/div>\n <div id=\"job-form-container\" class=\"hidden card-surface rounded-xl p-5 mb-5\">\n <h3 class=\"text-white font-semibold text-sm mb-3\">New Job Posting<\/h3>\n <form id=\"job-form\" onsubmit=\"handleJobPost(event)\" class=\"space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-type\">Work Type *<\/label> <select id=\"job-type\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"Full-Stack Development\">Full-Stack Development<\/option> <option value=\"Web Development\">Web Development<\/option> <option value=\"App Development\">App Development<\/option> <option value=\"AI Engineering\">AI Engineering<\/option> <option value=\"Machine Learning\">Machine Learning<\/option> <option value=\"Data Science\">Data Science<\/option> <option value=\"IT Security\">IT Security<\/option> <option value=\"Cloud Infrastructure\">Cloud Infrastructure<\/option> <option value=\"Software Architecture\">Software Architecture<\/option> <option value=\"Tech Training\">Tech Training<\/option> <option value=\"Cybersecurity\">Cybersecurity<\/option> <option value=\"Medical IT\">Medical IT<\/option> <option value=\"General IT Support\">General IT Support<\/option> <option value=\"Project Management\">Project Management<\/option> <\/select>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-duration\">Duration *<\/label> <select id=\"job-duration\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"30 minutes\">30 minutes<\/option> <option value=\"1 hour\">1 hour<\/option> <option value=\"2 hours\">2 hours<\/option> <option value=\"Half day\">Half day<\/option> <option value=\"1 day\">1 day<\/option> <option value=\"1 week\">1 week<\/option> <option value=\"2 weeks\">2 weeks<\/option> <option value=\"1 month\">1 month<\/option> <option value=\"2 months\">2 months<\/option> <option value=\"3 months\">3 months<\/option> <\/select>\n <\/div>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-desc\">Description *<\/label><textarea id=\"job-desc\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" rows=\"2\" required placeholder=\"Describe the work...\"><\/textarea>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-charge\">Your Charge (\u20a6) *<\/label><input id=\"job-charge\" type=\"number\" min=\"0\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"50000\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-contact\">Contact Address *<\/label><input id=\"job-contact\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"Work site address\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-exp\">Work Experience<\/label><input id=\"job-exp\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"e.g. 5 years in AI\">\n <\/div>\n <div class=\"flex items-center gap-2 mt-4\">\n <input type=\"checkbox\" id=\"job-cleaning\" class=\"w-4 h-4 rounded accent-cyan-500\"> <label for=\"job-cleaning\" class=\"text-slate-300 text-xs\">After-work cleaning included<\/label>\n <\/div>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"job-pitch\">Pitch<\/label><textarea id=\"job-pitch\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" rows=\"2\" placeholder=\"Why should clients choose you?\"><\/textarea>\n <\/div>\n <div class=\"card-surface rounded-lg p-3\">\n <p class=\"text-slate-400 text-[11px] mb-1\">Upload Work Image (displays as preview)<\/p><input type=\"file\" id=\"job-image\" accept=\"image\/*\" class=\"text-xs text-slate-400\">\n <div id=\"job-image-preview\" class=\"mt-2 hidden\"><img id=\"job-img-el\" class=\"rounded-lg max-h-32 object-cover\">\n <\/div>\n <\/div>\n <div class=\"text-right\">\n <span class=\"text-slate-500 text-[10px]\">7% commission (\u20a6<span id=\"commission-preview\">0<\/span>) applies. Total: \u20a6<span id=\"total-preview\">0<\/span><\/span>\n <\/div><button type=\"submit\" id=\"job-submit\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg w-full\">Post Job<\/button>\n <\/form>\n <\/div>\n <div id=\"job-list\" class=\"space-y-3\">\n <div class=\"text-center text-slate-500 text-sm py-10\">\n No jobs posted yet. Click “Post Job” to create one.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-payments\" class=\"page-section hidden w-full\">\n <div class=\"max-w-2xl mx-auto px-4 py-8\">\n <h2 class=\"text-white font-bold text-xl mb-1\" style=\"font-family:'Space Mono',monospace\">Payments<\/h2>\n <p class=\"text-slate-400 text-xs mb-5\">Direct debit & receipt verification<\/p>\n <div class=\"card-surface rounded-xl p-4 mb-5 accent-glow\">\n <h3 class=\"text-cyan-300 font-semibold text-xs mb-2\">Company Account (7% Commission)<\/h3>\n <div class=\"grid grid-cols-3 gap-2 text-[11px]\">\n <div><span class=\"text-slate-500\">Name:<\/span><br><span class=\"text-white\">Open House Fellowship Mission Foundation<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Acct:<\/span><br><span class=\"text-white font-mono\">6610017853<\/span>\n <\/div>\n <div><span class=\"text-slate-500\">Bank:<\/span><br><span class=\"text-white\">Moniepoint MFB<\/span>\n <\/div>\n <\/div>\n <\/div>\n <form id=\"payment-form\" onsubmit=\"handlePayment(event)\" class=\"space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-name\">Your Name *<\/label><input id=\"pay-name\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-method\">Payment Method *<\/label> <select id=\"pay-method\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\"> <option value=\"Direct Debit to Company\">Direct Debit to Company (6610017853)<\/option> <option value=\"Direct Debit to Worker\">Direct Debit to Worker Account<\/option> <\/select>\n <\/div>\n <\/div>\n <div id=\"worker-acct-section\" class=\"hidden grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-worker-bank\">Worker’s Bank<\/label><input id=\"pay-worker-bank\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"Bank name\">\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-worker-acct\">Worker’s Account No.<\/label><input id=\"pay-worker-acct\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" placeholder=\"0123456789\">\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-amount\">Amount (\u20a6) *<\/label><input id=\"pay-amount\" type=\"number\" min=\"0\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required>\n <\/div>\n <div><label class=\"text-slate-400 text-[11px] mb-1 block\" for=\"pay-receipt\">Receipt No. *<\/label><input id=\"pay-receipt\" class=\"input-field w-full rounded-lg px-3 py-2 text-sm\" required placeholder=\"TXN-12345\">\n <\/div>\n <\/div>\n <div class=\"card-surface rounded-lg p-3\">\n <p class=\"text-slate-400 text-[11px] mb-1\">Upload Receipt Image *<\/p><input type=\"file\" id=\"pay-receipt-file\" accept=\"image\/*\" class=\"text-xs text-slate-400\">\n <div id=\"receipt-preview\" class=\"mt-2 hidden\"><img id=\"receipt-img-el\" class=\"rounded-lg max-h-32 object-cover\">\n <\/div>\n <\/div><button type=\"submit\" id=\"pay-submit\" class=\"btn-primary text-white font-semibold text-sm px-6 py-2.5 rounded-lg w-full flex items-center justify-center gap-2\"><i data-lucide=\"credit-card\" style=\"width:16px;height:16px\"><\/i> Submit Payment<\/button>\n <\/form>\n <h3 class=\"text-white font-semibold text-sm mt-8 mb-3\">Payment History<\/h3>\n <div id=\"payment-list\" class=\"space-y-2\">\n <div class=\"text-center text-slate-500 text-sm py-6\">\n No payments recorded yet.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-storage\" class=\"page-section hidden w-full\">\n <div class=\"max-w-2xl mx-auto px-4 py-8\">\n <h2 class=\"text-white font-bold text-xl mb-1\" style=\"font-family:'Space Mono',monospace\">Storage Container<\/h2>\n <p class=\"text-slate-400 text-xs mb-5\">750 GB Cloud Storage with Smart Buckets<\/p>\n <div class=\"card-surface rounded-xl p-5 mb-5\">\n <div class=\"flex items-center justify-between mb-3\">\n <span class=\"text-white text-sm font-semibold\">Total: 750 GB<\/span> <span class=\"text-cyan-300 text-xs font-mono\" id=\"storage-used\">0 GB used<\/span>\n <\/div>\n <div class=\"storage-bar\">\n <div class=\"storage-fill\" id=\"storage-bar-fill\" style=\"width:0%\"><\/div>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\" id=\"bucket-grid\">\n \n <\/div>\n <\/div>\n <\/div>\n <div id=\"page-data\" class=\"page-section hidden w-full\">\n <div class=\"max-w-4xl mx-auto px-4 py-8\">\n <div class=\"flex flex-wrap items-center justify-between gap-3 mb-5\">\n <div>\n <h2 class=\"text-white font-bold text-xl\" style=\"font-family:'Space Mono',monospace\">All Records<\/h2>\n <p class=\"text-slate-400 text-xs\">View, download, share & export<\/p>\n <\/div>\n <div class=\"flex gap-2 flex-wrap\">\n <button onclick=\"downloadPDF()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"download\" style=\"width:13px;height:13px\"><\/i> PDF<\/button> <button onclick=\"downloadCSV()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"file-text\" style=\"width:13px;height:13px\"><\/i> CSV<\/button> <button onclick=\"downloadZip()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"package\" style=\"width:13px;height:13px\"><\/i> ZIP<\/button> <button onclick=\"shareData()\" class=\"btn-secondary text-white text-xs px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"share\" style=\"width:13px;height:13px\"><\/i> Share<\/button>\n <\/div>\n <\/div>\n <div class=\"flex gap-2 mb-4 flex-wrap\">\n <button onclick=\"filterRecords('all')\" class=\"text-xs px-3 py-1 rounded-full bg-cyan-500\/20 text-cyan-300 border border-cyan-500\/30 filter-btn active\" data-filter=\"all\">All<\/button> <button onclick=\"filterRecords('registration')\" class=\"text-xs px-3 py-1 rounded-full bg-white\/5 text-slate-400 border border-white\/10 filter-btn\" data-filter=\"registration\">Registrations<\/button> <button onclick=\"filterRecords('job')\" class=\"text-xs px-3 py-1 rounded-full bg-white\/5 text-slate-400 border border-white\/10 filter-btn\" data-filter=\"job\">Jobs<\/button> <button onclick=\"filterRecords('payment')\" class=\"text-xs px-3 py-1 rounded-full bg-white\/5 text-slate-400 border border-white\/10 filter-btn\" data-filter=\"payment\">Payments<\/button>\n <\/div>\n <div id=\"records-table-wrap\" class=\"overflow-x-auto\">\n <table class=\"w-full text-xs text-left\">\n <thead>\n <tr class=\"border-b border-white\/10\">\n <th class=\"text-slate-400 font-medium py-2 px-2\">Type<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Name<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Details<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Amount<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Date<\/th>\n <th class=\"text-slate-400 font-medium py-2 px-2\">Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"records-body\">\n <tr>\n <td colspan=\"6\" class=\"text-center text-slate-500 py-8\">No records yet.<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <footer class=\"w-full border-t border-white\/5 px-4 py-4 text-center\" style=\"background:rgba(10,22,40,0.8)\">\n <p class=\"text-slate-500 text-[11px]\" id=\"footer-text\">\u00a9 2024 NaijaShare Q-Fix IT Consulting. All rights reserved.<\/p>\n <\/footer>\n <\/div>\n <script>\n\/\/ ---- State ----\nlet allRecords = [];\nlet currentFilter = 'all';\nlet localImages = {};\n\nconst BUCKETS = [\n {name:'Registrations',icon:'users',section:'registration',color:'#3b82f6'},\n {name:'Job Postings',icon:'briefcase',section:'job',color:'#8b5cf6'},\n {name:'Payments',icon:'credit-card',section:'payment',color:'#10b981'},\n {name:'Work Images',icon:'image',section:'images',color:'#f59e0b'},\n {name:'Receipts',icon:'file-text',section:'receipts',color:'#ef4444'},\n {name:'Reports',icon:'bar-chart-2',section:'reports',color:'#06b6d4'},\n];\nconst TOTAL_STORAGE_GB = 750;\n\n\/\/ ---- Default Config ----\nconst defaultConfig = {\n site_title: 'NaijaShare Q-Fix',\n tagline: 'IT Consulting Professionals',\n company_name: 'Open House Fellowship Mission Foundation',\n footer_text: '\u00a9 2024 NaijaShare Q-Fix IT Consulting. All rights reserved.',\n background_color: '#0a1628',\n surface_color: '#1a2744',\n text_color: '#e2e8f0',\n primary_action_color: '#00d2ff',\n secondary_action_color: '#94a3b8',\n font_family: 'DM Sans',\n font_size: 14\n};\n\n\/\/ ---- Element SDK ----\nwindow.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n const c = key => config[key] || defaultConfig[key];\n document.getElementById('nav-title').textContent = c('site_title');\n document.getElementById('nav-tagline').textContent = c('tagline');\n document.getElementById('hero-title').textContent = c('site_title') + ' IT Consulting';\n document.getElementById('hero-tagline').textContent = c('tagline');\n document.getElementById('company-name-display').textContent = c('company_name');\n document.getElementById('footer-text').textContent = c('footer_text');\n document.body.style.fontFamily = `${c('font_family')}, DM Sans, sans-serif`;\n const baseSize = c('font_size');\n document.querySelectorAll('h2').forEach(el => el.style.fontSize = `${baseSize * 1.5}px`);\n document.querySelectorAll('p, span, td, th, label, button, input, select, textarea').forEach(el => {\n if(!el.closest('h1,h2,h3')) el.style.fontSize = `${baseSize}px`;\n });\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {get:()=>config.background_color||defaultConfig.background_color,set:v=>{config.background_color=v;window.elementSdk.setConfig({background_color:v})}},\n {get:()=>config.surface_color||defaultConfig.surface_color,set:v=>{config.surface_color=v;window.elementSdk.setConfig({surface_color:v})}},\n {get:()=>config.text_color||defaultConfig.text_color,set:v=>{config.text_color=v;window.elementSdk.setConfig({text_color:v})}},\n {get:()=>config.primary_action_color||defaultConfig.primary_action_color,set:v=>{config.primary_action_color=v;window.elementSdk.setConfig({primary_action_color:v})}},\n {get:()=>config.secondary_action_color||defaultConfig.secondary_action_color,set:v=>{config.secondary_action_color=v;window.elementSdk.setConfig({secondary_action_color:v})}},\n ],\n borderables: [],\n fontEditable: {get:()=>config.font_family||defaultConfig.font_family,set:v=>{config.font_family=v;window.elementSdk.setConfig({font_family:v})}},\n fontSizeable: {get:()=>config.font_size||defaultConfig.font_size,set:v=>{config.font_size=v;window.elementSdk.setConfig({font_size:v})}},\n }),\n mapToEditPanelValues: (config) => new Map([\n ['site_title', config.site_title || defaultConfig.site_title],\n ['tagline', config.tagline || defaultConfig.tagline],\n ['company_name', config.company_name || defaultConfig.company_name],\n ['footer_text', config.footer_text || defaultConfig.footer_text],\n ])\n});\n\n\/\/ ---- Data SDK ----\nconst dataHandler = {\n onDataChanged(data) {\n allRecords = data;\n renderRecords();\n renderJobList();\n renderPaymentList();\n renderStorage();\n }\n};\n\nlet sdkInitialized = false;\n(async()=>{\n if(window.dataSdk) {\n const r = await window.dataSdk.init(dataHandler);\n sdkInitialized = r.isOk;\n if(!sdkInitialized) console.error('Data SDK init failed');\n }\n})();\n\n\/\/ ---- Navigation ----\nfunction showPage(id) {\n document.querySelectorAll('.page-section').forEach(p => p.classList.add('hidden'));\n document.getElementById('page-' + id).classList.remove('hidden');\n window.scrollTo(0,0);\n}\nfunction toggleMobileMenu() {\n document.getElementById('mobile-menu').classList.toggle('hidden');\n}\n\n\/\/ ---- Toast ----\nfunction showToast(msg, type='success') {\n const t = document.createElement('div');\n t.className = `toast-msg toast-${type}`;\n t.textContent = msg;\n document.getElementById('toast-container').appendChild(t);\n setTimeout(() => t.remove(), 3000);\n}\n\n\/\/ ---- Registration ----\nfunction setRegTab(tab) {\n document.getElementById('reg-role').value = tab;\n document.getElementById('reg-tab-worker').className = tab==='worker' ? 'tab-active text-sm font-semibold pb-2 px-1 transition' : 'tab-inactive text-sm font-semibold pb-2 px-1 transition';\n document.getElementById('reg-tab-client').className = tab==='client' ? 'tab-active text-sm font-semibold pb-2 px-1 transition' : 'tab-inactive text-sm font-semibold pb-2 px-1 transition';\n document.getElementById('worker-fields').style.display = tab==='worker' ? 'block' : 'none';\n}\n\nasync function handleRegister(e) {\n e.preventDefault();\n if(!sdkInitialized) { showToast('Data storage not available. App running in local mode.','error'); return; }\n if(allRecords.length >= 999) { showToast('Record limit reached (999). Please delete some records.','error'); return; }\n const btn = document.getElementById('reg-submit');\n btn.disabled = true; btn.textContent = 'Registering...';\n const role = document.getElementById('reg-role').value;\n const rec = {\n record_type: 'registration',\n full_name: document.getElementById('reg-name').value,\n email: document.getElementById('reg-email').value,\n phone: document.getElementById('reg-phone').value,\n role: role,\n address: document.getElementById('reg-address').value,\n pickup_point: document.getElementById('reg-pickup').value,\n dropoff_point: document.getElementById('reg-dropoff').value,\n specialty: role==='worker' ? document.getElementById('reg-specialty').value : '',\n experience: role==='worker' ? document.getElementById('reg-experience').value : '',\n worker_bank: role==='worker' ? document.getElementById('reg-bank').value : '',\n worker_account: role==='worker' ? document.getElementById('reg-acct').value : '',\n pitch: role==='worker' ? document.getElementById('reg-pitch').value : '',\n bucket: 'registration',\n created_at: new Date().toISOString()\n };\n const result = await window.dataSdk.create(rec);\n btn.disabled = false; btn.innerHTML = '<i data-lucide=\"check-circle\" style=\"width:16px;height:16px\"><\/i> Register';\n lucide.createIcons();\n if(result.isOk) { showToast('Registration successful!'); document.getElementById('reg-form').reset(); setRegTab('worker'); }\n else showToast('Registration failed.','error');\n}\n\n\/\/ ---- Jobs ----\nfunction toggleJobForm() {\n document.getElementById('job-form-container').classList.toggle('hidden');\n}\n\ndocument.getElementById('job-charge').addEventListener('input', function() {\n const charge = parseFloat(this.value) || 0;\n const commission = Math.round(charge * 0.07);\n document.getElementById('commission-preview').textContent = commission.toLocaleString();\n document.getElementById('total-preview').textContent = (charge + commission).toLocaleString();\n});\n\ndocument.getElementById('job-image').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if(file) {\n const reader = new FileReader();\n reader.onload = ev => {\n document.getElementById('job-img-el').src = ev.target.result;\n document.getElementById('job-image-preview').classList.remove('hidden');\n };\n reader.readAsDataURL(file);\n }\n});\n\nasync function handleJobPost(e) {\n e.preventDefault();\n if(!sdkInitialized) { showToast('Data storage not available. App running in local mode.','error'); return; }\n if(allRecords.length >= 999) { showToast('Record limit reached.','error'); return; }\n const btn = document.getElementById('job-submit');\n btn.disabled = true; btn.textContent = 'Posting...';\n const charge = parseFloat(document.getElementById('job-charge').value) || 0;\n const commission = Math.round(charge * 0.07);\n const imgEl = document.getElementById('job-img-el');\n const jobId = 'job_' + Date.now();\n if(imgEl.src && imgEl.src.startsWith('data:')) localImages[jobId] = imgEl.src;\n const rec = {\n record_type: 'job',\n full_name: jobId,\n work_type: document.getElementById('job-type').value,\n duration: document.getElementById('job-duration').value,\n description: document.getElementById('job-desc').value,\n charge: charge,\n commission: commission,\n total: charge + commission,\n contact_address: document.getElementById('job-contact').value,\n experience: document.getElementById('job-exp').value,\n cleaning_included: document.getElementById('job-cleaning').checked,\n pitch: document.getElementById('job-pitch').value,\n bucket: 'job',\n created_at: new Date().toISOString()\n };\n const result = await window.dataSdk.create(rec);\n btn.disabled = false; btn.textContent = 'Post Job';\n if(result.isOk) { showToast('Job posted!'); document.getElementById('job-form').reset(); document.getElementById('job-image-preview').classList.add('hidden'); toggleJobForm(); }\n else showToast('Failed to post job.','error');\n}\n\nfunction renderJobList() {\n const jobs = allRecords.filter(r => r.record_type === 'job');\n const container = document.getElementById('job-list');\n if(!jobs.length) { container.innerHTML = '<div class=\"text-center text-slate-500 text-sm py-10\">No jobs posted yet.<\/div>'; return; }\n container.innerHTML = jobs.map(j => {\n const img = localImages[j.full_name];\n return `<div class=\"card-surface rounded-xl p-4\">\n <div class=\"flex items-start gap-3\">\n ${img ? `<img decoding=\"async\" src=\"${img}\" class=\"w-16 h-16 rounded-lg object-cover flex-shrink-0\">` : `<div class=\"w-16 h-16 rounded-lg bg-gradient-to-br from-cyan-500\/20 to-blue-500\/20 flex items-center justify-center flex-shrink-0\"><span class=\"text-xl\">\ud83d\udcbc<\/span><\/div>`}\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 flex-wrap\">\n <span class=\"text-white font-semibold text-sm\">${j.work_type||''}<\/span>\n <span class=\"badge bg-cyan-500\/20 text-cyan-300\">${j.duration||''}<\/span>\n ${j.cleaning_included ? '<span class=\"badge bg-green-500\/20 text-green-300\">\ud83e\uddf9 Cleaning<\/span>' : ''}\n <\/div>\n <p class=\"text-slate-400 text-xs mt-1\">${j.description||''}<\/p>\n <div class=\"flex flex-wrap gap-3 mt-2 text-[11px] text-slate-500\">\n <span>\ud83d\udccd ${j.contact_address||''}<\/span>\n <span>\ud83d\udd27 ${j.experience||'N\/A'}<\/span>\n <\/div>\n <div class=\"flex items-center gap-3 mt-2\">\n <span class=\"text-white font-bold text-sm\">\u20a6${(j.charge||0).toLocaleString()}<\/span>\n <span class=\"text-slate-500 text-[10px]\">+7% (\u20a6${(j.commission||0).toLocaleString()}) = \u20a6${(j.total||0).toLocaleString()}<\/span>\n <\/div>\n ${j.pitch ? `<p class=\"text-cyan-300\/60 text-[11px] mt-1 italic\">\"${j.pitch}\"<\/p>` : ''}\n <\/div>\n <\/div>\n <\/div>`;\n }).join('');\n}\n\n\/\/ ---- Payments ----\ndocument.getElementById('pay-method').addEventListener('change', function() {\n document.getElementById('worker-acct-section').classList.toggle('hidden', this.value !== 'Direct Debit to Worker');\n});\ndocument.getElementById('pay-receipt-file').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if(file) {\n const reader = new FileReader();\n reader.onload = ev => {\n document.getElementById('receipt-img-el').src = ev.target.result;\n document.getElementById('receipt-preview').classList.remove('hidden');\n };\n reader.readAsDataURL(file);\n }\n});\n\nasync function handlePayment(e) {\n e.preventDefault();\n if(!sdkInitialized) { showToast('Data storage not available. App running in local mode.','error'); return; }\n if(allRecords.length >= 999) { showToast('Record limit reached.','error'); return; }\n const btn = document.getElementById('pay-submit');\n btn.disabled = true; btn.textContent = 'Processing...';\n const method = document.getElementById('pay-method').value;\n const rec = {\n record_type: 'payment',\n full_name: document.getElementById('pay-name').value,\n payment_method: method,\n charge: parseFloat(document.getElementById('pay-amount').value) || 0,\n receipt_no: document.getElementById('pay-receipt').value,\n worker_bank: method === 'Direct Debit to Worker' ? document.getElementById('pay-worker-bank').value : 'Moniepoint MFB',\n worker_account: method === 'Direct Debit to Worker' ? document.getElementById('pay-worker-acct').value : '6610017853',\n payment_status: 'Pending Verification',\n bucket: 'payment',\n created_at: new Date().toISOString()\n };\n const receiptImg = document.getElementById('receipt-img-el');\n const payId = 'pay_' + Date.now();\n if(receiptImg.src && receiptImg.src.startsWith('data:')) localImages[payId] = receiptImg.src;\n rec.description = payId;\n const result = await window.dataSdk.create(rec);\n btn.disabled = false; btn.innerHTML = '<i data-lucide=\"credit-card\" style=\"width:16px;height:16px\"><\/i> Submit Payment';\n lucide.createIcons();\n if(result.isOk) { showToast('Payment submitted! Receipt under review.'); document.getElementById('payment-form').reset(); document.getElementById('receipt-preview').classList.add('hidden'); }\n else showToast('Payment submission failed.','error');\n}\n\nfunction renderPaymentList() {\n const pays = allRecords.filter(r => r.record_type === 'payment');\n const container = document.getElementById('payment-list');\n if(!pays.length) { container.innerHTML = '<div class=\"text-center text-slate-500 text-sm py-6\">No payments recorded yet.<\/div>'; return; }\n container.innerHTML = pays.map(p => {\n const receiptImg = localImages[p.description];\n return `<div class=\"card-surface rounded-lg p-3 flex items-center gap-3\">\n ${receiptImg ? `<img decoding=\"async\" src=\"${receiptImg}\" class=\"w-10 h-10 rounded object-cover flex-shrink-0\">` : `<div class=\"w-10 h-10 rounded bg-emerald-500\/20 flex items-center justify-center flex-shrink-0\"><span>\ud83e\uddfe<\/span><\/div>`}\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2\"><span class=\"text-white text-xs font-semibold\">${p.full_name||''}<\/span><span class=\"badge ${p.payment_status==='Verified'?'bg-green-500\/20 text-green-300':'bg-yellow-500\/20 text-yellow-300'}\">${p.payment_status||'Pending'}<\/span><\/div>\n <div class=\"text-slate-500 text-[10px]\">${p.payment_method||''} \u2022 Receipt: ${p.receipt_no||''} \u2022 ${p.worker_bank||''} ${p.worker_account||''}<\/div>\n <\/div>\n <span class=\"text-white font-bold text-sm\">\u20a6${(p.charge||0).toLocaleString()}<\/span>\n <button onclick=\"verifyPayment('${p.__backendId}')\" class=\"text-[10px] text-cyan-300 hover:text-cyan-200 px-2 py-1 rounded btn-secondary\">Verify<\/button>\n <\/div>`;\n }).join('');\n}\n\nasync function verifyPayment(id) {\n const rec = allRecords.find(r => r.__backendId === id);\n if(!rec) return;\n const updated = {...rec, payment_status: 'Verified'};\n const result = await window.dataSdk.update(updated);\n if(result.isOk) showToast('Payment verified!');\n else showToast('Verification failed.','error');\n}\n\n\/\/ ---- Storage ----\nfunction renderStorage() {\n const counts = {};\n BUCKETS.forEach(b => counts[b.section] = 0);\n allRecords.forEach(r => { if(counts[r.bucket] !== undefined) counts[r.bucket]++; });\n \/\/ Images\/receipts estimated from local storage\n counts.images = Object.keys(localImages).filter(k=>k.startsWith('job')).length;\n counts.receipts = Object.keys(localImages).filter(k=>k.startsWith('pay')).length;\n counts.reports = allRecords.length;\n const totalItems = Object.values(counts).reduce((a,b)=>a+b,0);\n const usedGB = Math.min((totalItems * 0.05).toFixed(2), TOTAL_STORAGE_GB);\n const pct = ((usedGB \/ TOTAL_STORAGE_GB) * 100).toFixed(1);\n document.getElementById('storage-used').textContent = `${usedGB} GB used`;\n document.getElementById('storage-bar-fill').style.width = pct + '%';\n const grid = document.getElementById('bucket-grid');\n grid.innerHTML = BUCKETS.map(b => `<div class=\"card-surface rounded-xl p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <div class=\"w-8 h-8 rounded-lg flex items-center justify-center\" style=\"background:${b.color}20\"><i data-lucide=\"${b.icon}\" style=\"width:16px;height:16px;color:${b.color}\"><\/i><\/div>\n <div><h4 class=\"text-white text-xs font-semibold\">${b.name}<\/h4><p class=\"text-slate-500 text-[10px]\">${counts[b.section]||0} items<\/p><\/div>\n <\/div>\n <div class=\"storage-bar\"><div class=\"storage-fill\" style=\"width:${Math.min(((counts[b.section]||0)\/20)*100,100)}%;background:${b.color}\"><\/div><\/div>\n <\/div>`).join('');\n lucide.createIcons();\n}\n\n\/\/ ---- Records & Export ----\nfunction filterRecords(type) {\n currentFilter = type;\n document.querySelectorAll('.filter-btn').forEach(btn => {\n const isActive = btn.dataset.filter === type;\n btn.className = `text-xs px-3 py-1 rounded-full border filter-btn ${isActive ? 'bg-cyan-500\/20 text-cyan-300 border-cyan-500\/30 active' : 'bg-white\/5 text-slate-400 border-white\/10'}`;\n });\n renderRecords();\n}\n\nfunction renderRecords() {\n const filtered = currentFilter === 'all' ? allRecords : allRecords.filter(r => r.record_type === currentFilter);\n const body = document.getElementById('records-body');\n if(!filtered.length) { body.innerHTML = '<tr><td colspan=\"6\" class=\"text-center text-slate-500 py-8\">No records found.<\/td><\/tr>'; return; }\n body.innerHTML = filtered.map(r => {\n const typeColors = {registration:'bg-blue-500\/20 text-blue-300',job:'bg-purple-500\/20 text-purple-300',payment:'bg-emerald-500\/20 text-emerald-300'};\n const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : '';\n let details = '';\n if(r.record_type==='registration') details = `${r.role||''} \u2022 ${r.specialty||r.email||''}`;\n else if(r.record_type==='job') details = `${r.work_type||''} \u2022 ${r.duration||''}`;\n else if(r.record_type==='payment') details = `${r.payment_method||''} \u2022 ${r.receipt_no||''}`;\n const deleteId = 'del_'+r.__backendId;\n return `<tr class=\"border-b border-white\/5 hover:bg-white\/[0.02]\">\n <td class=\"py-2 px-2\"><span class=\"badge ${typeColors[r.record_type]||'bg-white\/10 text-slate-300'}\">${r.record_type||''}<\/span><\/td>\n <td class=\"py-2 px-2 text-white\">${r.record_type==='job'? (r.work_type||'') : (r.full_name||'')}<\/td>\n <td class=\"py-2 px-2 text-slate-400\">${details}<\/td>\n <td class=\"py-2 px-2 text-white\">${r.charge ? '\u20a6'+r.charge.toLocaleString() : '-'}<\/td>\n <td class=\"py-2 px-2 text-slate-500\">${date}<\/td>\n <td class=\"py-2 px-2\">\n <span id=\"${deleteId}\"><button onclick=\"confirmDelete('${r.__backendId}')\" class=\"text-red-400 hover:text-red-300 text-[10px]\">Delete<\/button><\/span>\n <\/td>\n <\/tr>`;\n }).join('');\n}\n\nfunction confirmDelete(id) {\n const span = document.getElementById('del_'+id);\n span.innerHTML = `<span class=\"flex items-center gap-1\"><button onclick=\"doDelete('${id}')\" class=\"text-[10px] text-red-400 font-bold\">Confirm<\/button><button onclick=\"renderRecords()\" class=\"text-[10px] text-slate-500\">Cancel<\/button><\/span>`;\n}\n\nasync function doDelete(id) {\n const rec = allRecords.find(r => r.__backendId === id);\n if(!rec) return;\n const result = await window.dataSdk.delete(rec);\n if(result.isOk) showToast('Record deleted.');\n else showToast('Delete failed.','error');\n}\n\nfunction getExportData() {\n const filtered = currentFilter === 'all' ? allRecords : allRecords.filter(r => r.record_type === currentFilter);\n return filtered;\n}\n\nfunction downloadCSV() {\n const data = getExportData();\n if(!data.length) { showToast('No records to export.','error'); return; }\n const keys = ['record_type','full_name','email','phone','role','address','work_type','duration','description','charge','commission','total','payment_method','receipt_no','payment_status','created_at'];\n let csv = keys.join(',') + '\\n';\n data.forEach(r => {\n csv += keys.map(k => `\"${String(r[k]||'').replace(\/\"\/g,'\"\"')}\"`).join(',') + '\\n';\n });\n const blob = new Blob([csv], {type:'text\/csv'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = 'naijashare_qfix_records.csv';\n a.click();\n showToast('CSV downloaded!');\n}\n\nfunction downloadPDF() {\n const data = getExportData();\n if(!data.length) { showToast('No records to export.','error'); return; }\n let html = `<html><head><title>NaijaShare Q-Fix Records<\/title><style>body{font-family:Arial,sans-serif;padding:20px}h1{color:#0a1628;font-size:20px}table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px}th,td{border:1px solid #ddd;padding:6px;text-align:left}th{background:#0a1628;color:#fff}.footer{margin-top:20px;font-size:10px;color:#666}<\/style><\/head><body>`;\n html += `<h1>NaijaShare Q-Fix IT Consulting \u2014 Records Report<\/h1>`;\n html += `<p style=\"font-size:12px;color:#666\">Generated: ${new Date().toLocaleString()}<\/p>`;\n html += `<p style=\"font-size:11px\">Company Account: Open House Fellowship Mission Foundation | Acct: 6610017853 | Moniepoint MFB<\/p>`;\n html += `<table><tr><th>Type<\/th><th>Name<\/th><th>Details<\/th><th>Amount<\/th><th>Date<\/th><\/tr>`;\n data.forEach(r => {\n let details = '';\n if(r.record_type==='registration') details = `${r.role||''} - ${r.specialty||r.email||''}`;\n else if(r.record_type==='job') details = `${r.work_type||''} - ${r.duration||''}`;\n else if(r.record_type==='payment') details = `${r.payment_method||''} - Receipt: ${r.receipt_no||''}`;\n const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : '';\n html += `<tr><td>${r.record_type||''}<\/td><td>${r.record_type==='job'?(r.work_type||''):(r.full_name||'')}<\/td><td>${details}<\/td><td>${r.charge?'\u20a6'+r.charge.toLocaleString():'-'}<\/td><td>${date}<\/td><\/tr>`;\n });\n html += `<\/table><div class=\"footer\">\u00a9 NaijaShare Q-Fix IT Consulting. 7% commission on all jobs.<\/div><\/body><\/html>`;\n const w = window.open('', '_blank');\n if(w) { w.document.write(html); w.document.close(); w.print(); }\n showToast('PDF ready for print\/save!');\n}\n\nfunction shareData() {\n const data = getExportData();\n const text = `NaijaShare Q-Fix Records: ${data.length} records. Types: ${[...new Set(data.map(r=>r.record_type))].join(', ')}`;\n if(navigator.share) {\n navigator.share({title:'NaijaShare Q-Fix Records',text}).catch(()=>{});\n } else {\n navigator.clipboard.writeText(text).then(()=>showToast('Summary copied to clipboard!')).catch(()=>showToast('Share not available.','error'));\n }\n}\n\nasync function downloadZip() {\n const data = getExportData();\n if(!data.length) { showToast('No records to export.','error'); return; }\n \n showToast('Preparing ZIP file...');\n \n \/\/ Generate CSV\n const keys = ['record_type','full_name','email','phone','role','address','work_type','duration','description','charge','commission','total','payment_method','receipt_no','payment_status','created_at'];\n let csv = keys.join(',') + '\\n';\n data.forEach(r => {\n csv += keys.map(k => `\"${String(r[k]||'').replace(\/\"\/g,'\"\"')}\"`).join(',') + '\\n';\n });\n \n \/\/ Generate PDF HTML\n let pdfHtml = `<html><head><title>NaijaShare Q-Fix Records<\/title><style>body{font-family:Arial,sans-serif;padding:20px}h1{color:#0a1628;font-size:20px}table{width:100%;border-collapse:collapse;font-size:11px;margin-top:16px}th,td{border:1px solid #ddd;padding:6px;text-align:left}th{background:#0a1628;color:#fff}.footer{margin-top:20px;font-size:10px;color:#666}<\/style><\/head><body>`;\n pdfHtml += `<h1>NaijaShare Q-Fix IT Consulting \u2014 Records Report<\/h1>`;\n pdfHtml += `<p style=\"font-size:12px;color:#666\">Generated: ${new Date().toLocaleString()}<\/p>`;\n pdfHtml += `<p style=\"font-size:11px\">Company Account: Open House Fellowship Mission Foundation | Acct: 6610017853 | Moniepoint MFB<\/p>`;\n pdfHtml += `<table><tr><th>Type<\/th><th>Name<\/th><th>Details<\/th><th>Amount<\/th><th>Date<\/th><\/tr>`;\n data.forEach(r => {\n let details = '';\n if(r.record_type==='registration') details = `${r.role||''} - ${r.specialty||r.email||''}`;\n else if(r.record_type==='job') details = `${r.work_type||''} - ${r.duration||''}`;\n else if(r.record_type==='payment') details = `${r.payment_method||''} - Receipt: ${r.receipt_no||''}`;\n const date = r.created_at ? new Date(r.created_at).toLocaleDateString() : '';\n html += `<tr><td>${r.record_type||''}<\/td><td>${r.record_type==='job'?(r.work_type||''):(r.full_name||'')}<\/td><td>${details}<\/td><td>${r.charge?'\u20a6'+r.charge.toLocaleString():'-'}<\/td><td>${date}<\/td><\/tr>`;\n });\n pdfHtml += `<\/table><div class=\"footer\">\u00a9 NaijaShare Q-Fix IT Consulting. 7% commission on all jobs.<\/div><\/body><\/html>`;\n \n \/\/ Generate JSON data file\n const jsonData = JSON.stringify(data, null, 2);\n \n \/\/ Create a simple text manifest\n const manifest = `NaijaShare Q-Fix Records Export\nGenerated: ${new Date().toLocaleString()}\nTotal Records: ${data.length}\nRecord Types: ${[...new Set(data.map(r=>r.record_type))].join(', ')}\n\nFiles included:\n- records.csv (spreadsheet format)\n- records.json (data format)\n- records.html (printable report)\n- README.txt (this file)\n\nCompany Account: Open House Fellowship Mission Foundation\nAccount No: 6610017853\nBank: Moniepoint MFB`;\n \n \/\/ Create ZIP file using simple base64 approach\n \/\/ Since we can't use external libraries, we'll create individual downloadable files\n \/\/ and guide the user to download them manually\n \n \/\/ For now, provide all three formats for individual download\n downloadCSV();\n setTimeout(() => {\n const jsonBlob = new Blob([jsonData], {type:'application\/json'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(jsonBlob);\n a.download = 'naijashare_qfix_records.json';\n a.click();\n showToast('JSON file downloaded!');\n }, 500);\n \n setTimeout(() => {\n const manifestBlob = new Blob([manifest], {type:'text\/plain'});\n const a = document.createElement('a');\n a.href = URL.createObjectURL(manifestBlob);\n a.download = 'README.txt';\n a.click();\n showToast('Complete! All files downloaded.');\n }, 1000);\n}\n\n\/\/ ---- Init ----\nlucide.createIcons();\nrenderStorage();\n<\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9f3ea6c4841f9a3e',t:'MTc3NzQ2OTMyMy4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>NaijaShare Q-Fix IT Consulting NaijaShare Q-Fix IT Consulting Professionals Home Register Jobs Payments Storage Records \ud83c\udfe0 Home \ud83d\udccb Register \ud83d\udcbc Jobs \ud83d\udcb3 Payments \ud83d\udce6 Storage \ud83d\udcca Records Microsoft Certified Professionals NaijaShare Q-Fix IT Consulting Full-stack developers, Complete A.I. & Machine Learning, Data Science Bootcamp, and IT Security experts ready to solve your technology challenges. Get […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":2,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/naijashare.ng\/wp\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}