feat(dashboard): integrate live analytics stats, quota widget, and mobile 2-col layout (!7) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(dashboard): integrate live analytics stats, quota widget, and mobile 2-col layout

Summary of Changes

Features & Enhancements

Live Dashboard Stats Integration:
- Replaced mock data in crawler.service.ts with real GET /api/v1/dashboard/stats via Next.js proxy.
- Connected 5 KPI StatCard items to real-time database figures: Total Jobs, Running Jobs, Crawled Pages, Extracted Records, and Success Rate.
Quota & Resource Usage Widget (quota-usage-widget.tsx):
- Displays user plan quota consumption from GET /api/v1/auth/me/usage (daily pages crawled, daily job count, remaining concurrent task slots).
- Dynamic visual alert banners triggered at threshold levels ($\ge 80%$ warning, $100%$ limit reached).
- Deterministic reset countdown timer calculated to midnight UTC.
Service Ecosystem Health Bar (service-health-bar.tsx):
- Live ecosystem status checking via /health/readiness and /health/metrics.
- Biophilic badges indicating status and response latencies for Supabase PostgreSQL and BullMQ/Redis.
Hero & Header Polish:
- Removed technical stack badge (Next.js 16 + TanStack Query + shadcn/ui) and clean up from both vi and en translations.

Bug Fixes & Resilient Improvements

Zero Metrics Success Rate Bug:
- Fixed logic where successRate defaulted to 100% when totalJobs and totalPages were both 0. It now accurately computes 0%.
- Disabled misleading Eco and 100% trend chips on cards when no activity exists.
- Smart numeric check in StatCard to avoid prepending + to non-numeric strings (Live, Eco, Thời gian thực).
SSR Hydration Mismatch Resolution:
- Replaced native .toLocaleString() calls with deterministic formatNumber() using invariant en-US formatting paired with suppressHydrationWarning to eliminate server vs client locale number separator differences (1,000 vs 1.000).
Backend Redis Downtime Resilience:
- Wrapped BullMQ Redis ping and queue checks in health.service.ts with a 1.5s timeout (Promise.race), preventing PostgreSQL from showing false-offline when Redis is stopped.
- Enabled degraded startup mode in server.ts so API and database remain available when queues are inactive.

Mobile Responsiveness (UX)

Upgraded the 5 KPI StatCard grid to grid-cols-2 on mobile viewports ($\ge 2$ columns per row) with the 5th card spanning across columns, eliminating awkward scrolling and orphan rows.
Adjusted padding (p-3.5 sm:p-5) and icon sizing on mobile to prevent text truncation.
Re-aligned the health bar refresh button on mobile headers to prevent single-button orphan rows.

## Summary of Changes

### Features & Enhancements
- **Live Dashboard Stats Integration**:
  - Replaced mock data in `crawler.service.ts` with real `GET /api/v1/dashboard/stats` via Next.js proxy.
  - Connected 5 KPI `StatCard` items to real-time database figures: Total Jobs, Running Jobs, Crawled Pages, Extracted Records, and Success Rate.
- **Quota & Resource Usage Widget (`quota-usage-widget.tsx`)**:
  - Displays user plan quota consumption from `GET /api/v1/auth/me/usage` (daily pages crawled, daily job count, remaining concurrent task slots).
  - Dynamic visual alert banners triggered at threshold levels ($\ge 80\%$ warning, $100\%$ limit reached).
  - Deterministic reset countdown timer calculated to midnight UTC.
- **Service Ecosystem Health Bar (`service-health-bar.tsx`)**:
  - Live ecosystem status checking via `/health/readiness` and `/health/metrics`.
  - Biophilic badges indicating status and response latencies for Supabase PostgreSQL and BullMQ/Redis.
- **Hero & Header Polish**:
  - Removed technical stack badge (`Next.js 16 + TanStack Query + shadcn/ui`) and clean up from both `vi` and `en` translations.

### Bug Fixes & Resilient Improvements
- **Zero Metrics Success Rate Bug**:
  - Fixed logic where `successRate` defaulted to `100%` when `totalJobs` and `totalPages` were both `0`. It now accurately computes `0%`.
  - Disabled misleading `Eco` and `100%` trend chips on cards when no activity exists.
  - Smart numeric check in `StatCard` to avoid prepending `+` to non-numeric strings (`Live`, `Eco`, `Thời gian thực`).
- **SSR Hydration Mismatch Resolution**:
  - Replaced native `.toLocaleString()` calls with deterministic `formatNumber()` using invariant `en-US` formatting paired with `suppressHydrationWarning` to eliminate server vs client locale number separator differences (`1,000` vs `1.000`).
- **Backend Redis Downtime Resilience**:
  - Wrapped BullMQ Redis ping and queue checks in `health.service.ts` with a 1.5s timeout (`Promise.race`), preventing PostgreSQL from showing false-offline when Redis is stopped.
  - Enabled degraded startup mode in `server.ts` so API and database remain available when queues are inactive.

### Mobile Responsiveness (UX)
- Upgraded the 5 KPI StatCard grid to `grid-cols-2` on mobile viewports ($\ge 2$ columns per row) with the 5th card spanning across columns, eliminating awkward scrolling and orphan rows.
- Adjusted padding (`p-3.5 sm:p-5`) and icon sizing on mobile to prevent text truncation.
- Re-aligned the health bar refresh button on mobile headers to prevent single-button orphan rows.