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/components/modules/module-kpi-cards.tsx

@@ -1,5 +1,7 @@
-import { KpiSparklineCard, type KpiSparklineMetric } from '@/components/patterns/kpi-sparkline-card'
-import { kpiGridClassName } from '@/lib/ui-surface'
+import { Clock, Gauge, Globe, Tags } from 'lucide-react'
+
+import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { Badge } from '@/components/reui/badge'
 import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
 import {
   communityLabel,
@@ -7,7 +9,7 @@ import {
   moduleDohProfileIds,
 } from '@/lib/modules/helpers'
 import { dohPolicyRu } from '@/lib/ui-labels'
-import { SectionCardsSkeleton } from '@/components/skeletons'
+import { KpiStatGridSkeleton } from '@/components/skeletons'
 import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '@/types/api'
 
 interface ModuleKpiCardsProps {
@@ -18,12 +20,6 @@ interface ModuleKpiCardsProps {
   loading?: boolean
 }
 
-function syntheticSparkline(seed: number): number[] {
-  return Array.from({ length: 9 }, (_, i) =>
-    Math.round(seed * (0.8 + (i / 9) * 0.2 + Math.sin(i) * 0.05)),
-  )
-}
-
 export function ModuleKpiCards({
   mod,
   communities,
@@ -32,67 +28,65 @@ export function ModuleKpiCards({
   loading = false,
 }: ModuleKpiCardsProps) {
   if (loading || !mod) {
-    return <SectionCardsSkeleton count={4} />
+    return <KpiStatGridSkeleton count={4} />
   }
 
   const asPrefixTotal = asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
   const dohIds = moduleDohProfileIds(mod)
 
-  const metrics: KpiSparklineMetric[] = [
+  const items: KpiStatItem[] = [
     {
       id: 'priority',
-      title: 'Приоритет',
-      label: 'Порядок в ревизии',
+      icon: <Gauge aria-hidden />,
+      iconClassName: 'text-info',
       value: String(mod.priority ?? 0),
-      delta: mod.enabled !== false ? 'активен' : 'выключен',
-      deltaVariant: mod.enabled !== false ? 'success-light' : 'outline',
-      detail: mod.type,
-      tone: 'info',
-      sparkline: syntheticSparkline(mod.priority ?? 1),
+      label: 'Приоритет',
+      footer: (
+        <Badge variant={mod.enabled !== false ? 'success-light' : 'outline'} size="sm">
+          {mod.enabled !== false ? 'активен' : 'выключен'} · {mod.type}
+        </Badge>
+      ),
     },
     {
       id: 'interval',
-      title: 'Интервал',
-      label: 'Обновление',
+      icon: <Clock aria-hidden />,
+      iconClassName: 'text-warning',
       value: moduleIntervalLabel(mod),
-      delta: formatDateTime(mod.last_refreshed_at) || 'никогда',
-      deltaVariant: 'primary-light',
-      detail: 'last refresh',
-      tone: 'warning',
-      sparkline: syntheticSparkline(12),
+      label: 'Интервал обновления',
+      footer: (
+        <Badge variant="primary-light" size="sm">
+          {formatDateTime(mod.last_refreshed_at) || 'никогда'}
+        </Badge>
+      ),
     },
     {
       id: 'prefixes',
-      title: 'Префиксы',
-      label: mod.type === 'AS_PREFIXES' ? 'AS entries' : 'Записи',
+      icon: <Tags aria-hidden />,
+      iconClassName: 'text-success',
       value: mod.type === 'AS_PREFIXES' ? String(asPrefixTotal) : String(asEntries.length),
-      delta: `${asEntries.length} AS`,
-      deltaVariant: 'success-light',
-      detail: 'в модуле',
-      tone: 'success',
-      sparkline: syntheticSparkline(asPrefixTotal || asEntries.length || 1),
+      label: mod.type === 'AS_PREFIXES' ? 'Префиксы AS' : 'Записи модуля',
+      footer: (
+        <Badge variant="success-light" size="sm">
+          {asEntries.length} AS · в модуле
+        </Badge>
+      ),
     },
     {
       id: 'policy',
-      title: 'DoH / BGP',
-      label: communityLabel(mod.default_community_id, communities),
+      icon: <Globe aria-hidden />,
+      iconClassName: 'text-primary',
       value: dohIds.length > 0 ? String(dohIds.length) : '—',
-      delta: dohPolicyRu(mod.doh_resolver_policy),
-      deltaVariant: 'info-light',
-      detail:
-        dohIds.length > 0
-          ? dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join(', ')
-          : 'без DoH',
-      tone: 'info',
-      sparkline: syntheticSparkline(dohIds.length || 2),
+      label: communityLabel(mod.default_community_id, communities),
+      footer: (
+        <Badge variant="info-light" size="sm">
+          {dohPolicyRu(mod.doh_resolver_policy)}
+          {dohIds.length > 0
+            ? ` · ${dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join(', ')}`
+            : ' · без DoH'}
+        </Badge>
+      ),
     },
   ]
 
-  return (
-    <section aria-label="KPI модуля" className={kpiGridClassName}>
-      {metrics.map((metric) => (
-        <KpiSparklineCard key={metric.id} metric={metric} />
-      ))}
-    </section>
-  )
+  return <KpiStatGrid items={items} aria-label="KPI модуля" />
 }