style: card style

src/pages/usage/components/breakdown-tabs.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from 'antd';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { GroupOption } from '../config';
 import { UsageFilterItem } from '../config/types';
 import ApiKeysTable from '../tables/apikeys-table';
@@ -8,6 +8,7 @@ import UsersTable from '../tables/users-table';
 
 type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;
 type GroupOptionType = GroupOption<UsageFilterItem>;
+const EMPTY_FILTERS: FilterOptionType[] = [];
 
 const BreakdownTabs: React.FC<{
   dateRange: {
@@ -15,58 +16,68 @@ const BreakdownTabs: React.FC<{
     end_date: string;
   };
   scope: string;
+  refreshKey?: number;
   filters: {
     models?: FilterOptionType[];
     users?: FilterOptionType[];
     api_keys?: FilterOptionType[];
   };
-}> = ({ filters, dateRange, scope }) => {
-  const items = [
-    {
-      key: 'models',
-      label: 'Models',
-      forceRender: true,
-      children: (
-        <ModelsTable
-          key="models"
-          models={filters.models || []}
-          dateRange={dateRange}
-          scope={scope}
-        />
-      )
-    },
-    {
-      key: 'users',
-      label: 'Users',
-      forceRender: true,
-      children: (
-        <UsersTable
-          key="users"
-          users={filters.users || []}
-          dateRange={dateRange}
-          scope={scope}
-        />
-      )
-    },
-    {
-      key: 'api_keys',
-      label: 'API Keys',
-      forceRender: true,
-      children: (
-        <ApiKeysTable
-          key="api_keys"
-          apiKeys={filters.api_keys || []}
-          dateRange={dateRange}
-          scope={scope}
-        />
-      )
-    }
-  ].filter((item) => {
-    if (item.key === 'users') {
-      return scope === 'all';
-    }
-    return true;
-  });
+}> = ({ filters, dateRange, scope, refreshKey = 0 }) => {
+  const models = filters.models || EMPTY_FILTERS;
+  const users = filters.users || EMPTY_FILTERS;
+  const apiKeys = filters.api_keys || EMPTY_FILTERS;
+
+  const items = useMemo(() => {
+    return [
+      {
+        key: 'models',
+        label: 'Models',
+        forceRender: true,
+        children: (
+          <ModelsTable
+            key="models"
+            models={models}
+            dateRange={dateRange}
+            scope={scope}
+            refreshKey={refreshKey}
+          />
+        )
+      },
+      {
+        key: 'users',
+        label: 'Users',
+        forceRender: true,
+        children: (
+          <UsersTable
+            key="users"
+            users={users}
+            dateRange={dateRange}
+            scope={scope}
+            refreshKey={refreshKey}
+          />
+        )
+      },
+      {
+        key: 'api_keys',
+        label: 'API Keys',
+        forceRender: true,
+        children: (
+          <ApiKeysTable
+            key="api_keys"
+            apiKeys={apiKeys}
+            dateRange={dateRange}
+            scope={scope}
+            refreshKey={refreshKey}
+          />
+        )
+      }
+    ].filter((item) => {
+      if (item.key === 'users') {
+        return scope === 'all';
+      }
+      return true;
+    });
+  }, [apiKeys, dateRange, models, refreshKey, scope, users]);
 
   return (
     <div style={{ marginTop: 16 }}>