diff --git a/ui/litellm-dashboard/eslint.config.mjs b/ui/litellm-dashboard/eslint.config.mjs index 35603123736..3cbb93f9a48 100644 --- a/ui/litellm-dashboard/eslint.config.mjs +++ b/ui/litellm-dashboard/eslint.config.mjs @@ -62,6 +62,10 @@ const eslintConfig = [ message: "antd is being phased out; build new UI with shadcn/ui primitives instead of adding antd imports.", }, + { + group: ["@ant-design/icons", "@ant-design/icons/*"], + message: "@ant-design/icons is gone from the dashboard; use lucide-react instead.", + }, ], }, ], diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json index 7069450a75c..154a19da7f3 100644 --- a/ui/litellm-dashboard/package-lock.json +++ b/ui/litellm-dashboard/package-lock.json @@ -9,7 +9,6 @@ "version": "0.1.0", "dependencies": { "@ant-design/cssinjs": "1.24.0", - "@ant-design/icons": "5.6.1", "@anthropic-ai/sdk": "0.92.0", "@base-ui/react": "^1.6.0", "@headlessui/tailwindcss": "0.2.2", diff --git a/ui/litellm-dashboard/package.json b/ui/litellm-dashboard/package.json index 962cabcba7b..3f9c29d2afe 100644 --- a/ui/litellm-dashboard/package.json +++ b/ui/litellm-dashboard/package.json @@ -25,7 +25,6 @@ }, "dependencies": { "@ant-design/cssinjs": "1.24.0", - "@ant-design/icons": "5.6.1", "@anthropic-ai/sdk": "0.92.0", "@base-ui/react": "^1.6.0", "@headlessui/tailwindcss": "0.2.2", diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx index 22471ee66f9..09737c3151b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx @@ -3,7 +3,7 @@ import { Select, Steps, Tag } from "antd"; import { FormProvider, useForm, useWatch } from "react-hook-form"; import { toast } from "@/lib/toast"; import { Logo } from "@/components/molecules/logo/Logo"; -import { CheckCircleFilled, KeyOutlined, RobotOutlined, AppstoreOutlined } from "@ant-design/icons"; +import { Bot, CircleCheck, Key, LayoutGrid } from "lucide-react"; import CreatedKeyDisplay from "@/components/shared/CreatedKeyDisplay"; import { Button } from "@/components/ui/button"; import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner"; @@ -707,7 +707,7 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok }`} onClick={() => handleAgentTypeChange(CUSTOM_AGENT_TYPE)} > - +
Custom / Other @@ -846,7 +846,8 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok
{/* Agent name chip */}
- } color="purple" className="px-3 py-1 text-sm"> + + {agentName}
@@ -884,7 +885,7 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok
- + Create a new key for this agent

A dedicated key scoped to this agent.

@@ -920,7 +921,7 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok
- + Assign an existing key

Re-assign a key you already have to this agent.

@@ -958,10 +959,11 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok const renderReadyStep = () => (
- +

Agent Created!

- } color="purple" className="px-3 py-1 text-sm"> + + {createdAgentName}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx index 619ccd8d974..271de78c272 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx @@ -1,10 +1,4 @@ -import { - CheckCircleOutlined, - CodeOutlined, - PlayCircleOutlined, - RollbackOutlined, - SaveOutlined, -} from "@ant-design/icons"; +import { CircleCheck, CirclePlay, Code, Save, Undo2 } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -100,11 +94,11 @@ export function GuardrailConfig({ guardrailName, guardrailType, provider }: Guar
@@ -214,7 +208,7 @@ export function GuardrailConfig({ guardrailName, guardrailType, provider }: Guar

- + Custom Code Override

Replace the built-in guardrail with custom evaluation code

@@ -247,13 +241,13 @@ export function GuardrailConfig({ guardrailName, guardrailType, provider }: Guar
{rerunStatus === "success" && ( - 7/10 would now pass with new config + 7/10 would now pass with new config )} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx index d81eaa5a4fc..25f63ca2902 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx @@ -4,10 +4,6 @@ import userEvent from "@testing-library/user-event"; import GuardrailCard from "./guardrail_garden_card"; import type { GuardrailCardInfo } from "./guardrail_garden_data"; -vi.mock("@ant-design/icons", () => ({ - CheckCircleFilled: ({ style, ...props }: any) => , -})); - const baseCard: GuardrailCardInfo = { id: "test-guard", name: "Test Guardrail", diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx index b6ee130d50a..4f1ac3e7d7a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx @@ -153,7 +153,7 @@ describe("Guardrail Info", () => { expect(getByText("Guardrail Settings")).toBeInTheDocument(); }); - await userEvent.hover(within(container).getByRole("img", { name: "info-circle" })); + await userEvent.hover(within(container).getByRole("img", { name: "Config guardrail details" })); expect(await findByText("Guardrail is defined in the config file and cannot be edited.")).toBeInTheDocument(); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx index f89e8a3248c..8f3ec6185fd 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx @@ -5,9 +5,8 @@ import { updateGuardrailCall, } from "@/components/networking"; import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils"; -import { EyeInvisibleOutlined, InfoCircleOutlined, StopOutlined } from "@ant-design/icons"; -import { ArrowLeft, CheckIcon, Code, CopyIcon } from "lucide-react"; +import { ArrowLeft, Ban, CheckIcon, Code, CopyIcon, EyeOff, Info } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -607,7 +606,7 @@ const GuardrailInfoView: React.FC = ({ guardrailId, onClose, value === "MASK" ? "text-blue-600" : "text-red-600" }`} > - {value === "MASK" ? : } + {value === "MASK" ? : } {String(value)}

@@ -667,7 +666,7 @@ const GuardrailInfoView: React.FC = ({ guardrailId, onClose,

Guardrail Settings

{isConfigGuardrail && ( - + )} {!isEditing && diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx index 09016bda266..8137e551028 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Input, Tooltip } from "antd"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Info } from "lucide-react"; import { MountedFormField } from "@/components/common_components/MountedFormField"; import { antdRequired } from "@/components/common_components/antdFormRules"; @@ -12,7 +12,7 @@ const FieldLabel: React.FC<{ label: string; tooltip: string }> = ({ label, toolt {label} - + ); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx index 5233081fc39..f5acd116f33 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { Tooltip, Select, Input as AntdInput, InputNumber, Collapse } from "antd"; import { FormProvider, useForm, useWatch } from "react-hook-form"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Info } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner"; @@ -688,7 +688,7 @@ const CreateMCPServer: React.FC = ({ MCP Server Name - + } @@ -709,7 +709,7 @@ const CreateMCPServer: React.FC = ({ Alias - + } @@ -827,7 +827,7 @@ const CreateMCPServer: React.FC = ({ Max Concurrent Requests (optional) - + } @@ -910,7 +910,7 @@ const CreateMCPServer: React.FC = ({ Authentication Value - + } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx index 35b23f9873c..a18c4592838 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Switch, Tooltip } from "antd"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Info } from "lucide-react"; import { MountedFormField } from "@/components/common_components/MountedFormField"; import { isClientForwardedTokenMode } from "@/components/mcp_tools/types"; @@ -29,7 +29,7 @@ export default function DcrBridgeToggle({ Gateway-hosted sign-in (DCR bridge) - + } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx index 23a55d2dc1a..01f68d2a531 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Input, Select, Tooltip, Typography } from "antd"; import { Button } from "@/components/ui/button"; -import { InfoCircleOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; +import { CircleMinus, Info, Plus } from "lucide-react"; import { useFieldArray, useFormContext, useWatch } from "react-hook-form"; import { @@ -55,7 +55,7 @@ const EnvVarsSection: React.FC = () => { } > - +
@@ -100,15 +100,15 @@ const EnvVarsSection: React.FC = () => { {(control) => = ({ {label}{" "} - + ) : ( diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx index f4c88f09f2c..2977a9e4941 100644 --- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx +++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx @@ -1,7 +1,6 @@ import { useRef, useState } from "react"; -import { Info } from "lucide-react"; +import { Info, UserPlus } from "lucide-react"; import { Alert, AlertTitle } from "@/components/shared/Alert"; -import { UserAddOutlined } from "@ant-design/icons"; import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer"; import { useForm } from "react-hook-form"; import { userFilterUICall } from "@/components/networking"; @@ -266,7 +265,7 @@ const UserSearchModal: React.FC = ({
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx index 0e86492731c..f21af04d5d5 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx @@ -5,15 +5,7 @@ import { Input, Switch } from "antd"; import { toast } from "@/lib/toast"; import { fetchClient } from "@/lib/http/api"; import { ApiError } from "@/lib/http/client"; -import { - KeyOutlined, - LockOutlined, - CheckOutlined, - ArrowRightOutlined, - ArrowLeftOutlined, - CloseOutlined, - LinkOutlined, -} from "@ant-design/icons"; +import { ArrowLeft, ArrowRight, Check, Key, Link2, Lock, X } from "lucide-react"; import { MCPServer } from "./types"; import { Dialog, DialogContent } from "@/components/ui/dialog"; @@ -84,7 +76,7 @@ export const ByokCredentialModal: React.FC = ({ server onClick={() => setStep(1)} className="flex items-center gap-1 text-gray-500 hover:text-gray-800 text-sm" > - Back + Back ) : (
@@ -94,7 +86,7 @@ export const ByokCredentialModal: React.FC = ({ server
@@ -105,7 +97,7 @@ export const ByokCredentialModal: React.FC = ({ server
L
- +
{firstLetter}
@@ -148,7 +140,7 @@ export const ByokCredentialModal: React.FC = ({ server
    {server.byok_description.map((item, i) => (
  • - + {item}
    • ))} @@ -160,7 +152,7 @@ export const ByokCredentialModal: React.FC = ({ server onClick={() => setStep(2)} className="w-full bg-gray-900 hover:bg-gray-700 text-white font-medium py-3 px-6 rounded-xl flex items-center justify-center gap-2 transition-colors" > - Continue to Authentication + Continue to Authentication
)} diff --git a/ui/litellm-dashboard/src/components/model_info_view.tsx b/ui/litellm-dashboard/src/components/model_info_view.tsx index 58d7a7bca6e..407144d1a52 100644 --- a/ui/litellm-dashboard/src/components/model_info_view.tsx +++ b/ui/litellm-dashboard/src/components/model_info_view.tsx @@ -2,7 +2,6 @@ import { useModelCostMap } from "@/app/(dashboard)/hooks/models/useModelCostMap" import { useModelHub, useModelsInfo } from "@/app/(dashboard)/hooks/models/useModels"; import { useQueryClient } from "@tanstack/react-query"; import { transformModelData } from "@/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { KeyIcon, RefreshIcon, TrashIcon } from "@heroicons/react/outline"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; @@ -10,7 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { SimpleTooltip } from "@/components/ui/tooltip"; import { applyPtuModelInfo } from "../utils/ptuModelInfo"; import { usePtuCostAttributionEnabled } from "@/app/(dashboard)/hooks/uiSettings/usePtuCostAttributionEnabled"; -import { ArrowLeft, CheckIcon, CopyIcon } from "lucide-react"; +import { ArrowLeft, CheckIcon, CopyIcon, Info } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; import { copyToClipboard as utilCopyToClipboard } from "../utils/dataUtils"; import { stripMaskedSecrets } from "../utils/maskedSecretUtils"; @@ -757,7 +756,7 @@ export default function ModelInfoView({ ) ) : ( - + )}
diff --git a/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx b/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx index 5158d8612ab..81d3dcc61a2 100644 --- a/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx +++ b/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx @@ -1,9 +1,8 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; -import { CheckOutlined, CopyOutlined, SyncOutlined } from "@ant-design/icons"; import { Alert, AlertTitle } from "@/components/shared/Alert"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"; -import { CircleHelp, TriangleAlert } from "lucide-react"; +import { Check, CircleHelp, Copy, RefreshCw, TriangleAlert } from "lucide-react"; import React, { useEffect, useMemo, useState } from "react"; import { useWatch } from "react-hook-form"; import { CopyToClipboard } from "react-copy-to-clipboard"; @@ -264,7 +263,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat @@ -275,7 +274,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat Cancel diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx index eab5abb9936..168b7f6cf25 100644 --- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx @@ -7,14 +7,13 @@ import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings" import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import useCan from "@/app/(dashboard)/hooks/useCan"; import { formatNumberWithCommas } from "@/utils/dataUtils"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { useQueryClient } from "@tanstack/react-query"; import { Button } from "@/components/ui/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Input } from "@/components/ui/input"; import { Field, FieldLabel } from "@/components/shared/form/field"; import { Input as AntdInput, Radio, Select, Switch, Tag, Tooltip, Typography } from "antd"; -import { ChevronDown } from "lucide-react"; +import { ChevronDown, Info } from "lucide-react"; import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer"; import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants"; import React, { useEffect, useMemo, useRef, useState } from "react"; @@ -647,7 +646,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Owned By{" "} - + @@ -667,7 +666,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp User ID{" "} - + } @@ -740,7 +739,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Organization{" "} - + } @@ -763,7 +762,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Team{" "} - + } @@ -790,7 +789,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Project{" "} - + } @@ -836,7 +835,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp : "Unique identifier for this service account" } > - + } @@ -856,7 +855,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Models{" "} - + } @@ -909,7 +908,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Key Type{" "} - + } @@ -972,7 +971,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Max Budget (USD){" "} - + } @@ -999,7 +998,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Reset Budget{" "} - + } @@ -1021,7 +1020,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Budget Windows{" "} - + @@ -1032,7 +1031,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Budget Fallbacks{" "} - + @@ -1049,7 +1048,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Tokens per minute Limit (TPM){" "} - + } @@ -1090,7 +1089,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Requests per minute Limit (RPM){" "} - + } @@ -1130,7 +1129,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Per-Tag Rate Limits{" "} - + @@ -1142,7 +1141,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Throttle on budget exceeded{" "} - + } @@ -1164,7 +1163,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Enable Prompt Caching{" "} - + } @@ -1191,7 +1190,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1231,7 +1230,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1267,7 +1266,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1309,7 +1308,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1344,7 +1343,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Access Groups{" "} - + } @@ -1371,7 +1370,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1404,7 +1403,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Allowed Vector Stores{" "} - + } @@ -1426,7 +1425,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Metadata{" "} - + } @@ -1447,7 +1446,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Tags{" "} - + } @@ -1478,7 +1477,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Allowed MCP Servers{" "} - + } @@ -1521,7 +1520,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Allowed Agents{" "} - + } @@ -1688,7 +1687,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp } > - +
diff --git a/ui/litellm-dashboard/src/components/routing_groups/index.tsx b/ui/litellm-dashboard/src/components/routing_groups/index.tsx index 560523972ca..9f94fbf6c98 100644 --- a/ui/litellm-dashboard/src/components/routing_groups/index.tsx +++ b/ui/litellm-dashboard/src/components/routing_groups/index.tsx @@ -3,7 +3,7 @@ import React, { useMemo, useState } from "react"; import { Card, Flex, Input, Space, Typography } from "antd"; import { Button } from "@/components/ui/button"; -import { PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons"; +import { Plus, RefreshCw, Search } from "lucide-react"; import { useRoutingGroups, useSaveRoutingGroups } from "@/app/(dashboard)/hooks/routingGroups/useRoutingGroups"; import { useRouterFields } from "@/app/(dashboard)/hooks/router/useRouterFields"; import { useModelHub } from "@/app/(dashboard)/hooks/models/useModels"; @@ -107,7 +107,7 @@ const RoutingGroups: React.FC = () => { } + prefix={} placeholder="Search groups..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} @@ -120,11 +120,11 @@ const RoutingGroups: React.FC = () => { disabled={isFetching && !isLoading} aria-busy={isFetching && !isLoading} > - + Refresh diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx index c907aeae035..bb4e0865f3f 100644 --- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx @@ -49,10 +49,8 @@ describe("AdvancedDatePicker", () => { }); it("should display formatted date range", () => { - render(); - // The component displays date range in the format "D MMM, HH:mm - D MMM, HH:mm" - // Just check that the clock icon is present - expect(screen.getByLabelText("clock-circle")).toBeInTheDocument(); + const { container } = render(); + expect(getTrigger(container)).toHaveTextContent(/\d{1,2} \w{3}, \d{2}:\d{2} - \d{1,2} \w{3}, \d{2}:\d{2}/); }); it("should open dropdown when clicked", () => { 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 b9a4d28539b..0013f702362 100644 --- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx +++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx @@ -1,4 +1,4 @@ -import { CalendarOutlined, ClockCircleOutlined } from "@ant-design/icons"; +import { Calendar, Clock } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/cva.config"; import type { DateRangePickerValue } from "./date_picker_types"; @@ -291,7 +291,7 @@ const AdvancedDatePicker: React.FC = ({ > - + {formatDisplayRange(value.from, value.to)} = ({
- + Start and end dates
diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx index e9ec3ce9439..b7f2dfaf398 100644 --- a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx +++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx @@ -3,14 +3,13 @@ import React from "react"; import { SimpleTooltip } from "@/components/ui/tooltip"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"; import { CogIcon, BanIcon } from "@heroicons/react/outline"; -import { Eye, EyeOff, Plus, Trash2 } from "lucide-react"; +import { Eye, EyeOff, Info, Plus, Trash2 } from "lucide-react"; import { callbackInfo, callback_map, mapDisplayToInternalNames } from "../callback_info_helpers"; import { Logo } from "@/components/molecules/logo/Logo"; import NumericalInput from "../shared/numerical_input"; @@ -198,7 +197,7 @@ const LoggingSettings: React.FC = ({ Disabled Callbacks - +
@@ -244,7 +243,7 @@ const LoggingSettings: React.FC = ({ Logging Integrations - +
)} @@ -1809,7 +1808,7 @@ const TeamInfoView: React.FC = ({

Team Member Settings{" "} - +

Max Budget: {info.team_member_budget_table?.max_budget || "No Limit"}
@@ -1970,7 +1969,7 @@ const TeamInfoView: React.FC = ({ Team Member Budget (USD){" "} - + ), @@ -1985,7 +1984,7 @@ const TeamInfoView: React.FC = ({ Budget Reset Period{" "} - + ), @@ -1997,7 +1996,7 @@ const TeamInfoView: React.FC = ({ Team Member TPM Limit{" "} - + ), @@ -2012,7 +2011,7 @@ const TeamInfoView: React.FC = ({ Team Member RPM Limit{" "} - + ), @@ -2027,7 +2026,7 @@ const TeamInfoView: React.FC = ({ Allowed Models{" "} - + ),