/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function App() { const [view, setView] = useState("login"); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [fullName, setFullName] = useState(""); const [attendanceList, setAttendanceList] = useState([]); const [monthlyStats, setMonthlyStats] = useState(null); const [currentUser, setCurrentUser] = useState(null); const [userRegistrationList, setUserRegistrationList] = useState([]); const [dateWiseAttendance, setDateWiseAttendance] = useState([]); const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0]); const [adminView, setAdminView] = useState("user-list"); const handleRegistration = async (e) => { e.preventDefault(); try { const response = await fetch("/register", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ fullName, username, password, registrationDate: new Date().toISOString().split("T")[0], }), }); const result = await response.json(); if (result.success) { alert("Registration successful! Please login."); setView("login"); } else { alert(result.message); } } catch (error) { alert("Registration failed. Please try again."); } }; const handleLogin = async (e) => { e.preventDefault(); // Special handling for admin login if (username === "admin" && password === "admin") { setCurrentUser({ username: "admin", fullName: "Admin" }); setView("admin-dashboard"); await fetchUserRegistrationList(); await fetchDateWiseAttendance(selectedDate); return; } try { const response = await fetch("/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }), }); const result = await response.json(); if (result.success) { setCurrentUser(result.user); setView("attendance"); await fetchAttendanceList(); await fetchMonthlyStats(); } else { alert(result.message); } } catch (error) { alert("Login failed. Please try again."); } }; const markAttendance = async (status) => { try { const response = await fetch("/mark-attendance", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username: currentUser.username, status, date: new Date().toISOString().split("T")[0], time: new Date().toLocaleTimeString(), }), }); const result = await response.json(); if (result.success) { await fetchAttendanceList(); await fetchMonthlyStats(); alert(`Attendance marked as ${status}`); } else { alert(result.message); } } catch (error) { alert("Failed to mark attendance. Please try again."); } }; const fetchAttendanceList = async () => { try { const response = await fetch("/attendance-list"); const list = await response.json(); setAttendanceList(list); } catch (error) { console.error("Failed to fetch attendance list"); } }; const fetchMonthlyStats = async () => { try { const response = await fetch("/monthly-stats"); const stats = await response.json(); setMonthlyStats(stats); } catch (error) { console.error("Failed to fetch monthly stats"); } }; const fetchUserRegistrationList = async () => { try { const response = await fetch("/user-registration-list"); const list = await response.json(); setUserRegistrationList(list); } catch (error) { console.error("Failed to fetch user registration list"); } }; const fetchDateWiseAttendance = async (date) => { try { const response = await fetch(`/date-wise-attendance?date=${date}`); const list = await response.json(); setDateWiseAttendance(list); } catch (error) { console.error("Failed to fetch date-wise attendance"); } }; const deleteUser = async (username) => { try { const response = await fetch("/delete-user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username }), }); const result = await response.json(); if (result.success) { await fetchUserRegistrationList(); alert("User deleted successfully"); } else { alert(result.message); } } catch (error) { alert("Failed to delete user. Please try again."); } }; const handleLogout = () => { setCurrentUser(null); setView("login"); }; const renderAdminDashboard = () => { return (

🛡️ Admin Dashboard

{adminView === "user-list" && (

User Registration List

{userRegistrationList.map((user, index) => ( ))}

Full Name	Username	Registration Date	Action
{user.fullName}	{user.username}	{user.registrationDate}

)} {adminView === "attendance-report" && (

Date-wise Attendance

{ setSelectedDate(e.target.value); fetchDateWiseAttendance(e.target.value); }} style={{ marginBottom: "15px" }} />

Total Users: {dateWiseAttendance.length}

Present: {dateWiseAttendance.filter(entry => entry.status === "Present").length} | Absent: {dateWiseAttendance.filter(entry => entry.status === "Absent").length}

{dateWiseAttendance.map((entry, index) => ( ))}

Name	Status	Time
{entry.fullName}	{entry.status}	{entry.time}

)}

); }; return (

🚔 Police HQ Attendance System

{view === "login" && ( )} {view === "register" && ( )} {view === "attendance" && currentUser && (

Welcome, {currentUser.fullName}

{monthlyStats && (

Monthly Attendance Summary

📅 Total Working Days: {monthlyStats.totalWorkingDays}

✅ Present Days: {monthlyStats.presentDays}

❌ Absent Days: {monthlyStats.absentDays}

📊 Attendance Percentage: {monthlyStats.attendancePercentage.toFixed(2)}%

)}

Mark Today's Attendance

Daily Attendance List

{attendanceList.map((entry, index) => ( ))}

Name	Status	Date	Time
{entry.fullName}	{entry.status}	{entry.date}	{entry.time}

)} {view === "admin-dashboard" && renderAdminDashboard()}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 7; // Create Users Table await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, fullName TEXT NOT NULL, username TEXT UNIQUE NOT NULL, password TEXT NOT NULL, registrationDate TEXT NOT NULL ) `); // Create Attendance Table await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_attendance_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, fullName TEXT NOT NULL, status TEXT NOT NULL, date TEXT NOT NULL, time TEXT NOT NULL, UNIQUE(username, date) ) `); // Handle POST Requests if (request.method === "POST") { const body = await request.json(); // User Registration if (request.url.includes("/register")) { try { await sqlite.execute( `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} (fullName, username, password, registrationDate) VALUES (?, ?, ?, ?)`, [body.fullName, body.username, body.password, body.registrationDate], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response( JSON.stringify({ success: false, message: "Username already exists", }), { headers: { "Content-Type": "application/json" }, }, ); } } // User Login if (request.url.includes("/login")) { const result = await sqlite.execute( `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ? AND password = ?`, [body.username, body.password], ); if (result.rows.length > 0) { return new Response( JSON.stringify({ success: true, user: result.rows[0], }), { headers: { "Content-Type": "application/json" }, }, ); } else { return new Response( JSON.stringify({ success: false, message: "Invalid credentials", }), { headers: { "Content-Type": "application/json" }, }, ); } } // Mark Attendance if (request.url.includes("/mark-attendance")) { try { const user = await sqlite.execute( `SELECT fullName FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ?`, [body.username], ); await sqlite.execute( `INSERT INTO ${KEY}_attendance_${SCHEMA_VERSION} (username, fullName, status, date, time) VALUES (?, ?, ?, ?, ?)`, [body.username, user.rows[0].fullName, body.status, body.date, body.time], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response( JSON.stringify({ success: false, message: "Attendance already marked for today", }), { headers: { "Content-Type": "application/json" }, }, ); } } // Delete User if (request.url.includes("/delete-user")) { await sqlite.execute( `DELETE FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ?`, [body.username], ); await sqlite.execute( `DELETE FROM ${KEY}_attendance_${SCHEMA_VERSION} WHERE username = ?`, [body.username], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } } // Fetch User Registration List if (request.url.includes("/user-registration-list")) { const result = await sqlite.execute( `SELECT fullName, username, registrationDate FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username != 'admin' ORDER BY registrationDate DESC`, ); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } // Fetch Date-wise Attendance if (request.url.includes("/date-wise-attendance")) { const url = new URL(request.url); const date = url.searchParams.get("date"); const result = await sqlite.execute( `SELECT fullName, status, time FROM ${KEY}_attendance_${SCHEMA_VERSION} WHERE date = ? ORDER BY time`, [date], ); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } // Fetch Monthly Stats if (request.url.includes("/monthly-stats")) { const currentDate = new Date(); const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); const formattedFirstDay = firstDayOfMonth.toISOString().split("T")[0]; const formattedLastDay = lastDayOfMonth.toISOString().split("T")[0]; const statsResult = await sqlite.execute( ` SELECT COUNT(DISTINCT date) as totalWorkingDays, SUM(CASE WHEN status = 'Present' THEN 1 ELSE 0 END) as presentDays, SUM(CASE WHEN status = 'Absent' THEN 1 ELSE 0 END) as absentDays FROM ${KEY}_attendance_${SCHEMA_VERSION} WHERE date BETWEEN ? AND ? `, [formattedFirstDay, formattedLastDay], ); const stats = statsResult.rows[0]; const attendancePercentage = (stats.presentDays / stats.totalWorkingDays) * 100 || 0; return new Response( JSON.stringify({ totalWorkingDays: stats.totalWorkingDays, presentDays: stats.presentDays, absentDays: stats.absentDays, attendancePercentage, }), { headers: { "Content-Type": "application/json" }, }, ); } // Fetch Attendance List if (request.url.includes("/attendance-list")) { const result = await sqlite.execute( `SELECT DISTINCT fullName, status, date, time FROM ${KEY}_attendance_${SCHEMA_VERSION} WHERE date = ? ORDER BY time`, [new Date().toISOString().split("T")[0]], ); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } // Serve HTML return new Response( ` Police HQ Attendance

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } form { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin: 10px 0; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } `;

devansh_bansal