Routing & App Shell
Spesifikasi routing Next.js App Router, layout authenticated shell, dan role-guarded routes.
Status: Stablev1.0.0Source Verified: Yes
Source:
src/app/app/layout.tsx, src/config/navigation.ts, src/components/layout/AppShell.tsxTests: tests/unit/navigationPolicy.test.ts, tests/unit/navigation.test.tsRouting & App Shell Layout#
Struktur navigasi dan layout antarmuka OrthoBreath dirancang adaptif berdasarkan peran pengguna aktif (Role-Based Navigation).
1. Struktur Rute Portal#
| Rute Path | Akses Peran | Deskripsi Halaman |
|---|---|---|
/ | Publik | Landing page resmi, kalkulator risiko, dan edukasi |
/edukasi | Publik | Pusat edukasi interaktif anatomi oklusi & respirasi |
/login | Publik | Form masuk pengguna staf dan orang tua |
/app | Semua Peran | Ruang kerja (dashboard) dinamis per peran |
/app/pasien | Admin, Dokter, Operator, Wali | Manajemen daftar dan detail profil pasien |
/app/pemeriksaan | Dokter, Operator | Wizard pelaksanaan sesi pemeriksaan klinis |
/app/riwayat | Dokter, Operator | Antrean tinjauan sesi dan riwayat pemeriksaan |
/app/laporan/[id] | Semua Peran | Penampil rekam medis resmi dan unduhan PDF |
/app/admin/* | Administrator | Pengelolaan staf, IoT devices, dan kesehatan sistem |
/app/bantuan | Semua Peran | Pusat panduan operasional terpadu 4 peran |
2. Desain Layout AppShell#
AppShell (src/components/layout/AppShell.tsx) membungkus seluruh rute /app/* dengan fitur:
- TopBar: Menampilkan logo klinik, breadcrumb navigasi, indikator koneksi real-time, dan menu profil pengguna.
- Sidebar: Bilah navigasi vertikal desktop dengan ikon Lucide dan penanda halaman aktif.
- Bottom Navigation: Bilah menu mobile/tablet responsif untuk akses cepat satu jemari.
3. Penyesuaian Navigasi Berdasarkan Peran#
Menu navigasi disaring secara otomatis melalui getNavigationForRole(role):
- Wali (5 Menu): Ruang Kerja · Anak / Pasien · Laporan · Notifikasi · Bantuan
- Dokter (6 Menu): Ruang Kerja · Anak / Pasien · Tinjauan · Laporan · Notifikasi · Bantuan
- Operator (7 Menu): Ruang Kerja · Anak / Pasien · Pemeriksaan · Tinjauan · Perangkat · Notifikasi · Bantuan
- Admin (7 Menu): Ruang Kerja · Anak / Pasien · Pengguna · Perangkat · Kesehatan Sistem · Notifikasi · Bantuan