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/data-grid-shell.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from 'react'
 import type { Table } from '@tanstack/react-table'
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
 
 import { DataGridToolbar } from '@/components/data-grid-toolbar'
+import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName } from '@/components/panel-card'
 import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
 import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
 import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
 import {
+  DATA_GRID_MESSAGES_RU,
   DATA_GRID_PAGINATION_RU,
   DATA_GRID_TABLE_LAYOUT,
 } from '@/lib/data-grid-defaults'
@@ -38,7 +40,8 @@ export function DataGridShell<TData extends object>({
       table={table}
       recordCount={recordCount}
       isLoading={isLoading}
-      emptyMessage={emptyMessage}
+      emptyMessage={emptyMessage ?? DATA_GRID_MESSAGES_RU.emptyMessage}
+      loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
       tableLayout={tableLayout}
       className={className}
       onRowClick={onRowClick}
@@ -47,7 +50,7 @@ export function DataGridShell<TData extends object>({
         <DataGridTable />
       </DataGridContainer>
       {showPagination ? (
-        <div className="border-t px-4 py-3">
+        <div className={cn(panelCardFooterClassName, 'px-3 py-2')}>
           <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
         </div>
       ) : null}
@@ -64,20 +67,16 @@ interface DataGridCardProps {
 }
 
 export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
-  const hasHeader = Boolean(title || description || actions)
   return (
-    <Card className={className ?? 'gap-0'}>
-      {hasHeader ? (
-        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
-          <div className="flex flex-col gap-0.5">
-            {title ? <CardTitle className="text-base">{title}</CardTitle> : null}
-            {description ? <CardDescription>{description}</CardDescription> : null}
-          </div>
-          {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
-        </CardHeader>
-      ) : null}
-      <CardContent className="p-0">{children}</CardContent>
-    </Card>
+    <PanelCard
+      title={title}
+      description={description}
+      actions={actions}
+      className={className}
+      contentClassName={panelCardContentFlushClassName}
+    >
+      {children}
+    </PanelCard>
   )
 }