Migrate user management buttons from Tremor to Ant Design

Replace Tremor Button components with antd Button in the user
management flow (Invite User, Bulk Invite Users, Select Users,
Bulk Edit, and onboarding modal copy link button).

ui/litellm-dashboard/src/components/CreateUserButton.tsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, UserAddOutlined } from "@ant-design/icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
-import { Accordion, AccordionBody, AccordionHeader, Button as Button2, SelectItem, TextInput } from "@tremor/react";
+import { Accordion, AccordionBody, AccordionHeader, SelectItem, TextInput } from "@tremor/react";
 import { Alert, Button, Form, Input, Modal, Select, Select as Select2, Space, Tooltip, Typography } from "antd";
 import React, { useEffect, useMemo, useState } from "react";
 import BulkCreateUsers from "./bulk_create_users_button";
@@ -229,9 +229,9 @@ export const CreateUserButton: React.FC<CreateuserProps> = ({
   // Original return for standalone mode
   return (
     <div className="flex gap-2">
-      <Button2 className="mb-0" onClick={() => setIsModalVisible(true)}>
+      <Button type="primary" className="mb-0" onClick={() => setIsModalVisible(true)}>
         + Invite User
-      </Button2>
+      </Button>
       <BulkCreateUsers accessToken={accessToken} teams={teams} possibleUIRoles={possibleUIRoles} />
       <Modal
         title="Invite User"

ui/litellm-dashboard/src/components/bulk_create_users_button.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Button as TremorButton, Text } from "@tremor/react";
-import { Modal, Table, Upload, Typography } from "antd";
+import { Text } from "@tremor/react";
+import { Button, Modal, Table, Upload, Typography } from "antd";
 import {
   UploadOutlined,
   DownloadOutlined,
@@ -540,9 +540,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
   return (
     <>
-      <TremorButton className="mb-0" onClick={() => setIsModalVisible(true)}>
+      <Button type="primary" className="mb-0" onClick={() => setIsModalVisible(true)}>
         + Bulk Invite Users
-      </TremorButton>
+      </Button>
 
       <Modal
         title="Bulk Invite Users"
@@ -629,9 +629,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                   </div>
                 </div>
 
-                <TremorButton onClick={downloadTemplate} size="lg" className="w-full md:w-auto">
-                  <DownloadOutlined className="mr-2" /> Download CSV Template
-                </TremorButton>
+                <Button type="primary" size="large" className="w-full md:w-auto" icon={<DownloadOutlined />}>
+                  Download CSV Template
+                </Button>
               </div>
 
               <div className="flex items-center mb-4">
@@ -662,14 +662,14 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                           </Typography.Text>
                         </div>
                       </div>
-                      <TremorButton
-                        size="xs"
-                        variant="secondary"
+                      <Button
+                        size="small"
                         onClick={removeSelectedFile}
                         className="flex items-center"
+                        icon={<DeleteOutlined />}
                       >
-                        <DeleteOutlined className="mr-1" /> Remove
-                      </TremorButton>
+                        Remove
+                      </Button>
                     </div>
 
                     {fileError ? (
@@ -694,7 +694,7 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                       <UploadOutlined className="text-3xl text-gray-400 mb-2" />
                       <p className="mb-1">Drag and drop your CSV file here</p>
                       <p className="text-sm text-gray-500 mb-3">or</p>
-                      <TremorButton size="sm">Browse files</TremorButton>
+                      <Button size="small">Browse files</Button>
                       <p className="text-xs text-gray-500 mt-4">Only CSV files (.csv) are supported</p>
                     </div>
                   </Upload>
@@ -781,21 +781,21 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
                   {!parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                     <div className="flex space-x-3">
-                      <TremorButton
+                      <Button
                         onClick={() => {
                           setParsedData([]);
                           setParseError(null);
                         }}
-                        variant="secondary"
                       >
                         Back
-                      </TremorButton>
-                      <TremorButton
+                      </Button>
+                      <Button
+                        type="primary"
                         onClick={handleBulkCreate}
                         disabled={parsedData.filter((d) => d.isValid).length === 0 || isProcessing}
                       >
                         {isProcessing ? "Creating..." : `Create ${parsedData.filter((d) => d.isValid).length} Users`}
-                      </TremorButton>
+                      </Button>
                     </div>
                   )}
                 </div>
@@ -829,40 +829,39 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
                 {!parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                   <div className="flex justify-end mt-4">
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setParsedData([]);
                         setParseError(null);
                       }}
-                      variant="secondary"
                       className="mr-3"
                     >
                       Back
-                    </TremorButton>
-                    <TremorButton
+                    </Button>
+                    <Button
+                      type="primary"
                       onClick={handleBulkCreate}
                       disabled={parsedData.filter((d) => d.isValid).length === 0 || isProcessing}
                     >
                       {isProcessing ? "Creating..." : `Create ${parsedData.filter((d) => d.isValid).length} Users`}
-                    </TremorButton>
+                    </Button>
                   </div>
                 )}
 
                 {parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                   <div className="flex justify-end mt-4">
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setParsedData([]);
                         setParseError(null);
                       }}
-                      variant="secondary"
                       className="mr-3"
                     >
                       Start New Bulk Import
-                    </TremorButton>
-                    <TremorButton onClick={downloadResults} variant="primary" className="flex items-center">
-                      <DownloadOutlined className="mr-2" /> Download User Credentials
-                    </TremorButton>
+                    </Button>
+                    <Button type="primary" onClick={downloadResults} icon={<DownloadOutlined />}>
+                      Download User Credentials
+                    </Button>
                   </div>
                 )}
               </div>

ui/litellm-dashboard/src/components/onboarding_link.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Modal, Typography } from "antd";
+import { Button, Modal, Typography } from "antd";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Text, Button } from "@tremor/react";
+import { Text } from "@tremor/react";
 import NotificationsManager from "./molecules/notifications_manager";
 
 export interface InvitationLink {
@@ -86,7 +86,7 @@ export default function OnboardingModal({
       </div>
       <div className="flex justify-end mt-5">
         <CopyToClipboard text={getInvitationUrl()} onCopy={() => NotificationsManager.success("Copied!")}>
-          <Button variant="primary">
+          <Button type="primary">
             {modalType === "invitation" ? "Copy invitation link" : "Copy password reset link"}
           </Button>
         </CopyToClipboard>

ui/litellm-dashboard/src/components/view_users.tsx

@@ -1,7 +1,7 @@
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import React, { useEffect, useState } from "react";
 
-import { Button } from "@tremor/react";
+import { Button } from "antd";
 import BulkEditUserModal from "./BulkEditUsers";
 import { CreateUserButton } from "./CreateUserButton";
 import EditUserModal from "./edit_user";
@@ -309,7 +309,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               {isProxyAdmin && (
                 <Button
                   onClick={handleToggleSelectionMode}
-                  variant={selectionMode ? "primary" : "secondary"}
+                  type={selectionMode ? "primary" : "default"}
                   className="flex items-center"
                 >
                   {selectionMode ? "Cancel Selection" : "Select Users"}
@@ -317,7 +317,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               )}
 
               {isProxyAdmin && selectionMode && (
-                <Button onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
+                <Button type="primary" onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
                   Bulk Edit ({selectedUsers.length} selected)
                 </Button>
               )}