Doc 08 — Flutter Handoff Map

Purpose: Mapping table dari Figma screen → Flutter route → widget class. Setiap screen di Figma design system punya satu baris di tabel ini. Flutter developer pakai ini sebagai lookup utama saat build setiap layar.

Source of truth: Figma file ewO52a416uhcdn3Vgm6tbv (key). Prototype punya 315 reactions yang sudah wired (lihat Doc 09 untuk detail routing).

Convention:

• Primary screens punya BottomNav dan ada di ShellRoute per persona.
• Secondary screens (detail, form, flow) menggunakan push route (tanpa shell).
• Route parameter pakai :id, :invoiceId, dll.
• Widget class naming: <ScreenName>Page untuk full-screen, <WidgetName> untuk shared.

Master index

Persona	Jumlah screen	Primary tabs	Route prefix
Shared (auth, states)	8	—	/
Parent (Orang Tua)	30	6	/parent/*
Guru (Teacher)	10	5	/guru/*
Wali Kelas	16	5	/wali-kelas/*
Bendahara	17	5	/bendahara/*
Kepala Sekolah	8	4	/kepsek/*
Admin Lembaga	12	5	/admin/*
TOTAL ACTIVE	101	—	—

Total 106 screens di Figma, 11 adalah Archive / flow diagram / onboarding extras yang tidak perlu di-Flutter-kan.

---

Section 1 — Shared (auth, entry points, error states)

Figma ID	Screen	Route	Widget class	Navigator	Notes
38:2	Parent Splash	/splash	SplashPage	root	Auto-navigate ke /onboarding/1 setelah 1.5s dengan Timer. Show logo + tagline.
38:15	Onboarding Welcome	/onboarding/1	OnboardingWelcomePage	root	Skip button → /login
38:27	Onboarding Fitur	/onboarding/2	OnboardingFiturPage	root	Animated carousel optional
38:53	Onboarding Mulai	/onboarding/3	OnboardingMulaiPage	root	"Mulai" button → /login
9:2	Login	/login	LoginPage	root	Form field username + password, backend call → store JWT in secure storage, redirect based on user.role. Semua error handling wajib.
38:64	Forgot Password	/forgot-password	ForgotPasswordPage	root	Email input → POST /api/auth/forgot-password
102:17	Login Staff (Shared)	/login/staff	LoginStaffPage	root	NOTE: Node 102:17 currently missing in Figma (detected during prototype audit). Rebuild with same shape as 9:2 tapi role picker: Guru/WK/Bendahara/Kepsek/Admin.
102:54	Forgot Password (Shared Staff)	/forgot-password/staff	ForgotPasswordStaffPage	root	Same shape as 38:64
104:3	404 Not Found	/404	NotFoundPage	root	Fallback route untuk go_router errorBuilder
104:26	No Internet	—	NoInternetPage	overlay	Bukan route — widget yang tampil saat connectivity check gagal. Pakai connectivity_plus stream.
104:50	Search Pattern	—	SearchPage<T>	generic	Template untuk search di setiap persona
315:152	Edit Profil (Shared)	/profile/edit	EditProfilePage	authenticated root	Works for all roles
315:176	Ganti Password (Shared)	/profile/change-password	ChangePasswordPage	authenticated root	Works for all roles

---

Section 2 — Parent (Orang Tua)

2A — Primary (ShellRoute dengan 6-tab BottomNav)

Figma ID	Screen	Route	Widget class	BottomNav index
25:2	Dashboard (Polished)	/parent/dashboard	ParentDashboardPage	0
22:2	Tagihan (Polished)	/parent/billing	ParentBillingListPage	1
23:2	Tabungan (Polished)	/parent/savings	ParentSavingsPage	2
23:102	Nilai (Polished)	/parent/grades	ParentGradesPage	3
24:2	Absensi (Polished)	/parent/attendance	ParentAttendancePage	4
24:136	Profil (Polished)	/parent/profile	ParentProfilePage	5

2B — Secondary (push routes, no shell)

Figma ID	Screen	Route	Widget class	Parent route
22:94	Detail Invoice	/parent/billing/:invoiceId	BillingDetailPage	/parent/billing
26:2	Payment — Transfer Bank	/parent/billing/:invoiceId/pay/transfer	PaymentTransferPage	/parent/billing/:invoiceId
26:55	Payment — Virtual Account	/parent/billing/:invoiceId/pay/va	PaymentVirtualAccountPage	/parent/billing/:invoiceId
26:100	Payment — QRIS	/parent/billing/:invoiceId/pay/qris	PaymentQrisPage	/parent/billing/:invoiceId
26:128	Payment — Sukses	/parent/billing/:invoiceId/pay/success	PaymentSuccessPage	end of payment flow, back → /parent/dashboard
28:2	Tabungan — Setor	/parent/savings/deposit	SavingsDepositPage	/parent/savings
28:33	Tabungan — Atur Uang Saku	/parent/savings/allowance	SavingsAllowancePage	/parent/savings
28:73	Edit Profil (Parent-specific)	/parent/profile/edit	ParentEditProfilePage	/parent/profile — OR use shared EditProfilePage
28:108	Ganti Password (Parent)	/parent/profile/change-password	— use shared	—
28:141	Pengaturan Notifikasi	/parent/profile/notifications	NotificationSettingsPage	/parent/profile
32:2	Hafalan Progress	/parent/hafalan	HafalanProgressPage	/parent/dashboard (dari Quick Action)
32:99	Pengumuman	/parent/announcements	AnnouncementListPage	/parent/dashboard
32:188	Perizinan	/parent/permissions	PermissionListPage	/parent/dashboard
181:2	Perizinan Detail	/parent/permissions/:id	PermissionDetailPage	/parent/permissions
34:2	Rapor Digital	/parent/report-card	ReportCardPage	/parent/grades or Quick Action
34:55	Jadwal Pelajaran	/parent/schedule	ParentSchedulePage	Quick Action
34:133	Chat Wali Kelas	/parent/chat	ChatWaliKelasPage	FAB on dashboard
185:2	Subject Detail	/parent/grades/:subjectId	SubjectDetailPage	/parent/grades
187:9	Setoran Detail	/parent/hafalan/:setoranId	SetoranDetailPage	/parent/hafalan
188:20	Sesi Detail	/parent/schedule/:sessionId	ScheduleSessionDetailPage	/parent/schedule
189:31	Pengumuman Detail	/parent/announcements/:id	AnnouncementDetailPage	/parent/announcements
190:17	Wali Kelas Profile	/parent/wali-kelas/:id	WaliKelasProfilePage	/parent/chat header
39:113	Multi-Child Switcher	—	ChildSwitcherBottomSheet	overlay modal on dashboard
39:164	Notifikasi Center	/parent/notifications	NotificationsPage	header bell icon

2C — Empty / error states (tidak perlu route tersendiri)

Figma ID	Screen	Flutter handling
39:2	State — Tagihan Kosong	BillingListPage render EmptyState(icon, title, subtitle) widget ketika invoices.isEmpty
39:32	State — Nilai Kosong	Same pattern di GradesPage
39:62	State — Offline	Ditangani global via ConnectivityListener widget
39:99	State — Server Error	ErrorBoundary widget, retry button

2D — Deprecated / Archive (SKIP di Flutter)

• 38:2 Splash Screen 2 (47:2) — duplikat, pakai 38:2 saja
• 30:2 Parent Dashboard v1 — archived pre-polish
• 30:118 Parent Tagihan (Dark Mode) — hanya showcase, Dark mode di-handle otomatis via ThemeMode.system

---

Section 3 — Guru (Teacher)

3A — Primary (ShellRoute, 5-tab BottomNav)

Figma ID	Screen	Route	Widget class	BottomNav index
288:2	Dashboard	/guru/dashboard	GuruDashboardPage	0
289:2	Kehadiran (QR Scanner)	/guru/attendance	GuruAttendanceScannerPage	1
289:49	Input Nilai — Kelas	/guru/grades	GuruGradeInputClassListPage	2
293:2	Jadwal	/guru/schedule	GuruSchedulePage	3
289:124	Profil	/guru/profile	GuruProfilePage	4

3B — Secondary

Figma ID	Screen	Route	Widget class
293:75	Student Detail	/guru/students/:studentId	StudentDetailPage
293:136	Kirim Pengumuman	/guru/announcements/new	SendAnnouncementPage
63:94	Input Nilai — Bulk Entry	/guru/grades/:classId/bulk	BulkGradeInputPage
64:238	Input Hafalan	/guru/hafalan/input	HafalanInputPage
116:2	Absensi Manual	/guru/attendance/manual/:classId	AttendanceManualPage
64:101	Daftar Siswa Kelas	/guru/classes/:classId/students	ClassStudentListPage
121:2	Kelas Saya	/guru/classes	GuruClassListPage
121:94	Riwayat Mengajar	/guru/history	GuruTeachingHistoryPage
387:2	Presensi Hari Ini (staff self-attendance)	/guru/presensi	GuruPresensiHariIniPage
388:2	Riwayat Presensi (staff monthly history)	/guru/presensi/history	GuruRiwayatPresensiPage
389:2	Pengajuan Izin (staff leave request)	/guru/presensi/izin	GuruPengajuanIzinPage

3D — Staff Self-Attendance Widget

Guru Profil (289:124) has a restored KehadiranHariIni widget (node 392:2) showing:

• Today's clock-in time, clock-out time
• On Time / Terlambat / Belum Clock In status badge
• "Clock Out →" shortcut button
• Monthly summary row (Hadir / Terlambat / Izin counts)

Tapping the widget navigates to /guru/presensi (GuruPresensiHariIniPage).

3C — Legacy (old Sprint 1 versions — SKIP)

• 59:2, 59:114, 63:2, 63:285 — pre-rebuild, use 288 series only
• 64:3 (Wali Kelas Dashboard from Guru page) — belongs to Wali Kelas persona

---

Section 4 — Wali Kelas (Homeroom Teacher)

4A — Primary (ShellRoute, 5-tab BottomNav)

Figma ID	Screen	Route	Widget class	Tab
291:2	Dashboard	/wali-kelas/dashboard	WaliKelasDashboardPage	0
292:2	Kelas — Daftar Santri	/wali-kelas/students	ClassStudentListPage	1
292:105	Nilai — Kelas Overview	/wali-kelas/grades	WaliKelasGradesOverviewPage	2
292:191	Absensi — Overview	/wali-kelas/attendance	WaliKelasAttendanceOverviewPage	3
70:318	Profil (Original designer version)	/wali-kelas/profile	WaliKelasProfilePage	4

4B — Secondary

Figma ID	Screen	Route	Widget class
295:2	Detail Santri	/wali-kelas/students/:studentId	WaliKelasStudentDetailPage
295:56	Perizinan Approval	/wali-kelas/permissions/:id/review	PermissionApprovalPage
295:136	Pengumuman Composer	/wali-kelas/announcements/new	AnnouncementComposerPage
315:93	Rapor Generate	/wali-kelas/report-cards/generate	ReportCardGeneratorPage
316:2	Preview Rapor	/wali-kelas/report-cards/:id/preview	ReportCardPreviewPage
320:2	Rekap Kehadiran	/wali-kelas/attendance/recap	AttendanceRecapPage
320:92	Rekap Nilai	/wali-kelas/grades/recap	GradesRecapPage
320:170	Rapor Management	/wali-kelas/report-cards	ReportCardManagementPage
391:2	Presensi Hari Ini (staff self-attendance)	/wali-kelas/presensi	WaliKelasPresensiHariIniPage
391:53	Riwayat Presensi (staff monthly history)	/wali-kelas/presensi/history	WaliKelasRiwayatPresensiPage
391:104	Pengajuan Izin (staff leave request)	/wali-kelas/presensi/izin	WaliKelasPengajuanIzinPage

Wali Kelas Profil (70:318) already contains a visible "Kehadiran Hari Ini" section (preserved from designer's original). Its card container is wired to /wali-kelas/presensi, and the "Rekap Kehadiran" link is wired to /wali-kelas/presensi/history.

---

Section 5 — Bendahara (Treasurer)

5A — Primary (ShellRoute, 5-tab BottomNav)

Figma ID	Screen	Route	Widget class	Tab
300:2	Dashboard	/bendahara/dashboard	BendaharaDashboardPage	0
300:95	Bayar (terima pembayaran)	/bendahara/payments	BendaharaPaymentsPage	1
301:2	Jurnal	/bendahara/journal	BendaharaJournalPage	2
301:80	Laporan	/bendahara/reports	BendaharaReportsPage	3
77:214	Profil (Original designer version)	/bendahara/profile	BendaharaProfilePage	4

5B — Secondary

Figma ID	Screen	Route	Widget class
77:3	Laporan SPP	/bendahara/reports/spp	SppReportPage
77:109	Tunggakan Aging	/bendahara/reports/aging	AgingReportPage
315:2	Kas Saya	/bendahara/cash	CashLedgerPage
315:37	Riwayat Pembayaran	/bendahara/payments/history	PaymentHistoryPage
75:2	Terima Pembayaran	/bendahara/payments/receive	ReceivePaymentPage
75:73	Daftar Tagihan	/bendahara/invoices	InvoiceListPage
75:176	Input Jurnal	/bendahara/journal/new	JournalEntryPage
337:2	Verifikasi Pembayaran	/bendahara/payments/verify	PaymentVerificationPage
337:82	Setor ke Bank	/bendahara/cash/deposit-bank	BankDepositPage
337:110	Buat Tagihan Massal	/bendahara/invoices/bulk-create	BulkInvoiceCreatePage
337:146	Keringanan Biaya	/bendahara/discounts	FeeDiscountPage
337:204	Pembayaran Pending	/bendahara/payments/pending	PendingPaymentsPage

---

Section 6 — Kepala Sekolah (Principal)

6A — Primary (ShellRoute, 4-tab BottomNav)

Figma ID	Screen	Route	Widget class	Tab
306:2	Executive Dashboard	/kepsek/dashboard	KepsekDashboardPage	0
306:70	Laporan Analytics	/kepsek/reports	KepsekReportsPage	1
306:150	Keuangan Overview	/kepsek/finance	KepsekFinancePage	2
339:52	Manajemen Guru	/kepsek/teachers	TeacherManagementPage	3 (label "Guru")
306:215	Profil	/kepsek/profile	KepsekProfilePage	4

NOTE: Bottom nav is actually 5-tab (Beranda / Laporan / Keuangan / Guru / Profil), bukan 4-tab yang di earlier docs disebut. Verified lewat prototype audit.

6B — Secondary

Figma ID	Screen	Route	Widget class
339:2	Yayasan Dashboard	/kepsek/yayasan	YayasanDashboardPage
339:116	Unit Pendidikan	/kepsek/yayasan/units	EducationUnitListPage
339:170	Audit Trail	/kepsek/audit	AuditTrailPage

---

Section 7 — Admin Lembaga

7A — Primary (ShellRoute, 5-tab BottomNav)

Figma ID	Screen	Route	Widget class	Tab
86:3	Dashboard	/admin/dashboard	AdminDashboardPage	0
336:98	Akademik	/admin/academic	AdminAcademicPage	1 (label "Akademik")
86:327	Keuangan Overview	/admin/finance	AdminFinancePage	2 (label "Keuangan")
86:232	Manajemen Guru	/admin/hr	AdminHRPage	3 (label "SDM")
336:371	Profil Menu	/admin/menu	AdminMenuPage	4 (label "Menu")

NOTE: Tab labels adalah Beranda / Akademik / Keuangan / SDM / Menu (bukan Siswa/Guru/dll.). Verified saat prototype wiring di session ini.

7B — Secondary

Figma ID	Screen	Route	Widget class
86:116	Manajemen Siswa	/admin/students	StudentManagementPage
336:187	Manajemen Kelas	/admin/classes	ClassManagementPage
336:271	Settings	/admin/settings	AdminSettingsPage
340:2	Detail Mata Pelajaran	/admin/subjects/:id	SubjectDetailPage
340:48	Jadwal Mengajar	/admin/teaching-schedule	TeachingScheduleManagementPage
340:105	Template Rapor	/admin/report-templates	ReportTemplateListPage
340:166	Kalender Akademik	/admin/academic-calendar	AcademicCalendarPage

---

Cross-references

• Route specification + transitions → Doc 09 (09-route-specification.md)
• Shared widgets (BottomNav, HeroCard, QuickActionCard, etc.) → Doc 10 (10-widget-component-spec.md)
• Color/spacing/typography tokens → flutter-starter/lib/core/theme/
• Naming conventions → Doc 06 (06-naming-convention-guide.md)
• Dark mode behavior → Doc 05 (05-dark-mode-pairing-guide.md)
• Accessibility requirements → Doc 04 (04-accessibility-audit-report.md)

Change log

• v1.0 (hari ini) — Initial extraction dari Figma prototype post-Sprint 4 + post-prototype-wiring. Covers 95 active screens across 6 personas + 8 shared.