added total monthly expenditure

app/lib/auth.ts

@@ -2,6 +2,7 @@ import NextAuth, { NextAuthConfig } from 'next-auth';
 import GoogleProvider from 'next-auth/providers/google';
 import { Session } from 'next-auth';
 import { AuthenticatedUser } from './types/next-auth';
+import { BillingLocation } from './db-types';
 
 const authConfig: NextAuthConfig = {
    callbacks: {
@@ -48,7 +49,18 @@ const authConfig: NextAuthConfig = {
 
 export const { auth, handlers: { GET, POST } } = NextAuth(authConfig);
 
-export const withUser = (fn: (user: AuthenticatedUser, ...args:any) => Promise<any>) => async (...args:any) => {
+export type AuthErrorMessage = {
+   message: string,
+   errors: {
+      message: string,
+   }
+}
+
+export const isAuthErrorMessage = (obj: any): obj is AuthErrorMessage => {
+   return (obj.message && obj.errors && obj.errors.message);
+}
+
+export const withUser = (fn: (user: AuthenticatedUser, ...args:any) => Promise<Array<BillingLocation>>) => async (...args:any) => {
    const session = await auth();
 
    if(!session) {
@@ -57,7 +69,7 @@ export const withUser = (fn: (user: AuthenticatedUser, ...args:any) => Promise<a
             message: "Not authenticated",
          },
          message: "Not authenticated",
-      });
+      } as AuthErrorMessage);
    }
    const { user } = session;
 

app/page.tsx

@@ -2,20 +2,32 @@ import { LocationCard } from './ui/LocationCard';
 import { MonthTitle } from './ui/MonthTitle';
 import { AddMonthButton } from './ui/AddMonthButton';
 import { AddLocationButton } from './ui/AddLocationButton';
-import clientPromise from './lib/mongodb';
-import { BillingLocation } from './lib/db-types';
 import { PageFooter } from './ui/PageFooter';
-import { auth } from '@/app/lib/auth';
+import { isAuthErrorMessage } from '@/app/lib/auth';
 import { fetchAllLocations } from './lib/locationActions';
 
 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();
 
+ if(isAuthErrorMessage(locations)) {
+  return (
+    <main className="flex min-h-screen flex-col p-6 bg-base-300">
+      <p className="text-center text-2xl text-red-500">{locations.message}</p>
+    </main>);
+  }
+
   // if the database is in it's initial state, show the add location button for the current month
   if(locations.length === 0) {
     const currentYearMonth = new Date().getFullYear() * 100 + new Date().getMonth() + 1;
@@ -28,25 +40,47 @@ export const Page = async () => {
     );
   }
 
+  let monthlyExpense = 0;
+
  return (
     <main className="flex min-h-screen flex-col p-6 bg-base-300">
         <AddMonthButton nextYearMonth={getNextYearMonth(locations[0].yearMonth)} />
         {
           locations.map((location, ix, array) => {
+
+            const isFirstLocationInMonth = ix === 0 || location.yearMonth !== array[ix-1].yearMonth;
+            const isLastLocationInMonth = location.yearMonth !== array[ix+1]?.yearMonth;
+            const isLastLocationOfFirstMonth = isLastLocationInMonth && location.yearMonth === array[0].yearMonth;
+
+            if(isFirstLocationInMonth) {
+              monthlyExpense = 0;
+            }
+
+            monthlyExpense += location.bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
             
             return (
               <>
                 {
                   // show month title above the first LocationCard in the month
-                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ?
+                  isFirstLocationInMonth ?
                     <MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
                 }
                 <LocationCard key={`${location._id}`} location={location} />
                 {
                   // show AddLocationButton as a last item in the firts month
-                  location.yearMonth === array[0].yearMonth && location.yearMonth !== array[ix+1]?.yearMonth ?
+                  isLastLocationOfFirstMonth ?
                     <AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={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/100) }</strong>
+                          </p>
+                        </span>
+                    </div> : null
+                }
               </>
             )
           })