BugFix: monthly expenses calculaton not taking into account unpaied bills

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