From 74572dc8a11e79a524f82b4475dfd1322cceb939 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Tue, 27 Jan 2026 17:03:15 -0800
Subject: [PATCH] fix ui settings

---
 .../UISettings/PageVisibilitySettings.tsx     | 143 ++++++++++++++++++
 .../AdminSettings/UISettings/UISettings.tsx   |  25 ++-
 2 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx

diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx
new file mode 100644
index 00000000000..51a02b734e1
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { getAvailablePages } from "@/components/page_utils";
+import NotificationManager from "@/components/molecules/notifications_manager";
+import { Button, Checkbox, Collapse, Space, Tag, Typography } from "antd";
+import { useMemo, useState } from "react";
+
+interface PageVisibilitySettingsProps {
+  enabledPagesInternalUsers: string[] | null | undefined;
+  enabledPagesPropertyDescription?: string;
+  isUpdating: boolean;
+  onUpdate: (settings: { enabled_ui_pages_internal_users: string[] | null }) => void;
+}
+
+export default function PageVisibilitySettings({
+  enabledPagesInternalUsers,
+  enabledPagesPropertyDescription,
+  isUpdating,
+  onUpdate,
+}: PageVisibilitySettingsProps) {
+  // Check if page visibility is set (null/undefined means "not set" = all pages visible)
+  const isPageVisibilitySet = enabledPagesInternalUsers !== null && enabledPagesInternalUsers !== undefined;
+
+  // Get available pages from leftnav configuration
+  const availablePages = useMemo(() => getAvailablePages(), []);
+
+  // Group pages by their group for better UI
+  const pagesByGroup = useMemo(() => {
+    const grouped: Record<string, typeof availablePages> = {};
+    availablePages.forEach((page) => {
+      if (!grouped[page.group]) {
+        grouped[page.group] = [];
+      }
+      grouped[page.group].push(page);
+    });
+    return grouped;
+  }, [availablePages]);
+
+  // Local state for page selection
+  const [selectedPages, setSelectedPages] = useState<string[]>(enabledPagesInternalUsers || []);
+
+  // Update local state when data changes
+  useMemo(() => {
+    if (enabledPagesInternalUsers) {
+      setSelectedPages(enabledPagesInternalUsers);
+    } else {
+      setSelectedPages([]);
+    }
+  }, [enabledPagesInternalUsers]);
+
+  const handleSavePageVisibility = () => {
+    onUpdate({ enabled_ui_pages_internal_users: selectedPages.length > 0 ? selectedPages : null });
+  };
+
+  const handleResetToDefault = () => {
+    setSelectedPages([]);
+    onUpdate({ enabled_ui_pages_internal_users: null });
+  };
+
+  return (
+    <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+      <Space direction="vertical" size={4}>
+        <Space align="center">
+          <Typography.Text strong>Internal User Page Visibility</Typography.Text>
+          {!isPageVisibilitySet && (
+            <Tag color="default" style={{ marginLeft: "8px" }}>
+              Not set (all pages visible)
+            </Tag>
+          )}
+          {isPageVisibilitySet && (
+            <Tag color="blue" style={{ marginLeft: "8px" }}>
+              {selectedPages.length} page{selectedPages.length !== 1 ? "s" : ""} selected
+            </Tag>
+          )}
+        </Space>
+        {enabledPagesPropertyDescription && (
+          <Typography.Text type="secondary">{enabledPagesPropertyDescription}</Typography.Text>
+        )}
+        <Typography.Text type="secondary" style={{ fontSize: "12px", fontStyle: "italic" }}>
+          By default, all pages are visible to internal users. Select specific pages to restrict visibility.
+        </Typography.Text>
+      </Space>
+
+      <Collapse
+        items={[
+          {
+            key: "page-visibility",
+            label: "Configure Page Visibility",
+            children: (
+              <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+                <Checkbox.Group value={selectedPages} onChange={setSelectedPages} style={{ width: "100%" }}>
+                  <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+                    {Object.entries(pagesByGroup).map(([groupName, pages]) => (
+                      <div key={groupName}>
+                        <Typography.Text
+                          strong
+                          style={{
+                            fontSize: "11px",
+                            color: "#6b7280",
+                            letterSpacing: "0.05em",
+                            display: "block",
+                            marginBottom: "8px",
+                          }}
+                        >
+                          {groupName}
+                        </Typography.Text>
+                        <Space direction="vertical" size="small" style={{ marginLeft: "16px", width: "100%" }}>
+                          {pages.map((page) => (
+                            <div key={page.page} style={{ marginBottom: "4px" }}>
+                              <Checkbox value={page.page}>
+                                <Space direction="vertical" size={0}>
+                                  <Typography.Text>{page.label}</Typography.Text>
+                                  <Typography.Text type="secondary" style={{ fontSize: "12px" }}>
+                                    {page.description}
+                                  </Typography.Text>
+                                </Space>
+                              </Checkbox>
+                            </div>
+                          ))}
+                        </Space>
+                      </div>
+                    ))}
+                  </Space>
+                </Checkbox.Group>
+
+                <Space>
+                  <Button type="primary" onClick={handleSavePageVisibility} loading={isUpdating} disabled={isUpdating}>
+                    Save Page Visibility Settings
+                  </Button>
+                  {isPageVisibilitySet && (
+                    <Button onClick={handleResetToDefault} loading={isUpdating} disabled={isUpdating}>
+                      Reset to Default (All Pages)
+                    </Button>
+                  )}
+                </Space>
+              </Space>
+            ),
+          },
+        ]}
+      />
+    </Space>
+  );
+}
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
index 1cc493194e9..6cc9cbf4309 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
@@ -4,7 +4,8 @@ import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings"
 import { useUpdateUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUpdateUISettings";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import NotificationManager from "@/components/molecules/notifications_manager";
-import { Alert, Card, Skeleton, Space, Switch, Typography } from "antd";
+import PageVisibilitySettings from "./PageVisibilitySettings";
+import { Alert, Card, Divider, Skeleton, Space, Switch, Typography } from "antd";
 
 export default function UISettings() {
   const { accessToken } = useAuthorized();
@@ -14,6 +15,7 @@ export default function UISettings() {
   const schema = data?.field_schema;
   const property = schema?.properties?.disable_model_add_for_internal_users;
   const disableTeamAdminDeleteProperty = schema?.properties?.disable_team_admin_delete_team_user;
+  const enabledPagesProperty = schema?.properties?.enabled_ui_pages_internal_users;
   const values = data?.values ?? {};
   const isDisabledForInternalUsers = Boolean(values.disable_model_add_for_internal_users);
   const isDisabledTeamAdminDeleteTeamUser = Boolean(values.disable_team_admin_delete_team_user);
@@ -46,6 +48,17 @@ export default function UISettings() {
     );
   };
 
+  const handleUpdatePageVisibility = (settings: { enabled_ui_pages_internal_users: string[] | null }) => {
+    updateSettings(settings, {
+      onSuccess: () => {
+        NotificationManager.success("Page visibility settings updated successfully");
+      },
+      onError: (error) => {
+        NotificationManager.fromBackend(error);
+      },
+    });
+  };
+
   return (
     <Card title="UI Settings">
       {isLoading ? (
@@ -99,6 +112,16 @@ export default function UISettings() {
               )}
             </Space>
           </Space>
+
+          <Divider />
+
+          {/* Page Visibility for Internal Users */}
+          <PageVisibilitySettings
+            enabledPagesInternalUsers={values.enabled_ui_pages_internal_users}
+            enabledPagesPropertyDescription={enabledPagesProperty?.description}
+            isUpdating={isUpdating}
+            onUpdate={handleUpdatePageVisibility}
+          />
         </Space>
       )}
     </Card>