implemented months as accordion

app/page.tsx

@@ -1,18 +1,14 @@
 import { LocationCard } from './ui/LocationCard';
-import { MonthTitle } from './ui/MonthTitle';
 import { AddMonthButton } from './ui/AddMonthButton';
 import { AddLocationButton } from './ui/AddLocationButton';
 import { PageFooter } from './ui/PageFooter';
 import { fetchAllLocations } from './lib/actions/locationActions';
-import { formatCurrency } from './lib/formatStrings';
 import { fetchAvailableYears } from './lib/actions/monthActions';
 import { BillingLocation, YearMonth } from './lib/db-types';
-import { formatYearMonth } from './lib/format';
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import Pagination from './ui/Pagination';
-import { PageHeader } from './ui/PageHeader';
 import { Main } from './ui/Main';
-import { MontlyExpensesCard } from './ui/MonthlyExpensesCard';
+import { MonthCard } from './ui/MonthCard';
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
   const {year, month} = yearMonth;
@@ -99,8 +95,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
         <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
         {
           Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => 
-            <Fragment key={`month-${monthKey}`}>
-              <MonthTitle yearMonth={yearMonth} />
+            <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense}>
               {
                 locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
               }
@@ -108,8 +103,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
                 // show AddLocationButton as a last item in the first month
                 monthIx === 0 ? <AddLocationButton yearMonth={yearMonth} /> : null
               }
-              <MontlyExpensesCard monthlyExpense={monthlyExpense} />
-            </Fragment>
+            </MonthCard>
           )
         }
         <div className="mt-5 flex w-full justify-center">

app/ui/MonthCard.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import { formatYearMonth } from "../lib/format";
+import { YearMonth } from "../lib/db-types";
+import { formatCurrency } from "../lib/formatStrings";
+
+export interface MonthCardProps {
+    yearMonth: YearMonth,
+    children?: React.ReactNode,
+    monthlyExpense:number
+}
+
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense }) =>
+<div className="collapse collapse-plus bg-base-200 my-1">
+  <input type="radio" name="my-accordion-3" /> 
+  <div className="collapse-title text-xl font-medium">
+    {`${formatYearMonth(yearMonth)}`}
+    {
+      monthlyExpense>0 ?
+        <p className="text-xs font-medium">
+          Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
+        </p> : null
+    }
+  </div>
+  <div className="collapse-content"> 
+    {children}
+  </div>
+</div>

app/ui/MonthTitle.tsx

@@ -1,10 +0,0 @@
-import { FC } from "react";
-import { formatYearMonth } from "../lib/format";
-import { YearMonth } from "../lib/db-types";
-
-export interface MonthTitleProps {
-    yearMonth: YearMonth
-}
-
-export const MonthTitle:FC<MonthTitleProps> = ({ yearMonth }) =>
-<div className="divider text-2xl">{`${formatYearMonth(yearMonth)}`}</div>

app/ui/MonthlyExpensesCard.tsx

@@ -1,12 +0,0 @@
-import { FC } from "react";
-import { formatCurrency } from "../lib/formatStrings";
-
-export const MontlyExpensesCard:FC<{monthlyExpense:number}> = ({ monthlyExpense }) =>
-    monthlyExpense>0 ?
-    <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
-        <span className="card-body self-center">
-          <p>
-            Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
-          </p>
-        </span>
-    </div> : null