From e0c20374e1c3ee2d38c8e8a4c9bb14ecd816c434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Wed, 17 Jan 2024 15:52:38 +0100
Subject: [PATCH] BugFix: monthly expenses calculaton not taking into account
 unpaied bills

---
 app/page.tsx                   | 13 ++++---------
 app/ui/MonthlyExpensesCard.tsx | 12 ++++++++++++
 2 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 app/ui/MonthlyExpensesCard.tsx

diff --git a/app/page.tsx b/app/page.tsx
index c325365..79d745c 100644
--- a/app/page.tsx
+++ b/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>
             )
diff --git a/app/ui/MonthlyExpensesCard.tsx b/app/ui/MonthlyExpensesCard.tsx
new file mode 100644
index 0000000..40db12f
--- /dev/null
+++ b/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
\ No newline at end of file