+ 0 ? `${net.peersMismatch} расхождений` : 'в норме'}
/>
- {loading ? (
-
)
}
diff --git a/apps/web/src/components/blocks/app-shell-7/components/app-header.tsx b/apps/web/src/components/blocks/app-shell-7/components/app-header.tsx
new file mode 100644
index 0000000..3d2d858
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/app-header.tsx
@@ -0,0 +1,220 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbList,
+ BreadcrumbSeparator,
+} from "@evobgp/ui/components/breadcrumb"
+import { Button } from "@evobgp/ui/components/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { SidebarTrigger } from "@evobgp/ui/components/sidebar"
+import { APPS, ENVIRONMENTS, WORKSPACES } from "./data"
+import { Logo } from "./logo"
+import { SystemStats } from "./system-stats"
+import { ChevronsUpDownIcon, CheckIcon, PlusIcon } from "lucide-react"
+
+// ── Org Switcher ──
+
+function OrgSwitcher() {
+ const [activeOrg, setActiveOrg] = useState(WORKSPACES[0])
+
+ return (
+
- Загрузка…
-
- ) : (
-
+ {ws.name}
+
+ {ws.tier}
+
+
+ {activeOrg.id === ws.id && (
+
+ )}
+
+ {/* Mobile sidebar trigger */}
+
+
+
+
+
+ /
+
+
+
+
+ /
+
+
+
+
+
+
+ {/* Right side */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {THEMES.map(({ value, label, icon }) => {
+ const isActive = currentTheme === value
+ return (
+
+ )
+ })}
+
+ )
+}
+
+// ── Nav User ──
+
+export function NavUser() {
+ const { isMobile } = useSidebar()
+
+ return (
+
+ {USER.name}
+
+ {USER.email}
+
+
+
+
+
+
+
+ {USER.name}
+
+
+ {USER.email}
+
+
+
+
+
+
+ )
+}
+
+// ── Sidebar News ──
+
+export function SidebarNews({ articles }: { articles: NewsArticle[] }) {
+ const [dismissedIds, setDismissedIds] = useState
+
+
+
+ {title}
+
+
+ + {summary} +
+
+ {image && (
+ 
+ )}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx b/apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx
new file mode 100644
index 0000000..416f8dd
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/sidebar-rail-toggle.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { useSidebar } from "@evobgp/ui/components/sidebar"
+
+export function SidebarRailToggle() {
+ const { state, toggleSidebar } = useSidebar()
+ const isExpanded = state === "expanded"
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx b/apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx
new file mode 100644
index 0000000..b9ccb3b
--- /dev/null
+++ b/apps/web/src/components/blocks/app-shell-7/components/system-stats.tsx
@@ -0,0 +1,441 @@
+import {
+ useCallback,
+ useEffect,
+ useId,
+ useRef,
+ useState,
+ type CSSProperties,
+} from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Badge } from "@evobgp/ui/components/badge"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { Progress } from "@evobgp/ui/components/progress"
+import {
+ AGENTS,
+ RESOURCE_METRICS,
+ type Agent,
+ type ResourceMetric,
+} from "./data"
+import { ActivityIcon, ChevronRightIcon } from "lucide-react"
+
+const HISTORY_LENGTH = 20
+const UPDATE_INTERVAL_MS = 1000
+const SPIKE_COLOR = "var(--color-red-500)"
+const STATS_RANDOM_SEED = 1337
+const DEMO_REFERENCE_DATE = new Date("2026-06-12T09:24:00")
+
+const TIME_FORMATTER = new Intl.DateTimeFormat("en-US", {
+ hour: "2-digit",
+ minute: "2-digit",
+ second: "2-digit",
+})
+
+// Seeded PRNG (mulberry32) keeps the demo metrics deterministic across
+// renders and reloads while preserving the organic feel of live jitter.
+function createSeededRandom(seed: number) {
+ let state = seed
+
+ return function nextRandom() {
+ state = (state + 0x6d2b79f5) | 0
+ let t = Math.imul(state ^ (state >>> 15), state | 1)
+ t = (t + Math.imul(t ^ (t >>> 7), t | 61)) ^ t
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+ }
+}
+
+const nextRandom = createSeededRandom(STATS_RANDOM_SEED)
+
+function randomInRange(min: number, max: number) {
+ return Math.round((min + nextRandom() * (max - min)) * 10) / 10
+}
+
+function seedHistory(min: number, max: number): number[] {
+ return Array.from({ length: HISTORY_LENGTH }, () => randomInRange(min, max))
+}
+
+function smoothPath(pts: { x: number; y: number }[]): string {
+ if (pts.length === 0) return ""
+ if (pts.length === 1) return `M ${pts[0].x} ${pts[0].y}`
+ let d = `M ${pts[0].x} ${pts[0].y}`
+ for (let i = 1; i < pts.length; i++) {
+ const prev = pts[i - 1]
+ const curr = pts[i]
+ const cx = (prev.x + curr.x) / 2
+ d += ` C ${cx} ${prev.y}, ${cx} ${curr.y}, ${curr.x} ${curr.y}`
+ }
+ return d
+}
+
+// ── Sparkline Area (full-width responsive) ──
+
+function SparklineArea({
+ data,
+ max,
+ color,
+ spikeThreshold,
+ height = 36,
+}: {
+ data: number[]
+ max: number
+ color: string
+ spikeThreshold: number
+ height?: number
+}) {
+ const gradientId = useId()
+ const W = 100
+ const H = height
+ const currentValue = data[data.length - 1] ?? 0
+ const hasSpike = currentValue > spikeThreshold
+ const activeColor = hasSpike ? SPIKE_COLOR : color
+
+ const pts = data.map((value, i) => ({
+ x: data.length < 2 ? 0 : (i / (data.length - 1)) * W,
+ y: H - (Math.min(value, max) / max) * (H - 2),
+ }))
+
+ const linePath = smoothPath(pts)
+ const areaPath = pts.length > 1 ? `${linePath} L ${W} ${H} L 0 ${H} Z` : ""
+
+ return (
+
+ )
+}
+
+// ── Mini Sparkline (for agent rows) ──
+
+function MiniSparkline({ data, color }: { data: number[]; color: string }) {
+ const gradientId = useId()
+ const W = 40
+ const H = 14
+ const dataMax = Math.max(...data, 1)
+
+ const pts = data.map((value, i) => ({
+ x: data.length < 2 ? 0 : (i / (data.length - 1)) * W,
+ y: H - (value / dataMax) * (H - 1),
+ }))
+
+ const linePath = smoothPath(pts)
+ const areaPath = pts.length > 1 ? `${linePath} L ${W} ${H} L 0 ${H} Z` : ""
+
+ return (
+
+ )
+}
+
+// ── Resource Card (grid cell) ──
+
+function ResourceCard({
+ metric,
+ history,
+}: {
+ metric: ResourceMetric
+ history: number[]
+}) {
+ const current = history[history.length - 1] ?? 0
+ const max = metric.id === "memory" ? 16 : 100
+ const isHigh = current > metric.spikeThreshold
+
+ return (
+
+ {cards.toReversed().map(({ href, title, summary, image }, idx) => (
+
+ 3
+ ? [
+ "opacity-0 sm:group-hover:translate-y-(--y) sm:group-hover:opacity-(--opacity)",
+ "sm:group-has-[*[data-dragging=true]]:translate-y-(--y) sm:group-has-[*[data-dragging=true]]:opacity-(--opacity)",
+ ]
+ : "translate-y-(--y) opacity-(--opacity)"
+ )}
+ style={
+ {
+ "--y": `-${(cardCount - (idx + 1)) * OFFSET_FACTOR}%`,
+ "--scale": 1 - (cardCount - (idx + 1)) * SCALE_FACTOR,
+ "--opacity":
+ cardCount - (idx + 1) >= 6
+ ? 0
+ : 1 - (cardCount - (idx + 1)) * OPACITY_FACTOR,
+ } as CSSProperties
+ }
+ aria-hidden={idx !== cardCount - 1}
+ {...(idx !== cardCount - 1 ? { inert: true } : {})}
+ >
+ 2}
+ active={idx === cardCount - 1}
+ onDismiss={() =>
+ setDismissedIds([href, ...dismissedIds.slice(0, 50)])
+ }
+ />
+
+ ))}
+
+ {/* Invisible spacer to hold layout height */}
+
+
+ {/* All-caught-up state */}
+ {showCompleted && !cardCount && (
+
+
+ You're all caught up!
+
+
+ )}
+
+
+ )
+}
+
+// ── Agent Memory Row ──
+
+type AgentWithHistory = Agent & { history: number[] }
+
+function AgentMemoryRow({ agent }: { agent: AgentWithHistory }) {
+ const barPercent = Math.min(100, (agent.memoryMb / 512) * 100)
+
+ return (
+
+
+
+ -
+
+ {metric.icon}
+
+
+
+ {metric.label}
+
+
+
+ {current}
+
+ {metric.unit}
+
+
+
+
+
+ {agent.name}
+
+
+
+ {agent.memoryMb}MB
+
+
+ )
+}
+
+// ── Status Badge ──
+
+function StatusBadge({ spiking }: { spiking: boolean }) {
+ return (
+
+
+ System Monitor
+
+
+ {TIME_FORMATTER.format(now)}
+
+
+
+ {/* 2×2 Resource Grid */}
+
+ {RESOURCE_METRICS.map((metric, i) => (
+
+
+ {/* Per-Agent Memory */}
+ = 2 && "border-border border-t"
+ )}
+ >
+
+ ))}
+
+
+
+ {showAgents && (
+
+
+ {agentData.map((agent) => (
+
+ )}
+
+
+ )
+}
+
+export function Chart() {
+ const [selectedRange, setSelectedRange] = useState
+
+ {source.name}
+ {source.value}
+
+
+
+
+
+
+ (
+ <>
+ {name}
+
+ $
+ {Number(value).toLocaleString(undefined, {
+ maximumFractionDigits: 1,
+ })}
+ M
+
+
+ )}
+ />
+ }
+ />
+
+ {currentRange.sources.map((source) => (
+ |
+ ))}
+
+
+
+
+
+
+ Capital In
+ {currentRange.total}
+
+
+
+
+ {currentRange.sources.map((source, index) => (
+
+
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-13/components/chart.tsx b/apps/web/src/components/blocks/chart-13/components/chart.tsx
new file mode 100644
index 0000000..cd9f588
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-13/components/chart.tsx
@@ -0,0 +1,262 @@
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { Cell, Pie, PieChart } from "recharts"
+
+import { Button } from "@evobgp/ui/components/button"
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "@evobgp/ui/components/chart"
+import { Separator } from "@evobgp/ui/components/separator"
+import {
+ Tabs,
+ TabsContent,
+ TabsList,
+ TabsTrigger,
+} from "@evobgp/ui/components/tabs"
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@evobgp/ui/components/tooltip"
+import {
+ chartConfig,
+ inflowPeriods,
+ type InflowFund,
+ type InflowPeriod,
+} from "./data"
+import { InfoIcon } from "lucide-react"
+
+const CHART_REVEAL_STYLE = `
+@keyframes chart-13-reveal-up {
+ from {
+ clip-path: inset(100% 0 0 0);
+ opacity: 0.75;
+ }
+ to {
+ clip-path: inset(0 0 0 0);
+ opacity: 1;
+ }
+}
+
+.chart-13-reveal-up {
+ animation: chart-13-reveal-up 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .chart-13-reveal-up {
+ animation: none;
+ clip-path: none;
+ opacity: 1;
+ }
+}
+`
+
+type DonutSlice =
+ | InflowFund
+ | {
+ key: "reserve"
+ name: string
+ amount: string
+ share: number
+ color: string
+ fill: string
+ }
+
+function getDonutData(period: InflowPeriod) {
+ const trackedShare = period.funds.reduce(
+ (total, fund) => total + fund.share,
+ 0
+ )
+ const reserveShare = Math.max(100 - trackedShare, 0)
+
+ return [
+ ...period.funds,
+ {
+ key: "reserve",
+ name: "Other Sources",
+ amount: "",
+ share: reserveShare,
+ color: "var(--muted)",
+ fill: "var(--color-reserve)",
+ },
+ ] satisfies DonutSlice[]
+}
+
+function ChartTooltipFormatter(item: unknown) {
+ const fund = item as DonutSlice
+ const value = fund.key === "reserve" ? `${fund.share}%` : fund.amount
+
+ return (
+
+
+ )
+}
+
+function InfoTooltip() {
+ return (
+
+
+ {fund.name}
+
+ {value}
+ Tracked capital committed during the selected period.
+
+
+
+
+ ChartTooltipFormatter(item.payload)
+ }
+ />
+ }
+ />
+
+ {chartData.map((item) => (
+ |
+ ))}
+
+
+
+
+
+
+ )
+}
+
+function InflowLegend({ period }: { period: InflowPeriod }) {
+ return (
+ -
+ {period.funds.map((fund, index) => (
+
-
+ ++ {index < period.funds.length - 1 ? ( ++ + {fund.name} ++ {fund.amount} + + {fund.share}% + +
+ ) : null} +
+ ))}
+
+
+ )
+}
+
+export function Chart() {
+ return (
+
+
+ {inflowPeriods.map((period) => (
+
+ {period.label}
+
+ ))}
+
+
+
+ {/* Content */}
+ {inflowPeriods.map((period) => (
+
+
+
+ Capital Inflows
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-15/components/chart.tsx b/apps/web/src/components/blocks/chart-15/components/chart.tsx
new file mode 100644
index 0000000..904a633
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-15/components/chart.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { Area, AreaChart, ResponsiveContainer, Tooltip } from "recharts"
+import { activeUsersData, customersData, revenueData } from "./data"
+import { CircleDollarSignIcon, UserPlusIcon, TrendingUp } from "lucide-react"
+
+// ── Business metric cards ──
+
+const businessCards = [
+ {
+ title: "Revenue",
+ period: "Last 28 days",
+ value: "6.238$",
+ timestamp: "",
+ data: revenueData,
+ color: "var(--color-emerald-500)",
+ gradientId: "revenueGradient",
+ icon: (
+
+ ),
+ },
+ {
+ title: "New Customers",
+ period: "Last 28 days",
+ value: "6.202",
+ timestamp: "3h ago",
+ data: customersData,
+ color: "var(--color-blue-500)",
+ gradientId: "customersGradient",
+ icon: (
+
+ ),
+ },
+ {
+ title: "Active Users",
+ period: "Last 28 days",
+ value: "18.945",
+ timestamp: "1h ago",
+ data: activeUsersData,
+ color: "var(--color-violet-500)",
+ gradientId: "usersGradient",
+ icon: (
+
+ ),
+ },
+]
+
+export function Chart() {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-15/components/data.tsx b/apps/web/src/components/blocks/chart-15/components/data.tsx
new file mode 100644
index 0000000..fff475e
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-15/components/data.tsx
@@ -0,0 +1,70 @@
+import { ReactNode } from "react"
+
+// ── Types ──
+
+export interface MetricCard {
+ title: string
+ period: string
+ value: string
+ timestamp: string
+ data: { value: number }[]
+ color: string
+ icon: ReactNode
+ gradientId: string
+}
+
+// ── Data ──
+
+export const revenueData = [
+ { value: 1000 },
+ { value: 4500 },
+ { value: 2000 },
+ { value: 5200 },
+ { value: 1500 },
+ { value: 6100 },
+ { value: 3000 },
+ { value: 6800 },
+ { value: 2000 },
+ { value: 1000 },
+ { value: 4000 },
+ { value: 2000 },
+ { value: 3000 },
+ { value: 2000 },
+ { value: 6238 },
+]
+
+export const customersData = [
+ { value: 2000 },
+ { value: 4500 },
+ { value: 2000 },
+ { value: 5200 },
+ { value: 1500 },
+ { value: 5100 },
+ { value: 2500 },
+ { value: 6800 },
+ { value: 1800 },
+ { value: 1000 },
+ { value: 3000 },
+ { value: 2000 },
+ { value: 2700 },
+ { value: 2000 },
+ { value: 4238 },
+]
+
+export const activeUsersData = [
+ { value: 2000 },
+ { value: 3500 },
+ { value: 2000 },
+ { value: 5200 },
+ { value: 1200 },
+ { value: 4100 },
+ { value: 3500 },
+ { value: 5800 },
+ { value: 2000 },
+ { value: 800 },
+ { value: 3000 },
+ { value: 1000 },
+ { value: 4000 },
+ { value: 2000 },
+ { value: 4238 },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-15/page.tsx b/apps/web/src/components/blocks/chart-15/page.tsx
new file mode 100644
index 0000000..adfecfa
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-15/page.tsx
@@ -0,0 +1,9 @@
+import { Chart } from "./components/chart"
+
+export function Page() {
+ return (
+
+ {businessCards.map((card, i) => (
+
+
+ {/* Header */}
+
+
+ ))}
+
+
+
+ {card.icon}
+
+ {card.title}
+
+
+ {/* Chart */}
+
+ {/* Value */}
+
+
+
+
+
+ {card.period}
+
+
+ {card.value}
+
+
+
+
+
+
+
+
+
+ {
+ if (active && payload && payload.length) {
+ const value = payload[0].value as number
+ const formatValue = (val: number) => {
+ if (card.title === "Revenue") {
+ return `${(val / 1000).toFixed(1)}k US$`
+ }
+ return `${(val / 1000).toFixed(1)}k`
+ }
+ return (
+
+
+
+
+
+ )
+ }
+ return null
+ }}
+ />
+
+
+ + {formatValue(value)} +
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/chart-27/components/chart.tsx b/apps/web/src/components/blocks/chart-27/components/chart.tsx
new file mode 100644
index 0000000..f1e07ea
--- /dev/null
+++ b/apps/web/src/components/blocks/chart-27/components/chart.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import { Button } from "@evobgp/ui/components/button"
+import { ChartContainer, ChartTooltip } from "@evobgp/ui/components/chart"
+import { Item, ItemMedia } from "@evobgp/ui/components/item"
+import { Tabs, TabsList, TabsTrigger } from "@evobgp/ui/components/tabs"
+import { browserData, chartConfig, PeriodKey, PERIODS } from "./data"
+import { TrendingUp, PieChartIcon, InfoIcon } from "lucide-react"
+
+// ── Custom tooltip ──
+
+const CustomTooltip = ({
+ active,
+ payload,
+}: {
+ active?: boolean
+ payload?: {
+ name: string
+ color: string
+ value: number
+ payload: { browser: string }
+ }[]
+}) => {
+ if (active && payload && payload.length) {
+ return (
+
+
+ )
+ }
+ return null
+}
+
+export function Chart() {
+ const [selectedPeriod, setSelectedPeriod] = useState
+ {payload[0].payload.browser}
+
+
+
+
+
+
+ Visitors
+
+
+
+ {payload[0].value.toLocaleString()}
+
+
+
+
+
+
+
+ +5.2%
+
+
+
+ Browser Usage
+
+ setSelectedPeriod(value as PeriodKey)}
+ className="w-full"
+ >
+
+ {Object.values(PERIODS).map((period) => (
+
+ {period.label}
+
+ ))}
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+ Total Visitors
+
+
+ {totalVisitors.toLocaleString()}
+
+
+
+
+
+
+ value >= 1000 ? `${(value / 1000).toFixed(1)}k` : value
+ }
+ />
+
+
+
+
+
+
+
+ Visitor data based on unique browser signatures.
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx b/apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx
new file mode 100644
index 0000000..cec1ac1
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-base-6/components/columns.tsx
@@ -0,0 +1,241 @@
+import { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+import { type ColumnDef } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from "@evobgp/ui/components/avatar"
+import { Button } from "@evobgp/ui/components/button"
+import { type MemberBillingStatus, type MemberRecord } from "./data"
+import { EyeIcon, PencilIcon, Trash2Icon } from "lucide-react"
+
+export type MemberRowAction = "view" | "edit" | "delete"
+
+const billingStatusDotClass: Record
+
+
+
+
+ )
+}
+
+function MemberCell({
+ member,
+ onAction,
+}: {
+ member: MemberRecord
+ onAction: (action: MemberRowAction, member: MemberRecord) => void
+}) {
+ return (
+
+
+ {member.initials}
+
+
+
+ )
+}
+
+function BillingStatusCell({
+ billingStatus,
+}: {
+ billingStatus: MemberBillingStatus
+}) {
+ return (
+
+
+
+ {/* Actions */}
+ {member.fullName}
+
+ {member.displayName}
+
+
+
+ {billingStatus}
+
+ )
+}
+
+export function createMembersGridColumns({
+ onAction,
+}: {
+ onAction: (action: MemberRowAction, member: MemberRecord) => void
+}): ColumnDef
+
+
+
+
+
+
+
+
+
+ {filteredData.length}
+
+
+
+ + Members +
+
+
+
+
+
+ handleSearchChange(event.target.value)}
+ />
+ {searchQuery.length > 0 ? (
+
+ handleSearchChange("")}
+ >
+
+
+
+ ) : null}
+
+
+
+
+ Filters
+ {activeFilterCount > 0 ? (
+
+ {activeFilterCount}
+
+ ) : null}
+
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+ {activeFilterCount > 0 ? (
+ <>
+
+ Reset filters
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ Role
+ Billing
+ Auth
+
+
+
+ {filteredData.length > 0 ? (
+
+ 0 members
+ )} +
+ {showChecks && canExpand ? (
+
+ )
+})
+
+const OwnerCell = memo(function OwnerCell({
+ review,
+}: {
+ review: IReleaseReview
+}) {
+ const owner = review.owner
+
+ return (
+
+
+ {review.title}
+
+
+
+
+ {review.changeKey}
+
+
+
+
+ {owner.avatar ? (
+ {initials(owner.name)}
+
+
+ )
+})
+
+const WindowCell = memo(function WindowCell({
+ review,
+}: {
+ review: IReleaseReview
+}) {
+ return (
+
+
+ {owner.name}
+
+
+ {owner.role}
+
+
+
+
+ {review.windowLabel}
+
+
+ )
+})
+
+const ApprovalsCell = memo(function ApprovalsCell({
+ review,
+}: {
+ review: IReleaseReview
+}) {
+ const pending = review.approvalsRequired - review.approvalsApproved
+ const isComplete = pending <= 0
+
+ return (
+
+ {review.windowDurationLabel}
+
+
+
+ {review.approvalsApproved}/{review.approvalsRequired}
+
+
+ {isComplete ? "Complete" : `${pending} pending`}
+
+
+ )
+})
+
+const ReadinessCell = memo(function ReadinessCell({
+ review,
+}: {
+ review: IReleaseReview
+}) {
+ const percent = readinessPercent(review)
+ const radius = 9
+ const circumference = 2 * Math.PI * radius
+ const dashOffset = circumference - (percent / 100) * circumference
+ const toneClassName = readinessRingColor(percent)
+
+ return (
+
+
+ {percent}%
+
+ )
+})
+
+const UpdatedCell = memo(function UpdatedCell({
+ review,
+}: {
+ review: IReleaseReview
+}) {
+ return (
+ {review.updatedLabel}
+ )
+})
+
+function ReviewActionsCell({
+ review,
+ onAction,
+}: {
+ review: IReleaseReview
+ onAction: (action: ReviewAction, review: IReleaseReview) => void
+}) {
+ const { copyToClipboard } = useCopyToClipboard()
+
+ return (
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+ {
+ setSearchQuery(event.target.value)
+ resetPagination()
+ }}
+ />
+ {searchQuery.length > 0 ? (
+
+ {
+ setSearchQuery("")
+ resetPagination()
+ }}
+ >
+
+
+
+ ) : null}
+
+
+
+
+
+
+ {hasActiveFilters ? (
+
+ ) : null}
+
+
+
+
+
+
+ View Settings
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+ Ordering
+
+
+
+
+
+
+ Direction
+
+
+ {ORDER_DIRECTION_OPTIONS.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+
+ Density
+
+
+
+
+
+
+
+
+ Check cards
+
+
+
+
+
+ Include shipped
+
+
+
+
+
+
+ Columns
+
+ {table
+ .getAllColumns()
+ .filter((column) => column.getCanHide())
+ .map((column) => (
+
+
+ {getColumnHeaderLabel(column)}
+
+
+ column.toggleVisibility(checked)
+ }
+ />
+
+ ))}
+
+
+
+
+ {coverage}%
+
+
+ )
+}
+
+function ReleaseCheckCard({ check }: { check: IReleaseCheck }) {
+ return (
+
+
+
+
+
+
+ + {check.title} +
+
+
+
+
+ {check.reviewer?.avatar ? (
+
+ {check.reviewer ? initials(check.reviewer.name) : "--"}
+
+
+
+ {check.reviewer?.name ?? "Reviewer pending"}
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx b/apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx
new file mode 100644
index 0000000..b4c45fe
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-expansion-3/components/release-review-card.tsx
@@ -0,0 +1,60 @@
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+ Card,
+ CardAction,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@evobgp/ui/components/card"
+
+interface ReleaseReviewCardProps {
+ title: string
+ description: ReactNode
+ action?: ReactNode
+ children: ReactNode
+ footer?: ReactNode
+ className?: string
+ contentClassName?: string
+ footerClassName?: string
+}
+
+export function ReleaseReviewCard({
+ title,
+ description,
+ action,
+ children,
+ footer,
+ className,
+ contentClassName,
+ footerClassName,
+}: ReleaseReviewCardProps) {
+ return (
+
+ Checklist
+
+
+ {/* Cards */}
+
+ {visibleChecks.map((check) => (
+
+ + Release review data grid +
+
+
+
+ {row.original.reference}
+
+
+
+
+ {formatDate(row.original.date)}
+
+
+ ),
+ size: 150,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ headerTitle: "Reference",
+ skeleton: (
+
+
+ ),
+ },
+ },
+ {
+ accessorKey: "description",
+ id: "description",
+ header: ({ column }) => (
+
+ -
+
+ {row.original.merchantLogo}
+
+
+
+ ),
+ minSize: 150,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ headerTitle: "Description",
+ skeleton: (
+
+
+ {row.original.description}
+
+
+ {row.original.merchant} · {row.original.category}
+
+
+
+
+ ),
+ },
+ },
+ {
+ accessorKey: "country",
+ id: "region",
+ header: ({ column }) => (
+
+
+
+
+ ),
+ size: 170,
+ enableSorting: true,
+ enableHiding: true,
+ enableResizing: true,
+ meta: {
+ headerTitle: "Region",
+ skeleton: (
+
+ }.svg`})
+
+ {row.original.country}
+
+
+ {row.original.timezone && (
+
+ {row.original.timezone}
+
+ )}
+
+
+ {row.original.country}
+
+
+
+ ),
+ },
+ },
+ {
+ accessorKey: "channel",
+ id: "channel",
+ header: ({ column }) => (
+
+
+
+ {option.icon}
+ {option.label}
+
+ )
+ },
+ },
+ {
+ key: "category",
+ label: "Category",
+ icon: (
+
+
+ Transactions
+
+
+ Billing ledger(refunds / payouts)
+
+
+
+
+
+
+
+
+
+
+ + Billing ledger data grid +
+
+
+ )
+}
+
+function OwnerCell({ automation }: { automation: IAutomationRecord }) {
+ return (
+
+
+ {automation.title}
+
+
+
+ {automation.runWindowLabel}
+
+ {automation.audienceLabel}
+
+
+
+ )
+}
+
+function StateCell({ automation }: { automation: IAutomationRecord }) {
+ const stateStyle = stateBadgeStyles[automation.state]
+
+ return (
+
+
+ {automation.owner.avatar ? (
+ {automation.owner.initials}
+
+
+
+
+
+
+ {automation.owner.name}
+
+
+ {automation.owner.email}
+
+
+
+ {stateStyle.dotClassName ? (
+
+ ) : null}
+ {stateStyle.label}
+
+
+ )
+}
+
+function UpdatedCell({ automation }: { automation: IAutomationRecord }) {
+ return (
+
+
+ {format(parseISO(automation.updatedAt), "MMM d, yyyy")}
+
+
+ {updatedBucketLabel[automation.updatedBucket]}
+
+
+ )
+}
+
+function RatingCell({ automation }: { automation: IAutomationRecord }) {
+ return
+
+ ),
+ size: 56,
+ enableSorting: false,
+ meta: {
+ headerClassName:
+ "[--data-grid-header-cell-pe:var(--frame-panel-header-px)]",
+ cellClassName: "[--data-grid-body-cell-pe:var(--frame-panel-px)]",
+ },
+ },
+ ]
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx b/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
new file mode 100644
index 0000000..bece769
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-2/components/data-grid-view.tsx
@@ -0,0 +1,660 @@
+import { useCallback, useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+ createFilter,
+ Filters,
+ type Filter,
+ type FilterFieldConfig,
+} from "@/components/reui/filters"
+import {
+ Frame,
+ FrameDescription,
+ FrameFooter,
+ FrameHeader,
+ FramePanel,
+ FrameTitle,
+} from "@/components/reui/frame"
+import {
+ getCoreRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+ type PaginationState,
+ type RowSelectionState,
+ type SortingState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@evobgp/ui/components/alert-dialog"
+import { Button } from "@evobgp/ui/components/button"
+import { Separator } from "@evobgp/ui/components/separator"
+import { Tabs, TabsList, TabsTrigger } from "@evobgp/ui/components/tabs"
+import { createAutomationColumns } from "./columns"
+import {
+ AUTOMATION_TABS,
+ AUTOMATIONS,
+ DELIVERY_FILTER_OPTIONS,
+ getAutomationTabFromState,
+ OWNER_FILTER_OPTIONS,
+ UPDATED_FILTER_OPTIONS,
+ type AutomationState,
+ type AutomationTab,
+ type IAutomationRecord,
+} from "./data"
+import { SearchIcon, UsersIcon, RouteIcon, ClockIcon, PlusIcon, FilterIcon, FunnelXIcon } from "lucide-react"
+
+type ToastTone = "success" | "neutral" | "destructive"
+
+const toneStyles: Record
+
+ ))
+}
+
+function getAutomationSearchBlob(automation: IAutomationRecord) {
+ return [
+ automation.title,
+ automation.kind,
+ automation.state,
+ automation.deliveryMode,
+ automation.audienceLabel,
+ automation.runWindowLabel,
+ automation.owner.name,
+ automation.owner.email,
+ automation.owner.teamLabel,
+ automation.approvalRequired ? "approval required" : "auto-approved",
+ automation.enabled ? "enabled" : "disabled",
+ ]
+ .join(" ")
+ .toLowerCase()
+}
+
+function getActiveFilters(filters: Filter[]) {
+ return filters.filter((filter) => {
+ const { values } = filter
+ if (!values || values.length === 0) return false
+ if (
+ values.every((value) => typeof value === "string" && value.trim() === "")
+ ) {
+ return false
+ }
+ if (values.every((value) => value === null || value === undefined)) {
+ return false
+ }
+ if (values.every((value) => Array.isArray(value) && value.length === 0)) {
+ return false
+ }
+ return true
+ })
+}
+
+function renderSelectedCount(values: unknown[]) {
+ if (values.length === 0) return "Select..."
+ if (values.length > 1) return `${values.length} selected`
+ return null
+}
+
+function renderSingleSelectedLabel(
+ values: unknown[],
+ options: { value: string; label: string }[]
+) {
+ const state = renderSelectedCount(values)
+ if (state) return state
+
+ const option = options.find((item) => item.value === values[0])
+ return option?.label ?? String(values[0])
+}
+
+function filterFieldValue(
+ automation: IAutomationRecord,
+ field: string
+): unknown {
+ switch (field) {
+ case "workflow":
+ return getAutomationSearchBlob(automation)
+ case "ownerTeam":
+ return automation.owner.team
+ case "deliveryMode":
+ return automation.deliveryMode
+ case "updatedBucket":
+ return automation.updatedBucket
+ default:
+ return ""
+ }
+}
+
+function applyFiltersToData(
+ data: IAutomationRecord[],
+ filters: Filter[]
+): IAutomationRecord[] {
+ const active = getActiveFilters(filters)
+ let result = [...data]
+
+ active.forEach((filter) => {
+ const { field, operator, values } = filter
+
+ result = result.filter((item) => {
+ const raw = filterFieldValue(item, field)
+ const fieldValue = raw != null ? raw : ""
+
+ switch (operator) {
+ case "is":
+ return values.includes(fieldValue)
+ case "is_not":
+ return !values.includes(fieldValue)
+ case "is_any_of":
+ return values.some((value) => fieldValue === value)
+ case "is_not_any_of":
+ return !values.some((value) => fieldValue === value)
+ case "contains": {
+ const tokens = values
+ .map((value) => String(value).trim())
+ .filter(Boolean)
+ if (tokens.length === 0) return true
+ return tokens.some((token) =>
+ String(fieldValue).toLowerCase().includes(token.toLowerCase())
+ )
+ }
+ case "not_contains":
+ return !values.some((value) =>
+ String(fieldValue)
+ .toLowerCase()
+ .includes(String(value).toLowerCase())
+ )
+ case "starts_with":
+ return values.some((value) =>
+ String(fieldValue)
+ .toLowerCase()
+ .startsWith(String(value).toLowerCase())
+ )
+ case "ends_with":
+ return values.some((value) =>
+ String(fieldValue)
+ .toLowerCase()
+ .endsWith(String(value).toLowerCase())
+ )
+ case "empty":
+ return fieldValue === "" || fieldValue == null
+ case "not_empty":
+ return fieldValue !== "" && fieldValue != null
+ default:
+ return true
+ }
+ })
+ })
+
+ return result
+}
+
+const OWNER_TEAM_FILTER_OPTIONS = OWNER_FILTER_OPTIONS.filter(
+ (option) => option.value !== "everyone"
+).map((option) => ({
+ value: option.value,
+ label: option.label,
+}))
+
+const DELIVERY_MODE_FILTER_OPTIONS = DELIVERY_FILTER_OPTIONS.filter(
+ (option) => option.value !== "any"
+).map((option) => ({
+ value: option.value,
+ label: option.label,
+}))
+
+const UPDATED_BUCKET_FILTER_OPTIONS = UPDATED_FILTER_OPTIONS.filter(
+ (option) => option.value !== "any"
+).map((option) => ({
+ value: option.value,
+ label: option.label,
+}))
+
+const filterFields: FilterFieldConfig[] = [
+ {
+ key: "workflow",
+ label: "Workflow",
+ icon: (
+
+
+
+
+
+ {title}
++ {description} +
+
+
+
+
+
+ Automation Library
+
+
+
+ {filteredAutomations.length} workflow
+ {filteredAutomations.length === 1 ? "" : "s"}
+
+
+ {filteredLiveCount} live
+
+ {filteredReviewCount} review
+ {selectedCount > 0 ? (
+ <>
+
+ {selectedCount} selected
+
+ ) : null}
+
+
+
+
+
+ {
+ setActiveTab(value as AutomationTab)
+ resetPagination()
+ }}
+ >
+
+ {AUTOMATION_TABS.map((tab) => (
+
+ {tab.label}
+
+ {tabCounts[tab.value]}
+
+
+ ))}
+
+
+
+
+
+
+
+ Filters
+
+ }
+ />
+
+
+
+
+ {selectedCount > 0 ? (
+
+ {selectedCount} selected
+
+ ) : null}
+
+
+ + Automation library data grid +
+
+ -
+
+ {row.original.accountLogo}
+
+
+
+ )
+})
+
+const RenewalWindowCell = memo(function RenewalWindowCell({
+ row,
+}: {
+ row: Row
+
+
+ {row.original.accountName}
+
+
+
+
+ {initials(row.original.ownerName)}
+
+
+ {row.original.ownerName}
+
+ {row.original.segment}
+
+
+
+ {dueSoon
+ ? `Due in ${row.original.daysToRenewal}d`
+ : `${row.original.daysToRenewal}d out`}
+
+
+ {formatRenewalDate(row.original.renewalDate)}
+
+
+ )
+})
+
+const RevenueCell = memo(function RevenueCell({
+ row,
+}: {
+ row: Row
+
+ {formatCurrency(row.original.arr)}
+
+ 0
+ ? "text-emerald-600 dark:text-emerald-400"
+ : "text-muted-foreground"
+ )}
+ >
+ {row.original.expansionPotential > 0 ? "+" : ""}
+ {formatCurrency(row.original.expansionPotential)} upside
+
+
+ )
+})
+
+const HealthCell = memo(function HealthCell({
+ row,
+}: {
+ row: Row
+
+ {label}
+
+ )
+})
+
+function buildSmoothLinePath(points: { x: number; y: number }[]) {
+ if (points.length === 0) return ""
+ if (points.length === 1) return `M ${points[0].x} ${points[0].y}`
+
+ let path = `M ${points[0].x} ${points[0].y}`
+
+ for (let index = 0; index < points.length - 1; index++) {
+ const p0 = points[Math.max(0, index - 1)]
+ const p1 = points[index]
+ const p2 = points[index + 1]
+ const p3 = points[Math.min(points.length - 1, index + 2)]
+ const cp1x = p1.x + (p2.x - p0.x) / 6
+ const cp1y = p1.y + (p2.y - p0.y) / 6
+ const cp2x = p2.x - (p3.x - p1.x) / 6
+ const cp2y = p2.y - (p3.y - p1.y) / 6
+
+ path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`
+ }
+
+ return path
+}
+
+const UsageTrendCell = memo(function UsageTrendCell({
+ row,
+}: {
+ row: Row
+
+ {deltaLabel}
+
+ )
+})
+
+function RenewalActionsCell({
+ row,
+ onOpenAccount,
+ onCreateBrief,
+ onEscalateReview,
+}: {
+ row: Row
+
+ ),
+ },
+ },
+ {
+ accessorFn: (row) => row.daysToRenewal,
+ id: "renewalWindow",
+ header: ({ column }) => (
+
+
+
+
+ ),
+ },
+ },
+ {
+ accessorKey: "arr",
+ id: "arr",
+ header: ({ column }) => (
+
+
+ ),
+ },
+ },
+ {
+ accessorKey: "healthScore",
+ id: "health",
+ header: ({ column }) => (
+
+ {/* Actions */}
+
+ )
+}
+
+export function RenewalsCommandGridView() {
+ const [renewals, setRenewals] = useState
+
+
+ Filters
+
+ }
+ />
+
+ {showClearButton ? (
+
+ ) : null}
+
+
+
+
+
+
+ Settings
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ Table
+
+
+
+
+ Density
+
+
+
+
+
+
+ Resizable columns
+
+
+
+
+
+ Movable columns
+
+
+
+
+
+
+ Display columns
+
+
+ {DISPLAY_COLUMNS.map((column) => {
+ const active = visibleColumns[column.key]
+
+ return (
+
+ )
+ })}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx b/apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx
new file mode 100644
index 0000000..8e69bd5
--- /dev/null
+++ b/apps/web/src/components/blocks/data-grid-filtering-3/components/renewals-command-card.tsx
@@ -0,0 +1,63 @@
+import { type ReactNode } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import {
+ Card,
+ CardAction,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@evobgp/ui/components/card"
+
+interface RenewalsCommandCardProps {
+ title: string
+ description?: ReactNode
+ meta?: ReactNode
+ action?: ReactNode
+ children: ReactNode
+ footer?: ReactNode
+ className?: string
+ contentClassName?: string
+}
+
+export function RenewalsCommandCard({
+ title,
+ description,
+ meta,
+ action,
+ children,
+ footer,
+ className,
+ contentClassName,
+}: RenewalsCommandCardProps) {
+ return (
+
+
+ {selectedCount} selected
+
+
+ Update owner or stage.
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+ {description ? (
+ {description}
+ ) : null}
+ {meta ? (
+
+ {action ? (
+ {meta}
+ ) : null}
+ + Renewals command data grid +
+ {isReady ? ( +
+ {/* Heading */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-11/page.tsx b/apps/web/src/components/blocks/empty-state-11/page.tsx
new file mode 100644
index 0000000..c64d3ac
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-11/page.tsx
@@ -0,0 +1,15 @@
+import { EmptyState } from "./components/empty-state"
+
+export function Page() {
+ return (
+
+
+
+ {/* Card */}
+
+
+
+
+ + Routing Signals +
++ Shape incoming work before it reaches the roadmap. +
+
+
+ Create signals to route new work
+
+
+ Define signals so every intake item starts with context.
+
+
+ + Signal routing empty state +
+
+ {/* Empty State */}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx b/apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx
new file mode 100644
index 0000000..95b29bc
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/components/projects-empty-illustration.tsx
@@ -0,0 +1,325 @@
+import { cn } from "@evobgp/ui/lib/utils"
+
+export function ProjectsEmptyIllustration({
+ variant = "hero",
+}: {
+ variant?: "hero" | "compact"
+}) {
+ const isCompact = variant === "compact"
+
+ return (
+
+ )
+}
+
+function HeroView() {
+ return (
+
+ )
+}
+
+function CompactView() {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx b/apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx
new file mode 100644
index 0000000..6550c79
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/components/quick-start-templates.tsx
@@ -0,0 +1,54 @@
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemMedia,
+ ItemTitle,
+} from "@evobgp/ui/components/item"
+import { KanbanIcon, ChevronRightIcon, TimerIcon } from "lucide-react"
+
+export function QuickStartTemplates() {
+ return (
+
+
+ No projects to show
+
+
+ Start a project from scratch or pick a template to launch your
+ first workspace and begin tracking tasks, goals, and progress.
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/empty-state-3/page.tsx b/apps/web/src/components/blocks/empty-state-3/page.tsx
new file mode 100644
index 0000000..2a38cb1
--- /dev/null
+++ b/apps/web/src/components/blocks/empty-state-3/page.tsx
@@ -0,0 +1,9 @@
+import { EmptyState } from "./components/empty-state"
+
+export function Page() {
+ return (
+ Quick starts
+ {/* Grid */} +
+
+
+
+
+
+ Task board
+
+
+
+
+
+
+
+
+
+
+
+
+ Sprint tracker
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/data.ts b/apps/web/src/components/blocks/schedule-1/components/data.ts
new file mode 100644
index 0000000..64135e2
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/data.ts
@@ -0,0 +1,380 @@
+import type { BadgeProps } from "@/components/reui/badge"
+
+export type EventStatus = "Upcoming" | "Cancelled" | "Pending" | "Completed"
+
+export interface Attendee {
+ id: string
+ name: string
+ avatar: string
+}
+
+export interface MockEvent {
+ id: string
+ title: string
+ status: EventStatus
+ date: string
+ time: string
+ location: string
+ attendees: Attendee[]
+}
+
+export interface ScheduleCalendarProps {
+ selected: Date | undefined
+ onSelect: (date: Date | undefined) => void
+ datesWithEvents?: Set
+
+ {event.title}
+
+
+
+
+
+ {event.status}
+
+
+
+
+ {/* Header */}
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx b/apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx
new file mode 100644
index 0000000..46cc087
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/schedule-calendar.tsx
@@ -0,0 +1,190 @@
+import { useState } from "react"
+import { DayButton } from "react-day-picker"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Calendar, CalendarDayButton } from "@evobgp/ui/components/calendar"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@evobgp/ui/components/select"
+import {
+ DEMO_REFERENCE_DATE,
+ MONTHS,
+ YEARS,
+ type ScheduleCalendarProps,
+} from "./data"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+// Weekday header highlight tracks the fixed demo clock, not the live date.
+const TODAY_WEEKDAY_NAME = DEMO_REFERENCE_DATE.toLocaleString("en-US", {
+ weekday: "short",
+}).toUpperCase()
+
+export function ScheduleCalendar({
+ selected,
+ onSelect,
+ datesWithEvents = new Set(),
+}: ScheduleCalendarProps) {
+ const [month, setMonth] = useState
+ {/* Heading */}
+
+
+ {/* Events */}
+
+
+
+ {/* Filters */}
+ + {headingLabel} +
++ {events.length > 0 + ? `${events.length} event${events.length !== 1 ? "s" : ""}` + : "No events found"} +
+
+
+
+
+
+
+
+
+
+ {events.length === 0 ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+
+ + No events found +
++ {dateKey + ? "Nothing scheduled for this day." + : "Try changing the filter."} +
+-
+ {events.map((event: MockEvent) => (
+
-
+
+
+ ))}
+
+ {/* ── Custom header ── */}
+
+ date.toLocaleString("en-US", { weekday: "short" }).toUpperCase(),
+ }}
+ classNames={{
+ month_caption: "hidden",
+ nav: "hidden",
+ weekdays: "flex gap-1",
+ weekday:
+ "flex-1 flex items-center justify-center h-14 text-[0.65rem] font-medium text-muted-foreground",
+ week: "flex gap-1 mt-1",
+ day: "flex-1 aspect-square p-0",
+ day_button: cn(
+ "bg-muted/50 hover:bg-muted",
+ " rounded-md ",
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary data-[selected-single=true]:hover:text-primary-foreground!"
+ ),
+ outside: "opacity-60",
+ disabled: "opacity-60",
+ today: cn("bg-accent text-foreground", " rounded-md "),
+ }}
+ components={{
+ Weekday: ({
+ children,
+ className: cls,
+ ...props
+ }: React.ComponentPropsWithoutRef<"th">) => {
+ const isToday = children === TODAY_WEEKDAY_NAME
+ return (
+
+ {children}
+
+ )
+ },
+
+ DayButton: ({
+ children,
+ modifiers,
+ day,
+ ...props
+ }: React.ComponentProps) => {
+ const dateKey = day.date.toISOString().slice(0, 10)
+ const hasEvents = !modifiers.outside && datesWithEvents.has(dateKey)
+
+ return (
+
+ {hasEvents ? (
+
+ ) : (
+
+ )}
+ {children}
+
+ )
+ },
+ }}
+ />
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/schedule-1/components/schedule.tsx b/apps/web/src/components/blocks/schedule-1/components/schedule.tsx
new file mode 100644
index 0000000..90da747
--- /dev/null
+++ b/apps/web/src/components/blocks/schedule-1/components/schedule.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { useState } from "react"
+import { Frame, FramePanel } from "@/components/reui/frame"
+
+import {
+ DEMO_REFERENCE_DATE,
+ EventsFilter,
+ getDatesWithEvents,
+ MOCK_EVENTS,
+} from "./data"
+import { EventsList } from "./events-list"
+import { ScheduleCalendar } from "./schedule-calendar"
+
+export function Schedule() {
+ const [selectedDate, setSelectedDate] = useState
+ {/* Prev month */}
+
+
+ {/* Month select */}
+
+
+ {/* Year select */}
+
+
+ {/* Next month */}
+
+
+
+ {/* ── Calendar ── */}
+
+
+
+ {/* Right - events */}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx b/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx
new file mode 100644
index 0000000..2d76d54
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { DataGrid } from "@/components/reui/data-grid/data-grid"
+import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
+import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
+import {
+ Frame,
+ FrameDescription,
+ FrameFooter,
+ FrameHeader,
+ FramePanel,
+ FrameTitle,
+} from "@/components/reui/frame"
+import {
+ getCoreRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+ type PaginationState,
+ type SortingState,
+ type VisibilityState,
+} from "@tanstack/react-table"
+import { toast } from "sonner"
+
+import { Button } from "@evobgp/ui/components/button"
+import { Switch } from "@evobgp/ui/components/switch"
+import { TooltipProvider } from "@evobgp/ui/components/tooltip"
+import { createColumns } from "./columns"
+import { API_INTEGRATIONS } from "./data"
+import { BriefcaseBusinessIcon } from "lucide-react"
+
+// ── Main component ──
+
+export function ApiIntegrationsGrid() {
+ const [rows, setRows] = useState(API_INTEGRATIONS)
+ const [pagination, setPagination] = useState
+ API Integrations
+
+ Oversee endpoints, key rotation, and traffic availability.
+
+
+
+
+
+
+
+ Pause all
+
+
+
+
+
+ -
+
+ {row.original.logo}
+
+
+
+ ),
+ size: 450,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ headerTitle: "Integration",
+ skeleton: (
+
+
+ {row.original.name}
+
+
+ {row.original.provider} · {row.original.description}
+
+
+
+
+ ),
+ },
+ },
+ {
+ accessorKey: "apiKey",
+ id: "apiKey",
+ header: ({ column }) => (
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/color-picker.tsx b/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
new file mode 100644
index 0000000..7f2af7a
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/color-picker.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useState } from "react"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { FieldLegend, FieldSet } from "@evobgp/ui/components/field"
+import { ACCENT_COLORS } from "./data"
+import { CheckIcon } from "lucide-react"
+
+// ── Color Picker ──
+
+export function ColorPicker() {
+ const [selected, setSelected] = useState(ACCENT_COLORS[0].value)
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/data.tsx b/apps/web/src/components/blocks/settings-3/components/data.tsx
new file mode 100644
index 0000000..fad3846
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/data.tsx
@@ -0,0 +1,107 @@
+import { type ReactNode } from "react"
+
+// ── Types ──
+
+export type SelectOption = {
+ value: string
+ label: string
+}
+
+export type Preference = {
+ id: string
+ label: string
+ description: string
+ defaultChecked: boolean
+}
+
+export type AccentColorOption = {
+ name: string
+ value: string
+}
+
+export type SettingBadgeVariant =
+ | "primary-light"
+ | "destructive-light"
+ | "info-light"
+
+export type SettingFieldProps = {
+ title: string
+ description: string
+ badge?: { label: string; variant: SettingBadgeVariant }
+ children: ReactNode
+ last?: boolean
+}
+
+export type DateFormatOption = {
+ value: string
+ label: string
+}
+
+// ── Data ──
+
+export const DAYS: SelectOption[] = [
+ { value: "monday", label: "Monday" },
+ { value: "tuesday", label: "Tuesday" },
+ { value: "wednesday", label: "Wednesday" },
+ { value: "thursday", label: "Thursday" },
+ { value: "friday", label: "Friday" },
+ { value: "saturday", label: "Saturday" },
+ { value: "sunday", label: "Sunday" },
+]
+
+export const CURRENCIES: SelectOption[] = [
+ { value: "usd", label: "USD · US Dollar" },
+ { value: "eur", label: "EUR · Euro" },
+ { value: "gbp", label: "GBP · British Pound" },
+ { value: "jpy", label: "JPY · Japanese Yen" },
+]
+
+export const REGIONS: SelectOption[] = [
+ { value: "us", label: "United States" },
+ { value: "eu", label: "European Union" },
+ { value: "uk", label: "United Kingdom" },
+ { value: "jp", label: "Japan" },
+ { value: "au", label: "Australia" },
+]
+
+export const ACCENT_COLORS: AccentColorOption[] = [
+ { name: "Slate", value: "#64748b" },
+ { name: "Rose", value: "#f43f5e" },
+ { name: "Orange", value: "#f97316" },
+ { name: "Violet", value: "#8b5cf6" },
+ { name: "Emerald", value: "#10b981" },
+ { name: "Sky", value: "#0ea5e9" },
+]
+
+export const PREFERENCES: Preference[] = [
+ {
+ id: "keyboard-shortcuts",
+ label: "Enable keyboard shortcuts.",
+ description: "Use shortcuts to speed up your workflow.",
+ defaultChecked: true,
+ },
+ {
+ id: "spellcheck",
+ label: "Auto spell-check.",
+ description: "Highlight spelling errors in text fields.",
+ defaultChecked: true,
+ },
+ {
+ id: "compact-mode",
+ label: "Compact Mode.",
+ description: "Reduce spacing for a denser interface layout.",
+ defaultChecked: false,
+ },
+ {
+ id: "animations",
+ label: "Reduce animations.",
+ description: "Minimize motion effects throughout the UI.",
+ defaultChecked: false,
+ },
+]
+
+export const DATE_FORMAT_OPTIONS: DateFormatOption[] = [
+ { value: "mdy", label: "MM/DD/YYYY" },
+ { value: "dmy", label: "DD/MM/YYYY" },
+ { value: "ymd", label: "YYYY/MM/DD" },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx b/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
new file mode 100644
index 0000000..5dcec1a
--- /dev/null
+++ b/apps/web/src/components/blocks/settings-3/components/editor-preferences.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { useState } from "react"
+
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldGroup,
+ FieldLabel,
+ FieldLegend,
+ FieldSet,
+} from "@evobgp/ui/components/field"
+import { Switch } from "@evobgp/ui/components/switch"
+
+import { PREFERENCES } from "./data"
+
+// ── Editor Preferences ──
+
+export function EditorPreferences() {
+ const [values, setValues] = useState
+
+
+
+
+
+ {description}
+
+
+
+ {labelFor ? (
+ {title}
+ ) : (
+ {title}
+ )}
+
+ {badge ? (
+
+ {badge.label}
+
+ ) : null}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-4/components/data.ts b/apps/web/src/components/blocks/stats-4/components/data.ts
new file mode 100644
index 0000000..60e0d9a
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-4/components/data.ts
@@ -0,0 +1,16 @@
+export const leadsData = {
+ newLeads: 54,
+ returningLeads: 198,
+ newPercent: 21.43,
+ returningPercent: 78.57,
+ topSource: "LinkedIn",
+ conversionRate: 12.8,
+}
+
+export const rangeOptions = [
+ { label: "All Time", value: "all-time" },
+ { label: "This Month", value: "this-month" },
+ { label: "Last Month", value: "last-month" },
+ { label: "This Year", value: "this-year" },
+ { label: "Last Year", value: "last-year" },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-4/components/stats.tsx b/apps/web/src/components/blocks/stats-4/components/stats.tsx
new file mode 100644
index 0000000..48ff5ab
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-4/components/stats.tsx
@@ -0,0 +1,131 @@
+"use client"
+
+import { Badge } from "@/components/reui/badge"
+import {
+ Frame,
+ FramePanel,
+ FrameTitle,
+} from "@/components/reui/frame"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Progress } from "@evobgp/ui/components/progress"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@evobgp/ui/components/select"
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@evobgp/ui/components/tooltip"
+import { leadsData, rangeOptions } from "./data"
+import { InfoIcon } from "lucide-react"
+
+export function Stats() {
+ return (
+
+ {/* Content */}
+
+ Leads Overview
+
+
+
+
+
+
+
+
+
+
+
+ {leadsData.newLeads}
+
+ {leadsData.newPercent}%
+
+
+ New leads
+
+
+
+
+
+
+
+
+ {leadsData.returningLeads}
+
+
+
+ Returning leads
+
+
+ {Array.from({ length: 30 }).map((_, i) => (
+
+ ))}
+
+
+
+
+ Top Source
+
+ {leadsData.topSource}
+
+
+
+
+ Conversion Rate
+
+
+
+
+ }
+ />
+
+
+
+
+
+ {leadsData.conversionRate}%
+
+
+ Percentage of leads converted to customers.
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-6/components/data.ts b/apps/web/src/components/blocks/stats-6/components/data.ts
new file mode 100644
index 0000000..f2e0cc7
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-6/components/data.ts
@@ -0,0 +1,35 @@
+export const rangeOptions = [
+ { label: "Q1 - 2024", value: "q1" },
+ { label: "Q2 - 2024", value: "q2" },
+ { label: "Q3 - 2024", value: "q3" },
+ { label: "Q4 - 2024", value: "q4" },
+]
+
+export const performance = [
+ { label: "Deals Closed", value: 27, trend: 12, trendDir: "up" as const },
+ { label: "Revenue", value: "$182.4k", trend: 6, trendDir: "up" as const },
+ { label: "Conversion", value: "72%", trend: 3, trendDir: "down" as const },
+]
+
+export const pipelineProgress = 76
+
+export const activity = [
+ {
+ text: "Closed deal with FinSight Inc.",
+ date: "Today",
+ state: "secondary",
+ color: "text-emerald-500",
+ },
+ {
+ text: "3 new leads added to Pipeline.",
+ date: "Yesterday",
+ state: "secondary",
+ color: "text-emerald-500",
+ },
+ {
+ text: "Follow-up scheduled.",
+ date: "2 days ago",
+ state: "destructive",
+ color: "text-destructive",
+ },
+]
\ No newline at end of file
diff --git a/apps/web/src/components/blocks/stats-6/components/stats.tsx b/apps/web/src/components/blocks/stats-6/components/stats.tsx
new file mode 100644
index 0000000..2b68d6f
--- /dev/null
+++ b/apps/web/src/components/blocks/stats-6/components/stats.tsx
@@ -0,0 +1,186 @@
+"use client"
+
+import { Badge } from "@/components/reui/badge"
+import {
+ Frame,
+ FrameFooter,
+ FramePanel,
+} from "@/components/reui/frame"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { Progress } from "@evobgp/ui/components/progress"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@evobgp/ui/components/select"
+import { Separator } from "@evobgp/ui/components/separator"
+import { activity, performance, pipelineProgress, rangeOptions } from "./data"
+import { MoreHorizontalIcon, SettingsIcon, TriangleAlertIcon, Pin, Share2Icon, Trash2Icon, TrendingUp, TrendingDown, CircleCheckIcon } from "lucide-react"
+
+export function Stats() {
+ return (
+
+ {/* Content */}
+
+
+
+
+
+ Staff Performance
+ + Sales Manager + +
+
+
+
+
+
+
+ Settings
+
+
+
+ Add Alert
+
+
+
+ Pin to Dashboard
+
+
+
+ Share
+
+
+
+ Remove
+
+
+
+
+
+
+
+
+ {performance.map((item) => (
+
+
+
+
+ ))}
+
+ {item.value}
+
+
+ {item.label}
+
+
+ {item.trendDir === "up" ? (
+
+ ) : (
+
+ )}
+ {item.trendDir === "up" ? "+" : "-"}
+ {item.trend}%
+
+
+
+
+
+
+ Pipeline Progress
+
+
+ {pipelineProgress}%
+
+
+
+
+
+
+ Recent Activity
+
+ -
+ {activity.map((a, i) => (
+
-
+
+
+
+ {a.text}
+
+
+
+ {a.date} + +
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/components/dashboard/dashboard-frame-panel.tsx b/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
index 4f47b88..f4d1e13 100644
--- a/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
+++ b/apps/web/src/components/dashboard/dashboard-frame-panel.tsx
@@ -1,14 +1,12 @@
import type { ReactNode } from 'react'
import {
- Frame,
- FrameDescription,
- FrameHeader,
- FramePanel,
- FrameTitle,
-} from '@/components/reui/frame'
+ PanelCard,
+ panelCardContentFlushClassName,
+} from '@/components/panel-card'
import { cn } from '@evobgp/ui/lib/utils'
+/** Card-surface panel for dashboard sections (replaces legacy Frame shell). */
export function DashboardFramePanel({
title,
description,
@@ -24,20 +22,15 @@ export function DashboardFramePanel({
className?: string
contentClassName?: string
}) {
- const hasHeader = Boolean(title || description || actions)
-
return (
-
- {hasHeader ? (
-
- {title ? {title} : null}
- {description ? {description} : null}
-
- {actions ? {actions}
: null}
-
- {cards.map((card) => (
-
-
- -
-
- {card.icon}
-
-
-
-
- ))}
-
- )
-}
diff --git a/apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx b/apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx
new file mode 100644
index 0000000..154086d
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-kpi-sparkline-row.tsx
@@ -0,0 +1,118 @@
+import { useMemo } from 'react'
+
+import { KpiSparklineCard, type KpiSparklineMetric } from '@/components/patterns/kpi-sparkline-card'
+import { kpiGridClassName } from '@/lib/ui-surface'
+import { aggregateNetworkMetrics, runningJobCount } from '@/queries/overview'
+import type { JobRow, ModuleRow, PeerRow, SpeakerRow } from '@/types/api'
+
+function syntheticSparkline(seed: number, points = 9): number[] {
+ const base = Math.max(4, seed)
+ return Array.from({ length: points }, (_, i) =>
+ Math.round(base * (0.82 + (i / points) * 0.18 + Math.sin(i + seed) * 0.04)),
+ )
+}
+
+function buildMetrics({
+ modules,
+ peers,
+ speakers,
+ jobs,
+ loading,
+}: {
+ modules: ModuleRow[]
+ peers: PeerRow[]
+ speakers: SpeakerRow[]
+ jobs: JobRow[]
+ loading?: boolean
+}): KpiSparklineMetric[] {
+ const enabledModules = modules.filter((m) => m.enabled !== false).length
+ const network = aggregateNetworkMetrics(peers, speakers)
+ const bgpPct =
+ network.peersEnabled > 0
+ ? Math.round((network.peersEstablished / network.peersEnabled) * 100)
+ : 0
+ const running = runningJobCount(jobs)
+ const failedJobs = jobs.filter((j) =>
+ ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+ ).length
+
+ return [
+ {
+ id: 'bgp',
+ title: 'BGP готовность',
+ label: 'Established / включённые',
+ value: loading || network.peersEnabled === 0 ? '—' : `${bgpPct}%`,
+ delta: loading ? '…' : bgpPct >= 90 ? 'стабильно' : 'внимание',
+ deltaVariant: bgpPct >= 90 ? 'success-light' : bgpPct >= 50 ? 'warning-light' : 'destructive-light',
+ detail: loading ? '' : `${network.peersEstablished} сессий`,
+ tone: bgpPct >= 90 ? 'success' : bgpPct >= 50 ? 'warning' : 'danger',
+ sparkline: syntheticSparkline(bgpPct || 40),
+ },
+ {
+ id: 'modules',
+ title: 'Модули',
+ label: 'Активные списки',
+ value: loading ? '—' : `${enabledModules}`,
+ delta: loading ? '…' : `${modules.length} всего`,
+ deltaVariant: 'primary-light',
+ detail: loading ? '' : 'маршрутизация',
+ tone: 'info',
+ sparkline: syntheticSparkline(enabledModules || 3),
+ },
+ {
+ id: 'speakers',
+ title: 'Спикеры',
+ label: 'Online / всего',
+ value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
+ delta:
+ loading || network.speakersTotal === 0
+ ? '…'
+ : network.speakersOnline === network.speakersTotal
+ ? 'все online'
+ : 'частично',
+ deltaVariant:
+ network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light',
+ detail: loading ? '' : 'live-снимок',
+ tone: network.speakersOnline === network.speakersTotal ? 'success' : 'warning',
+ sparkline: syntheticSparkline(network.speakersOnline || 2),
+ },
+ {
+ id: 'jobs',
+ title: 'Задачи',
+ label: 'Активные / ошибки',
+ value: loading ? '—' : String(running),
+ delta: loading ? '…' : failedJobs > 0 ? `${failedJobs} ошибок` : 'без сбоев',
+ deltaVariant: failedJobs > 0 ? 'destructive-light' : 'success-light',
+ detail: loading ? '' : `${jobs.length} в выборке`,
+ tone: failedJobs > 0 ? 'danger' : running > 0 ? 'info' : 'success',
+ sparkline: syntheticSparkline(running + failedJobs || 1),
+ },
+ ]
+}
+
+export function DashboardKpiSparklineRow({
+ modules,
+ peers,
+ speakers,
+ jobs,
+ loading,
+}: {
+ modules: ModuleRow[]
+ peers: PeerRow[]
+ speakers: SpeakerRow[]
+ jobs: JobRow[]
+ loading?: boolean
+}) {
+ const metrics = useMemo(
+ () => buildMetrics({ modules, peers, speakers, jobs, loading }),
+ [modules, peers, speakers, jobs, loading],
+ )
+
+ return (
+
-
- {card.badge}
-
- {card.value}
-
- {card.label}
-
-
-
+ ),
+ }}
+ secondary={{
+ value: loading ? '—' : offline,
+ label: mode === 'peers' ? 'Не Established' : 'Offline',
+ percent: total > 0 ? Math.round((offline / total) * 100) : 0,
+ }}
+ footer={
+ loading
+ ? 'Загрузка…'
+ : `Активных задач: ${queued} · сегментов в графике: ${bars.length}`
+ }
+ />
)
}
diff --git a/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx b/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx
index f43b3b5..620389b 100644
--- a/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx
+++ b/apps/web/src/components/dashboard/dashboard-operations-breakdown.tsx
@@ -2,12 +2,14 @@ import { useMemo, useState } from 'react'
import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
import { AnalyticsSegmentControl } from '@/components/analytics/analytics-segment-control'
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
+import { PanelCard } from '@/components/panel-card'
+import { Separator } from '@evobgp/ui/components/separator'
import { jobStatusBreakdown, moduleTypeBreakdown } from '@/lib/metrics'
import type { JobRow, ModuleRow } from '@/types/api'
type FlowMode = 'jobs' | 'modules'
+/** chart-13 inspired donut breakdown (Card surface). */
export function DashboardOperationsBreakdown({
jobs,
modules,
@@ -28,7 +30,7 @@ export function DashboardOperationsBreakdown({
const centerLabel = mode === 'jobs' ? 'Задачи' : 'Модули'
return (
-
-
- {loading ? '—' : queued}
- активных задач
+ primary={{
+ value: loading ? '—' : `${utilization}%`,
+ label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры online',
+ percent: loading ? 0 : utilization,
+ badge: (
+
+ {loading ? '…' : `${established}/${total}`}
-
-
- {loading ? (
-
-
- - {loading ? '—' : `${utilization}%`} -
-- {loading ? '…' : `${established} / ${total} ${mode === 'peers' ? 'установлено' : 'в сети'}`} -
-
- Загрузка…
-
- ) : (
-
-
-
- Ниже порога
-
-
-
- Установлено / online
-
-
-
+
-
+
+
)
}
diff --git a/apps/web/src/components/dashboard/dashboard-quick-links.tsx b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
index ae6eb61..6ebe194 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-links.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-links.tsx
@@ -2,12 +2,7 @@ import { Gauge, Network, Play, Plus, Share2, Tags } from 'lucide-react'
import type { ReactNode } from 'react'
import { DashboardQuickLinkCard } from '@/components/dashboard/dashboard-quick-link-card'
-import {
- Frame,
- FrameDescription,
- FrameHeader,
- FrameTitle,
-} from '@/components/reui/frame'
+import { PanelCard } from '@/components/panel-card'
type QuickLink = {
icon: ReactNode
@@ -69,16 +64,15 @@ const LINKS: QuickLink[] = [
export function DashboardQuickLinks() {
return (
-
-
{loading ? (
-
+
)
}
diff --git a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
index a4bb57e..00fdb1c 100644
--- a/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
+++ b/apps/web/src/components/dashboard/dashboard-quick-link-card.tsx
@@ -3,7 +3,7 @@ import { ChevronRight } from 'lucide-react'
import type { ReactNode } from 'react'
import { CardDotField } from '@/components/dashboard/card-dot-field'
-import { FramePanel } from '@/components/reui/frame'
+import { Card, CardContent } from '@evobgp/ui/components/card'
import { cn } from '@evobgp/ui/lib/utils'
import { Item, ItemMedia } from '@evobgp/ui/components/item'
@@ -31,7 +31,8 @@ export function DashboardQuickLinkCard({
className="group block h-full rounded-[inherit] focus-visible:outline-none"
aria-label={`${label}: ${description}`}
>
-
Загрузка…
) : (
- -
+ {slices.map((slice, index) => {
+ const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
+ return (
+
-
+ ++ {index < slices.length - 1 ?+ + {slice.label} ++ {slice.count} + + {pct}% + +
: null} +
+ )
+ })}
+
+
-
- {LINKS.map((link) => (
-
-
+
-
- B
+
+
+
+
+
-
- {NAV_GROUPS.map((group) => (
-
- {group.label}
-
-
- {group.items.map((item) => {
- const Icon = item.icon
- const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
- return (
-
-
- )
- })}
-
-
-
- ))}
-
-
-
-
-
-
- {parentLabel && parentTo ? (
- <>
-
-
-
- {ROUTE_LABELS[activeItem.to] ?? activeItem.label}
-
-
-
-
- {children}
-
-
+
+
+ {NAV_GROUPS.map((group) => (
+
+ {group.label}
+
+
+ {group.items.map((item) => {
+ const Icon = item.icon
+ const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
+ return (
+
+
+ )
+ })}
+
+
+
+ ))}
+
+
+
+
+
+ {parentLabel && parentTo ? (
+ <>
+
+
+
+ {pageTitle}
+
+
+
+
+ {children}
+
+
+
)
}
diff --git a/apps/web/src/components/layout/command-palette.tsx b/apps/web/src/components/layout/command-palette.tsx
new file mode 100644
index 0000000..5576961
--- /dev/null
+++ b/apps/web/src/components/layout/command-palette.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useId, useMemo, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { Search } from 'lucide-react'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from '@evobgp/ui/components/dialog'
+import { Input } from '@evobgp/ui/components/input'
+import { Kbd } from '@evobgp/ui/components/kbd'
+import {
+ SidebarGroup,
+ SidebarGroupContent,
+} from '@evobgp/ui/components/sidebar'
+
+export type CommandPaletteItem = {
+ id: string
+ label: string
+ description?: string
+ to: string
+ search?: Record
+ keywords?: string[]
+}
+
+interface CommandPaletteProps {
+ items: CommandPaletteItem[]
+ className?: string
+}
+
+export function CommandPalette({ items }: CommandPaletteProps) {
+ const [open, setOpen] = useState(false)
+ const [query, setQuery] = useState('')
+ const searchInputId = useId()
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ function onKeyDown(event: KeyboardEvent) {
+ if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+ event.preventDefault()
+ setOpen(true)
+ }
+ }
+ window.addEventListener('keydown', onKeyDown)
+ return () => window.removeEventListener('keydown', onKeyDown)
+ }, [])
+
+ const filtered = useMemo(() => {
+ const q = query.trim().toLowerCase()
+ if (!q) return items
+ return items.filter((item) => {
+ const haystack = [item.label, item.description, ...(item.keywords ?? [])]
+ .filter(Boolean)
+ .join(' ')
+ .toLowerCase()
+ return haystack.includes(q)
+ })
+ }, [items, query])
+
+ function go(item: CommandPaletteItem) {
+ setOpen(false)
+ setQuery('')
+ void navigate({ to: item.to, search: item.search })
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/components/layout/system-monitor-popover.tsx b/apps/web/src/components/layout/system-monitor-popover.tsx
new file mode 100644
index 0000000..cd3065e
--- /dev/null
+++ b/apps/web/src/components/layout/system-monitor-popover.tsx
@@ -0,0 +1,213 @@
+import { useMemo, type CSSProperties, type ReactNode } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Activity, Bird, HeartPulse, ListChecks, Network } from 'lucide-react'
+
+import { Badge } from '@/components/reui/badge'
+import { cn } from '@evobgp/ui/lib/utils'
+import { Item, ItemMedia } from '@evobgp/ui/components/item'
+import { Popover, PopoverContent, PopoverTrigger } from '@evobgp/ui/components/popover'
+import { Progress } from '@evobgp/ui/components/progress'
+
+import { monitoringHealthQueryOptions } from '@/queries/monitoring'
+import { networkBirdQueryOptions } from '@/queries/network'
+import { aggregateNetworkMetrics, overviewJobsQueryOptions, overviewPeersQueryOptions } from '@/queries/overview'
+
+type MonitorMetric = {
+ id: string
+ label: string
+ value: string
+ unit: string
+ percent: number
+ icon: ReactNode
+ tone: 'success' | 'warning' | 'destructive' | 'info'
+ alert: boolean
+}
+
+function toneColor(tone: MonitorMetric['tone']) {
+ switch (tone) {
+ case 'success':
+ return 'var(--color-success)'
+ case 'warning':
+ return 'var(--color-warning)'
+ case 'destructive':
+ return 'var(--color-destructive)'
+ default:
+ return 'var(--color-info)'
+ }
+}
+
+function MetricCell({ metric }: { metric: MonitorMetric }) {
+ const color = toneColor(metric.tone)
+ return (
+ (
+ () => [
+ {
+ id: 'api',
+ label: 'API health',
+ value: healthOk ? 'OK' : '—',
+ unit: '',
+ percent: healthOk ? 100 : 0,
+ icon:
+
+ {spiking ? 'Внимание' : 'Норма'}
+
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/components/modules/module-kpi-cards.tsx b/apps/web/src/components/modules/module-kpi-cards.tsx
index 9ca3f1b..2c1a756 100644
--- a/apps/web/src/components/modules/module-kpi-cards.tsx
+++ b/apps/web/src/components/modules/module-kpi-cards.tsx
@@ -1,13 +1,5 @@
-import {
- ArrowDownUp,
- Network,
- RefreshCw,
- ShieldCheck,
- Timer,
-} from 'lucide-react'
-
-import { SectionCards, type SectionCardItem } from '@/components/section-cards'
-import { SectionCardsSkeleton } from '@/components/skeletons'
+import { KpiSparklineCard, type KpiSparklineMetric } from '@/components/patterns/kpi-sparkline-card'
+import { kpiGridClassName } from '@/lib/ui-surface'
import { formatDateTime, moduleIntervalLabel } from '@/lib/modules/display'
import {
communityLabel,
@@ -15,6 +7,7 @@ import {
moduleDohProfileIds,
} from '@/lib/modules/helpers'
import { dohPolicyRu } from '@/lib/ui-labels'
+import { SectionCardsSkeleton } from '@/components/skeletons'
import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '@/types/api'
interface ModuleKpiCardsProps {
@@ -25,6 +18,12 @@ 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,
@@ -33,52 +32,67 @@ export function ModuleKpiCards({
loading = false,
}: ModuleKpiCardsProps) {
if (loading || !mod) {
- return
+ {metrics.map((metric) => (
+
+ )
}
diff --git a/apps/web/src/components/network/network-peers-card.tsx b/apps/web/src/components/network/network-peers-card.tsx
index 57c976b..b0779c2 100644
--- a/apps/web/src/components/network/network-peers-card.tsx
+++ b/apps/web/src/components/network/network-peers-card.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
import { Plus } from 'lucide-react'
import { Button } from '@evobgp/ui/components/button'
+import { Tabs, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
import { DataGridCard } from '@/components/data-grid-shell'
import { NetworkPeersGrid } from '@/components/network/network-peers-grid'
@@ -10,6 +11,8 @@ import { QueryState } from '@/components/query-state'
import { TableSkeleton } from '@/components/skeletons'
import type { PeerRow, SpeakerRow } from '@/types/api'
+type PeerTab = 'all' | 'established' | 'pending' | 'disabled'
+
interface NetworkPeersCardProps {
items: PeerRow[]
speakers: SpeakerRow[]
@@ -19,6 +22,24 @@ interface NetworkPeersCardProps {
onRetry: () => void
}
+function filterPeers(items: PeerRow[], tab: PeerTab): PeerRow[] {
+ if (tab === 'all') return items
+ if (tab === 'disabled') return items.filter((p) => p.enabled === false)
+ const enabled = items.filter((p) => p.enabled !== false)
+ if (tab === 'established') return enabled.filter((p) => p.session_state === 'Established')
+ return enabled.filter((p) => p.session_state !== 'Established')
+}
+
+function tabCounts(items: PeerRow[]) {
+ const enabled = items.filter((p) => p.enabled !== false)
+ return {
+ all: items.length,
+ established: enabled.filter((p) => p.session_state === 'Established').length,
+ pending: enabled.filter((p) => p.session_state !== 'Established').length,
+ disabled: items.length - enabled.length,
+ }
+}
+
export function NetworkPeersCard({
items,
speakers,
@@ -28,6 +49,9 @@ export function NetworkPeersCard({
onRetry,
}: NetworkPeersCardProps) {
const [dialogOpen, setDialogOpen] = useState(false)
+ const [tab, setTab] = useState('all')
+ const counts = useMemo(() => tabCounts(items), [items])
+ const filtered = useMemo(() => filterPeers(items, tab), [items, tab])
return (
<>
@@ -41,14 +65,24 @@ export function NetworkPeersCard({
}
>
+
+ qc: QueryClient
+ isLoading: boolean
+ isError: boolean
+ error: unknown
+ onRetry: () => void
+}) {
+ const [tab, setTab] = useState('all')
+ const counts = useMemo(() => tabCounts(jobs), [jobs])
+ const filtered = useMemo(() => filterJobs(jobs, tab), [jobs, tab])
+
+ return (
+
+ 0}
+ />
+ )}
+
+
+ )
+}
diff --git a/apps/web/src/components/patterns/donut-breakdown-card.tsx b/apps/web/src/components/patterns/donut-breakdown-card.tsx
new file mode 100644
index 0000000..c239004
--- /dev/null
+++ b/apps/web/src/components/patterns/donut-breakdown-card.tsx
@@ -0,0 +1,92 @@
+import { Cell, Pie, PieChart } from 'recharts'
+
+import { PanelCard } from '@/components/panel-card'
+import { Badge } from '@/components/reui/badge'
+import {
+ ChartContainer,
+ type ChartConfig,
+} from '@evobgp/ui/components/chart'
+import type { BreakdownSlice } from '@/lib/metrics'
+
+/** chart-27 / chart-13 inspired donut in PanelCard. */
+export function DonutBreakdownCard({
+ title,
+ description,
+ slices,
+ centerLabel,
+ badge,
+}: {
+ title: string
+ description?: string
+ slices: BreakdownSlice[]
+ centerLabel: string
+ badge?: string
+}) {
+ const total = slices.reduce((sum, s) => sum + s.count, 0)
+ const chartConfig = slices.reduce((acc, slice) => {
+ acc[slice.key] = { label: slice.label, color: slice.color }
+ return acc
+ }, {})
+ const data = slices.map((slice) => ({ ...slice, fill: slice.color, share: slice.count }))
+
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/components/patterns/illustrated-empty-state.tsx b/apps/web/src/components/patterns/illustrated-empty-state.tsx
new file mode 100644
index 0000000..c39798f
--- /dev/null
+++ b/apps/web/src/components/patterns/illustrated-empty-state.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+
+import { IconStack } from '@/components/reui/icon-stack'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import {
+ Empty,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@evobgp/ui/components/empty'
+
+/** empty-state-11 pattern adapted to Card surface. */
+export function IllustratedEmptyState({
+ title,
+ description,
+ icon: Icon,
+ action,
+}: {
+ title: string
+ description: string
+ icon: LucideIcon
+ action?: ReactNode
+}) {
+ return (
+
+
+ {action ?
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/components/patterns/index.ts b/apps/web/src/components/patterns/index.ts
new file mode 100644
index 0000000..2b750b4
--- /dev/null
+++ b/apps/web/src/components/patterns/index.ts
@@ -0,0 +1,6 @@
+export { DonutBreakdownCard } from './donut-breakdown-card'
+export { IllustratedEmptyState } from './illustrated-empty-state'
+export { KpiSparklineCard, type KpiSparklineMetric } from './kpi-sparkline-card'
+export { PanelCorners } from './panel-corners'
+export { ProjectsEmptyState } from './projects-empty-state'
+export { SegmentedProgressCard, type SegmentStat } from './segmented-progress-card'
diff --git a/apps/web/src/components/patterns/kpi-sparkline-card.tsx b/apps/web/src/components/patterns/kpi-sparkline-card.tsx
new file mode 100644
index 0000000..3ecd64a
--- /dev/null
+++ b/apps/web/src/components/patterns/kpi-sparkline-card.tsx
@@ -0,0 +1,77 @@
+import type { ComponentProps } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+import { CardDotField } from '@/components/dashboard/card-dot-field'
+import { PanelCorners } from '@/components/patterns/panel-corners'
+import { toneStyles, type MetricTone } from '@/components/patterns/metric-tone-styles'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+
+export type KpiSparklineMetric = {
+ id: string
+ title: string
+ label: string
+ value: string
+ delta: string
+ deltaVariant: ComponentProps['variant']
+ detail: string
+ tone: MetricTone
+ sparkline: readonly number[]
+}
+
+function Sparkline({ values, color }: { values: readonly number[]; color: string }) {
+ const min = Math.min(...values)
+ const max = Math.max(...values)
+ const spread = Math.max(1, max - min)
+ const points = values
+ .map((value, index) => {
+ const x = (index / (values.length - 1)) * 72
+ const y = 28 - ((value - min) / spread) * 22
+ return `${x.toFixed(1)},${y.toFixed(1)}`
+ })
+ .join(' ')
+
+ return (
+
+ )
+}
+
+/** KPI card with sparkline (dashboard-5 / chart-15 pattern, Card surface). */
+export function KpiSparklineCard({ metric }: { metric: KpiSparklineMetric }) {
+ const tone = toneStyles[metric.tone]
+
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/web/src/components/patterns/metric-tone-styles.ts b/apps/web/src/components/patterns/metric-tone-styles.ts
new file mode 100644
index 0000000..55b8c0e
--- /dev/null
+++ b/apps/web/src/components/patterns/metric-tone-styles.ts
@@ -0,0 +1,8 @@
+export type MetricTone = 'danger' | 'success' | 'warning' | 'info'
+
+export const toneStyles: Record = {
+ danger: { stroke: 'var(--color-destructive)' },
+ success: { stroke: 'var(--color-success)' },
+ warning: { stroke: 'var(--color-warning)' },
+ info: { stroke: 'var(--color-info)' },
+}
diff --git a/apps/web/src/components/patterns/panel-corners.tsx b/apps/web/src/components/patterns/panel-corners.tsx
new file mode 100644
index 0000000..8d42379
--- /dev/null
+++ b/apps/web/src/components/patterns/panel-corners.tsx
@@ -0,0 +1,15 @@
+/** Corner accents from ReUI dashboard-5 block. */
+export function PanelCorners() {
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/apps/web/src/components/patterns/projects-empty-state.tsx b/apps/web/src/components/patterns/projects-empty-state.tsx
new file mode 100644
index 0000000..9057096
--- /dev/null
+++ b/apps/web/src/components/patterns/projects-empty-state.tsx
@@ -0,0 +1,22 @@
+import { Link } from '@tanstack/react-router'
+import { Boxes, Plus } from 'lucide-react'
+
+import { IllustratedEmptyState } from '@/components/patterns/illustrated-empty-state'
+import { Button } from '@evobgp/ui/components/button'
+
+/** empty-state-3 pattern for first module. */
+export function ProjectsEmptyState() {
+ return (
+
+
+ )
+}
diff --git a/apps/web/src/components/query-state.tsx b/apps/web/src/components/query-state.tsx
index b7db781..fac6d8b 100644
--- a/apps/web/src/components/query-state.tsx
+++ b/apps/web/src/components/query-state.tsx
@@ -13,6 +13,7 @@ interface QueryStateProps {
emptyTitle?: string
emptyDescription?: string
emptyAction?: ReactNode
+ emptyContent?: ReactNode
onRetry?: () => void
skeleton?: ReactNode
children: (data: T) => ReactNode
@@ -27,6 +28,7 @@ export function QueryState({
emptyTitle = 'Нет данных',
emptyDescription,
emptyAction,
+ emptyContent,
onRetry,
skeleton,
children,
@@ -52,6 +54,7 @@ export function QueryState({
)
}
if (empty || data == null) {
+ if (emptyContent) return <>{emptyContent}
return
+
-
+ B
+
+
+ EvoBGP
+ Плоскость управления
+
- EvoBGP
- Плоскость управления
+
-
+
-
-
-
+
+
+
+ )
+}
+
+/** Live system monitor popover (app-shell-7 pattern, EvoBGP API data). */
+export function SystemMonitorPopover() {
+ const healthQ = useQuery({ ...monitoringHealthQueryOptions(), refetchInterval: 30_000 })
+ const peersQ = useQuery({ ...overviewPeersQueryOptions(), refetchInterval: 30_000 })
+ const jobsQ = useQuery({ ...overviewJobsQueryOptions(), refetchInterval: 30_000 })
+ const birdQ = useQuery({ ...networkBirdQueryOptions(), refetchInterval: 30_000 })
+
+ const peers = peersQ.data?.items ?? []
+ const jobs = jobsQ.data?.items ?? []
+ const network = aggregateNetworkMetrics(peers, [])
+ const bgpPct =
+ network.peersEnabled > 0
+ ? Math.round((network.peersEstablished / network.peersEnabled) * 100)
+ : 0
+ const failedJobs = jobs.filter((j) =>
+ ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+ ).length
+ const runningJobs = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+ const healthOk = healthQ.data?.ok ?? false
+ const birdRatio =
+ birdQ.data && birdQ.data.bgp_sessions_total > 0
+ ? Math.round((birdQ.data.bgp_established / birdQ.data.bgp_sessions_total) * 100)
+ : null
+
+ const metrics = useMemo
+
+
+
+ -
+
+ {metric.icon}
+
+
+ {metric.label}
+
+
+ {metric.value}
+ {metric.unit}
+
+
+ Монитор EvoBGP
+
+ {new Date().toLocaleTimeString('ru-RU')}
+
+
+
+ {metrics.map((metric, i) => (
+
+ = 2 && 'border-border border-t',
+ )}
+ >
+
+ ))}
+
+ Активных задач: {runningJobs}
+ {' · '}
+ Пиров в каталоге:{' '}
+ {network.peersTotal}
+
+
+ setTab(v as PeerTab)}>
+
+ Все ({counts.all})
+ Established ({counts.established})
+ Ожидание ({counts.pending})
+ Выключены ({counts.disabled})
+
+
+
+ setTab(v as JobTab)}>
+
+ Все ({counts.all})
+ Активные ({counts.active})
+ Успешные ({counts.succeeded})
+ Ошибки ({counts.failed})
+
+
+
+
+ {total === 0 ? (
+
+ {badge}
+
+ ) : null}
+
+ Нет данных
+ ) : ( + <> +
+
+
+
+ {data.map((entry) => (
+ |
+ ))}
+
+
+
+
+
+ {centerLabel}
+ {total}
+
+ -
+ {slices.map((slice) => {
+ const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
+ return (
+
- + + + {slice.label} + + + {slice.count} ({pct}%) + + + ) + })} +
{action}
: null}
+
+ {title}
+ {description}
+
+
+ {metric.title}
+ {metric.label}
+
+
+
+
+
+
+ {metric.value}
+
+
+
+ {metric.delta}
+
+ {metric.detail}
+
+
+
+
+
+ {footer ?
+
+
+ {primary.value}
+ {primary.badge}
+
+ {primary.label}
+
+
+
+
+
+
+ {secondary.value}
+
+ {secondary.label}
+
+ {Array.from({ length: segments }).map((_, i) => (
+
+ ))}
+
+ {footer}
: null}
+