fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

app/(main)/certificates/page.tsx

@@ -1,14 +1,15 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
 import { FileImportDialog } from "@/components/file-import-dialog"
 import { routerCertificates, servers as mockServers } from "@/lib/data"
 import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
-import { Flag } from "@/components/flag"
 import { Card, CardContent } from "@/components/ui/card"
+import { DataPageCard } from "@/components/data-page-card"
+import { CertificatesDataGrid } from "@/components/data-grids/certificates-data-grid"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -37,17 +38,10 @@ import { toast } from "sonner"
 import {
   SearchIcon,
   ShieldCheckIcon,
-  ShieldAlertIcon,
-  ShieldOffIcon,
   BadgeCheckIcon,
   AlertTriangleIcon,
   AlertCircleIcon,
-  CalendarIcon,
-  KeyRoundIcon,
-  ServerIcon,
   PlusIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   RefreshCwIcon,
   UploadIcon,
 } from "lucide-react"
@@ -63,50 +57,6 @@ import {
   StepperTrigger,
 } from "@/components/reui/stepper"
 
-const STATUS_CONFIG: Record<
-  CertStatus,
-  {
-    label: string
-    icon: ReactNode
-    badge: string
-    row: string
-  }
-> = {
-  valid: {
-    label: "Действителен",
-    icon: <BadgeCheckIcon className="size-4 text-emerald-500" />,
-    badge: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
-    row: "",
-  },
-  expired: {
-    label: "Истёк",
-    icon: <ShieldOffIcon className="size-4 text-red-500" />,
-    badge: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
-    row: "bg-red-500/5",
-  },
-  revoked: {
-    label: "Отозван",
-    icon: <ShieldAlertIcon className="size-4 text-amber-500" />,
-    badge: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
-    row: "bg-amber-500/5",
-  },
-}
-
-const CERT_TABLE_GRID_CLASS =
-  "grid grid-cols-[1.25rem_minmax(0,1.35fr)_minmax(0,0.85fr)_minmax(0,1fr)_9.5rem_minmax(0,8.5rem)_6rem] gap-3"
-
-function daysLeftColor(days: number): string {
-  if (days < 0) return "text-red-500"
-  if (days <= 7) return "text-red-500"
-  if (days <= 30) return "text-amber-500"
-  return "text-emerald-600 dark:text-emerald-400"
-}
-
-function daysLeftBar(days: number, total = 365): number {
-  if (days <= 0) return 0
-  return Math.min(100, Math.round((days / total) * 100))
-}
-
 function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   return {
     id: cert.id,
@@ -125,203 +75,6 @@ function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
   }
 }
 
-function CertPartDaysBar({ cert, pct }: { cert: CertificateDto; pct: number }) {
-  return (
-    <div
-      className={cn(
-        "h-full rounded-full transition-all",
-        cert.daysLeft < 0
-          ? "bg-red-500"
-          : cert.daysLeft <= 7
-            ? "bg-red-500"
-            : cert.daysLeft <= 30
-              ? "bg-amber-500"
-              : "bg-emerald-500",
-      )}
-      style={{ width: `${pct}%` }}
-    />
-  )
-}
-
-function CertPartDays({ cert, pct }: { cert: CertificateDto; pct: number }) {
-  return (
-    <>
-      <div className="flex items-center justify-between text-xs mb-1">
-        <span className={cn("font-mono font-medium", daysLeftColor(cert.daysLeft))}>
-          {cert.daysLeft < 0 ? `Истёк ${-cert.daysLeft}д назад` : `${cert.daysLeft}д осталось`}
-        </span>
-        <span className="text-muted-foreground text-[10px]">{cert.validUntil}</span>
-      </div>
-      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
-        <CertPartDaysBar cert={cert} pct={pct} />
-      </div>
-    </>
-  )
-}
-
-function CertPartDetailDates({ cert }: { cert: CertificateDto }) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1">Действителен с</p>
-      <p className="font-mono">{cert.validFrom}</p>
-    </div>
-  )
-}
-
-function CertPartDetailSans({ cert }: { cert: CertificateDto }) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1">SAN / Alt Names</p>
-      <div className="flex flex-wrap gap-1">
-        {cert.sans.length > 0
-          ? cert.sans.map((s) => (
-              <span key={s} className="font-mono bg-muted px-1.5 py-0.5 rounded">
-                {s}
-              </span>
-            ))
-          : <span className="text-muted-foreground">—</span>}
-      </div>
-    </div>
-  )
-}
-
-function CertPartDetailTrusted({ cert }: { cert: CertificateDto }) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1">Trusted</p>
-      <p className={cert.trusted ? "text-emerald-600 dark:text-emerald-400" : "text-red-500"}>
-        {cert.trusted ? "Да (доверенный)" : "Нет (не доверенный)"}
-      </p>
-    </div>
-  )
-}
-
-function CertListRow({
-  cert,
-  cfg,
-  pct,
-  server,
-  expanded,
-  onToggle,
-}: {
-  cert: CertificateDto
-  cfg: (typeof STATUS_CONFIG)[CertStatus]
-  pct: number
-  server?: Server
-  expanded: boolean
-  onToggle: () => void
-}) {
-  return (
-    <div className={cn("border-b last:border-b-0", cfg.row)}>
-      <div
-        className={cn(
-          CERT_TABLE_GRID_CLASS,
-          "px-4 py-3 items-center hover:bg-muted/30 transition-colors cursor-pointer",
-        )}
-        onClick={onToggle}
-      >
-        <button
-          type="button"
-          className="text-muted-foreground"
-          onClick={(e) => {
-            e.stopPropagation()
-            onToggle()
-          }}
-        >
-          {expanded ? <ChevronDownIcon className="size-3.5" /> : <ChevronRightIcon className="size-3.5" />}
-        </button>
-        <div className="min-w-0">
-          <div className="flex items-center gap-2 min-w-0">
-            <span className="shrink-0">{cfg.icon}</span>
-            <span className="font-medium text-sm truncate" title={cert.name}>
-              {cert.name}
-            </span>
-          </div>
-          <p className="text-xs text-muted-foreground font-mono mt-0.5 truncate" title={cert.commonName}>
-            {cert.commonName}
-          </p>
-        </div>
-        <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
-          {server
-            ? (
-                <>
-                  <Flag code={server.country} size={12} />
-                  <span className="font-mono truncate">{server.name}</span>
-                </>
-              )
-            : (
-                <>
-                  <ServerIcon className="size-3.5" />
-                  <span className="font-mono truncate">{cert.serverName ?? cert.serverId}</span>
-                </>
-              )}
-        </div>
-        <p className="text-xs text-muted-foreground truncate min-w-0" title={cert.issuedBy}>
-          {cert.issuedBy}
-        </p>
-        <div className="min-w-0">
-          <CertPartDays cert={cert} pct={pct} />
-        </div>
-        <div className="flex flex-wrap gap-1 min-w-0 overflow-hidden">
-          {cert.usage.map((u) => (
-            <span
-              key={u}
-              className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-muted text-muted-foreground border"
-            >
-              {u}
-            </span>
-          ))}
-        </div>
-        <span
-          className={cn(
-            "text-[11px] font-mono px-2 py-0.5 rounded border whitespace-nowrap shrink-0 justify-self-end",
-            cfg.badge,
-          )}
-        >
-          {cfg.label}
-        </span>
-      </div>
-      {expanded && (
-        <div className="px-10 pb-4 grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs border-t border-border/50 pt-3">
-          <div>
-            <p className="text-muted-foreground mb-1">Key size</p>
-            <p className="font-mono font-medium">{cert.keySize} bit</p>
-          </div>
-          <CertPartDetailDates cert={cert} />
-          <CertPartDetailSans cert={cert} />
-          <CertPartDetailTrusted cert={cert} />
-        </div>
-      )}
-    </div>
-  )
-}
-
-function CertRow({
-  cert,
-  server,
-  expanded,
-  onToggle,
-}: {
-  cert: CertificateDto
-  server?: Server
-  expanded: boolean
-  onToggle: () => void
-}) {
-  const cfg = STATUS_CONFIG[cert.status]
-  const pct = daysLeftBar(cert.daysLeft)
-
-  return (
-    <CertListRow
-      cert={cert}
-      cfg={cfg}
-      pct={pct}
-      server={server}
-      expanded={expanded}
-      onToggle={onToggle}
-    />
-  )
-}
-
 function CertPartAlertExpired({ expired }: { expired: CertificateDto[] }) {
   return (
     <div className="flex items-start gap-3 rounded-lg bg-red-500/5 border border-red-500/20 px-4 py-3 text-sm">
@@ -536,43 +289,6 @@ function CertPartTableToolbar({
   )
 }
 
-function CertPartTableHeaderDates() {
-  return (
-    <div className="flex items-center gap-1">
-      <CalendarIcon className="size-3" />
-      Срок
-    </div>
-  )
-}
-
-function CertPartTableHeaderUsage() {
-  return (
-    <div className="flex items-center gap-1">
-      <KeyRoundIcon className="size-3" />
-      Использование
-    </div>
-  )
-}
-
-function CertPartTableHeader() {
-  return (
-    <div
-      className={cn(
-        CERT_TABLE_GRID_CLASS,
-        "px-4 py-2 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted/20",
-      )}
-    >
-      <span />
-      <span>Имя / CN</span>
-      <span>Сервер</span>
-      <span>Выпущен</span>
-      <CertPartTableHeaderDates />
-      <CertPartTableHeaderUsage />
-      <span>Статус</span>
-    </div>
-  )
-}
-
 function CertPartReference() {
   return (
     <Card>
@@ -757,7 +473,6 @@ export default function CertificatesPage() {
 
   const [search, setSearch] = useState("")
   const [statusFilter, setStatusFilter] = useState<CertStatus | "all">("all")
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
   const [certificates, setCertificates] = useState<CertificateDto[]>([])
   const [loadState, setLoadState] = useState<"idle" | "loading" | "error">("idle")
   const [loadError, setLoadError] = useState<string | null>(null)
@@ -871,15 +586,6 @@ export default function CertificatesPage() {
     })
   }, [displayCerts, search, statusFilter])
 
-  function toggleExpand(id: string) {
-    setExpandedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
   async function handleRefresh() {
     if (!liveReady) return
     try {
@@ -1040,7 +746,7 @@ export default function CertificatesPage() {
             />
           )}
 
-          <Card>
+          <DataPageCard>
             <CertPartTableToolbar
               search={search}
               setSearch={setSearch}
@@ -1048,30 +754,12 @@ export default function CertificatesPage() {
               setStatusFilter={setStatusFilter}
               filteredCount={filtered.length}
             />
-            <div className="overflow-x-auto">
-              <div className="min-w-[48rem]">
-                <CertPartTableHeader />
-                {prefsHydrated && isLive && loadState === "loading" && displayCerts.length === 0 ? (
-                  <div className="py-16 text-center text-sm text-muted-foreground">Загрузка сертификатов…</div>
-                ) : filtered.length === 0 ? (
-                  <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
-                    <ShieldCheckIcon className="size-10 mb-3 opacity-20" />
-                    <p className="text-sm font-medium">Сертификаты не найдены</p>
-                  </div>
-                ) : (
-                  filtered.map((cert) => (
-                    <CertRow
-                      key={cert.id}
-                      cert={cert}
-                      server={serverById.get(cert.serverId)}
-                      expanded={expandedIds.has(cert.id)}
-                      onToggle={() => toggleExpand(cert.id)}
-                    />
-                  ))
-                )}
-              </div>
-            </div>
-          </Card>
+            <CertificatesDataGrid
+              certificates={filtered}
+              serverMap={serverById}
+              isLoading={prefsHydrated && isLive && loadState === "loading" && displayCerts.length === 0}
+            />
+          </DataPageCard>
 
           <CertPartReference />
         </div>