refactor: enhance UI components with PanelCard integration and improved layout consistency

Updated multiple components to utilize the new PanelCard for better organization and presentation of content. Refactored DataGridShell, DataGridCard, and various analytics components to streamline layouts and enhance user experience. Adjusted styles for consistency across components, including pagination and toolbar elements, ensuring a cohesive interface throughout the application.

apps/web/src/components/analytics/analytics-card-shell.tsx

@@ -1,14 +1,6 @@
 import type { ReactNode } from 'react'
 import { Info } from 'lucide-react'
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@evobgp/ui/components/card'
 import { cn } from '@evobgp/ui/lib/utils'
 import {
   Tooltip,
@@ -16,6 +8,8 @@ import {
   TooltipTrigger,
 } from '@evobgp/ui/components/tooltip'
 
+import { PanelCard } from '@/components/panel-card'
+
 export function AnalyticsCardShell({
   title,
   description,
@@ -33,32 +27,36 @@ export function AnalyticsCardShell({
   className?: string
   children: ReactNode
 }) {
+  const titleNode = (
+    <span className="flex items-center gap-2">
+      {title}
+      {info ? (
+        <Tooltip>
+          <TooltipTrigger
+            className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="Подробнее"
+          >
+            <Info className="size-3.5" />
+          </TooltipTrigger>
+          <TooltipContent side="top" className="max-w-xs text-xs">
+            {info}
+          </TooltipContent>
+        </Tooltip>
+      ) : null}
+    </span>
+  )
+
   return (
-    <Card className={cn('flex flex-col gap-0 overflow-hidden', className)}>
-      <CardHeader className="flex flex-row items-start justify-between gap-3 border-b py-4">
-        <div className="min-w-0 space-y-1">
-          <CardTitle className="flex items-center gap-2 text-base">
-            {title}
-            {info ? (
-              <Tooltip>
-                <TooltipTrigger
-                  className="inline-flex text-muted-foreground transition-colors hover:text-foreground"
-                  aria-label="Подробнее"
-                >
-                  <Info className="size-3.5" />
-                </TooltipTrigger>
-                <TooltipContent side="top" className="max-w-xs text-xs">
-                  {info}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-          </CardTitle>
-          {description ? <CardDescription>{description}</CardDescription> : null}
-        </div>
-        {actions ? <div className="shrink-0">{actions}</div> : null}
-      </CardHeader>
-      <CardContent className="flex flex-col gap-5 p-5">{children}</CardContent>
-      {footer ? <CardFooter className="gap-2 border-t p-4">{footer}</CardFooter> : null}
-    </Card>
+    <PanelCard
+      title={titleNode}
+      description={description}
+      actions={actions}
+      footer={footer}
+      className={cn('overflow-hidden', className)}
+      contentClassName="flex flex-col gap-4 py-4"
+      footerClassName={footer ? 'gap-2 p-3' : undefined}
+    >
+      {children}
+    </PanelCard>
   )
 }