feat(ui): migrate UsageIndicator + edit_user to shadcn

- UsageIndicator: drop @tremor Badge in favor of shadcn Badge with
  variant prop (destructive | secondary | default). The dense progress-
  bar / status palette internals stay raw color (categorical
  near-limit / over-limit signaling) and are pre-existing, not phase-1
  scope.
- edit_user: antd Modal/Form/Select/InputNumber/Button + @tremor TextInput
  \u2192 shadcn Dialog/react-hook-form/Select/Input/Button. LabeledRow helper
  preserves the antd labelCol/wrapperCol two-column layout. Hidden user_id
  field uses native input type=hidden.

Gates: TS \u2713 | Build \u2713.

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

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

@@ -1,5 +1,5 @@
 import { useDisableUsageIndicator } from "@/app/(dashboard)/hooks/useDisableUsageIndicator";
-import { Badge } from "@tremor/react";
+import { Badge } from "@/components/ui/badge";
 import { AlertTriangle, Calendar, ChevronDown, ChevronUp, Loader2, Minus, TrendingUp, UserCheck, Users } from "lucide-react";
 import { useEffect, useState } from "react";
 import { getRemainingUsers, getLicenseInfo, LicenseInfo } from "./networking";
@@ -146,10 +146,10 @@ export default function UsageIndicator({ accessToken, width = 220 }: UsageIndica
   const hasError = isOverLimit || isLicenseExpired;
   const hasWarning = (isNearLimit || isLicenseExpiringSoon) && !hasError;
 
-  const getStatusColor = () => {
-    if (hasError) return "red";
-    if (hasWarning) return "yellow";
-    return "green";
+  const getStatusColor = (): "destructive" | "default" | "secondary" => {
+    if (hasError) return "destructive";
+    if (hasWarning) return "secondary";
+    return "default";
   };
 
   const getStatusIcon = () => {
@@ -252,7 +252,7 @@ export default function UsageIndicator({ accessToken, width = 220 }: UsageIndica
             <Users className="h-4 w-4 flex-shrink-0" />
             <span className="text-sm font-medium truncate">Usage Status</span>
             {hasAnyIssue && (
-              <Badge color={getStatusColor()} className="text-xs px-1.5 py-0.5 flex-shrink-0">
+              <Badge variant={getStatusColor()} className="text-xs px-1.5 py-0.5 flex-shrink-0">
                 {getStatusIcon()}
               </Badge>
             )}

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

@@ -1,110 +1,229 @@
-import { useEffect, useState } from "react";
-import { TextInput, SelectItem } from "@tremor/react";
-
-import { Button as Button2, Modal, Form, Select as Select2, InputNumber } from "antd";
-
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import NumericalInput from "./shared/numerical_input";
 import BudgetDurationDropdown from "./common_components/budget_duration_dropdown";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 
 interface EditUserModalProps {
   visible: boolean;
   possibleUIRoles: null | Record<string, Record<string, string>>;
   onCancel: () => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   user: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSubmit: (data: any) => void;
 }
 
-const EditUserModal: React.FC<EditUserModalProps> = ({ visible, possibleUIRoles, onCancel, user, onSubmit }) => {
-  const [editedUser, setEditedUser] = useState(user);
-  const [form] = Form.useForm();
+interface EditUserValues {
+  user_email: string;
+  user_id: string;
+  user_role: string;
+  spend: number | null;
+  max_budget: number | null;
+  budget_duration: string | null;
+}
+
+function LabeledRow({
+  id,
+  label,
+  help,
+  tooltip,
+  children,
+}: {
+  id?: string;
+  label: string;
+  help?: string;
+  tooltip?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-3 items-start mb-4">
+      <Label htmlFor={id} className="pt-2" title={tooltip}>
+        {label}
+      </Label>
+      <div className="col-span-2 space-y-1">
+        {children}
+        {help && <p className="text-xs text-muted-foreground">{help}</p>}
+      </div>
+    </div>
+  );
+}
+
+const EditUserModal: React.FC<EditUserModalProps> = ({
+  visible,
+  possibleUIRoles,
+  onCancel,
+  user,
+  onSubmit,
+}) => {
+  const form = useForm<EditUserValues>({
+    defaultValues: {
+      user_email: "",
+      user_id: "",
+      user_role: "",
+      spend: null,
+      max_budget: null,
+      budget_duration: null,
+    },
+    mode: "onSubmit",
+  });
 
   useEffect(() => {
-    form.resetFields();
+    if (user) {
+      form.reset({
+        user_email: user.user_email ?? "",
+        user_id: user.user_id ?? "",
+        user_role: user.user_role ?? "",
+        spend: user.spend ?? null,
+        max_budget: user.max_budget ?? null,
+        budget_duration: user.budget_duration ?? null,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user]);
 
-  const handleCancel = async () => {
-    form.resetFields();
+  const handleCancel = () => {
+    form.reset();
     onCancel();
   };
 
-  const handleEditSubmit = async (formValues: Record<string, any>) => {
-    // Call API to update team with teamId and values
-    onSubmit(formValues);
-    form.resetFields();
+  const handleEditSubmit = form.handleSubmit((values) => {
+    onSubmit(values);
+    form.reset();
     onCancel();
-  };
+  });
 
-  if (!user) {
-    return null;
-  }
+  if (!user) return null;
 
   return (
-    <Modal open={visible} onCancel={handleCancel} footer={null} title={"Edit User " + user.user_id} width={1000}>
-      <Form
-        form={form}
-        onFinish={handleEditSubmit}
-        initialValues={user} // Pass initial values here
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 16 }}
-        labelAlign="left"
-      >
-        <>
-          <Form.Item className="mt-8" label="User Email" tooltip="Email of the User" name="user_email">
-            <TextInput />
-          </Form.Item>
+    <Dialog
+      open={visible}
+      onOpenChange={(o) => (!o ? handleCancel() : undefined)}
+    >
+      <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit User {user.user_id}</DialogTitle>
+          <DialogDescription className="sr-only">
+            Edit user attributes including role, budget, and rate limits.
+          </DialogDescription>
+        </DialogHeader>
+        <FormProvider {...form}>
+          <form onSubmit={handleEditSubmit}>
+            <LabeledRow id="user_email" label="User Email" tooltip="Email of the User">
+              <Input id="user_email" {...form.register("user_email")} />
+            </LabeledRow>
 
-          <Form.Item label="user_id" name="user_id" hidden={true}>
-            <TextInput />
-          </Form.Item>
+            {/* hidden user_id field */}
+            <input type="hidden" {...form.register("user_id")} />
 
-          <Form.Item label="User Role" name="user_role">
-            <Select2>
-              {possibleUIRoles &&
-                Object.entries(possibleUIRoles).map(([role, { ui_label, description }]) => (
-                  <SelectItem key={role} value={role} title={ui_label}>
-                    <div className="flex">
-                      {ui_label}{" "}
-                      <p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>
-                        {description}
-                      </p>
-                    </div>
-                  </SelectItem>
-                ))}
-            </Select2>
-          </Form.Item>
+            <LabeledRow label="User Role">
+              <Controller
+                control={form.control}
+                name="user_role"
+                render={({ field }) => (
+                  <Select
+                    value={field.value ?? ""}
+                    onValueChange={(v) => field.onChange(v)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {possibleUIRoles &&
+                        Object.entries(possibleUIRoles).map(
+                          ([role, { ui_label, description }]) => (
+                            <SelectItem key={role} value={role} title={ui_label}>
+                              <span className="flex">
+                                {ui_label}{" "}
+                                <span className="ml-2 text-muted-foreground text-xs">
+                                  {description}
+                                </span>
+                              </span>
+                            </SelectItem>
+                          ),
+                        )}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </LabeledRow>
 
-          <Form.Item
-            label="Spend (USD)"
-            name="spend"
-            tooltip="(float) - Spend of all LLM calls completed by this user"
-            help="Across all keys (including keys with team_id)."
-          >
-            <InputNumber min={0} step={0.01} />
-          </Form.Item>
+            <LabeledRow
+              id="spend"
+              label="Spend (USD)"
+              tooltip="(float) - Spend of all LLM calls completed by this user"
+              help="Across all keys (including keys with team_id)."
+            >
+              <Input
+                id="spend"
+                type="number"
+                step={0.01}
+                min={0}
+                {...form.register("spend", { valueAsNumber: true })}
+              />
+            </LabeledRow>
 
-          <Form.Item
-            label="User Budget (USD)"
-            name="max_budget"
-            tooltip="(float) - Maximum budget of this user"
-            help="Maximum budget of this user."
-          >
-            <NumericalInput min={0} step={0.01} />
-          </Form.Item>
+            <LabeledRow
+              id="max_budget"
+              label="User Budget (USD)"
+              tooltip="(float) - Maximum budget of this user"
+              help="Maximum budget of this user."
+            >
+              <Controller
+                control={form.control}
+                name="max_budget"
+                render={({ field }) => (
+                  <NumericalInput
+                    min={0}
+                    step={0.01}
+                    value={field.value ?? ""}
+                    onChange={(v: number | null | undefined) =>
+                      field.onChange(v ?? null)
+                    }
+                  />
+                )}
+              />
+            </LabeledRow>
 
-          <Form.Item label="Reset Budget" name="budget_duration">
-            <BudgetDurationDropdown />
-          </Form.Item>
+            <LabeledRow label="Reset Budget">
+              <Controller
+                control={form.control}
+                name="budget_duration"
+                render={({ field }) => (
+                  <BudgetDurationDropdown
+                    value={field.value ?? undefined}
+                    onChange={(value) =>
+                      field.onChange((value as string) ?? null)
+                    }
+                  />
+                )}
+              />
+            </LabeledRow>
 
-          <div style={{ textAlign: "right", marginTop: "10px" }}>
-            <Button2 htmlType="submit">Save</Button2>
-          </div>
-
-          <div style={{ textAlign: "right", marginTop: "10px" }}>
-            <Button2 htmlType="submit">Save</Button2>
-          </div>
-        </>
-      </Form>
-    </Modal>
+            <DialogFooter>
+              <Button type="submit">Save</Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
   );
 };