Skip to content

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

KomponenTeknologi
FrameworkVue 3 (Composition API) + TypeScript
Build ToolVite 6
State ManagementPinia (dengan pinia-plugin-persistedstate)
RoutingVue Router 4, di-mount per modul
UI Componentshadcn-vue (style "New York") + Tailwind CSS + Lucide icon
Form & Validasivee-validate + zod
Data FetchingTanstack Vue Query, axios
Rich Text / EditorTiptap, md-editor-v3, markdown-it
VisualisasiD3, 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

  1. User login lewat halaman Auth — token diterbitkan oleh User Service, disimpan terenkripsi di browser (encrypt-storage), dan dipasang otomatis sebagai header Authorization di setiap request axios.
  2. Setiap route/menu ditampilkan atau disembunyikan berdasarkan map_policies milik user (dari RBAC User Service) — komponen UI memanggil usePermission() untuk mengecek izin per endpoint+method sebelum menampilkan aksi (create/read/update/delete).
  3. Fitur aplikasi terbagi jadi ~26 modul independen (workspace, chat, document, audio, rdbms, api, dst.) yang masing-masing memiliki router, store, dan komponennya sendiri.
  4. Saat token access kedaluwarsa, axios interceptor otomatis memanggil /auth/refresh-token ke 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.