feat: integrate ReUI components and update MCP configuration

- Added ReUI configuration to .mcp.json and .cursor/mcp.json for component integration. - Updated pnpm-lock.yaml with new dependencies including react-phone-number-input and adjustments to existing packages. - Enhanced SKILL.md documentation for ReUI to clarify usage and features. - Removed unused components (ChartCard, DataGridCard, etc.) to streamline the codebase. - Adjusted domain-related components and filters for improved functionality and UI consistency. Co-authored-by: Cursor <[email protected]>
2026-07-10 00:37:40 +07:00
parent 59163bfab5
commit 29e57666e0
225 changed files with 21908 additions and 4476 deletions
@@ -0,0 +1,135 @@
+import type { ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import { cn } from '@cfdm/ui/lib/utils'
+import { Item, ItemMedia } from '@cfdm/ui/components/item'
+
+export interface OpsKpiCard {
+  id: string
+  typeLabel: string
+  title: string
+  metricLabel: string
+  value: string | number
+  hint?: ReactNode
+  icon: ReactNode
+  iconBg?: string
+}
+
+interface OpsDashboardProps {
+  title?: string
+  description?: string
+  kpiCards: OpsKpiCard[]
+  charts: ReactNode
+  queue: ReactNode
+}
+
+function KpiCardItem({ card }: { card: OpsKpiCard }) {
+  return (
+    <FramePanel>
+      <div className="flex items-center gap-2.5">
+        <Item
+          className={cn(
+            'p-0',
+            'border-background flex size-10 items-center justify-center border-2 [background-image:radial-gradient(48.05%_48.05%_at_50%_5.95%,rgba(255,255,255,0.4)_0%,rgba(255,255,255,0)_100%)] shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5 [&_svg]:text-white',
+            card.iconBg ?? 'bg-chart-1',
+          )}
+        >
+          <ItemMedia variant="icon" className="size-auto">
+            {card.icon}
+          </ItemMedia>
+        </Item>
+        <div className="flex min-w-0 flex-col gap-1">
+          <p className="text-muted-foreground text-sm leading-tight">
+            {card.typeLabel}
+          </p>
+          <h3 className="truncate text-sm leading-tight font-medium">{card.title}</h3>
+        </div>
+      </div>
+      <div className="mt-5 space-y-1.5">
+        <p className="text-muted-foreground text-sm leading-tight">
+          {card.metricLabel}
+        </p>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xl font-medium tracking-tight tabular-nums">
+            {card.value}
+          </span>
+          {card.hint}
+        </div>
+      </div>
+    </FramePanel>
+  )
+}
+
+export function OpsDashboard({
+  title = 'Панель управления',
+  description = 'Обзор доменов, групп, сервисов и сертификатов Cloudflare',
+  kpiCards,
+  charts,
+  queue,
+}: OpsDashboardProps) {
+  return (
+    <div className="text-foreground @container mx-auto flex w-full flex-col gap-4 md:gap-6">
+      <header className="px-1">
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
+          {description}
+        </p>
+      </header>
+
+      <section aria-label="Ключевые метрики">
+        <Frame className="@container w-full">
+          <div className="grid gap-1 @2xl:grid-cols-2 @5xl:grid-cols-4">
+            {kpiCards.map((card) => (
+              <KpiCardItem key={card.id} card={card} />
+            ))}
+          </div>
+        </Frame>
+      </section>
+
+      <section
+        aria-label="Аналитика"
+        className="grid min-w-0 items-stretch gap-4 @5xl:grid-cols-2"
+      >
+        {charts}
+      </section>
+
+      <section aria-label="Требуют внимания">
+        <Frame dense spacing="sm" className="w-full">
+          <FrameHeader>
+            <FrameTitle>Требуют внимания</FrameTitle>
+            <FrameDescription>
+              Истекающие сертификаты и домены без группы
+            </FrameDescription>
+          </FrameHeader>
+          <FramePanel>{queue}</FramePanel>
+        </Frame>
+      </section>
+    </div>
+  )
+}
+
+export function OpsDashboardHintLink({
+  to,
+  search,
+  children,
+}: {
+  to: string
+  search?: Record<string, unknown>
+  children: ReactNode
+}) {
+  return (
+    <Link
+      to={to}
+      search={search}
+      className="text-primary text-sm font-medium hover:underline"
+    >
+      {children}
+    </Link>
+  )
+}