feat(ipsec): управление IKEv2/IPsec VPN и клиентами из одного окна

- мастер инициализации сервера: CA и серверный сертификаты, peer/profile/proposal, пул, mode-config, policy-template, managed NAT masquerade
- клиенты по сертификату (RSA) и PSK: статический IP или из пула, онлайн-статус по active-peers
- скачивание .p12 и strongSwan .sswan с инструкцией, перекачка с новой passphrase
- история изменений (config_revisions, секция ipsec) и restore только managed-объектов
- привязка IPsec-клиентов к пользователям приложения по Common Name
- страница /ipsec с KPI и вкладками Клиенты/Сервер/CLI, сайдбар, command palette

components/ipsec/ipsec-users-grid.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import { useMemo, type ReactNode } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { IpsecClientDto } from "@mmapp/contracts/ipsec"
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import {
+  BadgeCheckIcon,
+  KeyRoundIcon,
+  Trash2Icon,
+  UsersIcon,
+  WifiIcon,
+} from "lucide-react"
+
+export interface IpsecUsersGridProps {
+  clients: IpsecClientDto[]
+  compactServer?: boolean
+  emptyAction?: ReactNode
+  onDownloadCert?: (row: IpsecClientDto) => void
+  onEdit?: (row: IpsecClientDto) => void
+  onDelete?: (row: IpsecClientDto) => void
+}
+
+function IpsecUsersGrid({
+  clients,
+  compactServer = false,
+  emptyAction,
+  onDownloadCert,
+  onEdit,
+  onDelete,
+}: IpsecUsersGridProps) {
+  const columns = useMemo<ColumnDef<IpsecClientDto>[]>(() => {
+    const cols: ColumnDef<IpsecClientDto>[] = [
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Клиент" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const c = row.original
+          return (
+            <div className="flex min-w-0 items-center gap-1.5">
+              <UsersIcon className="size-3.5 shrink-0 text-muted-foreground" />
+              <button
+                type="button"
+                className="truncate text-left font-medium hover:underline"
+                onClick={() => onEdit?.(c)}
+              >
+                {c.name}
+              </button>
+              {c.disabled ? (
+                <Badge variant="outline" className="ml-1 text-[10px]">выкл</Badge>
+              ) : null}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Клиент",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "auth",
+        accessorKey: "authMethod",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Аутентификация" />,
+        cell: ({ row }) => {
+          const cert = row.original.authMethod === "certificate"
+          return (
+            <div className="flex items-center gap-1.5 text-xs">
+              {cert ? (
+                <BadgeCheckIcon className="size-3.5 text-info" />
+              ) : (
+                <KeyRoundIcon className="size-3.5 text-muted-foreground" />
+              )}
+              {cert ? "Сертификат" : "PSK"}
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Аутентификация",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+    ]
+
+    if (!compactServer) {
+      cols.push({
+        id: "server",
+        accessorKey: "serverName",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-[11px] text-muted-foreground">
+            {row.original.serverName}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      })
+    }
+
+    cols.push(
+      {
+        id: "ip",
+        accessorFn: (row) => row.staticIp ?? "",
+        header: ({ column }) => <DataGridSortHeader column={column} title="IP" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "font-mono text-xs",
+              row.original.staticIp ? "text-foreground" : "text-muted-foreground",
+            )}
+          >
+            {row.original.staticIp ?? "из пула"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "IP",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "online",
+        accessorKey: "online",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1.5 whitespace-nowrap">
+            <span
+              className={cn(
+                "inline-flex size-1.5 rounded-full",
+                row.original.online ? "bg-success" : "bg-muted-foreground/40",
+              )}
+            />
+            <span className={cn("font-mono text-[11px]", row.original.online ? "text-success" : "text-muted-foreground")}>
+              {row.original.online ? row.original.activeAddress ?? "онлайн" : "офлайн"}
+            </span>
+          </div>
+        ),
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        size: 96,
+        cell: ({ row }) => {
+          const c = row.original
+          return (
+            <div className="flex justify-end gap-0.5">
+              {c.authMethod === "certificate" && onDownloadCert ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  aria-label="Скачать сертификат"
+                  title="Скачать .p12"
+                  onClick={() => onDownloadCert(c)}
+                >
+                  <WifiIcon className="size-3.5" />
+                </Button>
+              ) : null}
+              {onDelete ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 text-destructive"
+                  aria-label="Удалить клиента"
+                  onClick={() => onDelete(c)}
+                >
+                  <Trash2Icon className="size-3.5" />
+                </Button>
+              ) : null}
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    )
+
+    return cols
+  }, [compactServer, onDownloadCert, onEdit, onDelete])
+
+  const table = useReactTable({
+    data: clients,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (clients.length === 0) {
+    return (
+      <EmptyState
+        icon={<UsersIcon className="size-4" />}
+        title="Нет клиентов IKEv2"
+        description="Создайте клиента — сертификат и .p12 выпустятся автоматически"
+        action={emptyAction}
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={clients.length}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row"),
+      }}
+    />
+  )
+}
+
+export { IpsecUsersGrid }