Implement some sort of very basic display

frontend/src/App.svelte

@@ -2,15 +2,16 @@
 	import { Toaster } from "svelte-sonner";
 	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
-	import { Close } from '$wails/main/App'
-function keyDown(event: KeyboardEvent) {
-	if (event.ctrlKey && event.key == "r") {
-		window.location.reload();
+	import { Close } from "$wails/main/App";
+
+	function keyDown(event: KeyboardEvent) {
+		if (event.ctrlKey && event.key == "r") {
+			window.location.reload();
+		}
+		if (event.ctrlKey && event.key == "w") {
+			Close();
+		}
 	}
-	if (event.ctrlKey && event.key == "w") {
-		Close();
-	}
-}
 </script>
 
 <svelte:window on:keydown={keyDown} />

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/store/billsStore.ts

@@ -0,0 +1,37 @@
+import { type Writable, writable } from "svelte/store";
+import { GetBills } from "$wails/main/App";
+import { main } from "$wails/models";
+import { toast } from "svelte-sonner";
+
+async function createStore(): Promise<Writable<Map<number, main.Bill>> & { refresh: Function }> {
+	const bills: Map<number, main.Bill> = new Map<number, main.Bill>();
+	const res = await GetBills();
+	if (!res.success) {
+		toast.error("Error getting bills " + res.error);
+	} else {
+		for (let i = 0; i < res.data.length; i++) {
+			const bill = res.data[i];
+			bills.set(bill.id, bill);
+		}
+	}
+
+	const { subscribe, update, set } = writable(bills);
+	return {
+		subscribe,
+		update,
+		set,
+		refresh: async () => {
+			const res = await GetBills();
+			if (!res.success) {
+				toast.error("Error getting bills " + res.error);
+			} else {
+				for (let i = 0; i < res.data.length; i++) {
+					const bill = res.data[i];
+					bills.set(bill.id, bill);
+				}
+			}
+		},
+	};
+}
+
+export const billsStore = await createStore();

frontend/src/lib/store/lastMonthPaymentsStore.ts

@@ -0,0 +1,26 @@
+import { get, type Writable, writable } from "svelte/store";
+import { GetPaymentsForMonth } from "$wails/main/App";
+import { main } from "$wails/models";
+import { toast } from "svelte-sonner";
+import { nowStore } from "$lib/store/nowStore";
+
+async function createStore(): Promise<Writable<main.Payment[]>> {
+	const payments: main.Payment[] = [];
+	const now = new Date();
+	now.setMonth(get(nowStore).getMonth() - 1)
+	const res = await GetPaymentsForMonth(now);
+	if (!res.success) {
+		toast.error("Error getting payments " + res.error);
+	} else {
+		payments.push(...res.data);
+	}
+
+	const { subscribe, update, set } = writable(payments);
+	return {
+		subscribe,
+		update,
+		set,
+	};
+}
+
+export const lastMonthPaymentsStore = await createStore();

frontend/src/lib/store/nowStore.ts

@@ -0,0 +1,24 @@
+import { type Writable, writable } from "svelte/store";
+
+async function createStore(): Promise<Writable<Date> & { next: Function; prev: Function }> {
+	const { subscribe, update, set } = writable(new Date());
+	return {
+		subscribe,
+		update,
+		set,
+		next: () => {
+			update((now: Date) => {
+				now.setMonth(now.getMonth() + 1);
+				return now;
+			});
+		},
+		prev: () => {
+			update((now: Date) => {
+				now.setMonth(now.getMonth() - 1);
+				return now;
+			});
+		},
+	};
+}
+
+export const nowStore = await createStore();

frontend/src/lib/store/thisMonthPaymentsStore.ts

@@ -0,0 +1,25 @@
+import { get, type Writable, writable } from "svelte/store";
+import { GetPaymentsForMonth } from "$wails/main/App";
+import { main } from "$wails/models";
+import { toast } from "svelte-sonner";
+import { nowStore } from "$lib/store/nowStore";
+
+async function createStore(): Promise<Writable<main.Payment[]>> {
+	const payments: main.Payment[] = [];
+	const now = get(nowStore)
+	const res = await GetPaymentsForMonth(now);
+	if (!res.success) {
+		toast.error("Error getting payments " + res.error);
+	} else {
+		payments.push(...res.data);
+	}
+
+	const { subscribe, update, set } = writable(payments);
+	return {
+		subscribe,
+		update,
+		set,
+	};
+}
+
+export const thisMonthPaymentsStore = await createStore();

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;
+};

main.go

@@ -61,7 +61,7 @@ func main() {
 
 	// Create application with options
 	err = wails.Run(&options.App{
-		Title:  "bill-manager-w",
+		Title:  "bill-manager",
 		Width:  1024,
 		Height: 768,
 		AssetServer: &assetserver.Options{

service.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"fmt"
+	"log"
 	"time"
 )
 
@@ -14,6 +15,7 @@ const paymentColumns = "id, billid, monthFor, paymentDate"
 const billColumns = "id, name"
 
 func (s *BillService) GetPaymentsForDate(date time.Time) ([]Payment, error) {
+	log.Printf("GetPaymentsForDate for %v", date)
 	res := []Payment{}
 	if s == nil {
 		return res, fmt.Errorf("calling GetPaymentsFor on nil BillService")
@@ -45,6 +47,7 @@ WHERE monthFor = date(strftime('%%Y-%%m-01', ?));
 }
 
 func (s *BillService) GetPaymentForBillAndDate(billid int64, date time.Time) (Payment, error) {
+	log.Printf("GetPaymentForBillAndDate for %d and %s", billid, date)
 	res := Payment{}
 	if s == nil {
 		return res, fmt.Errorf("calling GetPaymentsFor on nil BillService")
@@ -68,6 +71,7 @@ WHERE billid = ? AND monthFor = date(strftime('%%Y-%%m-01', ?));
 }
 
 func (s *BillService) GetAllBills() ([]Bill, error) {
+	log.Printf("GetAllBills")
 	res := []Bill{}
 	if s == nil {
 		return res, fmt.Errorf("calling GetAllBills on nil BillService")
@@ -100,6 +104,7 @@ func (s *BillService) GetAllBills() ([]Bill, error) {
 }
 
 func (s *BillService) MarkPaid(billid int64, monthFor time.Time, when time.Time) (Payment, error) {
+	log.Printf("MarkPaid for %d, %v and %v", billid, monthFor, when)
 	res := Payment{}
 	if s == nil {
 		return res, fmt.Errorf("calling MarkPaid on nil BillService")