fix(ui): persist selected usage view across refreshes

src/app/(app)/usage/page.tsx

@@ -18,7 +18,7 @@ import {
   formatLargeNumber,
 } from '@/lib/utils';
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { StreakCalendar } from '@/components/profile/StreakCalendar';
 import { UsageWarning } from '@/components/usage/UsageWarning';
 import type { UsageTableColumn, UsageTableRow } from '@/components/usage/UsageTableBase';
@@ -42,6 +42,8 @@ type UsageResponse = {
   usage: UsageData[];
 };
 
+type GroupBy = 'day' | 'model';
+
 async function fetchUsageData(groupByModel: boolean, viewType: string): Promise<UsageResponse> {
   const response = await fetch(
     `/api/profile/usage?groupByModel=${groupByModel}&viewType=${viewType}`
@@ -134,10 +136,26 @@ function transformUsageDataForStreakCalendar(
 
 export default function UsagePage() {
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const trpc = useTRPC();
-  const [groupByModel, setGroupByModel] = useState(false);
+  const groupByParam = searchParams.get('groupBy');
+  const groupBy: GroupBy = groupByParam === 'model' ? 'model' : 'day';
+  const groupByModel = groupBy === 'model';
   const [viewType, setViewType] = useState<string>('personal');
 
+  const handleGroupByChange = (nextGroupBy: GroupBy) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (nextGroupBy === 'day') {
+      params.delete('groupBy');
+    } else {
+      params.set('groupBy', nextGroupBy);
+    }
+
+    const query = params.toString();
+    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  };
+
   const {
     data: usageData,
     isLoading,
@@ -540,14 +558,14 @@ export default function UsagePage() {
             <Button
               variant={groupByModel ? 'outline' : 'default'}
               size="sm"
-              onClick={() => setGroupByModel(false)}
+              onClick={() => handleGroupByChange('day')}
             >
               By Day
             </Button>
             <Button
               variant={groupByModel ? 'default' : 'outline'}
               size="sm"
-              onClick={() => setGroupByModel(true)}
+              onClick={() => handleGroupByChange('model')}
             >
               By Model & Day
             </Button>

src/components/organizations/usage-details/OrganizationUsageDetails.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useState, useMemo } from 'react';
 import { useSession } from 'next-auth/react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import {
   useOrganizationUsageDetails,
   useOrganizationUsageTimeseries,
@@ -39,6 +40,8 @@ import { OrganizationAdminContextProvider } from '@/components/organizations/Org
 // Chart color constant
 const CHART_COLOR = '#3b82f6';
 
+type GroupBy = 'day' | 'model';
+
 export function OrganizationUsageDetailsPage({ organizationId }: { organizationId: string }) {
   return (
     <OrganizationAdminContextProvider organizationId={organizationId}>
@@ -48,16 +51,34 @@ export function OrganizationUsageDetailsPage({ organizationId }: { organizationI
 }
 
 export function OrganizationUsageDetails({ organizationId }: { organizationId: string }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
   // State management
   const [timePeriod, setTimePeriod] = useState<TimePeriod>('week');
-  const [groupByModel, setGroupByModel] = useState(false);
+  const groupByParam = searchParams.get('groupBy');
+  const groupBy: GroupBy = groupByParam === 'model' ? 'model' : 'day';
+  const groupByModel = groupBy === 'model';
   const [selectedMetric, setSelectedMetric] = useState('cost');
   const [chartSplitBy, setChartSplitBy] = useState<ChartSplitBy>({
     provider: false,
     model: false,
     tokenType: false,
   });
 
+  const handleGroupByChange = (nextGroupBy: GroupBy) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (nextGroupBy === 'day') {
+      params.delete('groupBy');
+    } else {
+      params.set('groupBy', nextGroupBy);
+    }
+
+    const query = params.toString();
+    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  };
+
   // Context and session
   const { data: session } = useSession();
   const currentUserEmail = session?.user?.email;
@@ -327,14 +348,14 @@ export function OrganizationUsageDetails({ organizationId }: { organizationId: s
                     <Button
                       variant={groupByModel ? 'outline' : 'default'}
                       size="sm"
-                      onClick={() => setGroupByModel(false)}
+                      onClick={() => handleGroupByChange('day')}
                     >
                       By Day
                     </Button>
                     <Button
                       variant={groupByModel ? 'default' : 'outline'}
                       size="sm"
-                      onClick={() => setGroupByModel(true)}
+                      onClick={() => handleGroupByChange('model')}
                     >
                       By Model & Day
                     </Button>