ISSUE 04 — Scientia Dashboard - Feature Level Issues (Refactor Spec)

[LeDuyCoder]

Mục tiêu: Chuyển từ "component-based tasks" → "feature-based dashboard implementation"

---

1. 🧱 Dashboard Layout & Page Structure

🧩 Mô tả

Xây dựng toàn bộ khung trang dashboard bao gồm layout tổng thể, cấu trúc sections và hệ thống bố cục chính.

🎯 Scope

• Thiết lập page layout chính của dashboard (content area bên cạnh sidebar)
• Xây dựng structure tổng thể của trang:
  • Header section
  • Filter control section
  • Analytics grid section
  • Insights section
  • Footer section
• Thiết lập spacing system xuyên suốt toàn trang
• Đảm bảo layout consistency khi scale màn hình
• Setup responsive structure (desktop → tablet → mobile)

📦 Output Expected

• Dashboard page layout hoàn chỉnh (khung tổng)
• Structure sections rõ ràng theo vertical flow
• Responsive layout ổn định

✅ Acceptance Criteria

• Toàn bộ dashboard hiển thị đúng structure như design
• Không vỡ layout khi resize
• Sections được phân tách rõ ràng theo UI hierarchy
• Không phụ thuộc vào component nhỏ lẻ

---

2. 🔝 Header + Global Control System

🧩 Mô tả

Xây dựng toàn bộ khu vực header của dashboard bao gồm search, user info và system actions.

🎯 Scope

• Xây dựng header layout tổng thể (left: search / right: actions + user)
• Implement search interaction (UI state + focus + input behavior)
• Hiển thị notification + settings actions
• Hiển thị user profile (avatar + name + role)
• Xử lý responsive behavior (co gọn / wrap / stack)
• Đảm bảo header alignment theo design system

📦 Output Expected

• Header hoàn chỉnh hoạt động end-to-end
• Search + actions + profile hoạt động UI đầy đủ
• Responsive header behavior

✅ Acceptance Criteria

• Header đúng layout design
• Search input hoạt động đầy đủ UI states
• Icon actions clickable + accessible
• User profile hiển thị đúng data
• Không overflow trên mobile/tablet

---

3. 🎛 Filter & Dashboard Control System

🧩 Mô tả

Xây dựng toàn bộ hệ thống filter điều khiển dữ liệu dashboard.

🎯 Scope

• Xây dựng filter bar (timeframe, domain, region)
• Hiển thị trạng thái filter hiện tại (chips UI)
• Tích hợp action “Update Analysis”
• Xử lý state thay đổi filter → trigger refresh data
• Loading state khi update analysis
• Responsive behavior (wrap / scroll / collapse)

📦 Output Expected

• Filter system hoạt động end-to-end
• UI phản ánh đúng state data filtering

✅ Acceptance Criteria

• Filter update phản ánh UI + data state
• Update Analysis có loading/disabled state
• Chips hiển thị đúng selection
• Không vỡ layout khi thêm filter

---

4. 📊 Analytics Dashboard Section (Core Data Visualization Area)

🧩 Mô tả

Xây dựng khu vực analytics chính của dashboard bao gồm toàn bộ biểu đồ và visualization.

🎯 Scope

• Thiết lập grid layout cho analytics section (2x2)
• Render 4 analytics modules:
  • Publication Trend
  • Citation Mirroring
  • Topic Evolution
  • Frontier Detection
• Chuẩn hóa spacing + alignment giữa cards
• Xử lý responsive (stack khi mobile)
• Đảm bảo chart render performance ổn định

📦 Output Expected

• 4 analytics charts hiển thị đúng layout
• Grid system ổn định
• Charts hoạt động với mock data

✅ Acceptance Criteria

• 4 charts hiển thị đúng vị trí design
• Không lệch layout giữa các cards
• Responsive chuyển sang stack mobile OK
• Không overflow chart container

---

5. 📈 Publication Trend Feature

🧩 Mô tả

Feature hiển thị xu hướng xuất bản theo thời gian.

🎯 Scope

• Render line chart growth over time
• Hiển thị YoY growth badge
• Grid background chart styling
• Tooltip interaction
• Area fill dưới line
• Animation khi load data

📦 Output Expected

• Chart thể hiện đúng trend dữ liệu
• UI match design visualization

✅ Acceptance Criteria

• Line chart render đúng dữ liệu
• Tooltip hiển thị chính xác
• Badge YoY hiển thị đúng vị trí
• Animation mượt

---

6. 🔄 Citation Mirroring Feature

🧩 Mô tả

So sánh citation giữa external vs self citation.

🎯 Scope

• Dual line chart rendering
• Legend system
• Axis + grid layout
• Tooltip comparison 2 series
• Visual differentiation giữa 2 data sets

📦 Output Expected

• Chart comparison rõ ràng 2 trend

✅ Acceptance Criteria

• 2 lines hiển thị đúng data
• Legend map đúng series
• Tooltip show đúng values
• Không overlap UI

---

7. 🌐 Topic Evolution Feature

🧩 Mô tả

Hiển thị sự thay đổi research topics theo thời gian.

🎯 Scope

• Stacked area chart
• 3 domain visualization
• Legend mapping
• Smooth transitions khi data update
• Responsive scaling

📦 Output Expected

• Biểu đồ evolution theo domain rõ ràng

✅ Acceptance Criteria

• Stack area đúng logic
• Legend chính xác
• Không bị collapse khi resize
• Data transition mượt

---

8. 🎯 Frontier Detection Feature

🧩 Mô tả

Hiển thị các research frontier dựa trên impact vs velocity.

🎯 Scope

• Scatter plot visualization
• Bubble rendering theo topic
• Axis labels + grid system
• Highlight frontier topics (CRISPR V3)
• Tooltip interaction
• Expand/zoom modal view

📦 Output Expected

• Scatter plot thể hiện đúng distribution

✅ Acceptance Criteria

• Bubble position đúng data mapping
• Frontier highlight rõ ràng
• Tooltip chính xác
• Modal zoom hoạt động

---

9. 🔮 Future Insights Feature Section

🧩 Mô tả

Hiển thị các dự báo và insight nghiên cứu tương lai.

🎯 Scope

• Render 3 insight blocks:
  • Predictive Peak
  • Saturation Alert
  • Cross-domain Synergy
• Layout horizontal (desktop) / stack (mobile)
• Icon + text hierarchy
• Accent styling theo từng insight type

📦 Output Expected

• Section insight rõ ràng và dễ scan

✅ Acceptance Criteria

• 3 insights hiển thị đúng design
• Visual hierarchy rõ ràng
• Responsive không vỡ layout

---

10. ⚙️ Dashboard Data & State System

🧩 Mô tả

Quản lý toàn bộ data flow cho dashboard.

🎯 Scope

• Global dashboard state (filters + data)
• Data fetching layer (mock/API)
• Loading / error / empty states
• Refetch logic khi filter change
• Normalize data cho charts

📦 Output Expected

• Data flow ổn định toàn dashboard

✅ Acceptance Criteria

• Filter trigger data refresh đúng
• Loading state consistent
• Error state không crash UI
• Data consistent across modules

---