v0 - add a set callbacks page

ui/litellm-dashboard/src/app/page.tsx

@@ -7,6 +7,7 @@ import ModelDashboard from "@/components/model_dashboard";
 import ViewUserDashboard from "@/components/view_users";
 import Teams from "@/components/teams";
 import AdminPanel from "@/components/admins";
+import Settings from "@/components/settings";
 import ChatUI from "@/components/chat_ui";
 import Sidebar from "../components/leftnav";
 import Usage from "../components/usage";
@@ -161,6 +162,9 @@ const CreateKeyPage = () => {
               searchParams={searchParams}
               accessToken={accessToken}
             />
+          ) : page == "settings" ? (
+            <Settings
+            />
           ) : (
             <Usage
               userID={userID}

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

@@ -87,6 +87,11 @@ const Sidebar: React.FC<SidebarProps> = ({
             Models
             </Text>
           </Menu.Item>
+          <Menu.Item key="8" onClick={() => setPage("settings")}>
+          <Text>
+            Settings
+          </Text>
+          </Menu.Item>
           {userRole == "Admin" ? (
             <Menu.Item key="7" onClick={() => setPage("admin-panel")}>
               <Text>

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

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import { Card, Title, Subtitle, Table, TableHead, TableRow, TableHeaderCell, TableCell, TableBody, Metric, Text, Grid, Button, } from "@tremor/react";
+
+const Settings = () => {
+ const [callbacks, setCallbacks] = useState([
+   { name: "Callback 1", envVars: ["sk-243******", "SECRET_KEY_2", "SECRET_KEY_3"] },
+   { name: "Callback 2", envVars: ["sk-456******", "SECRET_KEY_4", "SECRET_KEY_5"] },
+ ]);
+
+ return (
+   <div className="w-full mx-4">
+     <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
+       <Card>
+         <Title>Settings</Title>
+         <Subtitle>Logging Callbacks</Subtitle>
+         <Button>Add Callback</Button>
+         <Table>
+           <TableHead>
+             <TableRow>
+               <TableHeaderCell>Callback Name</TableHeaderCell>
+               <TableHeaderCell>Environment Variables</TableHeaderCell>
+             </TableRow>
+           </TableHead>
+           <TableBody>
+             {callbacks.map((callback, index) => (
+               <TableRow key={index}>
+                 <TableCell>{callback.name}</TableCell>
+                 <TableCell>
+                   {callback.envVars.map((envVar, index) => (
+                     <Text key={index}>{envVar}</Text>
+                   ))}
+                 </TableCell>
+               </TableRow>
+             ))}
+           </TableBody>
+         </Table>
+       </Card>
+     </Grid>
+   </div>
+ );
+};
+
+export default Settings;