Process Flows

Quick Reference

• Số luồng chính: 5
• Định dạng: Mermaid Flowchart + Sequence Diagram
• Source: Trace từ services, components, interceptors

1. AI Chat Flow

Mô tả chi tiết:

1. User mở /chat — hệ thống kiểm tra AiConfigService.hasActiveConnector (ai-config.service.ts:20)
2. Nếu chưa có connector → hiện AiConfigWizardComponent để setup
3. User nhập câu hỏi → ChatService.sendMessage() gọi ApiService.chatWithAI() (api.service.ts:30)
4. Request body: { question, insight_code?, granularity?, filters? }
5. Response chứa: mode, explanation, data[], chart_hint?, alerts[]
6. ArtifactRendererComponent dispatch render theo artifact type: chart → ChartRendererComponent, table → DataTableComponent
7. User có thể rate message hoặc "Pin to Dashboard" để tạo widget

---

2. Insight Execution Flow

Mô tả chi tiết:

1. InsightCatalogComponent gọi ApiService.listInsights() → hiện grid (insight-catalog.component.ts)
2. 12 insights được tổ chức theo series: O (Omisell), B (Boxme), X (Cross) (mock-insights.ts:1-194)
3. Search dùng ApiService.searchInsights(query) → trả SearchResult[] với score
4. Click insight → navigate tới InsightDetailComponent (insight-detail.component.ts)
5. Detail page hiện: mô tả, when_to_use, outcome, filter form (granularity, date, country)
6. Execute gọi POST /api/v1/insights/{code}/execute với ExecuteRequest
7. Kết quả render bằng ChartRendererComponent hoặc DataTableComponent

---

3. Dashboard Lifecycle

Mô tả chi tiết:

1. DashboardListComponent hiện tất cả dashboards user có quyền xem (dashboard.service.ts)
2. Permission check via PermissionService: Owner/Admin tạo mới, Member chỉ xem shared (permission.service.ts:10-42)
3. Widget types: chart, table, kpi — sizes: small, medium, large, full
4. Data source: live_insight (gọi API mỗi lần refresh) hoặc snapshot (dữ liệu tĩnh)
5. Global filter presets cho phép switch nhanh giữa các bộ filter (daily/weekly/monthly)
6. Share: thêm emails vào shared_with_emails[], set is_shared = true
7. Schedule: tạo DashboardSubscription với schedule (daily/weekly/monthly) + channels

---

4. Subscription & Notification Flow

Mô tả chi tiết:

1. Setup Channel: User tạo notification channel (Telegram/Email/Lark) trong Settings (channel-config-dialog.component.ts)
   • Telegram: cần bot_token + chat_id
   • Email: tự động theo account
   • Lark: cần webhook_url
2. Verify: Gọi POST /channels/:id/test → backend kiểm tra kết nối
3. Subscribe: Tạo InsightSubscription với insight_code, channel_id, schedule, granularity
4. Delivery: Backend cron chạy theo schedule → execute insight → gửi kết quả → ghi log
5. Monitor: User xem DeliveryLog trong Settings → filter theo status

---

5. Authentication Flow

Mô tả chi tiết:

1. AuthGuard (auth.guard.ts:1-32) kiểm tra authentication trước khi cho truy cập route
2. AuthService.initializeSession() (auth.service.ts:50-100) thử 4 nguồn token theo thứ tự:
   • URL query param ?token=xxx (cho iframe embedding)
   • localStorage key boxme_insight_token
   • Cookie omi_token (parent shell sets)
   • Demo mode fallback
3. Token được decode client-side (base64) → extract UserInfo (id, email, name, role, tenant_id)
4. Signals được set: token, user, isAuthenticated, sellerType, country, role
5. AuthInterceptor (auth.interceptor.ts:1-25) append header Authorization: Omi <token> cho mọi request tới apiBaseUrl

---

6. Interceptor Pipeline

Mô tả: Pipeline interceptor chạy theo thứ tự đăng ký trong app.config.ts:

1. demoInterceptor — nếu demoMode=true, trả mock data ngay (không gọi backend)
2. authInterceptor — gắn JWT token vào header
3. errorInterceptor — xử lý lỗi global (401 → logout, 403 → log, 500 → log)

Source: (src/app/app.config.ts), (src/app/core/interceptors/)

Liên kết

• User Personas — Ai sử dụng các luồng này
• JTBD — Tại sao họ cần các luồng này
• Architecture — Kiến trúc kỹ thuật chi tiết
• API Reference — Chi tiết API endpoints