/** * # Toll Management and Payment System * * This val implements a Toll Management and Payment System with separate interfaces for drivers, toll operators, and administrators. * * ## Features * * - User Authentication: Register and login as a driver, toll operator, or administrator. * - Profile Management: Update user profile information. * - Vehicle Registration: Drivers can register and view their vehicles. * - Transaction History: Drivers can view their recent toll transactions. * - Toll Booth Management: Operators can view and update toll booth statuses. * - Revenue Reporting: Administrators can view revenue reports. * - Traffic Analytics: Administrators can access traffic analytics data. * * ## User Roles * * 1. Driver: Can register vehicles, view transaction history, and manage their profile. * 2. Toll Operator: Can manage toll booth statuses. * 3. Administrator: Can access revenue reports and traffic analytics. * * ## How to Use * * 1. Register an account with your desired role (driver, operator, or admin). * 2. Log in to access your role-specific dashboard. * 3. Navigate through the application using the provided links and forms. * * Note: This is a simplified version of a toll management system and does not include all features of a production-ready application. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { BrowserRouter as Router, Route, Link, Routes, useNavigate } from "https://esm.sh/react-router-dom"; import { jwtDecode } from "https://esm.sh/jwt-decode"; // Main App component function App() { const [user, setUser] = useState(null); useEffect(() => { const token = localStorage.getItem('token'); if (token) { const decodedToken = jwtDecode(token); setUser(decodedToken); } }, []); return (

Toll Management and Payment System

} /> } /> } /> } /> } />

); } // Home component function Home({ user }) { if (!user) { return

Welcome! Please login or register to use the system.

; } switch (user.role) { case 'driver': return ; case 'operator': return ; case 'admin': return ; default: return

Invalid user role

; } } // Login component function Login({ setUser }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const navigate = useNavigate(); const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }), }); if (response.ok) { const { token } = await response.json(); localStorage.setItem('token', token); const decodedToken = jwtDecode(token); setUser(decodedToken); navigate('/'); } else { alert('Login failed'); } }; return ( ); } // Register component function Register() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [role, setRole] = useState('driver'); const navigate = useNavigate(); const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password, role }), }); if (response.ok) { alert('Registration successful. Please login.'); navigate('/login'); } else { alert('Registration failed'); } }; return ( ); } // Profile component function Profile({ user }) { const [name, setName] = useState(user.name || ''); const [phone, setPhone] = useState(user.phone || ''); const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch('/api/profile', { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }, body: JSON.stringify({ name, phone }), }); if (response.ok) { alert('Profile updated successfully'); } else { alert('Profile update failed'); } }; return ( ); } // Logout component function Logout({ setUser }) { const navigate = useNavigate(); useEffect(() => { localStorage.removeItem('token'); setUser(null); navigate('/'); }, []); return

Logging out...

; } // Driver Dashboard component function DriverDashboard({ user }) { const [vehicles, setVehicles] = useState([]); const [transactions, setTransactions] = useState([]); useEffect(() => { fetchVehicles(); fetchTransactions(); }, []); const fetchVehicles = async () => { const response = await fetch('/api/vehicles', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }, }); if (response.ok) { const data = await response.json(); setVehicles(data); } }; const fetchTransactions = async () => { const response = await fetch('/api/transactions', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }, }); if (response.ok) { const data = await response.json(); setTransactions(data); } }; return (

Driver Dashboard

Your Vehicles

{vehicle.make} {vehicle.model} ({vehicle.year})

Recent Transactions

{transaction.date}: {transaction.amount} ({transaction.status})

); } // Operator Dashboard component function OperatorDashboard({ user }) { const [tollBooths, setTollBooths] = useState([]); useEffect(() => { fetchTollBooths(); }, []); const fetchTollBooths = async () => { const response = await fetch('/api/toll-booths', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }, }); if (response.ok) { const data = await response.json(); setTollBooths(data); } }; return (

Operator Dashboard

Toll Booths

{booth.name}: {booth.status}

); } // Admin Dashboard component function AdminDashboard({ user }) { const [revenueReport, setRevenueReport] = useState(null); const [trafficAnalytics, setTrafficAnalytics] = useState(null); useEffect(() => { fetchRevenueReport(); fetchTrafficAnalytics(); }, []); const fetchRevenueReport = async () => { const response = await fetch('/api/revenue-report', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }, }); if (response.ok) { const data = await response.json(); setRevenueReport(data); } }; const fetchTrafficAnalytics = async () => { const response = await fetch('/api/traffic-analytics', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }, }); if (response.ok) { const data = await response.json(); setTrafficAnalytics(data); } }; return (

Admin Dashboard

Revenue Report

{revenueReport && (

Total Revenue: ${revenueReport.totalRevenue}

)}

Traffic Analytics

{trafficAnalytics && (

Peak Hours: {trafficAnalytics.peakHours}

Average Daily Vehicles: {trafficAnalytics.avgDailyVehicles}

)}

); } // Client-side rendering function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Server-side code export default async function server(request: Request): Promise { const { pathname } = new URL(request.url); if (pathname.startsWith('/api/')) { return handleApiRequest(request); } return new Response(` Toll Management and Payment System

`, { headers: { "content-type": "text/html", }, }); } async function handleApiRequest(request: Request): Promise { const { pathname } = new URL(request.url); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { jwtDecode } = await import("https://esm.sh/jwt-decode"); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Initialize database tables await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, email TEXT UNIQUE NOT NULL, password TEXT NOT NULL, role TEXT NOT NULL, name TEXT, phone TEXT ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_vehicles_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER NOT NULL, type TEXT NOT NULL, make TEXT NOT NULL, model TEXT NOT NULL, year INTEGER NOT NULL, FOREIGN KEY (user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id) ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_transactions_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER NOT NULL, vehicle_id INTEGER NOT NULL, amount REAL NOT NULL, date DATETIME DEFAULT CURRENT_TIMESTAMP, status TEXT NOT NULL, FOREIGN KEY (user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id), FOREIGN KEY (vehicle_id) REFERENCES ${KEY}_vehicles_${SCHEMA_VERSION}(id) ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_toll_booths_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, status TEXT NOT NULL, latitude REAL NOT NULL, longitude REAL NOT NULL ) `); switch (pathname) { case '/api/register': return handleRegister(request, sqlite, KEY, SCHEMA_VERSION); case '/api/login': return handleLogin(request, sqlite, KEY, SCHEMA_VERSION); case '/api/profile': return handleProfile(request, sqlite, KEY, SCHEMA_VERSION, jwtDecode); case '/api/vehicles': return handleVehicles(request, sqlite, KEY, SCHEMA_VERSION, jwtDecode); case '/api/transactions': return handleTransactions(request, sqlite, KEY, SCHEMA_VERSION, jwtDecode); case '/api/toll-booths': return handleTollBooths(request, sqlite, KEY, SCHEMA_VERSION, jwtDecode); case '/api/revenue-report': return handleRevenueReport(request, sqlite, KEY, SCHEMA_VERSION, jwtDecode); case '/api/traffic-analytics': return handleTrafficAnalytics(request, sqlite, KEY, SCHEMA_VERSION, jwtDecode); default: return new Response('Not Found', { status: 404 }); } } async function handleRegister(request: Request, sqlite, KEY, SCHEMA_VERSION) { if (request.method !== 'POST') { return new Response('Method Not Allowed', { status: 405 }); } const { email, password, role } = await request.json(); try { await sqlite.execute(` INSERT INTO ${KEY}_users_${SCHEMA_VERSION} (email, password, role) VALUES (?, ?, ?) `, [email, password, role]); return new Response(JSON.stringify({ message: 'User registered successfully' }), { status: 201, headers: { 'Content-Type': 'application/json' }, }); } catch (error) { return new Response(JSON.stringify({ error: 'Registration failed' }), { status: 400, headers: { 'Content-Type': 'application/json' }, }); } } async function handleLogin(request: Request, sqlite, KEY, SCHEMA_VERSION) { if (request.method !== 'POST') { return new Response('Method Not Allowed', { status: 405 }); } const { email, password } = await request.json(); const result = await sqlite.execute(` SELECT id, role FROM ${KEY}_users_${SCHEMA_VERSION} WHERE email = ? AND password = ? `, [email, password]); if (result.rows.length === 0) { return new Response(JSON.stringify({ error: 'Invalid credentials' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const user = result.rows[0]; const token = generateJWT(user); return new Response(JSON.stringify({ token }), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } function generateJWT(user) { // This is a simplified JWT generation. // In a real application, use a proper JWT library and keep the secret secure. const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' })); const payload = btoa(JSON.stringify({ id: user.id, role: user.role })); const signature = btoa('secret'); // Use a secure secret in a real application return `${header}.${payload}.${signature}`; } async function handleProfile(request: Request, sqlite, KEY, SCHEMA_VERSION, jwtDecode) { if (request.method !== 'PUT') { return new Response('Method Not Allowed', { status: 405 }); } const token = request.headers.get('Authorization')?.split(' ')[1]; if (!token) { return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const decodedToken = jwtDecode(token); const { name, phone } = await request.json(); try { await sqlite.execute(` UPDATE ${KEY}_users_${SCHEMA_VERSION} SET name = ?, phone = ? WHERE id = ? `, [name, phone, decodedToken.id]); return new Response(JSON.stringify({ message: 'Profile updated successfully' }), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } catch (error) { return new Response(JSON.stringify({ error: 'Profile update failed' }), { status: 400, headers: { 'Content-Type': 'application/json' }, }); } } async function handleVehicles(request: Request, sqlite, KEY, SCHEMA_VERSION, jwtDecode) { const token = request.headers.get('Authorization')?.split(' ')[1]; if (!token) { return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const decodedToken = jwtDecode(token); const result = await sqlite.execute(` SELECT * FROM ${KEY}_vehicles_${SCHEMA_VERSION} WHERE user_id = ? `, [decodedToken.id]); return new Response(JSON.stringify(result.rows), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } async function handleTransactions(request: Request, sqlite, KEY, SCHEMA_VERSION, jwtDecode) { const token = request.headers.get('Authorization')?.split(' ')[1]; if (!token) { return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const decodedToken = jwtDecode(token); const result = await sqlite.execute(` SELECT * FROM ${KEY}_transactions_${SCHEMA_VERSION} WHERE user_id = ? ORDER BY date DESC LIMIT 10 `, [decodedToken.id]); return new Response(JSON.stringify(result.rows), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } async function handleTollBooths(request: Request, sqlite, KEY, SCHEMA_VERSION, jwtDecode) { const token = request.headers.get('Authorization')?.split(' ')[1]; if (!token) { return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const decodedToken = jwtDecode(token); if (decodedToken.role !== 'operator' && decodedToken.role !== 'admin') { return new Response(JSON.stringify({ error: 'Forbidden' }), { status: 403, headers: { 'Content-Type': 'application/json' }, }); } const result = await sqlite.execute(` SELECT * FROM ${KEY}_toll_booths_${SCHEMA_VERSION} `); return new Response(JSON.stringify(result.rows), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } async function handleRevenueReport(request: Request, sqlite, KEY, SCHEMA_VERSION, jwtDecode) { const token = request.headers.get('Authorization')?.split(' ')[1]; if (!token) { return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const decodedToken = jwtDecode(token); if (decodedToken.role !== 'admin') { return new Response(JSON.stringify({ error: 'Forbidden' }), { status: 403, headers: { 'Content-Type': 'application/json' }, }); } const result = await sqlite.execute(` SELECT SUM(amount) as totalRevenue FROM ${KEY}_transactions_${SCHEMA_VERSION} WHERE date >= date('now', '-30 days') `); return new Response(JSON.stringify(result.rows[0]), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } async function handleTrafficAnalytics(request: Request, sqlite, KEY, SCHEMA_VERSION, jwtDecode) { const token = request.headers.get('Authorization')?.split(' ')[1]; if (!token) { return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' }, }); } const decodedToken = jwtDecode(token); if (decodedToken.role !== 'admin') { return new Response(JSON.stringify({ error: 'Forbidden' }), { status: 403, headers: { 'Content-Type': 'application/json' }, }); } const peakHoursResult = await sqlite.execute(` SELECT strftime('%H:00', date) as hour, COUNT(*) as count FROM ${KEY}_transactions_${SCHEMA_VERSION} GROUP BY hour ORDER BY count DESC LIMIT 1 `); const avgDailyVehiclesResult = await sqlite.execute(` SELECT AVG(daily_count) as avgDailyVehicles FROM ( SELECT COUNT(DISTINCT vehicle_id) as daily_count FROM ${KEY}_transactions_${SCHEMA_VERSION} GROUP BY date(date) ) `); const analytics = { peakHours: peakHoursResult.rows[0].hour, avgDailyVehicles: Math.round(avgDailyVehiclesResult.rows[0].avgDailyVehicles), }; return new Response(JSON.stringify(analytics), { status: 200, headers: { 'Content-Type': 'application/json' }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } header { background-color: #f4f4f4; padding: 1rem; margin-bottom: 2rem; } nav { display: flex; justify-content: space-around; } a { color: #333; text-decoration: none; } a:hover { color: #666; } form { display: flex; flex-direction: column; max-width: 300px; margin: 0 auto; } input, select, button { margin-bottom: 1rem; padding: 0.5rem; } button { background-color: #333; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #666; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 0.5rem; } footer { margin-top: 2rem; text-align: center; font-size: 0.8rem; } `;

prodigiousTanTurtle