Teknis — Frontend

Dashboard web RAGA yang dibangun di atas Vue 3 + TypeScript + Vite. Menjadi antarmuka utama untuk chat, manajemen workspace/knowledge, dan administrasi platform (user, role, model, dsb).

Repository

Key	Value
Git Remote	`https://git.tlab.co.id/tarantula/tarantula-v2/dashboard/tarantula-frontend.git`
Branch Aktif	`main`

bash

git clone https://git.tlab.co.id/tarantula/tarantula-v2/dashboard/tarantula-frontend.git
cd tarantula-frontend

Catatan: repo ini berada di namespace dashboard, berbeda dari service backend lain yang berada di namespace service.

Tech Stack

Layer	Teknologi
Framework	Vue 3.5 (Composition API, `<script setup>`) + TypeScript
Build Tool	Vite 6
State Management	Pinia 3 + `pinia-plugin-persistedstate`
Routing	Vue Router 4
UI Component	shadcn-vue (style "New York") + Tailwind CSS 3 + Lucide icon
Form & Validasi	vee-validate + zod
Data Fetching	Tanstack Vue Query, Tanstack Vue Table, axios
Rich Text Editor	Tiptap (dengan extension table, image, link, text-align), md-editor-v3, markdown-it, marked + KaTeX (rendering formula)
Visualisasi & Diagram	D3 + d3-cloud (wordcloud), Unovis, Highcharts, Vue Flow (flow diagram), `@superset-ui/embedded-sdk` (embed dashboard BI)
Audio	`@ricky0123/vad-web` (voice activity detection), `recordrtc`, `wave-recorder`
Export Dokumen	`jspdf` + `jspdf-autotable`, `pdfmake`, `docx`, `html2pdf.js`, `html-docx-ts`
Auth & Storage	`jwt-decode`, `encrypt-storage` (localStorage terenkripsi)
Containerization	Docker multi-stage (`node:20.17.0` build → `nginx:stable` serve static)

Struktur Folder

frontend/
├── src/
│   ├── main.ts              # Entry point Vue app
│   ├── App.vue               # Root component
│   ├── router/
│   │   ├── index.ts          # Menggabungkan router semua modul + navigation guard
│   │   └── Revamp.ts          # Router modul revamp — TIDAK di-mount ke index.ts (lihat catatan)
│   ├── api/
│   │   └── axios.ts           # Instance axios + interceptor refresh token
│   ├── stores/                # Store global (ErrorStore, GlobalStore)
│   ├── layouts/                # AuthLayout, DefaultLayout, ChatLayout, SettingsLayout, BlankLayout
│   ├── helpers/
│   │   └── permission.ts      # usePermission() — cek akses berdasarkan RBAC
│   ├── utils/
│   │   └── storage.ts          # encryptStorage wrapper
│   ├── components/             # Komponen UI bersama (termasuk shadcn-vue primitives)
│   ├── modules/                # ~26 modul fitur, masing-masing punya router/store/views/components sendiri
│   └── theme/                 # Tema & styling
├── public/
├── nginx.conf                 # Konfigurasi nginx untuk serve build production
├── Dockerfile.prod
├── Dockerfile.stag
└── vite.config.ts

Environment Variables

Dibaca lewat import.meta.env (Vite). File .env.example:

bash

VITE_API_BASE_URL=
VITE_API_URL_USER=
VITE_API_DEVELOPMENT_MODE=
VITE_API_PORT=
VITE_LOGO_ONLY=
VITE_LOGO_FULL=
VITE_THEME=
VITE_PHOTO_OCR=
VITE_PHOTO_API=
INFISICAL_API_URL=
INFISICAL_CLIENT_ID=
INFISICAL_CLIENT_SECRET=
INFISICAL_ENV=
INFISICAL_PATH=
INFISICAL_PROJECT_ID=

Variable	Keterangan
`VITE_API_BASE_URL`	Hanya dipakai untuk membentuk header `Access-Control-Allow-Origin` di `src/api/axios.ts` — bukan base URL request API Tarantula yang sesungguhnya (lihat `VITE_API_URL_TARANTULA` di bawah)
`VITE_API_URL_USER`	Base URL User Service (dipakai untuk login, refresh token, dll)
`VITE_API_DEVELOPMENT_MODE`	Jika `"true"`, request diarahkan ke path relatif (`/user`, `/tarantula` — lewat proxy dev di `vite.config.ts`) alih-alih ke `VITE_API_URL_USER`/`VITE_API_URL_TARANTULA`
`VITE_API_PORT`	Port tambahan untuk header CORS (opsional)
`VITE_LOGO_ONLY` / `VITE_LOGO_FULL`	URL logo untuk branding
`VITE_THEME`	Tema aktif
`VITE_PHOTO_OCR` / `VITE_PHOTO_API`	Aset gambar untuk halaman terkait OCR/API
`INFISICAL_*`	Kredensial Infisical — dipakai saat build/deploy (CI), bukan runtime browser

Variabel VITE_* di-inject ke bundle saat build (npm run build-prod / build-stag), jadi environment yang dipakai bergantung mode build, bukan bisa diganti setelah aplikasi berjalan di browser.

Catatan: .env.example di atas tidak mencakup seluruh variable yang dipakai di kode. Variable tambahan berikut ditemukan lewat import.meta.env di src/ dan wajib diisi agar fitur terkait berfungsi:

Variable	Keterangan
`VITE_API_URL_TARANTULA`	Base URL API Tarantula yang sesungguhnya dipakai oleh seluruh store modul (mis. `WorkspaceStore`, `ChatStore`, `GlobalStore`) lewat `checkIsDevelopment("/tarantula", ...)`
`VITE_NAME`	Nama aplikasi — dipakai sebagai `document.title` (`main.ts`), judul tab (`vite.config.ts`), dan label di footer/input chat
`VITE_AIRI`	Flag untuk mengaktifkan varian UI chat "Airi" (tampilan avatar interaktif) di modul `chat`
`VITE_AVATAR_GENDER` / `VITE_AVATAR_WITH_LOGO`	Konfigurasi avatar suara pada komponen `TalkAvatar`
`VITE_BACKGROUND_LOGIN`	URL gambar background halaman login (`AuthLayout.vue`)
`VITE_ID_CLIENT`	ID client untuk lookup info lisensi (`GET /utils/license/:id`) dan login SSO (`AuthStore`)
`VITE_MAX_CHAR_CHAT` / `VITE_SIZE_UPLOAD_CHAT`	Batas jumlah karakter dan ukuran file upload pada form input chat
`VITE_SIZE_UPLOAD_AUDIO` / `VITE_SIZE_UPLOAD_DOCUMENT` / `VITE_SIZE_UPLOAD_USER`	Batas ukuran upload per modul (audio, dokumen, foto user)
`VITE_PHOTO_PROFILE`	URL foto profil default (header, halaman profil, detail user)
`VITE_OPENAI_API_KEY` / `VITE_OPENAI_BASE_URL`	Kredensial client OpenAI-compatible untuk fitur speech-to-text (Whisper) di modul `chat`
`VITE_TTS_BASE_URL`	Endpoint text-to-speech yang dipakai fitur `TalkAvatar`

Peta Modul

Aplikasi dipecah menjadi ~26 modul independen di src/modules/, masing-masing memiliki router, store, dan views sendiri, digabung di src/router/index.ts:

Domain	Modul
Autentikasi & Akun	`auth`, `profile`, `log-login`
Workspace & Knowledge	`workspace`, `basic`, `document`, `audio`, `rdbms`, `api`, `data-digital`
Chat & Intelligence	`chat`, `system-prompt`, `model`, `flow-diagrams`
Access & Governance	`acl`, `user`, `feature`, `subfeature`, `shortcut`
Integrasi	`whatsapp`, `superset`
Lainnya	`about`, `general`, `dashboard`, `hipmi`, `revamp`

Modul hipmi adalah antarmuka chat khusus (custom branding/flow terpisah dari chat utama). Modul revamp sebenarnya berisi 8 sub-modul rancangan ulang (api, audio, basic, chat, document, rdbms, system-prompt, workspace) yang masing-masing adalah versi baru dari modul aslinya, digabung lewat router terpisah src/router/Revamp.ts — tapi router ini tidak diimpor oleh src/main.ts (yang hanya memakai src/router/index.ts), jadi seluruh alur revamp belum live di aplikasi produksi.

Autentikasi & Otorisasi

Alur Token

Login memanggil POST {VITE_API_URL_USER}/auth/login di User Service; access_token dan refresh_token disimpan lewat encryptStorage (localStorage terenkripsi).
access_token dipasang otomatis sebagai header Authorization: Bearer <token> di instance axios global (src/api/axios.ts).
Saat request gagal karena token kedaluwarsa, interceptor axios otomatis memanggil POST /auth/refresh-token dengan refresh_token, memperbarui kedua token, lalu mengulang request asli — hanya satu refresh yang berjalan bersamaan (isRefreshing flag) meski banyak request gagal bersamaan.

Otorisasi Berbasis Policy

usePermission() (src/helpers/permission.ts) menyediakan hasPermission(url, method), canRead(), canCreate(), canUpdate(), dll — memeriksa userStore.map_policies (daftar policy RBAC yang didapat dari User Service saat login) untuk menentukan apakah tombol/aksi tertentu ditampilkan.
Ini adalah pola client-side yang mencerminkan model RBAC di User Service (Role → Policy → Feature/Subfeature) — otorisasi sesungguhnya tetap ditegakkan di backend; pengecekan di frontend murni untuk UX (menyembunyikan aksi yang tidak diizinkan).

Integrasi Backend

Service	Env Variable	Keterangan
User Service	`VITE_API_URL_USER`	Login, refresh token, manajemen user/role/policy
API Tarantula	`VITE_API_URL_TARANTULA`	Workspace, knowledge (dokumen/audio/database/API), chat, system prompt
Superset	— (embed via `@superset-ui/embedded-sdk`)	Dashboard BI ter-embed di modul `superset`

Build & Run

bash

# Install dependencies
npm install

# Development
npm run dev

# Build production (mode production)
npm run build-prod

# Build staging (mode staging)
npm run build-stag

# Preview hasil build
npm run preview

Docker (production)

Build multi-stage: dependency install → vue-tsc + vite build --mode production → hasil dist/ disajikan lewat nginx:stable.

bash

docker build -f Dockerfile.prod -t tarantula-frontend .
docker run -p 80:80 tarantula-frontend

API Tarantula

User Service

OPA

OPA Auth

OPA Config

OPA Data

Summarizer

OCR

OCR V3

Minio Uploader

Database Connect

API Connect

Chatbot Service

Frontend

Raga License Env

Documentation Site

Teknis — Frontend

Repository

Tech Stack

Struktur Folder

Environment Variables

Peta Modul

Autentikasi & Otorisasi

Alur Token

Otorisasi Berbasis Policy

Integrasi Backend

Build & Run

Docker (production)

OPA Auth

OPA Config

OPA Data

OCR V3

Teknis — Frontend ​

Repository ​

Tech Stack ​

Struktur Folder ​

Environment Variables ​

Peta Modul ​

Autentikasi & Otorisasi ​

Alur Token ​

Otorisasi Berbasis Policy ​

Integrasi Backend ​

Build & Run ​

Docker (production) ​

Teknis — Frontend

Repository

Tech Stack

Struktur Folder

Environment Variables

Peta Modul

Autentikasi & Otorisasi

Alur Token

Otorisasi Berbasis Policy

Integrasi Backend

Build & Run

Docker (production)