[WIP] Upgrade and improve dashboard UI/UX

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Nâng cấp, sắp xếp, và cải tiến giao diện người dùng (UI/UX) của dashboard, sử dụng Nuxt UI để:
Có thể tham khảo giao diện của vercel tôi khá thích nó

Tăng tính trực quan và chuyên nghiệp.

Hiển thị dữ liệu giám sát rõ ràng, nhất quán.

Mở rộng dễ dàng cho các module mới: Uptime, Latency, SSL, Alerts, Reports, Settings...

1. Bố cục tổng thể

Giao diện dashboard dạng lưới (grid) gồm:

Thanh sidebar navigation bên trái (menu các module).

Header bar trên cùng (logo, search, dark mode toggle, user dropdown).

Main content area hiển thị các card thống kê, biểu đồ, bảng dữ liệu.

Responsive tốt trên cả desktop và mobile.

Giữ phong cách hiện đại, sáng sủa, tối ưu readability.

2. Thành phần chính

Sử dụng các component có sẵn trong Nuxt UI hoặc tùy chỉnh lại:

cho hiển thị dữ liệu Uptime, Latency, SSL, Alerts.

cho danh sách sự kiện, log, hoặc alerts.

hoặc (nếu có plugin chart) để hiển thị xu hướng uptime/latency.

, , , cho các thao tác cấu hình monitor.

hiển thị trạng thái: success, warning, error với màu sắc rõ ràng.

3. Trải nghiệm người dùng (UX)

Giao diện phản hồi nhanh, hiển thị rõ trạng thái hoạt động (Up/Down).

Bổ sung tooltip, skeleton loading, và state empty/error.

Ưu tiên hành động chính: Add Monitor, View Report, Acknowledge Alert.

Sử dụng icon nhẹ, tối giản (Heroicons hoặc Lucide) để tăng nhận diện.

4. Kỹ thuật & style

Áp dụng theme của Nuxt UI, sử dụng app.config.ts để định nghĩa màu chính (primary), màu accent.

Giữ consistent về spacing (p-4, gap-4, rounded-xl, shadow-sm).

Có thể tách component tái sử dụng:

MonitorCard.vue

AlertTable.vue

LatencyChart.vue

SSLStatusCard.vue

OverviewHeader.vue

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
headless-sentry	Ready	Preview	Comment	Oct 31, 2025 4:41am