# 📚 cloud167 — Spesifikasi Pengembangan Aplikasi **Aplikasi:** cloud167 **Institusi:** SMPN 167 Jakarta **Domain Auth:** `user@smpn167jakarta.sch.id` **Penyimpanan:** Google Workspace for Education (100 TB) **Versi Dokumen:** 1.0 **Tanggal:** 19 Mei 2026 --- ## 🎯 Ringkasan Eksekutif cloud167 adalah platform manajemen sekolah berbasis cloud yang mengintegrasikan penyimpanan dokumen, komunikasi, dan pengelolaan akademik untuk seluruh ekosistem SMPN 167 Jakarta. Semua dokumen otomatis tersinkronisasi dengan Google Drive Workspace for Education (kapasitas 100 TB). --- ## 1. DESAIN INTERFACE (UI/UX) ### 1.1 Prinsip Desain | Aspek | Ketentuan | |-------|-----------| | **Tema Warna** | Cerah, profesional, berbasis biru pendidikan (#1565C0 sebagai primer) | | **Aksen** | Hijau emerald (#00897B) untuk sukses/aktif, Amber (#F9A825) untuk notifikasi | | **Background** | Putih bersih (#FFFFFF) dengan gray sangat terang (#F8FAFC) untuk panel | | **Tipografi** | `Plus Jakarta Sans` (heading) + `DM Sans` (body) via Google Fonts | | **Border Radius** | 12px untuk kartu, 8px untuk tombol, 24px untuk pill/badge | | **Shadow** | Lembut, layered — `0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)` | ### 1.2 Palet Warna Lengkap ```css :root { /* Primary */ --color-primary-50: #E3F2FD; --color-primary-100: #BBDEFB; --color-primary-400: #42A5F5; --color-primary-600: #1E88E5; --color-primary-700: #1565C0; /* Main Brand */ --color-primary-800: #0D47A1; /* Secondary / Aksen */ --color-secondary-600: #00897B; /* Teal/Emerald */ --color-accent-amber: #F9A825; --color-accent-red: #E53935; /* Neutral */ --color-gray-50: #F8FAFC; --color-gray-100: #F1F5F9; --color-gray-200: #E2E8F0; --color-gray-500: #64748B; --color-gray-700: #334155; --color-gray-900: #0F172A; /* Functional */ --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; } ``` ### 1.3 Tipografi ```css /* Import di HTML */ /* Penggunaan */ --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'DM Sans', sans-serif; /* Skala */ --text-xs: 0.75rem; /* 12px - label kecil */ --text-sm: 0.875rem; /* 14px - body kecil */ --text-base: 1rem; /* 16px - body */ --text-lg: 1.125rem; /* 18px - subheading */ --text-xl: 1.25rem; /* 20px - heading kecil */ --text-2xl: 1.5rem; /* 24px - heading */ --text-3xl: 1.875rem; /* 30px - page title */ --text-4xl: 2.25rem; /* 36px - hero */ ``` ### 1.4 Komponen UI Wajib #### Tombol (Button) ``` Primary → bg:#1565C0 text:white hover:bg:#0D47A1 Secondary → bg:white text:#1565C0 border:1px solid #1565C0 Danger → bg:#EF4444 text:white hover:bg:#DC2626 Ghost → transparent text:#334155 hover:bg:#F1F5F9 ``` #### Kartu (Card) ``` background: #FFFFFF border: 1px solid #E2E8F0 border-radius: 12px padding: 20px 24px box-shadow: 0 1px 3px rgba(0,0,0,0.08) transition: box-shadow 0.2s ease hover: box-shadow: 0 4px 20px rgba(0,0,0,0.12) ``` #### Badge / Status Pill ``` Aktif → bg:#DCFCE7 text:#16A34A Nonaktif → bg:#FEE2E2 text:#DC2626 Pending → bg:#FEF9C3 text:#CA8A04 Baru → bg:#DBEAFE text:#1D4ED8 ``` --- ## 2. RESPONSIVITAS (Responsive Design) ### 2.1 Breakpoint ```css /* Mobile first */ sm: 640px /* HP landscape */ md: 768px /* Tablet portrait */ lg: 1024px /* Tablet landscape / Laptop kecil */ xl: 1280px /* Laptop / Desktop */ 2xl: 1536px /* Desktop besar / Monitor */ ``` ### 2.2 Layout Grid ``` HP (< 768px): - Sidebar: tersembunyi, muncul sebagai drawer dari kiri - Konten: 1 kolom, padding 16px - Tabel: horizontal scroll atau card view - Bottom Navigation: 5 ikon utama Tablet (768px - 1023px): - Sidebar: collapsed (icon only, 64px lebar) - Konten: 1-2 kolom, padding 24px Laptop/Desktop (≥ 1024px): - Sidebar: expanded (240px lebar, fixed) - Konten: multi-kolom penuh, padding 32px - Dashboard: grid 4 kolom ``` ### 2.3 Komponen Responsif Khusus | Komponen | HP | Tablet | Desktop | |----------|-----|--------|---------| | Tabel data | Card list | Scroll horizontal | Full table | | Statistik dashboard | 2-col grid | 3-col grid | 4-col grid | | Form upload | Full width | 2 kolom | 3 kolom | | Kalender | Mini kompak | Setengah layar | Full kalender | | Chat/Pesan | Full screen overlay | Side panel | Right panel | --- ## 3. STRUKTUR NAVIGASI & MENU ### 3.1 Sidebar Navigasi Utama ``` 📊 Dashboard → /dashboard 📁 Dokumen Saya → /documents 📤 Upload & Share → /upload 📅 Kalender Sekolah → /calendar 💬 Pesan & Notifikasi → /messages 👥 Direktori Warga → /directory 📋 Laporan & Rekap → /reports ⚙️ Pengaturan → /settings ``` ### 3.2 Menu per Peran (Role-Based Access) --- #### 🏫 KEPALA SEKOLAH **Dashboard:** - Ringkasan statistik sekolah (jumlah siswa, guru, staff aktif) - Grafik kehadiran harian (siswa & guru) - Notifikasi dokumen masuk yang perlu tanda tangan - Pengumuman terbaru & agenda mendatang **Menu Utama:** ``` ├── Dashboard Eksekutif │ ├── KPI Sekolah (NEM rata-rata, kelulusan, prestasi) │ ├── Grafik Kehadiran Bulanan │ ├── Progress Program Kerja │ └── Laporan Keuangan Ringkas │ ├── Manajemen Dokumen │ ├── Arsip Surat Masuk / Keluar │ ├── Dokumen Kebijakan & SK │ ├── Laporan dari Wakil Kepala │ ├── Tanda Tangan Digital (e-signature) │ └── Riwayat Dokumen Disetujui │ ├── Supervisi & Evaluasi │ ├── Jadwal Supervisi Guru │ ├── Hasil Observasi Kelas │ ├── Penilaian Kinerja Guru (PKG) │ └── Rekomendasi Tindak Lanjut │ ├── Rapat & Agenda │ ├── Jadwal Rapat (buat/edit/hapus) │ ├── Notulen Rapat │ ├── Disposisi Surat │ └── Kalender Eksekutif │ ├── Laporan & Analitik │ ├── Laporan Akademik Per Semester │ ├── Laporan Kehadiran Rekapitulasi │ ├── Analitik Prestasi Siswa │ ├── Laporan Sarana Prasarana │ └── Export ke PDF / Excel │ └── Pengaturan Sekolah ├── Data Profil Sekolah ├── Manajemen Tahun Ajaran ├── Konfigurasi Sistem └── Manajemen Pengguna (Akun) ``` --- #### 🏛️ WAKIL KEPALA SEKOLAH **Sub-Peran:** - Wakasek Kurikulum - Wakasek Kesiswaan - Wakasek Sarana Prasarana - Wakasek Hubungan Masyarakat **Menu Umum Wakasek:** ``` ├── Dashboard Wakasek │ ├── Tugas & Disposisi Masuk │ ├── Progress Program Kerja Bidang │ ├── Deadline Laporan │ └── Notifikasi Penting │ ├── Manajemen Dokumen Bidang │ ├── Upload Laporan ke Kepala Sekolah │ ├── Distribusi Dokumen ke Guru/Staff │ ├── Arsip Bidang │ └── Template Dokumen │ └── Disposisi & Komunikasi ├── Terima & Teruskan Disposisi ├── Buat Surat Internal └── Pesan ke Guru/Staff ``` **Menu Spesifik Wakasek Kurikulum:** ``` ├── Manajemen Kurikulum │ ├── Kalender Akademik (buat/edit) │ ├── Jadwal Pelajaran (generator & editor) │ ├── Distribusi Jam Mengajar Guru │ ├── Program Semester (Promes) │ ├── Program Tahunan (Prota) │ └── Silabus & RPP Repository │ ├── Penilaian & Rapor │ ├── Konfigurasi KKM per Mata Pelajaran │ ├── Rekap Nilai Ujian (UH/UTS/UAS) │ ├── Monitoring Pengisian Rapor │ └── Analisis Soal & Daya Serap │ └── Administrasi Akademik ├── Data Mata Pelajaran ├── Alokasi Kelas & Rombel └── Jadwal Ujian Sekolah ``` **Menu Spesifik Wakasek Kesiswaan:** ``` ├── Data Siswa │ ├── Daftar Siswa Aktif per Kelas │ ├── Data PPDB (Penerimaan Siswa Baru) │ ├── Mutasi Masuk / Keluar │ └── Alumni │ ├── Kehadiran & Kedisiplinan │ ├── Rekap Absensi Siswa │ ├── Catatan Pelanggaran & Sanksi │ ├── Pencapaian Poin Kedisiplinan │ └── Surat Panggilan Orang Tua │ ├── Ekstrakurikuler & Prestasi │ ├── Daftar Ekskul & Pembina │ ├── Jadwal Latihan Ekskul │ ├── Pencatatan Prestasi Siswa │ └── Sertifikat & Penghargaan │ └── BK & Konseling ├── Jadwal Konseling ├── Catatan Kasus (terlindungi) └── Referensi & Tindak Lanjut ``` **Menu Spesifik Wakasek Sarpras:** ``` ├── Inventaris │ ├── Data Barang & Aset │ ├── Kartu Barang Inventaris │ ├── Kondisi & Lokasi Aset │ └── Laporan Inventaris Tahunan │ ├── Pemeliharaan │ ├── Jadwal Pemeliharaan Rutin │ ├── Laporan Kerusakan │ ├── Pengajuan Perbaikan │ └── Rekap Biaya Pemeliharaan │ └── Pengadaan ├── Rencana Pengadaan ├── Proses Pengadaan (RAB) └── Bukti Penerimaan Barang ``` **Menu Spesifik Wakasek Humas:** ``` ├── Komunikasi Eksternal │ ├── Surat Keluar ke Instansi │ ├── Kerjasama & MOU │ └── Media Sosial Sekolah │ ├── Publikasi & Dokumentasi │ ├── Galeri Foto Kegiatan │ ├── Berita / Artikel Sekolah │ └── Laporan Kegiatan │ └── Hubungan Komite & Orang Tua ├── Data Komite Sekolah ├── Jadwal Pertemuan Orang Tua └── Notulen Rapat Komite ``` --- #### 👨‍💼 STAFF TATA USAHA (TU) ``` ├── Dashboard TU │ ├── Surat Masuk Hari Ini │ ├── Tugas Pending │ ├── Dokumen Perlu Diproses │ └── Pengumuman Internal │ ├── Administrasi Surat │ ├── Surat Masuk │ │ ├── Catat Surat Masuk (nomor, pengirim, perihal, lampiran) │ │ ├── Scan & Upload Surat │ │ ├── Disposisi ke Pejabat │ │ └── Arsip Surat Masuk │ │ │ ├── Surat Keluar │ │ ├── Buat Surat (dengan template) │ │ ├── Penomoran Surat Otomatis │ │ ├── Persetujuan & Tanda Tangan │ │ └── Arsip Surat Keluar │ │ │ └── Buku Agenda Surat │ ├── Manajemen Kepegawaian │ ├── Data Pegawai (GTK) │ │ ├── Biodata Guru & Staff │ │ ├── Riwayat Pendidikan & Pelatihan │ │ ├── Dokumen Kepegawaian (SK, BPJS, dll) │ │ └── Kenaikan Pangkat & Berkala │ │ │ ├── Absensi Pegawai │ │ ├── Input Absensi Harian │ │ ├── Rekap Kehadiran Bulanan │ │ ├── Surat Izin & Cuti │ │ └── Laporan Absensi ke Kepala Sekolah │ │ │ └── Penggajian │ ├── Data Gaji & Tunjangan │ ├── Slip Gaji │ └── Laporan Penggajian │ ├── Keuangan & BOS │ ├── RKAS (Rencana Kegiatan & Anggaran Sekolah) │ ├── Realisasi Anggaran │ ├── Laporan BOS Triwulan │ ├── Kuitansi & Bukti Transaksi │ └── Laporan Keuangan │ ├── Kesiswaan TU │ ├── Leger / Buku Induk Siswa │ ├── Surat Keterangan Siswa │ │ ├── Surat Keterangan Aktif │ │ ├── Surat Keterangan Berkelakuan Baik │ │ └── Surat Keterangan Lulus │ ├── Legalisasi Dokumen │ └── SKHUN & Ijazah │ └── Dokumen & Arsip ├── Upload Dokumen Institusi ├── Kategorisasi Arsip ├── Pencarian Arsip └── Penghapusan Dokumen (dengan konfirmasi) ``` --- #### 👩‍🏫 GURU ``` ├── Dashboard Guru │ ├── Jadwal Mengajar Hari Ini │ ├── Tugas Belum Dinilai (dari siswa) │ ├── Kalender Akademik Dekat │ └── Notifikasi dari Sekolah │ ├── Kelas Saya │ ├── Daftar Kelas Diampu │ ├── Per Kelas: │ │ ├── Absensi Siswa (per pertemuan) │ │ ├── Materi Pelajaran (upload PPT/PDF/video) │ │ ├── Tugas & Penugasan │ │ ├── Penilaian Harian (UH) │ │ └── Forum Diskusi Kelas │ └── Wali Kelas (jika berlaku) │ ├── Data Siswa Kelas │ ├── Rekap Absensi Kelas │ ├── Catatan Perkembangan Siswa │ └── Komunikasi ke Orang Tua │ ├── Perencanaan Mengajar │ ├── RPP (Rencana Pelaksanaan Pembelajaran) │ │ ├── Buat RPP (form terstruktur) │ │ ├── Template RPP │ │ ├── Upload RPP (PDF/DOCX) │ │ └── Arsip RPP Semester Lalu │ │ │ ├── Modul Ajar / Bahan Ajar │ │ ├── Upload Modul │ │ ├── Berbagi ke Sesama Guru │ │ └── Bank Soal Pribadi │ │ │ └── Program Semester / Tahunan │ ├── Template Promes │ └── Upload Promes/Prota │ ├── Penilaian & Rapor │ ├── Input Nilai │ │ ├── Nilai Harian (UH) │ │ ├── Nilai Tugas │ │ ├── Nilai UTS │ │ ├── Nilai UAS │ │ └── Nilai Sikap & Keterampilan │ │ │ ├── Rekap Nilai per Siswa & Kelas │ ├── Analisis Butir Soal │ ├── Pengisian Deskripsi Rapor │ └── Preview Rapor Siswa │ ├── Bank Soal │ ├── Buat Soal (pilgan, essay, uraian) │ ├── Kategorisasi (KD, Level Kognitif) │ ├── Import Soal dari File │ └── Buat Paket Ujian Online │ ├── Dokumen Saya │ ├── Upload Dokumen Pribadi (SK, Sertifikat) │ ├── Berkas Kenaikan Pangkat │ ├── Portofolio Mengajar │ └── Berbagi File ke Siswa/Guru │ └── Pengembangan Diri ├── Riwayat Pelatihan & Workshop ├── Poin PKB (Pengembangan Keprofesian) └── Target Pengembangan ``` --- #### 🧑‍💼 TENAGA KEPENDIDIKAN (Non-Guru) *Mencakup: Pustakawan, Laboran, Petugas Keamanan, Petugas Kebersihan, dll.* ``` ├── Dashboard Tendik │ ├── Tugas Hari Ini │ ├── Absensi Saya │ └── Pengumuman Sekolah │ ├── Absensi & Kehadiran │ ├── Check-in / Check-out Harian │ ├── Pengajuan Izin / Cuti │ └── Riwayat Absensi │ ├── Dokumen Saya │ ├── Upload Dokumen Pribadi │ ├── SK Penugasan │ └── Sertifikat & Piagam │ ├── Laporan Tugas │ ├── Laporan Harian / Mingguan │ ├── Laporan Inventaris (Pustakawan/Laboran) │ └── Laporan Insiden / Kejadian │ └── [Modul Spesifik per Fungsi] Pustakawan: ├── Data Koleksi Buku ├── Peminjaman & Pengembalian ├── Denda & Tagihan └── Laporan Perpustakaan Laboran: ├── Inventaris Alat Lab ├── Jadwal Penggunaan Lab ├── Laporan Kondisi Alat └── Pengajuan Perbaikan ``` --- #### 🎒 SISWA ``` ├── Dashboard Siswa │ ├── Jadwal Pelajaran Hari Ini │ ├── Tugas Belum Dikerjakan (deadline) │ ├── Nilai Terbaru │ └── Pengumuman Kelas & Sekolah │ ├── Pembelajaran │ ├── Materi Pelajaran │ │ ├── Per Mata Pelajaran │ │ ├── Download Modul / PPT / PDF │ │ └── Video Pembelajaran │ │ │ ├── Tugas │ │ ├── Tugas Aktif (deadline) │ │ ├── Submit Tugas (upload file) │ │ ├── Status Pengumpulan │ │ └── Riwayat Tugas │ │ │ └── Ujian Online │ ├── Ujian Aktif │ ├── Hasil Ujian │ └── Pembahasan Soal │ ├── Nilai & Rapor │ ├── Nilai per Mata Pelajaran │ ├── Rekap Nilai Semester │ ├── Rapor Digital (baca saja) │ └── Grafik Perkembangan Nilai │ ├── Absensi │ ├── Riwayat Kehadiran Saya │ ├── Rekap Absensi per Bulan │ └── Pengajuan Izin (perlu persetujuan) │ ├── Perpustakaan Digital │ ├── Katalog E-Book Sekolah │ ├── Buku Dipinjam │ └── Rekomendasi Bacaan │ ├── Dokumen Saya │ ├── Surat Keterangan (download) │ ├── Upload Berkas (PPDB, administrasi) │ └── Hasil Karya / Portofolio │ └── Komunikasi ├── Pesan ke Guru / Wali Kelas ├── Forum Diskusi Kelas └── Pengumuman dari Sekolah ``` --- ## 4. DASHBOARD FUNGSIONAL ### 4.1 Komponen Dashboard Global Setiap dashboard memiliki komponen berikut yang disesuaikan per peran: #### Widget Statistik (Stat Card) ``` ┌─────────────────────────────┐ │ 📊 Ikon JUDUL │ │ Nilai Besar (angka) │ │ ↑ +X% dari kemarin │ └─────────────────────────────┘ ``` **Data per peran:** | Peran | Widget Statistik | |-------|-----------------| | Kepala Sekolah | Total Siswa, Kehadiran Hari Ini (%), Guru Hadir, Dokumen Pending TTD | | Wakasek | Progress Program Kerja (%), Laporan Pending, Rapat Minggu Ini | | TU | Surat Masuk Hari Ini, Dokumen Diproses, Permintaan Surat Keterangan | | Guru | Kelas Hari Ini, Tugas Belum Dinilai, Siswa Absen, Materi Terupload | | Siswa | Tugas Deadline Dekat, Kehadiran Bulan Ini (%), Nilai Rata-rata, Buku Dipinjam | #### Widget Aktivitas Terbaru ``` Aktivitas terbaru (timeline feed): - [ikon] Aksi — oleh siapa — waktu relatif ("2 menit lalu") - Clickable untuk navigasi ke item terkait ``` #### Widget Kalender Mini - Tampilan bulan kompak - Dot indikator pada tanggal ada kegiatan - Klik tanggal → popup detail kegiatan #### Widget Dokumen Terbaru - 5 dokumen terakhir diakses/diupload - Nama file, tipe, waktu, ukuran - Quick action: buka, unduh, bagikan #### Widget Pengumuman / Notifikasi - Daftar pengumuman dari manajemen sekolah - Badge jumlah belum dibaca - Prioritas: Penting (merah), Normal (biru), Info (abu) ### 4.2 Dashboard Kepala Sekolah — Layout ``` ┌──────────────────────────────────────────────────────────┐ │ Header: "Selamat Pagi, Bapak/Ibu [Nama]" + Tanggal │ ├──────────────┬───────────┬───────────┬───────────────────┤ │ Total Siswa │ Guru Hadir│ Kehadiran │ Dok Pending TTD │ │ 892 │ 52/58 │ 94.2% │ 7 │ ├──────────────┴───────────┴───────────┴───────────────────┤ │ │ │ [Grafik Kehadiran 30 Hari - Line Chart] │ │ │ ├───────────────────────┬──────────────────────────────────┤ │ Dokumen Perlu TTD │ Agenda Mendatang │ │ ───────────────── │ ────────────────── │ │ • RPP Kls 8A - Bu X │ 📅 Rapat Dinas - Besok 08.00 │ │ • LPJ Ekskul - Pak Y │ 📅 Supervisi - Rabu 10.00 │ │ • SK Kepanitiaan │ 📅 Rapat Komite - Jumat 13.00 │ │ [Lihat Semua] │ [Lihat Kalender] │ ├───────────────────────┴──────────────────────────────────┤ │ Prestasi & Capaian Terbaru │ │ [Kartu prestasi siswa/guru terbaru] │ └──────────────────────────────────────────────────────────┘ ``` ### 4.3 Dashboard Guru — Layout ``` ┌──────────────────────────────────────────────────────────┐ │ "Hai, [Nama Guru]!" + Hari/Tanggal │ ├──────────┬───────────┬──────────────┬────────────────────┤ │Kelas Hr │Tugas │Siswa Absen │Materi Uploaded │ │ Ini: 3 │Dinilai: 5 │ Hari Ini: 2 │ Semester: 12 │ ├──────────┴───────────┴──────────────┴────────────────────┤ │ Jadwal Hari Ini │ │ ┌────────┬────────────────┬────────┬──────────────────┐ │ │ │ Jam │ Kelas │ MapPel │ Status │ │ │ │ 07.00 │ VIII A (30 sw) │ Mat. │ ✅ Selesai │ │ │ │ 08.30 │ VIII B (28 sw) │ Mat. │ 🔵 Berlangsung │ │ │ │ 10.00 │ IX A (31 sw) │ Mat. │ ⬜ Belum │ │ │ └────────┴────────────────┴────────┴──────────────────┘ │ ├───────────────────────┬──────────────────────────────────┤ │ Tugas Belum Dinilai │ Upload Materi Cepat │ │ • Tugas Essay 8A (27)│ [Drop area / tombol upload] │ │ • Soal UH 8B (25) │ │ │ • Portofolio 9A (30) │ Terakhir diupload: │ │ [Nilai Sekarang] │ 📄 Bab 3 Persamaan.pdf - 1j lalu│ └───────────────────────┴──────────────────────────────────┘ ``` ### 4.4 Dashboard Siswa — Layout ``` ┌──────────────────────────────────────────────────────────┐ │ "Halo, [Nama Siswa]!" Kelas IX-A | Tahun Ajaran 2025/26 │ ├──────────┬──────────────┬─────────────────┬──────────────┤ │Tugas │Kehadiran │Nilai Rata-rata │Buku Dipinjam │ │Deadline:4│ 97.5% │ 85.3 │ 2 │ ├──────────┴──────────────┴─────────────────┴──────────────┤ │ Tugas Mendatang (deadline terdekat) │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ 🔴 Esai Bahasa Indonesia — Besok, 08.00 │ │ │ │ 🟡 Laporan Praktikum IPA — Kamis, 23.59 │ │ │ │ 🟢 Presentasi Matematika — Sabtu, 10.00 │ │ │ └──────────────────────────────────────────────────────┘ │ ├───────────────────────┬──────────────────────────────────┤ │ Jadwal Hari Ini │ Nilai Terbaru │ │ 07.00 - MTK │ Matematika UH3: 88 │ │ 08.30 - B. Indo │ IPA UH2: 92 │ │ 10.00 - IPA │ Bahasa Inggris UH3: 78 │ │ 11.30 - Istirahat │ [Lihat Semua Nilai] │ │ 12.00 - IPS │ │ └───────────────────────┴──────────────────────────────────┘ ``` --- ## 5. MANAJEMEN DOKUMEN & INTEGRASI GOOGLE DRIVE ### 5.1 Fitur Inti Dokumen #### Upload Dokumen - Drag & drop area - Multi-file upload sekaligus - Progress bar per file - Preview sebelum upload (PDF, gambar, Office) - Otomatis tersimpan ke Google Drive sesuai folder role #### Struktur Folder di Google Drive (otomatis) ``` cloud167-smpn167/ ├── dokumen-sekolah/ │ ├── surat-masuk/[tahun]/[bulan]/ │ ├── surat-keluar/[tahun]/[bulan]/ │ ├── kebijakan-sk/ │ └── laporan-tahunan/ ├── kurikulum/ │ ├── rpp/[guru-id]/[mapel]/[semester]/ │ ├── modul-ajar/[mapel]/ │ └── bank-soal/[mapel]/ ├── kesiswaan/ │ ├── data-siswa/[tahun-ajaran]/ │ ├── prestasi/ │ └── ekskul/ ├── kepegawaian/ │ └── [nip-guru]/ │ ├── sk-penugasan/ │ ├── sertifikat/ │ └── dokumen-kpn/ └── keuangan/ ├── bos/[tahun]/ ├── rkas/ └── laporan-keuangan/ ``` #### Hak Akses Dokumen per Peran | Folder | Kepala Sek. | Wakasek | TU | Guru | Tendik | Siswa | |--------|:-----------:|:-------:|:--:|:----:|:------:|:-----:| | Surat Masuk/Keluar | R/W | R | R/W | — | — | — | | Kebijakan/SK | R/W | R | R | R | — | — | | RPP/Modul | R | R | — | R/W* | — | R** | | Data Siswa | R | R | R/W | R* | — | R*** | | Kepegawaian Pribadi | R | — | R/W | R*** | R*** | — | | Keuangan | R | — | R/W | — | — | — | `*` hanya data kelas/mapel yang diampu `**` hanya materi yang diupload guru `***` hanya data pribadi sendiri ### 5.2 Fitur Berbagi (Share) - Share link (viewer / editor) - Share ke pengguna internal (search by name/email) - Share ke kelas tertentu - Atur tanggal expired link - Revoke akses kapan saja ### 5.3 Kolaborasi Real-time - Preview dokumen langsung di browser (PDF, Office, gambar, video) - Komentar pada dokumen - Riwayat versi (version history) - Restore ke versi sebelumnya --- ## 6. FITUR KOMUNIKASI & NOTIFIKASI ### 6.1 Sistem Pesan Internal - Pesan 1-on-1 (personal chat) - Pesan Grup (per kelas, per bidang) - Broadcast Pengumuman (dari manajemen ke semua/selektif) - Lampiran file langsung dari Drive ### 6.2 Notifikasi | Jenis Notifikasi | Penerima | Channel | |-----------------|----------|---------| | Dokumen baru perlu TTD | Kepala Sekolah | In-app + Email | | Tugas baru dari guru | Siswa kelas | In-app | | Tugas dikumpulkan siswa | Guru | In-app | | Nilai/rapor dipublikasi | Siswa | In-app + Email | | Surat masuk baru | TU, Kepala Sek. | In-app | | Pengumuman sekolah | Semua | In-app + Email | | Deadline mendekat | Terkait | In-app | | Absensi kehadiran rendah | Wali Kelas | In-app | ### 6.3 Pengumuman (Announcement) - Buat pengumuman dari Kepala Sekolah / Wakasek - Target: semua, per kelas, per peran, custom - Lampiran file - Pin pengumuman penting di dashboard - Arsip pengumuman --- ## 7. KALENDER SEKOLAH ### 7.1 Jenis Event - **Merah:** Hari Libur Nasional - **Biru:** Kegiatan Akademik (UTS, UAS, PAS) - **Hijau:** Kegiatan Sekolah (rapat, upacara, ekskul) - **Ungu:** Agenda Pimpinan (rapat dinas) - **Oranye:** Deadline (pengumpulan laporan, rapor) ### 7.2 Fitur Kalender - Tampilan: Bulanan / Mingguan / Harian / Agenda list - Tambah event (sesuai hak akses) - Import dari Google Calendar sekolah - Export ke PDF (cetak kalender) - Reminder otomatis (H-3, H-1, hari-H) - Sinkronisasi dengan Google Calendar pribadi --- ## 8. KEAMANAN & AUTENTIKASI ### 8.1 Login ``` Metode Login: 1. Google SSO dengan akun @smpn167jakarta.sch.id (UTAMA) 2. Username + Password (alternatif) Proses: - Input: user@smpn167jakarta.sch.id - Redirect ke Google SSO - Verifikasi domain sekolah - Assign role otomatis berdasarkan database kepegawaian/kesiswaan - Session token disimpan secara aman ``` ### 8.2 Keamanan Akun - Logout otomatis setelah 8 jam tidak aktif - Riwayat login (device, waktu, lokasi) - Notifikasi login dari perangkat baru - Nonaktifkan akun tanpa menghapus data (untuk siswa lulus/guru pindah) ### 8.3 Audit Log - Rekam semua aksi penting: upload, delete, share, lihat dokumen sensitif - Admin dapat filter dan export log - Retensi log: 2 tahun --- ## 9. TEKNOLOGI & IMPLEMENTASI ### 9.1 Stack yang Direkomendasikan ``` Frontend: Framework : React 18+ atau Next.js 14+ Styling : Tailwind CSS + komponen custom State : Zustand atau Redux Toolkit Animasi : Framer Motion Icons : Lucide React Charts : Recharts atau ApexCharts Table : TanStack Table (React Table) Form : React Hook Form + Zod validation Kalender : FullCalendar.js Drive UI : @googleapis/drive SDK Backend: Runtime : Node.js (Express) atau Next.js API Routes Auth : Google OAuth2 + NextAuth.js Database : PostgreSQL (data relasional) + Redis (cache/session) Storage : Google Drive API (Workspace for Education) Email : Nodemailer + Gmail API Deployment: Hosting : Vercel / Google Cloud Run / GKE CDN : Cloudflare Domain : cloud167.smpn167jakarta.sch.id ``` ### 9.2 Integrasi Google Workspace ```javascript // Scope OAuth yang diperlukan const GOOGLE_SCOPES = [ 'https://www.googleapis.com/auth/drive', // Full Drive access 'https://www.googleapis.com/auth/drive.file', // Per-file access 'https://www.googleapis.com/auth/calendar', // Calendar 'https://www.googleapis.com/auth/gmail.send', // Kirim email notifikasi 'openid', 'email', 'profile' ]; // Konfigurasi Google Workspace Admin SDK untuk verifikasi domain // Hanya izinkan domain: smpn167jakarta.sch.id ``` ### 9.3 Performa & Optimasi - Lazy loading per halaman (code splitting) - Image optimization (WebP, responsive) - Caching agresif untuk data statis (Catalog buku, daftar mapel) - Pagination server-side untuk daftar siswa/dokumen besar - Service Worker untuk offline capability (baca dokumen yang sudah di-cache) - Virtual scroll untuk tabel dengan ribuan baris --- ## 10. PANDUAN IMPLEMENTASI BERTAHAP ### Phase 1 — MVP (Bulan 1-2) - [ ] Sistem autentikasi Google SSO - [ ] Dashboard dasar (semua peran) - [ ] Upload & manajemen dokumen (integrasi Drive) - [ ] Sistem notifikasi dasar - [ ] Responsif mobile ### Phase 2 — Core Features (Bulan 3-4) - [ ] Modul surat masuk/keluar dengan disposisi - [ ] Manajemen data siswa & guru - [ ] Absensi siswa (input guru) - [ ] Upload materi & pengumpulan tugas - [ ] Kalender sekolah - [ ] Pesan internal (chat) ### Phase 3 — Advanced (Bulan 5-6) - [ ] Input & rekap nilai lengkap - [ ] Rapor digital - [ ] Bank soal & ujian online - [ ] Laporan & analitik dengan grafik - [ ] e-Signature dokumen - [ ] Modul perpustakaan & inventaris ### Phase 4 — Optimization (Bulan 7+) - [ ] Mobile app (PWA atau React Native) - [ ] Integrasi Dapodik/EMIS - [ ] AI assistant (ringkasan dokumen, rekomendasi) - [ ] Advanced analytics & BI dashboard - [ ] Audit log lengkap --- ## 11. CHECKLIST KUALITAS UI Sebelum deployment setiap fitur, pastikan: - [ ] Tampilan konsisten di Chrome, Firefox, Safari, Edge - [ ] Responsif di HP 375px, Tablet 768px, Desktop 1280px - [ ] Loading state (skeleton / spinner) pada semua fetch data - [ ] Empty state yang informatif (bukan layar kosong) - [ ] Error state dengan pesan yang ramah pengguna - [ ] Konfirmasi sebelum aksi destruktif (hapus, revoke) - [ ] Keyboard navigable (Tab order logis) - [ ] Kontras warna memenuhi WCAG AA (4.5:1 untuk teks) - [ ] Semua form ada validasi real-time + pesan error jelas - [ ] File size limit tertera jelas di upload (maks 100MB per file) - [ ] Feedback haptic / visual saat submit berhasil --- ## 12. PANDUAN PENGEMBANG ### Konvensi Penamaan File ``` components/ ui/ → Button.jsx, Card.jsx, Modal.jsx (atom UI) layout/ → Sidebar.jsx, Header.jsx, DashboardLayout.jsx features/ → documents/, students/, attendance/, grades/ [feature]/ [Feature]Page.jsx → halaman utama [Feature]List.jsx → tampilan list [Feature]Form.jsx → form input [Feature]Card.jsx → kartu item use[Feature].js → custom hook [feature].api.js → API calls ``` ### Variabel Environment ```env NEXTAUTH_URL=https://cloud167.smpn167jakarta.sch.id NEXTAUTH_SECRET=... GOOGLE_CLIENT_ID=... GOOGLE_CLIENT_SECRET=... GOOGLE_WORKSPACE_DOMAIN=smpn167jakarta.sch.id DATABASE_URL=postgresql://... REDIS_URL=redis://... ``` --- *Dokumen ini bersifat living document — diperbarui seiring perkembangan aplikasi cloud167.* *Dibuat untuk: SMPN 167 Jakarta | cloud167 Development Team*