feat(web): enhance integration settings and UI components

- Updated AppSwitcherEditor to include item separators for better visual organization.
- Improved VpsTrackerIntegrationCard with badges indicating synchronization status and token configuration.
- Refactored SettingsShell to streamline layout and enhance accessibility with improved navigation.
- Added detail fields to KPI cards in DashboardPage for clearer information presentation.
- Introduced new components in the ReUI kit for better integration and user experience.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/reui-kit/dashboard-analytics.tsx

@@ -0,0 +1,184 @@
+import { useMemo } from 'react'
+import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis } from 'recharts'
+
+import { StatusBadge } from '@/components/status-badge'
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from '@/components/reui/frame'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@cfdm/ui/components/chart'
+import { Separator } from '@cfdm/ui/components/separator'
+import { cn } from '@cfdm/ui/lib/utils'
+
+const statusChartConfig = {
+  count: { label: 'Сертификаты' },
+  active: { label: 'Активен', color: 'var(--success)' },
+  ok: { label: 'OK', color: 'var(--success)' },
+  warning: { label: 'Предупреждение', color: 'var(--warning)' },
+  pending_push: { label: 'Ожидает', color: 'var(--info)' },
+  expired: { label: 'Истёк', color: 'var(--destructive)' },
+  error: { label: 'Ошибка', color: 'var(--destructive)' },
+  unknown: { label: 'Неизвестно', color: 'var(--muted-foreground)' },
+} satisfies ChartConfig
+
+const groupChartConfig = {
+  count: { label: 'Домены', color: 'var(--chart-1)' },
+} satisfies ChartConfig
+
+function statusColor(status: string) {
+  return (
+    (statusChartConfig as Record<string, { color?: string }>)[status]?.color ??
+    'var(--chart-1)'
+  )
+}
+
+interface CertStatusChartProps {
+  data: { status: string; count: number }[]
+}
+
+export function CertStatusChart({ data }: CertStatusChartProps) {
+  const total = useMemo(
+    () => data.reduce((sum, entry) => sum + entry.count, 0),
+    [data],
+  )
+
+  return (
+    <Frame dense spacing="sm" className="h-full w-full">
+      <FrameHeader>
+        <FrameTitle>Статусы сертификатов</FrameTitle>
+        <FrameDescription>Распределение по последней проверке</FrameDescription>
+      </FrameHeader>
+      <FramePanel fit>
+        {data.length === 0 ? (
+          <p className="text-muted-foreground text-sm">Нет данных о сертификатах</p>
+        ) : (
+          <div className="grid w-full gap-6 @md:grid-cols-[9rem_minmax(0,1fr)] @md:items-center">
+            <div className="relative mx-auto size-36 shrink-0">
+              <ChartContainer
+                config={statusChartConfig}
+                className="aspect-square size-36"
+                initialDimension={{ width: 144, height: 144 }}
+              >
+                <PieChart margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+                  <ChartTooltip
+                    content={<ChartTooltipContent nameKey="status" hideLabel />}
+                  />
+                  <Pie
+                    data={data}
+                    dataKey="count"
+                    nameKey="status"
+                    innerRadius={44}
+                    outerRadius={64}
+                    strokeWidth={2}
+                    stroke="var(--background)"
+                  >
+                    {data.map((entry) => (
+                      <Cell key={entry.status} fill={statusColor(entry.status)} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </ChartContainer>
+              <div
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 flex items-center justify-center"
+              >
+                <div className="flex flex-col items-center">
+                  <span className="text-muted-foreground text-xs">Всего</span>
+                  <span className="text-lg font-semibold tabular-nums">{total}</span>
+                </div>
+              </div>
+            </div>
+
+            <ul className="flex min-w-0 flex-col">
+              {data.map((entry, index) => (
+                <li key={entry.status}>
+                  <div className="flex items-center justify-between gap-3 py-2">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <span
+                        aria-hidden="true"
+                        className="size-2.5 shrink-0 rounded-full"
+                        style={{ backgroundColor: statusColor(entry.status) }}
+                      />
+                      <StatusBadge status={entry.status} />
+                    </div>
+                    <span className="text-sm font-medium tabular-nums">{entry.count}</span>
+                  </div>
+                  {index < data.length - 1 ? <Separator /> : null}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </FramePanel>
+    </Frame>
+  )
+}
+
+interface GroupDomainsChartProps {
+  data: { name: string; count: number }[]
+}
+
+export function GroupDomainsChart({ data }: GroupDomainsChartProps) {
+  return (
+    <Frame dense spacing="sm" className="h-full w-full">
+      <FrameHeader>
+        <FrameTitle>Домены по группам</FrameTitle>
+        <FrameDescription>Топ-6 групп по количеству зон</FrameDescription>
+      </FrameHeader>
+      <FramePanel fit>
+        {data.length === 0 ? (
+          <p className="text-muted-foreground text-sm">Нет групп с доменами</p>
+        ) : (
+          <div className="flex w-full flex-col gap-4">
+            <ChartContainer
+              config={groupChartConfig}
+              className="aspect-auto h-52 w-full min-h-52"
+              initialDimension={{ width: 480, height: 208 }}
+            >
+              <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="name"
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  interval={0}
+                  height={40}
+                  tickFormatter={(value: string) =>
+                    value.length > 12 ? `${value.slice(0, 11)}…` : value
+                  }
+                />
+                <ChartTooltip content={<ChartTooltipContent nameKey="count" />} />
+                <Bar dataKey="count" fill="var(--color-count)" radius={4} />
+              </BarChart>
+            </ChartContainer>
+
+            <ul className="grid gap-2 @sm:grid-cols-2">
+              {data.map((entry) => (
+                <li
+                  key={entry.name}
+                  className={cn(
+                    'bg-muted/40 flex items-center justify-between gap-2 rounded-lg border px-3 py-2',
+                  )}
+                >
+                  <span className="truncate text-sm font-medium">{entry.name}</span>
+                  <span className="text-muted-foreground shrink-0 text-sm tabular-nums">
+                    {entry.count}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </FramePanel>
+    </Frame>
+  )
+}

apps/web/src/components/reui-kit/index.ts

@@ -1,4 +1,5 @@
 export { applyFiltersToData, getActiveFilters, renderSingleSelectedLabel } from './filter-utils'
+export { CertStatusChart, GroupDomainsChart } from './dashboard-analytics'
 export { ResourcePage, type ResourcePageProps, type ResourcePageTab } from './resource-page'
 export { OpsDashboard, OpsDashboardHintLink, type OpsKpiCard } from './ops-dashboard'
 export { KanbanBoard, type KanbanBoardProps, type KanbanColumnConfig } from './kanban-board'

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -17,6 +17,7 @@ export interface OpsKpiCard {
   metricLabel: string
   value: string | number
   hint?: ReactNode
+  detail?: ReactNode
   icon: ReactNode
   iconBg?: string
 }
@@ -61,6 +62,9 @@ function KpiCardItem({ card }: { card: OpsKpiCard }) {
           </span>
           {card.hint}
         </div>
+        {card.detail ? (
+          <p className="text-muted-foreground text-xs leading-snug">{card.detail}</p>
+        ) : null}
       </div>
     </FramePanel>
   )
@@ -74,7 +78,7 @@ export function OpsDashboard({
   queue,
 }: OpsDashboardProps) {
   return (
-    <div className="text-foreground @container mx-auto flex w-full flex-col gap-4 md:gap-6">
+    <div className="text-foreground @container mx-auto flex w-full max-w-7xl 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">
@@ -94,7 +98,7 @@ export function OpsDashboard({
 
       <section
         aria-label="Аналитика"
-        className="grid min-w-0 items-stretch gap-4 @5xl:grid-cols-2"
+        className="grid min-w-0 auto-rows-fr items-start gap-4 @3xl:grid-cols-2"
       >
         {charts}
       </section>

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -4,12 +4,6 @@ import { SettingsIcon } from 'lucide-react'
 
 import { useIsMobile } from '@cfdm/ui/hooks/use-mobile'
 import { cn } from '@cfdm/ui/lib/utils'
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@cfdm/ui/components/tabs'
 import { PageShell } from '@/components/page-shell'
 
 export interface SettingsTabConfig {
@@ -32,23 +26,19 @@ interface SettingsShellProps {
   title?: string
   description?: string
   tabs?: SettingsTabConfig[]
-  children?: ReactNode
 }
 
 export function SettingsShell({
   title = 'Настройки',
   description = 'Интеграции и конфигурация приложения',
   tabs = DEFAULT_TABS,
-  children,
 }: SettingsShellProps) {
   const isMobile = useIsMobile()
   const pathname = useRouterState({ select: (s) => s.location.pathname })
-  const activeTab =
-    tabs.find((tab) => pathname.startsWith(tab.to))?.id ?? tabs[0]?.id ?? ''
 
   return (
     <PageShell>
-      <div className="flex w-full max-w-4xl flex-col gap-6">
+      <div className="mx-auto flex w-full max-w-4xl flex-col 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">
@@ -56,45 +46,49 @@ export function SettingsShell({
           </p>
         </header>
 
-        <Tabs value={activeTab} orientation={isMobile ? 'horizontal' : 'vertical'}>
-          <div
-            className={cn(
-              'flex gap-6',
-              isMobile ? 'flex-col' : 'flex-row items-start',
-            )}
-          >
-            <TabsList
-              variant="line"
+        <div
+          className={cn(
+            'flex gap-6',
+            isMobile ? 'flex-col' : 'flex-row items-start',
+          )}
+        >
+          {tabs.length > 1 ? (
+            <nav
+              aria-label="Разделы настроек"
               className={cn(
-                'h-auto w-full justify-start gap-1 bg-transparent p-0',
-                !isMobile && 'w-48 shrink-0 flex-col items-stretch',
+                'flex gap-1',
+                isMobile
+                  ? 'scrollbar-none -mx-1 overflow-x-auto pb-1'
+                  : 'w-44 shrink-0 flex-col',
               )}
             >
-              {tabs.map((tab) => (
-                <TabsTrigger
-                  key={tab.id}
-                  value={tab.id}
-                  className={cn(
-                    'justify-start gap-2 px-3 py-2',
-                    !isMobile && 'w-full',
-                  )}
-                  render={<Link to={tab.to} />}
-                >
-                  {tab.icon}
-                  {tab.label}
-                </TabsTrigger>
-              ))}
-            </TabsList>
+              {tabs.map((tab) => {
+                const isActive = pathname.startsWith(tab.to)
+                return (
+                  <Link
+                    key={tab.id}
+                    to={tab.to}
+                    className={cn(
+                      'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+                      isMobile && 'shrink-0',
+                      !isMobile && 'w-full',
+                      isActive
+                        ? 'bg-muted text-foreground font-medium'
+                        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+                    )}
+                  >
+                    {tab.icon}
+                    {tab.label}
+                  </Link>
+                )
+              })}
+            </nav>
+          ) : null}
 
-            <div className="min-w-0 flex-1">
-              {tabs.map((tab) => (
-                <TabsContent key={tab.id} value={tab.id} className="mt-0">
-                  {children ?? <Outlet />}
-                </TabsContent>
-              ))}
-            </div>
+          <div className="min-w-0 flex-1">
+            <Outlet />
           </div>
-        </Tabs>
+        </div>
       </div>
     </PageShell>
   )