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]>
2026-07-10 01:10:34 +07:00
parent 1de497d4b4
commit 781c88175c
9 changed files with 462 additions and 325 deletions
@@ -2,16 +2,7 @@ import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Label,
-  Pie,
-  PieChart,
-  XAxis,
-} from 'recharts'
-import {
+  AlertTriangleIcon,
  FolderTreeIcon,
  GlobeIcon,
  ServerIcon,
@@ -25,23 +16,13 @@ import {
  serviceGroupsQueryOptions,
 } from '@/queries'
 import { PageShell } from '@/components/page-shell'
-import { OpsDashboard, OpsDashboardHintLink } from '@/components/reui-kit'
 import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
+  CertStatusChart,
+  GroupDomainsChart,
+  OpsDashboard,
+  OpsDashboardHintLink,
+} from '@/components/reui-kit'
 import { StatusBadge } from '@/components/status-badge'
-import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from '@cfdm/ui/components/chart'
 import {
  Item,
  ItemContent,
@@ -62,27 +43,14 @@ export const Route = createFileRoute('/_auth/')({
  component: DashboardPage,
 })

-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 KPI_ICON_BG = ['bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4']

-const groupChartConfig = {
-  count: { label: 'Домены', color: 'var(--chart-1)' },
-} satisfies ChartConfig
-
-const KPI_ICON_BG = [
-  'bg-chart-1',
-  'bg-chart-2',
-  'bg-chart-3',
-  'bg-chart-4',
-]
+function countByStatus(summary: [string, number][] | undefined, statuses: string[]) {
+  if (!summary) return 0
+  return summary
+    .filter(([status]) => statuses.includes(status))
+    .reduce((sum, [, count]) => sum + count, 0)
+}

 function DashboardPage() {
  const { data: domains, isLoading: domainsLoading } = useQuery(domainsListQueryOptions())
@@ -95,6 +63,9 @@ function DashboardPage() {
    (serviceData?.groups.reduce((sum, g) => sum + g.services.length, 0) ?? 0) +
    (serviceData?.ungrouped.length ?? 0)

+  const groupedServiceCount =
+    serviceData?.groups.reduce((sum, g) => sum + g.services.length, 0) ?? 0
+
  const isLoading = domainsLoading || summaryLoading

  const statusChartData = useMemo(
@@ -115,6 +86,11 @@ function DashboardPage() {

  const [nowMs] = useState(() => Date.now())

+  const ungroupedCount = useMemo(
+    () => (domains ?? []).filter((d) => d.group_id == null).length,
+    [domains],
+  )
+
  const expiringCerts = useMemo(() => {
    const warnMs = 14 * 24 * 60 * 60 * 1000
    return (certs ?? [])
@@ -130,6 +106,9 @@ function DashboardPage() {
    [domains],
  )

+  const certWarnings = countByStatus(summary, ['warning', 'expired', 'error'])
+  const certOk = countByStatus(summary, ['active', 'ok'])
+
  const kpiCards = [
    {
      id: 'domains',
@@ -137,6 +116,10 @@ function DashboardPage() {
      title: 'Домены',
      metricLabel: 'Импортированные зоны',
      value: domains?.length ?? 0,
+      detail:
+        ungroupedCount > 0
+          ? `${ungroupedCount} без группы`
+          : 'Все домены распределены по группам',
      icon: <GlobeIcon aria-hidden="true" />,
      iconBg: KPI_ICON_BG[0],
      hint: <OpsDashboardHintLink to="/domains">Управление</OpsDashboardHintLink>,
@@ -147,6 +130,7 @@ function DashboardPage() {
      title: 'Группы',
      metricLabel: 'Группы доменов',
      value: groups?.length ?? 0,
+      detail: `${groupChartData.filter((g) => g.count > 0).length} с активными зонами`,
      icon: <FolderTreeIcon aria-hidden="true" />,
      iconBg: KPI_ICON_BG[1],
      hint: <OpsDashboardHintLink to="/groups">Канбан</OpsDashboardHintLink>,
@@ -157,6 +141,10 @@ function DashboardPage() {
      title: 'Сервисы',
      metricLabel: 'Привязки и сервисы',
      value: serviceCount,
+      detail:
+        serviceData?.ungrouped.length
+          ? `${serviceData.ungrouped.length} без группы · ${groupedServiceCount} в группах`
+          : `${groupedServiceCount} в группах`,
      icon: <ServerIcon aria-hidden="true" />,
      iconBg: KPI_ICON_BG[2],
      hint: (
@@ -171,6 +159,10 @@ function DashboardPage() {
      title: 'Сертификаты',
      metricLabel: 'Мониторинг TLS',
      value: certs?.length ?? 0,
+      detail:
+        certWarnings > 0
+          ? `${certOk} в норме · ${certWarnings} требуют внимания`
+          : `${certOk} в норме`,
      icon: <ShieldCheckIcon aria-hidden="true" />,
      iconBg: KPI_ICON_BG[3],
      hint: <OpsDashboardHintLink to="/certificates">Мониторинг</OpsDashboardHintLink>,
@@ -191,110 +183,29 @@ function DashboardPage() {
        kpiCards={kpiCards}
        charts={
          <>
-            <Frame dense spacing="sm" className="h-full w-full">
-              <FrameHeader>
-                <FrameTitle>Статусы сертификатов</FrameTitle>
-                <FrameDescription>Распределение по последней проверке</FrameDescription>
-              </FrameHeader>
-              <FramePanel>
-                {statusChartData.length === 0 ? (
-                  <p className="text-muted-foreground text-sm">Нет данных</p>
-                ) : (
-                  <ChartContainer
-                    config={statusChartConfig}
-                    className="mx-auto aspect-square h-64"
-                  >
-                    <PieChart>
-                      <ChartTooltip
-                        content={<ChartTooltipContent nameKey="status" hideLabel />}
-                      />
-                      <Pie
-                        data={statusChartData}
-                        dataKey="count"
-                        nameKey="status"
-                        innerRadius={60}
-                        strokeWidth={2}
-                      >
-                        {statusChartData.map((entry) => {
-                          const cfg = (statusChartConfig as Record<string, { color?: string }>)[
-                            entry.status
-                          ]
-                          return (
-                            <Cell
-                              key={entry.status}
-                              fill={cfg?.color ?? 'var(--chart-1)'}
-                            />
-                          )
-                        })}
-                        <Label
-                          content={({ viewBox }) => {
-                            if (!viewBox || !('cx' in viewBox)) return null
-                            const total = statusChartData.reduce(
-                              (sum, entry) => sum + entry.count,
-                              0,
-                            )
-                            return (
-                              <text
-                                x={viewBox.cx}
-                                y={viewBox.cy}
-                                textAnchor="middle"
-                                dominantBaseline="middle"
-                                className="fill-foreground text-2xl font-semibold tabular-nums"
-                              >
-                                {total}
-                              </text>
-                            )
-                          }}
-                        />
-                      </Pie>
-                      <ChartLegend content={<ChartLegendContent nameKey="status" />} />
-                    </PieChart>
-                  </ChartContainer>
-                )}
-              </FramePanel>
-            </Frame>
-
-            <Frame dense spacing="sm" className="h-full w-full">
-              <FrameHeader>
-                <FrameTitle>Домены по группам</FrameTitle>
-                <FrameDescription>Топ-6 групп по количеству зон</FrameDescription>
-              </FrameHeader>
-              <FramePanel>
-                {groupChartData.length === 0 ? (
-                  <p className="text-muted-foreground text-sm">Нет групп</p>
-                ) : (
-                  <ChartContainer
-                    config={groupChartConfig}
-                    className="aspect-auto h-64 w-full"
-                  >
-                    <BarChart data={groupChartData}>
-                      <CartesianGrid vertical={false} />
-                      <XAxis
-                        dataKey="name"
-                        tickLine={false}
-                        axisLine={false}
-                        tickMargin={8}
-                        interval={0}
-                        height={36}
-                        tickFormatter={(value: string) =>
-                          value.length > 10 ? `${value.slice(0, 9)}…` : value
-                        }
-                      />
-                      <ChartTooltip content={<ChartTooltipContent nameKey="count" />} />
-                      <Bar dataKey="count" fill="var(--color-count)" radius={4} />
-                    </BarChart>
-                  </ChartContainer>
-                )}
-              </FramePanel>
-            </Frame>
+            <CertStatusChart data={statusChartData} />
+            <GroupDomainsChart data={groupChartData} />
          </>
        }
        queue={
          <div className="grid gap-4 lg:grid-cols-2">
            <div className="flex flex-col gap-2">
-              <h3 className="text-sm font-semibold">Истекающие сертификаты</h3>
+              <div className="flex items-center gap-2">
+                <AlertTriangleIcon
+                  className="text-warning size-4 shrink-0"
+                  aria-hidden="true"
+                />
+                <h3 className="text-sm font-semibold">Истекающие сертификаты</h3>
+                {expiringCerts.length > 0 ? (
+                  <span className="text-muted-foreground text-xs tabular-nums">
+                    ({expiringCerts.length})
+                  </span>
+                ) : null}
+              </div>
              {expiringCerts.length === 0 ? (
-                <p className="text-muted-foreground text-sm">В пределах 14 дней истечений нет</p>
+                <p className="text-muted-foreground text-sm">
+                  В пределах 14 дней истечений нет
+                </p>
              ) : (
                <ItemGroup className="gap-2">
                  {expiringCerts.map(({ cert, ts }) => (
@@ -314,7 +225,18 @@ function DashboardPage() {
              )}
            </div>
            <div className="flex flex-col gap-2">
-              <h3 className="text-sm font-semibold">Домены без группы</h3>
+              <div className="flex items-center gap-2">
+                <FolderTreeIcon
+                  className="text-muted-foreground size-4 shrink-0"
+                  aria-hidden="true"
+                />
+                <h3 className="text-sm font-semibold">Домены без группы</h3>
+                {ungroupedCount > 0 ? (
+                  <span className="text-muted-foreground text-xs tabular-nums">
+                    ({ungroupedCount})
+                  </span>
+                ) : null}
+              </div>
              {ungroupedDomains.length === 0 ? (
                <p className="text-muted-foreground text-sm">Все домены в группах</p>
              ) : (
@@ -328,7 +250,7 @@ function DashboardPage() {
                        <Link
                          to="/domains/$domainId"
                          params={{ domainId: String(domain.id) }}
-                          className="text-primary text-xs hover:underline"
+                          className="text-primary text-xs font-medium hover:underline"
                        >
                          Открыть
                        </Link>
@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { LayoutGridIcon } from 'lucide-react'
 import { toast } from 'sonner'
 import type { AppSettingsPatch } from '@cfdm/shared'

@@ -19,6 +20,8 @@ import {
  FramePanel,
  FrameTitle,
 } from '@/components/reui/frame'
+import { Item, ItemMedia } from '@cfdm/ui/components/item'
+import { ServerIcon } from 'lucide-react'

 type SettingsResponse = AppSettingsView & {
  id: string
@@ -55,20 +58,28 @@ function SettingsIntegrationsPage() {
      onRetry={() => refetch()}
    >
      {data ? (
-        <div className="flex flex-col gap-5">
+        <div className="flex w-full flex-col gap-5">
          <section className="flex flex-col gap-3">
-            <header className="flex flex-col gap-1">
+            <div className="flex flex-col gap-1">
              <h2 className="text-sm font-semibold">Подключённые приложения</h2>
              <p className="text-muted-foreground text-sm">
-                Переключение между сервисами и интеграция с VPS Tracker
+                Переключение между сервисами в sidebar
              </p>
-            </header>
-            <Frame dense spacing="sm">
-              <FrameHeader>
-                <FrameTitle>App Switcher</FrameTitle>
-                <FrameDescription>
-                  Быстрый переход между связанными приложениями
-                </FrameDescription>
+            </div>
+
+            <Frame>
+              <FrameHeader className="flex-row items-center gap-3">
+                <Item className="bg-muted/60 border-background flex size-10 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5">
+                  <ItemMedia variant="icon" className="size-auto">
+                    <LayoutGridIcon aria-hidden="true" />
+                  </ItemMedia>
+                </Item>
+                <div className="min-w-0">
+                  <FrameTitle>App Switcher</FrameTitle>
+                  <FrameDescription>
+                    Быстрый переход между связанными приложениями
+                  </FrameDescription>
+                </div>
              </FrameHeader>
              <FramePanel>
                <AppSwitcherEditor
@@ -81,18 +92,24 @@ function SettingsIntegrationsPage() {
          </section>

          <section className="flex flex-col gap-3">
-            <header className="flex flex-col gap-1">
+            <div className="flex flex-col gap-1">
              <h2 className="text-sm font-semibold">Внешние интеграции</h2>
              <p className="text-muted-foreground text-sm">
-                Синхронизация данных с VPS Tracker
+                Синхронизация доменов и сервисов с VPS Tracker
              </p>
-            </header>
-            <Frame dense spacing="sm">
-              <FrameHeader>
-                <FrameTitle>VPS Tracker</FrameTitle>
-                <FrameDescription>
-                  URL, токен и расписание синхронизации
-                </FrameDescription>
+            </div>
+
+            <Frame>
+              <FrameHeader className="flex-row items-center gap-3">
+                <Item className="bg-muted/60 border-background flex size-10 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-5">
+                  <ItemMedia variant="icon" className="size-auto">
+                    <ServerIcon aria-hidden="true" />
+                  </ItemMedia>
+                </Item>
+                <div className="min-w-0">
+                  <FrameTitle>VPS Tracker</FrameTitle>
+                  <FrameDescription>URL, токен и расписание синхронизации</FrameDescription>
+                </div>
              </FrameHeader>
              <FramePanel>
                <VpsTrackerIntegrationCard
@@ -1,4 +1,4 @@
-import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 import { SettingsShell } from '@/components/reui-kit'

 export const Route = createFileRoute('/_auth/settings')({
@@ -6,9 +6,5 @@ export const Route = createFileRoute('/_auth/settings')({
 })

 function SettingsLayout() {
-  return (
-    <SettingsShell>
-      <Outlet />
-    </SettingsShell>
-  )
+  return <SettingsShell />
 }