feat: add pagination to previous/next month

src/components/MonthlyOverview.svelte

@@ -4,6 +4,15 @@
 
 <h1>{data.formattedDate}</h1>
 
+<ul>
+	<li>
+		<a href={data.previous.link}>{data.previous.text}</a>
+	</li>
+	<li>
+		<a href={data.next.link}>{data.next.text}</a>
+	</li>
+</ul>
+
 <h2>Expenses</h2>
 {#if data.expenses.length}
 	<ul>

src/lib/monthly-pagination.js

@@ -0,0 +1,33 @@
+export const getMontlyPagination = (year, month) => {
+	let previousYear = year;
+	let nextYear = year;
+	let previousMonth = month;
+	let nextMonth = month + 2;
+
+	if (previousMonth <= 0) {
+		previousYear -= 1;
+		previousMonth = 12;
+	}
+
+	if (nextMonth > 12) {
+		nextYear += 1;
+		nextMonth = 1;
+	}
+
+	return {
+		previous: {
+			link: `/overview/${previousYear}/${previousMonth}`,
+			text: new Date(previousYear, previousMonth - 1, 1).toLocaleDateString('en-US', {
+				year: 'numeric',
+				month: 'short',
+			}),
+		},
+		next: {
+			link: `/overview/${nextYear}/${nextMonth}`,
+			text: new Date(nextYear, nextMonth - 1, 1).toLocaleDateString('en-US', {
+				year: 'numeric',
+				month: 'short',
+			}),
+		},
+	};
+};

src/routes/overview/+page.server.js

@@ -1,4 +1,5 @@
 import { getMonthlyOverview } from '$lib/monthly-overview.js';
+import { getMontlyPagination } from '$lib/monthly-pagination.js';
 import { fail } from '@sveltejs/kit';
 
 export const load = async ({ locals: { supabase } }) => {
@@ -10,11 +11,14 @@ export const load = async ({ locals: { supabase } }) => {
 			year: 'numeric',
 			month: 'short',
 		});
+		const { previous, next } = getMontlyPagination(year, month);
 		const monthlyOverview = await getMonthlyOverview(supabase, year, month);
 
 		return {
 			...monthlyOverview,
 			formattedDate,
+			previous,
+			next,
 		};
 	} catch (error) {
 		return fail(500, { message: 'Server error. Try again later.', success: false });

src/routes/overview/[year]/[month]/+page.server.js

@@ -1,4 +1,5 @@
 import { getMonthlyOverview } from '$lib/monthly-overview.js';
+import { getMontlyPagination } from '$lib/monthly-pagination.js';
 import { fail } from '@sveltejs/kit';
 
 export const load = async ({ params: { year, month }, locals: { supabase } }) => {
@@ -10,11 +11,14 @@ export const load = async ({ params: { year, month }, locals: { supabase } }) =>
 			year: 'numeric',
 			month: 'short',
 		});
+		const { previous, next } = getMontlyPagination(numericYear, numericMonth);
 		const monthlyOverview = await getMonthlyOverview(supabase, numericYear, numericMonth);
 
 		return {
 			...monthlyOverview,
 			formattedDate,
+			previous,
+			next,
 		};
 	} catch (error) {
 		return fail(500, { message: 'Server error. Try again later.', success: false });