refactor: enhance settings and auth components for improved navigation and user feedback

Updated the Settings and Auth components to include better navigation handling by adding search parameters for tab selection. Enhanced the Access component to utilize badges for status indicators, improving visual clarity. Refactored the Schedule component to streamline job status display with badges, ensuring a more cohesive user experience. Additionally, integrated client directives in UI components for better performance.

apps/web/src/lib/ui-surface.ts

@@ -1,27 +1,26 @@
 /**
  * EvoBGP UI surface contract (ReUI Pro).
  *
- * Primary surface: **Card** via `PanelCard` / `DataGridCard`.
- * All route-level panels, KPI tiles, charts and data grids use shadcn Card —
- * not ReUI Frame — for visual consistency across screens.
+ * KPI tiles: **stats-12** pattern via `KpiStatGrid` / `SectionCards` (Frame + icon tile + badge).
+ * Panels and data grids: shadcn Card via `PanelCard` / `DataGridCard`.
  *
- * ReUI Frame blocks from registry are adapted into Card composition when installed.
- *
- * @see https://reui.io/blocks — card category
+ * @see https://reui.io/blocks — stats-12, dashboard-1
  * @see `.agents/skills/shadcn-react/SKILL.md`
  */
 export const UI_SURFACE = 'card' as const
 
-/** Shared padding for KPI / metric tiles inside PanelCard. */
-export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
+/** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
+export const kpiStatGridClassName = '@container w-full'
 
-/** Compact 6-tile KPI row on dashboard overview. */
-export const dashboardKpiGridClassName =
-  'grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6'
+/** @deprecated Use kpiStatGridClassName — kept for legacy imports. */
+export const dashboardKpiGridClassName = kpiStatGridClassName
 
-/** Grid for dashboard-5 style KPI sparkline row (4 columns at xl). */
+/** @deprecated Sparkline KPI row replaced by stats-12 grid. */
 export const kpiGridClassName =
-  'grid grid-cols-1 gap-4 @3xl:grid-cols-2 @6xl:grid-cols-4'
+  'grid grid-cols-1 gap-5 @3xl:grid-cols-2 @6xl:grid-cols-4'
+
+/** @deprecated */
+export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
 
 /** Two-column chart panel row (monitoring / network overview). */
 export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'