Enable key reassignment on UI + Show 'updated at' column for key in all keys table (#10960)

* feat(key_edit_view.tsx): initial commit enabling reassigning keys to teams

* style(key_edit_view.tsx): cleaner implementation with teams in dropdown

* fix(all_keys_table.tsx): set max width to keys column

* feat(all_keys_table.tsx): show last updated at column for key

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

@@ -276,7 +276,11 @@ export function AllKeysTable({
       cell: (info) => {
         const userId = info.getValue() as string;
         const user = userList.find(u => u.user_id === userId);
-        return user?.user_email ? user.user_email : "-";
+        return user?.user_email ? (
+          <Tooltip title={user?.user_email}>
+            <span>{user?.user_email.slice(0, 20)}...</span>
+          </Tooltip>
+        ) : "-";
       },
     },
     {
@@ -310,6 +314,15 @@ export function AllKeysTable({
         return value ? value : "Unknown";
       },
     },
+    {
+      id: "updated_at",
+      accessorKey: "updated_at",
+      header: "Updated At",
+      cell: (info) => {
+        const value = info.getValue();
+        return value ? new Date(value as string).toLocaleDateString() : "Never";
+      },
+    },
     {
       id: "expires",
       accessorKey: "expires",

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

@@ -169,6 +169,20 @@ export function KeyEditView({
         <Input.TextArea rows={10} />
       </Form.Item>
 
+      <Form.Item label="Team ID" name="team_id">
+        <Select
+          placeholder="Select team"
+          style={{ width: "100%" }}
+        >
+          {/* Only show All Team Models if team has models */}
+          {teams?.map(team => (
+            <Select.Option key={team.team_id} value={team.team_id}>
+              {`${team.team_alias} (${team.team_id})`}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+
       {/* Hidden form field for token */}
       <Form.Item name="token" hidden>
         <Input />