feat(ui): implement responsive bottom nav and polish interface metrics & localization (!9) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(ui): implement responsive bottom nav and polish interface metrics & localization

Summary of Changes

This pull request introduces a responsive mobile and tablet bottom navigation bar, dynamically computes KPI metrics for extraction templates, resolves client-side hydration issues caused by browser extensions, and refines service health localization and user menu options.

Key Updates

1. Extraction Templates Metric Calculation

Issue: The structured extraction coverage KPI card displayed a static 100% even when no templates or rules existed.
Fix: Replaced the hardcoded percentage with dynamic memoized calculation:
- Displays 0% when the template list is empty or total rules equal 0.
- Correctly computes the true coverage percentage based on configured structured rules when data exists.

2. Responsive Bottom Navigation Bar

Responsive Navigation Structure:
- For screen widths 1024px and below, the 5 primary navigation tabs transition from the top header into a fixed bottom navigation bar.
- Mobile Phones (< 768px): Displays icons only with comfortable touch targets and an active emerald indicator dot.
- iPads / Tablets (768px to 1024px): Displays a stacked layout with the icon on top and the navigation label directly underneath.
- Desktops (> 1024px): The bottom navigation bar is hidden while the header navigation tabs remain visible.
Design & Layout:
- Built with glassmorphism, background blur, subtle border styling, and safe-area inset padding for modern mobile devices.
- Added bottom padding to the footer to ensure page contents are never obscured by the fixed bar.

3. Hydration Mismatch Resolution

Fixed client hydration warnings caused by browser extensions or responsive devtools injecting translate styles into fixed bottom elements prior to hydration.
Implemented a client mount guard and suppressed hydration warnings on the navigation element to guarantee clean rendering across all browsers.

4. Service Health Localization

Replaced hardcoded English status strings (Degraded, Active, Online, Offline, Down) with dynamic bilingual localization tokens.
Standardized Vietnamese translations to pure Vietnamese (Hiệu năng giảm instead of mixed English terms).

5. User Profile Dropdown Cleanup

Removed redundant Dashboard navigation link from the user avatar dropdown menu.
Removed the static Admin role badge entry from the dropdown action list.
Cleaned up unused imports and icons to streamline the user menu interface.

## Summary of Changes

---

### Key Updates

#### 1. Extraction Templates Metric Calculation
- **Issue**: The structured extraction coverage KPI card displayed a static 100% even when no templates or rules existed.
- **Fix**: Replaced the hardcoded percentage with dynamic memoized calculation:
  - Displays 0% when the template list is empty or total rules equal 0.
  - Correctly computes the true coverage percentage based on configured structured rules when data exists.

#### 2. Responsive Bottom Navigation Bar
- **Responsive Navigation Structure**:
  - For screen widths 1024px and below, the 5 primary navigation tabs transition from the top header into a fixed bottom navigation bar.
  - **Mobile Phones (< 768px)**: Displays icons only with comfortable touch targets and an active emerald indicator dot.
  - **iPads / Tablets (768px to 1024px)**: Displays a stacked layout with the icon on top and the navigation label directly underneath.
  - **Desktops (> 1024px)**: The bottom navigation bar is hidden while the header navigation tabs remain visible.
- **Design & Layout**:
  - Built with glassmorphism, background blur, subtle border styling, and safe-area inset padding for modern mobile devices.
  - Added bottom padding to the footer to ensure page contents are never obscured by the fixed bar.

#### 3. Hydration Mismatch Resolution
- Fixed client hydration warnings caused by browser extensions or responsive devtools injecting translate styles into fixed bottom elements prior to hydration.
- Implemented a client mount guard and suppressed hydration warnings on the navigation element to guarantee clean rendering across all browsers.

#### 4. Service Health Localization
- Replaced hardcoded English status strings (`Degraded`, `Active`, `Online`, `Offline`, `Down`) with dynamic bilingual localization tokens.
- Standardized Vietnamese translations to pure Vietnamese (`Hiệu năng giảm` instead of mixed English terms).

#### 5. User Profile Dropdown Cleanup
- Removed redundant Dashboard navigation link from the user avatar dropdown menu.
- Removed the static Admin role badge entry from the dropdown action list.
- Cleaned up unused imports and icons to streamline the user menu interface.