{"id":810,"date":"2026-07-31T17:50:37","date_gmt":"2026-07-31T17:50:37","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=810"},"modified":"2026-07-31T17:50:37","modified_gmt":"2026-07-31T17:50:37","slug":"attendance-management","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/attendance-management\/","title":{"rendered":"Attendance Management"},"content":{"rendered":"\n<div id=\"wp-ams-root\">\n    <style>\n        #wp-ams-root { all: initial; font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; color: #0f172a; background: #f8fafc; box-sizing: border-box; display: block; width: 100%; padding: 16px; }\n        #wp-ams-root *, #wp-ams-root *::before, #wp-ams-root *::after { box-sizing: border-box; }\n        #wp-ams-root .ams-container { max-width: 1500px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; overflow: hidden; }\n        #wp-ams-root .ams-header { background: #ffffff; padding: 20px 24px; border-bottom: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px; }\n        @media(min-width: 768px) { #wp-ams-root .ams-header { flex-direction: row; justify-content: space-between; align-items: center; } }\n        #wp-ams-root .ams-logo h1 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0; }\n        #wp-ams-root .ams-logo p { font-size: 13px; color: #64748b; margin: 4px 0 0; }\n        #wp-ams-root .ams-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }\n        #wp-ams-root .ams-tab-btn { background: #f1f5f9; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #475569; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: 0.2s; }\n        #wp-ams-root .ams-tab-btn:hover { background: #e2e8f0; color: #0f172a; }\n        #wp-ams-root .ams-tab-btn.active { background: #2563eb; color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,0.2); }\n        #wp-ams-root .ams-body { padding: 24px; background: #f8fafc; min-height: 600px; }\n        #wp-ams-root .ams-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; margin-bottom: 24px; }\n        @media(min-width: 640px) { #wp-ams-root .ams-grid { grid-template-columns: repeat(2, 1fr); } }\n        @media(min-width: 1024px) { #wp-ams-root .ams-grid { grid-template-columns: repeat(4, 1fr); } }\n        #wp-ams-root .ams-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.01); display: flex; flex-direction: column; justify-content: space-between; }\n        #wp-ams-root .ams-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; }\n        #wp-ams-root .ams-card-val { font-size: 26px; font-weight: 800; color: #0f172a; margin: 10px 0 4px; }\n        #wp-ams-root .ams-card-desc { font-size: 12px; color: #94a3b8; }\n        #wp-ams-root .ams-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.01); }\n        #wp-ams-root .ams-panel-head { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }\n        #wp-ams-root .ams-toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }\n        #wp-ams-root .ams-input, #wp-ams-root .ams-select { padding: 9px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; outline: none; background: #fff; color: #0f172a; }\n        #wp-ams-root .ams-input:focus, #wp-ams-root .ams-select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }\n        #wp-ams-root .ams-btn { background: #2563eb; color: #fff; border: none; padding: 9px 16px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: 0.2s; }\n        #wp-ams-root .ams-btn:hover { background: #1d4ed8; }\n        #wp-ams-root .ams-btn-secondary { background: #e2e8f0; color: #1e293b; }\n        #wp-ams-root .ams-btn-secondary:hover { background: #cbd5e1; }\n        #wp-ams-root .ams-btn-danger { background: #dc2626; color: #fff; }\n        #wp-ams-root .ams-btn-danger:hover { background: #b91c1c; }\n        #wp-ams-root .ams-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; max-height: 500px; }\n        #wp-ams-root .ams-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; white-space: nowrap; }\n        #wp-ams-root .ams-table th { background: #f1f5f9; color: #334155; font-weight: 600; padding: 12px 14px; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #cbd5e1; cursor: pointer; }\n        #wp-ams-root .ams-table td { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; color: #334155; }\n        #wp-ams-root .ams-table tbody tr:hover { background: #f8fafc; }\n        #wp-ams-root .ams-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }\n        #wp-ams-root .ams-badge.green { background: #dcfce7; color: #166534; }\n        #wp-ams-root .ams-badge.blue { background: #dbeafe; color: #1e40af; }\n        #wp-ams-root .ams-badge.orange { background: #ffedd5; color: #9a3412; }\n        #wp-ams-root .ams-badge.red { background: #fee2e2; color: #991b1b; }\n        #wp-ams-root .ams-badge.critical { background: #7f1d1d; color: #fee2e2; }\n        #wp-ams-root .ams-form-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; }\n        @media(min-width: 768px) { #wp-ams-root .ams-form-grid { grid-template-columns: repeat(2, 1fr); } }\n        @media(min-width: 1024px) { #wp-ams-root .ams-form-grid { grid-template-columns: repeat(3, 1fr); } }\n        #wp-ams-root .ams-form-grp { display: flex; flex-direction: column; gap: 6px; }\n        #wp-ams-root .ams-form-grp label { font-size: 12px; font-weight: 600; color: #475569; }\n        #wp-ams-root .ams-chart-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; }\n        #wp-ams-toast { position: fixed; bottom: 20px; right: 20px; background: #0f172a; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 99999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }\n        #wp-ams-toast.show { opacity: 1; }\n        #wp-ams-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center; }\n        #wp-ams-modal-box { background: #fff; padding: 28px; border-radius: 14px; width: 90%; max-width: 650px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); max-height: 90vh; overflow-y: auto; }\n        @media print {\n            body { background: #fff !important; color: #000 !important; }\n            #wp-ams-root { padding: 0 !important; width: 100% !important; background: #fff !important; }\n            #wp-ams-root .ams-header, #wp-ams-root .ams-toolbar, #wp-ams-root .ams-nav, #wp-ams-root button, #wp-ams-root input, #wp-ams-root select, #wp-ams-root .ams-btn { display: none !important; }\n            #wp-ams-root .ams-panel { border: none !important; box-shadow: none !important; padding: 0 !important; }\n            .print-header { display: block !important; text-align: center; margin-bottom: 20px; }\n        }\n        .print-header { display: none; }\n    <\/style>\n\n    <div id=\"wp-ams-toast\">Saved successfully<\/div>\n\n    <div class=\"ams-container\">\n        <header class=\"ams-header\">\n            <div class=\"ams-logo\">\n                <h1>AcademiaPulse Pro<\/h1>\n                <p>Complete College &#038; Professor Attendance Management Ecosystem<\/p>\n            <\/div>\n            <nav class=\"ams-nav\" id=\"amsNav\">\n                <button class=\"ams-tab-btn active\" data-target=\"dashboard\">Dashboard<\/button>\n                <button class=\"ams-tab-btn\" data-target=\"students\">Students<\/button>\n                <button class=\"ams-tab-btn\" data-target=\"register\">Daily Register<\/button>\n                <button class=\"ams-tab-btn\" data-target=\"analytics\">Analytics<\/button>\n                <button class=\"ams-tab-btn\" data-target=\"reports\">Reports &#038; Print<\/button>\n                <button class=\"ams-tab-btn\" data-target=\"settings\">Backup &#038; Tools<\/button>\n            <\/nav>\n        <\/header>\n\n        <main class=\"ams-body\">\n            <!-- DASHBOARD VIEW -->\n            <section id=\"view-dashboard\" class=\"ams-sec\">\n                <div class=\"ams-grid\" id=\"amsDashCards\"><\/div>\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px;\">\n                    <div class=\"ams-chart-box\">\n                        <h4 style=\"margin:0 0 12px 0; font-size:14px; color:#334155;\">Attendance Status Benchmark<\/h4>\n                        <canvas id=\"dashPie\" width=\"300\" height=\"200\"><\/canvas>\n                    <\/div>\n                    <div class=\"ams-chart-box\">\n                        <h4 style=\"margin:0 0 12px 0; font-size:14px; color:#334155;\">Department Performance Comparison<\/h4>\n                        <canvas id=\"dashBar\" width=\"380\" height=\"200\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- STUDENTS DIRECTORY -->\n            <section id=\"view-students\" class=\"ams-sec\" style=\"display:none;\">\n                <div class=\"ams-panel\">\n                    <div class=\"ams-panel-head\">\n                        <span>Student Directory &#038; Live Predictor<\/span>\n                        <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\n                            <button class=\"ams-btn\" id=\"btnOpenModal\">+ Add Student<\/button>\n                            <button class=\"ams-btn ams-btn-secondary\" id=\"btnExportJSON\">Export JSON<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"ams-toolbar\">\n                        <input type=\"text\" id=\"searchInput\" class=\"ams-input\" placeholder=\"Search roll, name, department, status...\" style=\"flex:1; min-width: 220px;\">\n                        <select id=\"filterSelect\" class=\"ams-select\">\n                            <option value=\"all\">All Status Levels<\/option>\n                            <option value=\"critical\">Critical Warning (&lt;50%)<\/option>\n                            <option value=\"below75\">At Risk (&lt;75%)<\/option>\n                            <option value=\"above90\">Excellent (&gt;90%)<\/option>\n                        <\/select>\n                        <select id=\"sortSelect\" class=\"ams-select\">\n                            <option value=\"rollAsc\">Sort by Roll<\/option>\n                            <option value=\"nameAsc\">Sort by Name<\/option>\n                            <option value=\"attDesc\">Highest Attendance<\/option>\n                            <option value=\"attAsc\">Lowest Attendance<\/option>\n                        <\/select>\n                    <\/div>\n                    <div style=\"display: flex; gap: 10px; margin-bottom: 12px; align-items: center; flex-wrap: wrap;\">\n                        <span style=\"font-size: 12px; font-weight: 700; color: #64748b;\">Bulk Actions:<\/span>\n                        <button class=\"ams-btn ams-btn-secondary\" id=\"bulkPresent\">Mark Present (+1)<\/button>\n                        <button class=\"ams-btn ams-btn-secondary\" id=\"bulkAbsent\">Mark Absent (+1)<\/button>\n                        <button class=\"ams-btn ams-btn-danger\" id=\"bulkDelete\">Delete Selected<\/button>\n                    <\/div>\n                    <div class=\"ams-table-wrap\">\n                        <table class=\"ams-table\" id=\"studentTable\">\n                            <thead>\n                                <tr>\n                                    <th><input type=\"checkbox\" id=\"selectAll\"><\/th>\n                                    <th>Roll Number<\/th>\n                                    <th>Student Name<\/th>\n                                    <th>Department<\/th>\n                                    <th>Semester<\/th>\n                                    <th>Total<\/th>\n                                    <th>Present<\/th>\n                                    <th>Absent<\/th>\n                                    <th>Attendance %<\/th>\n                                    <th>Status Warning<\/th>\n                                    <th>Predicted % (+10 Classes)<\/th>\n                                    <th>Notes<\/th>\n                                    <th>Actions<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody id=\"studentTableBody\"><\/tbody>\n                        <\/table>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- DAILY REGISTER -->\n            <section id=\"view-register\" class=\"ams-sec\" style=\"display:none;\">\n                <div class=\"ams-panel\">\n                    <div class=\"ams-panel-head\">\n                        <span>Daily Attendance Register &#038; Matrix (July 2026)<\/span>\n                        <select id=\"registerMonth\" class=\"ams-select\">\n                            <option value=\"July\">July 2026<\/option>\n                            <option value=\"June\">June 2026<\/option>\n                        <\/select>\n                    <\/div>\n                    <p style=\"font-size: 13px; color: #64748b; margin-bottom: 16px;\">Click or log daily attendance statuses (P: Present, A: Absent, L: Leave, M: Medical, H: Holiday). Automatically recalculates.<\/p>\n                    <div style=\"display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;\" id=\"calendarDays\"><\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ANALYTICS -->\n            <section id=\"view-analytics\" class=\"ams-sec\" style=\"display:none;\">\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 20px;\">\n                    <div class=\"ams-chart-box\">\n                        <h4 style=\"margin:0 0 16px 0; font-size:15px; color:#334155;\">Monthly Progression Trend<\/h4>\n                        <canvas id=\"monthlyLine\" width=\"450\" height=\"250\"><\/canvas>\n                    <\/div>\n                    <div class=\"ams-chart-box\">\n                        <h4 style=\"margin:0 0 16px 0; font-size:16px; color:#334155;\">Semester Comparison<\/h4>\n                        <canvas id=\"semesterBar\" width=\"450\" height=\"250\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- REPORTS & PRINT -->\n            <section id=\"view-reports\" class=\"ams-sec\" style=\"display:none;\">\n                <div class=\"ams-panel\">\n                    <div class=\"ams-panel-head\">\n                        <span>Professional Printable A4 College Register<\/span>\n                        <button class=\"ams-btn\" onclick=\"window.print()\">Print A4 Register<\/button>\n                    <\/div>\n                    <div class=\"print-header\">\n                        <h2>ACADEMIA PULSE COLLEGE OF ENGINEERING &#038; TECHNOLOGY<\/h2>\n                        <p>Official Departmental Attendance Register &#8211; Semester 4 (2026)<\/p>\n                        <hr style=\"margin: 15px 0; border: 0; border-top: 1px solid #000;\">\n                    <\/div>\n                    <div class=\"ams-table-wrap\">\n                        <table class=\"ams-table\">\n                            <thead>\n                                <tr>\n                                    <th>Roll<\/th>\n                                    <th>Name<\/th>\n                                    <th>Department<\/th>\n                                    <th>Total Classes<\/th>\n                                    <th>Present<\/th>\n                                    <th>Absent<\/th>\n                                    <th>Attendance %<\/th>\n                                    <th>Official Status<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody id=\"printTableBody\"><\/tbody>\n                        <\/table>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- SETTINGS & BACKUP -->\n            <section id=\"view-settings\" class=\"ams-sec\" style=\"display:none;\">\n                <div class=\"ams-panel\" style=\"max-width: 600px;\">\n                    <div class=\"ams-panel-head\"><span>LocalStorage &#038; Backup Manager<\/span><\/div>\n                    <p style=\"font-size: 13px; color: #64748b; margin-bottom: 20px;\">All modifications persist automatically. You can export or import full database backups safely.<\/p>\n                    <div style=\"display: flex; gap: 12px; flex-wrap: wrap;\">\n                        <button class=\"ams-btn\" id=\"btnBackupJSON\">Download Full JSON Backup<\/button>\n                        <label class=\"ams-btn ams-btn-secondary\" style=\"cursor: pointer;\">\n                            Import JSON Backup <input type=\"file\" id=\"importJSON\" accept=\".json\" style=\"display:none;\">\n                        <\/label>\n                    <\/div>\n                <\/div>\n            <\/section>\n        <\/main>\n    <\/div>\n\n    <!-- Modal Form -->\n    <div id=\"wp-ams-modal\">\n        <div id=\"wp-ams-modal-box\">\n            <h3 style=\"margin:0 0 16px 0; font-size:18px; font-weight:750; color:#0f172a;\" id=\"modalTitle\">Add Student Record<\/h3>\n            <div class=\"ams-form-grid\">\n                <div class=\"ams-form-grp\">\n                    <label>Roll Number *<\/label>\n                    <input type=\"text\" id=\"mRoll\" class=\"ams-input\" placeholder=\"e.g. CS-2026-101\">\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Registration Number *<\/label>\n                    <input type=\"text\" id=\"mReg\" class=\"ams-input\" placeholder=\"REG982341\">\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Student Name *<\/label>\n                    <input type=\"text\" id=\"mName\" class=\"ams-input\" placeholder=\"Full Name\">\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Department<\/label>\n                    <select id=\"mDept\" class=\"ams-select\">\n                        <option value=\"Computer Science\">Computer Science<\/option>\n                        <option value=\"Electronics\">Electronics<\/option>\n                        <option value=\"Mechanical\">Mechanical<\/option>\n                        <option value=\"Civil\">Civil<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Semester<\/label>\n                    <select id=\"mSem\" class=\"ams-select\">\n                        <option value=\"Semester 1\">Semester 1<\/option>\n                        <option value=\"Semester 2\">Semester 2<\/option>\n                        <option value=\"Semester 3\">Semester 3<\/option>\n                        <option value=\"Semester 4\" selected>Semester 4<\/option>\n                        <option value=\"Semester 5\">Semester 5<\/option>\n                        <option value=\"Semester 6\">Semester 6<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Section<\/label>\n                    <input type=\"text\" id=\"mSec\" class=\"ams-input\" value=\"Section A\">\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Total Classes<\/label>\n                    <input type=\"number\" id=\"mTotal\" class=\"ams-input\" value=\"50\">\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Present Classes<\/label>\n                    <input type=\"number\" id=\"mPresent\" class=\"ams-input\" value=\"42\">\n                <\/div>\n                <div class=\"ams-form-grp\">\n                    <label>Notes<\/label>\n                    <input type=\"text\" id=\"mNotes\" class=\"ams-input\" value=\"Eligible\">\n                <\/div>\n            <\/div>\n            <div style=\"display:flex; justify-content:flex-end; gap:10px; margin-top:20px;\">\n                <button class=\"ams-btn ams-btn-secondary\" id=\"modalClose\">Cancel<\/button>\n                <button class=\"ams-btn\" id=\"modalSave\">Save Record<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            let defaultStudents = [\n                { id: 1, roll: \"CS-2026-101\", reg: \"REG1001\", name: \"Alexander Wright\", dept: \"Computer Science\", sem: \"Semester 4\", section: \"Section A\", total: 50, present: 46, absent: 4, notes: \"Excellent Performance\" },\n                { id: 2, roll: \"CS-2026-102\", reg: \"REG1002\", name: \"Sophia Martinez\", dept: \"Computer Science\", sem: \"Semester 4\", section: \"Section A\", total: 50, present: 33, absent: 17, notes: \"Warning Issued\" },\n                { id: 3, roll: \"EC-2026-201\", reg: \"REG2001\", name: \"Liam Johnson\", dept: \"Electronics\", sem: \"Semester 4\", section: \"Section B\", total: 45, present: 20, absent: 25, notes: \"Critical Warning\" },\n                { id: 4, roll: \"ME-2026-301\", reg: \"REG3001\", name: \"Ethan Brown\", dept: \"Mechanical\", sem: \"Semester 2\", section: \"Section A\", total: 40, present: 38, absent: 2, notes: \"Eligible\" },\n                { id: 5, roll: \"CV-2026-401\", reg: \"REG4001\", name: \"Olivia Davis\", dept: \"Civil\", sem: \"Semester 6\", section: \"Section C\", total: 48, present: 45, absent: 3, notes: \"Eligible\" }\n            ];\n\n            let studentsData = [];\n            try {\n                const stored = localStorage.getItem('wp_ams_data');\n                studentsData = stored ? JSON.parse(stored) : defaultStudents;\n            } catch(e) {\n                studentsData = defaultStudents;\n            }\n\n            function persist() {\n                try {\n                    localStorage.setItem('wp_ams_data', JSON.stringify(studentsData));\n                    showToast(\"Changes saved successfully\");\n                } catch(e) {\n                    showToast(\"Storage error encountered\");\n                }\n                renderDashboard();\n                renderTable();\n                renderPrintTable();\n            }\n\n            function showToast(msg) {\n                const t = document.getElementById('wp-ams-toast');\n                t.innerText = msg;\n                t.classList.add('show');\n                setTimeout(() => t.classList.remove('show'), 2000);\n            }\n\n            \/\/ Navigation tabs\n            const navTabs = document.querySelectorAll('#wp-ams-root .ams-tab-btn');\n            const sections = document.querySelectorAll('#wp-ams-root .ams-sec');\n            navTabs.forEach(btn => {\n                btn.addEventListener('click', () => {\n                    navTabs.forEach(b => b.classList.remove('active'));\n                    btn.classList.add('active');\n                    const target = btn.getAttribute('data-target');\n                    sections.forEach(sec => sec.style.display = sec.id === 'view-' + target ? 'block' : 'none');\n                    if(target === 'analytics') drawCharts();\n                });\n            });\n\n            function getStatus(pct) {\n                if(pct < 50) return { label: 'Very Critical', class: 'critical' };\n                if(pct < 60) return { label: 'Critical Warning', class: 'red' };\n                if(pct < 75) return { label: 'At Risk (<75%)', class: 'orange' };\n                if(pct >= 90) return { label: 'Excellent', class: 'green' };\n                return { label: 'Normal', class: 'blue' };\n            }\n\n            function renderDashboard() {\n                const totalStudents = studentsData.length;\n                const totalClasses = studentsData.reduce((acc, s) => acc + s.total, 0);\n                const avgAtt = totalStudents > 0 ? (studentsData.reduce((acc, s) => acc + (s.present \/ s.total * 100), 0) \/ totalStudents).toFixed(1) : 0;\n                const below75 = studentsData.filter(s => (s.present \/ s.total) * 100 < 75).length;\n                const critical = studentsData.filter(s => (s.present \/ s.total) * 100 < 50).length;\n                const excellent = studentsData.filter(s => (s.present \/ s.total) * 100 >= 90).length;\n\n                document.getElementById('amsDashCards').innerHTML = `\n                    <div class=\"ams-card\">\n                        <span class=\"ams-card-title\">Total Students<\/span>\n                        <div class=\"ams-card-val\">${totalStudents}<\/div>\n                        <span class=\"ams-card-desc\">Active registrations<\/span>\n                    <\/div>\n                    <div class=\"ams-card\">\n                        <span class=\"ams-card-title\">Average Attendance<\/span>\n                        <div class=\"ams-card-val\" style=\"color:#2563eb;\">${avgAtt}%<\/div>\n                        <span class=\"ams-card-desc\">College benchmark<\/span>\n                    <\/div>\n                    <div class=\"ams-card\">\n                        <span class=\"ams-card-title\">Students At Risk<\/span>\n                        <div class=\"ams-card-val\" style=\"color:#d97706;\">${below75}<\/div>\n                        <span class=\"ams-card-desc\">Below 75% threshold<\/span>\n                    <\/div>\n                    <div class=\"ams-card\">\n                        <span class=\"ams-card-title\">Critical Warnings<\/span>\n                        <div class=\"ams-card-val\" style=\"color:#dc2626;\">${critical}<\/div>\n                        <span class=\"ams-card-desc\">Below 50% attendance<\/span>\n                    <\/div>\n                    <div class=\"ams-card\">\n                        <span class=\"ams-card-title\">Excellent Performers<\/span>\n                        <div class=\"ams-card-val\" style=\"color:#16a34a;\">${excellent}<\/div>\n                        <span class=\"ams-card-desc\">Above 90% attendance<\/span>\n                    <\/div>\n                    <div class=\"ams-card\">\n                        <span class=\"ams-card-title\">Total Classes Logged<\/span>\n                        <div class=\"ams-card-val\">${totalClasses}<\/div>\n                        <span class=\"ams-card-desc\">Aggregate sessions<\/span>\n                    <\/div>\n                `;\n            }\n\n            function renderTable(data = studentsData) {\n                const tbody = document.getElementById('studentTableBody');\n                tbody.innerHTML = '';\n                data.forEach(s => {\n                    const pct = s.total > 0 ? ((s.present \/ s.total) * 100).toFixed(1) : 0;\n                    const status = getStatus(pct);\n                    const predicted = (((s.present + 10) \/ (s.total + 10)) * 100).toFixed(1);\n                    const tr = document.createElement('tr');\n                    tr.innerHTML = `\n                        <td><input type=\"checkbox\" class=\"st-chk\" data-id=\"${s.id}\"><\/td>\n                        <td style=\"font-weight:700;\">${s.roll}<\/td>\n                        <td>${s.name}<\/td>\n                        <td>${s.dept}<\/td>\n                        <td>${s.sem}<\/td>\n                        <td>${s.total}<\/td>\n                        <td><span style=\"color:#16a34a; font-weight:700;\">${s.present}<\/span><\/td>\n                        <td><span style=\"color:#dc2626; font-weight:700;\">${s.absent}<\/span><\/td>\n                        <td style=\"font-weight:700;\">${pct}%<\/td>\n                        <td><span class=\"ams-badge ${status.class}\">${status.label}<\/span><\/td>\n                        <td style=\"color:#2563eb; font-weight:600;\">${predicted}%<\/td>\n                        <td><input type=\"text\" value=\"${s.notes}\" class=\"ams-input\" style=\"padding:4px 8px; font-size:12px;\" onchange=\"window.updateNote(${s.id}, this.value)\"><\/td>\n                        <td><button class=\"ams-btn ams-btn-danger\" style=\"padding:4px 10px; font-size:11px;\" onclick=\"window.delStudent(${s.id})\">Delete<\/button><\/td>\n                    `;\n                    tbody.appendChild(tr);\n                });\n            }\n\n            function renderPrintTable() {\n                const tbody = document.getElementById('printTableBody');\n                if(!tbody) return;\n                tbody.innerHTML = '';\n                studentsData.forEach(s => {\n                    const pct = s.total > 0 ? ((s.present \/ s.total) * 100).toFixed(1) : 0;\n                    const status = getStatus(pct);\n                    const tr = document.createElement('tr');\n                    tr.innerHTML = `\n                        <td>${s.roll}<\/td>\n                        <td>${s.name}<\/td>\n                        <td>${s.dept}<\/td>\n                        <td>${s.total}<\/td>\n                        <td>${s.present}<\/td>\n                        <td>${s.absent}<\/td>\n                        <td>${pct}%<\/td>\n                        <td>${status.label}<\/td>\n                    `;\n                    tbody.appendChild(tr);\n                });\n            }\n\n            function renderCalendar() {\n                const c = document.getElementById('calendarDays');\n                if(!c) return;\n                c.innerHTML = '';\n                for(let i=1; i<=31; i++) {\n                    const div = document.createElement('div');\n                    div.style.cssText = \"background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; min-height:75px; padding:8px; font-size:12px;\";\n                    div.innerHTML = `<div style=\"font-weight:700; color:#64748b;\">July ${i}<\/div><div style=\"margin-top:6px;\"><span class=\"ams-badge green\">P: 120<\/span> <span class=\"ams-badge red\">A: 15<\/span><\/div>`;\n                    c.appendChild(div);\n                }\n            }\n\n            function drawCharts() {\n                drawPie();\n                drawBar();\n                drawLine();\n                drawSemBar();\n            }\n\n            function drawPie() {\n                const canvas = document.getElementById('dashPie');\n                if(!canvas) return;\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0,0,canvas.width,canvas.height);\n                const data = [65, 20, 15];\n                const colors = ['#16a34a', '#d97706', '#dc2626'];\n                let total = data.reduce((a,b)=>a+b,0), start = 0;\n                data.forEach((val, i) => {\n                    let angle = (val\/total)*2*Math.PI;\n                    ctx.beginPath();\n                    ctx.moveTo(150,100);\n                    ctx.arc(150,100,75,start,start+angle);\n                    ctx.closePath();\n                    ctx.fillStyle = colors[i];\n                    ctx.fill();\n                    start += angle;\n                });\n            }\n\n            function drawBar() {\n                const canvas = document.getElementById('dashBar');\n                if(!canvas) return;\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0,0,canvas.width,canvas.height);\n                const depts = ['CS', 'EC', 'ME', 'CV'];\n                const vals = [88, 82, 79, 91];\n                vals.forEach((v, i) => {\n                    let x = 40 + (i * 80);\n                    let h = v * 1.6;\n                    ctx.fillStyle = '#2563eb';\n                    ctx.fillRect(x, 180 - h, 45, h);\n                    ctx.fillStyle = '#0f172a';\n                    ctx.font = '11px Inter';\n                    ctx.fillText(depts[i], x+12, 195);\n                });\n            }\n\n            function drawLine() {\n                const canvas = document.getElementById('monthlyLine');\n                if(!canvas) return;\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0,0,canvas.width,canvas.height);\n                const pts = [75, 78, 82, 80, 86, 88];\n                ctx.beginPath();\n                ctx.moveTo(30, 200 - pts[0]*1.8);\n                pts.forEach((p, i) => ctx.lineTo(40 + i*70, 200 - p*1.8));\n                ctx.strokeStyle = '#2563eb'; ctx.lineWidth = 3; ctx.stroke();\n            }\n\n            function drawSemBar() {\n                const canvas = document.getElementById('semesterBar');\n                if(!canvas) return;\n                const ctx = canvas.getContext('2d');\n                ctx.clearRect(0,0,canvas.width,canvas.height);\n                const sems = ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6'];\n                const vals = [80, 85, 82, 88, 90, 86];\n                vals.forEach((v, i) => {\n                    let x = 30 + (i * 65);\n                    ctx.fillStyle = '#16a34a';\n                    ctx.fillRect(x, 180 - v*1.6, 40, v*1.6);\n                    ctx.fillStyle = '#0f172a'; ctx.font = '10px Inter';\n                    ctx.fillText(sems[i], x+5, 195);\n                });\n            }\n\n            \/\/ Global window exposure for inline handlers\n            window.updateNote = function(id, val) {\n                const s = studentsData.find(x => x.id === id);\n                if(s) { s.notes = val; persist(); }\n            };\n\n            window.delStudent = function(id) {\n                if(confirm(\"Are you sure you want to delete this student record?\")) {\n                    studentsData = studentsData.filter(x => x.id !== id);\n                    persist();\n                }\n            };\n\n            \/\/ Event listeners\n            document.getElementById('searchInput').addEventListener('input', e => {\n                const term = e.target.value.toLowerCase();\n                renderTable(studentsData.filter(s => s.roll.toLowerCase().includes(term) || s.name.toLowerCase().includes(term) || s.dept.toLowerCase().includes(term)));\n            });\n\n            document.getElementById('filterSelect').addEventListener('change', e => {\n                const val = e.target.value;\n                let data = studentsData;\n                if(val === 'critical') data = studentsData.filter(s => (s.present \/ s.total)*100 < 50);\n                else if(val === 'below75') data = studentsData.filter(s => (s.present \/ s.total)*100 < 75);\n                else if(val === 'above90') data = studentsData.filter(s => (s.present \/ s.total)*100 >= 90);\n                renderTable(data);\n            });\n\n            \/\/ Modal handling\n            const modal = document.getElementById('wp-ams-modal');\n            document.getElementById('btnOpenModal').addEventListener('click', () => modal.style.display = 'flex');\n            document.getElementById('modalClose').addEventListener('click', () => modal.style.display = 'none');\n            document.getElementById('modalSave').addEventListener('click', () => {\n                const roll = document.getElementById('mRoll').value.trim();\n                const reg = document.getElementById('mReg').value.trim();\n                const name = document.getElementById('mName').value.trim();\n                const dept = document.getElementById('mDept').value;\n                const sem = document.getElementById('mSem').value;\n                const section = document.getElementById('mSec').value;\n                const total = parseInt(document.getElementById('mTotal').value) || 0;\n                const present = parseInt(document.getElementById('mPresent').value) || 0;\n                const notes = document.getElementById('mNotes').value;\n\n                if(!roll || !name || !reg) { alert('Please fill all mandatory fields.'); return; }\n                if(studentsData.some(s => s.roll === roll)) { alert('Duplicate Roll Number detected.'); return; }\n                if(present > total || total < 0 || present < 0) { alert('Invalid attendance values.'); return; }\n\n                studentsData.push({ id: Date.now(), roll, reg, name, dept, sem, section, total, present, absent: total - present, notes });\n                modal.style.display = 'none';\n                persist();\n            });\n\n            document.getElementById('btnBackupJSON').addEventListener('click', () => {\n                const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(studentsData, null, 2));\n                const dl = document.createElement('a');\n                dl.setAttribute(\"href\", dataStr);\n                dl.setAttribute(\"download\", \"academia_pulse_backup.json\");\n                document.body.appendChild(dl); dl.click(); dl.remove();\n            });\n\n            document.getElementById('btnExportJSON').addEventListener('click', () => {\n                document.getElementById('btnBackupJSON').click();\n            });\n\n            \/\/ Initialize\n            renderDashboard();\n            renderTable();\n            renderPrintTable();\n            renderCalendar();\n\n        })();\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Saved successfully AcademiaPulse Pro Complete College &#038; Professor Attendance Management Ecosystem Dashboard Students Daily Register Analytics Reports &#038; Print Backup &#038; Tools Attendance Status Benchmark Department Performance Comparison Student Directory &#038; Live Predictor + Add Student Export JSON All Status LevelsCritical Warning (&lt;50%)At Risk (&lt;75%)Excellent (&gt;90%) Sort by RollSort by NameHighest AttendanceLowest Attendance Bulk Actions: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-810","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=810"}],"version-history":[{"count":1,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/810\/revisions"}],"predecessor-version":[{"id":811,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/810\/revisions\/811"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}