Perutean (Routing) dan App Shell

Pendahuluan

Dokumen ini menjelaskan model perutean saat ini, guard rute privat, tata letak dasbor, perilaku sidebar, dan panduan ekstensi rute.

---

Pengaturan Router

Perutean dirender di src/app/App.tsx, sedangkan definisi rute dan metadata navigasi dasbor berada di src/app/routes.tsx.

Pohon aplikasi adalah:

AlertProvider
`-- BrowserRouter
    |-- Routes
    |   |-- /                         LoginPage
    |   |-- /register                 OrganizationRegistrationPage
    |   |-- /user-form                AdminUserRegistrationPage
    |   `-- PrivateRoutes
    |       `-- /dashboard            AppShell
    |           |-- index             SensorDashboardPage
    |           |-- all-sensor        SensorListPage
    |           |-- sensor/:sensorId  SensorDetailPage
    |           |-- organization      OrganizationDetailPage
    |           |-- profile           ProfilePage
    |           |-- user              UserListPage
    |           |-- role              RoleListPage
    |           `-- analytics         AnalyticsDashboardPage
    |-- Toaster
    `-- ConfirmDialog

---

Metadata Rute

src/app/routes.tsx mengekspor:

Ekspor	Tujuan
publicRoutes	Definisi rute publik yang digunakan oleh App.tsx
dashboardRoutes	Definisi rute dasbor, judul rute, metadata navigasi, dan varian tata letak
dashboardNavigationItems	Item sidebar yang diturunkan dari rute dasbor
getDashboardRouteForPath()	Pencarian rute aktif yang digunakan oleh app shell

Rute dasbor dapat memilih layoutVariant: 'workspace'. Rute workspace, saat ini adalah analitik, mendapatkan tinggi penuh dengan overflow terkontrol dan tanpa footer.

---

Rute Publik

Jalur	Komponen	Tujuan
/	LoginPage	Login pengguna
/register	OrganizationRegistrationPage	Pendaftaran organisasi
/user-form	AdminUserRegistrationPage	Pembuatan admin/pengguna setelah pendaftaran organisasi

/register dan /user-form bersifat publik karena merupakan bagian dari proses pendaftaran sebelum sesi ada.

---

Rute Privat

Rute privat dibungkus oleh PrivateRoutes di src/app/PrivateRoutes.tsx.

const PrivateRoutes: React.FC = () => {
  return auth.isAuthenticated() ? <Outlet /> : <Navigate to={ROUTES.LOGIN} replace />;
};

Guard ini hanya memeriksa cookie token akses melalui auth.isAuthenticated(). Guard ini tidak memvalidasi kadaluwarsa token atau izin sebelum merender rute. Panggilan API tetap menangani respons 401 dan mengalihkan kembali ke /.

---

Tata Letak Dasbor (Dashboard Layout)

/dashboard merender AppShell dari src/core/layout/AppShell.tsx, yang memiliki tanggung jawab:

• Sidebar desktop dengan toggle collapse.
• Drawer seluler menggunakan Sheet.
• Penyorotan rute aktif.
• Pencarian judul rute dari dashboardRoutes.
• Dropdown pengguna dengan profil, organisasi, bahasa, dan tindakan logout.
• Aturan bingkai konten standar vs workspace.
• Perenderan rute bersarang melalui Outlet.

Halaman beranda dasbor adalah rute indeks:

/dashboard -> SensorDashboardPage

---

Navigasi Sidebar

Menu sidebar aktif diturunkan dari dashboardNavigationItems di src/app/routes.tsx:

Label	Jalur	Ikon
Dashboard	/dashboard	LayoutDashboard
Sensor	/dashboard/all-sensor	Radio
Security Analytics	/dashboard/analytics	Activity
Role	/dashboard/role	Shield
User	/dashboard/user	Users

Dropdown pengguna mengekspos rute tambahan:

Label	Jalur
Profile	/dashboard/profile
Organization	/dashboard/organization

---

Aturan Tata Letak Halaman

Halaman dasbor tingkat rute harus menggunakan RoutePage dari src/core/page/RoutePage.tsx.

Halaman manajemen dengan alur kerja tabel/daftar harus menggunakan DataTableCard dan partial tabel khusus domain, misalnya:

• modules/sensors/partials/SensorListTable.tsx
• modules/users/partials/UserListTable.tsx
• modules/roles/partials/RoleListTable.tsx

Bagian visual khusus fitur berada di modules/<domain>/partials. Folder sub-domain hanya digunakan untuk alur yang lebih besar dengan state dan permukaan UI-nya sendiri, seperti modules/analytics/chat.

---

Menambahkan Rute Dasbor Baru

Untuk menambahkan rute dasbor privat baru:

1. Buat komponen tingkat rute di bawah src/modules/<domain>/pages.
2. Tambahkan bagian domain yang dapat digunakan kembali di bawah src/modules/<domain>/partials jika diperlukan.
3. Tambahkan alur modal di bawah src/modules/<domain>/dialogs jika diperlukan.
4. Impor halaman di src/app/routes.tsx.
5. Tambahkan entri dashboardRoutes dengan titleKey, fullPath, dan metadata sidebar opsional.
6. Tambahkan konstanta jalur yang dapat digunakan kembali di src/lib/constants.ts.
7. Tambahkan kunci terjemahan jika label menu harus dilokalisasi.
8. Perbarui dokumentasi ini jika rute tersebut menjadi bagian dari permukaan produk yang stabil.