/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function AttendanceApp() { const [company, setCompany] = useState(''); const [amtType, setAmtType] = useState(''); const [name, setName] = useState(''); const [location, setLocation] = useState(null); const [photoData, setPhotoData] = useState(null); const [cameraActive, setCameraActive] = useState(false); const [errorMessage, setErrorMessage] = useState(''); const videoRef = useRef(null); const canvasRef = useRef(null); // Automatically start camera and track location when component mounts useEffect(() => { // Load saved data from localStorage setCompany(localStorage.getItem('company') || ''); setAmtType(localStorage.getItem('amtType') || ''); setName(localStorage.getItem('name') || ''); // Automatically start camera startCamera(); // Automatically track location trackLocation(); }, []); // Save form data to localStorage const saveToLocalStorage = () => { localStorage.setItem('company', company); localStorage.setItem('amtType', amtType); localStorage.setItem('name', name); }; // Geolocation tracking with improved error handling const trackLocation = () => { setErrorMessage(''); if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition( (position) => { setLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude }); setErrorMessage('Location captured automatically!'); }, (error) => { let errorMsg = "Error getting location"; switch(error.code) { case error.PERMISSION_DENIED: errorMsg = "Location permission denied"; break; case error.POSITION_UNAVAILABLE: errorMsg = "Location information unavailable"; break; case error.TIMEOUT: errorMsg = "Location request timed out"; break; } setErrorMessage(errorMsg); console.error(errorMsg, error); }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 } ); } else { setErrorMessage('Geolocation is not supported by this browser'); } }; // Improved camera start with error handling const startCamera = async () => { setErrorMessage(''); if (!videoRef.current) return; try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', // Prefer front camera width: { ideal: 640 }, height: { ideal: 480 } } }); if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.play(); setCameraActive(true); } } catch (err) { let errorMsg = "Error accessing camera"; if (err.name === 'NotAllowedError') { errorMsg = "Camera permission denied"; } else if (err.name === 'NotFoundError') { errorMsg = "No camera found"; } setErrorMessage(errorMsg); console.error(errorMsg, err); } }; // Capture selfie with improved canvas handling const capturePhoto = () => { if (!videoRef.current || !canvasRef.current) return; const video = videoRef.current; const canvas = canvasRef.current; const context = canvas.getContext('2d'); // Set canvas dimensions to match video canvas.width = video.videoWidth; canvas.height = video.videoHeight; // Capture current video frame context.drawImage(video, 0, 0, canvas.width, canvas.height); // Add timestamp context.font = '16px Arial'; context.fillStyle = 'white'; context.shadowColor = 'black'; context.shadowBlur = 3; const now = new Date(); context.fillText(now.toLocaleTimeString(), 10, 30); // Add location info if (location) { context.fillText(`Lat: ${location.latitude.toFixed(4)}`, 10, 50); context.fillText(`Lon: ${location.longitude.toFixed(4)}`, 10, 70); } // Convert canvas to data URL with reduced quality const photoDataUrl = canvas.toDataURL('image/jpeg', 0.5); setPhotoData(photoDataUrl); setErrorMessage('Photo captured successfully!'); }; // Submit attendance with comprehensive validation const submitAttendance = async () => { // Validate all required fields const validationErrors = []; if (!company) validationErrors.push('Select a company'); if (!amtType) validationErrors.push('Select AMT type'); if (!name.trim()) validationErrors.push('Enter your name'); if (!photoData) validationErrors.push('Capture a photo'); if (!location) validationErrors.push('Get location'); if (validationErrors.length > 0) { setErrorMessage(validationErrors.join(', ')); return; } const attendanceData = { company, amtType, name: name.trim(), location, photoData, timestamp: new Date().toISOString() }; try { const response = await fetch('/submit-attendance', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(attendanceData) }); const result = await response.json(); if (result.success) { setErrorMessage('Attendance submitted successfully!'); // Optional: Reset form or provide additional feedback } else { setErrorMessage(result.error || 'Failed to submit attendance'); } } catch (error) { setErrorMessage('Network error. Please try again.'); console.error('Submission error', error); } }; // Admin dashboard navigation const openAdminDashboard = () => { window.location.href = '/admin-dashboard'; }; return (

Attendance System

{/* Error Message Display */} {errorMessage && (

{errorMessage}

)} {/* Camera Section */}

{/* Form Section */}

{ setName(e.target.value); saveToLocalStorage(); }} className="w-full border p-2 rounded" />

{/* Admin Dashboard Link */}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Import SQLite dynamically const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Ensure attendance table exists await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_attendance ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, company TEXT NOT NULL, amt_type TEXT NOT NULL, photo_data TEXT NOT NULL, latitude REAL NOT NULL, longitude REAL NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Server-side route handling if (request.method === 'POST' && new URL(request.url).pathname === '/submit-attendance') { try { const attendanceData = await request.json(); // Insert attendance record await sqlite.execute(` INSERT INTO ${KEY}_attendance (name, company, amt_type, photo_data, latitude, longitude) VALUES (?, ?, ?, ?, ?, ?) `, [ attendanceData.name, attendanceData.company, attendanceData.amtType, attendanceData.photoData, attendanceData.location.latitude, attendanceData.location.longitude ]); return new Response(JSON.stringify({ success: true, message: 'Attendance recorded successfully' }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ success: false, error: 'Invalid data submission' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } } // Admin dashboard route with advanced features if (new URL(request.url).pathname === '/admin-dashboard') { // Get query parameters for filtering const url = new URL(request.url); const selectedDate = url.searchParams.get('date') || new Date().toISOString().split('T')[0]; // Fetch attendance records for the selected date const attendanceRecords = await sqlite.execute(` SELECT * FROM ${KEY}_attendance WHERE date(timestamp) = ? ORDER BY timestamp DESC `, [selectedDate]); // Calculate attendance summary const companySummary = await sqlite.execute(` SELECT company, COUNT(*) as total_attendance FROM ${KEY}_attendance WHERE date(timestamp) = ? GROUP BY company `, [selectedDate]); // Generate HTML for admin dashboard const dashboardHtml = ` Admin Dashboard

Attendance Management System

Attendance Summary (${selectedDate})

${companySummary.rows.map(summary => `

${summary.company}: ${summary.total_attendance} Attendees

`).join('')}

Total Attendance: ${attendanceRecords.rows.length}

Detailed Attendance Records

${attendanceRecords.rows.map(record => ` `).join('')}

Name	Company	AMT Type	Time	Photo
${record.name}	${record.company}	${record.amt_type}	${new Date(record.timestamp).toLocaleTimeString()}

Back to Attendance

`; return new Response(dashboardHtml, { headers: { 'Content-Type': 'text/html' } }); } // Serve main HTML return new Response(` Attendance System

`, { headers: { 'Content-Type': 'text/html' } }); }

Attendence

Version 2