handling of empty database

app/page.tsx

@@ -4,8 +4,9 @@ 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';
 
-const calcNextYearMonth = (yearMonth: number) => {
+const getNextYearMonth = (yearMonth:number) => {
   return(yearMonth % 100 === 12 ? yearMonth + 89 : yearMonth + 1);
 }
 
@@ -20,30 +21,42 @@ export const Page = async () => {
     .limit(20)
     .toArray();
 
+  // 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;
+    return (
+      <main className="flex min-h-screen flex-col p-6 bg-base-300">
+        <MonthTitle yearMonth={currentYearMonth} />
+        <AddLocationButton yyyymm={currentYearMonth} />
+        <PageFooter />
+      </main>
+    );
+  }
+
  return (
     <main className="flex min-h-screen flex-col p-6 bg-base-300">
-        <AddMonthButton yearMonth={calcNextYearMonth(locations[0].yearMonth)} />
+        <AddMonthButton nextYearMonth={getNextYearMonth(locations[0].yearMonth)} />
         {
           locations.map((location, ix, array) => {
             
             return (
               <>
                 {
-                  location.yearMonth !== array[0].yearMonth && location.yearMonth !== array[ix-1].yearMonth ? <AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={array[ix-1].yearMonth} /> : null
-                }
-                {
-                  // show month title if it's the first location in the month
-                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ? <MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
+                  // show month title above the first LocationCard in the month
+                  ix === 0 || location.yearMonth !== array[ix-1].yearMonth ?
+                    <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 ?
+                    <AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={location.yearMonth} /> : null
+                }
               </>
             )
           })
         }
-        <h2 className='text-xl text-sky-400/75 font-semibold mt-4'>Docs</h2>
-        <p><a href="https://tailwindcss.com/docs/" target="_blank">tailwindcss.com</a></p>
-        <p><a href="https://heroicons.com/" target="_blank">heroicons.com</a></p>
-        <p><a href="https://daisyui.com/components/" target="_blank">daisyui.com</a></p>
+        <PageFooter />
     </main>
   );
 }