More better displaying

frontend/src/lib/components/PaymentBillComp.svelte

@@ -1,13 +1,26 @@
 <script lang="ts">
 	import { type PaymentBill } from "$lib/types";
+	import { time } from "$wails/models";
 
 	export let paymentBill: PaymentBill = {
 		id: -1,
 		name: "none",
 		payment: null,
 	};
+
+	let paymentDate: string = "";
+	if (!!paymentBill.payment?.paymentDate) {
+		// @ts-ignore Yes split exists... The type is time.Time but it's actually a string
+		// Because typescript is a worthless waste of bytes
+		// And I don't know how to properly convert time.Time to Date or String
+		// So I'm doing this bullshit
+		paymentDate = paymentBill.payment!.paymentDate.split("T")[0];
+	}
 </script>
 
 <template>
-	<p>{paymentBill.name}</p>
+	<div class="grid grid-cols-2 w-full text-start px-3 text-xl">
+		<p class={paymentBill.payment == null ? "text-red-700" : ""}>{paymentBill.name}</p>
+		<p class="h-[1.6em] cursor-pointer border-2 border-transparent hover:border-solid hover:border-sky-500">{paymentDate}</p>
+	</div>
 </template>

frontend/src/lib/components/Payments.svelte

@@ -40,7 +40,7 @@
 		<div class="text-4xl font-bold">
 			{dateString}
 		</div>
-		<div>
+		<div class="">
 			{#each Object.values(paymentsModel) as payment}
 				<PaymentBillComp paymentBill={payment} />
 			{/each}