9d:I[903690,["/chat-static/_next/static/immutable/chunks/14pq0i28ib_ns.js","/chat-static/_next/static/immutable/chunks/3t8739z7672ik.js","/chat-static/_next/static/immutable/chunks/1111533g95b2t.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/28x4j9l1x0i41.js","/chat-static/_next/static/immutable/chunks/0lhz_ycnf27n4.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/07attxcc59by5.js","/chat-static/_next/static/immutable/chunks/1sxgsb65cunb4.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/1h6-gw2s2yy5z.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/1rf9si_nu5pz6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3bu36_ite-m9_.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/2r5q4x102qqft.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2d3ect6vv16p1.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/3ntzdaq-9be52.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3fgi0dq3-6fop.js","/chat-static/_next/static/immutable/chunks/2kkbdpuwhsn6w.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/4240ugw28g16q.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/0gephxhs8vg3w.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/154-a50a347-r.js","/chat-static/_next/static/immutable/chunks/2oglpve1z7gct.js","/chat-static/_next/static/immutable/chunks/2kmj7xa041uy4.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/2mkwh29apz5uy.js","/chat-static/_next/static/immutable/chunks/0i9hftwkw-l06.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/3-vqv60x4897-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js","/chat-static/_next/static/immutable/chunks/0dsml1c7ceqwi.js","/chat-static/_next/static/immutable/chunks/17j0ox-8t0cob.js"],"ExplicitChatIdProvider"] 9e:I[838238,["/chat-static/_next/static/immutable/chunks/14pq0i28ib_ns.js","/chat-static/_next/static/immutable/chunks/3t8739z7672ik.js","/chat-static/_next/static/immutable/chunks/1111533g95b2t.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/28x4j9l1x0i41.js","/chat-static/_next/static/immutable/chunks/0lhz_ycnf27n4.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/07attxcc59by5.js","/chat-static/_next/static/immutable/chunks/1sxgsb65cunb4.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/1h6-gw2s2yy5z.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/1rf9si_nu5pz6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3bu36_ite-m9_.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/2r5q4x102qqft.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2d3ect6vv16p1.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/3ntzdaq-9be52.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3fgi0dq3-6fop.js","/chat-static/_next/static/immutable/chunks/2kkbdpuwhsn6w.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/4240ugw28g16q.js","/chat-static/_next/static/immutable/chunks/04a8jfjv6v0qb.js","/chat-static/_next/static/immutable/chunks/0gephxhs8vg3w.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/154-a50a347-r.js","/chat-static/_next/static/immutable/chunks/2oglpve1z7gct.js","/chat-static/_next/static/immutable/chunks/2kmj7xa041uy4.js","/chat-static/_next/static/immutable/chunks/0o-tvqrw-60f9.js","/chat-static/_next/static/immutable/chunks/2mkwh29apz5uy.js","/chat-static/_next/static/immutable/chunks/0i9hftwkw-l06.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2rhujd4vukzvn.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/3-vqv60x4897-.js","/chat-static/_next/static/immutable/chunks/0mn-dmkxxrk86.js","/chat-static/_next/static/immutable/chunks/408m_6lxo2us-.js","/chat-static/_next/static/immutable/chunks/0dsml1c7ceqwi.js","/chat-static/_next/static/immutable/chunks/17j0ox-8t0cob.js"],"SWRDataProvider"] a0:[] a1:[["b_r1niucZxSDe",null],["b_lw7R2eex5dQ",null],["b_QG537UXXDsI",null]] a2:[["b_r1niucZxSDe",{"templateVersionId":null,"templateCanonId":null}],["b_lw7R2eex5dQ",{"templateVersionId":null,"templateCanonId":null}],["b_QG537UXXDsI",{"templateVersionId":null,"templateCanonId":null}]] a3:[["b_MIqbANS0RSn","$D2026-01-17T04:18:38.063Z"],["b_ufpIFJmDjer","$D2026-01-17T04:26:28.251Z"],["b_wOwvvzK5VXx","$D2026-01-17T04:27:10.366Z"],["b_ZR7VtZD7dy7","$D2026-01-17T04:33:56.281Z"],["b_6Qudfa3SjdU","$D2026-01-17T04:34:48.463Z"],["b_BbfbM7bAj0N","$D2026-01-17T04:41:27.331Z"],["b_uTzl7WXOtNU","$D2026-01-17T04:42:05.712Z"],["b_AbXmVMUapck","$D2026-01-17T04:47:44.720Z"],["b_mfRgNTyHME2","$D2026-01-17T04:48:30.869Z"],["b_r1niucZxSDe","$D2026-01-17T04:51:03.401Z"],["b_lw7R2eex5dQ","$D2026-01-17T05:03:44.772Z"],["b_QG537UXXDsI","$D2026-01-17T05:44:29.542Z"]] a4:[["b_r1niucZxSDe",false],["b_lw7R2eex5dQ",false],["b_QG537UXXDsI",false]] a5:[["b_r1niucZxSDe",{"deploymentId":"dpl_376eAi5eN5xw8aEEYGojSKPFJMDk"}],["b_lw7R2eex5dQ",{"deploymentId":"dpl_6R4juH6NAfkZYk6JCMN9fcDUEj95"}],["b_QG537UXXDsI",{"deploymentId":"dpl_5diGgwYiiL6X5uWRSau7h2c7eVVm"}]] a6:[["b_r1niucZxSDe",null],["b_lw7R2eex5dQ",null],["b_QG537UXXDsI",null]] a7:[["b_r1niucZxSDe",true],["b_lw7R2eex5dQ",true],["b_QG537UXXDsI",true]] a8:[["b_r1niucZxSDe",true],["b_lw7R2eex5dQ",true],["b_QG537UXXDsI",true]] a9:[] aa:T24627,[V0_FILE]sql:file="scripts/001-setup-database.sql" isMerged="true" -- Sistem Ujian Online Database Schema -- Version 1.0 -- Table: users (Admin, Guru, Siswa) CREATE TABLE IF NOT EXISTS users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nis VARCHAR(50) UNIQUE NOT NULL, nama VARCHAR(255) NOT NULL, password VARCHAR(255) NOT NULL, role VARCHAR(20) NOT NULL DEFAULT 'siswa' CHECK (role IN ('admin', 'guru', 'siswa')), is_locked BOOLEAN DEFAULT FALSE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table: exams (Ujian) CREATE TABLE IF NOT EXISTS exams ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), nama_ujian VARCHAR(255) NOT NULL, jenis_ujian VARCHAR(100) NOT NULL, pelaksanaan_start TIMESTAMP WITH TIME ZONE NOT NULL, pelaksanaan_end TIMESTAMP WITH TIME ZONE NOT NULL, token VARCHAR(20) UNIQUE NOT NULL, durasi_menit INTEGER NOT NULL DEFAULT 60, created_by UUID REFERENCES users(id) ON DELETE SET NULL, is_active BOOLEAN DEFAULT TRUE, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table: questions (Soal) CREATE TABLE IF NOT EXISTS questions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), exam_id UUID REFERENCES exams(id) ON DELETE CASCADE, nomor INTEGER NOT NULL, tipe VARCHAR(30) NOT NULL CHECK (tipe IN ('pilihan_ganda', 'pilihan_ganda_kompleks')), soal TEXT NOT NULL, pilihan JSONB NOT NULL DEFAULT '[]', jawaban_benar JSONB NOT NULL, poin INTEGER DEFAULT 1, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Table: exam_sessions (Sesi Ujian Siswa) CREATE TABLE IF NOT EXISTS exam_sessions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), exam_id UUID REFERENCES exams(id) ON DELETE CASCADE, user_id UUID REFERENCES users(id) ON DELETE CASCADE, started_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), finished_at TIMESTAMP WITH TIME ZONE, is_locked BOOLEAN DEFAULT FALSE, lock_reason TEXT, score DECIMAL(5,2), answers JSONB DEFAULT '{}', UNIQUE(exam_id, user_id) ); -- Table: security_logs (Log Keamanan) CREATE TABLE IF NOT EXISTS security_logs ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), session_id UUID REFERENCES exam_sessions(id) ON DELETE CASCADE, user_id UUID REFERENCES users(id) ON DELETE CASCADE, event_type VARCHAR(50) NOT NULL, event_data JSONB DEFAULT '{}', timestamp TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Insert default admin user (password: adminsija262626 - akan di-hash di aplikasi) INSERT INTO users (nis, nama, password, role) VALUES ('admin', 'Administrator', 'adminsija262626', 'admin') ON CONFLICT (nis) DO NOTHING; -- Enable Row Level Security ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE exams ENABLE ROW LEVEL SECURITY; ALTER TABLE questions ENABLE ROW LEVEL SECURITY; ALTER TABLE exam_sessions ENABLE ROW LEVEL SECURITY; ALTER TABLE security_logs ENABLE ROW LEVEL SECURITY; -- RLS Policies for users table CREATE POLICY "Users can view own profile" ON users FOR SELECT USING (true); CREATE POLICY "Admin can manage all users" ON users FOR ALL USING (true); -- RLS Policies for exams table CREATE POLICY "Anyone can view active exams" ON exams FOR SELECT USING (true); CREATE POLICY "Teachers and admins can manage exams" ON exams FOR ALL USING (true); -- RLS Policies for questions table CREATE POLICY "Anyone can view questions" ON questions FOR SELECT USING (true); CREATE POLICY "Teachers and admins can manage questions" ON questions FOR ALL USING (true); -- RLS Policies for exam_sessions table CREATE POLICY "Users can view own sessions" ON exam_sessions FOR SELECT USING (true); CREATE POLICY "Users can manage own sessions" ON exam_sessions FOR ALL USING (true); -- RLS Policies for security_logs table CREATE POLICY "Admins can view all logs" ON security_logs FOR SELECT USING (true); CREATE POLICY "System can insert logs" ON security_logs FOR INSERT WITH CHECK (true); [V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Server Component context } }, }, }) } [V0_FILE]typescript:file="lib/supabase/proxy.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) await supabase.auth.getUser() return supabaseResponse } [V0_FILE]typescript:file="lib/auth.ts" isMerged="true" import bcrypt from "bcryptjs" import { createClient } from "@/lib/supabase/server" export interface User { id: string nis: string nama: string role: "admin" | "guru" | "siswa" is_locked: boolean } export async function hashPassword(password: string): Promise { return bcrypt.hash(password, 12) } export async function verifyPassword(password: string, hashedPassword: string): Promise { // Check if password is hashed (bcrypt hashes start with $2) if (hashedPassword.startsWith("$2")) { return bcrypt.compare(password, hashedPassword) } // Plain text comparison for initial admin return password === hashedPassword } export async function login(nis: string, password: string): Promise { const supabase = await createClient() const { data: user, error } = await supabase.from("users").select("*").eq("nis", nis).single() if (error || !user) { return null } if (user.is_locked) { throw new Error("Akun Anda terkunci. Hubungi admin.") } const isValid = await verifyPassword(password, user.password) if (!isValid) { return null } // If password was plain text, update to hashed if (!user.password.startsWith("$2")) { const hashedPassword = await hashPassword(password) await supabase.from("users").update({ password: hashedPassword }).eq("id", user.id) } return { id: user.id, nis: user.nis, nama: user.nama, role: user.role, is_locked: user.is_locked, } } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" export interface User { id: string nis: string nama: string role: "admin" | "guru" | "siswa" is_locked: boolean created_at: string updated_at: string } export interface Exam { id: string nama_ujian: string jenis_ujian: string pelaksanaan_start: string pelaksanaan_end: string token: string durasi_menit: number created_by: string is_active: boolean created_at: string updated_at: string } export interface Question { id: string exam_id: string nomor: number tipe: "pilihan_ganda" | "pilihan_ganda_kompleks" soal: string pilihan: string[] jawaban_benar: string | string[] poin: number created_at: string } export interface ExamSession { id: string exam_id: string user_id: string started_at: string finished_at: string | null is_locked: boolean lock_reason: string | null score: number | null answers: Record } export interface SecurityLog { id: string session_id: string user_id: string event_type: string event_data: Record timestamp: string } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/login") } [V0_FILE]typescriptreact:file="components/admin/user-management.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Trash2, Lock, Unlock, UserPlus } from "lucide-react" import type { User } from "@/lib/types" export function UserManagement() { const [users, setUsers] = useState([]) const [loading, setLoading] = useState(true) const [isDialogOpen, setIsDialogOpen] = useState(false) const [newUser, setNewUser] = useState({ nis: "", nama: "", password: "", role: "siswa" as "admin" | "guru" | "siswa", }) useEffect(() => { fetchUsers() }, []) const fetchUsers = async () => { const res = await fetch("/api/admin/users") const data = await res.json() setUsers(data.users || []) setLoading(false) } const handleAddUser = async () => { const res = await fetch("/api/admin/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newUser), }) if (res.ok) { setNewUser({ nis: "", nama: "", password: "", role: "siswa" }) setIsDialogOpen(false) fetchUsers() } } const handleDeleteUser = async (id: string) => { if (!confirm("Apakah Anda yakin ingin menghapus pengguna ini?")) return await fetch(`/api/admin/users/${id}`, { method: "DELETE" }) fetchUsers() } const handleToggleLock = async (id: string, isLocked: boolean) => { await fetch(`/api/admin/users/${id}/lock`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ is_locked: !isLocked }), }) fetchUsers() } const getRoleBadge = (role: string) => { switch (role) { case "admin": return Admin case "guru": return Guru default: return Siswa } } return (

Manajemen Pengguna Kelola akun admin, guru, dan siswa

{loading ? (

Memuat data...

) : ( NIS Nama Role Status Aksi {users.map((user) => ( {user.nis} {user.nama} {getRoleBadge(user.role)} {user.is_locked ? ( Terkunci ) : ( Aktif )}

{user.nis !== "admin" && ( )}

))}

)} ) } [V0_FILE]typescriptreact:file="components/admin/exam-management.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Eye, Trash2 } from "lucide-react" import type { Exam } from "@/lib/types" import Link from "next/link" export function ExamManagement() { const [exams, setExams] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchExams() }, []) const fetchExams = async () => { const res = await fetch("/api/exams") const data = await res.json() setExams(data.exams || []) setLoading(false) } const handleDelete = async (id: string) => { if (!confirm("Apakah Anda yakin ingin menghapus ujian ini?")) return await fetch(`/api/exams/${id}`, { method: "DELETE" }) fetchExams() } const formatDate = (dateStr: string) => { return new Date(dateStr).toLocaleString("id-ID", { dateStyle: "medium", timeStyle: "short", }) } return ( Daftar Ujian Lihat dan kelola semua ujian yang dibuat oleh guru {loading ? (

Memuat data...

) : exams.length === 0 ? (

Belum ada ujian

) : ( Nama Ujian Jenis Pelaksanaan Token Status Aksi {exams.map((exam) => { const now = new Date() const start = new Date(exam.pelaksanaan_start) const end = new Date(exam.pelaksanaan_end) const isActive = now >= start && now <= end const isPast = now > end return ( {exam.nama_ujian} {exam.jenis_ujian}

{formatDate(exam.pelaksanaan_start)}

s/d {formatDate(exam.pelaksanaan_end)}

{exam.token} {isPast ? ( Selesai ) : isActive ? ( Aktif ) : ( Terjadwal )}

) })}

)} ) } [V0_FILE]typescriptreact:file="components/admin/security-logs.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Unlock, RefreshCw } from "lucide-react" interface SecurityLogEntry { id: string session_id: string user_id: string event_type: string event_data: Record timestamp: string user?: { nama: string; nis: string } exam?: { nama_ujian: string } } export function SecurityLogs() { const [logs, setLogs] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchLogs() }, []) const fetchLogs = async () => { setLoading(true) const res = await fetch("/api/admin/security-logs") const data = await res.json() setLogs(data.logs || []) setLoading(false) } const handleUnlock = async (sessionId: string) => { await fetch(`/api/admin/sessions/${sessionId}/unlock`, { method: "POST" }) fetchLogs() } const getEventBadge = (type: string) => { const badges: Record = { tab_switch: { className: "bg-yellow-500/10 text-yellow-400", label: "Tab Switch" }, blur: { className: "bg-orange-500/10 text-orange-400", label: "Window Blur" }, fullscreen_exit: { className: "bg-red-500/10 text-red-400", label: "Exit Fullscreen" }, devtools_detected: { className: "bg-red-500/10 text-red-400", label: "DevTools" }, copy_attempt: { className: "bg-purple-500/10 text-purple-400", label: "Copy Attempt" }, paste_attempt: { className: "bg-purple-500/10 text-purple-400", label: "Paste Attempt" }, keyboard_shortcut: { className: "bg-blue-500/10 text-blue-400", label: "Keyboard Shortcut" }, time_tamper: { className: "bg-red-500/10 text-red-400", label: "Time Tamper" }, minimize_detected: { className: "bg-orange-500/10 text-orange-400", label: "Minimize" }, locked: { className: "bg-red-500/10 text-red-400", label: "Locked" }, } const badge = badges[type] || { className: "bg-slate-500/10 text-slate-400", label: type } return {badge.label} } const formatTime = (dateStr: string) => { return new Date(dateStr).toLocaleString("id-ID", { dateStyle: "short", timeStyle: "medium", }) } return (

Log Keamanan Pantau aktivitas mencurigakan selama ujian

{loading ? (

Memuat data...

) : logs.length === 0 ? (

Belum ada log keamanan

) : ( Waktu Siswa Ujian Event Detail Aksi {logs.map((log) => ( {formatTime(log.timestamp)} {log.user?.nama || "-"}

{log.user?.nis}

{log.exam?.nama_ujian || "-"} {getEventBadge(log.event_type)} {JSON.stringify(log.event_data)} {log.event_type === "locked" && ( )} ))}

)} ) } [V0_FILE]typescriptreact:file="components/admin/score-management.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import type { Exam, ExamSession } from "@/lib/types" interface SessionWithUser extends ExamSession { user?: { nama: string; nis: string } } export function ScoreManagement() { const [exams, setExams] = useState([]) const [selectedExam, setSelectedExam] = useState("") const [sessions, setSessions] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { fetchExams() }, []) useEffect(() => { if (selectedExam) { fetchSessions(selectedExam) } }, [selectedExam]) const fetchExams = async () => { const res = await fetch("/api/exams") const data = await res.json() setExams(data.exams || []) } const fetchSessions = async (examId: string) => { setLoading(true) const res = await fetch(`/api/exams/${examId}/sessions`) const data = await res.json() setSessions(data.sessions || []) setLoading(false) } const formatDate = (dateStr: string | null) => { if (!dateStr) return "-" return new Date(dateStr).toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short", }) } return ( Manajemen Nilai Lihat hasil ujian dan nilai siswa {selectedExam && ( <> {loading ? (

Memuat data...

) : sessions.length === 0 ? (

Belum ada peserta

) : ( NIS Nama Mulai Selesai Status Nilai {sessions.map((session) => ( {session.user?.nis} {session.user?.nama} {formatDate(session.started_at)} {formatDate(session.finished_at)} {session.is_locked ? ( Terkunci ) : session.finished_at ? ( Selesai ) : ( Berlangsung )} {session.score !== null ? session.score.toFixed(1) : "-"} ))}

)} )} ) } [V0_FILE]typescript:file="app/api/admin/users/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" import { hashPassword } from "@/lib/auth" export async function GET() { const supabase = await createClient() const { data: users, error } = await supabase .from("users") .select("id, nis, nama, role, is_locked, created_at") .order("created_at", { ascending: false }) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ users }) } export async function POST(request: Request) { const supabase = await createClient() const { nis, nama, password, role } = await request.json() if (!nis || !nama || !password) { return NextResponse.json({ error: "Data tidak lengkap" }, { status: 400 }) } const hashedPassword = await hashPassword(password) const { data, error } = await supabase .from("users") .insert({ nis, nama, password: hashedPassword, role: role || "siswa", }) .select() .single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ user: data }) } [V0_FILE]typescript:file="app/api/admin/users/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { error } = await supabase.from("users").delete().eq("id", id) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/admin/users/[id]/lock/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { is_locked } = await request.json() const { error } = await supabase.from("users").update({ is_locked }).eq("id", id) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/admin/security-logs/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET() { const supabase = await createClient() const { data: logs, error } = await supabase .from("security_logs") .select(` *, exam_sessions!inner( exam_id, exams(nama_ujian) ) `) .order("timestamp", { ascending: false }) .limit(100) if (error) { // Try simpler query if join fails const { data: simpleLogs, error: simpleError } = await supabase .from("security_logs") .select("*") .order("timestamp", { ascending: false }) .limit(100) if (simpleError) { return NextResponse.json({ error: simpleError.message }, { status: 500 }) } // Fetch user data separately const userIds = [...new Set(simpleLogs?.map((l) => l.user_id) || [])] const { data: users } = await supabase.from("users").select("id, nama, nis").in("id", userIds) const userMap = new Map(users?.map((u) => [u.id, u]) || []) const logsWithUsers = simpleLogs?.map((log) => ({ ...log, user: userMap.get(log.user_id), })) return NextResponse.json({ logs: logsWithUsers }) } return NextResponse.json({ logs }) } [V0_FILE]typescript:file="app/api/admin/sessions/[id]/unlock/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { error } = await supabase.from("exam_sessions").update({ is_locked: false, lock_reason: null }).eq("id", id) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/exams/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" import { cookies } from "next/headers" export async function GET() { const supabase = await createClient() const { data: exams, error } = await supabase.from("exams").select("*").order("created_at", { ascending: false }) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ exams }) } export async function POST(request: Request) { const supabase = await createClient() const cookieStore = await cookies() const session = cookieStore.get("exam_session") if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const user = JSON.parse(session.value) const body = await request.json() // Generate random token const token = Math.random().toString(36).substring(2, 8).toUpperCase() const { data, error } = await supabase .from("exams") .insert({ nama_ujian: body.nama_ujian, jenis_ujian: body.jenis_ujian, pelaksanaan_start: body.pelaksanaan_start, pelaksanaan_end: body.pelaksanaan_end, durasi_menit: body.durasi_menit || 60, token, created_by: user.id, }) .select() .single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ exam: data }) } [V0_FILE]typescript:file="app/api/exams/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { data: exam, error } = await supabase.from("exams").select("*").eq("id", id).single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ exam }) } export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const body = await request.json() const { data, error } = await supabase.from("exams").update(body).eq("id", id).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ exam: data }) } export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { error } = await supabase.from("exams").delete().eq("id", id) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/exams/[id]/questions/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { data: questions, error } = await supabase .from("questions") .select("*") .eq("exam_id", id) .order("nomor", { ascending: true }) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ questions }) } export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const body = await request.json() // Get next question number const { data: existing } = await supabase .from("questions") .select("nomor") .eq("exam_id", id) .order("nomor", { ascending: false }) .limit(1) const nextNomor = existing && existing.length > 0 ? existing[0].nomor + 1 : 1 const { data, error } = await supabase .from("questions") .insert({ exam_id: id, nomor: nextNomor, tipe: body.tipe, soal: body.soal, pilihan: body.pilihan, jawaban_benar: body.jawaban_benar, poin: body.poin || 1, }) .select() .single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ question: data }) } [V0_FILE]typescript:file="app/api/exams/[id]/questions/[questionId]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function PATCH(request: Request, { params }: { params: Promise<{ id: string; questionId: string }> }) { const { questionId } = await params const supabase = await createClient() const body = await request.json() const { data, error } = await supabase.from("questions").update(body).eq("id", questionId).select().single() if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ question: data }) } export async function DELETE(request: Request, { params }: { params: Promise<{ id: string; questionId: string }> }) { const { questionId } = await params const supabase = await createClient() const { error } = await supabase.from("questions").delete().eq("id", questionId) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/exams/[id]/sessions/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const supabase = await createClient() const { data: sessions, error } = await supabase .from("exam_sessions") .select("*") .eq("exam_id", id) .order("started_at", { ascending: false }) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } // Get user info const userIds = [...new Set(sessions?.map((s) => s.user_id) || [])] const { data: users } = await supabase.from("users").select("id, nama, nis").in("id", userIds) const userMap = new Map(users?.map((u) => [u.id, u]) || []) const sessionsWithUsers = sessions?.map((session) => ({ ...session, user: userMap.get(session.user_id), })) return NextResponse.json({ sessions: sessionsWithUsers }) } [V0_FILE]typescriptreact:file="app/guru/exam/[id]/results/page.tsx" isMerged="true" "use client" import { useEffect, useState, use } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Download } from "lucide-react" import type { Exam, ExamSession } from "@/lib/types" import Link from "next/link" interface SessionWithUser extends ExamSession { user?: { nama: string; nis: string } } export default function ResultsPage({ params }: { params: Promise<{ id: string }> }) { const { id: examId } = use(params) const [exam, setExam] = useState(null) const [sessions, setSessions] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchData() }, [examId]) const fetchData = async () => { const [examRes, sessionsRes] = await Promise.all([ fetch(`/api/exams/${examId}`), fetch(`/api/exams/${examId}/sessions`), ]) const examData = await examRes.json() const sessionsData = await sessionsRes.json() setExam(examData.exam) setSessions(sessionsData.sessions || []) setLoading(false) } const formatDate = (dateStr: string | null) => { if (!dateStr) return "-" return new Date(dateStr).toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short", }) } const exportCSV = () => { const headers = ["NIS", "Nama", "Mulai", "Selesai", "Status", "Nilai"] const rows = sessions.map((s) => [ s.user?.nis || "", s.user?.nama || "", formatDate(s.started_at), formatDate(s.finished_at), s.is_locked ? "Terkunci" : s.finished_at ? "Selesai" : "Berlangsung", s.score?.toString() || "-", ]) const csv = [headers, ...rows].map((r) => r.join(",")).join("\n") const blob = new Blob([csv], { type: "text/csv" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `hasil-${exam?.nama_ujian || "ujian"}.csv` a.click() } if (loading) { return (

) } return (

{exam?.nama_ujian}

Hasil Ujian

Daftar Peserta Total: {sessions.length} peserta {sessions.length === 0 ? (

Belum ada peserta

)}

) } [V0_FILE]typescript:file="app/api/siswa/sessions/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function GET(request: Request) { const { searchParams } = new URL(request.url) const userId = searchParams.get("userId") if (!userId) { return NextResponse.json({ error: "User ID required" }, { status: 400 }) } const supabase = await createClient() const { data: sessions, error } = await supabase .from("exam_sessions") .select("*, exams(nama_ujian, jenis_ujian)") .eq("user_id", userId) .order("started_at", { ascending: false }) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ sessions }) } [V0_FILE]typescript:file="app/api/siswa/join-exam/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" import { cookies } from "next/headers" export async function POST(request: Request) { const { token } = await request.json() const cookieStore = await cookies() const sessionCookie = cookieStore.get("exam_session") if (!sessionCookie) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const user = JSON.parse(sessionCookie.value) const supabase = await createClient() // Find exam by token const { data: exam, error: examError } = await supabase .from("exams") .select("*") .eq("token", token.toUpperCase()) .single() if (examError || !exam) { return NextResponse.json({ error: "Token tidak valid" }, { status: 400 }) } // Check if exam is active const now = new Date() const start = new Date(exam.pelaksanaan_start) const end = new Date(exam.pelaksanaan_end) if (now < start) { return NextResponse.json({ error: "Ujian belum dimulai" }, { status: 400 }) } if (now > end) { return NextResponse.json({ error: "Ujian sudah berakhir" }, { status: 400 }) } // Check if user already has a session const { data: existingSession } = await supabase .from("exam_sessions") .select("*") .eq("exam_id", exam.id) .eq("user_id", user.id) .single() if (existingSession) { if (existingSession.is_locked) { return NextResponse.json({ error: "Akun Anda terkunci untuk ujian ini. Hubungi admin." }, { status: 403 }) } if (existingSession.finished_at) { return NextResponse.json({ error: "Anda sudah menyelesaikan ujian ini" }, { status: 400 }) } return NextResponse.json({ session: existingSession, exam }) } // Create new session const { data: newSession, error: sessionError } = await supabase .from("exam_sessions") .insert({ exam_id: exam.id, user_id: user.id, }) .select() .single() if (sessionError) { return NextResponse.json({ error: sessionError.message }, { status: 500 }) } return NextResponse.json({ session: newSession, exam }) } [V0_FILE]typescript:file="app/api/siswa/change-password/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" import { cookies } from "next/headers" import { hashPassword, verifyPassword } from "@/lib/auth" export async function POST(request: Request) { const { currentPassword, newPassword } = await request.json() const cookieStore = await cookies() const sessionCookie = cookieStore.get("exam_session") if (!sessionCookie) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const user = JSON.parse(sessionCookie.value) const supabase = await createClient() // Get current user data const { data: userData, error: userError } = await supabase .from("users") .select("password") .eq("id", user.id) .single() if (userError || !userData) { return NextResponse.json({ error: "User tidak ditemukan" }, { status: 404 }) } // Verify current password const isValid = await verifyPassword(currentPassword, userData.password) if (!isValid) { return NextResponse.json({ error: "Password saat ini salah" }, { status: 400 }) } // Hash new password const hashedPassword = await hashPassword(newPassword) // Update password const { error: updateError } = await supabase.from("users").update({ password: hashedPassword }).eq("id", user.id) if (updateError) { return NextResponse.json({ error: updateError.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/server-time/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { return NextResponse.json({ time: Date.now() }) } [V0_FILE]typescript:file="app/api/siswa/exam-session/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" import { cookies } from "next/headers" export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id: examId } = await params const cookieStore = await cookies() const sessionCookie = cookieStore.get("exam_session") if (!sessionCookie) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const user = JSON.parse(sessionCookie.value) const supabase = await createClient() const { data: session, error } = await supabase .from("exam_sessions") .select("*") .eq("exam_id", examId) .eq("user_id", user.id) .single() if (error) { return NextResponse.json({ session: null }) } return NextResponse.json({ session }) } [V0_FILE]typescript:file="app/api/siswa/security-log/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" import { cookies } from "next/headers" export async function POST(request: Request) { const { session_id, event_type, event_data } = await request.json() const cookieStore = await cookies() const sessionCookie = cookieStore.get("exam_session") if (!sessionCookie) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const user = JSON.parse(sessionCookie.value) const supabase = await createClient() const { error } = await supabase.from("security_logs").insert({ session_id, user_id: user.id, event_type, event_data, }) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/siswa/sessions/[id]/lock/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const { reason } = await request.json() const supabase = await createClient() const { error } = await supabase.from("exam_sessions").update({ is_locked: true, lock_reason: reason }).eq("id", id) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/siswa/sessions/[id]/save/route.ts" isMerged="true" import { NextResponse } from "next/server" import { createClient } from "@/lib/supabase/server" export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) { const { id } = await params const { answers } = await request.json() const supabase = await createClient() const { error } = await supabase.from("exam_sessions").update({ answers }).eq("id", id) if (error) { return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true }) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.0", "bcryptjs": "3.0.3" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]sql:file="scripts/002-fix-policies.sql" isMerged="true" -- Drop existing policies if they exist and recreate them DROP POLICY IF EXISTS "Users can view own profile" ON users; DROP POLICY IF EXISTS "Users can update own profile" ON users; DROP POLICY IF EXISTS "Admins and teachers can view all users" ON users; DROP POLICY IF EXISTS "Admins can manage all users" ON users; DROP POLICY IF EXISTS "Anyone can view active exams" ON exams; DROP POLICY IF EXISTS "Teachers can manage own exams" ON exams; DROP POLICY IF EXISTS "Admins can manage all exams" ON exams; DROP POLICY IF EXISTS "View questions for accessible exams" ON questions; DROP POLICY IF EXISTS "Teachers can manage own exam questions" ON questions; DROP POLICY IF EXISTS "Admins can manage all questions" ON questions; DROP POLICY IF EXISTS "Students can view own sessions" ON exam_sessions; DROP POLICY IF EXISTS "Students can create own sessions" ON exam_sessions; DROP POLICY IF EXISTS "Students can update own sessions" ON exam_sessions; DROP POLICY IF EXISTS "Teachers can view sessions for own exams" ON exam_sessions; DROP POLICY IF EXISTS "Admins can view all sessions" ON exam_sessions; DROP POLICY IF EXISTS "Users can insert own logs" ON security_logs; DROP POLICY IF EXISTS "Admins can view all logs" ON security_logs; -- Recreate policies for users table CREATE POLICY "Users can view own profile" ON users FOR SELECT USING (auth.uid() = id); CREATE POLICY "Users can update own profile" ON users FOR UPDATE USING (auth.uid() = id); CREATE POLICY "Admins and teachers can view all users" ON users FOR SELECT USING ( EXISTS ( SELECT 1 FROM users u WHERE u.id = auth.uid() AND u.role IN ('admin', 'teacher') ) ); CREATE POLICY "Admins can manage all users" ON users FOR ALL USING ( EXISTS ( SELECT 1 FROM users u WHERE u.id = auth.uid() AND u.role = 'admin' ) ); -- Recreate policies for exams table CREATE POLICY "Anyone can view active exams" ON exams FOR SELECT USING (is_active = true OR created_by = auth.uid()); CREATE POLICY "Teachers can manage own exams" ON exams FOR ALL USING (created_by = auth.uid()); CREATE POLICY "Admins can manage all exams" ON exams FOR ALL USING ( EXISTS ( SELECT 1 FROM users u WHERE u.id = auth.uid() AND u.role = 'admin' ) ); -- Recreate policies for questions table CREATE POLICY "View questions for accessible exams" ON questions FOR SELECT USING ( EXISTS ( SELECT 1 FROM exams e WHERE e.id = exam_id AND (e.is_active = true OR e.created_by = auth.uid()) ) ); CREATE POLICY "Teachers can manage own exam questions" ON questions FOR ALL USING ( EXISTS ( SELECT 1 FROM exams e WHERE e.id = exam_id AND e.created_by = auth.uid() ) ); CREATE POLICY "Admins can manage all questions" ON questions FOR ALL USING ( EXISTS ( SELECT 1 FROM users u WHERE u.id = auth.uid() AND u.role = 'admin' ) ); -- Recreate policies for exam_sessions table CREATE POLICY "Students can view own sessions" ON exam_sessions FOR SELECT USING (student_id = auth.uid()); CREATE POLICY "Students can create own sessions" ON exam_sessions FOR INSERT WITH CHECK (student_id = auth.uid()); CREATE POLICY "Students can update own sessions" ON exam_sessions FOR UPDATE USING (student_id = auth.uid()); CREATE POLICY "Teachers can view sessions for own exams" ON exam_sessions FOR SELECT USING ( EXISTS ( SELECT 1 FROM exams e WHERE e.id = exam_id AND e.created_by = auth.uid() ) ); CREATE POLICY "Admins can view all sessions" ON exam_sessions FOR SELECT USING ( EXISTS ( SELECT 1 FROM users u WHERE u.id = auth.uid() AND u.role = 'admin' ) ); -- Recreate policies for security_logs table CREATE POLICY "Users can insert own logs" ON security_logs FOR INSERT WITH CHECK (user_id = auth.uid()); CREATE POLICY "Admins can view all logs" ON security_logs FOR SELECT USING ( EXISTS ( SELECT 1 FROM users u WHERE u.id = auth.uid() AND u.role = 'admin' ) ); -- Make sure admin user exists with proper password -- First check and insert if not exists INSERT INTO users (id, nis, name, email, password_hash, role, class, is_active) SELECT gen_random_uuid(), 'admin', 'Administrator', 'admin@school.com', crypt('adminsija262626', gen_salt('bf')), 'admin', NULL, true WHERE NOT EXISTS ( SELECT 1 FROM users WHERE nis = 'admin' ); [V0_FILE]sql:file="scripts/003-ensure-admin.sql" isMerged="true" -- Script to ensure admin user exists -- This script is safe to run multiple times -- Insert default admin user if not exists INSERT INTO users (nis, nama, password, role) VALUES ('admin', 'Administrator', 'adminsija262626', 'admin') ON CONFLICT (nis) DO NOTHING; -- Verify admin exists SELECT id, nis, nama, role FROM users WHERE role = 'admin'; [V0_FILE]typescript:file="lib/session.ts" isMerged="true" // Session helper untuk client-side const SESSION_KEY = "exam_session_backup" export function saveSessionBackup(token: string) { if (typeof window !== "undefined") { localStorage.setItem(SESSION_KEY, token) // Also set cookie from client side document.cookie = `exam_session=${encodeURIComponent(token)}; path=/; max-age=${60 * 60 * 24}; samesite=lax` } } export function getSessionBackup(): string | null { if (typeof window !== "undefined") { return localStorage.getItem(SESSION_KEY) } return null } export function clearSessionBackup() { if (typeof window !== "undefined") { localStorage.removeItem(SESSION_KEY) document.cookie = "exam_session=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT" } } export async function fetchSessionWithBackup() { const backupToken = getSessionBackup() const headers: HeadersInit = {} if (backupToken) { headers["Authorization"] = `Bearer ${backupToken}` } const res = await fetch("/api/auth/session", { credentials: "include", cache: "no-store", headers, }) return res.json() } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Users, GraduationCap, BookOpen, Shield, LogOut, AlertTriangle, Loader2 } from "lucide-react" import { UserManagement } from "@/components/admin/user-management" import { ExamManagement } from "@/components/admin/exam-management" import { SecurityLogs } from "@/components/admin/security-logs" import { ScoreManagement } from "@/components/admin/score-management" import type { User } from "@/lib/types" import { fetchSessionWithBackup, clearSessionBackup } from "@/lib/session" export default function AdminDashboard() { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const router = useRouter() useEffect(() => { async function checkSession() { try { const data = await fetchSessionWithBackup() if (!data.user) { router.replace("/login") return } if (data.user.role !== "admin") { switch (data.user.role) { case "guru": router.replace("/guru") break case "siswa": router.replace("/siswa") break default: router.replace("/login") } return } setUser(data.user) setLoading(false) } catch { router.replace("/login") } } checkSession() }, [router]) const handleLogout = async () => { clearSessionBackup() await fetch("/api/auth/logout", { method: "POST", credentials: "include" }) router.replace("/login") } if (loading) { return (

Memuat dashboard...

) } return (

Admin Dashboard

Selamat datang, {user?.nama}

Pengguna Ujian Nilai Keamanan

) } [V0_FILE]typescript:file="app/api/auth/logout/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { cookies } from "next/headers" export async function POST() { const cookieStore = await cookies() // Delete the session cookie cookieStore.delete("exam_session") const response = NextResponse.json({ success: true }) // Also clear via response to ensure it's deleted response.cookies.set("exam_session", "", { httpOnly: false, secure: false, sameSite: "lax", maxAge: 0, path: "/", }) return response } [V0_FILE]typescript:file="app/api/auth/login/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { login } from "@/lib/auth" export async function POST(request: Request) { try { const { nis, password } = await request.json() if (!nis || !password) { return NextResponse.json({ error: "NIS dan password harus diisi" }, { status: 400 }) } const user = await login(nis, password) if (!user) { return NextResponse.json({ error: "NIS atau password salah" }, { status: 401 }) } const sessionData = JSON.stringify(user) const response = NextResponse.json({ user, sessionToken: sessionData, }) response.cookies.set("exam_session", sessionData, { httpOnly: false, secure: false, sameSite: "lax", maxAge: 60 * 60 * 24, path: "/", }) return response } catch (error) { const message = error instanceof Error ? error.message : "Login gagal" return NextResponse.json({ error: message }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/auth/session/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { cookies } from "next/headers" export async function GET(request: Request) { try { const cookieStore = await cookies() const sessionCookie = cookieStore.get("exam_session") if (sessionCookie) { try { const user = JSON.parse(sessionCookie.value) return NextResponse.json({ user }) } catch { // Invalid cookie format } } // Fallback to Authorization header const authHeader = request.headers.get("Authorization") if (authHeader?.startsWith("Bearer ")) { try { const token = authHeader.substring(7) const user = JSON.parse(token) return NextResponse.json({ user }) } catch { // Invalid auth header } } return NextResponse.json({ user: null }) } catch { return NextResponse.json({ user: null }) } } export async function POST(request: Request) { try { const { sessionToken } = await request.json() if (!sessionToken) { return NextResponse.json({ error: "No session token" }, { status: 400 }) } const user = JSON.parse(sessionToken) const response = NextResponse.json({ user, success: true }) response.cookies.set("exam_session", sessionToken, { httpOnly: false, secure: false, sameSite: "lax", maxAge: 60 * 60 * 24, path: "/", }) return response } catch { return NextResponse.json({ error: "Failed to set session" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/guru/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BookOpen, ClipboardList, LogOut, Plus, Loader2 } from "lucide-react" import { ExamList } from "@/components/guru/exam-list" import { CreateExam } from "@/components/guru/create-exam" import type { User } from "@/lib/types" import { fetchSessionWithBackup, clearSessionBackup } from "@/lib/session" export default function GuruDashboard() { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const [activeTab, setActiveTab] = useState("exams") const router = useRouter() useEffect(() => { async function checkSession() { try { const data = await fetchSessionWithBackup() if (!data.user) { router.replace("/login") return } if (!["admin", "guru"].includes(data.user.role)) { if (data.user.role === "siswa") { router.replace("/siswa") } else { router.replace("/login") } return } setUser(data.user) setLoading(false) } catch { router.replace("/login") } } checkSession() }, [router]) const handleLogout = async () => { clearSessionBackup() await fetch("/api/auth/logout", { method: "POST", credentials: "include" }) router.replace("/login") } if (loading) { return (

Memuat dashboard...

) } return (

Dashboard Guru

Selamat datang, {user?.nama}

Daftar Ujian Buat Ujian setActiveTab("exams")} />

) } [V0_FILE]typescriptreact:file="app/siswa/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Alert, AlertDescription } from "@/components/ui/alert" import { BookOpen, Key, Lock, LogOut, Settings, Play, Loader2 } from "lucide-react" import type { User, ExamSession } from "@/lib/types" import { fetchSessionWithBackup, clearSessionBackup } from "@/lib/session" interface SessionWithExam extends ExamSession { exams?: { nama_ujian: string; jenis_ujian: string } } export default function SiswaDashboard() { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const [token, setToken] = useState("") const [tokenError, setTokenError] = useState(null) const [tokenLoading, setTokenLoading] = useState(false) const [sessions, setSessions] = useState([]) const [passwordForm, setPasswordForm] = useState({ currentPassword: "", newPassword: "", confirmPassword: "", }) const [passwordError, setPasswordError] = useState(null) const [passwordSuccess, setPasswordSuccess] = useState(false) const router = useRouter() const fetchSessions = async (userId: string) => { const res = await fetch(`/api/siswa/sessions?userId=${userId}`) const data = await res.json() setSessions(data.sessions || []) } useEffect(() => { async function checkSession() { try { const data = await fetchSessionWithBackup() if (!data.user) { router.replace("/login") return } if (data.user.role !== "siswa") { switch (data.user.role) { case "admin": router.replace("/admin") break case "guru": router.replace("/guru") break default: router.replace("/login") } return } setUser(data.user) fetchSessions(data.user.id) setLoading(false) } catch { router.replace("/login") } } checkSession() }, [router]) const handleLogout = async () => { clearSessionBackup() await fetch("/api/auth/logout", { method: "POST", credentials: "include" }) router.replace("/login") } const handleTokenSubmit = async (e: React.FormEvent) => { e.preventDefault() setTokenLoading(true) setTokenError(null) try { const res = await fetch("/api/siswa/join-exam", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token }), credentials: "include", }) const data = await res.json() if (!res.ok) { throw new Error(data.error || "Token tidak valid") } router.push(`/siswa/exam/${data.session.exam_id}`) } catch (err) { setTokenError(err instanceof Error ? err.message : "Terjadi kesalahan") } finally { setTokenLoading(false) } } const handlePasswordChange = async (e: React.FormEvent) => { e.preventDefault() setPasswordError(null) setPasswordSuccess(false) if (passwordForm.newPassword !== passwordForm.confirmPassword) { setPasswordError("Password baru tidak cocok") return } if (passwordForm.newPassword.length < 6) { setPasswordError("Password minimal 6 karakter") return } try { const res = await fetch("/api/siswa/change-password", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ currentPassword: passwordForm.currentPassword, newPassword: passwordForm.newPassword, }), credentials: "include", }) const data = await res.json() if (!res.ok) { throw new Error(data.error || "Gagal mengubah password") } setPasswordSuccess(true) setPasswordForm({ currentPassword: "", newPassword: "", confirmPassword: "" }) } catch (err) { setPasswordError(err instanceof Error ? err.message : "Terjadi kesalahan") } } const formatDate = (dateStr: string) => { return new Date(dateStr).toLocaleString("id-ID", { dateStyle: "medium", timeStyle: "short", }) } if (loading) { return (

Memuat dashboard...

) } return (

Dashboard Siswa

Selamat datang, {user?.nama}

Ikuti Ujian Riwayat Pengaturan Masukkan Token Ujian Masukkan token yang diberikan oleh guru untuk mengikuti ujian Riwayat Ujian Daftar ujian yang pernah Anda ikuti {sessions.length === 0 ? (

Anda belum mengikuti ujian apapun

) : (

{sessions.map((session) => (

{session.exams?.nama_ujian || "Ujian"}

{formatDate(session.started_at)}

{session.is_locked ? ( Terkunci ) : session.score !== null ? ( {session.score.toFixed(1)} ) : ( Berlangsung )}

))}

)} Ubah Password Password akan di-hash untuk keamanan

Password Saat Ini setPasswordForm({ ...passwordForm, currentPassword: e.target.value })} className="bg-slate-700 border-slate-600 text-white" required />

Password Baru setPasswordForm({ ...passwordForm, newPassword: e.target.value })} className="bg-slate-700 border-slate-600 text-white" required />

Konfirmasi Password Baru setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })} className="bg-slate-700 border-slate-600 text-white" required />

{passwordError && ( {passwordError} )} {passwordSuccess && ( Password berhasil diubah )}

) } [V0_FILE]typescript:file="proxy.ts" isEdit="true" isMerged="true" import { updateSession } from "@/lib/supabase/proxy" import { type NextRequest, NextResponse } from "next/server" export async function proxy(request: NextRequest) { // Check for custom session cookie const sessionCookie = request.cookies.get("exam_session") const protectedPaths = ["/admin", "/guru", "/siswa"] const isProtectedPath = protectedPaths.some((path) => request.nextUrl.pathname.startsWith(path)) if (isProtectedPath && !sessionCookie) { return NextResponse.redirect(new URL("/login", request.url)) } // Check role-based access if (sessionCookie) { try { const session = JSON.parse(sessionCookie.value) const path = request.nextUrl.pathname if (path.startsWith("/admin") && session.role !== "admin") { return NextResponse.redirect(new URL("/login", request.url)) } if (path.startsWith("/guru") && !["admin", "guru"].includes(session.role)) { return NextResponse.redirect(new URL("/login", request.url)) } if (path.startsWith("/siswa") && session.role !== "siswa") { return NextResponse.redirect(new URL("/login", request.url)) } } catch { return NextResponse.redirect(new URL("/login", request.url)) } } return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescriptreact:file="components/guru/create-exam.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { CheckCircle } from "lucide-react" interface CreateExamProps { onSuccess?: () => void } function localDatetimeToISO(datetimeLocalValue: string): string { // datetime-local format: "2024-01-17T12:00" // We need to treat this as local time and convert to ISO with timezone offset const date = new Date(datetimeLocalValue) return date.toISOString() } export function CreateExam({ onSuccess }: CreateExamProps) { const [formData, setFormData] = useState({ jenis_ujian: "", nama_ujian: "", pelaksanaan_start: "", pelaksanaan_end: "", durasi_menit: 60, }) const [loading, setLoading] = useState(false) const [success, setSuccess] = useState(false) const [error, setError] = useState(null) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError(null) try { const payload = { ...formData, pelaksanaan_start: localDatetimeToISO(formData.pelaksanaan_start), pelaksanaan_end: localDatetimeToISO(formData.pelaksanaan_end), } const res = await fetch("/api/exams", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }) if (!res.ok) { const data = await res.json() throw new Error(data.error || "Gagal membuat ujian") } setSuccess(true) setFormData({ jenis_ujian: "", nama_ujian: "", pelaksanaan_start: "", pelaksanaan_end: "", durasi_menit: 60, }) setTimeout(() => { setSuccess(false) onSuccess?.() }, 2000) } catch (err) { setError(err instanceof Error ? err.message : "Terjadi kesalahan") } finally { setLoading(false) } } return ( Buat Ujian Baru Isi informasi ujian di bawah ini {success && ( Ujian berhasil dibuat! Token akan digenerate otomatis. )} {error && ( {error} )}

Jenis Ujian setFormData({ ...formData, jenis_ujian: e.target.value })} className="bg-slate-700 border-slate-600 text-white" placeholder="Contoh: UTS, UAS, Quiz" required />

Nama Ujian setFormData({ ...formData, nama_ujian: e.target.value })} className="bg-slate-700 border-slate-600 text-white" placeholder="Contoh: Matematika Kelas 12" required />

Waktu Mulai setFormData({ ...formData, pelaksanaan_start: e.target.value })} className="bg-slate-700 border-slate-600 text-white" required />

Waktu Selesai setFormData({ ...formData, pelaksanaan_end: e.target.value })} className="bg-slate-700 border-slate-600 text-white" required />

Durasi (menit) setFormData({ ...formData, durasi_menit: Number.parseInt(e.target.value) })} className="bg-slate-700 border-slate-600 text-white" min={1} required />

) } [V0_FILE]typescriptreact:file="components/guru/exam-list.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Edit, Eye, FileText, Trash2 } from "lucide-react" import type { Exam } from "@/lib/types" import Link from "next/link" export function ExamList() { const [exams, setExams] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchExams() }, []) const fetchExams = async () => { const res = await fetch("/api/exams") const data = await res.json() setExams(data.exams || []) setLoading(false) } const handleDelete = async (id: string) => { if (!confirm("Apakah Anda yakin ingin menghapus ujian ini?")) return await fetch(`/api/exams/${id}`, { method: "DELETE" }) fetchExams() } const formatDate = (dateStr: string) => { const date = new Date(dateStr) return date.toLocaleString("id-ID", { day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit", hour12: false, }) } const getStatus = (exam: Exam) => { const now = new Date() const start = new Date(exam.pelaksanaan_start) const end = new Date(exam.pelaksanaan_end) if (now > end) return { label: "Selesai", className: "bg-slate-500/10 text-slate-400" } if (now >= start && now <= end) return { label: "Aktif", className: "bg-green-500/10 text-green-400" } return { label: "Terjadwal", className: "bg-yellow-500/10 text-yellow-400" } } if (loading) { return

Memuat data...

} if (exams.length === 0) { return (

Belum ada ujian. Buat ujian pertama Anda!

) } return (

{exams.map((exam) => { const status = getStatus(exam) return (

{exam.nama_ujian} {exam.jenis_ujian} - Durasi: {exam.durasi_menit} menit

{status.label}

Mulai: {formatDate(exam.pelaksanaan_start)}

Selesai: {formatDate(exam.pelaksanaan_end)}

Token: {exam.token}

) })}

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Alert, AlertDescription } from "@/components/ui/alert" import { BookOpen, Lock, User, Loader2 } from "lucide-react" import { saveSessionBackup, getSessionBackup, clearSessionBackup } from "@/lib/session" export default function LoginPage() { const [nis, setNis] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const [checkingSession, setCheckingSession] = useState(true) const router = useRouter() useEffect(() => { async function checkExistingSession() { try { const backup = getSessionBackup() if (backup) { const user = JSON.parse(backup) if (user && user.role) { redirectByRole(user.role) return } } } catch { clearSessionBackup() } setCheckingSession(false) } checkExistingSession() }, []) const redirectByRole = (role: string) => { switch (role) { case "admin": router.replace("/admin") break case "guru": router.replace("/guru") break case "siswa": router.replace("/siswa") break default: router.replace("/login") } } const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 10000) const response = await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ nis, password }), credentials: "include", signal: controller.signal, }) clearTimeout(timeoutId) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Login gagal") } // Save session backup to localStorage if (data.sessionToken) { saveSessionBackup(data.sessionToken) } // Small delay to ensure storage is set await new Promise((resolve) => setTimeout(resolve, 200)) // Redirect based on role redirectByRole(data.user.role) } catch (err) { if (err instanceof Error) { if (err.name === "AbortError") { setError("Koneksi timeout. Silakan coba lagi.") } else if (err.message === "Failed to fetch") { setError("Gagal terhubung ke server. Periksa koneksi internet Anda.") } else { setError(err.message) } } else { setError("Terjadi kesalahan") } setIsLoading(false) } } if (checkingSession) { return (

) } return (

Sistem Ujian Online Masuk dengan NIS dan Password Anda

NIS / Username

setNis(e.target.value)} className="pl-10 bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" required disabled={isLoading} />

Password

setPassword(e.target.value)} className="pl-10 bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500" required disabled={isLoading} />

{error && ( {error} )}

) } [V0_FILE]typescriptreact:file="app/guru/exam/[id]/questions/page.tsx" isEdit="true" "use client" import { useEffect, useState, use } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { ArrowLeft, Plus, Trash2, GripVertical, CheckCircle2 } from "lucide-react" import type { Exam, Question } from "@/lib/types" import Link from "next/link" export default function QuestionsPage({ params }: { params: Promise<{ id: string }> }) { const { id: examId } = use(params) const [exam, setExam] = useState(null) const [questions, setQuestions] = useState([]) const [loading, setLoading] = useState(true) const [showForm, setShowForm] = useState(false) const [editingQuestion, setEditingQuestion] = useState(null) const router = useRouter() const [newQuestion, setNewQuestion] = useState({ tipe: "pilihan_ganda" as "pilihan_ganda" | "pilihan_ganda_kompleks", soal: "", pilihan: ["", "", "", ""], jawaban_benar: "" as string | string[], poin: 1, }) useEffect(() => { fetchData() }, [examId]) const fetchData = async () => { const [examRes, questionsRes] = await Promise.all([ fetch(`/api/exams/${examId}`), fetch(`/api/exams/${examId}/questions`), ]) const examData = await examRes.json() const questionsData = await questionsRes.json() setExam(examData.exam) setQuestions(questionsData.questions || []) setLoading(false) } const resetForm = () => { setNewQuestion({ tipe: "pilihan_ganda", soal: "", pilihan: ["", "", "", ""], jawaban_benar: "", poin: 1, }) setEditingQuestion(null) setShowForm(false) } const handleAddQuestion = async () => { const filteredPilihan = newQuestion.pilihan.filter((p) => p.trim() !== "") if (filteredPilihan.length < 2) { alert("Minimal 2 pilihan jawaban") return } if (newQuestion.tipe === "pilihan_ganda" && !newQuestion.jawaban_benar) { alert("Pilih jawaban yang benar") return } if (newQuestion.tipe === "pilihan_ganda_kompleks" && (newQuestion.jawaban_benar as string[]).length === 0) { alert("Centang minimal satu jawaban yang benar") return } const questionData = { ...newQuestion, pilihan: filteredPilihan, } if (editingQuestion) { await fetch(`/api/exams/${examId}/questions/${editingQuestion.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(questionData), }) } else { await fetch(`/api/exams/${examId}/questions`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(questionData), }) } resetForm() fetchData() } const handleDeleteQuestion = async (questionId: string) => { if (!confirm("Hapus soal ini?")) return await fetch(`/api/exams/${examId}/questions/${questionId}`, { method: "DELETE", }) fetchData() } const handleEditQuestion = (question: Question) => { setNewQuestion({ tipe: question.tipe, soal: question.soal, pilihan: [...question.pilihan, "", "", "", ""].slice(0, 4), jawaban_benar: question.jawaban_benar, poin: question.poin, }) setEditingQuestion(question) setShowForm(true) } const updatePilihan = (index: number, value: string) => { const updated = [...newQuestion.pilihan] updated[index] = value setNewQuestion({ ...newQuestion, pilihan: updated }) } const selectCorrectAnswer = (letter: string) => { if (newQuestion.tipe === "pilihan_ganda") { setNewQuestion({ ...newQuestion, jawaban_benar: letter }) } } const toggleCorrectAnswer = (letter: string, checked: boolean) => { if (newQuestion.tipe === "pilihan_ganda_kompleks") { const current = newQuestion.jawaban_benar as string[] if (checked) { setNewQuestion({ ...newQuestion, jawaban_benar: [...current, letter] }) } else { setNewQuestion({ ...newQuestion, jawaban_benar: current.filter((c) => c !== letter), }) } } } if (loading) { return (

) } return (

{exam?.nama_ujian}

Kelola Soal Ujian

Total: {questions.length} soal

{showForm && ( {editingQuestion ? "Edit Soal" : "Tambah Soal Baru"}

Tipe Soal

Soal

setNewQuestion({ ...newQuestion, soal: e.target.value })}
                  className="bg-slate-700 border-slate-600 text-white min-h-[100px]"
                  placeholder="Tulis soal di sini..."
                />
              </div>

<div className="space-y-3">
                <Label className="text-slate-300">Pilihan Jawaban</Label>
                {newQuestion.pilihan.map((pilihan, idx) => {
                  const letter = String.fromCharCode(65 + idx)
                  const isSelected =
                    newQuestion.tipe === "pilihan_ganda"
                      ? newQuestion.jawaban_benar === letter
                      : (newQuestion.jawaban_benar as string[]).includes(letter)

return (
                    <div key={idx} className="flex items-center gap-3">
                      <span className="text-slate-400 w-6">{letter}.</span>
                      <Input
                        value={pilihan}
                        onChange={(e) => updatePilihan(idx, e.target.value)}
                        className="bg-slate-700 border-slate-600 text-white flex-1"
                        placeholder={`Pilihan ${letter}`}
                      />
                      {newQuestion.tipe === "pilihan_ganda" ? (
                        // Custom radio button that's fully clickable
                        <button
                          type="button"
                          onClick={() => selectCorrectAnswer(letter)}
                          className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors ${
                            isSelected
                              ? "border-emerald-500 bg-emerald-500"
                              : "border-slate-500 hover:border-emerald-400"
                          }`}
                        >
                          {isSelected && <div className="w-2 h-2 bg-white rounded-full" />}
                        </button>
                      ) : (
                        <Checkbox
                          checked={isSelected}
                          onCheckedChange={(checked) => toggleCorrectAnswer(letter, !!checked)}
                          className="border-slate-500 data-[state=checked]:bg-emerald-500 data-[state=checked]:border-emerald-500"
                        />
                      )}
                    </div>
                  )
                })}
                <p className="text-xs text-slate-500">
                  {newQuestion.tipe === "pilihan_ganda"
                    ? "Klik lingkaran untuk memilih jawaban yang benar"
                    : "Centang semua jawaban yang benar"}
                </p>
              </div>

<div className="space-y-2">
                <Label className="text-slate-300">Poin</Label>
                <Input
                  type="number"
                  value={newQuestion.poin}
                  onChange={(e) => setNewQuestion({ ...newQuestion, poin: Number.parseInt(e.target.value) })}
                  className="bg-slate-700 border-slate-600 text-white w-24"
                  min={1}
                />
              </div>

<div className="flex gap-3">
                <Button onClick={handleAddQuestion} className="bg-blue-600 hover:bg-blue-700">
                  {editingQuestion ? "Simpan Perubahan" : "Tambah Soal"}
                </Button>
                <Button
                  variant="outline"
                  onClick={resetForm}
                  className="border-slate-600 bg-transparent text-slate-300"
                >
                  Batal
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

<div className="space-y-4">
          {questions.map((question, idx) => (
            <Card key={question.id} className="border-slate-700 bg-slate-800/50">
              <CardContent className="pt-6">
                <div className="flex items-start gap-4">
                  <div className="flex items-center gap-2 text-slate-500">
                    <GripVertical className="w-4 h-4" />
                    <span className="font-bold text-lg">{idx + 1}</span>
                  </div>
                  <div className="flex-1">
                    <p className="text-white mb-4 whitespace-pre-wrap">{question.soal}</p>
                    <div className="space-y-2">
                      {question.pilihan.map((pilihan, pIdx) => {
                        const letter = String.fromCharCode(65 + pIdx)
                        const isCorrect = Array.isArray(question.jawaban_benar)
                          ? question.jawaban_benar.includes(letter)
                          : question.jawaban_benar === letter

return (
                          <div
                            key={pIdx}
                            className={`flex items-center gap-2 p-2 rounded ${
                              isCorrect ? "bg-emerald-500/10 border border-emerald-500/30" : "bg-slate-700/50"
                            }`}
                          >
                            <span className="text-slate-400 w-6">{letter}.</span>
                            <span className={isCorrect ? "text-emerald-400" : "text-slate-300"}>{pilihan}</span>
                            {isCorrect && <CheckCircle2 className="w-4 h-4 text-emerald-500 ml-auto" />}
                          </div>
                        )
                      })}
                    </div>
                    <div className="flex items-center gap-4 mt-4 text-sm text-slate-500">
                      <span>
                        Tipe: {question.tipe === "pilihan_ganda" ? "Pilihan Ganda" : "Pilihan Ganda Kompleks"}
                      </span>
                      <span>Poin: {question.poin}</span>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleEditQuestion(question)}
                      className="border-slate-600 text-slate-300"
                    >
                      Edit
                    </Button>
                    <Button size="sm" variant="destructive" onClick={() => handleDeleteQuestion(question.id)}>
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/siswa/sessions/[id]/submit/route.ts" isEdit="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const { answers } = await request.json()
  const supabase = await createClient()

// Get session and exam info
  const { data: session, error: sessionError } = await supabase
    .from("exam_sessions")
    .select("*, exams(*)")
    .eq("id", id)
    .single()

if (sessionError || !session) {
    return NextResponse.json({ error: "Session not found" }, { status: 404 })
  }

// Get questions
  const { data: questions, error: questionsError } = await supabase
    .from("questions")
    .select("*")
    .eq("exam_id", session.exam_id)

if (questionsError) {
    return NextResponse.json({ error: questionsError.message }, { status: 500 })
  }

let totalPoints = 0
  let earnedPoints = 0

questions?.forEach((question) => {
    totalPoints += question.poin
    const userAnswer = answers[question.id]
    const correctAnswer = question.jawaban_benar

if (!userAnswer) {
      // No answer provided, no points
      return
    }

if (question.tipe === "pilihan_ganda") {
      // For single choice, compare as strings
      const userAnswerStr = String(userAnswer).trim().toUpperCase()
      const correctAnswerStr = String(correctAnswer).trim().toUpperCase()

if (userAnswerStr === correctAnswerStr) {
        earnedPoints += question.poin
      }
    } else {
      // pilihan_ganda_kompleks - multiple correct answers
      // Normalize both arrays for comparison
      let userAnswerArr: string[] = []
      let correctAnswerArr: string[] = []

// Handle user answer - could be array or string
      if (Array.isArray(userAnswer)) {
        userAnswerArr = userAnswer.map((a) => String(a).trim().toUpperCase()).sort()
      } else if (typeof userAnswer === "string") {
        userAnswerArr = [userAnswer.trim().toUpperCase()]
      }

// Handle correct answer - could be array, JSON string, or plain string
      if (Array.isArray(correctAnswer)) {
        correctAnswerArr = correctAnswer.map((a) => String(a).trim().toUpperCase()).sort()
      } else if (typeof correctAnswer === "string") {
        try {
          const parsed = JSON.parse(correctAnswer)
          if (Array.isArray(parsed)) {
            correctAnswerArr = parsed.map((a) => String(a).trim().toUpperCase()).sort()
          } else {
            correctAnswerArr = [String(parsed).trim().toUpperCase()]
          }
        } catch {
          correctAnswerArr = [correctAnswer.trim().toUpperCase()]
        }
      }

if (JSON.stringify(userAnswerArr) === JSON.stringify(correctAnswerArr)) {
        earnedPoints += question.poin
      }
    }
  })

const score = totalPoints > 0 ? (earnedPoints / totalPoints) * 100 : 0

// Update session
  const { error: updateError } = await supabase
    .from("exam_sessions")
    .update({
      answers,
      finished_at: new Date().toISOString(),
      score,
    })
    .eq("id", id)

if (updateError) {
    return NextResponse.json({ error: updateError.message }, { status: 500 })
  }

return NextResponse.json({ success: true, score, earnedPoints, totalPoints })
}
[V0_FILE]typescriptreact:file="app/siswa/exam/[id]/page.tsx" isEdit="true"
"use client"

import { useEffect, useState, useCallback, use } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Progress } from "@/components/ui/progress"
import { Clock, AlertTriangle, ChevronLeft, ChevronRight, Send, Lock, Maximize } from "lucide-react"
import type { Exam, Question, ExamSession } from "@/lib/types"

export default function ExamPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: examId } = use(params)
  const router = useRouter()

const [exam, setExam] = useState<Exam | null>(null)
  const [questions, setQuestions] = useState<Question[]>([])
  const [session, setSession] = useState<ExamSession | null>(null)
  const [currentIndex, setCurrentIndex] = useState(0)
  const [answers, setAnswers] = useState<Record<string, string | string[]>>({})
  const [timeLeft, setTimeLeft] = useState<number>(0)
  const [loading, setLoading] = useState(true)
  const [isLocked, setIsLocked] = useState(false)
  const [lockReason, setLockReason] = useState<string>("")
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [violationCount, setViolationCount] = useState(0)
  const [showFullscreenPrompt, setShowFullscreenPrompt] = useState(false)

// Security: Log violation
  const logViolation = useCallback(
    async (eventType: string, eventData: Record<string, unknown> = {}) => {
      if (!session) return

try {
        await fetch("/api/siswa/security-log", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            session_id: session.id,
            event_type: eventType,
            event_data: eventData,
          }),
        })
      } catch (e) {
        console.error("Failed to log violation:", e)
      }
    },
    [session],
  )

// Security: Lock session
  const lockSession = useCallback(
    async (reason: string) => {
      if (!session || isLocked) return

setIsLocked(true)
      setLockReason(reason)

try {
        await fetch(`/api/siswa/sessions/${session.id}/lock`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ reason }),
        })

await logViolation("locked", { reason })
      } catch (e) {
        console.error("Failed to lock session:", e)
      }
    },
    [session, isLocked, logViolation],
  )

const enterFullscreen = useCallback(async () => {
    try {
      if (document.documentElement.requestFullscreen) {
        await document.documentElement.requestFullscreen()
      } else if ((document.documentElement as any).webkitRequestFullscreen) {
        await (document.documentElement as any).webkitRequestFullscreen()
      } else if ((document.documentElement as any).msRequestFullscreen) {
        await (document.documentElement as any).msRequestFullscreen()
      }
      setIsFullscreen(true)
      setShowFullscreenPrompt(false)
    } catch (e) {
      console.error("Failed to enter fullscreen:", e)
      setShowFullscreenPrompt(true)
    }
  }, [])

// Initialize exam
  useEffect(() => {
    const initExam = async () => {
      try {
        // Check session
        const sessionRes = await fetch("/api/auth/session")
        const sessionData = await sessionRes.json()

if (!sessionData.user || sessionData.user.role !== "siswa") {
          router.push("/login")
          return
        }

// Get exam and session
        const [examRes, questionsRes, examSessionRes, timeRes] = await Promise.all([
          fetch(`/api/exams/${examId}`),
          fetch(`/api/exams/${examId}/questions`),
          fetch(`/api/siswa/exam-session/${examId}`),
          fetch("/api/server-time"),
        ])

const examData = await examRes.json()
        const questionsData = await questionsRes.json()
        const examSessionData = await examSessionRes.json()
        const timeData = await timeRes.json()

if (!examData.exam) {
          router.push("/siswa")
          return
        }

setExam(examData.exam)
        setQuestions(questionsData.questions || [])

if (examSessionData.session) {
          setSession(examSessionData.session)
          setAnswers(examSessionData.session.answers || {})

if (examSessionData.session.is_locked) {
            setIsLocked(true)
            setLockReason(examSessionData.session.lock_reason || "Sesi terkunci")
          }

if (examSessionData.session.finished_at) {
            router.push("/siswa")
            return
          }
        }

// Calculate time left
        const sessionStart = new Date(examSessionData.session?.started_at || Date.now()).getTime()
        const durationMs = examData.exam.durasi_menit * 60 * 1000
        const elapsed = timeData.time - sessionStart
        const remaining = Math.max(0, durationMs - elapsed)
        setTimeLeft(Math.floor(remaining / 1000))

setLoading(false)

setShowFullscreenPrompt(true)
      } catch (e) {
        console.error("Failed to initialize exam:", e)
        router.push("/siswa")
      }
    }

initExam()
  }, [examId, router])

// Timer
  useEffect(() => {
    if (loading || isLocked || timeLeft <= 0) return

const timer = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          handleSubmit()
          return 0
        }
        return prev - 1
      })
    }, 1000)

return () => clearInterval(timer)
  }, [loading, isLocked, timeLeft])

// Security: Fullscreen exit detection
  useEffect(() => {
    if (loading || isLocked) return

const handleFullscreenChange = () => {
      const isCurrentlyFullscreen = !!(document.fullscreenElement || (document as any).webkitFullscreenElement)

if (!isCurrentlyFullscreen && isFullscreen) {
        setViolationCount((prev) => {
          const newCount = prev + 1
          logViolation("fullscreen_exit", { count: newCount })

if (newCount >= 3) {
            lockSession("Keluar dari fullscreen 3 kali")
          }

return newCount
        })

// Show prompt to re-enter fullscreen
        setShowFullscreenPrompt(true)
      }
      setIsFullscreen(isCurrentlyFullscreen)
    }

document.addEventListener("fullscreenchange", handleFullscreenChange)
    document.addEventListener("webkitfullscreenchange", handleFullscreenChange)

return () => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange)
      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange)
    }
  }, [loading, isLocked, isFullscreen, logViolation, lockSession])

// Security: Tab visibility
  useEffect(() => {
    if (loading || isLocked) return

const handleVisibilityChange = () => {
      if (document.hidden) {
        setViolationCount((prev) => {
          const newCount = prev + 1
          logViolation("tab_switch", { count: newCount })

if (newCount >= 3) {
            lockSession("Berpindah tab 3 kali")
          }

return newCount
        })
      }
    }

document.addEventListener("visibilitychange", handleVisibilityChange)
    return () => document.removeEventListener("visibilitychange", handleVisibilityChange)
  }, [loading, isLocked, logViolation, lockSession])

// Security: Keyboard shortcuts
  useEffect(() => {
    if (loading || isLocked) return

const handleKeyDown = (e: KeyboardEvent) => {
      // Block DevTools shortcuts
      if (
        e.key === "F12" ||
        (e.ctrlKey && e.shiftKey && e.key === "I") ||
        (e.ctrlKey && e.shiftKey && e.key === "J") ||
        (e.ctrlKey && e.shiftKey && e.key === "C") ||
        (e.ctrlKey && e.key === "u")
      ) {
        e.preventDefault()
        logViolation("keyboard_shortcut", { key: e.key, ctrl: e.ctrlKey, shift: e.shiftKey })
        return
      }

// Block copy/paste
      if (e.ctrlKey && (e.key === "c" || e.key === "v" || e.key === "x")) {
        e.preventDefault()
        logViolation(e.key === "c" ? "copy_attempt" : e.key === "v" ? "paste_attempt" : "cut_attempt")
        return
      }

// Block print
      if (e.ctrlKey && e.key === "p") {
        e.preventDefault()
        logViolation("print_attempt")
        return
      }
    }

document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [loading, isLocked, logViolation])

// Security: Right click
  useEffect(() => {
    if (loading || isLocked) return

const handleContextMenu = (e: MouseEvent) => {
      e.preventDefault()
      logViolation("right_click")
    }

document.addEventListener("contextmenu", handleContextMenu)
    return () => document.removeEventListener("contextmenu", handleContextMenu)
  }, [loading, isLocked, logViolation])

// Security: Copy/Paste events
  useEffect(() => {
    if (loading || isLocked) return

const handleCopy = (e: ClipboardEvent) => {
      e.preventDefault()
      logViolation("copy_attempt")
    }

const handlePaste = (e: ClipboardEvent) => {
      e.preventDefault()
      logViolation("paste_attempt")
    }

document.addEventListener("copy", handleCopy)
    document.addEventListener("paste", handlePaste)

return () => {
      document.removeEventListener("copy", handleCopy)
      document.removeEventListener("paste", handlePaste)
    }
  }, [loading, isLocked, logViolation])

// Security: Beforeunload
  useEffect(() => {
    if (loading || isLocked) return

const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault()
      e.returnValue = ""
      saveAnswers()
      return ""
    }

window.addEventListener("beforeunload", handleBeforeUnload)
    return () => window.removeEventListener("beforeunload", handleBeforeUnload)
  }, [loading, isLocked, answers])

// Auto-save answers
  const saveAnswers = useCallback(async () => {
    if (!session) return

try {
      await fetch(`/api/siswa/sessions/${session.id}/save`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ answers }),
      })
    } catch (e) {
      console.error("Failed to save answers:", e)
    }
  }, [session, answers])

// Auto-save every 30 seconds
  useEffect(() => {
    if (loading || isLocked) return

const interval = setInterval(saveAnswers, 30000)
    return () => clearInterval(interval)
  }, [loading, isLocked, saveAnswers])

const handleAnswerChange = (questionId: string, value: string | string[]) => {
    setAnswers((prev) => ({ ...prev, [questionId]: value }))
  }

const handleSubmit = async () => {
    if (!session || !confirm("Yakin ingin mengumpulkan jawaban?")) return

try {
      await fetch(`/api/siswa/sessions/${session.id}/submit`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ answers }),
      })

if (document.fullscreenElement) {
        await document.exitFullscreen()
      }

router.push("/siswa")
    } catch (e) {
      console.error("Failed to submit:", e)
    }
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-900">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-emerald-500 mx-auto mb-4"></div>
          <p className="text-slate-400">Memuat ujian...</p>
        </div>
      </div>
    )
  }

if (isLocked) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-900 p-4">
        <Card className="max-w-md border-red-500/50 bg-slate-800">
          <CardHeader className="text-center">
            <Lock className="w-16 h-16 text-red-500 mx-auto mb-4" />
            <CardTitle className="text-red-400">Sesi Terkunci</CardTitle>
          </CardHeader>
          <CardContent className="text-center">
            <p className="text-slate-300 mb-4">{lockReason}</p>
            <p className="text-slate-400 text-sm">Hubungi admin untuk membuka kunci sesi Anda</p>
            <Button onClick={() => router.push("/siswa")} className="mt-4" variant="outline">
              Kembali ke Dashboard
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

const currentQuestion = questions[currentIndex]
  const progress = questions.length > 0 ? (Object.keys(answers).length / questions.length) * 100 : 0

return (
    <div className="min-h-screen bg-slate-900 select-none">
      {showFullscreenPrompt && (
        <div className="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4">
          <Card className="max-w-md border-yellow-500/50 bg-slate-800">
            <CardHeader className="text-center">
              <Maximize className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
              <CardTitle className="text-yellow-400">Mode Fullscreen Diperlukan</CardTitle>
            </CardHeader>
            <CardContent className="text-center space-y-4">
              <p className="text-slate-300">
                Ujian harus dilakukan dalam mode fullscreen untuk keamanan. Klik tombol di bawah untuk melanjutkan.
              </p>
              {violationCount > 0 && (
                <Alert className="bg-yellow-500/10 border-yellow-500/50">
                  <AlertTriangle className="h-4 w-4 text-yellow-500" />
                  <AlertDescription className="text-yellow-400">
                    Peringatan: {violationCount}/3 pelanggaran. Sesi akan dikunci setelah 3 pelanggaran.
                  </AlertDescription>
                </Alert>
              )}
              <Button onClick={enterFullscreen} className="w-full bg-emerald-600 hover:bg-emerald-700">
                <Maximize className="w-4 h-4 mr-2" />
                Masuk Mode Fullscreen
              </Button>
            </CardContent>
          </Card>
        </div>
      )}

{/* Header */}
      <header className="border-b border-slate-700 bg-slate-800/90 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-lg font-semibold text-white">{exam?.nama_ujian}</h1>
              <p className="text-sm text-slate-400">{exam?.jenis_ujian}</p>
            </div>
            <div className="flex items-center gap-4">
              {violationCount > 0 && (
                <div className="flex items-center gap-2 text-yellow-400">
                  <AlertTriangle className="w-4 h-4" />
                  <span className="text-sm">Pelanggaran: {violationCount}/3</span>
                </div>
              )}
              <div
                className={`flex items-center gap-2 px-3 py-1.5 rounded-lg ${
                  timeLeft < 300 ? "bg-red-500/20 text-red-400" : "bg-emerald-500/20 text-emerald-400"
                }`}
              >
                <Clock className="w-4 h-4" />
                <span className="font-mono font-bold">{formatTime(timeLeft)}</span>
              </div>
            </div>
          </div>
          <div className="mt-2">
            <Progress value={progress} className="h-2" />
            <p className="text-xs text-slate-400 mt-1">
              {Object.keys(answers).length} dari {questions.length} soal dijawab
            </p>
          </div>
        </div>
      </header>

{/* Question Navigation */}
      <div className="border-b border-slate-700 bg-slate-800/50">
        <div className="container mx-auto px-4 py-3">
          <div className="flex flex-wrap gap-2">
            {questions.map((q, idx) => (
              <button
                key={q.id}
                onClick={() => setCurrentIndex(idx)}
                className={`w-10 h-10 rounded-lg font-medium transition-colors ${
                  idx === currentIndex
                    ? "bg-emerald-600 text-white"
                    : answers[q.id]
                      ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
                      : "bg-slate-700 text-slate-400 hover:bg-slate-600"
                }`}
              >
                {idx + 1}
              </button>
            ))}
          </div>
        </div>
      </div>

{/* Question Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        {currentQuestion && (
          <Card className="border-slate-700 bg-slate-800/50">
            <CardHeader>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <span className="flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-500/20 text-emerald-400 font-bold">
                    {currentIndex + 1}
                  </span>
                  <span className="text-sm text-slate-400">
                    {currentQuestion.tipe === "pilihan_ganda" ? "Pilihan Ganda" : "Pilihan Ganda Kompleks"}
                    {" - "}Poin: {currentQuestion.poin}
                  </span>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              <p className="text-white text-lg whitespace-pre-wrap">{currentQuestion.soal}</p>

<div className="space-y-3">
                {currentQuestion.tipe === "pilihan_ganda" ? (
                  // Single choice - radio style
                  <div className="space-y-3">
                    {currentQuestion.pilihan.map((pilihan, idx) => {
                      const letter = String.fromCharCode(65 + idx)
                      const isSelected = answers[currentQuestion.id] === letter
                      return (
                        <button
                          key={idx}
                          type="button"
                          onClick={() => handleAnswerChange(currentQuestion.id, letter)}
                          className={`w-full flex items-center gap-3 p-4 rounded-lg border transition-colors text-left ${
                            isSelected
                              ? "bg-emerald-500/10 border-emerald-500/50"
                              : "bg-slate-700/50 border-slate-600 hover:border-slate-500"
                          }`}
                        >
                          <div
                            className={`w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
                              isSelected ? "border-emerald-500 bg-emerald-500" : "border-slate-500"
                            }`}
                          >
                            {isSelected && <div className="w-2 h-2 bg-white rounded-full" />}
                          </div>
                          <span className="text-slate-200">
                            <span className="font-medium mr-2">{letter}.</span>
                            {pilihan}
                          </span>
                        </button>
                      )
                    })}
                  </div>
                ) : (
                  // Multiple choice - checkbox style
                  <div className="space-y-3">
                    {currentQuestion.pilihan.map((pilihan, idx) => {
                      const letter = String.fromCharCode(65 + idx)
                      const currentAnswers = (answers[currentQuestion.id] as string[]) || []
                      const isChecked = currentAnswers.includes(letter)

return (
                        <button
                          key={idx}
                          type="button"
                          onClick={() => {
                            if (isChecked) {
                              handleAnswerChange(
                                currentQuestion.id,
                                currentAnswers.filter((a) => a !== letter),
                              )
                            } else {
                              handleAnswerChange(currentQuestion.id, [...currentAnswers, letter])
                            }
                          }}
                          className={`w-full flex items-center gap-3 p-4 rounded-lg border transition-colors text-left ${
                            isChecked
                              ? "bg-emerald-500/10 border-emerald-500/50"
                              : "bg-slate-700/50 border-slate-600 hover:border-slate-500"
                          }`}
                        >
                          <div
                            className={`w-5 h-5 rounded border-2 flex items-center justify-center flex-shrink-0 ${
                              isChecked ? "border-emerald-500 bg-emerald-500" : "border-slate-500"
                            }`}
                          >
                            {isChecked && (
                              <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                              </svg>
                            )}
                          </div>
                          <span className="text-slate-200">
                            <span className="font-medium mr-2">{letter}.</span>
                            {pilihan}
                          </span>
                        </button>
                      )
                    })}
                  </div>
                )}
              </div>

{/* Navigation */}
              <div className="flex items-center justify-between pt-4 border-t border-slate-700">
                <Button
                  variant="outline"
                  onClick={() => setCurrentIndex((prev) => Math.max(0, prev - 1))}
                  disabled={currentIndex === 0}
                  className="border-slate-600 text-slate-300"
                >
                  <ChevronLeft className="w-4 h-4 mr-2" />
                  Sebelumnya
                </Button>

-- Table: users (Admin, Guru, Siswa)
CREATE TABLE IF NOT EXISTS users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  nis VARCHAR(50) UNIQUE NOT NULL,
  nama VARCHAR(255) NOT NULL,
  password VARCHAR(255) NOT NULL,
  role VARCHAR(20) NOT NULL DEFAULT 'siswa' CHECK (role IN ('admin', 'guru', 'siswa')),
  is_locked BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table: exams (Ujian)
CREATE TABLE IF NOT EXISTS exams (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  nama_ujian VARCHAR(255) NOT NULL,
  jenis_ujian VARCHAR(100) NOT NULL,
  pelaksanaan_start TIMESTAMP WITH TIME ZONE NOT NULL,
  pelaksanaan_end TIMESTAMP WITH TIME ZONE NOT NULL,
  token VARCHAR(20) UNIQUE NOT NULL,
  durasi_menit INTEGER NOT NULL DEFAULT 60,
  created_by UUID REFERENCES users(id) ON DELETE SET NULL,
  is_active BOOLEAN DEFAULT TRUE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table: questions (Soal)
CREATE TABLE IF NOT EXISTS questions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  exam_id UUID REFERENCES exams(id) ON DELETE CASCADE,
  nomor INTEGER NOT NULL,
  tipe VARCHAR(30) NOT NULL CHECK (tipe IN ('pilihan_ganda', 'pilihan_ganda_kompleks')),
  soal TEXT NOT NULL,
  pilihan JSONB NOT NULL DEFAULT '[]',
  jawaban_benar JSONB NOT NULL,
  poin INTEGER DEFAULT 1,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Table: exam_sessions (Sesi Ujian Siswa)
CREATE TABLE IF NOT EXISTS exam_sessions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  exam_id UUID REFERENCES exams(id) ON DELETE CASCADE,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  started_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  finished_at TIMESTAMP WITH TIME ZONE,
  is_locked BOOLEAN DEFAULT FALSE,
  lock_reason TEXT,
  score DECIMAL(5,2),
  answers JSONB DEFAULT '{}',
  UNIQUE(exam_id, user_id)
);

-- Table: security_logs (Log Keamanan)
CREATE TABLE IF NOT EXISTS security_logs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  session_id UUID REFERENCES exam_sessions(id) ON DELETE CASCADE,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  event_type VARCHAR(50) NOT NULL,
  event_data JSONB DEFAULT '{}',
  timestamp TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Insert default admin user (password: adminsija262626 - akan di-hash di aplikasi)
INSERT INTO users (nis, nama, password, role)
VALUES ('admin', 'Administrator', 'adminsija262626', 'admin')
ON CONFLICT (nis) DO NOTHING;

-- Enable Row Level Security
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
ALTER TABLE exams ENABLE ROW LEVEL SECURITY;
ALTER TABLE questions ENABLE ROW LEVEL SECURITY;
ALTER TABLE exam_sessions ENABLE ROW LEVEL SECURITY;
ALTER TABLE security_logs ENABLE ROW LEVEL SECURITY;

-- RLS Policies for users table
CREATE POLICY "Users can view own profile" ON users
  FOR SELECT USING (true);

CREATE POLICY "Admin can manage all users" ON users
  FOR ALL USING (true);

-- RLS Policies for exams table
CREATE POLICY "Anyone can view active exams" ON exams
  FOR SELECT USING (true);

CREATE POLICY "Teachers and admins can manage exams" ON exams
  FOR ALL USING (true);

-- RLS Policies for questions table
CREATE POLICY "Anyone can view questions" ON questions
  FOR SELECT USING (true);

CREATE POLICY "Teachers and admins can manage questions" ON questions
  FOR ALL USING (true);

-- RLS Policies for exam_sessions table
CREATE POLICY "Users can view own sessions" ON exam_sessions
  FOR SELECT USING (true);

CREATE POLICY "Users can manage own sessions" ON exam_sessions
  FOR ALL USING (true);

-- RLS Policies for security_logs table
CREATE POLICY "Admins can view all logs" ON security_logs
  FOR SELECT USING (true);

CREATE POLICY "System can insert logs" ON security_logs
  FOR INSERT WITH CHECK (true);
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // Server Component context
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/supabase/proxy.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

await supabase.auth.getUser()

return supabaseResponse
}
[V0_FILE]typescript:file="lib/auth.ts" isMerged="true"
import bcrypt from "bcryptjs"
import { createClient } from "@/lib/supabase/server"

export interface User {
  id: string
  nis: string
  nama: string
  role: "admin" | "guru" | "siswa"
  is_locked: boolean
}

export async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, 12)
}

export async function verifyPassword(password: string, hashedPassword: string): Promise<boolean> {
  // Check if password is hashed (bcrypt hashes start with $2)
  if (hashedPassword.startsWith("$2")) {
    return bcrypt.compare(password, hashedPassword)
  }
  // Plain text comparison for initial admin
  return password === hashedPassword
}

export async function login(nis: string, password: string): Promise<User | null> {
  const supabase = await createClient()

const { data: user, error } = await supabase.from("users").select("*").eq("nis", nis).single()

if (error || !user) {
    return null
  }

if (user.is_locked) {
    throw new Error("Akun Anda terkunci. Hubungi admin.")
  }

const isValid = await verifyPassword(password, user.password)

if (!isValid) {
    return null
  }

// If password was plain text, update to hashed
  if (!user.password.startsWith("$2")) {
    const hashedPassword = await hashPassword(password)
    await supabase.from("users").update({ password: hashedPassword }).eq("id", user.id)
  }

return {
    id: user.id,
    nis: user.nis,
    nama: user.nama,
    role: user.role,
    is_locked: user.is_locked,
  }
}
[V0_FILE]typescript:file="lib/types.ts" isMerged="true"
export interface User {
  id: string
  nis: string
  nama: string
  role: "admin" | "guru" | "siswa"
  is_locked: boolean
  created_at: string
  updated_at: string
}

export interface Exam {
  id: string
  nama_ujian: string
  jenis_ujian: string
  pelaksanaan_start: string
  pelaksanaan_end: string
  token: string
  durasi_menit: number
  created_by: string
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface Question {
  id: string
  exam_id: string
  nomor: number
  tipe: "pilihan_ganda" | "pilihan_ganda_kompleks"
  soal: string
  pilihan: string[]
  jawaban_benar: string | string[]
  poin: number
  created_at: string
}

export interface ExamSession {
  id: string
  exam_id: string
  user_id: string
  started_at: string
  finished_at: string | null
  is_locked: boolean
  lock_reason: string | null
  score: number | null
  answers: Record<string, string | string[]>
}

export interface SecurityLog {
  id: string
  session_id: string
  user_id: string
  event_type: string
  event_data: Record<string, unknown>
  timestamp: string
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { redirect } from "next/navigation"

export default function Home() {
  redirect("/login")
}
[V0_FILE]typescriptreact:file="components/admin/user-management.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Trash2, Lock, Unlock, UserPlus } from "lucide-react"
import type { User } from "@/lib/types"

export function UserManagement() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [newUser, setNewUser] = useState({
    nis: "",
    nama: "",
    password: "",
    role: "siswa" as "admin" | "guru" | "siswa",
  })

useEffect(() => {
    fetchUsers()
  }, [])

const fetchUsers = async () => {
    const res = await fetch("/api/admin/users")
    const data = await res.json()
    setUsers(data.users || [])
    setLoading(false)
  }

const handleAddUser = async () => {
    const res = await fetch("/api/admin/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newUser),
    })

if (res.ok) {
      setNewUser({ nis: "", nama: "", password: "", role: "siswa" })
      setIsDialogOpen(false)
      fetchUsers()
    }
  }

const handleDeleteUser = async (id: string) => {
    if (!confirm("Apakah Anda yakin ingin menghapus pengguna ini?")) return

await fetch(`/api/admin/users/${id}`, { method: "DELETE" })
    fetchUsers()
  }

const handleToggleLock = async (id: string, isLocked: boolean) => {
    await fetch(`/api/admin/users/${id}/lock`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ is_locked: !isLocked }),
    })
    fetchUsers()
  }

const getRoleBadge = (role: string) => {
    switch (role) {
      case "admin":
        return <Badge className="bg-red-500/10 text-red-400 border-red-500/30">Admin</Badge>
      case "guru":
        return <Badge className="bg-blue-500/10 text-blue-400 border-blue-500/30">Guru</Badge>
      default:
        return <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/30">Siswa</Badge>
    }
  }

return (
    <Card className="border-slate-700 bg-slate-800/50">
      <CardHeader className="flex flex-row items-center justify-between">
        <div>
          <CardTitle className="text-white">Manajemen Pengguna</CardTitle>
          <CardDescription className="text-slate-400">Kelola akun admin, guru, dan siswa</CardDescription>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button className="bg-emerald-600 hover:bg-emerald-700">
              <UserPlus className="w-4 h-4 mr-2" />
              Tambah Pengguna
            </Button>
          </DialogTrigger>
          <DialogContent className="bg-slate-800 border-slate-700">
            <DialogHeader>
              <DialogTitle className="text-white">Tambah Pengguna Baru</DialogTitle>
              <DialogDescription className="text-slate-400">Masukkan data pengguna baru</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label className="text-slate-300">NIS / Username</Label>
                <Input
                  value={newUser.nis}
                  onChange={(e) => setNewUser({ ...newUser, nis: e.target.value })}
                  className="bg-slate-700 border-slate-600 text-white"
                  placeholder="Masukkan NIS"
                />
              </div>
              <div className="space-y-2">
                <Label className="text-slate-300">Nama Lengkap</Label>
                <Input
                  value={newUser.nama}
                  onChange={(e) => setNewUser({ ...newUser, nama: e.target.value })}
                  className="bg-slate-700 border-slate-600 text-white"
                  placeholder="Masukkan nama lengkap"
                />
              </div>
              <div className="space-y-2">
                <Label className="text-slate-300">Password</Label>
                <Input
                  type="password"
                  value={newUser.password}
                  onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
                  className="bg-slate-700 border-slate-600 text-white"
                  placeholder="Masukkan password"
                />
              </div>
              <div className="space-y-2">
                <Label className="text-slate-300">Role</Label>
                <Select
                  value={newUser.role}
                  onValueChange={(value: "admin" | "guru" | "siswa") => setNewUser({ ...newUser, role: value })}
                >
                  <SelectTrigger className="bg-slate-700 border-slate-600 text-white">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-700 border-slate-600">
                    <SelectItem value="siswa">Siswa</SelectItem>
                    <SelectItem value="guru">Guru</SelectItem>
                    <SelectItem value="admin">Admin</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button onClick={handleAddUser} className="w-full bg-emerald-600 hover:bg-emerald-700">
                Tambah Pengguna
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </CardHeader>
      <CardContent>
        {loading ? (
          <div className="text-center py-8 text-slate-400">Memuat data...</div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow className="border-slate-700">
                <TableHead className="text-slate-400">NIS</TableHead>
                <TableHead className="text-slate-400">Nama</TableHead>
                <TableHead className="text-slate-400">Role</TableHead>
                <TableHead className="text-slate-400">Status</TableHead>
                <TableHead className="text-slate-400 text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {users.map((user) => (
                <TableRow key={user.id} className="border-slate-700">
                  <TableCell className="text-white font-mono">{user.nis}</TableCell>
                  <TableCell className="text-white">{user.nama}</TableCell>
                  <TableCell>{getRoleBadge(user.role)}</TableCell>
                  <TableCell>
                    {user.is_locked ? (
                      <Badge variant="destructive">Terkunci</Badge>
                    ) : (
                      <Badge className="bg-green-500/10 text-green-400 border-green-500/30">Aktif</Badge>
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleToggleLock(user.id, user.is_locked)}
                        className="border-slate-600"
                      >
                        {user.is_locked ? <Unlock className="w-4 h-4" /> : <Lock className="w-4 h-4" />}
                      </Button>
                      {user.nis !== "admin" && (
                        <Button size="sm" variant="destructive" onClick={() => handleDeleteUser(user.id)}>
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/exam-management.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Eye, Trash2 } from "lucide-react"
import type { Exam } from "@/lib/types"
import Link from "next/link"

export function ExamManagement() {
  const [exams, setExams] = useState<Exam[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchExams()
  }, [])

const fetchExams = async () => {
    const res = await fetch("/api/exams")
    const data = await res.json()
    setExams(data.exams || [])
    setLoading(false)
  }

const handleDelete = async (id: string) => {
    if (!confirm("Apakah Anda yakin ingin menghapus ujian ini?")) return

await fetch(`/api/exams/${id}`, { method: "DELETE" })
    fetchExams()
  }

const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleString("id-ID", {
      dateStyle: "medium",
      timeStyle: "short",
    })
  }

return (
    <Card className="border-slate-700 bg-slate-800/50">
      <CardHeader>
        <CardTitle className="text-white">Daftar Ujian</CardTitle>
        <CardDescription className="text-slate-400">Lihat dan kelola semua ujian yang dibuat oleh guru</CardDescription>
      </CardHeader>
      <CardContent>
        {loading ? (
          <div className="text-center py-8 text-slate-400">Memuat data...</div>
        ) : exams.length === 0 ? (
          <div className="text-center py-8 text-slate-400">Belum ada ujian</div>
        ) : (
          <Table>
            <TableHeader>
              <TableRow className="border-slate-700">
                <TableHead className="text-slate-400">Nama Ujian</TableHead>
                <TableHead className="text-slate-400">Jenis</TableHead>
                <TableHead className="text-slate-400">Pelaksanaan</TableHead>
                <TableHead className="text-slate-400">Token</TableHead>
                <TableHead className="text-slate-400">Status</TableHead>
                <TableHead className="text-slate-400 text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {exams.map((exam) => {
                const now = new Date()
                const start = new Date(exam.pelaksanaan_start)
                const end = new Date(exam.pelaksanaan_end)
                const isActive = now >= start && now <= end
                const isPast = now > end

return (
                  <TableRow key={exam.id} className="border-slate-700">
                    <TableCell className="text-white font-medium">{exam.nama_ujian}</TableCell>
                    <TableCell className="text-slate-300">{exam.jenis_ujian}</TableCell>
                    <TableCell className="text-slate-300">
                      <div className="text-sm">
                        <div>{formatDate(exam.pelaksanaan_start)}</div>
                        <div className="text-slate-500">s/d {formatDate(exam.pelaksanaan_end)}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <code className="bg-slate-700 px-2 py-1 rounded text-emerald-400">{exam.token}</code>
                    </TableCell>
                    <TableCell>
                      {isPast ? (
                        <Badge variant="secondary">Selesai</Badge>
                      ) : isActive ? (
                        <Badge className="bg-green-500/10 text-green-400">Aktif</Badge>
                      ) : (
                        <Badge className="bg-yellow-500/10 text-yellow-400">Terjadwal</Badge>
                      )}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Link href={`/admin/exam/${exam.id}`}>
                          <Button size="sm" variant="outline" className="border-slate-600 bg-transparent">
                            <Eye className="w-4 h-4" />
                          </Button>
                        </Link>
                        <Button size="sm" variant="destructive" onClick={() => handleDelete(exam.id)}>
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/security-logs.tsx" isMerged="true"
"use client"

interface SecurityLogEntry {
  id: string
  session_id: string
  user_id: string
  event_type: string
  event_data: Record<string, unknown>
  timestamp: string
  user?: { nama: string; nis: string }
  exam?: { nama_ujian: string }
}

export function SecurityLogs() {
  const [logs, setLogs] = useState<SecurityLogEntry[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchLogs()
  }, [])

const fetchLogs = async () => {
    setLoading(true)
    const res = await fetch("/api/admin/security-logs")
    const data = await res.json()
    setLogs(data.logs || [])
    setLoading(false)
  }

const handleUnlock = async (sessionId: string) => {
    await fetch(`/api/admin/sessions/${sessionId}/unlock`, { method: "POST" })
    fetchLogs()
  }

const getEventBadge = (type: string) => {
    const badges: Record<string, { className: string; label: string }> = {
      tab_switch: { className: "bg-yellow-500/10 text-yellow-400", label: "Tab Switch" },
      blur: { className: "bg-orange-500/10 text-orange-400", label: "Window Blur" },
      fullscreen_exit: { className: "bg-red-500/10 text-red-400", label: "Exit Fullscreen" },
      devtools_detected: { className: "bg-red-500/10 text-red-400", label: "DevTools" },
      copy_attempt: { className: "bg-purple-500/10 text-purple-400", label: "Copy Attempt" },
      paste_attempt: { className: "bg-purple-500/10 text-purple-400", label: "Paste Attempt" },
      keyboard_shortcut: { className: "bg-blue-500/10 text-blue-400", label: "Keyboard Shortcut" },
      time_tamper: { className: "bg-red-500/10 text-red-400", label: "Time Tamper" },
      minimize_detected: { className: "bg-orange-500/10 text-orange-400", label: "Minimize" },
      locked: { className: "bg-red-500/10 text-red-400", label: "Locked" },
    }

const badge = badges[type] || { className: "bg-slate-500/10 text-slate-400", label: type }
    return <Badge className={badge.className}>{badge.label}</Badge>
  }

const formatTime = (dateStr: string) => {
    return new Date(dateStr).toLocaleString("id-ID", {
      dateStyle: "short",
      timeStyle: "medium",
    })
  }

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import type { Exam, ExamSession } from "@/lib/types"

interface SessionWithUser extends ExamSession {
  user?: { nama: string; nis: string }
}

export function ScoreManagement() {
  const [exams, setExams] = useState<Exam[]>([])
  const [selectedExam, setSelectedExam] = useState<string>("")
  const [sessions, setSessions] = useState<SessionWithUser[]>([])
  const [loading, setLoading] = useState(false)

useEffect(() => {
    fetchExams()
  }, [])

useEffect(() => {
    if (selectedExam) {
      fetchSessions(selectedExam)
    }
  }, [selectedExam])

const fetchExams = async () => {
    const res = await fetch("/api/exams")
    const data = await res.json()
    setExams(data.exams || [])
  }

const fetchSessions = async (examId: string) => {
    setLoading(true)
    const res = await fetch(`/api/exams/${examId}/sessions`)
    const data = await res.json()
    setSessions(data.sessions || [])
    setLoading(false)
  }

const formatDate = (dateStr: string | null) => {
    if (!dateStr) return "-"
    return new Date(dateStr).toLocaleString("id-ID", {
      dateStyle: "short",
      timeStyle: "short",
    })
  }

return (
    <Card className="border-slate-700 bg-slate-800/50">
      <CardHeader>
        <CardTitle className="text-white">Manajemen Nilai</CardTitle>
        <CardDescription className="text-slate-400">Lihat hasil ujian dan nilai siswa</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <Select value={selectedExam} onValueChange={setSelectedExam}>
          <SelectTrigger className="w-full md:w-[300px] bg-slate-700 border-slate-600 text-white">
            <SelectValue placeholder="Pilih Ujian" />
          </SelectTrigger>
          <SelectContent className="bg-slate-700 border-slate-600">
            {exams.map((exam) => (
              <SelectItem key={exam.id} value={exam.id}>
                {exam.nama_ujian}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

{selectedExam && (
          <>
            {loading ? (
              <div className="text-center py-8 text-slate-400">Memuat data...</div>
            ) : sessions.length === 0 ? (
              <div className="text-center py-8 text-slate-400">Belum ada peserta</div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow className="border-slate-700">
                    <TableHead className="text-slate-400">NIS</TableHead>
                    <TableHead className="text-slate-400">Nama</TableHead>
                    <TableHead className="text-slate-400">Mulai</TableHead>
                    <TableHead className="text-slate-400">Selesai</TableHead>
                    <TableHead className="text-slate-400">Status</TableHead>
                    <TableHead className="text-slate-400 text-right">Nilai</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sessions.map((session) => (
                    <TableRow key={session.id} className="border-slate-700">
                      <TableCell className="text-white font-mono">{session.user?.nis}</TableCell>
                      <TableCell className="text-white">{session.user?.nama}</TableCell>
                      <TableCell className="text-slate-300">{formatDate(session.started_at)}</TableCell>
                      <TableCell className="text-slate-300">{formatDate(session.finished_at)}</TableCell>
                      <TableCell>
                        {session.is_locked ? (
                          <Badge variant="destructive">Terkunci</Badge>
                        ) : session.finished_at ? (
                          <Badge className="bg-green-500/10 text-green-400">Selesai</Badge>
                        ) : (
                          <Badge className="bg-yellow-500/10 text-yellow-400">Berlangsung</Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <span className="text-2xl font-bold text-emerald-400">
                          {session.score !== null ? session.score.toFixed(1) : "-"}
                        </span>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="app/api/admin/users/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import { hashPassword } from "@/lib/auth"

export async function GET() {
  const supabase = await createClient()

const { data: users, error } = await supabase
    .from("users")
    .select("id, nis, nama, role, is_locked, created_at")
    .order("created_at", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ users })
}

export async function POST(request: Request) {
  const supabase = await createClient()
  const { nis, nama, password, role } = await request.json()

if (!nis || !nama || !password) {
    return NextResponse.json({ error: "Data tidak lengkap" }, { status: 400 })
  }

const hashedPassword = await hashPassword(password)

const { data, error } = await supabase
    .from("users")
    .insert({
      nis,
      nama,
      password: hashedPassword,
      role: role || "siswa",
    })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ user: data })
}
[V0_FILE]typescript:file="app/api/admin/users/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { error } = await supabase.from("users").delete().eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/admin/users/[id]/lock/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()
  const { is_locked } = await request.json()

const { error } = await supabase.from("users").update({ is_locked }).eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/admin/security-logs/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET() {
  const supabase = await createClient()

const { data: logs, error } = await supabase
    .from("security_logs")
    .select(`
      *,
      exam_sessions!inner(
        exam_id,
        exams(nama_ujian)
      )
    `)
    .order("timestamp", { ascending: false })
    .limit(100)

if (error) {
    // Try simpler query if join fails
    const { data: simpleLogs, error: simpleError } = await supabase
      .from("security_logs")
      .select("*")
      .order("timestamp", { ascending: false })
      .limit(100)

if (simpleError) {
      return NextResponse.json({ error: simpleError.message }, { status: 500 })
    }

// Fetch user data separately
    const userIds = [...new Set(simpleLogs?.map((l) => l.user_id) || [])]
    const { data: users } = await supabase.from("users").select("id, nama, nis").in("id", userIds)

const userMap = new Map(users?.map((u) => [u.id, u]) || [])

const logsWithUsers = simpleLogs?.map((log) => ({
      ...log,
      user: userMap.get(log.user_id),
    }))

return NextResponse.json({ logs: logsWithUsers })
  }

return NextResponse.json({ logs })
}
[V0_FILE]typescript:file="app/api/admin/sessions/[id]/unlock/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { error } = await supabase.from("exam_sessions").update({ is_locked: false, lock_reason: null }).eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/exams/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import { cookies } from "next/headers"

export async function GET() {
  const supabase = await createClient()

const { data: exams, error } = await supabase.from("exams").select("*").order("created_at", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ exams })
}

export async function POST(request: Request) {
  const supabase = await createClient()
  const cookieStore = await cookies()
  const session = cookieStore.get("exam_session")

if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const user = JSON.parse(session.value)
  const body = await request.json()

// Generate random token
  const token = Math.random().toString(36).substring(2, 8).toUpperCase()

const { data, error } = await supabase
    .from("exams")
    .insert({
      nama_ujian: body.nama_ujian,
      jenis_ujian: body.jenis_ujian,
      pelaksanaan_start: body.pelaksanaan_start,
      pelaksanaan_end: body.pelaksanaan_end,
      durasi_menit: body.durasi_menit || 60,
      token,
      created_by: user.id,
    })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ exam: data })
}
[V0_FILE]typescript:file="app/api/exams/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: exam, error } = await supabase.from("exams").select("*").eq("id", id).single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ exam })
}

export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()
  const body = await request.json()

const { data, error } = await supabase.from("exams").update(body).eq("id", id).select().single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ exam: data })
}

export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { error } = await supabase.from("exams").delete().eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/exams/[id]/questions/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: questions, error } = await supabase
    .from("questions")
    .select("*")
    .eq("exam_id", id)
    .order("nomor", { ascending: true })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ questions })
}

export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()
  const body = await request.json()

// Get next question number
  const { data: existing } = await supabase
    .from("questions")
    .select("nomor")
    .eq("exam_id", id)
    .order("nomor", { ascending: false })
    .limit(1)

const nextNomor = existing && existing.length > 0 ? existing[0].nomor + 1 : 1

const { data, error } = await supabase
    .from("questions")
    .insert({
      exam_id: id,
      nomor: nextNomor,
      tipe: body.tipe,
      soal: body.soal,
      pilihan: body.pilihan,
      jawaban_benar: body.jawaban_benar,
      poin: body.poin || 1,
    })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ question: data })
}
[V0_FILE]typescript:file="app/api/exams/[id]/questions/[questionId]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function PATCH(request: Request, { params }: { params: Promise<{ id: string; questionId: string }> }) {
  const { questionId } = await params
  const supabase = await createClient()
  const body = await request.json()

const { data, error } = await supabase.from("questions").update(body).eq("id", questionId).select().single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ question: data })
}

export async function DELETE(request: Request, { params }: { params: Promise<{ id: string; questionId: string }> }) {
  const { questionId } = await params
  const supabase = await createClient()

const { error } = await supabase.from("questions").delete().eq("id", questionId)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/exams/[id]/sessions/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const supabase = await createClient()

const { data: sessions, error } = await supabase
    .from("exam_sessions")
    .select("*")
    .eq("exam_id", id)
    .order("started_at", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

// Get user info
  const userIds = [...new Set(sessions?.map((s) => s.user_id) || [])]
  const { data: users } = await supabase.from("users").select("id, nama, nis").in("id", userIds)

const userMap = new Map(users?.map((u) => [u.id, u]) || [])

const sessionsWithUsers = sessions?.map((session) => ({
    ...session,
    user: userMap.get(session.user_id),
  }))

return NextResponse.json({ sessions: sessionsWithUsers })
}
[V0_FILE]typescriptreact:file="app/guru/exam/[id]/results/page.tsx" isMerged="true"
"use client"

import { useEffect, useState, use } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Download } from "lucide-react"
import type { Exam, ExamSession } from "@/lib/types"
import Link from "next/link"

interface SessionWithUser extends ExamSession {
  user?: { nama: string; nis: string }
}

export default function ResultsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: examId } = use(params)
  const [exam, setExam] = useState<Exam | null>(null)
  const [sessions, setSessions] = useState<SessionWithUser[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchData()
  }, [examId])

const fetchData = async () => {
    const [examRes, sessionsRes] = await Promise.all([
      fetch(`/api/exams/${examId}`),
      fetch(`/api/exams/${examId}/sessions`),
    ])

const examData = await examRes.json()
    const sessionsData = await sessionsRes.json()

setExam(examData.exam)
    setSessions(sessionsData.sessions || [])
    setLoading(false)
  }

const formatDate = (dateStr: string | null) => {
    if (!dateStr) return "-"
    return new Date(dateStr).toLocaleString("id-ID", {
      dateStyle: "short",
      timeStyle: "short",
    })
  }

const exportCSV = () => {
    const headers = ["NIS", "Nama", "Mulai", "Selesai", "Status", "Nilai"]
    const rows = sessions.map((s) => [
      s.user?.nis || "",
      s.user?.nama || "",
      formatDate(s.started_at),
      formatDate(s.finished_at),
      s.is_locked ? "Terkunci" : s.finished_at ? "Selesai" : "Berlangsung",
      s.score?.toString() || "-",
    ])

const csv = [headers, ...rows].map((r) => r.join(",")).join("\n")
    const blob = new Blob([csv], { type: "text/csv" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `hasil-${exam?.nama_ujian || "ujian"}.csv`
    a.click()
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-slate-900">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-emerald-500"></div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-slate-900">
      <header className="border-b border-slate-700 bg-slate-800/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center gap-4">
          <Link href="/guru">
            <Button variant="ghost" size="icon" className="text-slate-400">
              <ArrowLeft className="w-5 h-5" />
            </Button>
          </Link>
          <div className="flex-1">
            <h1 className="text-lg font-semibold text-white">{exam?.nama_ujian}</h1>
            <p className="text-sm text-slate-400">Hasil Ujian</p>
          </div>
          <Button onClick={exportCSV} variant="outline" className="border-slate-600 bg-transparent">
            <Download className="w-4 h-4 mr-2" />
            Export CSV
          </Button>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        <Card className="border-slate-700 bg-slate-800/50">
          <CardHeader>
            <CardTitle className="text-white">Daftar Peserta</CardTitle>
            <CardDescription className="text-slate-400">Total: {sessions.length} peserta</CardDescription>
          </CardHeader>
          <CardContent>
            {sessions.length === 0 ? (
              <div className="text-center py-8 text-slate-400">Belum ada peserta</div>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow className="border-slate-700">
                    <TableHead className="text-slate-400">NIS</TableHead>
                    <TableHead className="text-slate-400">Nama</TableHead>
                    <TableHead className="text-slate-400">Mulai</TableHead>
                    <TableHead className="text-slate-400">Selesai</TableHead>
                    <TableHead className="text-slate-400">Status</TableHead>
                    <TableHead className="text-slate-400 text-right">Nilai</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {sessions.map((session) => (
                    <TableRow key={session.id} className="border-slate-700">
                      <TableCell className="text-white font-mono">{session.user?.nis}</TableCell>
                      <TableCell className="text-white">{session.user?.nama}</TableCell>
                      <TableCell className="text-slate-300">{formatDate(session.started_at)}</TableCell>
                      <TableCell className="text-slate-300">{formatDate(session.finished_at)}</TableCell>
                      <TableCell>
                        {session.is_locked ? (
                          <Badge variant="destructive">Terkunci</Badge>
                        ) : session.finished_at ? (
                          <Badge className="bg-green-500/10 text-green-400">Selesai</Badge>
                        ) : (
                          <Badge className="bg-yellow-500/10 text-yellow-400">Berlangsung</Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <span className="text-2xl font-bold text-emerald-400">
                          {session.score !== null ? session.score.toFixed(1) : "-"}
                        </span>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/siswa/sessions/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const userId = searchParams.get("userId")

if (!userId) {
    return NextResponse.json({ error: "User ID required" }, { status: 400 })
  }

const supabase = await createClient()

const { data: sessions, error } = await supabase
    .from("exam_sessions")
    .select("*, exams(nama_ujian, jenis_ujian)")
    .eq("user_id", userId)
    .order("started_at", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ sessions })
}
[V0_FILE]typescript:file="app/api/siswa/join-exam/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import { cookies } from "next/headers"

export async function POST(request: Request) {
  const { token } = await request.json()
  const cookieStore = await cookies()
  const sessionCookie = cookieStore.get("exam_session")

if (!sessionCookie) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const user = JSON.parse(sessionCookie.value)
  const supabase = await createClient()

// Find exam by token
  const { data: exam, error: examError } = await supabase
    .from("exams")
    .select("*")
    .eq("token", token.toUpperCase())
    .single()

if (examError || !exam) {
    return NextResponse.json({ error: "Token tidak valid" }, { status: 400 })
  }

// Check if exam is active
  const now = new Date()
  const start = new Date(exam.pelaksanaan_start)
  const end = new Date(exam.pelaksanaan_end)

if (now < start) {
    return NextResponse.json({ error: "Ujian belum dimulai" }, { status: 400 })
  }

if (now > end) {
    return NextResponse.json({ error: "Ujian sudah berakhir" }, { status: 400 })
  }

// Check if user already has a session
  const { data: existingSession } = await supabase
    .from("exam_sessions")
    .select("*")
    .eq("exam_id", exam.id)
    .eq("user_id", user.id)
    .single()

if (existingSession) {
    if (existingSession.is_locked) {
      return NextResponse.json({ error: "Akun Anda terkunci untuk ujian ini. Hubungi admin." }, { status: 403 })
    }

if (existingSession.finished_at) {
      return NextResponse.json({ error: "Anda sudah menyelesaikan ujian ini" }, { status: 400 })
    }

return NextResponse.json({ session: existingSession, exam })
  }

// Create new session
  const { data: newSession, error: sessionError } = await supabase
    .from("exam_sessions")
    .insert({
      exam_id: exam.id,
      user_id: user.id,
    })
    .select()
    .single()

if (sessionError) {
    return NextResponse.json({ error: sessionError.message }, { status: 500 })
  }

return NextResponse.json({ session: newSession, exam })
}
[V0_FILE]typescript:file="app/api/siswa/change-password/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import { cookies } from "next/headers"
import { hashPassword, verifyPassword } from "@/lib/auth"

export async function POST(request: Request) {
  const { currentPassword, newPassword } = await request.json()
  const cookieStore = await cookies()
  const sessionCookie = cookieStore.get("exam_session")

if (!sessionCookie) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const user = JSON.parse(sessionCookie.value)
  const supabase = await createClient()

// Get current user data
  const { data: userData, error: userError } = await supabase
    .from("users")
    .select("password")
    .eq("id", user.id)
    .single()

if (userError || !userData) {
    return NextResponse.json({ error: "User tidak ditemukan" }, { status: 404 })
  }

// Verify current password
  const isValid = await verifyPassword(currentPassword, userData.password)
  if (!isValid) {
    return NextResponse.json({ error: "Password saat ini salah" }, { status: 400 })
  }

// Hash new password
  const hashedPassword = await hashPassword(newPassword)

// Update password
  const { error: updateError } = await supabase.from("users").update({ password: hashedPassword }).eq("id", user.id)

if (updateError) {
    return NextResponse.json({ error: updateError.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/server-time/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET() {
  return NextResponse.json({ time: Date.now() })
}
[V0_FILE]typescript:file="app/api/siswa/exam-session/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import { cookies } from "next/headers"

export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id: examId } = await params
  const cookieStore = await cookies()
  const sessionCookie = cookieStore.get("exam_session")

if (!sessionCookie) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const user = JSON.parse(sessionCookie.value)
  const supabase = await createClient()

const { data: session, error } = await supabase
    .from("exam_sessions")
    .select("*")
    .eq("exam_id", examId)
    .eq("user_id", user.id)
    .single()

if (error) {
    return NextResponse.json({ session: null })
  }

return NextResponse.json({ session })
}
[V0_FILE]typescript:file="app/api/siswa/security-log/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import { cookies } from "next/headers"

export async function POST(request: Request) {
  const { session_id, event_type, event_data } = await request.json()
  const cookieStore = await cookies()
  const sessionCookie = cookieStore.get("exam_session")

if (!sessionCookie) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }

const user = JSON.parse(sessionCookie.value)
  const supabase = await createClient()

const { error } = await supabase.from("security_logs").insert({
    session_id,
    user_id: user.id,
    event_type,
    event_data,
  })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/siswa/sessions/[id]/lock/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function POST(request: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const { reason } = await request.json()
  const supabase = await createClient()

const { error } = await supabase.from("exam_sessions").update({ is_locked: true, lock_reason: reason }).eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/siswa/sessions/[id]/save/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

const { error } = await supabase.from("exam_sessions").update({ answers }).eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "@supabase/ssr": "0.8.0",
    "bcryptjs": "3.0.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]sql:file="scripts/002-fix-policies.sql" isMerged="true"
-- Drop existing policies if they exist and recreate them
DROP POLICY IF EXISTS "Users can view own profile" ON users;
DROP POLICY IF EXISTS "Users can update own profile" ON users;
DROP POLICY IF EXISTS "Admins and teachers can view all users" ON users;
DROP POLICY IF EXISTS "Admins can manage all users" ON users;
DROP POLICY IF EXISTS "Anyone can view active exams" ON exams;
DROP POLICY IF EXISTS "Teachers can manage own exams" ON exams;
DROP POLICY IF EXISTS "Admins can manage all exams" ON exams;
DROP POLICY IF EXISTS "View questions for accessible exams" ON questions;
DROP POLICY IF EXISTS "Teachers can manage own exam questions" ON questions;
DROP POLICY IF EXISTS "Admins can manage all questions" ON questions;
DROP POLICY IF EXISTS "Students can view own sessions" ON exam_sessions;
DROP POLICY IF EXISTS "Students can create own sessions" ON exam_sessions;
DROP POLICY IF EXISTS "Students can update own sessions" ON exam_sessions;
DROP POLICY IF EXISTS "Teachers can view sessions for own exams" ON exam_sessions;
DROP POLICY IF EXISTS "Admins can view all sessions" ON exam_sessions;
DROP POLICY IF EXISTS "Users can insert own logs" ON security_logs;
DROP POLICY IF EXISTS "Admins can view all logs" ON security_logs;

-- Recreate policies for users table
CREATE POLICY "Users can view own profile" ON users
  FOR SELECT USING (auth.uid() = id);

CREATE POLICY "Users can update own profile" ON users
  FOR UPDATE USING (auth.uid() = id);

CREATE POLICY "Admins and teachers can view all users" ON users
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM users u 
      WHERE u.id = auth.uid() 
      AND u.role IN ('admin', 'teacher')
    )
  );

CREATE POLICY "Admins can manage all users" ON users
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM users u 
      WHERE u.id = auth.uid() 
      AND u.role = 'admin'
    )
  );

-- Recreate policies for exams table
CREATE POLICY "Anyone can view active exams" ON exams
  FOR SELECT USING (is_active = true OR created_by = auth.uid());

CREATE POLICY "Teachers can manage own exams" ON exams
  FOR ALL USING (created_by = auth.uid());

CREATE POLICY "Admins can manage all exams" ON exams
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM users u 
      WHERE u.id = auth.uid() 
      AND u.role = 'admin'
    )
  );

-- Recreate policies for questions table
CREATE POLICY "View questions for accessible exams" ON questions
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM exams e 
      WHERE e.id = exam_id 
      AND (e.is_active = true OR e.created_by = auth.uid())
    )
  );

CREATE POLICY "Teachers can manage own exam questions" ON questions
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM exams e 
      WHERE e.id = exam_id 
      AND e.created_by = auth.uid()
    )
  );

CREATE POLICY "Admins can manage all questions" ON questions
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM users u 
      WHERE u.id = auth.uid() 
      AND u.role = 'admin'
    )
  );

-- Recreate policies for exam_sessions table
CREATE POLICY "Students can view own sessions" ON exam_sessions
  FOR SELECT USING (student_id = auth.uid());

CREATE POLICY "Students can create own sessions" ON exam_sessions
  FOR INSERT WITH CHECK (student_id = auth.uid());

CREATE POLICY "Students can update own sessions" ON exam_sessions
  FOR UPDATE USING (student_id = auth.uid());

CREATE POLICY "Teachers can view sessions for own exams" ON exam_sessions
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM exams e 
      WHERE e.id = exam_id 
      AND e.created_by = auth.uid()
    )
  );

CREATE POLICY "Admins can view all sessions" ON exam_sessions
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM users u 
      WHERE u.id = auth.uid() 
      AND u.role = 'admin'
    )
  );

-- Recreate policies for security_logs table
CREATE POLICY "Users can insert own logs" ON security_logs
  FOR INSERT WITH CHECK (user_id = auth.uid());

CREATE POLICY "Admins can view all logs" ON security_logs
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM users u 
      WHERE u.id = auth.uid() 
      AND u.role = 'admin'
    )
  );

-- Make sure admin user exists with proper password
-- First check and insert if not exists
INSERT INTO users (id, nis, name, email, password_hash, role, class, is_active)
SELECT 
  gen_random_uuid(),
  'admin',
  'Administrator',
  'admin@school.com',
  crypt('adminsija262626', gen_salt('bf')),
  'admin',
  NULL,
  true
WHERE NOT EXISTS (
  SELECT 1 FROM users WHERE nis = 'admin'
);
[V0_FILE]sql:file="scripts/003-ensure-admin.sql" isMerged="true"
-- Script to ensure admin user exists
-- This script is safe to run multiple times

-- Insert default admin user if not exists
INSERT INTO users (nis, nama, password, role)
VALUES ('admin', 'Administrator', 'adminsija262626', 'admin')
ON CONFLICT (nis) DO NOTHING;

-- Verify admin exists
SELECT id, nis, nama, role FROM users WHERE role = 'admin';
[V0_FILE]typescript:file="lib/session.ts" isMerged="true"
// Session helper untuk client-side
const SESSION_KEY = "exam_session_backup"

export function saveSessionBackup(token: string) {
  if (typeof window !== "undefined") {
    localStorage.setItem(SESSION_KEY, token)
    // Also set cookie from client side
    document.cookie = `exam_session=${encodeURIComponent(token)}; path=/; max-age=${60 * 60 * 24}; samesite=lax`
  }
}

export function getSessionBackup(): string | null {
  if (typeof window !== "undefined") {
    return localStorage.getItem(SESSION_KEY)
  }
  return null
}

export function clearSessionBackup() {
  if (typeof window !== "undefined") {
    localStorage.removeItem(SESSION_KEY)
    document.cookie = "exam_session=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"
  }
}

export async function fetchSessionWithBackup() {
  const backupToken = getSessionBackup()

const headers: HeadersInit = {}
  if (backupToken) {
    headers["Authorization"] = `Bearer ${backupToken}`
  }

const res = await fetch("/api/auth/session", {
    credentials: "include",
    cache: "no-store",
    headers,
  })

return res.json()
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, GraduationCap, BookOpen, Shield, LogOut, AlertTriangle, Loader2 } from "lucide-react"
import { UserManagement } from "@/components/admin/user-management"
import { ExamManagement } from "@/components/admin/exam-management"
import { SecurityLogs } from "@/components/admin/security-logs"
import { ScoreManagement } from "@/components/admin/score-management"
import type { User } from "@/lib/types"
import { fetchSessionWithBackup, clearSessionBackup } from "@/lib/session"

export default function AdminDashboard() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const router = useRouter()

useEffect(() => {
    async function checkSession() {
      try {
        const data = await fetchSessionWithBackup()

if (!data.user) {
          router.replace("/login")
          return
        }

if (data.user.role !== "admin") {
          switch (data.user.role) {
            case "guru":
              router.replace("/guru")
              break
            case "siswa":
              router.replace("/siswa")
              break
            default:
              router.replace("/login")
          }
          return
        }

setUser(data.user)
        setLoading(false)
      } catch {
        router.replace("/login")
      }
    }

checkSession()
  }, [router])

const handleLogout = async () => {
    clearSessionBackup()
    await fetch("/api/auth/logout", { method: "POST", credentials: "include" })
    router.replace("/login")
  }

if (loading) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-slate-900 gap-4">
        <Loader2 className="w-12 h-12 animate-spin text-emerald-500" />
        <p className="text-slate-400">Memuat dashboard...</p>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-slate-900">
      <header className="border-b border-slate-700 bg-slate-800/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-emerald-500/10 rounded-lg flex items-center justify-center">
              <Shield className="w-5 h-5 text-emerald-500" />
            </div>
            <div>
              <h1 className="text-lg font-semibold text-white">Admin Dashboard</h1>
              <p className="text-sm text-slate-400">Selamat datang, {user?.nama}</p>
            </div>
          </div>
          <Button
            variant="outline"
            onClick={handleLogout}
            className="border-slate-600 text-slate-300 hover:bg-slate-700 bg-transparent"
          >
            <LogOut className="w-4 h-4 mr-2" />
            Keluar
          </Button>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        <Tabs defaultValue="users" className="space-y-6">
          <TabsList className="bg-slate-800 border border-slate-700">
            <TabsTrigger value="users" className="data-[state=active]:bg-emerald-600">
              <Users className="w-4 h-4 mr-2" />
              Pengguna
            </TabsTrigger>
            <TabsTrigger value="exams" className="data-[state=active]:bg-emerald-600">
              <BookOpen className="w-4 h-4 mr-2" />
              Ujian
            </TabsTrigger>
            <TabsTrigger value="scores" className="data-[state=active]:bg-emerald-600">
              <GraduationCap className="w-4 h-4 mr-2" />
              Nilai
            </TabsTrigger>
            <TabsTrigger value="security" className="data-[state=active]:bg-emerald-600">
              <AlertTriangle className="w-4 h-4 mr-2" />
              Keamanan
            </TabsTrigger>
          </TabsList>

<TabsContent value="security">
            <SecurityLogs />
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/auth/logout/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function POST() {
  const cookieStore = await cookies()

// Delete the session cookie
  cookieStore.delete("exam_session")

const response = NextResponse.json({ success: true })

// Also clear via response to ensure it's deleted
  response.cookies.set("exam_session", "", {
    httpOnly: false,
    secure: false,
    sameSite: "lax",
    maxAge: 0,
    path: "/",
  })

return response
}
[V0_FILE]typescript:file="app/api/auth/login/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { login } from "@/lib/auth"

export async function POST(request: Request) {
  try {
    const { nis, password } = await request.json()

if (!nis || !password) {
      return NextResponse.json({ error: "NIS dan password harus diisi" }, { status: 400 })
    }

const user = await login(nis, password)

if (!user) {
      return NextResponse.json({ error: "NIS atau password salah" }, { status: 401 })
    }

const sessionData = JSON.stringify(user)

const response = NextResponse.json({
      user,
      sessionToken: sessionData,
    })

response.cookies.set("exam_session", sessionData, {
      httpOnly: false,
      secure: false,
      sameSite: "lax",
      maxAge: 60 * 60 * 24,
      path: "/",
    })

return response
  } catch (error) {
    const message = error instanceof Error ? error.message : "Login gagal"
    return NextResponse.json({ error: message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/auth/session/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function GET(request: Request) {
  try {
    const cookieStore = await cookies()
    const sessionCookie = cookieStore.get("exam_session")

if (sessionCookie) {
      try {
        const user = JSON.parse(sessionCookie.value)
        return NextResponse.json({ user })
      } catch {
        // Invalid cookie format
      }
    }

// Fallback to Authorization header
    const authHeader = request.headers.get("Authorization")
    if (authHeader?.startsWith("Bearer ")) {
      try {
        const token = authHeader.substring(7)
        const user = JSON.parse(token)
        return NextResponse.json({ user })
      } catch {
        // Invalid auth header
      }
    }

return NextResponse.json({ user: null })
  } catch {
    return NextResponse.json({ user: null })
  }
}

export async function POST(request: Request) {
  try {
    const { sessionToken } = await request.json()

if (!sessionToken) {
      return NextResponse.json({ error: "No session token" }, { status: 400 })
    }

const user = JSON.parse(sessionToken)

const response = NextResponse.json({ user, success: true })

response.cookies.set("exam_session", sessionToken, {
      httpOnly: false,
      secure: false,
      sameSite: "lax",
      maxAge: 60 * 60 * 24,
      path: "/",
    })

return response
  } catch {
    return NextResponse.json({ error: "Failed to set session" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/guru/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, ClipboardList, LogOut, Plus, Loader2 } from "lucide-react"
import { ExamList } from "@/components/guru/exam-list"
import { CreateExam } from "@/components/guru/create-exam"
import type { User } from "@/lib/types"
import { fetchSessionWithBackup, clearSessionBackup } from "@/lib/session"

export default function GuruDashboard() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("exams")
  const router = useRouter()

useEffect(() => {
    async function checkSession() {
      try {
        const data = await fetchSessionWithBackup()

if (!data.user) {
          router.replace("/login")
          return
        }

if (!["admin", "guru"].includes(data.user.role)) {
          if (data.user.role === "siswa") {
            router.replace("/siswa")
          } else {
            router.replace("/login")
          }
          return
        }

setUser(data.user)
        setLoading(false)
      } catch {
        router.replace("/login")
      }
    }

checkSession()
  }, [router])

const handleLogout = async () => {
    clearSessionBackup()
    await fetch("/api/auth/logout", { method: "POST", credentials: "include" })
    router.replace("/login")
  }

if (loading) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-slate-900 gap-4">
        <Loader2 className="w-12 h-12 animate-spin text-blue-500" />
        <p className="text-slate-400">Memuat dashboard...</p>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-slate-900">
      <header className="border-b border-slate-700 bg-slate-800/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center">
              <BookOpen className="w-5 h-5 text-blue-500" />
            </div>
            <div>
              <h1 className="text-lg font-semibold text-white">Dashboard Guru</h1>
              <p className="text-sm text-slate-400">Selamat datang, {user?.nama}</p>
            </div>
          </div>
          <Button
            variant="outline"
            onClick={handleLogout}
            className="border-slate-600 text-slate-300 hover:bg-slate-700 bg-transparent"
          >
            <LogOut className="w-4 h-4 mr-2" />
            Keluar
          </Button>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="bg-slate-800 border border-slate-700">
            <TabsTrigger value="exams" className="data-[state=active]:bg-blue-600">
              <ClipboardList className="w-4 h-4 mr-2" />
              Daftar Ujian
            </TabsTrigger>
            <TabsTrigger value="create" className="data-[state=active]:bg-blue-600">
              <Plus className="w-4 h-4 mr-2" />
              Buat Ujian
            </TabsTrigger>
          </TabsList>

<TabsContent value="create">
            <CreateExam onSuccess={() => setActiveTab("exams")} />
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/siswa/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { BookOpen, Key, Lock, LogOut, Settings, Play, Loader2 } from "lucide-react"
import type { User, ExamSession } from "@/lib/types"
import { fetchSessionWithBackup, clearSessionBackup } from "@/lib/session"

interface SessionWithExam extends ExamSession {
  exams?: { nama_ujian: string; jenis_ujian: string }
}

export default function SiswaDashboard() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [token, setToken] = useState("")
  const [tokenError, setTokenError] = useState<string | null>(null)
  const [tokenLoading, setTokenLoading] = useState(false)
  const [sessions, setSessions] = useState<SessionWithExam[]>([])
  const [passwordForm, setPasswordForm] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })
  const [passwordError, setPasswordError] = useState<string | null>(null)
  const [passwordSuccess, setPasswordSuccess] = useState(false)
  const router = useRouter()

const fetchSessions = async (userId: string) => {
    const res = await fetch(`/api/siswa/sessions?userId=${userId}`)
    const data = await res.json()
    setSessions(data.sessions || [])
  }

useEffect(() => {
    async function checkSession() {
      try {
        const data = await fetchSessionWithBackup()

if (!data.user) {
          router.replace("/login")
          return
        }

if (data.user.role !== "siswa") {
          switch (data.user.role) {
            case "admin":
              router.replace("/admin")
              break
            case "guru":
              router.replace("/guru")
              break
            default:
              router.replace("/login")
          }
          return
        }

setUser(data.user)
        fetchSessions(data.user.id)
        setLoading(false)
      } catch {
        router.replace("/login")
      }
    }

checkSession()
  }, [router])

const handleLogout = async () => {
    clearSessionBackup()
    await fetch("/api/auth/logout", { method: "POST", credentials: "include" })
    router.replace("/login")
  }

const handleTokenSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setTokenLoading(true)
    setTokenError(null)

try {
      const res = await fetch("/api/siswa/join-exam", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token }),
        credentials: "include",
      })

const data = await res.json()

if (!res.ok) {
        throw new Error(data.error || "Token tidak valid")
      }

router.push(`/siswa/exam/${data.session.exam_id}`)
    } catch (err) {
      setTokenError(err instanceof Error ? err.message : "Terjadi kesalahan")
    } finally {
      setTokenLoading(false)
    }
  }

const handlePasswordChange = async (e: React.FormEvent) => {
    e.preventDefault()
    setPasswordError(null)
    setPasswordSuccess(false)

if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      setPasswordError("Password baru tidak cocok")
      return
    }

if (passwordForm.newPassword.length < 6) {
      setPasswordError("Password minimal 6 karakter")
      return
    }

try {
      const res = await fetch("/api/siswa/change-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          currentPassword: passwordForm.currentPassword,
          newPassword: passwordForm.newPassword,
        }),
        credentials: "include",
      })

const data = await res.json()

if (!res.ok) {
        throw new Error(data.error || "Gagal mengubah password")
      }

setPasswordSuccess(true)
      setPasswordForm({ currentPassword: "", newPassword: "", confirmPassword: "" })
    } catch (err) {
      setPasswordError(err instanceof Error ? err.message : "Terjadi kesalahan")
    }
  }

const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleString("id-ID", {
      dateStyle: "medium",
      timeStyle: "short",
    })
  }

return (
    <div className="min-h-screen bg-slate-900">
      <header className="border-b border-slate-700 bg-slate-800/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-emerald-500/10 rounded-lg flex items-center justify-center">
              <BookOpen className="w-5 h-5 text-emerald-500" />
            </div>
            <div>
              <h1 className="text-lg font-semibold text-white">Dashboard Siswa</h1>
              <p className="text-sm text-slate-400">Selamat datang, {user?.nama}</p>
            </div>
          </div>
          <Button
            variant="outline"
            onClick={handleLogout}
            className="border-slate-600 text-slate-300 hover:bg-slate-700 bg-transparent"
          >
            <LogOut className="w-4 h-4 mr-2" />
            Keluar
          </Button>
        </div>
      </header>

<main className="container mx-auto px-4 py-8">
        <Tabs defaultValue="exam" className="space-y-6">
          <TabsList className="bg-slate-800 border border-slate-700">
            <TabsTrigger value="exam" className="data-[state=active]:bg-emerald-600">
              <Play className="w-4 h-4 mr-2" />
              Ikuti Ujian
            </TabsTrigger>
            <TabsTrigger value="history" className="data-[state=active]:bg-emerald-600">
              <BookOpen className="w-4 h-4 mr-2" />
              Riwayat
            </TabsTrigger>
            <TabsTrigger value="settings" className="data-[state=active]:bg-emerald-600">
              <Settings className="w-4 h-4 mr-2" />
              Pengaturan
            </TabsTrigger>
          </TabsList>

<TabsContent value="exam">
            <Card className="border-slate-700 bg-slate-800/50 max-w-md">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <Key className="w-5 h-5" />
                  Masukkan Token Ujian
                </CardTitle>
                <CardDescription className="text-slate-400">
                  Masukkan token yang diberikan oleh guru untuk mengikuti ujian
                </CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleTokenSubmit} className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-slate-300">Token Ujian</Label>
                    <Input
                      value={token}
                      onChange={(e) => setToken(e.target.value.toUpperCase())}
                      className="bg-slate-700 border-slate-600 text-white text-center text-2xl tracking-widest"
                      placeholder="XXXXXX"
                      maxLength={6}
                      required
                    />
                  </div>

{tokenError && (
                    <Alert className="bg-red-500/10 border-red-500/50">
                      <AlertDescription className="text-red-400">{tokenError}</AlertDescription>
                    </Alert>
                  )}

<Button
                    type="submit"
                    className="w-full bg-emerald-600 hover:bg-emerald-700"
                    disabled={tokenLoading || token.length !== 6}
                  >
                    {tokenLoading ? "Memproses..." : "Mulai Ujian"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="history">
            <Card className="border-slate-700 bg-slate-800/50">
              <CardHeader>
                <CardTitle className="text-white">Riwayat Ujian</CardTitle>
                <CardDescription className="text-slate-400">Daftar ujian yang pernah Anda ikuti</CardDescription>
              </CardHeader>
              <CardContent>
                {sessions.length === 0 ? (
                  <div className="text-center py-8 text-slate-400">Anda belum mengikuti ujian apapun</div>
                ) : (
                  <div className="space-y-4">
                    {sessions.map((session) => (
                      <div
                        key={session.id}
                        className="flex items-center justify-between p-4 bg-slate-700/50 rounded-lg"
                      >
                        <div>
                          <p className="text-white font-medium">{session.exams?.nama_ujian || "Ujian"}</p>
                          <p className="text-sm text-slate-400">{formatDate(session.started_at)}</p>
                        </div>
                        <div className="text-right">
                          {session.is_locked ? (
                            <span className="text-red-400">Terkunci</span>
                          ) : session.score !== null ? (
                            <span className="text-2xl font-bold text-emerald-400">{session.score.toFixed(1)}</span>
                          ) : (
                            <span className="text-yellow-400">Berlangsung</span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="settings">
            <Card className="border-slate-700 bg-slate-800/50 max-w-md">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-2">
                  <Lock className="w-5 h-5" />
                  Ubah Password
                </CardTitle>
                <CardDescription className="text-slate-400">Password akan di-hash untuk keamanan</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handlePasswordChange} className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-slate-300">Password Saat Ini</Label>
                    <Input
                      type="password"
                      value={passwordForm.currentPassword}
                      onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
                      className="bg-slate-700 border-slate-600 text-white"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-slate-300">Password Baru</Label>
                    <Input
                      type="password"
                      value={passwordForm.newPassword}
                      onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
                      className="bg-slate-700 border-slate-600 text-white"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-slate-300">Konfirmasi Password Baru</Label>
                    <Input
                      type="password"
                      value={passwordForm.confirmPassword}
                      onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
                      className="bg-slate-700 border-slate-600 text-white"
                      required
                    />
                  </div>

{passwordError && (
                    <Alert className="bg-red-500/10 border-red-500/50">
                      <AlertDescription className="text-red-400">{passwordError}</AlertDescription>
                    </Alert>
                  )}

{passwordSuccess && (
                    <Alert className="bg-emerald-500/10 border-emerald-500/50">
                      <AlertDescription className="text-emerald-400">Password berhasil diubah</AlertDescription>
                    </Alert>
                  )}

<Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700">
                    Ubah Password
                  </Button>
                </form>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="proxy.ts" isEdit="true" isMerged="true"
import { updateSession } from "@/lib/supabase/proxy"
import { type NextRequest, NextResponse } from "next/server"

export async function proxy(request: NextRequest) {
  // Check for custom session cookie
  const sessionCookie = request.cookies.get("exam_session")

const protectedPaths = ["/admin", "/guru", "/siswa"]
  const isProtectedPath = protectedPaths.some((path) => request.nextUrl.pathname.startsWith(path))

if (isProtectedPath && !sessionCookie) {
    return NextResponse.redirect(new URL("/login", request.url))
  }

// Check role-based access
  if (sessionCookie) {
    try {
      const session = JSON.parse(sessionCookie.value)
      const path = request.nextUrl.pathname

if (path.startsWith("/admin") && session.role !== "admin") {
        return NextResponse.redirect(new URL("/login", request.url))
      }
      if (path.startsWith("/guru") && !["admin", "guru"].includes(session.role)) {
        return NextResponse.redirect(new URL("/login", request.url))
      }
      if (path.startsWith("/siswa") && session.role !== "siswa") {
        return NextResponse.redirect(new URL("/login", request.url))
      }
    } catch {
      return NextResponse.redirect(new URL("/login", request.url))
    }
  }

return await updateSession(request)
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
}
[V0_FILE]typescriptreact:file="components/guru/create-exam.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { CheckCircle } from "lucide-react"

interface CreateExamProps {
  onSuccess?: () => void
}

function localDatetimeToISO(datetimeLocalValue: string): string {
  // datetime-local format: "2024-01-17T12:00"
  // We need to treat this as local time and convert to ISO with timezone offset
  const date = new Date(datetimeLocalValue)
  return date.toISOString()
}

export function CreateExam({ onSuccess }: CreateExamProps) {
  const [formData, setFormData] = useState({
    jenis_ujian: "",
    nama_ujian: "",
    pelaksanaan_start: "",
    pelaksanaan_end: "",
    durasi_menit: 60,
  })
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)

try {
      const payload = {
        ...formData,
        pelaksanaan_start: localDatetimeToISO(formData.pelaksanaan_start),
        pelaksanaan_end: localDatetimeToISO(formData.pelaksanaan_end),
      }

const res = await fetch("/api/exams", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      })

if (!res.ok) {
        const data = await res.json()
        throw new Error(data.error || "Gagal membuat ujian")
      }

setSuccess(true)
      setFormData({
        jenis_ujian: "",
        nama_ujian: "",
        pelaksanaan_start: "",
        pelaksanaan_end: "",
        durasi_menit: 60,
      })

setTimeout(() => {
        setSuccess(false)
        onSuccess?.()
      }, 2000)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Terjadi kesalahan")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-slate-700 bg-slate-800/50 max-w-2xl">
      <CardHeader>
        <CardTitle className="text-white">Buat Ujian Baru</CardTitle>
        <CardDescription className="text-slate-400">Isi informasi ujian di bawah ini</CardDescription>
      </CardHeader>
      <CardContent>
        {success && (
          <Alert className="mb-6 bg-emerald-500/10 border-emerald-500/50">
            <CheckCircle className="w-4 h-4 text-emerald-500" />
            <AlertDescription className="text-emerald-400">
              Ujian berhasil dibuat! Token akan digenerate otomatis.
            </AlertDescription>
          </Alert>
        )}

{error && (
          <Alert className="mb-6 bg-red-500/10 border-red-500/50">
            <AlertDescription className="text-red-400">{error}</AlertDescription>
          </Alert>
        )}

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label className="text-slate-300">Jenis Ujian</Label>
            <Input
              value={formData.jenis_ujian}
              onChange={(e) => setFormData({ ...formData, jenis_ujian: e.target.value })}
              className="bg-slate-700 border-slate-600 text-white"
              placeholder="Contoh: UTS, UAS, Quiz"
              required
            />
          </div>

<div className="space-y-2">
            <Label className="text-slate-300">Nama Ujian</Label>
            <Input
              value={formData.nama_ujian}
              onChange={(e) => setFormData({ ...formData, nama_ujian: e.target.value })}
              className="bg-slate-700 border-slate-600 text-white"
              placeholder="Contoh: Matematika Kelas 12"
              required
            />
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-slate-300">Waktu Mulai</Label>
              <Input
                type="datetime-local"
                value={formData.pelaksanaan_start}
                onChange={(e) => setFormData({ ...formData, pelaksanaan_start: e.target.value })}
                className="bg-slate-700 border-slate-600 text-white"
                required
              />
            </div>

<div className="space-y-2">
              <Label className="text-slate-300">Waktu Selesai</Label>
              <Input
                type="datetime-local"
                value={formData.pelaksanaan_end}
                onChange={(e) => setFormData({ ...formData, pelaksanaan_end: e.target.value })}
                className="bg-slate-700 border-slate-600 text-white"
                required
              />
            </div>
          </div>

<div className="space-y-2">
            <Label className="text-slate-300">Durasi (menit)</Label>
            <Input
              type="number"
              value={formData.durasi_menit}
              onChange={(e) => setFormData({ ...formData, durasi_menit: Number.parseInt(e.target.value) })}
              className="bg-slate-700 border-slate-600 text-white"
              min={1}
              required
            />
          </div>

<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={loading}>
            {loading ? "Membuat..." : "Buat Ujian"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/guru/exam-list.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Edit, Eye, FileText, Trash2 } from "lucide-react"
import type { Exam } from "@/lib/types"
import Link from "next/link"

export function ExamList() {
  const [exams, setExams] = useState<Exam[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchExams()
  }, [])

const fetchExams = async () => {
    const res = await fetch("/api/exams")
    const data = await res.json()
    setExams(data.exams || [])
    setLoading(false)
  }

const handleDelete = async (id: string) => {
    if (!confirm("Apakah Anda yakin ingin menghapus ujian ini?")) return

await fetch(`/api/exams/${id}`, { method: "DELETE" })
    fetchExams()
  }

const formatDate = (dateStr: string) => {
    const date = new Date(dateStr)
    return date.toLocaleString("id-ID", {
      day: "2-digit",
      month: "long",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    })
  }

const getStatus = (exam: Exam) => {
    const now = new Date()
    const start = new Date(exam.pelaksanaan_start)
    const end = new Date(exam.pelaksanaan_end)

if (now > end) return { label: "Selesai", className: "bg-slate-500/10 text-slate-400" }
    if (now >= start && now <= end) return { label: "Aktif", className: "bg-green-500/10 text-green-400" }
    return { label: "Terjadwal", className: "bg-yellow-500/10 text-yellow-400" }
  }

if (loading) {
    return <div className="text-center py-8 text-slate-400">Memuat data...</div>
  }

if (exams.length === 0) {
    return (
      <Card className="border-slate-700 bg-slate-800/50">
        <CardContent className="py-12 text-center">
          <FileText className="w-12 h-12 text-slate-500 mx-auto mb-4" />
          <p className="text-slate-400">Belum ada ujian. Buat ujian pertama Anda!</p>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="grid gap-4">
      {exams.map((exam) => {
        const status = getStatus(exam)

return (
          <Card key={exam.id} className="border-slate-700 bg-slate-800/50">
            <CardHeader className="flex flex-row items-start justify-between">
              <div>
                <CardTitle className="text-white">{exam.nama_ujian}</CardTitle>
                <CardDescription className="text-slate-400">
                  {exam.jenis_ujian} - Durasi: {exam.durasi_menit} menit
                </CardDescription>
              </div>
              <Badge className={status.className}>{status.label}</Badge>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div className="space-y-1 text-sm text-slate-400">
                  <p>Mulai: {formatDate(exam.pelaksanaan_start)}</p>
                  <p>Selesai: {formatDate(exam.pelaksanaan_end)}</p>
                  <p>
                    Token: <code className="bg-slate-700 px-2 py-0.5 rounded text-emerald-400">{exam.token}</code>
                  </p>
                </div>
                <div className="flex gap-2">
                  <Link href={`/guru/exam/${exam.id}/questions`}>
                    <Button variant="outline" className="border-slate-600 bg-transparent">
                      <Edit className="w-4 h-4 mr-2" />
                      Kelola Soal
                    </Button>
                  </Link>
                  <Link href={`/guru/exam/${exam.id}/results`}>
                    <Button variant="outline" className="border-slate-600 bg-transparent">
                      <Eye className="w-4 h-4 mr-2" />
                      Hasil
                    </Button>
                  </Link>
                  <Button variant="destructive" onClick={() => handleDelete(exam.id)}>
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { BookOpen, Lock, User, Loader2 } from "lucide-react"
import { saveSessionBackup, getSessionBackup, clearSessionBackup } from "@/lib/session"

export default function LoginPage() {
  const [nis, setNis] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [checkingSession, setCheckingSession] = useState(true)
  const router = useRouter()

useEffect(() => {
    async function checkExistingSession() {
      try {
        const backup = getSessionBackup()
        if (backup) {
          const user = JSON.parse(backup)
          if (user && user.role) {
            redirectByRole(user.role)
            return
          }
        }
      } catch {
        clearSessionBackup()
      }
      setCheckingSession(false)
    }

checkExistingSession()
  }, [])

const redirectByRole = (role: string) => {
    switch (role) {
      case "admin":
        router.replace("/admin")
        break
      case "guru":
        router.replace("/guru")
        break
      case "siswa":
        router.replace("/siswa")
        break
      default:
        router.replace("/login")
    }
  }

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

try {
      const controller = new AbortController()
      const timeoutId = setTimeout(() => controller.abort(), 10000)

const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nis, password }),
        credentials: "include",
        signal: controller.signal,
      })

clearTimeout(timeoutId)

const data = await response.json()

if (!response.ok) {
        throw new Error(data.error || "Login gagal")
      }

// Save session backup to localStorage
      if (data.sessionToken) {
        saveSessionBackup(data.sessionToken)
      }

// Small delay to ensure storage is set
      await new Promise((resolve) => setTimeout(resolve, 200))

// Redirect based on role
      redirectByRole(data.user.role)
    } catch (err) {
      if (err instanceof Error) {
        if (err.name === "AbortError") {
          setError("Koneksi timeout. Silakan coba lagi.")
        } else if (err.message === "Failed to fetch") {
          setError("Gagal terhubung ke server. Periksa koneksi internet Anda.")
        } else {
          setError(err.message)
        }
      } else {
        setError("Terjadi kesalahan")
      }
      setIsLoading(false)
    }
  }

if (checkingSession) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
      </div>
    )
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4">
      <Card className="w-full max-w-md border-slate-700 bg-slate-800/50 backdrop-blur">
        <CardHeader className="text-center space-y-4">
          <div className="mx-auto w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center">
            <BookOpen className="w-8 h-8 text-emerald-500" />
          </div>
          <CardTitle className="text-2xl font-bold text-white">Sistem Ujian Online</CardTitle>
          <CardDescription className="text-slate-400">Masuk dengan NIS dan Password Anda</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="nis" className="text-slate-300">
                NIS / Username
              </Label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
                <Input
                  id="nis"
                  type="text"
                  placeholder="Masukkan NIS"
                  value={nis}
                  onChange={(e) => setNis(e.target.value)}
                  className="pl-10 bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500"
                  required
                  disabled={isLoading}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="password" className="text-slate-300">
                Password
              </Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
                <Input
                  id="password"
                  type="password"
                  placeholder="Masukkan Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10 bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-500"
                  required
                  disabled={isLoading}
                />
              </div>
            </div>

{error && (
              <Alert variant="destructive" className="bg-red-500/10 border-red-500/50">
                <AlertDescription className="text-red-400">{error}</AlertDescription>
              </Alert>
            )}

<Button
              type="submit"
              className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
              disabled={isLoading}
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Memproses...
                </>
              ) : (
                "Masuk"
              )}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/guru/exam/[id]/questions/page.tsx" isEdit="true"
"use client"

import { useEffect, useState, use } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, Plus, Trash2, GripVertical, CheckCircle2 } from "lucide-react"
import type { Exam, Question } from "@/lib/types"
import Link from "next/link"

export default function QuestionsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: examId } = use(params)
  const [exam, setExam] = useState<Exam | null>(null)
  const [questions, setQuestions] = useState<Question[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [editingQuestion, setEditingQuestion] = useState<Question | null>(null)
  const router = useRouter()

const [newQuestion, setNewQuestion] = useState({
    tipe: "pilihan_ganda" as "pilihan_ganda" | "pilihan_ganda_kompleks",
    soal: "",
    pilihan: ["", "", "", ""],
    jawaban_benar: "" as string | string[],
    poin: 1,
  })

useEffect(() => {
    fetchData()
  }, [examId])

const fetchData = async () => {
    const [examRes, questionsRes] = await Promise.all([
      fetch(`/api/exams/${examId}`),
      fetch(`/api/exams/${examId}/questions`),
    ])

const examData = await examRes.json()
    const questionsData = await questionsRes.json()

setExam(examData.exam)
    setQuestions(questionsData.questions || [])
    setLoading(false)
  }

const resetForm = () => {
    setNewQuestion({
      tipe: "pilihan_ganda",
      soal: "",
      pilihan: ["", "", "", ""],
      jawaban_benar: "",
      poin: 1,
    })
    setEditingQuestion(null)
    setShowForm(false)
  }

const handleAddQuestion = async () => {
    const filteredPilihan = newQuestion.pilihan.filter((p) => p.trim() !== "")

if (filteredPilihan.length < 2) {
      alert("Minimal 2 pilihan jawaban")
      return
    }

if (newQuestion.tipe === "pilihan_ganda" && !newQuestion.jawaban_benar) {
      alert("Pilih jawaban yang benar")
      return
    }

if (newQuestion.tipe === "pilihan_ganda_kompleks" && (newQuestion.jawaban_benar as string[]).length === 0) {
      alert("Centang minimal satu jawaban yang benar")
      return
    }

const questionData = {
      ...newQuestion,
      pilihan: filteredPilihan,
    }

if (editingQuestion) {
      await fetch(`/api/exams/${examId}/questions/${editingQuestion.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(questionData),
      })
    } else {
      await fetch(`/api/exams/${examId}/questions`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(questionData),
      })
    }

resetForm()
    fetchData()
  }

const handleDeleteQuestion = async (questionId: string) => {
    if (!confirm("Hapus soal ini?")) return

await fetch(`/api/exams/${examId}/questions/${questionId}`, {
      method: "DELETE",
    })
    fetchData()
  }

const handleEditQuestion = (question: Question) => {
    setNewQuestion({
      tipe: question.tipe,
      soal: question.soal,
      pilihan: [...question.pilihan, "", "", "", ""].slice(0, 4),
      jawaban_benar: question.jawaban_benar,
      poin: question.poin,
    })
    setEditingQuestion(question)
    setShowForm(true)
  }

const updatePilihan = (index: number, value: string) => {
    const updated = [...newQuestion.pilihan]
    updated[index] = value
    setNewQuestion({ ...newQuestion, pilihan: updated })
  }

const selectCorrectAnswer = (letter: string) => {
    if (newQuestion.tipe === "pilihan_ganda") {
      setNewQuestion({ ...newQuestion, jawaban_benar: letter })
    }
  }

const toggleCorrectAnswer = (letter: string, checked: boolean) => {
    if (newQuestion.tipe === "pilihan_ganda_kompleks") {
      const current = newQuestion.jawaban_benar as string[]
      if (checked) {
        setNewQuestion({ ...newQuestion, jawaban_benar: [...current, letter] })
      } else {
        setNewQuestion({
          ...newQuestion,
          jawaban_benar: current.filter((c) => c !== letter),
        })
      }
    }
  }

return (
    <div className="min-h-screen bg-slate-900">
      <header className="border-b border-slate-700 bg-slate-800/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center gap-4">
          <Link href="/guru">
            <Button variant="ghost" size="icon" className="text-slate-400">
              <ArrowLeft className="w-5 h-5" />
            </Button>
          </Link>
          <div>
            <h1 className="text-lg font-semibold text-white">{exam?.nama_ujian}</h1>
            <p className="text-sm text-slate-400">Kelola Soal Ujian</p>
          </div>
        </div>
      </header>

<main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="flex justify-between items-center mb-6">
          <p className="text-slate-400">Total: {questions.length} soal</p>
          <Button onClick={() => setShowForm(true)} className="bg-blue-600 hover:bg-blue-700">
            <Plus className="w-4 h-4 mr-2" />
            Tambah Soal
          </Button>
        </div>

{showForm && (
          <Card className="border-slate-700 bg-slate-800/50 mb-6">
            <CardHeader>
              <CardTitle className="text-white">{editingQuestion ? "Edit Soal" : "Tambah Soal Baru"}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label className="text-slate-300">Tipe Soal</Label>
                <Select
                  value={newQuestion.tipe}
                  onValueChange={(value: "pilihan_ganda" | "pilihan_ganda_kompleks") =>
                    setNewQuestion({
                      ...newQuestion,
                      tipe: value,
                      jawaban_benar: value === "pilihan_ganda_kompleks" ? [] : "",
                    })
                  }
                >
                  <SelectTrigger className="bg-slate-700 border-slate-600 text-white">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-700 border-slate-600">
                    <SelectItem value="pilihan_ganda">Pilihan Ganda</SelectItem>
                    <SelectItem value="pilihan_ganda_kompleks">Pilihan Ganda Kompleks</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="text-slate-300">Soal</Label>
                <Textarea
                  value={newQuestion.soal}
                  onChange={(e) => setNewQuestion({ ...newQuestion, soal: e.target.value })}
                  className="bg-slate-700 border-slate-600 text-white min-h-[100px]"
                  placeholder="Tulis soal di sini..."
                />
              </div>