From c5613ee0cc136e6c03266a14dfdf5e24eaeef1ec Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Mon, 19 Aug 2024 12:33:26 +0200
Subject: [PATCH] Make formatting a bit more better

Display dates for months in view
---
 frontend/index.html                           | 13 ++++++++-----
 frontend/src/App.svelte                       |  2 +-
 .../src/lib/components/PaymentBillComp.svelte |  4 +---
 frontend/src/lib/components/Payments.svelte   | 19 +++++++++++++++----
 frontend/src/lib/router/routes/Home.svelte    | 14 ++++++++++----
 5 files changed, 35 insertions(+), 17 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 7a7591c..ec86dc6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8"/>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>wails-template</title>
 </head>
+
 <body>
-<div id="app"></div>
-<script src="./src/main.ts" type="module"></script>
+    <div id="app"></div>
+    <script src="./src/main.ts" type="module"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 5a67077..696a953 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -17,7 +17,7 @@
 <svelte:window on:keydown={keyDown} />
 <Toaster theme="dark" expand visibleToasts={9} />
 <template>
-	<Header />
+	<!-- <Header /> -->
 	<main class="flex-1">
 		<Router />
 	</main>
diff --git a/frontend/src/lib/components/PaymentBillComp.svelte b/frontend/src/lib/components/PaymentBillComp.svelte
index dc1fa30..e19d765 100644
--- a/frontend/src/lib/components/PaymentBillComp.svelte
+++ b/frontend/src/lib/components/PaymentBillComp.svelte
@@ -11,7 +11,5 @@
 </script>
 
 <template>
-	<div>
-		<p>{paymentBill.name}</p>
-	</div>
+	<p>{paymentBill.name}</p>
 </template>
diff --git a/frontend/src/lib/components/Payments.svelte b/frontend/src/lib/components/Payments.svelte
index c384f93..eb4eeff 100644
--- a/frontend/src/lib/components/Payments.svelte
+++ b/frontend/src/lib/components/Payments.svelte
@@ -6,6 +6,12 @@
 	import PaymentBillComp from "./PaymentBillComp.svelte";
 
 	export let payments: main.Payment[] = [];
+	export let date: Date = new Date();
+	let dateString: string = date.toISOString()
+	$: {
+		dateString = date.toISOString().split("T")[0]
+		dateString = dateString.split("-").slice(0, 2).join("-");
+	}
 
 	const paymentsModel: { [key: number]: PaymentBill } = {};
 	for (const bill of $billsStore) {
@@ -30,9 +36,14 @@
 </script>
 
 <template>
-	<div>
-		{#each Object.values(paymentsModel) as payment}
-			<PaymentBillComp paymentBill={payment} />
-		{/each}
+	<div class="border-double border-2 border-gray-500 m-1">
+		<div class="text-4xl font-bold">
+			{dateString}
+		</div>
+		<div>
+			{#each Object.values(paymentsModel) as payment}
+				<PaymentBillComp paymentBill={payment} />
+			{/each}
+		</div>
 	</div>
 </template>
diff --git a/frontend/src/lib/router/routes/Home.svelte b/frontend/src/lib/router/routes/Home.svelte
index aee6feb..4996b06 100644
--- a/frontend/src/lib/router/routes/Home.svelte
+++ b/frontend/src/lib/router/routes/Home.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
 	import Payments from "$lib/components/Payments.svelte";
+	import { nowStore } from "$lib/store/nowStore";
 	import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore";
 	import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore";
 
-
+	const thisMonth = new Date();
+	thisMonth.setMonth($nowStore.getMonth());
+	const previousMonth = new Date();
+	previousMonth.setMonth($nowStore.getMonth() - 1);
 </script>
 
 <template>
-	<Payments payments={$thisMonthPaymentsStore} />
-	<Payments payments={$lastMonthPaymentsStore} />
-</template>
\ No newline at end of file
+	<div class="grid grid-cols-2">
+		<Payments date={previousMonth} payments={$lastMonthPaymentsStore} />
+		<Payments date={thisMonth} payments={$thisMonthPaymentsStore} />
+	</div>
+</template>
