Design DocumentLegacy format

Technical Design & UI/UX for integrated management system

Typography

DisplayPlus Jakarta Sans · 32px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadingPlus Jakarta Sans · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyPlus Jakarta Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Data/KodeJetBrains Mono · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Technical Design & UI/UX for integrated management system

Components

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

StatusBadge

pending

approved

rejected

Buttons

Do's & Don'ts

Do

Gunakan warna hijau dan kuning untuk elemen utama dan aksen

Don't

Jangan gunakan warna biru atau abu-abu untuk aksi utama
Sistem Informasi Manajemen & Administrasi Terpadu IPNU-IPPNU

Versi: 0.1 (draft awal, turunan dari architecture.md & PRD)

Cakupan: Technical Design (skema database, kontrak API, struktur folder) + UI/UX Design (alur layar, komponen, style guide)

---

# BAGIAN A — TECHNICAL DESIGN

A.1 Skema Database (Entity Overview)

Skema disederhanakan per modul. Semua tabel operasional punya unit_id (FK ke units) untuk tenant scoping, kecuali tabel global (users, roles, units sendiri).

### A.1.1 Inti Organisasi

```

units

id, name, type (PAC/RANTING/KOMISARIAT), parent_unit_id (nullable, FK units)

address, contact_wa, status (active/inactive)

user_profiles

id, user_id (FK users), unit_id, nia (nomor induk anggota)

full_name, birth_date, gender, wa_number

status (active/non_active), joined_at

users

id, email, wa_number, password_hash

role_id (FK roles), unit_id (FK units, nullable utk Super Admin)

is_minor (bool), guardian_consent_at (nullable)

email_verified_at, wa_verified_at

roles

id, name (ketua, wakil_ketua, sekretaris, wasek, bendahara,

wk_bendahara, anggota, super_admin)

scope_level (pac / ranting / global)

structures -- masa khidmat kepengurusan

id, unit_id, user_id, role_id

period_start, period_end, is_active

```

### A.1.2 Modul B — Surat-Menyurat (E-Office)

> Catatan: skema Modul B sudah cukup kompleks (alur approval, TTD digital, Surat Sendiri/Bersama, format nomor surat resmi PD/PRT yang berbeda per organisasi IPNU/IPPNU) sehingga detail lengkapnya dipindah ke schema.md §2 agar tidak ada dua sumber kebenaran yang bisa tidak sinkron. Ringkasan tabel: organization_profiles, user_signatures, letter_types (kode indeks per organisasi), letter_number_sequences (counter terpisah reguler/bersama, reset per pergantian pengurus), letters_out (dengan letter_mode, content_mode, status alur, letter_number yang terisi belakangan), letter_out_partners, letter_approval_steps, letters_in, dispositions, library_documents. Lihat juga alur bisnisnya di rules.md §4 (termasuk tabel kode indeks §4.4a yang diturunkan langsung dari Peraturan Administrasi hasil Konbes IPNU & IPPNU) dan alur layarnya di §B.4.2–B.4.4 dokumen ini.

### A.1.3 Modul C — Keuangan

```

cashbook_entries

id, unit_id, type (in/out), amount, description

receipt_photo_path, running_balance, created_by, entry_date

approved_by (nullable), approved_at (nullable)

```

### A.1.4 Modul D — Agenda & Presensi

```

agendas

id, unit_id, title, description, location_name

latitude, longitude, geofence_radius_m

visibility (internal/public), start_time, end_time

attendances

id, agenda_id, user_id (nullable utk tamu eksternal)

guest_name (nullable), method (gps/qr/manual)

lat, lng, distance_m (nullable), recorded_at (server timestamp)

```

### A.1.5 Modul E — Kaderisasi & Evaluasi

```

training_programs

id, unit_id, name (MAKESTA/LAKMUD), start_date, end_date

training_registrations

id, program_id, full_name, wa_number, email (nullable)

status (registered/attended/graduated/failed)

user_id (nullable, terisi setelah lulus & akun dibuat)

assessment_tokens -- magic link asesor eksternal

id, registration_id, assessor_name, token, expires_at, used_at

assessment_scores

id, registration_id, token_id (nullable), score_type (cognitive/feedback)

score_value, submitted_at

certificates

id, registration_id, qr_code, pdf_path, issued_at

```

### A.1.6 Modul F — Akreditasi & Klasterisasi

```

accreditation_submissions

id, unit_id, period, status (draft/submitted/assessed/plenary/certified)

linked_letter_ids, linked_cashbook_ids, linked_agenda_ids (json refs)

assessor_scores

id, submission_id, assessor_id, criterion, rating (TL/KL/L), note

attachment_preview_path

plenary_results

id, submission_id, final_score, grade (A/B/C), decided_at, decided_by

grading_scales -- dinamis per PAC

id, unit_id (PAC), grade_label, min_score, max_score

```

### A.1.7 Modul G — Eksternal & Pendukung

```

alumni

id, full_name, wa_number, graduation_year, current_activity

donation_campaigns

id, title, target_amount, collected_amount, status

donations

id, campaign_id, donor_name, amount, midtrans_ref, status

stakeholders -- MoU

id, name, mou_start, mou_end, reminder_sent_at

public_events

id, title, event_date, location, quota

event_registrations

id, event_id, name, wa_number, ticket_code, checked_in_at (nullable)

```

### A.1.8 Modul H — Aset

```

assets

id, unit_id, name, category, condition, acquired_at

asset_loans

id, asset_id, borrowed_by, due_date, returned_at (nullable)

```

### A.1.9 Logging (append-only)

```

audit_logs

id, user_id, unit_id, action, entity, entity_id

before_value (json), after_value (json), ip_address, created_at

access_logs

id, user_id, event (login_success/login_fail/lockout/logout), ip, created_at

integration_logs

id, type (wa/midtrans/pdf_job), reference_id, status, retry_count, created_at

```

> Semua tabel modul A–H wajib kena Global Scope unit_id kecuali dinyatakan lain. Diagram relasi detail (ERD visual) disarankan dibuat terpisah di tahap sprint planning bila diperlukan.

---

A.2 Kontrak API (Ringkasan Endpoint)

Standar: REST, prefix /api/v1/, auth via Bearer Token (Laravel Sanctum), response JSON konsisten:

```json

{

"success": true,

"data": { },

"message": "OK"

}

```

Error:

```json

{

"success": false,

"error": { "code": "VALIDATION_ERROR", "details": { } },

"message": "..."

}

```

| Domain | Endpoint contoh | Method | Akses |

|---|---|---|---|

| Auth | /auth/login, /auth/otp/verify, /auth/password/forgot | POST | Publik |

| Anggota | /members, /members/{id} | GET/POST/PUT | RBAC per matriks §4.I.2 |

| Surat Keluar (E-Office) | /letters-out, /letters-out/{id}/submit, /letters-out/{id}/steps/{stepId}/validate, /letters-out/{id}/steps/{stepId}/sign | GET/POST | Buat: Wasek; Validasi: Wasek lain/Sekretaris; TTD: Sekretaris/Ketua — lihat alur lengkap di rules.md §4 |

| Verifikasi Surat (publik) | /letters-out/verify/{token} | GET | Publik, tanpa login |

| Disposisi | /letters-in/{id}/dispositions | POST | Sekretaris |

| Kas | /cashbook, /cashbook/{id}/approve | GET/POST/PATCH | Bendahara input, Ketua approve LPJ |

| Agenda | /agendas, /agendas/{id}/attendance | GET/POST | Kelola: Wasek, Presensi: Anggota |

| Pendaftaran Kaderisasi | /training/registrations | POST | Publik (tanpa akun) |

| Form Asesor (token) | /assessment/{token} | GET/POST | Magic link, tanpa akun |

| Akreditasi | /accreditation/submissions, /accreditation/{id}/plenary | GET/POST | Susun: Ranting, Sahkan: Ketua PAC |

| Donasi | /donations, /donations/webhook/midtrans | POST | Publik + webhook |

| Event | /events, /events/{id}/check-in | GET/POST | Publik daftar, Panitia check-in |

| Aset | /assets, /assets/{id}/loans | GET/POST | Kelola: Wasek/Sekretaris |

| RBAC/Admin | /admin/roles, /admin/audit-logs | GET/POST | Super Admin only |

Dokumentasi lengkap (parameter, schema request/response, status code) tersedia di api-spec.yaml — juga dihasilkan otomatis lewat anotasi L5-Swagger di /api/documentation pada environment staging/dev.

---

A.3 Struktur Folder (Usulan)

### Backend (Laravel) — domain-first, bukan MVC datar

```

app/

├─ Domains/

│ ├─ Member/ (Models, Services, Policies, Http/Controllers)

│ ├─ Letter/

│ ├─ Cashbook/

│ ├─ Agenda/

│ ├─ Training/

│ ├─ Accreditation/

│ ├─ External/ (Donation, Stakeholder, Event)

│ ├─ Asset/

│ └─ Rbac/ (Roles, Policies, AuditLog)

├─ Support/

│ ├─ TenantScope/ (Global Scope unit_id)

│ ├─ Integrations/

│ │ ├─ WhatsApp/ (interface + driver Fonnte/Meta)

│ │ ├─ Midtrans/

│ │ └─ PdfGenerator/

│ └─ Logging/

├─ Jobs/ (SendWhatsAppJob, GenerateCertificateJob, dll)

└─ Http/Middleware/ (TenantScopeMiddleware, RoleMiddleware)

routes/

└─ api_v1.php

```

### Frontend (Vue.js)

```

src/

├─ modules/

│ ├─ member/

│ ├─ letter/

│ ├─ cashbook/

│ ├─ agenda/

│ ├─ training/

│ ├─ accreditation/

│ ├─ external/

│ └─ asset/

│ each: views/, components/, store/ (Pinia), api.js

├─ shared/

│ ├─ components/ (CardBase, DataTable, StatusBadge, dll)

│ ├─ layouts/ (AppShell, AuthLayout)

│ └─ composables/ (useAuth, useTenant, useOfflineSync)

├─ service-worker/ (cache strategy, background sync queue)

└─ router/

```

---

# BAGIAN B — UI/UX DESIGN

B.0 Arah Desain: "Senja di Serambi Pesantren"

> Alih-alih tema hijau-putih NU yang generik atau palet "AI-app default" (krem+terracotta, dashboard biru korporat), arah visual ini digali dari dunia nyata pelajar NU: cahaya senja di serambi pesantren menjelang Maghrib — hijau dedaunan/songkok yang dalam, keemasan lampu petromaks, dan kehangatan kumpul bersama. Ini yang membuat aplikasi terasa "punya kita", bukan software korporat yang dipakai terpaksa — sekaligus tetap terasa modern dan enak dipakai anak muda.

Prinsip inti:

Ramah, bukan kaku — tone hangat, rounded, mengundang, tapi tetap rapi & bisa dipercaya untuk urusan administrasi (surat, kas, akreditasi).

Gamifikasi yang jujur, bukan tempelan — sistem lencana untuk jenjang kaderisasi (MAKESTA→LAKMUD→LAKUT) itu SUDAH sistem rank/level di dunia nyata — desainnya tinggal mengangkat itu, bukan menambah elemen game palsu yang tidak nyambung ke konten.

Family friendly — warna hangat & aman, tidak ada elemen gelap/agresif, microcopy yang encouraging bukan menghakimi (lihat B.3a Tone of Voice).

Card-based layout: setiap unit informasi (surat, entri kas, agenda) ditampilkan sebagai kartu rounded, bukan tabel padat — lebih ramah dibaca di layar HP.

Dark mode default-aware: ikuti preferensi sistem perangkat, dengan toggle manual di pengaturan akun.

Mobile-first, PWA-installable: semua alur utama nyaman dioperasikan satu tangan; bottom tab bar (bukan hamburger menu) — sesuai kebiasaan Gen Z di Instagram/TikTok/Shopee.

Feedback instan: aksi async (kirim WA, generate PDF) menampilkan status loading + toast sukses/gagal, tidak membuat pengguna menebak-nebak.

Aksesibel: kontras warna cukup di kedua mode, ukuran tap-target minimal 44×44px, reduced-motion dihormati.

B.1 Sistem Warna

| Token | Nama | Light | Dark | Dipakai untuk |

|---|---|---|---|---|

| Primary | Hijau Songkok | #1F5A44 | #3E9575 | Aksi utama, navigasi aktif, identitas brand |

| Accent Emas | Kuning Maghrib | #F2A93B | #F4B860 | Lencana kaderisasi, badge pencapaian, highlight positif |

| Accent Hangat | Jingga Senja | #FF7A59 | #FF8F72 | Notifikasi, CTA sekunder, aksen ramah (bukan warna bahaya) |

| Background | Putih Kertas Kitab | #FFF9F0 | — | Latar utama, warm bukan stark white |

| Background Dark | Hijau Malam | — | #10261F | Latar mode gelap, hijau-hitam hangat bukan pure black |

| Surface/Card | — | #FFFFFF | #183B2E | Wadah kartu |

| Text Primary | Coklat Tinta | #2B2620 | #F3EFE6 | Teks utama |

| Text Secondary | — | #7A7264 | #B7AE9C | Teks sekunder/caption |

| Danger/Reject | — | #DC2626 | #F87171 | Penolakan, error — dipakai sesedikit mungkin agar tetap terasa aman |

| Success | — | #2F9E64 | #4FCB8C | Konfirmasi berhasil |

> Kenapa bukan hijau-putih NU polos: warna hijau tetap jadi identitas inti (Hijau Songkok), tapi dipadukan kuning-jingga senja supaya tidak terasa seperti dokumen organisasi formal belaka — kombinasi ini terasa hangat, related ke suasana pesantren beneran (lampu, senja, kumpul bareng), dan punya kontras yang cukup untuk aksen lencana/badge tanpa perlu warna baru yang asing.

B.2 Tipografi

| Peran | Font | Alasan |

|---|---|---|

| Display/Heading | Plus Jakarta Sans (Bold/ExtraBold) | Geometris, rounded, ramah — sekaligus font buatan Indonesia, koneksi lokal yang related |

| Body | Plus Jakarta Sans (Regular/Medium) atau Inter | Konsisten dengan display, sangat terbaca di layar kecil |

| Data/Kode | JetBrains Mono | Untuk NIA, nomor surat, kode indeks — biar rapi sejajar, bukan sekadar dekorasi |

Skala: 14–16px body, 20–28px heading kartu, 32px+ untuk angka besar (saldo kas, skor akreditasi) dengan weight 700–800 supaya terasa "achievement", bukan sekadar angka laporan.

B.2a Elemen Signature: Lencana Kader

> Ini elemen yang bikin aplikasi ini langsung dikenali — satu ide visual yang ditata dengan disiplin, bukan ditumpuk dengan dekorasi lain.

Sistem jenjang kaderisasi (Anggota → Kader, MAKESTA/LAKMUD/LAKUT/LAKNAS, jalur instruktur LATIN I/II) pada dasarnya sistem lencana/rank, mirip lencana pramuka yang sudah familiar buat pelajar Indonesia. Alih-alih menampilkan status kaderisasi sebagai teks/badge kotak biasa, sistem ini divisualkan sebagai:

Medali bundar dengan pita di bawahnya (motif lencana pramuka/sekolah), warna dasar Kuning Maghrib dengan tepi gradasi ke Jingga Senja.

Ikon geometris sederhana di tengah medali, beda per jenjang (mis. tunas untuk MAKESTA, daun untuk LAKMUD, obor untuk LAKUT) — bukan foto/ilustrasi rumit, supaya tetap ringan dirender & konsisten gaya.

Ditampilkan sebagai strip koleksi di header profil anggota — makin banyak lencana terkumpul, makin terlihat progres kaderisasinya, mirip koleksi lencana di sash pramuka.

Lencana abu-abu/outline untuk jenjang yang belum dicapai (state "terkunci", bukan disembunyikan) — memberi arah jelas "lanjut ke jenjang berikutnya" tanpa terasa menghakimi yang belum lulus.

Momen lencana baru terbuka (saat status graduated) dipakai sebagai satu-satunya animasi besar di aplikasi — confetti ringan + medali "muncul" dengan micro-interaction singkat. Ini satu-satunya tempat animasi besar dipakai; di tempat lain animasi dijaga minim (per prinsip restraint).

B.3 Komponen UI Inti (reusable)

| Komponen | Kegunaan | Modul pemakai |

|---|---|---|

| CardBase | Wadah konten dasar (surat, entri kas, agenda), rounded 20px | Semua |

| LencanaKader | Medali jenjang kaderisasi (lihat B.2a) — mode terkumpul/terkunci | Kaderisasi, Profil |

| StatusBadge | Label status berwarna (pending/approved/rejected/graded) | Surat, Kas, Kaderisasi, Akreditasi |

| BottomTabBar | Navigasi utama mobile: Beranda, Surat, Kegiatan, Kader, Profil | Semua |

| DataTable (dengan mode kartu di mobile) | Daftar data dengan filter/sort | Anggota, Aset, Log |

| OfflineIndicator | Ikon status koneksi + jumlah data pending sync | Presensi, Kas |

| GeofenceMap | Peta mini + radius untuk presensi/agenda | Agenda, Presensi |

| QrScanner / QrDisplay | Scan tiket/presensi & tampilkan QR sertifikat | Presensi, Event, Sertifikat |

| SignatureBlock | Tanda tangan digital pada surat/sertifikat, termasuk tata letak Ketua-kiri/Sekretaris-kanan & posisi stempel | Surat |

| SplitPreview | Preview dokumen berdampingan dengan form penilaian | Asesor Akreditasi |

| RadioTLKL | Komponen radio khusus TL/KL/L | Form Asesor |

| MagicLinkGate | Halaman akses token tanpa login, reusable selama durasi acara | Kaderisasi (peserta/staf eksternal) |

| BottomActionBar | Tombol aksi utama menempel bawah layar | Semua form |

| OnboardingTour | Tooltip panduan fitur inti saat login pertama | Onboarding Ranting baru |

| LetterModeToggle | Pilih Surat Sendiri vs Surat Bersama saat membuat draft | E-Office |

| LetterTypeFieldsForm | Form dinamis dari letter_types.fields_schema (Surat Khusus) | E-Office |

| LetterRichEditor | Editor isi bebas untuk Surat Umum | E-Office |

| ApprovalStepTracker | Stepper visual progres alur (validasi → TTD → mengetahui → stempel → nomor) | E-Office, Surat Lembaga |

| SignatureLookupButton | Tombol "Tanda Tangani" yang menarik TTD dari user_signatures; nonaktif + CTA upload jika belum ada | E-Office |

| LetterheadPreviewPane | Preview kop+isi+footer+stempel real-time, mendukung kop lembaga semi-otonom | E-Office |

| LetterNumberPreview | Simulasi format nomor surat sebelum finish | E-Office |

| StampBadge | Indikator visual stempel resmi pada dokumen final | E-Office |

| QrValidationCard | Tampilan hasil scan/cek keaslian surat di halaman publik | E-Office (publik) |

| EventCommitteeCard | Daftar panitia + seksi kegiatan besar, dengan badge posisi | Kepanitiaan Kegiatan |

| RABPlanner | Form ajukan & approve item RAB per seksi | Kepanitiaan Kegiatan |

| WebformQuotaBar | Progress bar sisa kuota pendaftaran (total & kategori eksternal) | Kaderisasi (publik) |

| GenderRoutingBadge | Penanda "data kamu tercatat di [unit]" pada join event IPNU-IPPNU | Kaderisasi (publik) |

B.3a Tone of Voice & Microcopy

> Suara aplikasi ini seperti kakak kelas yang membimbing, bukan sistem birokrasi. Bahasa Indonesia santai-santun, bukan bahasa baku formal ala surat dinas.

Kalimat aktif, langsung ke tindakan: "Kirim surat" bukan "Surat akan dikirimkan"; tombol dan hasil aksinya pakai kata yang sama ("Ajukan" → toast "Diajukan", bukan "Terkirim").

Nama sesuatu dari sudut pandang pengguna: "Tanda tangani" bukan "trigger signature workflow"; "Kirim ke PC" bukan "submit ke unit atasan".

Error tidak menyalahkan, langsung kasih solusi: "Nomor WA belum terdaftar. Coba cek lagi ya, atau hubungi Sekretaris unit kamu." — bukan "Error 422: Invalid input".

Layar kosong mengundang aksi: "Belum ada surat masuk. Sekali surat masuk, langsung muncul di sini." — bukan sekadar "Tidak ada data."

Momen kelulusan/lencana baru dirayakan tulus: "Selamat, kamu resmi jadi Kader! 🎉 Lencana MAKESTA sudah terkumpul." — bukan notifikasi datar "Status diperbarui: graduated".

Batasan tetap jujur, tidak menutupi: kalau sertifikat resmi masih menunggu PC, bilang jelas: "Surat Keterangan ini berlaku sementara sambil menunggu sertifikat resmi dari PC" — bukan berpura-pura proses sudah lengkap.

B.4 Alur Layar Utama (Screen Flow)

### B.4.1 Onboarding Ranting Baru

```

[Super Admin: Registrasi Unit]

→ [Kirim invite WA/email] → [Admin Ranting: Aktivasi via magic link]

→ [Lengkapi Profil Unit] → [Onboarding Tour: Surat/Kas/Agenda]

→ [Dashboard Ranting]

```

### B.4.2 E-Office — Terbit Surat Sendiri

```

[Wasek: Buat Draft Surat] → [Pilih Surat Sendiri]

→ [Pilih Surat Khusus (isi LetterTypeFieldsForm)

atau Surat Umum (isi LetterRichEditor)]

→ [Pilih Tujuan: Internal (pilih unit) / Eksternal (isi nama)]

→ [LetterheadPreviewPane: preview kop otomatis dari organization_profiles]

→ [Submit → status in_validation]

→ [Wasek lain: buka ApprovalStepTracker → Validasi/Tolak]

(tolak → kembali ke draft dgn catatan)

→ [Sekretaris: SignatureLookupButton → TTD]

(belum punya TTD → diarahkan upload dulu)

→ [Ketua: SignatureLookupButton → TTD]

→ [Sistem otomatis: Stempel + Nomor Surat + Tanggal Hijriyah/Masehi

+ QR Validasi + PDF final] → [status: finish]

→ (jika tujuan internal) [Auto masuk sebagai Surat Masuk di unit tujuan]

→ (jika tujuan eksternal) [Unduh PDF final]

```

### B.4.3 E-Office — Terbit Surat Bersama

```

[Wasek Organisasi A: Buat Draft] → [Pilih Surat Bersama]

→ [Tambah Unit Mitra (Organisasi B)]

→ [Isi konten (khusus/umum) + tujuan] → [Submit]

→ [ApprovalStepTracker: 2 jalur paralel]

[Sekretaris Org A: Validasi] [Sekretaris Org B: Validasi]

(keduanya harus approved untuk lanjut)

→ [Ketua Org A: TTD] [Ketua Org B: TTD]

(keduanya harus approved untuk lanjut)

→ [Sistem otomatis: Stempel kedua organisasi + Nomor Surat

(mengikuti rangkaian Org A) + QR Validasi + PDF final]

→ [status: finish]

→ [Surat tercatat di kedua organisasi]

```

### B.4.4 Verifikasi Keaslian Surat (Publik)

```

[Pihak eksternal scan QR / buka link validasi]

→ [Halaman publik tanpa login]

→ [QrValidationCard menampilkan: nomor surat, unit penerbit,

tanggal terbit, status "Resmi/Terverifikasi"]

→ (isi lengkap surat TIDAK ditampilkan, demi kerahasiaan)

```

### B.4.5 Presensi Hibrida

```

[Buka Agenda] → [Tombol "Presensi Sekarang"]

→ cek GPS dalam radius?

Ya → [Presensi tercatat, timestamp server]

Tidak → [Tawarkan opsi: Scan QR / Catat manual oleh panitia]

→ (jika offline) [Simpan lokal + OfflineIndicator]

→ sync otomatis saat online → [Notifikasi hasil sync]

```

### B.4.6 Input Kas (dengan offline)

```

[Buka Buku Kas] → [Tambah Entri: nominal, keterangan, foto nota]

→ (online) [Submit → saldo update real-time]

→ (offline) [Simpan lokal, badge "Menunggu Sync"]

→ online kembali → [Sync] → jika bentrok →

[Layar konfirmasi Bendahara: pilih/gabung entri]

```

### B.4.7 Pendaftaran & Evaluasi Kaderisasi

```

[Form Publik /webform/{uuid}] (isi gender, pilih kategori pendaftar)

→ [Cek kuota via WebformQuotaBar] → [Konfirmasi via WA]

→ ... pelaksanaan: check-in, presensi per materi, nilai per komponen ...

→ [Panitia sahkan nilai akhir] → job async:

[Hitung nilai_akhir + naikkan membership_status]

+ [LencanaKader baru terbuka — animasi singkat + toast selamat]

+ [Generate draft Surat Keterangan via E-Office]

+ [Kirim WA berisi info kelulusan]

```

### B.4.8 Akreditasi & Pleno

```

[Admin Ranting: Isi Borang Akreditasi]

→ auto-tarik data Surat/Kas/Agenda (read-only)

→ [Submit ke PAC]

→ [Asesor PAC: Webform TL/KL/L + Split Preview Dokumen]

→ [Simpan nilai sementara]

→ [Rapat Pleno: Ketua PAC sahkan skor final]

→ [Grade otomatis dari Grading Scale] → [Sertifikat Akreditasi terbit]

```

B.5 Wireframe & Mockup

Sesuai PRD §15, wireframe/mockup visual detail (Figma) disusun sebagai lampiran terpisah per modul sebelum development tiap modul dimulai — dokumen ini memberi kerangka alur & komponen sebagai briefing awal untuk desainer, bukan pengganti mockup high-fidelity.

B.6 Notifikasi WhatsApp — Prinsip Template

Bahasa konsisten, ramah, singkat; selalu sebut nama unit & konteks aksi.

Kategori: E-Ticket, disposisi surat, pengingat MoU (H-30), kelulusan kaderisasi, OTP/reset password (tidak bisa di-opt-out).

Sertakan opsi opt-out untuk notifikasi non-krusial di pengaturan akun.

---

Catatan

Dokumen ini adalah draft desain awal untuk memandu sprint planning dan briefing tim desain/dev. Skema tabel & endpoint di atas perlu direview ulang saat masuk tahap pembuatan migration & OpenAPI spec aktual (detail kolom, tipe data presisi, dan validasi bisa berubah).

Download .md

License MIT
Uploaded 2 weeks ago
Version v1
File size 22.5 KB
Downloads 14
Copies 2

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/dimasmeilano/design-document and implement it in my code

Don't have the MCP? Install it here