|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PMC Tech - Complete AI Attendance</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { font-family: 'Inter', sans-serif; background-color: #F3F4F6; } |
|
|
.view { display: none; } |
|
|
.view.active { display: block; } |
|
|
.header-wave { |
|
|
background: linear-gradient(to right, #8A2BE2, #6A0DAD); |
|
|
border-bottom-left-radius: 50% 20%; |
|
|
border-bottom-right-radius: 50% 20%; |
|
|
} |
|
|
.nav-btn.active { color: #8A2BE2; background-color: #f3e8ff; } |
|
|
.timetable-select { |
|
|
-webkit-appearance: none; -moz-appearance: none; appearance: none; |
|
|
background-image: none; border: 1px solid #e5e7eb; |
|
|
} |
|
|
.loader { |
|
|
border: 4px solid #f3f3f3; border-top: 4px solid #8A2BE2; |
|
|
border-radius: 50%; width: 24px; height: 24px; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<div id="app-container" class="container mx-auto max-w-md min-h-screen bg-white flex flex-col shadow-2xl"> |
|
|
|
|
|
<header id="app-header" class="header-wave text-white p-6 pt-10 h-40 hidden"> |
|
|
<h1 id="header-title" class="text-2xl font-bold text-center"></h1> |
|
|
<p id="header-subtitle" class="text-center text-sm opacity-90"></p> |
|
|
</header> |
|
|
|
|
|
<div id="message-box" class="hidden fixed top-5 left-1/2 -translate-x-1/2 z-50 p-4 text-white rounded-lg shadow-lg"></div> |
|
|
|
|
|
<main id="main-content" class="flex-grow p-4 overflow-y-auto"></main> |
|
|
|
|
|
<nav id="bottom-nav" class="bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.1)] p-2 hidden"> |
|
|
<div class="flex justify-around"> |
|
|
<button data-view="department" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20"> |
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg> |
|
|
<span class="text-xs">Home</span> |
|
|
</button> |
|
|
<button data-view="studentManagement" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20"> |
|
|
<svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" /></svg> |
|
|
<span class="text-xs">Students</span> |
|
|
</button> |
|
|
<button data-view="reports" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20"> |
|
|
<svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" /></svg> |
|
|
<span class="text-xs">Reports</span> |
|
|
</button> |
|
|
<button data-view="manage" class="nav-btn flex flex-col items-center text-gray-500 p-2 rounded-lg w-20"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.096 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg> |
|
|
<span class="text-xs">Manage</span> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div id="gemini-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center p-4 z-50"> |
|
|
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md"> |
|
|
<h3 class="text-lg font-bold mb-2">✨ AI Attendance Analysis</h3> |
|
|
<div id="gemini-modal-content" class="text-gray-700 max-h-64 overflow-y-auto"></div> |
|
|
<button data-action="closeModal" class="mt-4 w-full bg-gray-200 py-2 rounded-lg">Close</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const state = { |
|
|
db: null, |
|
|
currentStaff: null, |
|
|
selectedDept: null, |
|
|
selectedYear: null, |
|
|
currentView: 'login', |
|
|
}; |
|
|
|
|
|
const DEPARTMENTS = ["Aeronautical", "AI & Data Science", "Biomedical", "Biotechnology", "Civil", "Computer Science", "Electrical", "Electronics & Comm.", "Information Technology", "Mechanical", "Mechatronics"]; |
|
|
|
|
|
|
|
|
const ui = { |
|
|
mainContent: document.getElementById('main-content'), |
|
|
header: document.getElementById('app-header'), |
|
|
headerTitle: document.getElementById('header-title'), |
|
|
headerSubtitle: document.getElementById('header-subtitle'), |
|
|
bottomNav: document.getElementById('bottom-nav'), |
|
|
messageBox: document.getElementById('message-box'), |
|
|
geminiModal: document.getElementById('gemini-modal'), |
|
|
geminiModalContent: document.getElementById('gemini-modal-content'), |
|
|
|
|
|
templates: { |
|
|
login: () => ` |
|
|
<div class="view active flex flex-col h-full justify-center bg-gradient-to-b from-[#6A0DAD] to-[#8A2BE2] p-6 -m-4"> |
|
|
<div class="bg-white/30 backdrop-blur-sm p-8 rounded-2xl shadow-lg text-center"> |
|
|
<input id="login-username" type="text" placeholder="Staff Username" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600"> |
|
|
<input id="login-password" type="password" placeholder="Password" class="w-full p-3 mb-6 bg-white/50 rounded-lg placeholder-gray-600"> |
|
|
<button data-action="login" class="w-full bg-white text-[#6A0DAD] font-bold py-3 rounded-lg shadow-md mb-4">Login</button> |
|
|
<button data-view="register" class="w-full bg-[#8A2BE2] text-white font-bold py-3 rounded-lg shadow-md">Register New Staff</button> |
|
|
</div> |
|
|
<div class="text-center mt-10"> |
|
|
<img src="/home/tharun/projects/present/images.png" alt="" class="w-32 mx-auto"> |
|
|
<p class="text-center text-white text-sm mt-6">First time? <a href="#" data-view="dbManager" class="font-bold hover:underline">Setup/Load Database</a></p> |
|
|
</div> |
|
|
</div>`, |
|
|
register: () => ` |
|
|
<div class="view active flex flex-col h-full justify-center bg-gradient-to-b from-[#6A0DAD] to-[#8A2BE2] p-6 -m-4"> |
|
|
<div class="bg-white/30 backdrop-blur-sm p-8 rounded-2xl shadow-lg text-center"> |
|
|
<h2 class="text-white text-2xl font-bold mb-6">Staff Registration</h2> |
|
|
<input id="register-username" type="text" placeholder="Username" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600"> |
|
|
<input id="register-email" type="email" placeholder="Email Address" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600"> |
|
|
<select id="register-department" class="w-full p-3 mb-4 bg-white/50 rounded-lg text-gray-700"></select> |
|
|
<select id="register-position" class="w-full p-3 mb-4 bg-white/50 rounded-lg text-gray-700"> |
|
|
<option value="">Select Position</option><option value="HOD">HOD</option><option value="Class Advisor">Class Advisor</option><option value="Professor">Professor</option> |
|
|
</select> |
|
|
<input id="register-password" type="password" placeholder="Password" class="w-full p-3 mb-4 bg-white/50 rounded-lg placeholder-gray-600"> |
|
|
<button data-action="register" class="w-full bg-white text-[#6A0DAD] font-bold py-3 rounded-lg shadow-md mb-4">Register</button> |
|
|
<a href="#" data-view="login" class="text-white hover:underline">Back to Login</a> |
|
|
</div> |
|
|
</div>`, |
|
|
department: () => { |
|
|
const deptsToShow = state.currentStaff.position === 'HOD' ? [state.currentStaff.department] : DEPARTMENTS; |
|
|
return ` |
|
|
<div class="view active"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Select Department</h2> |
|
|
<div class="space-y-3"> |
|
|
${deptsToShow.map(dept => `<button data-action="selectDept" data-dept="${dept}" class="w-full flex items-center p-4 bg-white rounded-lg shadow-md hover:bg-gray-50"><span class="font-semibold text-gray-700">${dept}</span></button>`).join('')} |
|
|
</div> |
|
|
</div>`; |
|
|
}, |
|
|
year: () => ` |
|
|
<div class="view active"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Select Year</h2> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
${[1, 2, 3, 4].map(year => `<button data-action="selectYear" data-year="${year}" class="flex flex-col items-center justify-center p-6 bg-purple-600 text-white rounded-2xl shadow-lg h-32 hover:bg-purple-700"><span class="text-4xl font-extrabold">${year}</span><span class="font-semibold">${year}${util.getYearSuffix(year)} Year</span></button>`).join('')} |
|
|
</div> |
|
|
</div>`, |
|
|
studentManagement: () => ` |
|
|
<div class="view active"> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-6"> |
|
|
<h3 class="font-bold text-lg mb-2">Add New Student</h3> |
|
|
<input type="text" id="student-name-input" placeholder="Student Full Name" class="w-full p-2 mb-2 border rounded"> |
|
|
<input type="text" id="student-regno-input" placeholder="Register Number" class="w-full p-2 mb-2 border rounded"> |
|
|
<button data-action="addStudent" class="w-full bg-purple-600 text-white font-bold py-2 rounded-lg">Add Student</button> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-2">Student List</h3> |
|
|
<div id="student-list-container" class="space-y-2">${logic.getStudentListHTML()}</div> |
|
|
</div> |
|
|
</div>`, |
|
|
attendanceEntry: () => { |
|
|
const { subjectName } = logic.getScheduledSubject(); |
|
|
const subjectDisplay = subjectName !== 'General' |
|
|
? `<div class="bg-purple-100 text-purple-800 p-3 rounded-lg text-center mb-4"><p class="font-bold">${subjectName}</p><p class="text-sm">Scheduled for this hour</p></div>` |
|
|
: `<div class="bg-yellow-100 text-yellow-800 p-3 rounded-lg text-center mb-4"><p class="font-bold">No Subject Scheduled</p><p class="text-sm">Attendance will be marked as 'General'</p></div>`; |
|
|
|
|
|
return ` |
|
|
<div class="view active"> |
|
|
${subjectDisplay} |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div><label for="attendance-date" class="text-sm font-medium">Date</label><input type="date" id="attendance-date" class="w-full p-2 border rounded mt-1" value="${new Date().toISOString().split('T')[0]}"></div> |
|
|
<div><label for="attendance-hour" class="text-sm font-medium">Hour (1-8)</label><select id="attendance-hour" class="w-full p-2 border rounded mt-1">${[...Array(8).keys()].map(i => `<option value="${i+1}">Hour ${i+1}</option>`).join('')}</select></div> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Mark Absentees</h3> |
|
|
<div id="attendance-student-list" class="space-y-2">${logic.getStudentCheckboxListHTML()}</div> |
|
|
<button data-action="submitAttendance" class="w-full mt-4 bg-[#8A2BE2] text-white font-bold py-3 rounded-lg shadow-md">Submit Attendance</button> |
|
|
</div>`; |
|
|
}, |
|
|
reports: () => ` |
|
|
<div class="view active"> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<h3 class="font-bold mb-2">Generate Student-wise Report</h3> |
|
|
<div class="flex space-x-2" id="period-selector"> |
|
|
<button data-period="week" class="period-btn flex-1 bg-purple-800 text-white py-2 rounded-lg">This Week</button> |
|
|
<button data-period="month" class="period-btn flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg">This Month</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="reports-placeholder" class="text-center text-gray-500 p-8">Select a class from Home to see reports.</div> |
|
|
<div id="student-wise-report" class="hidden"></div> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mt-6"> |
|
|
<h3 class="font-bold mb-2">Download Detailed Log (CSV)</h3> |
|
|
<p class="text-xs text-gray-600 mb-2">Generates a full attendance log for the selected class, including subjects.</p> |
|
|
<button data-action="downloadReport" class="w-full bg-blue-600 text-white font-bold py-2 rounded-lg">Download Full Report</button> |
|
|
</div> |
|
|
</div>`, |
|
|
manage: () => ` |
|
|
<div class="view active space-y-4"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Management</h2> |
|
|
<button data-view="subjects" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">Manage My Subjects</button> |
|
|
<button data-view="timetable" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">Set Class Timetable</button> |
|
|
<button data-view="profile" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">My Profile</button> |
|
|
<button data-view="dbManager" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 font-semibold">Database Settings</button> |
|
|
</div>`, |
|
|
subjects: () => ` |
|
|
<div class="view active"> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-6"> |
|
|
<h3 class="font-bold text-lg mb-2">Add New Subject</h3> |
|
|
<input type="text" id="subject-name-input" placeholder="e.g., Data Structures" class="w-full p-2 mb-2 border rounded"> |
|
|
<button data-action="addSubject" class="w-full bg-purple-600 text-white font-bold py-2 rounded-lg">Add Subject</button> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-2">My Subjects</h3> |
|
|
<div id="subject-list-container" class="space-y-2">${logic.getSubjectListHTML()}</div> |
|
|
</div> |
|
|
</div>`, |
|
|
timetable: () => { |
|
|
if (!state.selectedDept || !state.selectedYear) return `<div class="view active text-center p-8 text-gray-600">Please select a Department and Year from the Home screen first to set the timetable.</div>`; |
|
|
return ` |
|
|
<div class="view active"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Set Timetable</h2> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full border-collapse"> |
|
|
<thead><tr class="bg-gray-100"><th class="p-2 border">Day/Hour</th>${[...Array(8).keys()].map(h => `<th class="p-2 border">${h+1}</th>`).join('')}</tr></thead> |
|
|
<tbody>${logic.getTimetableHTML()}</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<button data-action="saveTimetable" class="w-full mt-4 bg-green-500 text-white font-bold py-3 rounded-lg shadow-md">Save Timetable</button> |
|
|
</div>`; |
|
|
}, |
|
|
profile: () => ` |
|
|
<div class="view active"> |
|
|
<div class="bg-gray-100 p-6 rounded-2xl shadow-md flex items-center space-x-4 mb-6"> |
|
|
<div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center text-white text-2xl font-bold">${state.currentStaff.username.charAt(0).toUpperCase()}</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-gray-800">${state.currentStaff.username}</h3> |
|
|
<p class="text-gray-600">${state.currentStaff.position}</p> |
|
|
<p class="text-gray-600">${state.currentStaff.department}</p> |
|
|
</div> |
|
|
</div> |
|
|
<button data-action="logout" class="w-full bg-red-500 text-white font-bold py-3 rounded-lg shadow-md">Logout</button> |
|
|
</div>`, |
|
|
dbManager: () => ` |
|
|
<div class="view active bg-white p-8 rounded-xl shadow-lg text-center"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-700">Database Management</h2> |
|
|
<div class="space-y-4"> |
|
|
<button data-action="createDb" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg">Create & Save New</button> |
|
|
<label for="load-db-input" class="w-full bg-green-600 text-white font-bold py-3 px-4 rounded-lg cursor-pointer block">Load from File</label> |
|
|
<input type="file" id="load-db-input" class="hidden" accept=".json"> |
|
|
<button data-action="saveDb" id="save-db-btn" class="w-full bg-purple-600 text-white font-bold py-3 px-4 rounded-lg hidden">Save Current Changes</button> |
|
|
</div> |
|
|
<p class="text-center text-gray-600 text-sm mt-8">Finished? <a href="#" data-view="login" class="text-blue-600 hover:underline">Go to Login</a></p> |
|
|
</div>`, |
|
|
}, |
|
|
|
|
|
render() { |
|
|
const view = state.currentView; |
|
|
const template = this.templates[view] || (() => `<div>View not found: ${view}</div>`); |
|
|
this.mainContent.innerHTML = template(); |
|
|
|
|
|
const isAuthView = ['login', 'register', 'dbManager'].includes(view); |
|
|
this.header.classList.toggle('hidden', isAuthView); |
|
|
this.bottomNav.classList.toggle('hidden', isAuthView); |
|
|
this.mainContent.classList.toggle('pb-20', !isAuthView); |
|
|
|
|
|
if (!isAuthView) { |
|
|
this.headerTitle.textContent = util.getViewTitle(view); |
|
|
this.headerSubtitle.textContent = (state.selectedDept && state.selectedYear) ? `${state.selectedDept} - ${state.selectedYear}${util.getYearSuffix(state.selectedYear)} Year` : ''; |
|
|
document.querySelectorAll('.nav-btn').forEach(btn => { |
|
|
btn.classList.toggle('active', btn.dataset.view === view); |
|
|
}); |
|
|
} |
|
|
|
|
|
if (view === 'register') { |
|
|
const deptDropdown = document.getElementById('register-department'); |
|
|
deptDropdown.innerHTML = '<option value="">Select Department</option>'; |
|
|
DEPARTMENTS.forEach(d => deptDropdown.add(new Option(d, d))); |
|
|
} |
|
|
if (view === 'reports' && state.selectedDept && state.selectedYear) { |
|
|
logic.generateReport('week'); |
|
|
} |
|
|
if (view === 'timetable') { |
|
|
logic.populateTimetable(); |
|
|
} |
|
|
if (state.db) document.getElementById('save-db-btn')?.classList.remove('hidden'); |
|
|
}, |
|
|
|
|
|
showMessage(msg, isError = false) { |
|
|
this.messageBox.textContent = msg; |
|
|
this.messageBox.className = `fixed top-5 left-1/2 -translate-x-1/2 z-50 p-4 text-white rounded-lg shadow-lg ${isError ? 'bg-red-500' : 'bg-green-500'}`; |
|
|
setTimeout(() => this.messageBox.classList.add('hidden'), 3000); |
|
|
}, |
|
|
showModal(content) { |
|
|
this.geminiModalContent.innerHTML = content; |
|
|
this.geminiModal.classList.add('flex'); |
|
|
this.geminiModal.classList.remove('hidden'); |
|
|
}, |
|
|
hideModal() { |
|
|
this.geminiModal.classList.add('hidden'); |
|
|
this.geminiModal.classList.remove('flex'); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const logic = { |
|
|
switchView(view) { |
|
|
state.currentView = view; |
|
|
ui.render(); |
|
|
}, |
|
|
getStudentListHTML() { |
|
|
if (!state.selectedDept || !state.selectedYear) return '<p class="text-center text-gray-500">Please select a department and year from the Home tab first.</p>'; |
|
|
const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear); |
|
|
if (studentsInClass.length === 0) return '<p class="text-gray-500">No students added for this class.</p>'; |
|
|
return studentsInClass.map(s => `<div class="p-2 bg-white rounded shadow-sm flex justify-between items-center"><span>${s.name} (${s.regNo})</span></div>`).join(''); |
|
|
}, |
|
|
getStudentCheckboxListHTML() { |
|
|
if (!state.selectedDept || !state.selectedYear) return '<p class="text-center text-gray-500">Please select a class from Home first.</p>'; |
|
|
const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear); |
|
|
if (studentsInClass.length === 0) return '<p class="text-center text-gray-500">No students in this class. Please add them via the "Students" tab.</p>'; |
|
|
return studentsInClass.map(s => ` |
|
|
<label class="flex items-center p-3 bg-white rounded-lg shadow-sm"> |
|
|
<input type="checkbox" data-regno="${s.regNo}" class="h-5 w-5 rounded text-purple-600 focus:ring-purple-500 border-gray-300"> |
|
|
<span class="ml-3 font-medium">${s.name}</span> |
|
|
<span class="ml-auto text-sm text-gray-500">${s.regNo}</span> |
|
|
</label>`).join(''); |
|
|
}, |
|
|
getSubjectListHTML: () => { |
|
|
if (!state.db.subjects) return '<p>No subjects created.</p>'; |
|
|
const mySubjects = state.db.subjects.filter(s => s.staffId === state.currentStaff.id); |
|
|
if (mySubjects.length === 0) return '<p class="text-gray-500">You have not added any subjects yet.</p>'; |
|
|
return mySubjects.map(s => `<div class="p-2 bg-white rounded shadow-sm">${s.name}</div>`).join(''); |
|
|
}, |
|
|
getTimetableHTML: () => { |
|
|
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; |
|
|
const mySubjects = state.db.subjects.filter(s => s.staffId === state.currentStaff.id); |
|
|
const subjectOptions = `<option value="">-</option>` + mySubjects.map(s => `<option value="${s.id}">${s.name}</option>`).join(''); |
|
|
|
|
|
return days.map((day, dayIndex) => ` |
|
|
<tr> |
|
|
<td class="p-2 border font-semibold bg-gray-50">${day}</td> |
|
|
${[...Array(8).keys()].map(hourIndex => { |
|
|
const hour = hourIndex + 1; |
|
|
return `<td class="p-1 border"><select data-day="${dayIndex}" data-hour="${hour}" class="w-full timetable-select p-1 rounded bg-transparent text-xs">${subjectOptions}</select></td>`; |
|
|
}).join('')} |
|
|
</tr>`).join(''); |
|
|
}, |
|
|
populateTimetable: () => { |
|
|
const timetable = state.db.timetable || {}; |
|
|
const classTimetable = timetable[state.selectedDept]?.[state.selectedYear] || {}; |
|
|
document.querySelectorAll('.timetable-select').forEach(select => { |
|
|
const day = select.dataset.day; |
|
|
const hour = select.dataset.hour; |
|
|
select.value = classTimetable[day]?.[hour] || ''; |
|
|
}); |
|
|
}, |
|
|
getScheduledSubject: () => { |
|
|
const today = new Date(); |
|
|
const dayIndex = today.getDay() - 1; |
|
|
const hourSelect = document.getElementById('attendance-hour'); |
|
|
const collegeHour = hourSelect ? hourSelect.value : 0; |
|
|
|
|
|
if (dayIndex < 0 || dayIndex > 4 || collegeHour === 0) return { subjectName: 'General', subjectId: 'general' }; |
|
|
|
|
|
const timetable = state.db.timetable || {}; |
|
|
const subjectId = timetable[state.selectedDept]?.[state.selectedYear]?.[dayIndex]?.[collegeHour] || 'general'; |
|
|
|
|
|
if (subjectId === 'general' || !state.db.subjects) return { subjectName: 'General', subjectId: 'general' }; |
|
|
|
|
|
const subject = state.db.subjects.find(s => s.id === subjectId); |
|
|
return { subjectName: subject ? subject.name : 'General', subjectId }; |
|
|
}, |
|
|
generateReport(period) { |
|
|
const placeholder = document.getElementById('reports-placeholder'); |
|
|
const studentWiseContainer = document.getElementById('student-wise-report'); |
|
|
|
|
|
if (!state.selectedDept || !state.selectedYear) { |
|
|
placeholder.classList.remove('hidden'); |
|
|
studentWiseContainer.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
placeholder.classList.add('hidden'); |
|
|
studentWiseContainer.classList.remove('hidden'); |
|
|
|
|
|
const { startDate, endDate } = util.getDateRange(period); |
|
|
const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear); |
|
|
|
|
|
let reportHTML = `<h3 class="font-bold text-lg mb-2">Student-wise Report (${util.capitalize(period)})</h3>`; |
|
|
|
|
|
if (studentsInClass.length === 0) { |
|
|
reportHTML += '<p class="text-gray-500">No students in this class.</p>'; |
|
|
} else { |
|
|
reportHTML += '<div class="space-y-2">'; |
|
|
studentsInClass.forEach(student => { |
|
|
let totalHours = 0, presentHours = 0; |
|
|
Object.keys(student.attendance).forEach(dateStr => { |
|
|
const recordDate = new Date(dateStr); |
|
|
if (recordDate >= startDate && recordDate <= endDate) { |
|
|
const hours = student.attendance[dateStr]; |
|
|
Object.keys(hours).forEach(hour => { |
|
|
totalHours++; |
|
|
if (hours[hour].status === 'P') presentHours++; |
|
|
}); |
|
|
} |
|
|
}); |
|
|
const percentage = totalHours > 0 ? Math.round((presentHours / totalHours) * 100) : 0; |
|
|
const colorClass = percentage < 75 ? 'text-red-500' : 'text-green-500'; |
|
|
|
|
|
reportHTML += ` |
|
|
<div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm"> |
|
|
<div> |
|
|
<p class="font-semibold">${student.name}</p> |
|
|
<p class="text-sm text-gray-600">Present: ${presentHours}/${totalHours} hours (<span class="font-bold ${colorClass}">${percentage}%</span>)</p> |
|
|
</div> |
|
|
<button data-action="analyzeStudent" data-studentid="${student.id}" class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-semibold">✨ Analyze</button> |
|
|
</div>`; |
|
|
}); |
|
|
reportHTML += '</div>'; |
|
|
} |
|
|
studentWiseContainer.innerHTML = reportHTML; |
|
|
}, |
|
|
async callGeminiAPI(prompt) { |
|
|
const apiKey = ""; |
|
|
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`; |
|
|
const payload = { contents: [{ parts: [{ text: prompt }] }] }; |
|
|
|
|
|
try { |
|
|
const response = await fetch(apiUrl, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
if (!response.ok) throw new Error(`API error: ${response.statusText}`); |
|
|
const result = await response.json(); |
|
|
return result.candidates?.[0]?.content?.parts?.[0]?.text || "No response from AI."; |
|
|
} catch (error) { |
|
|
console.error("Gemini API call failed:", error); |
|
|
return "Failed to get analysis. Please check console for errors."; |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const actions = { |
|
|
switchView: (el) => logic.switchView(el.dataset.view), |
|
|
createDb: () => { |
|
|
state.db = { staff: [], students: [], subjects: [], timetable: {} }; |
|
|
ui.showMessage('New database created. Please save it.'); |
|
|
actions.saveDb(); |
|
|
}, |
|
|
saveDb: () => { |
|
|
if (!state.db) return ui.showMessage('No database to save.', true); |
|
|
const dataStr = JSON.stringify(state.db, null, 2); |
|
|
const blob = new Blob([dataStr], {type: 'application/json'}); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `pmc-complete-db-${new Date().toISOString().split('T')[0]}.json`; |
|
|
a.click(); |
|
|
URL.revokeObjectURL(url); |
|
|
ui.showMessage('Database saved!'); |
|
|
}, |
|
|
loadDb: (el) => { |
|
|
const file = el.files[0]; |
|
|
if (!file) return; |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
try { |
|
|
const loadedDb = JSON.parse(e.target.result); |
|
|
if (loadedDb.staff && loadedDb.students) { |
|
|
state.db = loadedDb; |
|
|
if(!state.db.subjects) state.db.subjects = []; |
|
|
if(!state.db.timetable) state.db.timetable = {}; |
|
|
ui.showMessage('Database loaded successfully!'); |
|
|
document.getElementById('save-db-btn').classList.remove('hidden'); |
|
|
} else { ui.showMessage('Invalid DB file.', true); } |
|
|
} catch (err) { ui.showMessage('Error parsing DB file.', true); } |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
}, |
|
|
register: () => { |
|
|
if (!state.db) return ui.showMessage('Load a database first.', true); |
|
|
const username = document.getElementById('register-username').value; |
|
|
const email = document.getElementById('register-email').value; |
|
|
const department = document.getElementById('register-department').value; |
|
|
const position = document.getElementById('register-position').value; |
|
|
const password = document.getElementById('register-password').value; |
|
|
|
|
|
if (!username || !email || !department || !position || !password) return ui.showMessage('All fields are required.', true); |
|
|
if (state.db.staff.find(s => s.username === username)) return ui.showMessage('Username already exists.', true); |
|
|
|
|
|
state.db.staff.push({ id: `staff-${Date.now()}`, username, email, department, position, password }); |
|
|
ui.showMessage('Staff registered! Please save the database.'); |
|
|
ui.render(); |
|
|
}, |
|
|
login: () => { |
|
|
if (!state.db) return ui.showMessage('Load a database first.', true); |
|
|
const username = document.getElementById('login-username').value; |
|
|
const password = document.getElementById('login-password').value; |
|
|
const staff = state.db.staff.find(s => s.username === username && s.password === password); |
|
|
if (staff) { |
|
|
state.currentStaff = staff; |
|
|
logic.switchView('department'); |
|
|
} else { ui.showMessage('Invalid credentials.', true); } |
|
|
}, |
|
|
logout: () => { |
|
|
state.currentStaff = null; |
|
|
state.selectedDept = null; |
|
|
state.selectedYear = null; |
|
|
logic.switchView('login'); |
|
|
}, |
|
|
selectDept: (el) => { |
|
|
state.selectedDept = el.dataset.dept; |
|
|
logic.switchView('year'); |
|
|
}, |
|
|
selectYear: (el) => { |
|
|
state.selectedYear = el.dataset.year; |
|
|
logic.switchView('attendanceEntry'); |
|
|
}, |
|
|
addStudent: () => { |
|
|
if (!state.selectedDept || !state.selectedYear) return ui.showMessage('Select class from Home first.', true); |
|
|
const name = document.getElementById('student-name-input').value; |
|
|
const regNo = document.getElementById('student-regno-input').value; |
|
|
if (!name || !regNo) return ui.showMessage('Name and Register No. are required.', true); |
|
|
if (state.db.students.find(s => s.regNo.toLowerCase() === regNo.toLowerCase())) return ui.showMessage('Register number already exists.', true); |
|
|
|
|
|
state.db.students.push({ id: `student-${Date.now()}`, name, regNo, department: state.selectedDept, year: state.selectedYear, attendance: {} }); |
|
|
ui.showMessage('Student added. Remember to save the database!'); |
|
|
ui.render(); |
|
|
}, |
|
|
addSubject: () => { |
|
|
const name = document.getElementById('subject-name-input').value.trim(); |
|
|
if (!name) return ui.showMessage('Subject name cannot be empty.', true); |
|
|
state.db.subjects.push({ id: `sub-${Date.now()}`, name, staffId: state.currentStaff.id }); |
|
|
ui.showMessage('Subject added. Remember to save the database!'); |
|
|
ui.render(); |
|
|
}, |
|
|
saveTimetable: () => { |
|
|
if (!state.db.timetable[state.selectedDept]) state.db.timetable[state.selectedDept] = {}; |
|
|
if (!state.db.timetable[state.selectedDept][state.selectedYear]) state.db.timetable[state.selectedDept][state.selectedYear] = {}; |
|
|
|
|
|
document.querySelectorAll('.timetable-select').forEach(select => { |
|
|
const day = select.dataset.day; |
|
|
const hour = select.dataset.hour; |
|
|
const subjectId = select.value; |
|
|
if (!state.db.timetable[state.selectedDept][state.selectedYear][day]) { |
|
|
state.db.timetable[state.selectedDept][state.selectedYear][day] = {}; |
|
|
} |
|
|
if (subjectId) { |
|
|
state.db.timetable[state.selectedDept][state.selectedYear][day][hour] = subjectId; |
|
|
} else { |
|
|
delete state.db.timetable[state.selectedDept][state.selectedYear][day][hour]; |
|
|
} |
|
|
}); |
|
|
ui.showMessage('Timetable saved. Remember to save the database!'); |
|
|
}, |
|
|
submitAttendance: () => { |
|
|
const date = document.getElementById('attendance-date').value; |
|
|
const hour = document.getElementById('attendance-hour').value; |
|
|
const { subjectId } = logic.getScheduledSubject(); |
|
|
|
|
|
const absentCheckboxes = document.querySelectorAll('#attendance-student-list input[type="checkbox"]:checked'); |
|
|
const absentRegNos = Array.from(absentCheckboxes).map(cb => cb.dataset.regno); |
|
|
|
|
|
const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear); |
|
|
studentsInClass.forEach(student => { |
|
|
if (!student.attendance[date]) student.attendance[date] = {}; |
|
|
student.attendance[date][hour] = { status: absentRegNos.includes(student.regNo) ? 'A' : 'P', subjectId }; |
|
|
}); |
|
|
ui.showMessage(`Attendance for Hour ${hour} recorded. Save DB to persist.`); |
|
|
}, |
|
|
selectPeriod: (el) => { |
|
|
document.querySelectorAll('.period-btn').forEach(b => b.className = 'period-btn flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg'); |
|
|
el.className = 'period-btn flex-1 bg-purple-800 text-white py-2 rounded-lg'; |
|
|
logic.generateReport(el.dataset.period); |
|
|
}, |
|
|
shareReport: () => { |
|
|
const periodEl = document.querySelector('.period-btn.bg-purple-800'); |
|
|
if (!periodEl) return ui.showMessage('Please generate a report first.', true); |
|
|
|
|
|
const hod = state.db.staff.find(s => s.department === state.selectedDept && s.position === 'HOD'); |
|
|
const advisor = state.db.staff.find(s => s.department === state.selectedDept && s.position === 'Class Advisor'); |
|
|
const emails = [hod?.email, advisor?.email].filter(Boolean); |
|
|
if(emails.length === 0) return ui.showMessage('No HOD or Advisor email found for this department.', true); |
|
|
|
|
|
|
|
|
ui.showMessage(`This would open an email to: ${emails.join(', ')}`, false); |
|
|
}, |
|
|
downloadReport: () => { |
|
|
if (!state.db || !state.selectedDept || !state.selectedYear) return ui.showMessage('Select a class first.', true); |
|
|
const studentsInClass = state.db.students.filter(s => s.department === state.selectedDept && s.year == state.selectedYear); |
|
|
if (studentsInClass.length === 0) return ui.showMessage('No students in this class.', true); |
|
|
|
|
|
let csvContent = "data:text/csv;charset=utf-8,Date,Hour,Register Number,Name,Department,Year,Subject,Status\r\n"; |
|
|
|
|
|
studentsInClass.forEach(student => { |
|
|
Object.keys(student.attendance).sort().forEach(date => { |
|
|
Object.keys(student.attendance[date]).sort((a,b) => a-b).forEach(hour => { |
|
|
const record = student.attendance[date][hour]; |
|
|
const subject = (state.db.subjects || []).find(s => s.id === record.subjectId); |
|
|
const subjectName = subject ? subject.name.replace(/,/g, '') : 'General'; |
|
|
const status = record.status === 'P' ? 'Present' : 'Absent'; |
|
|
let row = [date, hour, student.regNo, student.name.replace(/,/g, ''), student.department, student.year, subjectName, status].join(','); |
|
|
csvContent += row + '\r\n'; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
const encodedUri = encodeURI(csvContent); |
|
|
const link = document.createElement("a"); |
|
|
link.setAttribute("href", encodedUri); |
|
|
link.setAttribute("download", `Full_Report_${state.selectedDept}_${state.selectedYear}yr.csv`); |
|
|
document.body.appendChild(link); |
|
|
link.click(); |
|
|
document.body.removeChild(link); |
|
|
}, |
|
|
analyzeStudent: async (el) => { |
|
|
const studentId = el.dataset.studentid; |
|
|
const student = state.db.students.find(s => s.id === studentId); |
|
|
if (!student) return; |
|
|
|
|
|
ui.showModal('<div class="flex justify-center items-center p-8"><div class="loader"></div></div>'); |
|
|
|
|
|
const period = document.querySelector('.period-btn.bg-purple-800').dataset.period; |
|
|
const { startDate, endDate } = util.getDateRange(period); |
|
|
|
|
|
let absentDetails = []; |
|
|
Object.keys(student.attendance).forEach(dateStr => { |
|
|
const recordDate = new Date(dateStr); |
|
|
if (recordDate >= startDate && recordDate <= endDate) { |
|
|
const hours = student.attendance[dateStr]; |
|
|
Object.keys(hours).forEach(hour => { |
|
|
if (hours[hour].status === 'A') { |
|
|
const subject = (state.db.subjects || []).find(s => s.id === hours[hour].subjectId); |
|
|
absentDetails.push(`- On ${dateStr} for Hour ${hour} (Subject: ${subject ? subject.name : 'General'})`); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
const prompt = `Analyze the attendance of a student named ${student.name} for the selected period. Here is the list of their absences:\n${absentDetails.length > 0 ? absentDetails.join('\n') : 'This student has no absences in this period.'}\n\nBased on this data, write a concise, professional summary suitable for a teacher or parent. If attendance is good, provide positive reinforcement. If attendance is poor (more than 3 absences), express concern and suggest monitoring. Start the summary with the student's name. Keep it to 2-3 short paragraphs.`; |
|
|
|
|
|
const analysis = await logic.callGeminiAPI(prompt); |
|
|
ui.showModal(`<p>${analysis.replace(/\n/g, '<br>')}</p>`); |
|
|
}, |
|
|
closeModal: () => ui.hideModal(), |
|
|
}; |
|
|
|
|
|
|
|
|
const util = { |
|
|
getYearSuffix: (year) => { |
|
|
if (year == 1) return 'st'; if (year == 2) return 'nd'; if (year == 3) return 'rd'; return 'th'; |
|
|
}, |
|
|
capitalize: (s) => s.charAt(0).toUpperCase() + s.slice(1), |
|
|
getViewTitle: (view) => { |
|
|
const titles = { department: 'Select Department', year: state.selectedDept || 'Select Year', studentManagement: 'Manage Students', attendanceEntry: 'Take Attendance', reports: 'Reports & Analytics', manage: 'Management', subjects: 'My Subjects', timetable: 'Set Timetable', profile: 'My Profile', dbManager: 'Database Settings' }; |
|
|
return titles[view] || 'Attendance'; |
|
|
}, |
|
|
getDateRange: (period) => { |
|
|
const today = new Date(); |
|
|
let startDate = new Date(today); |
|
|
let endDate = new Date(today); |
|
|
startDate.setHours(0, 0, 0, 0); |
|
|
endDate.setHours(23, 59, 59, 999); |
|
|
|
|
|
if (period === 'week') { |
|
|
startDate.setDate(today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1)); |
|
|
} else if (period === 'month') { |
|
|
startDate = new Date(today.getFullYear(), today.getMonth(), 1); |
|
|
} |
|
|
return { startDate, endDate }; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.body.addEventListener('click', (e) => { |
|
|
let target = e.target; |
|
|
while(target && target !== document.body) { |
|
|
const action = target.dataset.action; |
|
|
const view = target.dataset.view; |
|
|
const period = target.dataset.period; |
|
|
if (action && actions[action]) { e.preventDefault(); actions[action](target); return; } |
|
|
if (view && actions.switchView) { e.preventDefault(); actions.switchView(target); return; } |
|
|
if (period && actions.selectPeriod) { e.preventDefault(); actions.selectPeriod(target); return; } |
|
|
target = target.parentElement; |
|
|
} |
|
|
}); |
|
|
|
|
|
document.body.addEventListener('change', (e) => { |
|
|
if (e.target.id === 'load-db-input') actions.loadDb(e.target); |
|
|
if (e.target.id === 'attendance-hour') ui.render(); |
|
|
}); |
|
|
|
|
|
|
|
|
logic.switchView('login'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
