♻️ EFO - Bank Sampah Digital Sekolah

Platform Digital Pengelolaan & Pemilahan Sampah Berbasis Poin untuk Lingkungan Sekolah Bersih & Sustainable.

---

📌 Ringkasan Proyek

EFO (Bank Sampah Digital Sekolah) adalah aplikasi web interaktif yang dirancang untuk mengatasi permasalahan sampah di lingkungan sekolah. Dengan mengubah sampah yang dapat didaur ulang (kardus, botol, kaleng, kertas, plastik) menjadi poin bernilai, EFO mendorong partisipasi aktif siswa, memudahkan verifikasi oleh petugas pos sampah, serta memberikan laporan terukur bagi pihak sekolah.

---

✨ Fitur Utama

1. 🎓 Peran Siswa (Student)

• Setor Sampah Multi-Kategori: Memilih beberapa jenis sampah sekaligus dalam satu keranjang transaksi.
• Generate QR Code Unik: Membuat QR Code transaksi instan yang dapat discan oleh petugas pos sampah.
• Tukar Poin & Reward: Menukarkan akumulasi poin dengan berbagai hadiah menarik (snack, alat tulis, buku).
• Riwayat & Pelacakan Status: Memantau status transaksi (menunggu, terverifikasi, ditolak).
• Leaderboard: Papan peringkat individu untuk mendorong kompetisi sehat antar siswa.

2. 👮 Peran Petugas Pos Sampah (Officer / OSIS / Piket)

• Scan / Verifikasi QR Code: Memindai atau memasukkan ID Transaksi dari QR Code siswa.
• Koreksi Jumlah Aktual: Menyesuaikan berat/jumlah sampah fisik aktual sebelum poin dikonfirmasi.
• Konfirmasi Transaksi Instan: Poin langsung masuk secara otomatis ke akun siswa setelah diverifikasi.

3. 🛡️ Peran Admin Sekolah

• Dashboard Analitik: Visualisasi grafik interaktif (Chart.js) untuk statistik sampah terkumpul per kategori dan tren bulanan.
• Kelola Kategori & Poin: Mengatur harga/nilai poin per satuan (pcs/box) untuk setiap kategori sampah.
• Kelola Reward & Stok: Menambah, mengubah, atau memperbarui stok hadiah.
• Laporan & Manajemen Transaksi: Melihat dan mengaudit seluruh data transaksi dan penukaran reward di sekolah.

---

🔑 Akun Demo (Credentials)

Anda dapat mencoba aplikasi menggunakan akun demo berikut:

Peran	NIS	Password	Nama / Keterangan
🎓 Siswa	10001	siswa123	Muhamad Haikal Setiawan (10 RPL)
🎓 Siswa	10002	siswa123	Siti Rahayu (10 AK)
🎓 Siswa	10005	siswa123	Rizky Pratama (10 DKV 1)
👮 Petugas	99001	petugas123	Pak Joko (OSIS / Piket Pos Sampah)
🛡️ Admin	00001	admin123	Bu Rini (Admin Sekolah)

---

🔄 Alur Kerja Sistem (Workflow)

[1. Siswa Setor Sampah] ➔ Pilih Kategori & Jumlah ➔ Sistem Generate QR Code
                                                          │
                                                          ▼
[2. Pos Sampah] ➔ Petugas Scan QR Code ➔ Cek & Koreksi Jumlah Fisik Sampah
                                                          │
                                                          ▼
[3. Verifikasi] ➔ Status Terverifikasi ➔ Poin Otomatis Bertambah ke Siswa
                                                          │
                                                          ▼
[4. Reward] ➔ Siswa Tukar Poin dengan Hadiah (Alat Tulis / Snack)

---

🛠️ Teknologi & Arsitektur

• Frontend: HTML5, Vanilla JavaScript (ES6+ SPA with State & Component Management), Vanilla CSS (Responsive UI, Dark/Light Elements, Glassmorphism design).
• Library External:
  • QRCode.js — Penjana QR Code transaksi.
  • Chart.js — Visualisasi grafik & laporan di Dashboard Admin.
  • Google Fonts (Inter) — Tipografi modern & bersih.
• Penyimpanan Data: localStorage (Disimulasikan dengan DB Helper & Auto-Seeding data awal di data.js).

---

📁 Struktur Direktori

EFO/
├── index.html                                  # Halaman utama & pembungkus SPA
├── style.css                                   # Custom CSS & Design System
├── app.js                                      # Logika aplikasi, View Renderer & Router SPA
├── data.js                                     # Database Layer & Helper LocalStorage
├── modify.js                                   # Helper Script modifikasi teks/label
└── Dokumen-Bank-Sampah-Digital-Sekolah (1).md # Dokumen Teknis (PRD, SRS, SDD)

---

🚀 Cara Menjalankan Aplikasi

1. Clone / Download repository ini.
2. Buka berkas index.html langsung melalui peramban web (Browser) favorit Anda (Google Chrome, Firefox, Edge, Safari).
   • Opsional: Anda juga dapat menggunakan ekstensi Live Server di VS Code untuk pengalaman pengembangan yang lebih lancar.
3. Gunakan salah satu Akun Demo di atas untuk mulai mencoba fitur Siswa, Petugas, atau Admin.

---

📄 Dokumentasi Tambahan

Dokumentasi lengkap mengenai Product Requirements Document (PRD), Software Requirements Specification (SRS), dan Software Design Document (SDD) dapat dilihat pada berkas Dokumen-Bank-Sampah-Digital-Sekolah (1).md.

---

© 2026 EFO — Bank Sampah Digital Sekolah.