Implement some sort of very basic display

frontend/src/App.svelte

@@ -2,25 +2,7 @@
 	import { Toaster } from "svelte-sonner";
 	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
-	import { billsStore } from "$lib/store/billsStore";
 	import { Close } from "$wails/main/App";
-	import { nowStore } from "$lib/store/nowStore";
-
-	console.log($billsStore);
-	console.log($nowStore);
-
-	setTimeout(nowStore.next, 1000);
-	setTimeout(nowStore.next, 2000);
-	setTimeout(nowStore.next, 3000);
-	setTimeout(nowStore.next, 4000);
-	setTimeout(nowStore.next, 5000);
-	setTimeout(nowStore.next, 6000);
-	setTimeout(nowStore.next, 7000);
-	setTimeout(nowStore.next, 8000);
-
-	$: {
-		console.log($nowStore);
-	}
 
 	function keyDown(event: KeyboardEvent) {
 		if (event.ctrlKey && event.key == "r") {

frontend/src/lib/components/PaymentBillComp.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { type PaymentBill } from "$lib/types";
+
+	export let paymentBill: PaymentBill = {
+		id: -1,
+		name: "none",
+		payment: null,
+	};
+
+	console.log(paymentBill);
+</script>
+
+<template>
+	<div>
+		<p>{paymentBill.name}</p>
+	</div>
+</template>

frontend/src/lib/components/Payments.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { billsStore } from "$lib/store/billsStore";
+	import { type PaymentBill } from "$lib/types";
+	import { main } from "$wails/models";
+	import { toast } from "svelte-sonner";
+	import PaymentBillComp from "./PaymentBillComp.svelte";
+
+	export let payments: main.Payment[] = [];
+
+	const paymentsModel: { [key: number]: PaymentBill } = {};
+	for (const bill of $billsStore) {
+		paymentsModel[bill[1].id] = {
+			id: bill[1].id,
+			name: bill[1].name,
+			payment: null,
+		};
+	}
+	for (const payment of payments) {
+		const bill = $billsStore.get(payment.billId);
+		if (!!!bill) {
+			toast.error(`Bill not found for id ${payment.billId}`);
+			continue;
+		}
+		paymentsModel[bill.id] = {
+			id: bill.id,
+			name: bill.name,
+			payment: payment,
+		};
+	}
+</script>
+
+<template>
+	<div>
+		{#each Object.values(paymentsModel) as payment}
+			<PaymentBillComp paymentBill={payment} />
+		{/each}
+	</div>
+</template>

frontend/src/lib/router/routes/Home.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
+	import Payments from "$lib/components/Payments.svelte";
+	import { lastMonthPaymentsStore } from "$lib/store/lastMonthPaymentsStore";
+	import { thisMonthPaymentsStore } from "$lib/store/thisMonthPaymentsStore";
+
 
 </script>
 
 <template>
-	Hello, world
+	<Payments payments={$thisMonthPaymentsStore} />
+	<Payments payments={$lastMonthPaymentsStore} />
 </template>

frontend/src/lib/types.ts

@@ -0,0 +1,7 @@
+import { main } from "$wails/models";
+
+export type PaymentBill = {
+	id: number;
+	name: string;
+	payment: main.Payment|null;
+};