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/integrations/app-switcher-editor.tsx

@@ -4,9 +4,9 @@ import { PlusIcon, Trash2Icon } from 'lucide-react'
 import { appSwitcherConfigSchema, type AppSwitcherConfig } from '@cfdm/shared'
 
 import { Button } from '@cfdm/ui/components/button'
-import { AppCard, AppCardContent, AppCardDescription, AppCardHeader, AppCardTitle } from '@/components/app-card'
 import { FieldGroup } from '@cfdm/ui/components/field'
 import { Input } from '@cfdm/ui/components/input'
+import { ItemSeparator } from '@cfdm/ui/components/item'
 import { FormFieldSimple } from '@/components/form-field'
 import { SelectField } from '@/components/select-field'
 import { LoadingButton } from '@/components/loading-button'
@@ -33,29 +33,31 @@ export function AppSwitcherEditor({ defaultValues, onSave, isSaving }: AppSwitch
   const { fields, append, remove } = useFieldArray({ control: form.control, name: 'apps' })
 
   return (
-    <AppCard>
-      <AppCardHeader>
-        <AppCardTitle>Связанные приложения</AppCardTitle>
-        <AppCardDescription>URL для переключателя в sidebar</AppCardDescription>
-      </AppCardHeader>
-      <AppCardContent>
-        <form
-          className="flex flex-col gap-4"
-          onSubmit={(e) => void form.handleSubmit((values) => onSave(values))(e)}
-        >
-          <FieldGroup>
-            <FormFieldSimple label="Заголовок меню" htmlFor="menu-label">
-              <Input id="menu-label" {...form.register('menuLabel')} />
-            </FormFieldSimple>
-            {fields.map((field, index) => (
-              <div key={field.id} className="grid gap-3 rounded-lg border p-3 md:grid-cols-2">
+    <form
+      className="flex flex-col gap-4"
+      onSubmit={(e) => void form.handleSubmit((values) => onSave(values))(e)}
+    >
+      <FieldGroup>
+        <FormFieldSimple label="Заголовок меню" htmlFor="menu-label">
+          <Input id="menu-label" {...form.register('menuLabel')} />
+        </FormFieldSimple>
+
+        <div className="flex flex-col gap-3">
+          {fields.map((field, index) => (
+            <div key={field.id}>
+              {index > 0 ? <ItemSeparator className="my-3" /> : null}
+              <div className="grid gap-3 sm:grid-cols-2">
                 <FormFieldSimple label="ID" htmlFor={`app-id-${index}`}>
                   <Input id={`app-id-${index}`} {...form.register(`apps.${index}.id`)} />
                 </FormFieldSimple>
                 <FormFieldSimple label="Название" htmlFor={`app-name-${index}`}>
                   <Input id={`app-name-${index}`} {...form.register(`apps.${index}.name`)} />
                 </FormFieldSimple>
-                <FormFieldSimple label="URL" htmlFor={`app-url-${index}`} className="md:col-span-2">
+                <FormFieldSimple
+                  label="URL"
+                  htmlFor={`app-url-${index}`}
+                  className="sm:col-span-2"
+                >
                   <Input id={`app-url-${index}`} {...form.register(`apps.${index}.url`)} />
                 </FormFieldSimple>
                 <FormFieldSimple label="Иконка" htmlFor={`app-icon-${index}`}>
@@ -77,34 +79,42 @@ export function AppSwitcherEditor({ defaultValues, onSave, isSaving }: AppSwitch
                     size="icon"
                     disabled={fields.length <= 1}
                     onClick={() => remove(index)}
+                    aria-label="Удалить приложение"
                   >
                     <Trash2Icon className="size-4" />
                   </Button>
                 </div>
               </div>
-            ))}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-fit"
-              onClick={() =>
-                append({
-                  id: `app-${fields.length + 1}`,
-                  name: 'Приложение',
-                  url: 'http://localhost:3000',
-                  icon: 'server',
-                })
-              }
-            >
-              <PlusIcon data-icon="inline-start" />
-              Добавить приложение
-            </Button>
-          </FieldGroup>
-          <LoadingButton type="submit" className="w-fit" isLoading={isSaving} disabled={!form.formState.isDirty}>
-            Сохранить приложения
-          </LoadingButton>
-        </form>
-      </AppCardContent>
-    </AppCard>
+            </div>
+          ))}
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="w-fit"
+          onClick={() =>
+            append({
+              id: `app-${fields.length + 1}`,
+              name: 'Приложение',
+              url: 'http://localhost:3000',
+              icon: 'server',
+            })
+          }
+        >
+          <PlusIcon data-icon="inline-start" />
+          Добавить приложение
+        </Button>
+      </FieldGroup>
+
+      <LoadingButton
+        type="submit"
+        className="w-fit"
+        isLoading={isSaving}
+        disabled={!form.formState.isDirty}
+      >
+        Сохранить приложения
+      </LoadingButton>
+    </form>
   )
 }

apps/web/src/components/integrations/vps-tracker-integration-card.tsx

@@ -3,13 +3,13 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { toast } from 'sonner'
 
-import { AppCard, AppCardContent, AppCardDescription, AppCardHeader, AppCardTitle } from '@/components/app-card'
+import { Badge } from '@/components/reui/badge'
 import { FieldGroup } from '@cfdm/ui/components/field'
 import { Input } from '@cfdm/ui/components/input'
 import { FormFieldSimple } from '@/components/form-field'
 import { SelectField } from '@/components/select-field'
 import { LoadingButton } from '@/components/loading-button'
-import { AppButton } from '@/components/app-button'
+import { Button } from '@cfdm/ui/components/button'
 import { api } from '@/lib/api-client'
 
 const formSchema = z.object({
@@ -55,72 +55,81 @@ export function VpsTrackerIntegrationCard({
     else toast.error(result.error ?? 'Ошибка проверки')
   }
 
+  const syncBadgeVariant = settings?.vpsTrackerSyncEnabled ? 'success' : 'secondary'
+
   return (
-    <AppCard>
-      <AppCardHeader>
-        <AppCardTitle>VPS Tracker</AppCardTitle>
-        <AppCardDescription>
-          Исходящая синхронизация доменов и сервисов. URL API VPS Tracker (обычно порт 3001).
-        </AppCardDescription>
-      </AppCardHeader>
-      <AppCardContent>
-        <form className="flex flex-col gap-4" onSubmit={(e) => void form.handleSubmit((values) => onSave(values))(e)}>
-          <FieldGroup>
-            <FormFieldSimple label="URL VPS Tracker" htmlFor="vps-url">
-              <Input
-                id="vps-url"
-                placeholder="http://192.168.100.67:3001"
-                {...form.register('vpsTrackerUrl')}
+    <form
+      className="flex flex-col gap-4"
+      onSubmit={(e) => void form.handleSubmit((values) => onSave(values))(e)}
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge variant={syncBadgeVariant}>
+          {settings?.vpsTrackerSyncEnabled ? 'Синхронизация включена' : 'Синхронизация выключена'}
+        </Badge>
+        {settings?.vpsTrackerIntegrationTokenSet ? (
+          <Badge variant="info">Токен настроен</Badge>
+        ) : (
+          <Badge variant="warning">Токен не задан</Badge>
+        )}
+      </div>
+
+      <FieldGroup>
+        <FormFieldSimple label="URL VPS Tracker" htmlFor="vps-url">
+          <Input
+            id="vps-url"
+            placeholder="http://192.168.100.67:3001"
+            {...form.register('vpsTrackerUrl')}
+          />
+        </FormFieldSimple>
+        <FormFieldSimple label="Integration token" htmlFor="vps-token">
+          <Input
+            id="vps-token"
+            type="password"
+            autoComplete="new-password"
+            placeholder={
+              settings?.vpsTrackerIntegrationTokenSet
+                ? 'Токен установлен — введите новый для замены'
+                : 'Тот же токен, что в VPS Tracker'
+            }
+            {...form.register('vpsTrackerIntegrationToken')}
+          />
+        </FormFieldSimple>
+        <Controller
+          control={form.control}
+          name="vpsTrackerSyncEnabled"
+          render={({ field }) => (
+            <FormFieldSimple label="Синхронизация" htmlFor="vps-sync">
+              <SelectField
+                triggerId="vps-sync"
+                triggerClassName="w-32"
+                value={field.value ? 'on' : 'off'}
+                onValueChange={(v) => field.onChange((v ?? 'on') === 'on')}
+                options={[
+                  { value: 'on', label: 'Вкл' },
+                  { value: 'off', label: 'Выкл' },
+                ]}
               />
             </FormFieldSimple>
-            <FormFieldSimple label="Integration token" htmlFor="vps-token">
-              <Input
-                id="vps-token"
-                type="password"
-                autoComplete="new-password"
-                placeholder={
-                  settings?.vpsTrackerIntegrationTokenSet
-                    ? 'Токен установлен — введите новый для замены'
-                    : 'Тот же токен, что в VPS Tracker'
-                }
-                {...form.register('vpsTrackerIntegrationToken')}
-              />
-            </FormFieldSimple>
-            <Controller
-              control={form.control}
-              name="vpsTrackerSyncEnabled"
-              render={({ field }) => (
-                <FormFieldSimple label="Синхронизация включена" htmlFor="vps-sync">
-                  <SelectField
-                    triggerId="vps-sync"
-                    triggerClassName="w-32"
-                    value={field.value ? 'on' : 'off'}
-                    onValueChange={(v) => field.onChange((v ?? 'on') === 'on')}
-                    options={[
-                      { value: 'on', label: 'Вкл' },
-                      { value: 'off', label: 'Выкл' },
-                    ]}
-                  />
-                </FormFieldSimple>
-              )}
-            />
-            {settings?.vpsTrackerLastSyncAt ? (
-              <p className="text-sm text-muted-foreground">
-                Последний sync:{' '}
-                {new Date(settings.vpsTrackerLastSyncAt).toLocaleString('ru-RU')}
-              </p>
-            ) : null}
-          </FieldGroup>
-          <div className="flex flex-wrap gap-2">
-            <LoadingButton type="submit" isLoading={isSaving} disabled={!form.formState.isDirty}>
-              Сохранить
-            </LoadingButton>
-            <AppButton type="button" variant="outline" onClick={() => void handleTest()}>
-              Проверить связь
-            </AppButton>
-          </div>
-        </form>
-      </AppCardContent>
-    </AppCard>
+          )}
+        />
+        {settings?.vpsTrackerLastSyncAt ? (
+          <p className="text-muted-foreground text-sm">
+            Последний sync:{' '}
+            {new Date(settings.vpsTrackerLastSyncAt).toLocaleString('ru-RU')}
+          </p>
+        ) : (
+          <p className="text-muted-foreground text-sm">Синхронизация ещё не выполнялась</p>
+        )}
+      </FieldGroup>
+
+      <div className="flex flex-wrap gap-2">
+        <LoadingButton type="submit" isLoading={isSaving} disabled={!form.formState.isDirty}>
+          Сохранить
+        </LoadingButton>
+        <Button type="button" variant="outline" onClick={() => void handleTest()}>
+          Проверить связь
+        </Button>
+      </div>
+    </form>
   )
 }

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>
   )