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

app/(main)/certificates/page.tsx

@@ -9,6 +9,7 @@ import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
 import { Card, CardContent } from "@/components/ui/card"
 import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { CertificatesDataGrid } from "@/components/data-grids/certificates-data-grid"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -36,7 +37,6 @@ import {
 } from "@/shared/api/certificates"
 import { toast } from "sonner"
 import {
-  SearchIcon,
   ShieldCheckIcon,
   BadgeCheckIcon,
   AlertTriangleIcon,
@@ -237,58 +237,6 @@ function CertPartAcmeSettings({
   )
 }
 
-function CertPartTableToolbar({
-  search,
-  setSearch,
-  statusFilter,
-  setStatusFilter,
-  filteredCount,
-}: {
-  search: string
-  setSearch: (v: string) => void
-  statusFilter: CertStatus | "all"
-  setStatusFilter: (v: CertStatus | "all") => void
-  filteredCount: number
-}) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 border-b flex-wrap">
-      <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[240px]">
-        <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
-        <input
-          className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
-          placeholder="Поиск по имени, CN, эмитенту…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
-      <div className="flex items-center gap-1 rounded-md border border-border bg-muted/40 p-0.5">
-        {(["all", "valid", "expired", "revoked"] as const).map((s) => (
-          <button
-            key={s}
-            type="button"
-            onClick={() => setStatusFilter(s)}
-            className={cn(
-              "px-3 py-1 text-xs rounded whitespace-nowrap transition-colors",
-              statusFilter === s
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            {s === "all"
-              ? "Все"
-              : s === "valid"
-                ? "Действующие"
-                : s === "expired"
-                  ? "Истёкшие"
-                  : "Отозванные"}
-          </button>
-        ))}
-      </div>
-      <span className="text-sm text-muted-foreground ml-auto">{filteredCount} сертификатов</span>
-    </div>
-  )
-}
-
 function CertPartReference() {
   return (
     <Card>
@@ -747,12 +695,21 @@ export default function CertificatesPage() {
           )}
 
           <DataPageCard>
-            <CertPartTableToolbar
+            <DataPageToolbar
               search={search}
-              setSearch={setSearch}
-              statusFilter={statusFilter}
-              setStatusFilter={setStatusFilter}
-              filteredCount={filtered.length}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, CN, эмитенту…"
+              segmented={{
+                value: statusFilter,
+                onChange: setStatusFilter,
+                options: [
+                  { value: "all", label: "Все" },
+                  { value: "valid", label: "Действующие" },
+                  { value: "expired", label: "Истёкшие" },
+                  { value: "revoked", label: "Отозванные" },
+                ],
+              }}
+              countLabel={`${filtered.length} сертификатов`}
             />
             <CertificatesDataGrid
               certificates={filtered}