Scan LJ online

 

Komen prompt Scan LJ Online dengan https://lovable.dev/ 

Act as an expert full-stack developer. Please build a modern, responsive web application for scanning and auto-grading student answer sheets (Lembar Jawaban Komputer / OMR). The app must be mobile-friendly, clean, and use Tailwind CSS with shadcn/ui components.

Here are the core requirements and features:

1. DASHBOARD & NAVIGATION

- Create a modern sidebar/bottom navigation.

- Main menus: Dashboard, Manajemen Kelas & Siswa, Pengaturan Ujian, Scan Lembar Jawaban, dan Laporan.

2. MANAJEMEN DATA (MASTER DATA)

- Kelas & Siswa: Users can easily add, edit, or delete classes and the number of students in each class.

- Guru & Mata Pelajaran: Provide an editable settings menu to manage Teacher Names and Subject Names (Mata Pelajaran).

3. PENGATURAN LEMBAR JAWABAN (ANSWER SHEET SETTINGS)

- Users can configure the answer sheet: set the number of questions and multiple-choice options (e.g., A, B, C, D, E).

- Kunci Jawaban & Skor: A simple, intuitive interface to input the answer key and set the specific score/weight for each individual question easily.

- Unduh LJK Kosong: A feature to generate and download the blank answer sheet as a PDF. The generated PDF must include alignment markers (like squares in the corners) to help the camera scan accurately later.

4. SCANNER LEMBAR JAWABAN (WEB-BASED SCANNER)

- A web-based camera interface (accessible via mobile or laptop) or a file upload option to capture the filled answer sheets.

- The system should simulate processing the image (OMR detection), match it with the answer key, and instantly calculate the total score based on the customized score per question.

5. LAPORAN & EXPORT (REPORTS)

- A detailed grade report table showing student names, total correct/wrong answers, and final scores.

- Action buttons to easily download/export the grading report in both Excel (.xlsx/.csv) and PDF formats.

Technical Guidelines:

- Use React, Tailwind CSS, and Lucide Icons.

- Make the UI look professional, similar to modern EdTech apps (like Google Classroom or Canva).

- Ensure the "Scan" interface is optimized for mobile screens.

- Use mock data first for the scanning processing logic if complex computer vision libraries are not immediately available, but build the complete UI/UX flow so it is ready to be hooked to a backend.

Contoh hasil AI: 

SCAN LJ online