📋 PHASE 1: PLANNING — E-Ujian
1. Feature List
Authentication & Authorization

Multi-role login: Superadmin, Admin, Guru, Siswa
Session management dengan Sanctum
Role-based access control (RBAC)

Superadmin Features

Manage tahun ajaran (aktif/nonaktif)
Manage kelas (tingkat: MI/MTs/MA)
Manage mata pelajaran
Manage data guru (manual + upload Excel dengan template)
Manage data siswa (manual + upload Excel dengan template)
Assign guru ke mata pelajaran & kelas
Manage semua akun user
Monitoring semua ujian
Reset pengerjaan ujian siswa
Riwayat ujian semua
Laporan (export Excel & PDF)
Akses semua fitur Admin & Guru

Admin (Panitia Ujian) Features

Dashboard monitoring ujian
Penjadwalan ujian (jenis: PAS, UM, PTS, PH)
Membuat & manage template Google Form (per mata pelajaran)
Monitoring ujian siswa real-time
Reset pengerjaan ujian siswa
Upload nilai PG & Benar/Salah dari Excel (hasil Google Form)
Riwayat ujian
Laporan

Guru Features

Dashboard
Input link Google Form soal (sesuai mapel & jadwal yang dibuat admin)
Input nilai Essay per siswa
Sistem katrol nilai (KKM=75, range min-max ditentukan guru per kelas)
Lihat nilai final siswa (PG + BS + Essay + Katrol)
Riwayat ujian mapel sendiri

Siswa Features

Dashboard (ujian aktif, nilai terbaru)
Halaman ujian aktif
Halaman kerjakan ujian (fullscreen, anti-cheat)

Deteksi klik kanan → peringatan
Deteksi pindah tab / minimize → peringatan
Deteksi klik di luar iframe → peringatan
Maksimal 3 pelanggaran → auto-submit / lock


Riwayat ujian & nilai

Anti-Cheat System

Fullscreen enforced
Deteksi visibility change (tab switching)
Deteksi klik kanan
Deteksi context menu
Pelanggaran counter (max 3x → lock)
Log pelanggaran tersimpan di DB

Nilai & Katrol

Upload nilai PG+BS dari Excel oleh Admin
Input nilai Essay oleh Guru
Nilai murni = PG + BS + Essay
Katrol otomatis: jika nilai murni ≤ KKM(75), dapat nilai minimum yang diinput guru; jika nilai murni = tertinggi di kelas → nilai maksimum yang diinput guru; nilai lain diinterpolasi proporsional
Nilai raport final muncul di akun guru & siswa


2. Database Schema
tahun_ajaran:
  - id, nama (misal: 2024/2025), semester (1/2), tanggal_mulai, tanggal_selesai, is_aktif, timestamps
  - Indexes: is_aktif

tingkat_sekolah: (MI, MTs, MA)
  - id, nama, kode, timestamps

kelas:
  - id, tahun_ajaran_id (FK), tingkat_sekolah_id (FK), nama (VII-A), tingkat (7/8/9/10/11/12), timestamps
  - Relationships: belongsTo tahun_ajaran, hasMany siswa
  - Indexes: tahun_ajaran_id

mata_pelajaran:
  - id, nama, kode, tingkat_sekolah_id (FK), timestamps
  - Indexes: tingkat_sekolah_id

users:
  - id, name, email, password, role (superadmin/admin/guru/siswa), is_aktif, timestamps
  - Indexes: email, role

guru:
  - id, user_id (FK), nip, nama, jenis_kelamin, no_hp, foto, timestamps
  - Relationships: belongsTo user, hasMany guru_mengajar

siswa:
  - id, user_id (FK), nis, nisn, nama, jenis_kelamin, kelas_id (FK), no_hp, foto, timestamps
  - Relationships: belongsTo user, belongsTo kelas
  - Indexes: kelas_id, nis

guru_mengajar: (pivot guru ↔ mapel ↔ kelas)
  - id, guru_id (FK), mata_pelajaran_id (FK), kelas_id (FK), tahun_ajaran_id (FK), timestamps
  - Indexes: guru_id, mata_pelajaran_id, kelas_id

ujian:
  - id, tahun_ajaran_id (FK), nama, jenis (PAS/UM/PTS/PH), mata_pelajaran_id (FK), kelas_id (FK), guru_mengajar_id (FK), tanggal_mulai, tanggal_selesai, waktu_mulai, waktu_selesai, durasi_menit, link_google_form, status (draft/aktif/selesai), timestamps, deleted_at
  - Relationships: belongsTo tahun_ajaran, belongsTo mata_pelajaran, belongsTo kelas
  - Indexes: tahun_ajaran_id, jenis, status, kelas_id

pengerjaan_ujian:
  - id, ujian_id (FK), siswa_id (FK), waktu_mulai, waktu_selesai, status (belum/sedang/selesai/direset), jumlah_pelanggaran, is_locked, timestamps
  - Relationships: belongsTo ujian, belongsTo siswa
  - Indexes: ujian_id, siswa_id, status

pelanggaran_ujian:
  - id, pengerjaan_ujian_id (FK), jenis (klik_kanan/pindah_tab/buka_tab), waktu, timestamps

nilai_ujian:
  - id, ujian_id (FK), siswa_id (FK), nilai_pg, nilai_bs, nilai_essay, nilai_murni, nilai_katrol, nilai_final, timestamps
  - Relationships: belongsTo ujian, belongsTo siswa
  - Indexes: ujian_id, siswa_id

setting_katrol:
  - id, ujian_id (FK), guru_mengajar_id (FK), kkm (default 75), nilai_minimum_raport, nilai_maximum_raport, timestamps
  - Relationships: belongsTo ujian

jadwal_ujian: (untuk penjadwalan batch PAS/UM/PTS)
  - id, tahun_ajaran_id (FK), nama_sesi, jenis_ujian, tanggal, waktu_mulai, waktu_selesai, timestamps

3. API Endpoints
Auth:
  POST   /api/auth/login
  POST   /api/auth/logout
  GET    /api/auth/profile
  PUT    /api/auth/profile (update profil sendiri)

Tahun Ajaran: (Superadmin)
  GET    /api/tahun-ajaran
  POST   /api/tahun-ajaran
  PUT    /api/tahun-ajaran/{id}
  DELETE /api/tahun-ajaran/{id}
  PUT    /api/tahun-ajaran/{id}/aktifkan

Kelas: (Superadmin)
  GET    /api/kelas
  POST   /api/kelas
  PUT    /api/kelas/{id}
  DELETE /api/kelas/{id}

Mata Pelajaran: (Superadmin)
  GET    /api/mata-pelajaran
  POST   /api/mata-pelajaran
  PUT    /api/mata-pelajaran/{id}
  DELETE /api/mata-pelajaran/{id}

Users/Guru/Siswa: (Superadmin)
  GET    /api/users
  POST   /api/users
  PUT    /api/users/{id}
  DELETE /api/users/{id}
  GET    /api/guru
  POST   /api/guru
  PUT    /api/guru/{id}
  DELETE /api/guru/{id}
  POST   /api/guru/import-excel
  GET    /api/guru/template-excel
  GET    /api/siswa
  POST   /api/siswa
  PUT    /api/siswa/{id}
  DELETE /api/siswa/{id}
  POST   /api/siswa/import-excel
  GET    /api/siswa/template-excel

Guru Mengajar: (Superadmin)
  GET    /api/guru-mengajar
  POST   /api/guru-mengajar
  DELETE /api/guru-mengajar/{id}

Ujian: (Admin/Superadmin)
  GET    /api/ujian
  POST   /api/ujian
  GET    /api/ujian/{id}
  PUT    /api/ujian/{id}
  DELETE /api/ujian/{id}
  PUT    /api/ujian/{id}/aktifkan
  PUT    /api/ujian/{id}/selesai

Jadwal Ujian: (Admin/Superadmin)
  GET    /api/jadwal-ujian
  POST   /api/jadwal-ujian
  PUT    /api/jadwal-ujian/{id}
  DELETE /api/jadwal-ujian/{id}

Pengerjaan Ujian:
  GET    /api/ujian-saya          (Siswa: ujian aktif)
  POST   /api/ujian/{id}/mulai    (Siswa: start ujian)
  PUT    /api/ujian/{id}/selesai  (Siswa: submit ujian)
  POST   /api/ujian/{id}/pelanggaran (Siswa: log pelanggaran)
  GET    /api/monitoring          (Admin/Superadmin: semua pengerjaan)
  PUT    /api/pengerjaan/{id}/reset (Admin/Superadmin: reset ujian siswa)

Nilai:
  POST   /api/nilai/upload-excel  (Admin: upload hasil GForm)
  GET    /api/nilai/template-excel (Admin: download template)
  PUT    /api/nilai/{id}/essay    (Guru: input nilai essay)
  POST   /api/nilai/katrol        (Guru: setting & apply katrol)
  GET    /api/nilai/kelas/{kelas_id}/ujian/{ujian_id} (Guru: lihat nilai kelas)
  GET    /api/nilai/saya          (Siswa: lihat nilai sendiri)
  GET    /api/riwayat-ujian       (semua role, filter by role)

Laporan: (Admin/Superadmin)
  GET    /api/laporan/nilai-excel
  GET    /api/laporan/nilai-pdf
  GET    /api/laporan/rekap-ujian

4. Backend Files
Models:
  User, Guru, Siswa, TahunAjaran, TingkatSekolah, Kelas,
  MataPelajaran, GuruMengajar, Ujian, JadwalUjian,
  PengerjaanUjian, PelanggaranUjian, NilaiUjian, SettingKatrol

Controllers (Api/):
  AuthController, TahunAjaranController, KelasController,
  MataPelajaranController, UserController, GuruController,
  SiswaController, GuruMengajarController, UjianController,
  JadwalUjianController, PengerjaanUjianController,
  NilaiController, LaporanController, MonitoringController

Migrations:
  create_tahun_ajaran_table, create_tingkat_sekolah_table,
  create_kelas_table, create_mata_pelajaran_table,
  create_guru_table, create_siswa_table,
  create_guru_mengajar_table, create_ujian_table,
  create_jadwal_ujian_table, create_pengerjaan_ujian_table,
  create_pelanggaran_ujian_table, create_nilai_ujian_table,
  create_setting_katrol_table

Seeders:
  TahunAjaranSeeder, TingkatSekolahSeeder, UserSeeder,
  KelasSeeder, MataPelajaranSeeder, GuruSeeder, SiswaSeeder,
  GuruMengajarSeeder, UjianSeeder

Helpers/Services:
  ExcelImportService (guru & siswa), KatrolNilaiService,
  LaporanService (Excel & PDF)

5. Frontend Files
Services:
  api.js, authService.js, tahunAjaranService.js, kelasService.js,
  mataPelajaranService.js, userService.js, guruService.js,
  siswaService.js, ujianService.js, nilaiService.js,
  laporanService.js, monitoringService.js

Stores:
  useAuthStore.js, useUjianStore.js

Pages:
  auth/          → LoginPage.jsx
  superadmin/    → DashboardPage, TahunAjaranPage, UserPage,
                   GuruPage, SiswaPage, MataPelajaranPage,
                   KelasPage, GuruMengajarPage, MonitoringPage,
                   ResetUjianPage, RiwayatUjianPage, LaporanPage
  admin/         → DashboardPage, JadwalUjianPage, MonitoringPage,
                   ResetUjianPage, UploadNilaiPage,
                   RiwayatUjianPage, LaporanPage
  guru/          → DashboardPage, InputSoalPage, InputEssayPage,
                   KatrolNilaiPage, RiwayatUjianPage
  siswa/         → DashboardPage, UjianAktifPage,
                   KerjakanUjianPage (fullscreen), RiwayatUjianPage

Components:
  layout/   → PublicLayout, AuthLayout, Navbar, Sidebar,
              Footer, Breadcrumbs
  auth/     → ProtectedRoute, RoleGuard, ErrorBoundary
  common/   → DataTable, SearchBar, ExcelUpload,
              ConfirmDialog, StatusBadge, LoadingSkeleton
  ujian/    → AntiCheatWrapper, ViolationAlert,
              UjianTimer, FullscreenGuard
  nilai/    → KatrolForm, NilaiTable
  charts/   → StatsCard, LineChart, BarChart

6. Dependencies
Backend:
  laravel/sanctum, maatwebsite/excel (import/export Excel),
  barryvdh/laravel-dompdf (PDF), spatie/laravel-activitylog,
  intervention/image

Frontend Core:
  @tanstack/react-query, zustand, axios, react-hook-form,
  zod, react-router-dom, react-hot-toast, date-fns

Frontend UI:
  tailwindcss, lucide-react, recharts, xlsx (SheetJS),
  file-saver

Shadcn:
  button, card, input, label, textarea, select, dialog,
  alert, skeleton, table, badge, dropdown-menu, separator,
  progress, tabs, tooltip, avatar

7. Theme
Primary:    #2563EB (Blue-600)  → warna utama, tombol, link
Secondary:  #0F172A (Slate-900) → sidebar, header
Accent:     #10B981 (Emerald)   → status aktif, sukses
Warning:    #F59E0B (Amber)     → peringatan, pelanggaran
Danger:     #EF4444 (Red)       → error, lock ujian
Font:       Inter
Radius:     0.5rem
Dark Mode:  No

8. UI/UX Patterns & Consistency
Layout Strategy:

PublicLayout → Login saja (centered card, logo sekolah)
AuthLayout → Semua halaman protected (Navbar + Sidebar role-based + Breadcrumbs + Footer)
ExamLayout → Khusus halaman kerjakan ujian (fullscreen, NO navbar/sidebar, hanya timer + konten iframe Google Form)

CRUD Pattern: B — Separate Pages untuk semua entitas utama (Ujian, Guru, Siswa, Kelas). Modal untuk entitas simple (Tahun Ajaran, Mata Pelajaran).
Dashboard per Role:

Superadmin: Stats (total guru, siswa, kelas, ujian aktif) + chart ujian per jenis + aktivitas terbaru
Admin: Stats (ujian hari ini, siswa sedang ujian, selesai, belum) + monitoring real-time
Guru: Stats (mapel diampu, ujian aktif, nilai belum diinput) + daftar ujian mapel
Siswa: Ujian aktif hari ini + nilai terbaru + riwayat singkat

Anti-Cheat Page (ExamLayout):

Fullscreen API enforced saat mulai ujian
document.addEventListener('visibilitychange') → log + counter
contextmenu disabled
keydown untuk F12, Ctrl+Shift+I disabled
Counter pelanggaran tampil di pojok kanan atas (merah jika > 1)
Pelanggaran ke-3 → modal warning + auto-lock + kirim status ke API

Sidebar Menu per Role:
Superadmin: Dashboard, Tahun Ajaran, Data User, Data Guru,
            Data Siswa, Mata Pelajaran, Kelas, List Mengajar,
            Monitoring, Riwayat Ujian, Laporan

Admin:      Dashboard, Jadwal Ujian, Monitoring,
            Upload Nilai, Riwayat Ujian, Laporan

Guru:       Dashboard, Input Soal, Input Nilai Essay,
            Katrol Nilai, Riwayat Ujian

Siswa:      Dashboard, Ujian Aktif, Riwayat Ujian

9. Workflow Eksekusi
🔴 BACKEND WORKFLOW (Jalankan manual di Terminal)
Setup & Installation:
bash# 1. Buat folder project
mkdir ~/Desktop/e-ujian && cd ~/Desktop/e-ujian

# 2. Install Laravel
composer create-project laravel/laravel backend && cd backend

# 3. Install Breeze API
composer require laravel/breeze --dev && php artisan breeze:install api

# 4. Install dependencies utama
composer require laravel/sanctum maatwebsite/excel barryvdh/laravel-dompdf spatie/laravel-activitylog intervention/image

# 5. Install dev dependencies
composer require --dev barryvdh/laravel-debugbar
Database Setup:
bash# 6. Buat database
mysql -u root -p
# → CREATE DATABASE e_ujian;
# → EXIT;

# 7. Update .env (edit manual di VS Code)
# DB_DATABASE=e_ujian, DB_USERNAME=root, DB_PASSWORD=yourpass
# SANCTUM_STATEFUL_DOMAINS=localhost:5173

# 8. Buat .env.production (edit manual di VS Code)
Configuration (Edit manual di VS Code):
bash# 9. Edit config/cors.php → allowed_origins: localhost:5173
# 10. Edit bootstrap/app.php → exclude api/*, tambah Sanctum middleware
# 11. Edit config/filesystems.php → tambah disk public_uploads
# 12. Edit app/Models/User.php → tambah HasApiTokens trait (WAJIB)
Structure Creation:
bash# 13. Buat folder controllers
mkdir app/Http/Controllers/Api
mkdir -p public/uploads/{guru,siswa}

# 14. Set permission
chmod -R 775 public/uploads

# 15. Buat ALL Models
touch app/Models/{Guru,Siswa,TahunAjaran,TingkatSekolah,Kelas,MataPelajaran,GuruMengajar,Ujian,JadwalUjian,PengerjaanUjian,PelanggaranUjian,NilaiUjian,SettingKatrol}.php

# 16. Buat ALL Controllers
touch app/Http/Controllers/Api/{AuthController,TahunAjaranController,KelasController,MataPelajaranController,UserController,GuruController,SiswaController,GuruMengajarController,UjianController,JadwalUjianController,PengerjaanUjianController,NilaiController,LaporanController,MonitoringController}.php

# 17. Buat ALL Migrations
touch database/migrations/2024_01_01_000001_create_tahun_ajaran_table.php
touch database/migrations/2024_01_01_000002_create_tingkat_sekolah_table.php
touch database/migrations/2024_01_01_000003_create_kelas_table.php
touch database/migrations/2024_01_01_000004_create_mata_pelajaran_table.php
touch database/migrations/2024_01_01_000005_create_guru_table.php
touch database/migrations/2024_01_01_000006_create_siswa_table.php
touch database/migrations/2024_01_01_000007_create_guru_mengajar_table.php
touch database/migrations/2024_01_01_000008_create_ujian_table.php
touch database/migrations/2024_01_01_000009_create_jadwal_ujian_table.php
touch database/migrations/2024_01_01_000010_create_pengerjaan_ujian_table.php
touch database/migrations/2024_01_01_000011_create_pelanggaran_ujian_table.php
touch database/migrations/2024_01_01_000012_create_nilai_ujian_table.php
touch database/migrations/2024_01_01_000013_create_setting_katrol_table.php

# 18. Buat ALL Seeders
touch database/seeders/{TahunAjaranSeeder,TingkatSekolahSeeder,UserSeeder,KelasSeeder,MataPelajaranSeeder,GuruSeeder,SiswaSeeder,GuruMengajarSeeder,UjianSeeder}.php

# 19. Buat Services
mkdir app/Services
touch app/Services/{ExcelImportService,KatrolNilaiService,LaporanService}.php

# 20. Konfirmasi struktur
ls app/Models/ && ls app/Http/Controllers/Api/ && ls database/migrations/ && ls database/seeders/

Setelah semua step selesai, balas: "Backend workflow selesai, struktur ready, kasih kode file nya"


🔵 FRONTEND WORKFLOW (Jalankan manual di Terminal)
Setup & Installation:
bash# 1. Masuk ke folder project
cd ~/Desktop/e-ujian

# 2. Buat project Vite React
npm create vite@latest frontend -- --template react && cd frontend

# 3. Install dependencies
npm install

# 4. Install core packages
npm install @tanstack/react-query zustand axios react-hook-form zod react-router-dom

# 5. Install UI packages
npm install clsx tailwind-merge lucide-react react-hot-toast date-fns

# 6. Install Excel & chart packages
npm install recharts xlsx file-saver

# 7. Install dev deps
npm install -D tailwindcss@^3 postcss autoprefixer @tailwindcss/forms

# 8. Init Tailwind
npx tailwindcss init -p
```

**Configuration (Edit manual di VS Code):**
```
# 9. Edit vite.config.js → tambah @ alias
# 10. Buat jsconfig.json → setup baseUrl & paths
# 11. Edit tailwind.config.js → setup theme colors
# 12. Edit src/index.css → tambah @tailwind & CSS variables
Shadcn Setup:
bash# 13. Initialize Shadcn
npx shadcn@latest init
# (pilih: No TS, Default style, CSS vars Yes)

# 14. Install Shadcn components
npx shadcn@latest add button card input label textarea select dialog alert skeleton table badge dropdown-menu separator progress tabs tooltip avatar
Environment:
bash# 15. Buat .env
echo "VITE_API_URL=http://localhost:8000" > .env

# 16. Buat .env.production
echo "VITE_API_URL=https://your-domain.com" > .env.production
Structure Creation:
bash# 17. Buat folders
mkdir -p src/components/{layout,auth,common,ujian,nilai,charts}
mkdir -p src/pages/{auth,superadmin,admin,guru,siswa}
mkdir -p src/{services,store,hooks,lib}

# 18. Buat ALL files
touch src/lib/utils.js
touch src/services/{api,authService,tahunAjaranService,kelasService,mataPelajaranService,userService,guruService,siswaService,ujianService,nilaiService,laporanService,monitoringService}.js
touch src/store/{useAuthStore,useUjianStore}.js
touch src/hooks/{useAuth,useDebounce,useExamMonitor}.js
touch src/components/auth/{ProtectedRoute,RoleGuard,ErrorBoundary}.jsx
touch src/components/layout/{PublicLayout,AuthLayout,ExamLayout,Navbar,Sidebar,Footer,Breadcrumbs}.jsx
touch src/components/common/{DataTable,SearchBar,ExcelUpload,ConfirmDialog,StatusBadge,LoadingSkeleton}.jsx
touch src/components/ujian/{AntiCheatWrapper,ViolationAlert,UjianTimer,FullscreenGuard}.jsx
touch src/components/nilai/{KatrolForm,NilaiTable}.jsx
touch src/components/charts/{StatsCard,LineChartComponent,BarChartComponent}.jsx
touch src/pages/auth/LoginPage.jsx
touch src/pages/superadmin/{DashboardPage,TahunAjaranPage,UserPage,GuruPage,SiswaPage,MataPelajaranPage,KelasPage,GuruMengajarPage,MonitoringPage,ResetUjianPage,RiwayatUjianPage,LaporanPage}.jsx
touch src/pages/admin/{DashboardPage,JadwalUjianPage,MonitoringPage,ResetUjianPage,UploadNilaiPage,RiwayatUjianPage,LaporanPage}.jsx
touch src/pages/guru/{DashboardPage,InputSoalPage,InputEssayPage,KatrolNilaiPage,RiwayatUjianPage}.jsx
touch src/pages/siswa/{DashboardPage,UjianAktifPage,KerjakanUjianPage,RiwayatUjianPage}.jsx
touch src/pages/PlaceholderPage.jsx

# 19. Konfirmasi struktur
ls src/components/ && ls src/pages/ && ls src/services/

Setelah semua step selesai, balas: "Frontend workflow selesai, struktur ready, kasih kode file nya"
