Fixing build

ui/litellm-dashboard/src/components/model_dashboard/HealthCheckComponent.tsx

@@ -596,7 +596,6 @@ const HealthCheckComponent: React.FC<HealthCheckComponentProps> = ({
             };
           })}
           isLoading={false}
-          table={healthTableRef}
         />
       </div>
 

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

@@ -1,10 +1,9 @@
 import { CopyOutlined } from "@ant-design/icons";
-import { Table as TableInstance } from "@tanstack/react-table";
 import { Badge, Button, Card, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title } from "@tremor/react";
 import { Modal } from "antd";
 import { Copy } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { isAdminRole } from "../utils/roles";
 import { agentHubColumns, AgentHubData } from "./agent_hub_table_columns";
@@ -76,9 +75,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
   const [isMcpModalVisible, setIsMcpModalVisible] = useState(false);
   const [isMakeMcpPublicModalVisible, setIsMakeMcpPublicModalVisible] = useState(false);
   const router = useRouter();
-  const tableRef = useRef<TableInstance<any>>(null);
-  const agentTableRef = useRef<TableInstance<any>>(null);
-  const mcpTableRef = useRef<TableInstance<any>>(null);
 
   useEffect(() => {
     const fetchData = async (accessToken: string) => {
@@ -404,7 +400,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
                     columns={modelHubColumns(showModal, copyToClipboard, publicPage)}
                     data={filteredData}
                     isLoading={loading}
-                    table={tableRef}
                     defaultSorting={[{ id: "model_group", desc: false }]}
                   />
                 </Card>
@@ -431,7 +426,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
                     columns={agentHubColumns(showAgentModal, copyToClipboard, publicPage)}
                     data={agentHubData || []}
                     isLoading={agentLoading}
-                    table={agentTableRef}
                     defaultSorting={[{ id: "name", desc: false }]}
                   />
                 </Card>
@@ -458,7 +452,6 @@ const ModelHubTable: React.FC<ModelHubTableProps> = ({ accessToken, publicPage,
                     columns={mcpHubColumns(showMcpModal, copyToClipboard, publicPage)}
                     data={mcpHubData || []}
                     isLoading={mcpLoading}
-                    table={mcpTableRef}
                     defaultSorting={[{ id: "server_name", desc: false }]}
                   />
                 </Card>

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

@@ -1,25 +1,24 @@
-import React, { useEffect, useState, useRef, useMemo } from "react";
-import {
-  modelHubPublicModelsCall,
-  getPublicModelHubInfo,
-  agentHubPublicModelsCall,
-  mcpHubPublicServersCall,
-  getUiConfig,
-} from "./networking";
-import { ModelDataTable } from "./model_dashboard/table";
-import { ColumnDef } from "@tanstack/react-table";
-import { Card, Text, Title, Button } from "@tremor/react";
-import { Tag, Tooltip, Modal, Select, Tabs } from "antd";
+import { ThemeProvider } from "@/contexts/ThemeContext";
 import { ExternalLinkIcon, SearchIcon } from "@heroicons/react/outline";
+import { ColumnDef } from "@tanstack/react-table";
+import { Button, Card, Text, Title } from "@tremor/react";
+import { Modal, Select, Tabs, Tag, Tooltip } from "antd";
 import { Copy, Info } from "lucide-react";
-import { Table as TableInstance } from "@tanstack/react-table";
+import React, { useEffect, useMemo, useState } from "react";
+import { ModelDataTable } from "./model_dashboard/table";
+import NotificationsManager from "./molecules/notifications_manager";
+import Navbar from "./navbar";
+import {
+  agentHubPublicModelsCall,
+  getPublicModelHubInfo,
+  getUiConfig,
+  mcpHubPublicServersCall,
+  modelHubPublicModelsCall,
+} from "./networking";
 import { generateCodeSnippet } from "./playground/chat_ui/CodeSnippets";
 import { getEndpointType } from "./playground/chat_ui/mode_endpoint_mapping";
 import { MessageType } from "./playground/chat_ui/types";
 import { getProviderLogoAndName } from "./provider_info_helpers";
-import Navbar from "./navbar";
-import { ThemeProvider } from "@/contexts/ThemeContext";
-import NotificationsManager from "./molecules/notifications_manager";
 
 const { TabPane } = Tabs;
 
@@ -118,9 +117,6 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
   const [selectedMcpServer, setSelectedMcpServer] = useState<null | MCPServerData>(null);
   const [proxySettings, setProxySettings] = useState<any>({});
   const [activeTab, setActiveTab] = useState<string>("models");
-  const tableRef = useRef<TableInstance<any>>(null);
-  const agentTableRef = useRef<TableInstance<any>>(null);
-  const mcpTableRef = useRef<TableInstance<any>>(null);
 
   useEffect(() => {
     const initializeAndFetch = async () => {
@@ -1121,7 +1117,6 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                   columns={publicModelHubColumns()}
                   data={filteredData}
                   isLoading={loading}
-                  table={tableRef}
                   defaultSorting={[{ id: "model_group", desc: false }]}
                 />
 
@@ -1184,7 +1179,6 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                     columns={publicAgentHubColumns()}
                     data={filteredAgentData}
                     isLoading={agentLoading}
-                    table={agentTableRef}
                     defaultSorting={[{ id: "name", desc: false }]}
                   />
 
@@ -1248,7 +1242,6 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                     columns={publicMCPHubColumns()}
                     data={filteredMcpData}
                     isLoading={mcpLoading}
-                    table={mcpTableRef}
                     defaultSorting={[{ id: "server_name", desc: false }]}
                   />
 

ui/litellm-dashboard/src/components/templates/model_dashboard.tsx

@@ -1,65 +1,74 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
 import {
   Card,
-  Title,
+  Col,
+  Grid,
   Subtitle,
   Table,
-  TableHead,
-  TableRow,
-  TableHeaderCell,
-  TableCell,
   TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
   Text,
-  Grid,
-  Col,
+  Title,
 } from "@tremor/react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { CredentialItem, credentialListCall, CredentialsResponse } from "../networking";
 
 import { handleAddModelSubmit } from "../add_model/handle_add_model_submit";
 
 import CredentialsPanel from "@/components/model_add/credentials";
-import { getDisplayModelName } from "../view_model/model_name_display";
-import { TabPanel, TabPanels, TabGroup, TabList, Tab, Icon } from "@tremor/react";
-import { Select, SelectItem, DateRangePickerValue } from "@tremor/react";
-import UsageDatePicker from "../shared/usage_date_picker";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { FilterIcon, RefreshIcon } from "@heroicons/react/outline";
+import {
+  AreaChart,
+  BarChart,
+  Button,
+  DateRangePickerValue,
+  Icon,
+  Select,
+  SelectItem,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from "@tremor/react";
+import type { UploadProps } from "antd";
+import { Form, InputNumber, Popover, Typography } from "antd";
+import AddModelTab from "../add_model/add_model_tab";
+import { Team } from "../key_team_helpers/key_list";
+import ModelInfoView from "../model_info_view";
+import TimeToFirstToken from "../model_metrics/time_to_first_token";
 import {
-  modelInfoCall,
-  modelCostMap,
-  healthCheckCall,
-  modelMetricsCall,
-  streamingModelMetricsCall,
-  modelExceptionsCall,
-  modelMetricsSlowResponsesCall,
-  getCallbacksCall,
-  setCallbacksCall,
-  modelSettingsCall,
   adminGlobalActivityExceptions,
   adminGlobalActivityExceptionsPerDeployment,
   allEndUsersCall,
+  getCallbacksCall,
+  healthCheckCall,
+  modelCostMap,
+  modelExceptionsCall,
+  modelInfoCall,
+  modelMetricsCall,
+  modelMetricsSlowResponsesCall,
+  modelSettingsCall,
+  setCallbacksCall,
+  streamingModelMetricsCall,
 } from "../networking";
-import { BarChart, AreaChart } from "@tremor/react";
-import { Popover, Form, InputNumber } from "antd";
-import { Button } from "@tremor/react";
-import { Typography } from "antd";
-import { RefreshIcon, FilterIcon } from "@heroicons/react/outline";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import type { UploadProps } from "antd";
-import TimeToFirstToken from "../model_metrics/time_to_first_token";
-import { Team } from "../key_team_helpers/key_list";
+import { getPlaceholder, getProviderModels, provider_map, Providers } from "../provider_info_helpers";
+import UsageDatePicker from "../shared/usage_date_picker";
 import TeamInfoView from "../team/team_info";
-import { Providers, provider_map, getPlaceholder, getProviderModels } from "../provider_info_helpers";
-import ModelInfoView from "../model_info_view";
-import AddModelTab from "../add_model/add_model_tab";
+import { getDisplayModelName } from "../view_model/model_name_display";
 
-import { ModelDataTable } from "../model_dashboard/table";
-import { columns } from "../molecules/models/columns";
-import PriceDataReload from "../price_data_reload";
-import HealthCheckComponent from "../model_dashboard/HealthCheckComponent";
-import PassThroughSettings from "../pass_through_settings";
-import ModelGroupAliasSettings from "../model_group_alias_settings";
 import { all_admin_roles } from "@/utils/roles";
-import { Table as TableInstance, PaginationState } from "@tanstack/react-table";
+import { PaginationState } from "@tanstack/react-table";
+import HealthCheckComponent from "../model_dashboard/HealthCheckComponent";
+import { ModelDataTable } from "../model_dashboard/table";
+import ModelGroupAliasSettings from "../model_group_alias_settings";
+import { columns } from "../molecules/models/columns";
 import NotificationsManager from "../molecules/notifications_manager";
+import PassThroughSettings from "../pass_through_settings";
+import PriceDataReload from "../price_data_reload";
 
 interface ModelDashboardProps {
   accessToken: string | null;
@@ -196,7 +205,6 @@ const OldModelDashboard: React.FC<ModelDashboardProps> = ({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const tableRef = useRef<TableInstance<any>>(null);
 
   // Pagination state
   const [pagination, setPagination] = useState<PaginationState>({
@@ -1325,7 +1333,6 @@ const OldModelDashboard: React.FC<ModelDashboardProps> = ({
                           )}
                           data={paginatedData}
                           isLoading={false}
-                          table={tableRef}
                         />
                       </div>
                     </div>