refactor: update UI components to utilize Frame for improved layout and consistency

Refactored multiple components, including PanelCard, SettingsCard, and DataGridShell, to replace Card with Frame for better organization and presentation. Enhanced the DataGridToolbar to support optional ReUI filters and improved the overall structure of the KPI stat grid. Updated .gitignore to include .env.local for local environment configurations, ensuring better management of environment variables.

apps/web/src/components/data-grid-shell.tsx

@@ -4,10 +4,15 @@ import type { Table } from '@tanstack/react-table'
 import { cn } from '@evobgp/ui/lib/utils'
 
 import { DataGridToolbar } from '@/components/data-grid-toolbar'
-import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName, panelCardInsetClassName } from '@/components/panel-card'
+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 { FrameFooter } from '@/components/reui/frame'
 import {
   DATA_GRID_MESSAGES_RU,
   DATA_GRID_PAGINATION_RU,
@@ -52,9 +57,9 @@ export function DataGridShell<TData extends object>({
         <DataGridTable />
       </DataGridContainer>
       {showPagination ? (
-        <div className={cn(panelCardFooterClassName, panelCardInsetClassName)}>
+        <FrameFooter className={cn(panelCardFooterClassName)}>
           <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
-        </div>
+        </FrameFooter>
       ) : null}
     </DataGrid>
   )