ui - view router settings on admin ui

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

@@ -8,6 +8,7 @@ import ViewUserDashboard from "@/components/view_users";
 import Teams from "@/components/teams";
 import AdminPanel from "@/components/admins";
 import Settings from "@/components/settings";
+import GeneralSettings from "@/components/general_settings";
 import ChatUI from "@/components/chat_ui";
 import Sidebar from "../components/leftnav";
 import Usage from "../components/usage";
@@ -169,6 +170,12 @@ const CreateKeyPage = () => {
               userRole={userRole}
               accessToken={accessToken}
             />
+          )  : page == "general-settings" ? (
+              <GeneralSettings
+                userID={userID}
+                userRole={userRole}
+                accessToken={accessToken}
+              />
           ) : (
             <Usage
               userID={userID}

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

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  Title,
+  Subtitle,
+  Table,
+  TableHead,
+  TableRow,
+  Badge,
+  TableHeaderCell,
+  TableCell,
+  TableBody,
+  Metric,
+  Text,
+  Grid,
+  Button,
+  TextInput,
+  Col,
+} from "@tremor/react";
+import { getCallbacksCall, setCallbacksCall, serviceHealthCheck } from "./networking";
+import { Modal, Form, Input, Select, Button as Button2, message } from "antd";
+import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/components/static-generation-searchparams-bailout-provider";
+
+interface GeneralSettingsPageProps {
+  accessToken: string | null;
+  userRole: string | null;
+  userID: string | null;
+}
+
+const GeneralSettings: React.FC<GeneralSettingsPageProps> = ({
+  accessToken,
+  userRole,
+  userID,
+}) => {
+  const [routerSettings, setRouterSettings] = useState<{ [key: string]: any }>({});
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [selectedCallback, setSelectedCallback] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!accessToken || !userRole || !userID) {
+      return;
+    }
+    getCallbacksCall(accessToken, userID, userRole).then((data) => {
+      console.log("callbacks", data);
+      let router_settings = data.router_settings;
+      setRouterSettings(router_settings);
+    });
+  }, [accessToken, userRole, userID]);
+
+  const handleAddCallback = () => {
+    console.log("Add callback clicked");
+    setIsModalVisible(true);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+    setSelectedCallback(null);
+  };
+
+  const handleSaveChanges = (callback: any) => {
+    if (!accessToken) {
+      return;
+    }
+
+    const updatedVariables = Object.fromEntries(
+      Object.entries(callback.variables).map(([key, value]) => [key, (document.querySelector(`input[name="${key}"]`) as HTMLInputElement)?.value || value])
+    );
+
+    const payload = {
+      environment_variables: updatedVariables,
+    };
+
+    try {
+      setCallbacksCall(accessToken, payload);
+    } catch (error) {
+      message.error("Failed to update callback: " + error, 20);
+    }
+
+    message.success("Callback updated successfully");
+  };
+
+  
+
+  if (!accessToken) {
+    return null;
+  }
+
+  return (
+    <div className="w-full mx-4">
+      <Grid numItems={1} className="gap-2 p-8 w-full mt-2">
+      <Title>Router Settings</Title>
+        <Card >
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell>Setting</TableHeaderCell>
+                <TableHeaderCell>Value</TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+            {Object.entries(routerSettings).map(([param, value]) => (
+  <TableRow key={param}>
+    <TableCell>
+      <Text>{param}</Text>
+    </TableCell>
+    <TableCell>
+      <TextInput
+        name={param}
+        defaultValue={
+          typeof value === 'object' ? JSON.stringify(value, null, 2) : value.toString()
+        }
+      />
+    </TableCell>
+  </TableRow>
+))}
+</TableBody>
+          </Table>
+            
+            
+        </Card>
+        
+      </Grid>
+
+    </div>
+  );
+};
+
+export default GeneralSettings;

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

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