From bc2ab84342e477dfae62bee612df33b2c8d3a474 Mon Sep 17 00:00:00 2001
From: Krish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 17 Jul 2025 22:33:59 -0700
Subject: [PATCH] Teams - allow setting custom key duration + show many user +
 service account keys have been created  (#12722)

* fix(team_info.tsx): allow setting custom key duration

more flexible than previous pre-set options

* feat(team_info.tsx): show how many user + service account keys have been created within a team
---
 .../src/components/team/team_info.tsx         | 26 ++++++++++++++-----
 ui/litellm-dashboard/src/components/teams.tsx | 10 +++----
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx
index 6c6e6cc09cc..22b3a1437ef 100644
--- a/ui/litellm-dashboard/src/components/team/team_info.tsx
+++ b/ui/litellm-dashboard/src/components/team/team_info.tsx
@@ -19,6 +19,7 @@ import {
   TableBody,
   Table,
   Icon,
+  TextInput,
 } from "@tremor/react";
 import TeamMembersComponent from "./team_member_view";
 import MemberPermissions from "./member_permissions";
@@ -478,6 +479,21 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                 </div>
               </Card>
 
+              <Card>
+                <Text className="font-semibold text-gray-900">Virtual Keys</Text>
+                <div className="mt-2">
+                    <Text>
+                      User Keys: {teamData.keys.filter(key => key.user_id).length}
+                    </Text>
+                    <Text>
+                      Service Account Keys: {teamData.keys.filter(key => !key.user_id).length}
+                    </Text>
+                    <Text className="text-gray-500">
+                      Total: {teamData.keys.length}
+                    </Text>
+                  </div>
+              </Card>
+
               <ObjectPermissionsView
                 objectPermission={info.object_permission}
                 variant="card"
@@ -605,15 +621,11 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                   </Form.Item>
 
                   <Form.Item
-                    label="Team Member Key Duration"
+                    label="Team Member Key Duration (eg: 1d, 1mo)"
                     name="team_member_key_duration"
-                    tooltip="Set a limit to the duration of a team member's key."
+                    tooltip="Set a limit to the duration of a team member's key. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days), 1mo (month)"
                   >
-                    <Select placeholder="n/a">
-                      <Select.Option value="1d">1 day</Select.Option>
-                      <Select.Option value="1w">1 week</Select.Option>
-                      <Select.Option value="1mo">1 month</Select.Option>
-                    </Select>
+                    <TextInput placeholder="e.g., 30d" />
                   </Form.Item>
 
                   <Form.Item label="Reset Budget" name="budget_duration">
diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx
index 218f614e4ab..28de55cb2f6 100644
--- a/ui/litellm-dashboard/src/components/teams.tsx
+++ b/ui/litellm-dashboard/src/components/teams.tsx
@@ -1340,15 +1340,11 @@ const Teams: React.FC<TeamProps> = ({
                         <NumericalInput step={0.01} precision={2} width={200} />
                       </Form.Item>
                       <Form.Item
-                        label="Team Member Key Duration"
+                        label="Team Member Key Duration (eg: 1d, 1mo)"
                         name="team_member_key_duration"
-                        tooltip="Set a limit to the duration of a team member's key."
+                        tooltip="Set a limit to the duration of a team member's key. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days), 1mo (month)"
                       >
-                        <Select2 defaultValue={null} placeholder="n/a">
-                          <Select2.Option value="1d">1 day</Select2.Option>
-                          <Select2.Option value="1w">1 week</Select2.Option>
-                          <Select2.Option value="1mo">1 month</Select2.Option>
-                        </Select2>
+                        <TextInput placeholder="e.g., 30d" />
                       </Form.Item>
                       <Form.Item
                         label="Metadata"