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

components/data-grids/certificate-expanded-detail.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import type { CertificateDto } from "@mmapp/contracts/certificates"
+import { cn } from "@/lib/utils"
+
+function daysLeftBar(days: number, total = 365): number {
+  if (days <= 0) return 0
+  return Math.min(100, Math.round((days / total) * 100))
+}
+
+function CertificateExpandedDetail({ cert }: { cert: CertificateDto }) {
+  const pct = daysLeftBar(cert.daysLeft)
+
+  return (
+    <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>
+      <div>
+        <p className="text-muted-foreground mb-1">Действителен с</p>
+        <p className="font-mono">{cert.validFrom}</p>
+      </div>
+      <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>
+      <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>
+      <div className="col-span-2 sm:col-span-4">
+        <div className="h-1.5 bg-muted rounded-full overflow-hidden max-w-xs">
+          <div
+            className={cn(
+              "h-full rounded-full",
+              cert.daysLeft < 0 || cert.daysLeft <= 7
+                ? "bg-red-500"
+                : cert.daysLeft <= 30
+                  ? "bg-amber-500"
+                  : "bg-emerald-500",
+            )}
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { CertificateExpandedDetail, daysLeftBar }