From c76a69df5b5552647ac10ede6a07287caa988873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Tue, 9 Jan 2024 10:51:05 +0100
Subject: [PATCH] added location total to UI

---
 app/lib/formatStrings.ts |  6 +++++
 app/page.tsx             |  8 +------
 app/ui/LocationCard.tsx  | 48 ++++++++++++++++++++++++++--------------
 3 files changed, 38 insertions(+), 24 deletions(-)
 create mode 100644 app/lib/formatStrings.ts

diff --git a/app/lib/formatStrings.ts b/app/lib/formatStrings.ts
new file mode 100644
index 0000000..5867c58
--- /dev/null
+++ b/app/lib/formatStrings.ts
@@ -0,0 +1,6 @@
+export const formatCurrency = (amount:number) => {
+    // format number wirh 2 decimal places and a thousand separator
+    const formattedAmount = (amount/100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
+    return(formattedAmount);
+  }
+  
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 4f261b2..b64bab9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,18 +5,12 @@ import { AddLocationButton } from './ui/AddLocationButton';
 import { PageFooter } from './ui/PageFooter';
 import { isAuthErrorMessage } from '@/app/lib/auth';
 import { fetchAllLocations } from './lib/locationActions';
+import { formatCurrency } from './lib/formatStrings';
 
 const getNextYearMonth = (yearMonth:number) => {
   return(yearMonth % 100 === 12 ? yearMonth + 89 : yearMonth + 1);
 }
 
-const formatCurrency = (amount:number) => {
-  // format number wirh 2 decimal places and a thousand separator
-  const formattedAmount = amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
-  return(formattedAmount);
-}
-
-
 export const Page = async () => {
 
  const locations = await fetchAllLocations();
diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx
index 660aabe..addc8ca 100644
--- a/app/ui/LocationCard.tsx
+++ b/app/ui/LocationCard.tsx
@@ -5,25 +5,39 @@ import { FC } from "react";
 import { BillBadge } from "./BillBadge";
 import { BillingLocation } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
+import { formatCurrency } from "../lib/formatStrings";
 
 export interface LocationCardProps {
     location: BillingLocation
 }
 
-export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => 
-<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
-    <div className="card-body">
-        <a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
-            <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
-        </a>
-        <h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
-        <div className="card-actions">
-            {
-                bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
-            }
-            <a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
-                <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
-            </a>
-        </div>
-    </div>
-</div>;
\ No newline at end of file
+export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
+
+    // sum all the billAmounts
+    const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
+
+    return(
+        <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
+            <div className="card-body">
+                <a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
+                    <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
+                </a>
+                <h2 className="card-title">{formatYearMonth(yearMonth)} {name}</h2>
+                <div className="card-actions">
+                    {
+                        bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
+                    }
+                    <a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
+                        <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
+                    </a>
+                </div>
+                {
+                    monthlyExpense > 0 ?
+                    <p>
+                        Payed total: <strong>{ formatCurrency(monthlyExpense) }</strong>
+                    </p>
+                    : null
+                }
+            </div>
+        </div>);
+};
\ No newline at end of file