diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 992de2613..d0d3e45f4 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -51,6 +51,8 @@ const Team: React.FC = ({ const [memberForm] = Form.useForm(); const { Title, Paragraph } = Typography; const [value, setValue] = useState(""); + const [editModalVisible, setEditModalVisible] = useState(false); + const [selectedTeam, setSelectedTeam] = useState( teams ? teams[0] : null @@ -61,6 +63,102 @@ const Team: React.FC = ({ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [teamToDelete, setTeamToDelete] = useState(null); + +const EditTeamModal = ({ visible, onCancel, team, onSubmit }) => { + const [form] = Form.useForm(); + + const handleOk = () => { + form + .validateFields() + .then((values) => { + onSubmit(team.team_id, values); + form.resetFields(); + }) + .catch((error) => { + console.error("Validation failed:", error); + }); + }; + + return ( + +
+ <> + + + + + + {userModels && userModels.map((model) => ( + + {model} + + ))} + + + + + + + + + + + + +
+ Edit Team +
+
+
+ ); +}; + + const handleEditClick = (team: any) => { + setSelectedTeam(team); + setEditModalVisible(true); + }; + + const handleEditCancel = () => { + setEditModalVisible(false); + setSelectedTeam(null); + }; + + const handleEditSubmit = (teamId: string, values) => { + // Call API to update team with teamId and values + // Handle success or failure accordingly + console.log("Editing team:", teamId, "with values:", values); + message.success("Team updated successfully"); + setEditModalVisible(false); + setSelectedTeam(null); + }; + const handleOk = () => { setIsTeamModalVisible(false); form.resetFields(); @@ -261,6 +359,7 @@ const Team: React.FC = ({ handleEditClick(team)} /> handleDelete(team.team_id)} @@ -449,6 +548,14 @@ const Team: React.FC = ({ + {selectedTeam && ( + + )}