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/analytics/analytics-kpi-row.tsx

@@ -1,5 +1,5 @@
-import { Minus, TrendingDown, TrendingUp } from 'lucide-react'
-
+import { KpiStatGrid, type KpiStatItem } from '@/components/kpi-stat-grid'
+import { Badge } from '@/components/reui/badge'
 import { cn } from '@evobgp/ui/lib/utils'
 
 export type AnalyticsKpiItem = {
@@ -12,39 +12,42 @@ export type AnalyticsKpiItem = {
   }
 }
 
-const TONE_CLASS = {
-  success: 'text-success',
-  warning: 'text-warning',
-  destructive: 'text-destructive',
-  muted: 'text-muted-foreground',
-} as const
-
-function DeltaIcon({ direction }: { direction: AnalyticsKpiItem['delta'] extends infer D ? D extends { direction: infer Dir } ? Dir : never : never }) {
-  if (direction === 'up') return <TrendingUp className="size-3" />
-  if (direction === 'down') return <TrendingDown className="size-3" />
-  return <Minus className="size-3" />
+function deltaBadgeVariant(
+  tone?: 'success' | 'warning' | 'destructive' | 'muted',
+): 'success-light' | 'warning-light' | 'destructive-light' | 'outline' {
+  if (tone === 'success') return 'success-light'
+  if (tone === 'warning') return 'warning-light'
+  if (tone === 'destructive') return 'destructive-light'
+  return 'outline'
 }
 
-export function AnalyticsKpiRow({ items, className }: { items: AnalyticsKpiItem[]; className?: string }) {
+function toKpiItem(item: AnalyticsKpiItem): KpiStatItem {
+  return {
+    id: item.label,
+    value: item.value,
+    label: item.label,
+    footer: item.delta ? (
+      <Badge variant={deltaBadgeVariant(item.delta.tone)} size="sm">
+        {item.delta.label}
+      </Badge>
+    ) : undefined,
+  }
+}
+
+/** Compact KPI row inside analytics panels (stats-12 embedded tiles). */
+export function AnalyticsKpiRow({
+  items,
+  className,
+}: {
+  items: AnalyticsKpiItem[]
+  className?: string
+}) {
   return (
-    <div className={cn('grid gap-4 sm:grid-cols-3', className)}>
-      {items.map((item) => (
-        <div key={item.label} className="min-w-0 space-y-1">
-          <p className="text-xs text-muted-foreground">{item.label}</p>
-          <p className="text-2xl font-semibold tracking-tight tabular-nums">{item.value}</p>
-          {item.delta ? (
-            <p
-              className={cn(
-                'flex items-center gap-1 text-xs',
-                TONE_CLASS[item.delta.tone ?? 'muted'],
-              )}
-            >
-              <DeltaIcon direction={item.delta.direction} />
-              {item.delta.label}
-            </p>
-          ) : null}
-        </div>
-      ))}
-    </div>
+    <KpiStatGrid
+      items={items.map(toKpiItem)}
+      embedded
+      className={cn(className)}
+      aria-label="Показатели"
+    />
   )
 }