From 538daea0f146aed02f45e677417a7ee6baaef4f4 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 9 Jul 2026 18:49:55 +0700
Subject: [PATCH] refactor: update dashboard components for improved layout and
 functionality

Refactored the DashboardQuickLinks component to utilize the new DashboardQuickLinkCard for better organization and presentation. Enhanced the DashboardComponent to integrate quick links within a DashboardFramePanel, improving the overall user experience. Updated the metric-tile component import path for consistency. Removed unnecessary imports from the separator component to streamline the codebase.
---
 .../card-17/components/card-dot-field.tsx     | 99 +++++++++++++++++++
 .../blocks/card-17/components/card-grid.tsx   | 17 ++++
 .../blocks/card-17/components/card-item.tsx   | 44 +++++++++
 .../blocks/card-17/components/data.tsx        | 53 ++++++++++
 .../src/components/blocks/card-17/page.tsx    |  9 ++
 .../dashboard-5/components/metric-tile.tsx    |  2 +-
 .../components/dashboard/card-dot-field.tsx   | 87 ++++++++++++++++
 .../dashboard/dashboard-quick-link-card.tsx   | 70 +++++++++++++
 .../dashboard/dashboard-quick-links.tsx       | 41 +++-----
 apps/web/src/routes/_auth/dashboard.tsx       | 12 +--
 apps/web/tsconfig.tsbuildinfo                 |  2 +-
 packages/ui/src/components/separator.tsx      |  2 -
 12 files changed, 401 insertions(+), 37 deletions(-)
 create mode 100644 apps/web/src/components/blocks/card-17/components/card-dot-field.tsx
 create mode 100644 apps/web/src/components/blocks/card-17/components/card-grid.tsx
 create mode 100644 apps/web/src/components/blocks/card-17/components/card-item.tsx
 create mode 100644 apps/web/src/components/blocks/card-17/components/data.tsx
 create mode 100644 apps/web/src/components/blocks/card-17/page.tsx
 create mode 100644 apps/web/src/components/dashboard/card-dot-field.tsx
 create mode 100644 apps/web/src/components/dashboard/dashboard-quick-link-card.tsx

diff --git a/apps/web/src/components/blocks/card-17/components/card-dot-field.tsx b/apps/web/src/components/blocks/card-17/components/card-dot-field.tsx
new file mode 100644
index 0000000..6fda68a
--- /dev/null
+++ b/apps/web/src/components/blocks/card-17/components/card-dot-field.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+// Deterministic per-dot value so the field reads as noise, not a flat grid.
+function grain(i: number, j: number) {
+  const n = Math.sin(i * 127.1 + j * 311.7) * 43758.5453
+  return n - Math.floor(n)
+}
+
+/**
+ * Static dot field adapted from auth-3's WaveDots backdrop with the twinkle
+ * animation removed: a dense grid of dots at a fixed per-dot brightness,
+ * painted once and again on resize or theme change. The dot color resolves
+ * from the canvas `color` token so it stays neutral in light and dark.
+ * customize: GAP (density), DOT (size), PEAK (max brightness).
+ */
+export function CardDotField({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const GAP = 3 // dot spacing in px (tight grid, still distinct dots)
+    const DOT = 1.5 // dot side in px
+    const BASE = 0.05 // dim end of a dot
+    const PEAK = 0.32 // bright end of a dot (kept subtle for a card surface)
+
+    const draw = () => {
+      const rect = canvas.getBoundingClientRect()
+      if (!rect.width || !rect.height) return
+
+      // Resetting width clears the canvas and restores the identity transform,
+      // so the color probe below reads a raw device pixel.
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width = Math.round(rect.width * dpr)
+      canvas.height = Math.round(rect.height * dpr)
+
+      // Resolve the token to concrete sRGB by painting + reading it back, so
+      // oklch never casts a color and dark mode recolors on theme change.
+      ctx.fillStyle = getComputedStyle(canvas).color || "rgb(115,115,115)"
+      ctx.fillRect(0, 0, 1, 1)
+      const px = ctx.getImageData(0, 0, 1, 1).data
+      const color = `rgb(${px[0]}, ${px[1]}, ${px[2]})`
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, rect.width, rect.height)
+      ctx.fillStyle = color
+
+      const cols = Math.ceil(rect.width / GAP) + 1
+      const rows = Math.ceil(rect.height / GAP) + 1
+      for (let i = 0; i < cols; i++) {
+        const x = i * GAP
+        for (let j = 0; j < rows; j++) {
+          const q = grain(i, j)
+          const amp = 0.7 + 0.6 * grain(j * 2 + 1, i * 2 + 1)
+          let a = (BASE + (PEAK - BASE) * q * q) * amp
+          if (a > 1) a = 1
+          ctx.globalAlpha = a
+          ctx.fillRect(x, j * GAP, DOT, DOT)
+        }
+      }
+      ctx.globalAlpha = 1
+    }
+
+    draw()
+
+    const resizeObserver = new ResizeObserver(() => draw())
+    resizeObserver.observe(canvas)
+
+    // Repaint when the theme class toggles so the resolved color stays correct.
+    const themeObserver = new MutationObserver(() => draw())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"],
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+      themeObserver.disconnect()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full",
+        className
+      )}
+    />
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/card-17/components/card-grid.tsx b/apps/web/src/components/blocks/card-17/components/card-grid.tsx
new file mode 100644
index 0000000..6190e76
--- /dev/null
+++ b/apps/web/src/components/blocks/card-17/components/card-grid.tsx
@@ -0,0 +1,17 @@
+import { Frame } from "@/components/reui/frame"
+
+import { CardItem } from "./card-item"
+import { CARDS } from "./data"
+
+export function CardGrid() {
+  return (
+    <Frame className="@container w-full">
+      {/* Grid */}
+      <div className="grid gap-1 @2xl:grid-cols-2">
+        {CARDS.map((card) => (
+          <CardItem key={card.title} card={card} />
+        ))}
+      </div>
+    </Frame>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/card-17/components/card-item.tsx b/apps/web/src/components/blocks/card-17/components/card-item.tsx
new file mode 100644
index 0000000..01fe6f1
--- /dev/null
+++ b/apps/web/src/components/blocks/card-17/components/card-item.tsx
@@ -0,0 +1,44 @@
+import { FramePanel } from "@/components/reui/frame"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { CardDotField } from "./card-dot-field"
+import { ICard } from "./data"
+import { ChevronRightIcon } from "lucide-react"
+
+export function CardItem({ card }: { card: ICard }) {
+  return (
+    <FramePanel className="isolate">
+      {/* Card */}
+      <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
+      <div className="relative z-10 space-y-7.5">
+        <Item
+          className={cn(
+            "p-0",
+            "border-background flex size-11 items-center justify-center border-2 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5 [&_svg]:text-white",
+            card.iconBg
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {card.icon}
+          </ItemMedia>
+        </Item>
+        <div className="flex flex-col gap-3">
+          <span className="block text-sm leading-tight font-medium">
+            {card.title}
+          </span>
+          <p className="text-muted-foreground text-xs leading-relaxed">
+            {card.description}
+          </p>
+          <a
+            href="#"
+            className="text-primay inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline"
+          >
+            {card.link}
+            <ChevronRightIcon aria-hidden="true" className="size-2.5 shrink-0" />
+          </a>
+        </div>
+      </div>
+    </FramePanel>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/card-17/components/data.tsx b/apps/web/src/components/blocks/card-17/components/data.tsx
new file mode 100644
index 0000000..476ceaf
--- /dev/null
+++ b/apps/web/src/components/blocks/card-17/components/data.tsx
@@ -0,0 +1,53 @@
+import { type ReactNode } from "react"
+import { ShoppingBagIcon, TrendingUp, BarChart3Icon, Settings2Icon } from "lucide-react"
+
+export interface ICard {
+  title: string
+  description: string
+  link: string
+  icon: ReactNode
+  iconBg: string
+}
+
+export const CARDS: ICard[] = [
+  {
+    title: "Recent Orders Overview",
+    description:
+      "Track and review all recent purchases, updates, and status changes in one place.",
+    link: "View Orders",
+    icon: (
+      <ShoppingBagIcon aria-hidden="true" />
+    ),
+    iconBg: "bg-green-600",
+  },
+  {
+    title: "Active Opportunities Pipeline",
+    description:
+      "Monitor ongoing deals, check potential revenue, and update opportunity stages.",
+    link: "Open Pipeline",
+    icon: (
+      <TrendingUp aria-hidden="true" />
+    ),
+    iconBg: "bg-indigo-600",
+  },
+  {
+    title: "Performance & Sales Reports",
+    description:
+      "Analyze weekly and monthly reports to gain deeper insights into performance trends.",
+    link: "View Reports",
+    icon: (
+      <BarChart3Icon aria-hidden="true" />
+    ),
+    iconBg: "bg-sky-600",
+  },
+  {
+    title: "Integration Settings & Sync",
+    description:
+      "Manage connections with third-party tools and ensure data stays in sync.",
+    link: "Manage Integrations",
+    icon: (
+      <Settings2Icon aria-hidden="true" />
+    ),
+    iconBg: "bg-orange-600",
+  },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/card-17/page.tsx b/apps/web/src/components/blocks/card-17/page.tsx
new file mode 100644
index 0000000..6ffdc43
--- /dev/null
+++ b/apps/web/src/components/blocks/card-17/page.tsx
@@ -0,0 +1,9 @@
+import { CardGrid } from "./components/card-grid"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full max-w-4xl items-center justify-center p-8">
+      <CardGrid />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/dashboard-5/components/metric-tile.tsx b/apps/web/src/components/blocks/dashboard-5/components/metric-tile.tsx
index af9ae40..81cc71c 100644
--- a/apps/web/src/components/blocks/dashboard-5/components/metric-tile.tsx
+++ b/apps/web/src/components/blocks/dashboard-5/components/metric-tile.tsx
@@ -2,7 +2,7 @@ import { Badge } from "@/components/reui/badge"
 
 import { Card, CardContent } from "@evobgp/ui/components/card"
 
-import { CardDotField } from "./card-dot-field"
+import { CardDotField } from "@/components/dashboard/card-dot-field"
 import { type MetricCard } from "./data"
 import { PanelCorners } from "./panel-heading"
 import { toneStyles } from "./tone-styles"
diff --git a/apps/web/src/components/dashboard/card-dot-field.tsx b/apps/web/src/components/dashboard/card-dot-field.tsx
new file mode 100644
index 0000000..0c9e255
--- /dev/null
+++ b/apps/web/src/components/dashboard/card-dot-field.tsx
@@ -0,0 +1,87 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+
+function grain(i: number, j: number) {
+  const n = Math.sin(i * 127.1 + j * 311.7) * 43758.5453
+  return n - Math.floor(n)
+}
+
+/**
+ * Static dot field adapted from REUI card-17: theme-aware canvas dots,
+ * repainted on resize and theme change.
+ */
+export function CardDotField({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const GAP = 3
+    const DOT = 1.5
+    const BASE = 0.05
+    const PEAK = 0.32
+
+    const draw = () => {
+      const rect = canvas.getBoundingClientRect()
+      if (!rect.width || !rect.height) return
+
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width = Math.round(rect.width * dpr)
+      canvas.height = Math.round(rect.height * dpr)
+
+      ctx.fillStyle = getComputedStyle(canvas).color || 'rgb(115,115,115)'
+      ctx.fillRect(0, 0, 1, 1)
+      const px = ctx.getImageData(0, 0, 1, 1).data
+      const color = `rgb(${px[0]}, ${px[1]}, ${px[2]})`
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, rect.width, rect.height)
+      ctx.fillStyle = color
+
+      const cols = Math.ceil(rect.width / GAP) + 1
+      const rows = Math.ceil(rect.height / GAP) + 1
+      for (let i = 0; i < cols; i++) {
+        const x = i * GAP
+        for (let j = 0; j < rows; j++) {
+          const q = grain(i, j)
+          const amp = 0.7 + 0.6 * grain(j * 2 + 1, i * 2 + 1)
+          let a = (BASE + (PEAK - BASE) * q * q) * amp
+          if (a > 1) a = 1
+          ctx.globalAlpha = a
+          ctx.fillRect(x, j * GAP, DOT, DOT)
+        }
+      }
+      ctx.globalAlpha = 1
+    }
+
+    draw()
+
+    const resizeObserver = new ResizeObserver(() => draw())
+    resizeObserver.observe(canvas)
+
+    const themeObserver = new MutationObserver(() => draw())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+      themeObserver.disconnect()
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className={cn('pointer-events-none absolute inset-0 h-full w-full', className)}
+    />
+  )
+}
diff --git a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
new file mode 100644
index 0000000..1d4149f
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
@@ -0,0 +1,70 @@
+import { Link } from '@tanstack/react-router'
+import { ChevronRight } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { Frame, FramePanel } from '@/components/reui/frame'
+import { CardDotField } from '@/components/dashboard/card-dot-field'
+import { cn } from '@evobgp/ui/lib/utils'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+
+export type QuickLinkCardProps = {
+  icon: ReactNode
+  label: string
+  description: string
+  to: string
+  search?: Record<string, string>
+  iconClass: string
+}
+
+export function DashboardQuickLinkCard({
+  icon,
+  label,
+  description,
+  to,
+  search,
+  iconClass,
+}: QuickLinkCardProps) {
+  return (
+    <Frame className="h-full">
+      <Link
+        to={to}
+        search={search}
+        className="group block h-full rounded-[inherit] focus-visible:outline-none"
+        aria-label={`${label}: ${description}`}
+      >
+        <FramePanel
+          className={cn(
+            'relative isolate h-full overflow-hidden transition-colors',
+            'hover:border-foreground/20',
+            'group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background',
+          )}
+        >
+          <CardDotField className="text-muted-foreground [mask-image:linear-gradient(to_bottom_left,black,transparent_60%)]" />
+          <div className="relative z-10 flex h-full flex-col gap-7.5">
+            <Item
+              className={cn(
+                'border-background flex size-11 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5',
+                iconClass,
+              )}
+            >
+              <ItemMedia variant="icon" className="size-auto">
+                {icon}
+              </ItemMedia>
+            </Item>
+            <div className="mt-auto flex flex-col gap-3">
+              <span className="text-foreground block text-sm leading-tight font-medium">{label}</span>
+              <p className="text-muted-foreground text-xs leading-relaxed">{description}</p>
+              <span className="text-primary inline-flex items-center gap-1 text-xs font-medium underline-offset-2 group-hover:underline">
+                Перейти
+                <ChevronRight
+                  aria-hidden
+                  className="size-2.5 shrink-0 transition-transform group-hover:translate-x-0.5"
+                />
+              </span>
+            </div>
+          </div>
+        </FramePanel>
+      </Link>
+    </Frame>
+  )
+}
diff --git a/apps/web/src/components/dashboard/dashboard-quick-links.tsx b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
index 9c649bc..8ddc7bc 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-links.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
@@ -1,12 +1,7 @@
-import { Link } from '@tanstack/react-router'
 import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
 import type { ReactNode } from 'react'
 
-import {
-  Frame,
-  FrameHeader,
-  FramePanel,
-} from '@/components/reui/frame'
+import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
 
 type QuickLink = {
   icon: ReactNode
@@ -14,6 +9,7 @@ type QuickLink = {
   description: string
   to: string
   search?: Record<string, string>
+  iconClass: string
 }
 
 const LINKS: QuickLink[] = [
@@ -22,12 +18,14 @@ const LINKS: QuickLink[] = [
     label: 'Создать модуль',
     description: 'Новый модуль маршрутизации и источники префиксов.',
     to: '/modules/new',
+    iconClass: 'bg-primary text-primary-foreground [&_svg]:text-primary-foreground',
   },
   {
     icon: <Tags aria-hidden />,
     label: 'BGP-сообщества',
     description: 'Справочник communities для политик экспорта.',
     to: '/directories',
+    iconClass: 'bg-info text-info-foreground [&_svg]:text-info-foreground',
   },
   {
     icon: <Network aria-hidden />,
@@ -35,6 +33,7 @@ const LINKS: QuickLink[] = [
     description: 'Обзор пиров, спикеров и live-сессий BGP.',
     to: '/network',
     search: { tab: 'overview' },
+    iconClass: 'bg-success text-success-foreground [&_svg]:text-success-foreground',
   },
   {
     icon: <Share2 aria-hidden />,
@@ -42,6 +41,7 @@ const LINKS: QuickLink[] = [
     description: 'Настройка BGP-соседа и шаблонов сессии.',
     to: '/network',
     search: { tab: 'peers' },
+    iconClass: 'bg-warning text-warning-foreground [&_svg]:text-warning-foreground',
   },
   {
     icon: <Play aria-hidden />,
@@ -49,6 +49,7 @@ const LINKS: QuickLink[] = [
     description: 'Ревизии конфигурации и применение на нодах.',
     to: '/operations',
     search: { tab: 'revisions' },
+    iconClass: 'bg-focus text-focus-foreground [&_svg]:text-focus-foreground',
   },
   {
     icon: <Gauge aria-hidden />,
@@ -56,32 +57,18 @@ const LINKS: QuickLink[] = [
     description: 'Состояние системы, BIRD и PostgreSQL.',
     to: '/monitoring',
     search: { tab: 'system' },
+    iconClass: 'bg-destructive text-destructive-foreground [&_svg]:text-destructive-foreground',
   },
 ]
 
 export function DashboardQuickLinks() {
   return (
-    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-      {LINKS.map((link) => (
-        <Frame key={link.label} spacing="sm">
-          <FrameHeader className="px-1! py-1!">
-            <div className="[&_svg]:text-muted-foreground flex items-center gap-2 [&_svg]:size-4">
-              {link.icon}
-              <span className="text-foreground text-sm font-medium">{link.label}</span>
-            </div>
-          </FrameHeader>
-          <FramePanel className="space-y-3.5">
-            <p className="text-muted-foreground text-xs leading-relaxed">{link.description}</p>
-            <Link
-              to={link.to}
-              search={link.search}
-              className="text-primary inline-flex items-center gap-1 text-xs font-medium underline-offset-2 hover:underline"
-            >
-              Перейти →
-            </Link>
-          </FramePanel>
-        </Frame>
-      ))}
+    <div className="@container w-full">
+      <div className="grid gap-3 sm:grid-cols-2 @2xl:grid-cols-3">
+        {LINKS.map((link) => (
+          <DashboardQuickLinkCard key={link.label} {...link} />
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/apps/web/src/routes/_auth/dashboard.tsx b/apps/web/src/routes/_auth/dashboard.tsx
index cc9fccf..b517788 100644
--- a/apps/web/src/routes/_auth/dashboard.tsx
+++ b/apps/web/src/routes/_auth/dashboard.tsx
@@ -143,13 +143,13 @@ function DashboardComponent() {
         </DashboardFramePanel>
       </div>
 
-      <section className="space-y-3">
-        <div className="space-y-0.5">
-          <h2 className="text-sm font-semibold">Быстрые действия</h2>
-          <p className="text-muted-foreground text-sm">Частые переходы к настройке и деплою</p>
-        </div>
+      <DashboardFramePanel
+        title="Быстрые действия"
+        description="Частые переходы к настройке и деплою"
+        contentClassName="p-4"
+      >
         <DashboardQuickLinks />
-      </section>
+      </DashboardFramePanel>
     </div>
   )
 }
diff --git a/apps/web/tsconfig.tsbuildinfo b/apps/web/tsconfig.tsbuildinfo
index 5a13533..14200e6 100644
--- a/apps/web/tsconfig.tsbuildinfo
+++ b/apps/web/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/drawer-layout.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/analytics/operations-analytics-card.tsx","./src/components/dashboard/dashboard-activity-timeline.tsx","./src/components/dashboard/dashboard-frame-panel.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-modules-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-actions.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/firewall/firewall-clients-grid.tsx","./src/components/firewall/firewall-rule-create-dialog.tsx","./src/components/firewall/firewall-rules-grid.tsx","./src/components/layout/app-shell.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/number-field.tsx","./src/components/reui/timeline.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/settings-kv-grid.tsx","./src/hooks/use-client-data-grid.ts","./src/lib/api-client.ts","./src/lib/data-grid-defaults.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/firewall.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/firewall.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/drawer-layout.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/panel-card.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/analytics/operations-analytics-card.tsx","./src/components/dashboard/card-dot-field.tsx","./src/components/dashboard/dashboard-activity-timeline.tsx","./src/components/dashboard/dashboard-frame-panel.tsx","./src/components/dashboard/dashboard-kpi-grid.tsx","./src/components/dashboard/dashboard-modules-grid.tsx","./src/components/dashboard/dashboard-network-health.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-operations-breakdown.tsx","./src/components/dashboard/dashboard-quick-link-card.tsx","./src/components/dashboard/dashboard-quick-links.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/firewall/firewall-clients-grid.tsx","./src/components/firewall/firewall-rule-create-dialog.tsx","./src/components/firewall/firewall-rules-grid.tsx","./src/components/layout/app-shell.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/number-field.tsx","./src/components/reui/timeline.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/settings-kv-grid.tsx","./src/hooks/use-client-data-grid.ts","./src/lib/api-client.ts","./src/lib/data-grid-defaults.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/firewall.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/firewall.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
index f77b441..13e3b9a 100644
--- a/packages/ui/src/components/separator.tsx
+++ b/packages/ui/src/components/separator.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
 import { cn } from "@evobgp/ui/lib/utils"