Fixed attribution report. New metric cards. Converted ListTable.

src/components/metrics/MetricsBar.tsx

@@ -1,24 +1,22 @@
 import { ReactNode } from 'react';
-import { Grid, Loading } from '@umami/react-zen';
-import { ErrorMessage } from '@/components/common/ErrorMessage';
+import { Grid } from '@umami/react-zen';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export interface MetricsBarProps {
   isLoading?: boolean;
   isFetched?: boolean;
-  error?: unknown;
+  error?: Error;
   children?: ReactNode;
 }
 
 export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
   return (
-    <>
-      {isLoading && !isFetched && <Loading icon="dots" />}
-      {error && <ErrorMessage />}
+    <LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
       {!isLoading && !error && isFetched && (
-        <Grid columns="repeat(auto-fill, minmax(200px, 1fr))" width="100%" gapY="3">
+        <Grid columns="repeat(auto-fit, minmax(200px, 1fr))" width="100%" gap>
           {children}
         </Grid>
       )}
-    </>
+    </LoadingPanel>
   );
 }