diff --git a/src/pages/billing/BillingDataView.tsx b/src/pages/billing/BillingDataView.tsx
index 9b94162..0b75f69 100644
--- a/src/pages/billing/BillingDataView.tsx
+++ b/src/pages/billing/BillingDataView.tsx
@@ -11,7 +11,7 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { FormGeneratorTable, ColumnConfig } from '../../components/FormGenerator/FormGeneratorTable';
 import { FormGeneratorReport } from '../../components/FormGenerator/FormGeneratorReport';
-import type { ReportSection, ReportFilterState, ReportChartDataPoint } from '../../components/FormGenerator/FormGeneratorReport';
+import type { ReportSection, ReportFilterState, ReportChartDataPoint, ReportDateRangeSelectorConfig } from '../../components/FormGenerator/FormGeneratorReport';
 import api from '../../api';
 import { useBilling, type BillingBucketSize } from '../../hooks/useBilling';
 import { UserTransaction } from '../../api/billingApi';
@@ -547,14 +547,14 @@ export const BillingDataView: React.FC = () => {
   }, [viewStats, chartMode, t]);
 
   // Date-range selector config: use shared PeriodPicker via FormGeneratorReport.
-  const dateRangeSelectorConfig = useMemo(() => ({
+  const dateRangeSelectorConfig = useMemo<ReportDateRangeSelectorConfig>(() => ({
     enabled: true,
-    direction: 'past' as const,
-    defaultPresetKind: 'thisMonth' as const,
+    direction: 'past',
+    defaultPresetKind: 'thisMonth',
     enabledPresets: [
       'thisMonth', 'lastMonth', 'thisQuarter', 'lastQuarter',
       'ytd', 'lastYear', 'last12Months', 'lastN', 'custom',
-    ] as const,
+    ],
   }), []);
 
   // Build scope options from balances (mandates the user has access to)