Ikhtisar Frontend
Pendahuluan
Dokumen ini memberikan ikhtisar komprehensif tentang layanan frontend Ravenxcope. Frontend adalah aplikasi satu halaman (SPA) React yang dibangun untuk platform pusat pertahanan RavenXcope. Layanan ini menyediakan autentikasi, pendaftaran organisasi, manajemen sensor, manajemen pengguna dan peran, pemantauan dasbor, dan analitik keamanan.
Aplikasi ini dibangun sebagai aplikasi web statis bertenaga Vite dan dilayani melalui Nginx dalam produksi. Konfigurasi runtime disuntikkan ke dalam window.__APP_CONFIG__, memungkinkan artefak yang sama untuk menunjuk ke lingkungan backend yang berbeda.
Tumpukan Teknologi
| Kategori | Teknologi | Versi | Tujuan |
|---|---|---|---|
| UI Runtime | React | 19.2.0 | Model komponen dan rendering |
| Bahasa | TypeScript | 5.9.x | Kode aplikasi yang aman secara tipe (type-safe) |
| Alat Build | Vite | 7.2.x | Dev server dan pembundelan produksi |
| Perutean | react-router-dom | 7.11.x | Rute sisi klien dan tata letak bertingkat |
| Klien HTTP | Axios | 1.13.x | Panggilan REST API dan pencegat (interceptor) |
| Penyimpanan Auth | js-cookie | 3.0.x | Persistensi token dan sesi |
| I18n | react-i18next | 16.x | Dukungan multibahasa |
| Basis UI | Radix UI | 2.x | Komponen primitif yang aksesibel |
| Sistem UI | Tailwind CSS | 4.x | Gaya utility-first |
| Bagan | Recharts | 3.6.x | Visualisasi data |
| Ekspor PDF | jsPDF | 4.x | Pembuatan laporan analitik |
Tanggung Jawab Aplikasi
Layanan frontend bertanggung jawab untuk:
- Autentikasi: Mengelola login/logout pengguna dan persistensi sesi.
- Kontrol Akses: Melindungi rute dasbor privat dan menegakkan izin tingkat UI.
- Orkestrasi Shell: Menyediakan tata letak responsif dengan bilah sisi, laci seluler, dan menu pengguna.
- Integrasi Data: Memanggil API backend melalui klien terpusat dengan pencegat.
- Manajemen: Menangani organisasi, sensor, pengguna, dan peran.
- Pemantauan: Memvisualisasikan kesehatan sensor, heartbeat, dan metrik.
- Analitik: Menampilkan peringatan keamanan, tren, dan mengekspor laporan PDF.
- Obrolan AI: Mengintegrasikan dengan obrolan AI analitik jika diaktifkan.
Permukaan Rute Saat Ini
| Rute | Akses | Tujuan |
|---|---|---|
/ | Publik | Titik masuk login |
/register | Publik | Pendaftaran organisasi |
/user-form | Publik | Pendaftaran pengguna admin |
/dashboard | Privat | Dasbor ikhtisar kesehatan |
/dashboard/all-sensor | Privat | Manajemen sensor |
/dashboard/sensor/:id | Privat | Detail sensor dan sensor virtual |
/dashboard/organization | Privat | Profil organisasi |
/dashboard/profile | Privat | Pengaturan profil pengguna |
/dashboard/user | Privat | Manajemen pengguna |
/dashboard/role | Privat | Manajemen peran dan izin |
/dashboard/analytics | Privat | Dasbor keamanan dan obrolan AI |
Konfigurasi Runtime
Konfigurasi runtime dimuat dari src/config/appConfig.ts dengan prioritas sebagai berikut:
- Global yang Disuntikkan:
window.__APP_CONFIG__(suntikan produksi). - Lingkungan Lokal: Variabel lingkungan Vite (
import.meta.env). - Cadangan (Fallback): Nilai default yang dikodekan secara keras di lapisan API.
Kunci Konfigurasi Inti:
VITE_API_BASE_URL: Asal (origin) backend.VITE_ANALYTICS_AI_CHAT_ENABLED: Bendera fitur obrolan.