From 8fb84b1375e278bb2ef47522723ff70a983a54b7 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 16 Apr 2025 15:52:38 -0700
Subject: [PATCH] style(entity_usage.tsx): place filter above tab switcher

---
 .../src/components/entity_usage.tsx           | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/entity_usage.tsx b/ui/litellm-dashboard/src/components/entity_usage.tsx
index 62f3dd4af5..e4cfb9bfae 100644
--- a/ui/litellm-dashboard/src/components/entity_usage.tsx
+++ b/ui/litellm-dashboard/src/components/entity_usage.tsx
@@ -252,6 +252,29 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
 
   return (
     <div style={{ width: "100%" }}>
+      <Grid numItems={2} className="gap-2 w-full mb-4">
+          <Col>
+            <Text>Select Time Range</Text>
+            <DateRangePicker
+              enableSelect={true}
+              value={dateValue}
+              onValueChange={setDateValue}
+            />
+          </Col>
+          <Col>
+            <Text>Filter by {entityType === 'tag' ? 'Tags' : 'Teams'}</Text>
+            <Select
+              mode="multiple"
+              style={{ width: '100%' }}
+              placeholder={`Select ${entityType === 'tag' ? 'tags' : 'teams'} to filter...`}
+              value={selectedTags}
+              onChange={setSelectedTags}
+              options={getAllTags()}
+              className="mt-2"
+              allowClear
+            />
+          </Col>
+        </Grid>
       <TabGroup>
         <TabList variant="solid" className="mt-1">
           <Tab>Cost</Tab>
@@ -259,30 +282,6 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
         </TabList>
         <TabPanels>
           <TabPanel>
-          <Grid numItems={2} className="gap-2 w-full mb-4">
-              <Col>
-                <Text>Select Time Range</Text>
-                <DateRangePicker
-                  enableSelect={true}
-                  value={dateValue}
-                  onValueChange={setDateValue}
-                />
-              </Col>
-              <Col>
-                <Text>Filter by {entityType === 'tag' ? 'Tags' : 'Teams'}</Text>
-                <Select
-                  mode="multiple"
-                  style={{ width: '100%' }}
-                  placeholder={`Select ${entityType === 'tag' ? 'tags' : 'teams'} to filter...`}
-                  value={selectedTags}
-                  onChange={setSelectedTags}
-                  options={getAllTags()}
-                  className="mt-2"
-                  allowClear
-                />
-              </Col>
-            </Grid>
-
             <Grid numItems={2} className="gap-2 w-full">
               {/* Total Spend Card */}
               <Col numColSpan={2}>