\n \n \n

{activeTab === 'student' ? 'Student' : 'Teacher'} {isLogin ? 'Login' : 'Signup'}

\n {error &&

{error}

}\n \n

\n );\n}\n\n// Teacher Dashboard Component\nfunction TeacherDashboard() {\n const [students, setStudents] = useState([]);\n const [courses, setCourses] = useState([]);\n const [selectedStudent, setSelectedStudent] = useState('');\n const [selectedCourse, setSelectedCourse] = useState('');\n const [grade, setGrade] = useState('');\n const [semester, setSemester] = useState('');\n const [error, setError] = useState('');\n const [message, setMessage] = useState('');\n\n useEffect(() => {\n async function fetchDashboardData() {\n try {\n const [studentsResponse, coursesResponse] = await Promise.all([\n fetch('/teacher-students'),\n fetch('/teacher-courses')\n ]);\n\n if (studentsResponse.ok && coursesResponse.ok) {\n const studentsData = await studentsResponse.json();\n const coursesData = await coursesResponse.json();\n setStudents(studentsData);\n setCourses(coursesData);\n } else {\n setError('Failed to fetch dashboard data');\n }\n } catch (err) {\n setError('Network error. Please try again.');\n }\n }\n\n fetchDashboardData();\n }, []);\n\n const handleSubmitGrade = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch('/enter-grades', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n studentId: selectedStudent,\n courseId: selectedCourse,\n grade: parseFloat(grade),\n semester\n })\n });\n\n if (response.ok) {\n setMessage('Grade entered successfully');\n setSelectedStudent('');\n setSelectedCourse('');\n setGrade('');\n setSemester('');\n } else {\n const errorData = await response.json();\n setError(errorData.message);\n }\n } catch (err) {\n setError('Failed to enter grade');\n }\n };\n\n return (\n

Teacher Dashboard

\n {error &&

{error}

}\n {message &&

{message}

}\n \n \n

\n );\n}\n\nfunction client() {\n const path = window.location.pathname;\n \n if (path === '/') {\n createRoot(document.getElementById(\"root\")).render();\n } else if (path === '/teacher-dashboard') {\n createRoot(document.getElementById(\"root\")).render();\n }\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"studentRecordBackend\";\n\n // Robust table creation with error handling\n try {\n // Users table with initial admin user\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL,\n role TEXT NOT NULL,\n full_name TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n is_free_account INTEGER DEFAULT 1\n )\n `);\n\n // Courses table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_courses (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n course_code TEXT NOT NULL,\n course_name TEXT NOT NULL\n )\n `);\n\n // Grades table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_grades (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n student_id INTEGER NOT NULL,\n course_id INTEGER NOT NULL,\n grade REAL NOT NULL,\n semester TEXT NOT NULL,\n FOREIGN KEY(student_id) REFERENCES ${KEY}_users(id),\n FOREIGN KEY(course_id) REFERENCES ${KEY}_courses(id)\n )\n `);\n\n // Seed initial courses if not exists\n const courseCheck = await sqlite.execute(`\n SELECT COUNT(*) as count FROM ${KEY}_courses\n `);\n\n if (courseCheck.rows[0].count === 0) {\n await sqlite.execute(`\n INSERT INTO ${KEY}_courses \n (course_code, course_name) \n VALUES \n ('CS101', 'Introduction to Computer Science'),\n ('MATH201', 'Calculus I'),\n ('ENG102', 'English Composition')\n `);\n }\n } catch (error) {\n console.error('Database initialization error:', error);\n return new Response(JSON.stringify({\n error: 'Database initialization failed',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const url = new URL(request.url);\n\n // Student Signup\n if (url.pathname === '/student-signup' && request.method === 'POST') {\n try {\n const body = await request.json();\n const { username, password, fullName } = body;\n\n // Check if username already exists\n const existingUser = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ?`, \n [username]\n );\n\n if (existingUser.rows.length > 0) {\n return new Response(JSON.stringify({ \n message: 'Username already exists' \n }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Create student account\n await sqlite.execute(`\n INSERT INTO ${KEY}_users \n (username, password, role, full_name, is_free_account) \n VALUES (?, ?, 'student', ?, 1)\n `, [username, password, fullName]);\n\n return new Response(JSON.stringify({ \n message: 'Signup successful', \n role: 'student' \n }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('Student signup error:', error);\n return new Response(JSON.stringify({\n error: 'Signup process failed',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Teacher Signup\n if (url.pathname === '/teacher-signup' && request.method === 'POST') {\n try {\n const body = await request.json();\n const { username, password, fullName } = body;\n\n // Check if username already exists\n const existingUser = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ?`, \n [username]\n );\n\n if (existingUser.rows.length > 0) {\n return new Response(JSON.stringify({ \n message: 'Username already exists' \n }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Create teacher account\n await sqlite.execute(`\n INSERT INTO ${KEY}_users \n (username, password, role, full_name, is_free_account) \n VALUES (?, ?, 'teacher', ?, 1)\n `, [username, password, fullName]);\n\n return new Response(JSON.stringify({ \n message: 'Signup successful', \n role: 'teacher' \n }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('Teacher signup error:', error);\n return new Response(JSON.stringify({\n error: 'Signup process failed',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Student Login\n if (url.pathname === '/student-login' && request.method === 'POST') {\n try {\n const body = await request.json();\n const { username, password } = body;\n\n const userResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ? AND password = ? AND role = 'student'`, \n [username, password]\n );\n\n if (userResult.rows.length > 0) {\n const token = generateToken();\n return new Response(JSON.stringify({ \n message: 'Login successful', \n role: 'student' \n }), {\n status: 200,\n headers: {\n 'Content-Type': 'application/json',\n 'Set-Cookie': `session=${token}; HttpOnly; Path=/; SameSite=Strict`\n }\n });\n } else {\n return new Response(JSON.stringify({ message: 'Invalid credentials' }), { \n status: 401,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n } catch (error) {\n console.error('Student login error:', error);\n return new Response(JSON.stringify({\n error: 'Login process failed',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Teacher Login\n if (url.pathname === '/teacher-login' && request.method === 'POST') {\n try {\n const body = await request.json();\n const { username, password } = body;\n\n const userResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ? AND password = ? AND role = 'teacher'`, \n [username, password]\n );\n\n if (userResult.rows.length > 0) {\n const token = generateToken();\n return new Response(JSON.stringify({ \n message: 'Login successful', \n role: 'teacher' \n }), {\n status: 200,\n headers: {\n 'Content-Type': 'application/json',\n 'Set-Cookie': `session=${token}; HttpOnly; Path=/; SameSite=Strict`\n }\n });\n } else {\n return new Response(JSON.stringify({ message: 'Invalid credentials' }), { \n status: 401,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n } catch (error) {\n console.error('Teacher login error:', error);\n return new Response(JSON.stringify({\n error: 'Login process failed',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Teacher Students List\n if (url.pathname === '/teacher-students' && request.method === 'GET') {\n try {\n const studentsResult = await sqlite.execute(`\n SELECT id, full_name FROM ${KEY}_users \n WHERE role = 'student'\n `);\n\n return new Response(JSON.stringify(studentsResult.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('Fetch students error:', error);\n return new Response(JSON.stringify({\n error: 'Failed to fetch students',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Teacher Courses List\n if (url.pathname === '/teacher-courses' && request.method === 'GET') {\n try {\n const coursesResult = await sqlite.execute(`\n SELECT id, course_code, course_name FROM ${KEY}_courses\n `);\n\n return new Response(JSON.stringify(coursesResult.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('Fetch courses error:', error);\n return new Response(JSON.stringify({\n error: 'Failed to fetch courses',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Enter Grades\n if (url.pathname === '/enter-grades' && request.method === 'POST') {\n try {\n const body = await request.json();\n const { studentId, courseId, grade, semester } = body;\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_grades (student_id, course_id, grade, semester)\n VALUES (?, ?, ?, ?)\n `, [studentId, courseId, grade, semester]);\n\n return new Response(JSON.stringify({ \n message: 'Grades entered successfully' \n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('Enter grades error:', error);\n return new Response(JSON.stringify({\n error: 'Failed to enter grades',\n details: error.message\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Root route - Authentication Page\n if (url.pathname === '/' && request.method === 'GET') {\n return new Response(`\n \n \n Academic Record System\n \n \n \n \n

\n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n // Teacher Dashboard route\n if (url.pathname === '/teacher-dashboard' && request.method === 'GET') {\n return new Response(`\n \n \n Teacher Dashboard\n \n \n \n \n

\n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n // Fallback response\n return new Response('Not Found', { status: 404 });\n}\n\nconst authCSS = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 400px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n.auth-container {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n.tab-navigation {\n display: flex;\n border-bottom: 1px solid #ddd;\n}\n.tab-navigation button {\n flex: 1;\n padding: 10px;\n border: none;\n background: #f4f4f4;\n cursor: pointer;\n}\n.tab-navigation button.active {\n background: #007bff;\n color: white;\n}\n.auth-form {\n padding: 20px;\n}\nform {\n display: flex;\n flex-direction: column;\n}\ninput, button {\n margin: 10px 0;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\nbutton {\n background-color: #007bff;\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #0056b3;\n}\n`;\n\nconst teacherDashboardCSS = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n.teacher-dashboard {\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\nform {\n display: flex;\n flex-direction: column;\n}\nselect, input, button {\n margin: 10px 0;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\nbutton {\n background-color: #007bff;\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #0056b3;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/user04/studentRecordBackend/code/main.tsx","extension","actionData","errors"]

{activeTab === 'student' ? 'Student' : 'Teacher'} {isLogin ? 'Login' : 'Signup'}

Teacher Dashboard

Enter Student Grades