BugFix: monthly expenses calculaton not taking into account unpaied bills

app/page.tsx

@@ -12,6 +12,7 @@ import { FC, Fragment } from 'react';
 import Pagination from './ui/Pagination';
 import { PageHeader } from './ui/PageHeader';
 import { Main } from './ui/Main';
+import { MontlyExpensesCard } from './ui/MonthlyExpensesCard';
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
   const {year, month} = yearMonth;
@@ -86,7 +87,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
               monthlyExpense = 0;
             }
 
-            monthlyExpense += location.bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
+            monthlyExpense += location.bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
             
             return (
               <Fragment key={`location-${location._id}`}>
@@ -102,14 +103,8 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
                     <AddLocationButton yearMonth={location.yearMonth} /> : null
                 }
                 {
-                  isLastLocationInMonth && 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
+                  isLastLocationInMonth ?
+                    <MontlyExpensesCard monthlyExpense={monthlyExpense} /> : null
                 }
               </Fragment>
             )

app/ui/MonthlyExpensesCard.tsx

@@ -0,0 +1,12 @@
+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