From 15422a6d75a66247f9c650f25b75e062c62e36c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Thu, 1 Feb 2024 14:14:21 +0100
Subject: [PATCH] implemented months as accordion

---
 app/page.tsx                   | 14 ++++----------
 app/ui/MonthCard.tsx           | 27 +++++++++++++++++++++++++++
 app/ui/MonthTitle.tsx          | 10 ----------
 app/ui/MonthlyExpensesCard.tsx | 12 ------------
 4 files changed, 31 insertions(+), 32 deletions(-)
 create mode 100644 app/ui/MonthCard.tsx
 delete mode 100644 app/ui/MonthTitle.tsx
 delete mode 100644 app/ui/MonthlyExpensesCard.tsx

diff --git a/app/page.tsx b/app/page.tsx
index e19d92e..d92873d 100644
--- a/app/page.tsx
+++ b/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">
diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx
new file mode 100644
index 0000000..8ce52d0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/ui/MonthTitle.tsx b/app/ui/MonthTitle.tsx
deleted file mode 100644
index ee46344..0000000
--- a/app/ui/MonthTitle.tsx
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/app/ui/MonthlyExpensesCard.tsx b/app/ui/MonthlyExpensesCard.tsx
deleted file mode 100644
index 40db12f..0000000
--- a/app/ui/MonthlyExpensesCard.tsx
+++ /dev/null
@@ -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
\ No newline at end of file