From 52939eb06c793b73999ea5d9363dc4a7260a0001 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 10:18:34 +0000
Subject: [PATCH] feat(ui): migrate shared date-picker + CreatedKeyDisplay to
 shadcn (tremor DateRangePicker kept)

- CreatedKeyDisplay: antd Button \u2192 shadcn Button. Raw background #f8f8f8
  replaced with bg-muted; text-gray-600 \u2192 text-muted-foreground.
- usage_date_picker: @tremor Text \u2192 plain <p>/<span> with semantic
  tokens. DateRangePicker (tremor) preserved \u2014 phase-2 will introduce
  a shadcn date-picker primitive; file added to overrides with an inline
  eslint-disable for the preserved tremor type + component import.
- advanced_date_picker: @ant-design/icons CalendarOutlined/ClockCircle
  \u2192 lucide CalendarIcon/Clock; @tremor Text \u2192 <span>. Same override
  treatment for the preserved tremor Button / DateRangePickerValue.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json           |  4 +++-
 .../components/shared/CreatedKeyDisplay.tsx   | 24 +++++++------------
 .../shared/advanced_date_picker.tsx           | 11 +++++----
 .../components/shared/usage_date_picker.tsx   |  9 ++++---
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index ca186e8bded..c76c89a6176 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -40,7 +40,9 @@
         "src/components/model_hub_table_columns.tsx",
         "src/components/mcp_server_management/MCPServerSelector.tsx",
         "src/components/mcp_tools/MCPNetworkSettings.tsx",
-        "src/components/mcp_tools/ByokCredentialModal.tsx"
+        "src/components/mcp_tools/ByokCredentialModal.tsx",
+        "src/components/shared/usage_date_picker.tsx",
+        "src/components/shared/advanced_date_picker.tsx"
       ],
       "rules": {
         "litellm-ui/no-banned-ui-imports": "off",
diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
index 00ffb8c6e20..7a9c32312f2 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Button } from "antd";
+import { Button } from "@/components/ui/button";
 import MessageManager from "@/components/molecules/message_manager";
 
 interface CreatedKeyDisplayProps {
@@ -23,27 +23,21 @@ const CreatedKeyDisplay: React.FC<CreatedKeyDisplayProps> = ({ apiKey }) => {
   return (
     <div>
       <p className="mb-2">
-        Please save this secret key somewhere safe and accessible. For security reasons,{" "}
-        <b>you will not be able to view it again</b> through your LiteLLM account. If you
-        lose this secret key, you will need to generate a new one.
+        Please save this secret key somewhere safe and accessible. For security
+        reasons, <b>you will not be able to view it again</b> through your
+        LiteLLM account. If you lose this secret key, you will need to generate
+        a new one.
       </p>
 
-      <p className="text-sm text-gray-600 mt-3 mb-1">Virtual Key:</p>
-      <div
-        style={{
-          background: "#f8f8f8",
-          padding: "10px",
-          borderRadius: "5px",
-          marginBottom: "10px",
-        }}
-      >
-        <pre style={{ wordWrap: "break-word", whiteSpace: "normal", margin: 0 }}>
+      <p className="text-sm text-muted-foreground mt-3 mb-1">Virtual Key:</p>
+      <div className="bg-muted p-2.5 rounded-md mb-2.5">
+        <pre className="break-words whitespace-normal m-0 text-sm">
           {apiKey}
         </pre>
       </div>
 
       <CopyToClipboard text={apiKey} onCopy={handleCopy}>
-        <Button type="primary" style={{ marginTop: 12 }}>
+        <Button className="mt-3">
           {copied ? "Copied!" : "Copy Virtual Key"}
         </Button>
       </CopyToClipboard>
diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
index 4293657b71a..8aac45b33e5 100644
--- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
@@ -1,5 +1,6 @@
-import { CalendarOutlined, ClockCircleOutlined } from "@ant-design/icons";
-import { Button, DateRangePickerValue, Text } from "@tremor/react";
+import { Calendar as CalendarIcon, Clock } from "lucide-react";
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import { Button, DateRangePickerValue } from "@tremor/react";
 import moment from "moment";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
@@ -274,7 +275,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
 
   return (
     <div className="flex items-center gap-3">
-      {label && <Text className="text-sm font-medium text-gray-700 whitespace-nowrap">{label}</Text>}
+      {label && <span className="text-sm font-medium text-foreground whitespace-nowrap">{label}</span>}
       <div className="relative" ref={dropdownRef}>
         {/* Main input display */}
         <div
@@ -283,7 +284,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <ClockCircleOutlined className="text-gray-600" />
+              <Clock className="h-4 w-4 text-muted-foreground" />
               <span className="text-gray-900">{formatDisplayRange(value.from, value.to)}</span>
             </div>
             <svg
@@ -337,7 +338,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
               <div className="w-1/2 relative">
                 <div className="p-3.5 border-b border-gray-200">
                   <div className="flex items-center gap-2">
-                    <CalendarOutlined className="text-gray-600" />
+                    <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                     <span className="text-sm font-semibold text-gray-900">Start and end dates</span>
                   </div>
                 </div>
diff --git a/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx
index 72ce5042647..52535df8818 100644
--- a/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx
+++ b/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState, useRef } from "react";
-import { DateRangePicker, DateRangePickerValue, Text } from "@tremor/react";
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
+import { DateRangePicker, DateRangePickerValue } from "@tremor/react";
 
 interface UsageDatePickerProps {
   value: DateRangePickerValue;
@@ -110,7 +111,7 @@ const UsageDatePicker: React.FC<UsageDatePickerProps> = ({
 
   return (
     <div className={className}>
-      {label && <Text className="mb-2">{label}</Text>}
+      {label && <p className="mb-2 text-sm">{label}</p>}
 
       {/* Container with relative positioning for absolute placement */}
       <div className="relative w-fit">
@@ -147,7 +148,9 @@ const UsageDatePicker: React.FC<UsageDatePickerProps> = ({
 
       {/* Time range display */}
       {showTimeRange && value.from && value.to && (
-        <Text className="mt-2 text-xs text-gray-500">{formatTimeRange(value.from, value.to)}</Text>
+        <p className="mt-2 text-xs text-muted-foreground">
+          {formatTimeRange(value.from, value.to)}
+        </p>
       )}
     </div>
   );