feat(ui): team_multi_select + AutoRotationView migrate to shadcn

- team_multi_select: antd Select mode='multiple' \u2192 shadcn Popover +
  chip list + infinite-scroll pattern matching team_dropdown.
- AutoRotationView: @tremor Badge/Text + @heroicons RefreshIcon/
  ClockIcon \u2192 shadcn Badge + lucide RefreshCw/Clock + semantic
  bg-muted/border-border/text-muted-foreground tokens. The
  status-pill color (emerald / gray) remains categorical and was
  already covered by the existing categorical overrides.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>

ui/litellm-dashboard/src/components/common_components/AutoRotationView.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Text, Badge } from "@tremor/react";
-import { RefreshIcon, ClockIcon } from "@heroicons/react/outline";
+import { Badge } from "@/components/ui/badge";
+import { Clock, RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface AutoRotationViewProps {
   autoRotate?: boolean;
@@ -38,75 +39,97 @@ const AutoRotationView: React.FC<AutoRotationViewProps> = ({
 
   const content = (
     <div className="space-y-6">
-      {/* Status Section */}
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <RefreshIcon className="h-4 w-4 text-blue-600" />
-          <Text className="font-semibold text-gray-900">Auto-Rotation</Text>
-          <Badge color={autoRotate ? "green" : "gray"} size="xs">
+          <RefreshCw className="h-4 w-4 text-primary" />
+          <span className="font-semibold text-foreground">Auto-Rotation</span>
+          <Badge
+            className={cn(
+              autoRotate
+                ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300"
+                : "bg-muted text-muted-foreground",
+            )}
+          >
             {autoRotate ? "Enabled" : "Disabled"}
           </Badge>
           {autoRotate && rotationInterval && (
             <>
-              <Text className="text-gray-400">•</Text>
-              <Text className="text-sm text-gray-600">Every {rotationInterval}</Text>
+              <span className="text-muted-foreground">•</span>
+              <span className="text-sm text-muted-foreground">
+                Every {rotationInterval}
+              </span>
             </>
           )}
         </div>
       </div>
 
-      {/* Rotation History - Show if there's any rotation data OR if auto-rotation is enabled */}
       {(autoRotate || lastRotationAt || keyRotationAt || nextRotationAt) && (
         <div className="space-y-3">
-          {/* Last Rotation - Show when available */}
           {lastRotationAt && (
-            <div className="flex items-center gap-2 p-3 bg-gray-50 border border-gray-200 rounded-md">
-              <ClockIcon className="w-4 h-4 text-gray-500" />
+            <div className="flex items-center gap-2 p-3 bg-muted border border-border rounded-md">
+              <Clock className="w-4 h-4 text-muted-foreground" />
               <div className="flex-1">
-                <Text className="font-medium text-gray-700">Last Rotation</Text>
-                <Text className="text-sm text-gray-600">{formatTimestamp(lastRotationAt)}</Text>
+                <div className="font-medium text-foreground">Last Rotation</div>
+                <div className="text-sm text-muted-foreground">
+                  {formatTimestamp(lastRotationAt)}
+                </div>
               </div>
             </div>
           )}
 
-          {/* Next Scheduled Rotation - Show when available */}
           {(keyRotationAt || nextRotationAt) && (
-            <div className="flex items-center gap-2 p-3 bg-gray-50 border border-gray-200 rounded-md">
-              <ClockIcon className="w-4 h-4 text-gray-500" />
+            <div className="flex items-center gap-2 p-3 bg-muted border border-border rounded-md">
+              <Clock className="w-4 h-4 text-muted-foreground" />
               <div className="flex-1">
-                <Text className="font-medium text-gray-700">Next Scheduled Rotation</Text>
-                <Text className="text-sm text-gray-600">{formatTimestamp(nextRotationAt || keyRotationAt || "")}</Text>
+                <div className="font-medium text-foreground">
+                  Next Scheduled Rotation
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {formatTimestamp(nextRotationAt || keyRotationAt || "")}
+                </div>
               </div>
             </div>
           )}
 
-          {/* No rotation data message - Only show if auto-rotation is enabled but no data */}
-          {autoRotate && !lastRotationAt && !keyRotationAt && !nextRotationAt && (
-            <div className="flex items-center gap-2 p-3 bg-gray-50 border border-gray-100 rounded-md">
-              <ClockIcon className="w-4 h-4 text-gray-500" />
-              <Text className="text-gray-600">No rotation history available</Text>
-            </div>
-          )}
+          {autoRotate &&
+            !lastRotationAt &&
+            !keyRotationAt &&
+            !nextRotationAt && (
+              <div className="flex items-center gap-2 p-3 bg-muted border border-border rounded-md">
+                <Clock className="w-4 h-4 text-muted-foreground" />
+                <span className="text-muted-foreground">
+                  No rotation history available
+                </span>
+              </div>
+            )}
         </div>
       )}
 
-      {/* Disabled State - Only show if auto-rotation is disabled AND there's no rotation history */}
-      {!autoRotate && !lastRotationAt && !keyRotationAt && !nextRotationAt && (
-        <div className="flex items-center gap-2 p-3 bg-gray-50 border border-gray-100 rounded-md">
-          <RefreshIcon className="w-4 h-4 text-gray-400" />
-          <Text className="text-gray-600">Auto-rotation is not enabled for this key</Text>
-        </div>
-      )}
+      {!autoRotate &&
+        !lastRotationAt &&
+        !keyRotationAt &&
+        !nextRotationAt && (
+          <div className="flex items-center gap-2 p-3 bg-muted border border-border rounded-md">
+            <RefreshCw className="w-4 h-4 text-muted-foreground" />
+            <span className="text-muted-foreground">
+              Auto-rotation is not enabled for this key
+            </span>
+          </div>
+        )}
     </div>
   );
 
   if (variant === "card") {
     return (
-      <div className={`bg-white border border-gray-200 rounded-lg p-6 ${className}`}>
+      <div
+        className={`bg-background border border-border rounded-lg p-6 ${className}`}
+      >
         <div className="flex items-center gap-2 mb-6">
           <div>
-            <Text className="font-semibold text-gray-900">Auto-Rotation</Text>
-            <Text className="text-xs text-gray-500">Automatic key rotation settings and status for this key</Text>
+            <p className="font-semibold text-foreground">Auto-Rotation</p>
+            <p className="text-xs text-muted-foreground">
+              Automatic key rotation settings and status for this key
+            </p>
           </div>
         </div>
         {content}
@@ -116,7 +139,7 @@ const AutoRotationView: React.FC<AutoRotationViewProps> = ({
 
   return (
     <div className={`${className}`}>
-      <Text className="font-medium text-gray-900 mb-3">Auto-Rotation</Text>
+      <p className="font-medium text-foreground mb-3">Auto-Rotation</p>
       {content}
     </div>
   );

ui/litellm-dashboard/src/components/common_components/team_multi_select.tsx

@@ -1,11 +1,16 @@
-import React, { useMemo, useState, type UIEvent } from "react";
-import { Select, Typography } from "antd";
-import { LoadingOutlined } from "@ant-design/icons";
+import React, { useMemo, useRef, useState } from "react";
+import { Loader2, X } from "lucide-react";
 import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
 import { useInfiniteTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
 import { Team } from "../key_team_helpers/key_list";
-
-const { Text } = Typography;
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 
 interface TeamMultiSelectProps {
   value?: string[];
@@ -27,22 +32,15 @@ const TeamMultiSelect: React.FC<TeamMultiSelectProps> = ({
   pageSize = 20,
   placeholder = "Search teams by alias...",
 }) => {
+  const [open, setOpen] = useState(false);
   const [searchInput, setSearchInput] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", {
     wait: DEBOUNCE_MS,
   });
+  const listRef = useRef<HTMLDivElement>(null);
 
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading,
-  } = useInfiniteTeams(
-    pageSize,
-    debouncedSearch || undefined,
-    organizationId,
-  );
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteTeams(pageSize, debouncedSearch || undefined, organizationId);
 
   const teams = useMemo(() => {
     if (!data?.pages) return [];
@@ -58,7 +56,15 @@ const TeamMultiSelect: React.FC<TeamMultiSelectProps> = ({
     return result;
   }, [data]);
 
-  const handlePopupScroll = (e: UIEvent<HTMLDivElement>) => {
+  const teamMap = useMemo(() => {
+    const m = new Map<string, Team>();
+    for (const team of teams) m.set(team.team_id, team);
+    return m;
+  }, [teams]);
+
+  const labelFor = (id: string) => teamMap.get(id)?.team_alias ?? id;
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const target = e.currentTarget;
     const scrollRatio =
       (target.scrollTop + target.clientHeight) / target.scrollHeight;
@@ -72,40 +78,106 @@ const TeamMultiSelect: React.FC<TeamMultiSelectProps> = ({
     setDebouncedSearch(val);
   };
 
+  const toggle = (teamId: string) => {
+    if (value.includes(teamId)) {
+      onChange?.(value.filter((v) => v !== teamId));
+    } else {
+      onChange?.([...value, teamId]);
+    }
+  };
+
   return (
-    <Select
-      mode="multiple"
-      showSearch
-      placeholder={placeholder}
-      value={value}
-      onChange={(val: string[]) => onChange?.(val)}
-      disabled={disabled}
-      allowClear
-      filterOption={false}
-      onSearch={handleSearch}
-      searchValue={searchInput}
-      onPopupScroll={handlePopupScroll}
-      loading={isLoading}
-      notFoundContent={isLoading ? <LoadingOutlined spin /> : "No teams found"}
-      style={{ width: "100%" }}
-      popupRender={(menu) => (
-        <>
-          {menu}
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          className={cn(
+            "min-h-9 w-full flex flex-wrap items-center gap-1 rounded-md border border-input bg-background px-2 py-1 text-sm text-left disabled:opacity-50",
+          )}
+        >
+          {value.length === 0 ? (
+            <span className="text-muted-foreground px-1">{placeholder}</span>
+          ) : (
+            value.map((id) => (
+              <Badge
+                key={id}
+                variant="secondary"
+                className="gap-1 inline-flex items-center"
+              >
+                {labelFor(id)}
+                <span
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onChange?.(value.filter((s) => s !== id));
+                  }}
+                  className="inline-flex items-center"
+                  aria-label={`Remove ${labelFor(id)}`}
+                >
+                  <X size={12} />
+                </span>
+              </Badge>
+            ))
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[var(--radix-popover-trigger-width)] p-0"
+      >
+        <div className="p-2 border-b">
+          <Input
+            autoFocus
+            placeholder="Search teams…"
+            value={searchInput}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="h-8"
+          />
+        </div>
+        <div
+          ref={listRef}
+          onScroll={handleScroll}
+          className="max-h-60 overflow-y-auto p-1"
+        >
+          {isLoading && teams.length === 0 ? (
+            <div className="flex items-center justify-center py-6 text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+            </div>
+          ) : teams.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              No teams found
+            </div>
+          ) : (
+            teams.map((team) => {
+              const selected = value.includes(team.team_id);
+              return (
+                <button
+                  key={team.team_id}
+                  type="button"
+                  onClick={() => toggle(team.team_id)}
+                  className={cn(
+                    "w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent",
+                    selected && "bg-accent",
+                  )}
+                >
+                  <span className="font-medium">{team.team_alias}</span>{" "}
+                  <span className="text-muted-foreground">
+                    ({team.team_id})
+                  </span>
+                </button>
+              );
+            })
+          )}
           {isFetchingNextPage && (
-            <div style={{ textAlign: "center", padding: 8 }}>
-              <LoadingOutlined spin />
+            <div className="flex items-center justify-center py-2">
+              <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
             </div>
           )}
-        </>
-      )}
-    >
-      {teams.map((team) => (
-        <Select.Option key={team.team_id} value={team.team_id}>
-          <span className="font-medium">{team.team_alias}</span>{" "}
-          <Text type="secondary">({team.team_id})</Text>
-        </Select.Option>
-      ))}
-    </Select>
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 };