From fa47861ca09ea1afdea03f51362d4f4f890e8725 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Sat, 6 Dec 2025 08:57:15 -0800
Subject: [PATCH] Add banner for customer usage

---
 ui/litellm-dashboard/src/components/new_usage.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/new_usage.tsx b/ui/litellm-dashboard/src/components/new_usage.tsx
index f9280ae2bf..aa4b77b47a 100644
--- a/ui/litellm-dashboard/src/components/new_usage.tsx
+++ b/ui/litellm-dashboard/src/components/new_usage.tsx
@@ -92,6 +92,7 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({
   const [isCloudZeroModalOpen, setIsCloudZeroModalOpen] = useState(false);
   const [isGlobalExportModalOpen, setIsGlobalExportModalOpen] = useState(false);
   const [showOrganizationBanner, setShowOrganizationBanner] = useState(true);
+  const [showCustomerBanner, setShowCustomerBanner] = useState(true);
 
   const getAllTags = async () => {
     if (!accessToken) {
@@ -803,6 +804,17 @@ const NewUsagePage: React.FC<NewUsagePageProps> = ({
 
               {/* Customer Usage Panel */}
               <TabPanel>
+                {showCustomerBanner && (
+                  <Alert
+                    banner
+                    type="info"
+                    message="Customer usage is a new feature."
+                    description="Spend is tracked from feature launch and previous data isn't backfilled, so only future usage appears here."
+                    closable
+                    onClose={() => setShowCustomerBanner(false)}
+                    className="mb-5"
+                  />
+                )}
                 <EntityUsage
                   accessToken={accessToken}
                   entityType="customer"