added location total to UI

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);
+  }
+  

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();

app/ui/LocationCard.tsx

@@ -5,13 +5,19 @@ 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 }}) => 
+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">
+
+    // 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" />
@@ -25,5 +31,13 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
                         <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>;
+        </div>);
+};