Lõi Hệ thống Boxme Insight

Quick Reference

• Dự án: boxme-insights-frontend
• Loại: Web App (Angular Embedded Module)
• Ngôn ngữ: TypeScript 5.6+
• Framework: Angular 19+ (Standalone, Signals, Tailwind CSS 4)
• Trạng thái: Production / Active
• API Integration: Hơn 28 insights từ insights.omisell.com

Kiến trúc (Architecture)

graph TB
    subgraph Frontend [Boxme Insight - Angular 19]
        UI["🖥️ Chat UI & Dashboards"]
        Services["⚙️ API & State Services (Signals)"]
        Charts["📊 ECharts Renderer"]
    end

    subgraph Backend [Omisell Insights API]
        Gateway["Gateway (https://insights.omisell.com)"]
        AI["🤖 LLM / Postgres DB"]
    end

    UI --> Services
    Services --> Charts
    Services -- "HTTP / JWT auth" --> Gateway
    Gateway --> AI

Cấu trúc Thư mục

src/
└── app/
    ├── core/                # Core singletons (auth, services, interceptors)
    ├── features/            # Lazy-loaded modules (chat, insights, settings)
    ├── layout/              # App shell, sidebar, header
    └── shared/              # Reusable components (data-table, chart-renderer)
spec/
└── specs/                   # Technical specs & scenarios

Phụ thuộc Chính (Dependencies)

Category	Package	Version	Purpose
Core	@angular/core	^21.2.0	Frontend framework
Styling	tailwindcss	^4.2.2	Utility-first CSS
Charts	echarts, ngx-echarts	^6.0.0, ^21.0.0	Rendering charts
UI	@angular/material	^21.2.6	Component thư viện cho UI
Markdown	ngx-markdown	^21.2.0	Parse the response from AI chat
Utils	rxjs	~7.8.0	Observables stream

Route Map

Path	Component/Module	Auth Guard	Mô tả
/	Redirects /chat	Yes	Trang mặc định
/chat	ChatComponent	Yes	Giao diện AI Chatbot
/insights	INSIGHT_ROUTES	Yes	Trình quản lý biểu đồ mẫu
/settings	SETTINGS_ROUTES	Yes	Cài đặt ứng dụng

Luồng Hoạt động Dữ liệu (Data Flow)

Ứng dụng dùng Angular Signals thay vi NgRx. Các component giao diện kết nối API thông qua HttpClient. Response từ backend dưới dạng JSON, gồm: (rows data, chart_hint, filter_config, alerts). chart-renderer và data-table parse thông tin này để diễn họa lên ứng dụng. Cờ environment.demoMode cho phép gọi dữ liệu mock thông qua HttpInterceptors.