diff --git a/ui/litellm-dashboard/src/components/edit_user.tsx b/ui/litellm-dashboard/src/components/edit_user.tsx new file mode 100644 index 000000000..4ffc14f5b --- /dev/null +++ b/ui/litellm-dashboard/src/components/edit_user.tsx @@ -0,0 +1,119 @@ +import { useState } from 'react'; +import { + Dialog, + DialogPanel, + TextInput, + Button, + Select, + SelectItem, + Text, +} from '@tremor/react'; + +import { + Button as Button2, + Modal, + Form, + Input, + Select as Select2, + InputNumber, + message, + } from "antd"; + +interface EditUserModalProps { + visible: boolean; + onCancel: () => void; + user: any; + onSubmit: (data: any) => void; +} + +const EditUserModal: React.FC = ({ visible, onCancel, user, onSubmit }) => { + const [editedUser, setEditedUser] = useState(user); + const [form] = Form.useForm(); + + const handleChange = (e) => { + setEditedUser({ ...editedUser, [e.target.name]: e.target.value }); + }; + + const handleSubmit = () => { + onSubmit(editedUser); + onCancel(); + }; + + if (!user) { + return null; + } + + return ( + + + + + {JSON.stringify(user)} + + +
+ <> + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ ); +}; + +export default EditUserModal; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx index 89a50ad93..a5b803822 100644 --- a/ui/litellm-dashboard/src/components/leftnav.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.tsx @@ -79,7 +79,7 @@ const Sidebar: React.FC = ({ {userRole == "Admin" ? ( setPage("users")}> - Users + Internal Users ) : null} diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx index 3faf4c026..c631ff510 100644 --- a/ui/litellm-dashboard/src/components/view_users.tsx +++ b/ui/litellm-dashboard/src/components/view_users.tsx @@ -28,8 +28,14 @@ import { userInfoCall } from "./networking"; import { Badge, BadgeDelta, Button } from "@tremor/react"; import RequestAccess from "./request_model_access"; import CreateUser from "./create_user_button"; +import EditUserModal from "./edit_user"; import Paragraph from "antd/es/skeleton/Paragraph"; -import InformationCircleIcon from "@heroicons/react/outline/InformationCircleIcon"; +import { + PencilAltIcon, + InformationCircleIcon, + TrashIcon, +} from "@heroicons/react/outline"; + interface ViewUserDashboardProps { accessToken: string | null; @@ -55,8 +61,32 @@ const ViewUserDashboard: React.FC = ({ const [currentPage, setCurrentPage] = useState(0); const [openDialogId, setOpenDialogId] = React.useState(null); const [selectedItem, setSelectedItem] = useState(null); + const [editModalVisible, setEditModalVisible] = useState(false); + const [selectedUser, setSelectedUser] = useState(null); const defaultPageSize = 25; + const handleEditClick = (user) => { + console.log("handleEditClick:", user); + setSelectedUser(user); + setEditModalVisible(true); + }; + + const handleEditCancel = () => { + setEditModalVisible(false); + setSelectedUser(null); + }; + + const handleEditSubmit = async (editedUser) => { + // Call your API to update the user with editedUser data + // ... + + // Update the userData state with the updated user data + const updatedUserData = userData.map((user) => + user.user_id === editedUser.user_id ? editedUser : user + ); + setUserData(updatedUserData); + }; + useEffect(() => { if (!accessToken || !token || !userRole || !userID) { return; @@ -146,7 +176,8 @@ const ViewUserDashboard: React.FC = ({ User Models User Spend ($ USD) User Max Budget ($ USD) - User API Key Aliases + API Keys + @@ -173,9 +204,13 @@ const ViewUserDashboard: React.FC = ({ (key: any) => key !== null ).length > 0 ? ( - {user.key_aliases - .filter((key: any) => key !== null) - .join(", ")} + { + user.key_aliases.filter( + (key: any) => key !== null + ).length + + } +  Keys ) : ( @@ -188,12 +223,28 @@ const ViewUserDashboard: React.FC = ({ )} {/* {user.key_aliases.filter(key => key !== null).length} Keys */} - {/* { + + + + + { setOpenDialogId(user.user_id) setSelectedItem(user) - }}>View Keys */} - + }}>View Keys + + + { + handleEditClick(user) + }}>View Keys + + { + setOpenDialogId(user.user_id) + setSelectedItem(user) + }}>View Keys + + + ))} @@ -226,30 +277,15 @@ const ViewUserDashboard: React.FC = ({ + {renderPagination()} - {/* { - setOpenDialogId(null); - }} - -> - -
- Key Aliases - - - {selectedItem && selectedItem.key_aliases - ? selectedItem.key_aliases.filter(key => key !== null).length > 0 - ? selectedItem.key_aliases.filter(key => key !== null).join(', ') - : 'No Keys' - : "No Keys"} - -
-
-
*/} ); };