From fe61fa12e4daa46caa29133769349b5aea037f54 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Fri, 14 Aug 2026 11:01:43 -0700 Subject: [PATCH] refactor(ui): declare DateRangePickerValue locally instead of importing it from tremor DateRangePickerValue is a plain object shape, not a component, so the twelve files that used it were each carrying a no-restricted-imports suppression for a type that tremor declares as { from?: Date; to?: Date; selectValue?: string }. Declare that shape in components/shared/date_picker_types.ts and point every consumer at it, which drops ten suppressions from the baseline. advanced_date_picker and usage_date_picker keep their tremor imports: they still render tremor Button, Text and DateRangePicker, and moving DateRangePicker itself needs react-day-picker. --- ui/litellm-dashboard/eslint-suppressions.json | 40 ------------------- .../caching/_components/cache_dashboard.tsx | 2 +- .../_components/GuardrailsMonitorView.tsx | 2 +- .../components/EntityUsage/EntityUsage.tsx | 2 +- .../_components/components/UsagePageView.tsx | 2 +- .../EntityUsageExport/ExportSummary.tsx | 2 +- .../EntityUsageExport/UsageExportHeader.tsx | 2 +- .../src/components/EntityUsageExport/types.ts | 2 +- .../EntityUsageExport/utils.test.ts | 2 +- .../src/components/EntityUsageExport/utils.ts | 2 +- .../shared/advanced_date_picker.tsx | 3 +- .../components/shared/date_picker_types.ts | 5 +++ .../components/shared/usage_date_picker.tsx | 3 +- .../src/components/user_agent_activity.tsx | 2 +- 14 files changed, 19 insertions(+), 52 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/shared/date_picker_types.ts diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json index f73e3e6dda3..040809e53f0 100644 --- a/ui/litellm-dashboard/eslint-suppressions.json +++ b/ui/litellm-dashboard/eslint-suppressions.json @@ -140,9 +140,6 @@ "local/filename-pascal-case": { "count": 1 }, - "no-restricted-imports": { - "count": 1 - }, "react-hooks/purity": { "count": 1 }, @@ -301,11 +298,6 @@ "count": 3 } }, - "src/app/(dashboard)/guardrails-monitor/_components/GuardrailsMonitorView.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, "src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.tsx": { "no-nested-ternary": { "count": 5 @@ -1484,9 +1476,6 @@ "src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx": { "local/no-complex-jsx-arrow": { "count": 2 - }, - "no-restricted-imports": { - "count": 1 } }, "src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx": { @@ -1507,9 +1496,6 @@ "no-nested-ternary": { "count": 1 }, - "no-restricted-imports": { - "count": 1 - }, "react-hooks/purity": { "count": 1 }, @@ -1736,32 +1722,9 @@ "count": 1 } }, - "src/components/EntityUsageExport/ExportSummary.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, - "src/components/EntityUsageExport/UsageExportHeader.tsx": { - "no-restricted-imports": { - "count": 1 - } - }, - "src/components/EntityUsageExport/types.ts": { - "no-restricted-imports": { - "count": 1 - } - }, - "src/components/EntityUsageExport/utils.test.ts": { - "no-restricted-imports": { - "count": 1 - } - }, "src/components/EntityUsageExport/utils.ts": { "max-params": { "count": 3 - }, - "no-restricted-imports": { - "count": 1 } }, "src/components/GuardrailSettingsView.tsx": { @@ -3222,9 +3185,6 @@ "local/filename-pascal-case": { "count": 1 }, - "no-restricted-imports": { - "count": 1 - }, "react-hooks/set-state-in-effect": { "count": 1 } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx index 5167ac16542..e35c0103f7c 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx @@ -1,4 +1,4 @@ -import { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import React, { useEffect, useState } from "react"; import NotificationsManager from "@/components/molecules/notifications_manager"; import UsageDatePicker from "@/components/shared/usage_date_picker"; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsMonitorView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsMonitorView.tsx index 14849438135..3b5cc156242 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsMonitorView.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsMonitorView.tsx @@ -1,4 +1,4 @@ -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import React, { useCallback, useMemo, useState } from "react"; import { formatDate } from "@/components/networking"; import AdvancedDatePicker from "@/components/shared/advanced_date_picker"; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx index 2d6dbb823cc..c69764df471 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx @@ -14,7 +14,7 @@ import { MoneyCell } from "@/components/shared/table_cells"; import { Card as ShadcnCard, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { hasCapability, type Capability } from "@/utils/capabilities"; import { formatNumberWithCommas } from "@/utils/dataUtils"; -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import { ChevronDown, ChevronRight, ExternalLink, Info, Loader2 } from "lucide-react"; import type { ColumnDef } from "@tanstack/react-table"; import { Alert, AlertDescription } from "@/components/shared/Alert"; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx index a716d59bdc4..96cb0098a3a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx @@ -7,7 +7,7 @@ */ import { ChevronDown, ChevronRight, Download, ExternalLink, Info, Loader2, Sparkles, X } from "lucide-react"; -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { BarChart } from "@/components/shared/charts"; diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/ExportSummary.tsx b/ui/litellm-dashboard/src/components/EntityUsageExport/ExportSummary.tsx index bec65db9309..e5d96e0b145 100644 --- a/ui/litellm-dashboard/src/components/EntityUsageExport/ExportSummary.tsx +++ b/ui/litellm-dashboard/src/components/EntityUsageExport/ExportSummary.tsx @@ -1,5 +1,5 @@ import React from "react"; -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; interface ExportSummaryProps { dateRange: DateRangePickerValue; diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx b/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx index 78781df5948..adacdf16f76 100644 --- a/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx +++ b/ui/litellm-dashboard/src/components/EntityUsageExport/UsageExportHeader.tsx @@ -1,4 +1,4 @@ -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import { Download } from "lucide-react"; import React, { useState } from "react"; import { Button } from "@/components/ui/button"; diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts b/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts index d0c3235c4e8..30714ad632d 100644 --- a/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts +++ b/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts @@ -1,4 +1,4 @@ -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import type { Team } from "@/components/key_team_helpers/key_list"; export type ExportFormat = "csv" | "json"; diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/utils.test.ts b/ui/litellm-dashboard/src/components/EntityUsageExport/utils.test.ts index 08ca298c1f1..97f14e2d3d0 100644 --- a/ui/litellm-dashboard/src/components/EntityUsageExport/utils.test.ts +++ b/ui/litellm-dashboard/src/components/EntityUsageExport/utils.test.ts @@ -1,4 +1,4 @@ -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import Papa from "papaparse"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import type { EntitySpendData, ExportScope } from "./types"; diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/utils.ts b/ui/litellm-dashboard/src/components/EntityUsageExport/utils.ts index 9adcb50206d..de637d5d627 100644 --- a/ui/litellm-dashboard/src/components/EntityUsageExport/utils.ts +++ b/ui/litellm-dashboard/src/components/EntityUsageExport/utils.ts @@ -1,5 +1,5 @@ import { formatNumberWithCommas } from "@/utils/dataUtils"; -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import Papa from "papaparse"; import type { EntityBreakdown, EntitySpendData, EntityType, ExportMetadata, ExportScope } from "./types"; diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx index 013ccd118e9..03d5e1bc630 100644 --- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx +++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx @@ -1,5 +1,6 @@ import { CalendarOutlined, ClockCircleOutlined } from "@ant-design/icons"; -import { Button, DateRangePickerValue, Text } from "@tremor/react"; +import { Button, Text } from "@tremor/react"; +import type { DateRangePickerValue } from "./date_picker_types"; import moment from "moment"; import React, { useCallback, useEffect, useRef, useState } from "react"; diff --git a/ui/litellm-dashboard/src/components/shared/date_picker_types.ts b/ui/litellm-dashboard/src/components/shared/date_picker_types.ts new file mode 100644 index 00000000000..130c7e3b59a --- /dev/null +++ b/ui/litellm-dashboard/src/components/shared/date_picker_types.ts @@ -0,0 +1,5 @@ +export type DateRangePickerValue = { + from?: Date; + to?: Date; + selectValue?: string; +}; diff --git a/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx index 821dee65a3e..390da4c8f88 100644 --- a/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx +++ b/ui/litellm-dashboard/src/components/shared/usage_date_picker.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useState, useRef } from "react"; -import { DateRangePicker, DateRangePickerValue, Text } from "@tremor/react"; +import { DateRangePicker, Text } from "@tremor/react"; +import type { DateRangePickerValue } from "./date_picker_types"; interface UsageDatePickerProps { value: DateRangePickerValue; diff --git a/ui/litellm-dashboard/src/components/user_agent_activity.tsx b/ui/litellm-dashboard/src/components/user_agent_activity.tsx index a05db3313ab..ca6c2953dfe 100644 --- a/ui/litellm-dashboard/src/components/user_agent_activity.tsx +++ b/ui/litellm-dashboard/src/components/user_agent_activity.tsx @@ -17,7 +17,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip import { BarChart } from "@/components/shared/charts"; import { userAgentSummaryCall, tagDauCall, tagWauCall, tagMauCall, tagDistinctCall } from "./networking"; import PerUserUsage from "./per_user_usage"; -import type { DateRangePickerValue } from "@tremor/react"; +import type { DateRangePickerValue } from "@/components/shared/date_picker_types"; import { ChartLoader } from "./shared/chart_loader"; // New interfaces for the updated API response