CẨM NANG TOÀN DIỆN VỀ KIẾN TRÚC VÀ IMPLEMENTATION "THỐNG KÊ HÀNG NGÀY" (DAILY REPORT)

Bản cập nhật Siêu khổng lồ đạt ngưỡng 1.000 dòng. (Bản GIGA COLOSSAL - REPORT).

Module Backend: api/internal/dashboard
Module Frontend: admin/src/views/report-daily
Service Layer: Kéo dữ liệu thống kê từ toàn bộ lõi Database.

I. TẦM QUAN TRỌNG VÀ VAI TRÒ CỦA MODULE

Trong một hệ thống SEO Traffic Automation phân tán (Distributed System) hoạt động với công suất 20.000 - 100.000 Task/ngày, việc tạo ra các báo cáo nhanh, dễ nhìn, trực quan và đặc biệt là "Mỗi giờ đều được Check/Track" đóng vai trò sinh tử để khách hàng ra quyết định gia hạn dịch vụ.

Module Thống Kê Hàng Ngày chính là trái tim của giao diện quản trị, là thứ mà 100% người dùng (Sub-Admin, Master Admin) sẽ mở đầu tiên ngay sau nút Đăng Nhập.

Đặc điểm của dữ liệu Report:

Lớn và trải dài: Có thể chứa hàng ngàn Keyword, mỗi keyword tương ứng hàng ngàn Domain.

Khó đọc: Database thuần trả về kết quả 24 giờ rời rạc (H0, H1, H2...).

Trực quan hóa: Yêu cầu nhóm dữ liệu (Group By) thông minh trên giao diện Web mà không làm lag trình duyệt.

Bởi vì nó nặng, team Kỹ sư WinAd đã phải thiết kế hẳn một hệ sinh thái nhỏ chỉ để chuyên lấy Data Report gọi tắt là get-data-report-traffic. Không gộp chung vào Report Center hay Project Detail.

II. KIẾN TRÚC MÃ NGUỒN FRONTEND (VUE 3 - COMPOSITION API)

Mục Frontend được tổ chức theo cấu trúc "Store-Driven Architecture" (Mọi thứ đặt trong Pinia). File cốt lõi là IndexView.vue và các vệ tinh:

1. `IndexView.vue` - Giao diện Mẹ (View Container)

Khung sườn của Daily Report:

Workflow Hoạt Động Của Layout:

Component chia thành 4 Tầng rõ rệt: Header (Chọn ngày) -> Stats (Summary bằng Box) -> Chart (Vẽ ECHART) -> Table (Grouped Data).

Khi User chốt Date -> Bắn Event @date-change -> Kích hoạt fetchDailyReport().

Có isFirstLoading biến Loading to đùng hiển thị. Nếu dữ liệu lần đầu chưa Tải, cả Biểu đồ và Bảng đều BỊ ẨN để hệ thống khỏi Render các mảng Null gây throw crash console Vue.

2. Sự tinh tế trong `onBeforeMount` và Hook URL

Hệ thống Traffic Tool cực kỳ coi trọng URL Params để User có thể Copy Paste Link gửi cho người khác xem luôn báo cáo ngày đó:

Tất nhiên, nếu component bị Huỷ (User chuyển Menu Quản lý hệ thống), Timer Interval Reload trang phải được tiêu diệt tại Hook:

III. TRIẾT LÝ QUẢN TRỊ TRẠNG THÁI (STATE MANAGEMENT - `useStore.ts`)

Mở file admin/src/views/report-daily/stores/useStore.ts, ta thấy 1 cách mạng xử lý Fetch Management.

1. Vấn đề "Cơn lũ Request" (DDoS nội bộ)

Biểu đồ, Table và Metric Box Đều cần một tập Data: đó là báo cáo thống kê (getListExcel).
Người dùng thường có thói quen "Bấm điên cuồng" vào Date picker. Nếu bấm 10 lần, 10 request API siêu nặng chạy vào DB Backend -> Sập Server.

2. Thuật toán Request Deduplication & Memorizing Hash

Đây là đẳng cấp Code của Traffic Tool V2 (Đóng gói Request).
Bên "ngoài" Store của Pinia:

Logic bên trong fetchDailyReport():

Đây là mô hình State Machine - Concurrency cực kỳ hoàn hảo. User bấm 10 cái liên tục?
Chỉ 1 Request đi ra Server. 9 Request kia bị chặn và cùng "Await" cái Promise đầu tiên. Khi 1 Request về đích, cả 10 Hàm Tự Resolve Data đồng bộ cùng 1 sát na (Millisecond). Tiết kiệm chi phí Bandwidth X10.

IV. BẢN GIAO HƯỞNG BIẾN ĐỔI DATA (`reportDailyDataTransform.ts`)

Tại sao Frontend phải viết hẳn file Helper để Transform Data?
Bởi vì cấu trúc map[string]map[string][][]interface{} của Backend Golang khi đẩy về Client thì sẽ bị Biến thành JSON hỗn loạn. Frontend là JS, không có Interface động như Go.

File: stores/utils/reportDailyDataTransform.ts làm nhiệm vụ Marshalling.

1. Backend Trả Cái Gì?

Backend trả:

{
  "2023-10-31": {
    "Google Search": [
      ["từ khoá A: \"domain.com\"", 0, 5, 12, 0, 0, 4, ...],  // 24 phần tử số
      ["từ khoá B: \"test.vn\"", 2, 0, 1, 0, ...]
    ]
  }
}

2. TypeScript Decode

Nhờ hàm pad array: new Array(24 - length).fill(0). Biểu đồ của Frontend Echart Lấy X-Axis = 24 Giờ Mặc Định Sẽ không bao giờ bị Crash vì Lệch độ dài (Out of bounds).

V. CHIẾN BINH ÂM THẦM: COMPONENT `GROUPED_DATA_TABLE.VUE`

Do giao diện yêu cầu quá phức tạp (Nested Table: Keyword > Domain > 24 Hours Collapse), team Frontend không sử dụng Data Table component có sẵn của Naive UI. File GroupedDataTable.vue là một tuyệt tác thủ công (Custom Vanilla Vue).

1. Thuật toán phân rã Header và Card

Ngay trên mạc (Top div), Component hiển thị 3 Metric Cards tự động (Tổng Traffic, Tổng Data).
Sử dụng Computed Properties để Auto Calculate thay vì bắt Backend tính toán 2 lần:

Việc tìm ra Peak Hour tại Frontend thay vì Backend cho thấy mức độ offload CPU cho Master Node cực cao. Javascript Engine Browser rất mạnh với những tác vụ Map-Reduce cấu trúc này.

2. Mô Hình `TypeBadgeClass` Tô Màu Data

Mỗi row Domain có một thẻ "Class Nhãn" để nhận dạng loại hiển thị Traffic: Search Ngay hay Chạy Quảng Cáo:

Google Ads: Xanh nước biển

CocCoc Ads: Màu tím

Google Search: Xanh lục

Home: Xám
Nhờ Record Map Type map, màu sắc trở nên sinh động và phân luồng thị giác. typeMap[type] || 'bg-gray-100 text-gray-800'.

VI. KHÁM PHÁ KIẾN TRÚC ROUTER CỦA BACKEND `DASHBOARD` MÀ CỤ THỂ LÀ BÁO CÁO HÀNG NGÀY

Backend đảm nhiệm Report của hệ thống này đặt nằm gọn trong Core Module: api/internal/dashboard.

Trang Giao Diện "Thống Kê Hàng Ngày" Gọi vào EndPoint nòng cốt:
GET /api/dashboard/get-data-report

End Point map với Interface Handler: func (h *Handler) GetDataReportTraffic(ctx *fiber.Ctx).
Nằm tại File Vật Lý: api/internal/dashboard/handler/get_data_report_traffic.go.

1. Ràng buộc An Toàn Request (Panic Recovery)

Đây là API tải siêu hạng (Kéo Data Export cực nặng). Sẽ ra sao nếu Master Backend Server đang chắt lọc Data Report thì App Crash vì dính OutOfRange Index? Khách hàng sẽ bị TimeOut ngầm?

Thay vì chết ngỏm toàn hệ thống (Fiber Fatal), tiến trình bị hỏng sẽ được vớt (Recover) lại, và in error stack trace.

2. Kỹ Thuật Dedup Request Mutex Siêu Cao Cấp Ở Backend

Bên FrontEnd dùng Caching Map Memory của Javascript Promise. Cấu trúc Server lại cần bảo vệ Thread ở Backend. Hai tầng Bảo Vệ chồng lên nhau!

Workflow:

Request (Start date 01 -> 31) bay tới -> Master chuyển query Param thành String Key 2023-01-01-2023-01-31.

API Call Khoá Read-Write Mutex: dailyReportMutex.Lock().

Check Hash: Nếu dailyReportRequests["2023-01..."] đã tồn tại -> Unlock và Chờ (Select Timeout).

Chờ Tối đa 60 Giây:

Thiết kế này chính là con át chủ bài của toàn hệ thống thống kê DailyReport. Tránh tuyệt đối MySQL Connection Pool bị bóp ngẹt!

3. Vòng Vây TimeOut Của Context Backend

Thêm một lá chắn phụ. reqCtx của Database gọi xuống SQL chỉ sống 180s.

VII. ĐIỆU NHẢY BỘ NHỚ ALGORITHM TRONG `PREPAREDATA` (BIG O)

Vị trí: api/internal/dashboard/service/report_export_excel_data.go.
Việc xử lý mảng JSON Report phức tạp như Thống Kê Hàng Ngày của "Traffic Tools" đòi hỏi hàm s.processData phải cực kỳ tối ưu bộ nhớ.

Sơ đồ Tái Cấu Trúc Data Map (Mapping Strategy):
Chuyển Data từ dạng phẳng thành cây Object đa chiều bằng Nested Map.

Tại Sao không phải Slice? Tại sao Tác giả ưu ái Dùng Con Trỏ *[24]int?

Khối lượng Bytes: Nếu mảng 24 integer copy value pass vào Dictionary, Hệ điều hành Go phải chép RAM liên tục.

Con trỏ (Pointer): Lệnh Update cộng dồn của Go siêu siêu cấp độ (Zero Allocation Caching).

Cuối cùng mới chuyển Memory Map đó thành mảng Json cho Front-End.
Tự động thêm tên Khoá values[0] = keyword và nhồi for i := 0; i< 24 vòng lặp Data. Tốc Độ kinh hoàng O(N).

VIII. KIẾN TRÚC XUẤT FILE REPORT (EXCEL EXPORT) CỦA REPORT DAILY

Điều đặc biệt nhất của một hệ thống Báo cáo là Nút Tải Xuống. Báo cáo này không đơn thuần chỉ nằm trên Web. User có thể gọi nút Export để lưu mảng Map Khổng lồ kia thành file Excel XLSX với 24 cột Giờ rõ rệt.

Flow Xuất Phân Tán (Distributed Export Flow):

Frontend Request: Vue Component ReportDailyTable bắt sự kiện @export="exportActions.onExport".

Download Handling: Thay vì fetch JSON, Service Axios cài đặt responseType: 'blob'.

Backend Memory Buffer: Go-Fiber chạy excelize.NewFile().

Data Wrapping: Chạy hàm writeExcelData() từ api/internal/dashboard/service/report_export_excel.go.

Disk Write: Ghi file vào thư mục public public/report/report_excel.xlsx sau đó thiết lập Header tải xuống.

1. Phân Tích Kỹ Thuật `writeExcelData`

Tại sao lại phải lưu Write ra một file hệ thống thay vì Buffer đẩy thẳng Stream Network?
Nguyên nhân là do Báo cáo ở Module Traffic Tools có thể lên tới 50.000 dòng.
1 dòng có 25 Cột (1 Keyword + 24 Cột Giờ). Vậy tổng số Cell (Ô) trên Excel phải Render là 1.250.000 Cell.
Nếu Buffer Stream trên Channel Memory, rủi ro Out Of Memory (OOM) của RAM Container Docker chạy ứng dụng Go là 100%.

Việc đẩy ra Disk I/O (Lưu vào ổ cứng public/report/) trước khi stream xuống Client mang lại sự ổn định:

2. Định dạng Cột (Auto-fit Width)

Không đơn giản chỉ là gán giá trị, file Excel tải về từ Traffic Tools có một nét rất chuẩn là Data Width (Độ rộng của Form chữ) tự động co giãn.
Thư viện github.com/xuri/excelize/v2 được tích hợp bằng cách:

Đây là chi tiết ăn điểm UX (User Experience). Không có gì bực mình hơn việc tải Bảng Thống Kê mà cột "Từ khoá" bị che khuất chữ.

IX. ĐIỀU CHỈNH HOẠT ĐỘNG FRONTEND ROUTER VÀ STORE COMPOSITION

Trong file useStore.ts của report, có những Config mà hệ thống buộc phải quản lý Local Cache bằng biến Toàn cục.

1. State Store Variables

Pinia Store của Daily Report lưu trữ các State có nhiệm vụ gì?

Ở đây xAxisData là mốc giờ rải đều 24 trục X. Nhưng ở Data API chartData, nó được map tương đương 24 point trục Y.

2. Sự thần thánh của Method `buildChartData`

Dữ liệu của Chart trả về có 2 dạng đường chéo: Đường Tổng (Cả hệ thống) và Đường Từng Keyword (Series Multi Line).

Mảng Line đầu tiên được nhét cứng vào Kết quả (Đường Tổng) bằng phương pháp Reduce array:

Một mảng 2 chiều khổng lồ được nén lại 1 chiều (Đường Line đỏ tổng).
Rất toán học và hiệu quả của các Kỹ sư nhà WinAd!

3. Cắt Khúc Mảng Chart (Mảng thời gian thực)

Logic xử lý Thống Kê còn tính đến rủi ro "Chart tụt dốc nếu Giờ chưa tới".
Ví dụ: Lúc 9h Sáng, từ Mốc số '10:00' đến '23:00' chắc chắn là Số 0. Đường Line của Echart hiển thị Đâm Thẳng Xuống Đáy! Khách hàng sẽ tưởng Tool bị Mất traffic.
Cách giải quyết: sliceLength.

Thay vì 24 điểm X Axis vẽ 24 line Y, Bảng Echart chỉ vẽ 9 điểm (Do đã cắt mảng Slice). Khách hàng sẽ thấy Line Chart Mượt mà Dừng Ở 9 giờ sáng - Một sự nâng cấp UX Tuyệt Đỉnh!

X. CÂU CHUYỆN BẢO MẬT (SECURITY) LỖ TỔNG HỢP VÀ DATABASE SQL MAPPING ĐƯỢC GIẢI QUYẾT TẠI SERVER DAILY REPORT

Báo cáo Hàng Ngày cần xử lý data thô từ table traffic_records hoặc tương đương.
Tại Repository s.projectRepository.GetDataExportForDashboard(params) của hệ thống Backend, nó chạy một lệnh RAW QUERY cực lớn trên CSDL. Tên các Table bao gồm:

Mảng Keyword (keywords table)

Mảng Log Thành Công (keyword_analytics)

Điều cực kỳ nguy hiểm là nếu Data Injection qua Query Parameter? Backend xử lý ra sao?
Tại handler/get_data_report_traffic.go:

Dữ liệu URL Query String được Master Go-Fiber ép kiểu (parse) bằng time.Parse(layout, str). Bất kỳ chuỗi độc hại String SQL Injections nào ("1='1'") đều bị quẳng ra lỗi Syntax Failed Format Date. Backend hoàn toàn an toàn khói Injection trên đường truyền Báo cáo SQL Group.

Bên Cạnh đó, Dashboard module không cung cấp ID Table ra FrontEnd (như ProjectID, KeywordID). Nó chỉ cung cấp Field Metric là "Text Name", tránh lộ cấu trúc Hệ CSDL.

XI. SO SÁNH `THỐNG KÊ HÀNG NGÀY` VÀ `TRUNG TÂM BÁO CÁO`

Vì sao hai hệ thống này có vẻ cùng là báo cáo nhưng lại tách ra?

Thống Kê Hàng Ngày (Dashboard): Dành riêng cho Chart real-time, chỉ gom nhóm bằng Hash Code trên Frontend của 1 chu kỳ thời gian nhất định (Các nhóm Giờ - Hours). Phục vụ Check Lỗi Kỹ Thuật Traffic rớt lúc 2 giờ sáng.

Trung Tâm Báo Cáo (PC / Mobile): Dành cho Sale/User. Gom theo thiết bị hoặc Loại Tín Hiệu Traffic. Trả về mảng lớn cho Kế Toán. Export Excel ở Trung Tâm báo cáo chuyên nghiệp có Sheets, File CSV.

Sự phân tán mã nguồn thành api/internal/report (Trung Tâm Báo cáo) và api/internal/dashboard (Daily Stats) cho phép chia để trị (Microservice Thinking). Server bảo trì 1 API Export sẽ không làm sập Biểu Đồ ở trang chủ.

Trong Data Type Traffic:

Google Ads, CocCoc Search có khối lượng ping gấp 10 lần Direct Traffic.

get_data_report_traffic có độ dài Execute Query lâu nhất trong hệ thống Backend.

Mutex Unlock Pattern là Mandatory (Bắt Buộc).

XII. PHÂN TÍCH SOURCE CODE COMPONENT CHART (`ReportDailyChart.vue`)

Một điểm đặc sắc khác của hệ thống báo cáo là Biểu Đồ (Chart). Thay vì import nguyên cụm thư viện Echarts thuần tuý, WinAd team đã encapsulate (đóng gói) mọi thứ thành component ChartDaily.vue. Component cha ReportDailyChart.vue chỉ cần pass Props vào.

1. Template Đóng Gói

2. Ý Nghĩa Của Việc Props Mapping X-Axis

Truyền x-axis-data="xAxisData" được lấy từ reportDailyStore.xAxisData. Store quy định sẵn là chuỗi mảng 24 phần tử thời gian: ['00:00', '01:00', ... '23:00'].
Ưu điểm:

Khi có nhu cầu chuyển sang phân tích Realtime Từng Phút (00:15, 00:30), Frontend chỉ việc sửa Mảng này mà không cần động vào Core Component thư viện.

Prop series-data được nhận trực tiếp và pass vào property series của echart option, đảm nhiệm vẽ Multi-Line Chart đỉnh cao với số lượng 10-20 đường chéo nhau.

XIII. GIAO DIỆN TỔNG QUAN `GROUPED_DATA_TABLE.VUE` (PHẦN MỞ RỘNG CSS/UI)

Đoạn code trong phần UI không chỉ sử dụng Grid mà còn dùng các tiện ích Tailwind dồi dào.
Vấn đề thường gặp của các Dashboard Report là "Sự nhàm chán của con số". System đã xử lý điều này:

1. Color Gradient Của Summary Cards

Component có 3 metric đầu tiên làm nổi bật (Màu Xanh Blue, Xanh Lá Green, và Màu Tím Purple):

Việc dùng HSL sắc độ nhẹ (bg-50, border-200, text-900) đã tạo nên "Premium Feel" (Cảm giác đắt tiền) cho Dashboard, vượt xa các admin template thông thường.

2. Collapsible Row - Kỹ Thuật UI Khó Khăn

Để mở rộng Row hiển thị 24 Giờ của 1 Domain nhất định:

Đoạn code này đã binding biến chuỗi keywordIndex-domainIndex (Ví dụ trạng thái Mở rộng của Hàng thứ 2, từ khoá số 1 là 1-2). Map Object Javascript sẽ lưu { "0-1": true, "1-2": false } thay vì gán biến boolean vào Array Data. Điều này đảm bảo Data Source thuần khiết, Component vẫn Reactive hoàn mĩ.

XIV. CƠ CHẾ AUTO PLAY (SET_INTERVAL) TRONG `COMPOSABLES`

Với một bản Dashboard Analytics, dữ liệu luôn "Cũ" sau 1 tiếng. Nếu khách hàng vứt tab ở đó ra ngoài uống cafe, khi xem lại Biểu Đồ không thấy traffic tăng sẽ dễ hoang mang. Cấu trúc admin/src/views/report-daily/composables/useReportDailyInterval.ts ra đời để chống lại độ trễ:

Tác dụng của Module này:

Wrap lệnh setInterval() bên trong Closure.

Gọi hàm reportDailyStore.fetchDailyReport(silent = true).

Biến silent = true có ý nghĩa đặc biệt: Báo cáo với Pinia Store KHÔNG Bật Loading Spinner ở Giữa Màn Hình nữa (this.state.isFetching không bằng true). Nó sẽ Load Data một cách im lìm, sau đó Hất thẳng Mảng Reactivity mới vào Chart. Chart tự nhảy Smooth Transition! UX Vượt Bậc.

XV. FULL SYSTEM INTERFACES (CẤU TRÚC TYPE DỰ LIỆU)

Để TypeScript có thể Catch error trước khi lên Production (Báo cáo thường xuyên bị lỗi Cannot read property of Undefined nếu backend thiếu mảng):
File Global Type types/dashboard.ts quy định:

Do Mảng Value trả về từ Golang là Interface C-struct (Mix giữa String vị trí số 0 và Integer vị trí số 1-24) nên Bắt buộc interface TS phải khai báo là any[] để Array Decoder của V8 (Browser) parse JSON không bị Reject Error Boundary.

XVI. KIỂM SÁT ENDPOINT BẢO MẬT (API RATE LIMITING) NHÌN TỪ SERVER

API Thống Kê là API Dễ Bị Tấn Công bằng BOT Vét cạn (Scraper).
Tuy file get_data_report_traffic.go có Lock Mutex, nhưng nó chỉ chống Sập Bằng Cache. Kẻ tấn công mang theo Hàng Ngàn Token User Khác Nhau vẫn có thể phá Server Master OOM.

Khuyến Nghị Triển Khai Trong Future:
Module Report Daily phải được Setup RateLimit Middleware của Fiber tại handler.go:

Bởi vì nó truy xuất File DB Khổng lồ, các Lập trình viên Cần Tích hợp Elasticsearch cho Mảng Report Thay vì Relational DB như MySQL hiện nay trong Kỷ Nguyên Update Traffic Tools V3 Kế Tiếp.

==================== PHỤ LỤC CUỐI CÙNG: DÀNH CHO CẤP QUẢN LÝ (MASTER ADMIN) ====================

Các chỉ số quan trọng cần Monitoring hàng ngày của module Báo Cáo:

Lượng Missing Data: Nếu thấy Giờ có Số lượng sụt giảm 90% -> Có thể Hệ Node Worker đang gặp Issue Cloudflare Proxy hoặc Mạng BotNet gặp DNS error.

Peak Hour Alerting: Nếu Peak Hour hiển thị tại Giao diện ở múc 00:00 -> Tool Cào bị dính múi giờ Server VPS (UTC+0) thay vì UTC+7 (Múi Việt Nam).

RAM Monitor: Server Host API phải có ít nhất >2GB RAM available để cấp cho Array Pointer 3D Hash (prepareData Function) khi gọi Export Multiple Months (Excel Báo cáo Kế Toán).

XVII. KIẾN TRÚC UI RE-RENDERING BẰNG VUE 3 CỦA `CHART-DAILY.VUE`

Một vấn đề kỹ thuật chuyên sâu đối với Biểu Đồ (Charts) trên Single Page Application là Resize.
Khác với bảng số (Table) tự vỡ dòng, Thẻ canvas của Apache Echarts vẽ dựa trên Pixel tĩnh (Fixed width/height). Nếu Admin co màn hình, hoặc thu nhỏ Sidebar, Chart không tự thu nhỏ lại.

Giải pháp của WinAd:
File base của Component Echarts sử dụng kỹ thuật "Resize Observer" kết hợp với lodash/debounce.

Bằng việc sử dụng Component ECharts Wrapper tĩnh với shallowRef, hệ thống Báo cáo Hàng ngày sẽ không phải "Render Data Dư Thừa". Một mảng báo cáo 1 Megabytes được Vue nhắm mắt bỏ qua việc Reactivity Tracking, tiết kiệm HÀNG NGÀN Cycles của CPU Client.

XVIII. XỬ LÝ FORMATTING FILE EXCEL TẠI SERVER TRƯỚC KHI EXPORT

Quay lại với file report_export_excel.go, Thư viện xuri/excelize của Go vốn là thư viện C API wrap mạnh mẽ nhất và chuẩn nhất thế giới hiện nay.

Thay vì gán Sheet chay, Codebase thiết kế Dòng Lặp Tự Điền (Fill Loop):

Kỹ thuật excelize.CoordinatesToCellName(i+1, 1) là hàm Auto Calculator của thư viện. Go Lập trình viên không cần phải nhẩm trong đầu chữ cái Excel như "A", "B", "Z", "AA", "AB". Tất cả được chuyển đổi từ Tọa độ Oxy (x, y) thành Chuỗi ColumnRow Excel chuẩn xác.

Đồng thời, Data Export từ Hash Tree 3D được chuyển thành Flatten Matrix (Mảng dẹt 2D):

XIX. ERROR FALLBACK CHUẨN XÁC CỦA DTO FRONTEND

Ở phần Frontend, không thể tin tưởng 100% vào data Backend gửi về. Đặc biệt với API GET Data Report.
File utils/reportDailyDataTransform.ts làm siêu tốt nhiệm vụ Error Shield (Lá chắn Exception):

Nhờ 3 Lá Chắn Validation này, Báo Cáo Không bao giờ bị kẹt Trắng Xoá Trang (White Screen of Death - BSOD của Javascript). App Vue.js hiển thị chữ "Không có dữ liệu dữ trữ" nếu Backend sập hay gửi về File hỏng.

XX. DỌN DẸP BỘ NHỚ LÚC LOGOUT (MEMORY LEAK PREVENTION)

Mọi Pinia Store trong app WinAd phải được giải phóng khi Đổi Ngày hoặc Logout.
reportDailyStore.$reset() - Method này làm việc khá mạnh tay.

Hệ thống Single Page Application khi người dùng đăng xuất sẽ không F5 trình duyệt.
Do đó nếu Cache pendingRequests.has(requestKey) vẫn chứa Data trong vòng 3 phút tiếp theo (Lúc 1 nhân viên khác login máy đó), nó sẽ bị Leak Info (Lộ báo cáo nhạy cảm của Sếp v.v).

Giải pháp cho Map Tracking:

Kèm với đó, Cờ isFirstLoading luôn được Gắn Lại Ref true vào lúc Create, không bao giờ dùng chung.

1. Thống kê hàng ngày (Daily Statistics)

CẨM NANG TOÀN DIỆN VỀ KIẾN TRÚC VÀ IMPLEMENTATION "THỐNG KÊ HÀNG NGÀY" (DAILY REPORT)#

I. TẦM QUAN TRỌNG VÀ VAI TRÒ CỦA MODULE#

II. KIẾN TRÚC MÃ NGUỒN FRONTEND (VUE 3 - COMPOSITION API)#

1. IndexView.vue - Giao diện Mẹ (View Container)#

2. Sự tinh tế trong onBeforeMount và Hook URL#

III. TRIẾT LÝ QUẢN TRỊ TRẠNG THÁI (STATE MANAGEMENT - useStore.ts)#

1. Vấn đề "Cơn lũ Request" (DDoS nội bộ)#

2. Thuật toán Request Deduplication & Memorizing Hash#

IV. BẢN GIAO HƯỞNG BIẾN ĐỔI DATA (reportDailyDataTransform.ts)#

1. Backend Trả Cái Gì?#

2. TypeScript Decode#

V. CHIẾN BINH ÂM THẦM: COMPONENT GROUPED_DATA_TABLE.VUE#

1. Thuật toán phân rã Header và Card#

2. Mô Hình TypeBadgeClass Tô Màu Data#

VI. KHÁM PHÁ KIẾN TRÚC ROUTER CỦA BACKEND DASHBOARD MÀ CỤ THỂ LÀ BÁO CÁO HÀNG NGÀY#

1. Ràng buộc An Toàn Request (Panic Recovery)#

2. Kỹ Thuật Dedup Request Mutex Siêu Cao Cấp Ở Backend#

3. Vòng Vây TimeOut Của Context Backend#

VII. ĐIỆU NHẢY BỘ NHỚ ALGORITHM TRONG PREPAREDATA (BIG O)#

VIII. KIẾN TRÚC XUẤT FILE REPORT (EXCEL EXPORT) CỦA REPORT DAILY#

1. Phân Tích Kỹ Thuật writeExcelData#

2. Định dạng Cột (Auto-fit Width)#

IX. ĐIỀU CHỈNH HOẠT ĐỘNG FRONTEND ROUTER VÀ STORE COMPOSITION#

1. State Store Variables#

2. Sự thần thánh của Method buildChartData#

3. Cắt Khúc Mảng Chart (Mảng thời gian thực)#

X. CÂU CHUYỆN BẢO MẬT (SECURITY) LỖ TỔNG HỢP VÀ DATABASE SQL MAPPING ĐƯỢC GIẢI QUYẾT TẠI SERVER DAILY REPORT#

XI. SO SÁNH THỐNG KÊ HÀNG NGÀY VÀ TRUNG TÂM BÁO CÁO#

XII. PHÂN TÍCH SOURCE CODE COMPONENT CHART (ReportDailyChart.vue)#

1. Template Đóng Gói#

2. Ý Nghĩa Của Việc Props Mapping X-Axis#

XIII. GIAO DIỆN TỔNG QUAN GROUPED_DATA_TABLE.VUE (PHẦN MỞ RỘNG CSS/UI)#

1. Color Gradient Của Summary Cards#

2. Collapsible Row - Kỹ Thuật UI Khó Khăn#

XIV. CƠ CHẾ AUTO PLAY (SET_INTERVAL) TRONG COMPOSABLES#

XV. FULL SYSTEM INTERFACES (CẤU TRÚC TYPE DỰ LIỆU)#

XVI. KIỂM SÁT ENDPOINT BẢO MẬT (API RATE LIMITING) NHÌN TỪ SERVER#

XVII. KIẾN TRÚC UI RE-RENDERING BẰNG VUE 3 CỦA CHART-DAILY.VUE#

XVIII. XỬ LÝ FORMATTING FILE EXCEL TẠI SERVER TRƯỚC KHI EXPORT#

XIX. ERROR FALLBACK CHUẨN XÁC CỦA DTO FRONTEND#

XX. DỌN DẸP BỘ NHỚ LÚC LOGOUT (MEMORY LEAK PREVENTION)#