From 1c1807df45bec77a9d1d43e80f1b839ade3fb934 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Sat, 14 Feb 2026 17:30:58 -0800
Subject: [PATCH] defensive checks for null

---
 .../AccessGroups/AccessGroupsDetailsPage.tsx  | 28 +++++++++----------
 .../AccessGroups/AccessGroupsPage.tsx         | 14 +++++-----
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx
index 7db2e338cf4..1cfc4ad43d5 100644
--- a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx
+++ b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx
@@ -105,11 +105,11 @@ export function AccessGroupDetail({
         <Flex align="center" gap={8}>
           <LayersIcon size={16} />
           Models
-          <Tag style={{ marginInlineEnd: 0 }}>{modelIds.length}</Tag>
+          <Tag style={{ marginInlineEnd: 0 }}>{modelIds?.length}</Tag>
         </Flex>
       ),
       children:
-        modelIds.length > 0 ? (
+        modelIds?.length > 0 ? (
           <List
             grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4 }}
             dataSource={modelIds}
@@ -131,11 +131,11 @@ export function AccessGroupDetail({
         <Flex align="center" gap={8}>
           <ServerIcon size={16} />
           MCP Servers
-          <Tag>{mcpServerIds.length}</Tag>
+          <Tag>{mcpServerIds?.length}</Tag>
         </Flex>
       ),
       children:
-        mcpServerIds.length > 0 ? (
+        mcpServerIds?.length > 0 ? (
           <List
             grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4 }}
             dataSource={mcpServerIds}
@@ -157,11 +157,11 @@ export function AccessGroupDetail({
         <Flex align="center" gap={8}>
           <BotIcon size={16} />
           Agents
-          <Tag>{agentIds.length}</Tag>
+          <Tag>{agentIds?.length}</Tag>
         </Flex>
       ),
       children:
-        agentIds.length > 0 ? (
+        agentIds?.length > 0 ? (
           <List
             grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4 }}
             dataSource={agentIds}
@@ -253,21 +253,21 @@ export function AccessGroupDetail({
               <Flex align="center" gap={8}>
                 <KeyIcon size={16} />
                 Attached Keys
-                <Tag>{keyIds.length}</Tag>
+                <Tag>{keyIds?.length}</Tag>
               </Flex>
             }
             extra={
-              keyIds.length > MAX_PREVIEW ? (
+              keyIds?.length > MAX_PREVIEW ? (
                 <Button
                   type="link"
                   onClick={() => setShowAllKeys(!showAllKeys)}
                 >
-                  {showAllKeys ? "Show Less" : `View All (${keyIds.length})`}
+                  {showAllKeys ? "Show Less" : `View All (${keyIds?.length})`}
                 </Button>
               ) : null
             }
           >
-            {keyIds.length > 0 ? (
+            {keyIds?.length > 0 ? (
               <Flex wrap="wrap" gap={8}>
                 {displayedKeys.map((id) => (
                   <Tag key={id}>
@@ -293,23 +293,23 @@ export function AccessGroupDetail({
               <Flex align="center" gap={8}>
                 <UsersIcon size={16} />
                 Attached Teams
-                <Tag>{teamIds.length}</Tag>
+                <Tag>{teamIds?.length}</Tag>
               </Flex>
             }
             extra={
-              teamIds.length > MAX_PREVIEW ? (
+              teamIds?.length > MAX_PREVIEW ? (
                 <Button
                   type="link"
                   onClick={() => setShowAllTeams(!showAllTeams)}
                 >
                   {showAllTeams
                     ? "Show Less"
-                    : `View All (${teamIds.length})`}
+                    : `View All (${teamIds?.length})`}
                 </Button>
               ) : null
             }
           >
-            {teamIds.length > 0 ? (
+            {teamIds?.length > 0 ? (
               <Flex wrap="wrap" gap={8}>
                 {displayedTeams.map((id) => (
                   <Tag key={id}>
diff --git a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsPage.tsx b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsPage.tsx
index 8aca22bd369..9e5b9017c05 100644
--- a/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsPage.tsx
+++ b/ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsPage.tsx
@@ -204,27 +204,27 @@ export function AccessGroupsPage() {
           const agentIds = record.agentIds ?? [];
           return (
             <Flex gap={12} align="center">
-              <Tooltip title={`${modelIds.length} Models`}>
+              <Tooltip title={`${modelIds?.length} Models`}>
                 <Tag color="blue" style={{ fontSize: 14, padding: "2px 8px", margin: 0 }}>
                   <Flex align="center" gap={6}>
                     <LayersIcon size={14} />
-                    {modelIds.length}
+                    {modelIds?.length}
                   </Flex>
                 </Tag>
               </Tooltip>
-              <Tooltip title={`${mcpServerIds.length} MCP Servers`}>
+              <Tooltip title={`${mcpServerIds?.length} MCP Servers`}>
                 <Tag color="cyan" style={{ fontSize: 14, padding: "2px 8px", margin: 0 }}>
                   <Flex align="center" gap={6}>
                     <ServerIcon size={14} />
-                    {mcpServerIds.length}
+                    {mcpServerIds?.length}
                   </Flex>
                 </Tag>
               </Tooltip>
-              <Tooltip title={`${agentIds.length} Agents`}>
+              <Tooltip title={`${agentIds?.length} Agents`}>
                 <Tag color="purple" style={{ fontSize: 14, padding: "2px 8px", margin: 0 }}>
                   <Flex align="center" gap={6}>
                     <BotIcon size={14} />
-                    {agentIds.length}
+                    {agentIds?.length}
                   </Flex>
                 </Tag>
               </Tooltip>
@@ -356,7 +356,7 @@ export function AccessGroupsPage() {
           />
           <Pagination
             current={currentPage}
-            total={sortedRows.length}
+            total={sortedRows?.length}
             pageSize={pageSize}
             onChange={(page) => setCurrentPage(page)}
             size="small"