tracking active month via URL param

app/page.tsx

@@ -21,6 +21,7 @@ const getNextYearMonth = (yearMonth:YearMonth) => {
 export interface PageProps {
   searchParams?: {
     year?: string;
+    month?: string;
   };
 }
 
@@ -47,15 +48,17 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
     
     return (
       <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <MonthTitle yearMonth={currentYearMonth} />
-        <AddLocationButton yearMonth={currentYearMonth} />
+        <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0}>
+          <AddLocationButton yearMonth={currentYearMonth} />
+        </MonthCard>
         <PageFooter />
       </main>
     );
   }
 
-  const [ latestYear ] = availableYears;
   const currentYear = Number(searchParams?.year) || availableYears[0];
+  const currentMonth = Number(searchParams?.month);
+  
   const locations = await fetchAllLocations(currentYear);
 
   // group locations by month
@@ -95,7 +98,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
         <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
         {
           Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
-            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense}>
+            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === currentMonth } >
               {
                 locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
               }