From 38175a15a5b5d2776384d71038028c59fe528592 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 10:25:33 +0000
Subject: [PATCH] feat(ui): activity_metrics antd Collapse \u2192 shadcn
 Accordion (charts preserved)

- antd Collapse/Collapse.Panel \u2192 shadcn Accordion/AccordionItem/
  AccordionTrigger/AccordionContent (type='multiple' so expanding one
  model section doesn't collapse the previously-opened one).
- Header row keeps the right-aligned spend + request-count split; moved
  pr-2 onto the inner row so it doesn't collide with the chevron.
- @tremor AreaChart/BarChart/Card/Grid/Text/Title preserved \u2014 this is a
  chart-heavy component and the tremor chart primitives have no
  shadcn-equivalent in phase 1 (recharts migration is phase 2).
- Added to .eslintrc.json overrides with an inline eslint-disable on the
  preserved tremor import.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json           |  3 +-
 .../src/components/activity_metrics.tsx       | 55 ++++++++++++-------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index c76c89a6176..82948f0e360 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -42,7 +42,8 @@
         "src/components/mcp_tools/MCPNetworkSettings.tsx",
         "src/components/mcp_tools/ByokCredentialModal.tsx",
         "src/components/shared/usage_date_picker.tsx",
-        "src/components/shared/advanced_date_picker.tsx"
+        "src/components/shared/advanced_date_picker.tsx",
+        "src/components/activity_metrics.tsx"
       ],
       "rules": {
         "litellm-ui/no-banned-ui-imports": "off",
diff --git a/ui/litellm-dashboard/src/components/activity_metrics.tsx b/ui/litellm-dashboard/src/components/activity_metrics.tsx
index e805eed8c8c..d61fa5a05b0 100644
--- a/ui/litellm-dashboard/src/components/activity_metrics.tsx
+++ b/ui/litellm-dashboard/src/components/activity_metrics.tsx
@@ -1,7 +1,13 @@
 import { formatNumberWithCommas } from "@/utils/dataUtils";
 import { resolveTeamAliasFromTeamID } from "@/utils/teamUtils";
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { AreaChart, BarChart, Card, Grid, Text, Title } from "@tremor/react";
-import { Collapse } from "antd";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import React from "react";
 import { CustomLegend, CustomTooltip } from "./common_components/chartUtils";
 import { Team } from "./key_team_helpers/key_list";
@@ -322,28 +328,39 @@ export const ActivityMetrics: React.FC<ActivityMetricsProps> = ({ modelMetrics,
       </div>
 
       {/* Individual Model Sections */}
-      <Collapse defaultActiveKey={modelNames[0]}>
+      <Accordion type="multiple" defaultValue={modelNames.slice(0, 1)}>
         {modelNames.map((modelName) => (
-          <Collapse.Panel
-            key={modelName}
-            header={
-              <div className="flex justify-between items-center w-full">
-                <Title>{modelMetrics[modelName].label || "Unknown Item"}</Title>
-                <div className="flex space-x-4 text-sm text-gray-500">
-                  <span>${formatNumberWithCommas(modelMetrics[modelName].total_spend, 2)}</span>
-                  <span>{modelMetrics[modelName].total_requests.toLocaleString()} requests</span>
+          <AccordionItem key={modelName} value={modelName}>
+            <AccordionTrigger>
+              <div className="flex justify-between items-center w-full pr-2">
+                <Title>
+                  {modelMetrics[modelName].label || "Unknown Item"}
+                </Title>
+                <div className="flex space-x-4 text-sm text-muted-foreground">
+                  <span>
+                    $
+                    {formatNumberWithCommas(
+                      modelMetrics[modelName].total_spend,
+                      2,
+                    )}
+                  </span>
+                  <span>
+                    {modelMetrics[modelName].total_requests.toLocaleString()}{" "}
+                    requests
+                  </span>
                 </div>
               </div>
-            }
-          >
-            <ModelSection
-              modelName={modelName || "Unknown Model"}
-              metrics={modelMetrics[modelName]}
-              hidePromptCachingMetrics={hidePromptCachingMetrics}
-            />
-          </Collapse.Panel>
+            </AccordionTrigger>
+            <AccordionContent>
+              <ModelSection
+                modelName={modelName || "Unknown Model"}
+                metrics={modelMetrics[modelName]}
+                hidePromptCachingMetrics={hidePromptCachingMetrics}
+              />
+            </AccordionContent>
+          </AccordionItem>
         ))}
-      </Collapse>
+      </Accordion>
     </div>
   );
 };