Frontend
Frontend adalah dashboard web RAGA — aplikasi Vue 3 + TypeScript yang menjadi antarmuka utama pengguna untuk chat, manajemen workspace, knowledge, dan administrasi (user, role, model, dsb). Repo ini berada di namespace dashboard (tarantula-v2/dashboard/tarantula-frontend), terpisah dari service backend yang berada di namespace service.
Frontend berkomunikasi langsung ke User Service untuk autentikasi, dan ke API Tarantula untuk seluruh operasi workspace, knowledge, dan chat.
Tech Stack
| Komponen | Teknologi |
|---|---|
| Framework | Vue 3 (Composition API) + TypeScript |
| Build Tool | Vite 6 |
| State Management | Pinia (dengan pinia-plugin-persistedstate) |
| Routing | Vue Router 4, di-mount per modul |
| UI Component | shadcn-vue (style "New York") + Tailwind CSS + Lucide icon |
| Form & Validasi | vee-validate + zod |
| Data Fetching | Tanstack Vue Query, axios |
| Rich Text / Editor | Tiptap, md-editor-v3, markdown-it |
| Visualisasi | D3, Unovis, Highcharts, Vue Flow (diagram alur), Superset (embedded BI) |
Detail environment variable, peta modul, dan arsitektur autentikasi lengkap ada di halaman Teknis.
Cara Kerja Singkat
- User login lewat halaman Auth — token diterbitkan oleh User Service, disimpan terenkripsi di browser (
encrypt-storage), dan dipasang otomatis sebagai headerAuthorizationdi setiap request axios. - Setiap route/menu ditampilkan atau disembunyikan berdasarkan
map_policiesmilik user (dari RBAC User Service) — komponen UI memanggilusePermission()untuk mengecek izin per endpoint+method sebelum menampilkan aksi (create/read/update/delete). - Fitur aplikasi terbagi jadi ~26 modul independen (workspace, chat, document, audio, rdbms, api, dst.) yang masing-masing memiliki router, store, dan komponennya sendiri.
- Saat token access kedaluwarsa, axios interceptor otomatis memanggil
/auth/refresh-tokenke User Service sebelum mengulang request yang gagal.
Ringkasan
Frontend adalah satu-satunya antarmuka manusia ke platform RAGA — menggabungkan autentikasi User Service, data dan chat dari API Tarantula, serta BI embed dari Superset ke dalam satu dashboard modular berbasis Vue 3.