Rework the fuck of everything

2025-10-19 15:17:36 +02:00
parent 123b2961a2
commit e016dd7851
19 changed files with 762 additions and 155 deletions
--- a/app.go
+++ b/app.go
@@ -63,6 +63,69 @@ func (a *App) SetPaid(billid int64, month time.Time) WailsPayment {
 	return res
 }

+func (a *App) SetPaidWithDate(billid int64, month time.Time, paymentDate time.Time) WailsPayment {
+	res := WailsPayment{}
+	payment, err := service.MarkPaid(billid, month, paymentDate)
+	if err!= nil {
+		res.Success = false
+		res.Error = err.Error()
+		return res
+	}
+	res.Success = true
+	res.Data = payment
+	return res
+}
+
+func (a *App) MovePayment(billid int64, fromMonth time.Time, toMonth time.Time) WailsPayment {
+	res := WailsPayment{}
+	payment, err := service.MovePayment(billid, fromMonth, toMonth)
+	if err!= nil {
+		res.Success = false
+		res.Error = err.Error()
+		return res
+	}
+	res.Success = true
+	res.Data = payment
+	return res
+}
+
+func (a *App) AddBill(name string) WailsBill {
+	res := WailsBill{}
+	bill, err := service.AddBill(name)
+	if err != nil {
+		res.Success = false
+		res.Error = err.Error()
+		return res
+	}
+	res.Success = true
+	res.Data = bill
+	return res
+}
+
+func (a *App) RemoveBill(billid int64) WailsVoid {
+	res := WailsVoid{}
+	err := service.RemoveBill(billid)
+	if err != nil {
+		res.Success = false
+		res.Error = err.Error()
+		return res
+	}
+	res.Success = true
+	return res
+}
+
+func (a *App) UnmarkPaid(billid int64, month time.Time) WailsVoid {
+	res := WailsVoid{}
+	err := service.UnmarkPaid(billid, month)
+	if err != nil {
+		res.Success = false
+		res.Error = err.Error()
+		return res
+	}
+	res.Success = true
+	return res
+}
+
 // These exist only so that wails generates models for Bill and Payment
 func (a *App) EmptyBill() Bill {
 	return Bill{}
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -3,6 +3,9 @@
 	import Router from "$lib/router/Router.svelte";
 	import { Close } from "$wails/main/App";
 	import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
+	import BillManager from "$lib/components/BillManager.svelte";
+
+	let showSettings = false;

 	function keyDown(event: KeyboardEvent) {
 		if (event.ctrlKey && event.key == "r") {
@@ -11,27 +14,79 @@
 		if (event.ctrlKey && event.key == "w") {
 			Close();
 		}
-		if (event.key == "ArrowLeft") {
-			scrollingTimeFrameStore.prev();
-		}
-		if (event.key == "ArrowRight") {
-			scrollingTimeFrameStore.next();
-		}
 	}
+
 	function scroll(event: WheelEvent) {
+		event.preventDefault();
+
+		// Don't navigate if settings modal is open
+		if (showSettings) return;
+
 		if (event.deltaY < 0) {
 			scrollingTimeFrameStore.prev();
 		} else {
 			scrollingTimeFrameStore.next();
 		}
 	}
-</script>
+	
 </script>
-<svelte:window on:keydown={keyDown} on:wheel={scroll} />
+
 <svelte:window on:keydown={keyDown} on:wheel|preventDefault={scroll} />
 <Toaster theme="dark" expand visibleToasts={9} />
-	<!-- <Header /> -->
-	<main class="flex-1">
+<template>
+	<header class="glass-morphism border-b border-white/10 px-6 py-3">
+		<div class="max-w-7xl mx-auto flex items-center justify-between">
+			<div class="flex items-center space-x-4">
+				<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+					<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+					</svg>
+				</div>
+				<h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+					Bill Manager
+				</h1>
+			</div>
+			<div class="flex items-center space-x-3">
+				<div class="text-xs text-white/60">
+					Use mouse scroll to navigate months
+				</div>
+				<button class="action-button text-xs px-3 py-1" on:click={() => showSettings = true}>
+					Settings
+				</button>
+				<button class="action-button text-xs px-3 py-1" on:click={() => window.location.reload()}>
+					Refresh
+				</button>
+			</div>
+		</div>
+	</header>
 	<main class="flex-1 overflow-hidden p-0">
 		<Router />
+	</main>
+
+	<!-- Settings Modal -->
+	{#if showSettings}
+		<div
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+			on:click={() => showSettings = false}
+			on:keydown={(e) => e.key === 'Escape' && (showSettings = false)}
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="settings-title"
+			tabindex="0"
+		>
+			<div class="glass-morphism rounded-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto m-4" on:click|stopPropagation>
+				<div class="flex items-center justify-between mb-4">
+					<h2 id="settings-title" class="text-2xl font-bold text-white">Settings</h2>
+					<button
+						class="w-8 h-8 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center text-white"
+						on:click={() => showSettings = false}
+						on:keydown={(e) => e.key === 'Enter' && (showSettings = false)}
+						aria-label="Close settings"
+					>
+						✕
+					</button>
+				</div>
+				<BillManager />
+			</div>
+		</div>
 	{/if}
--- a/frontend/src/lib/components/BillManager.svelte
+++ b/frontend/src/lib/components/BillManager.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { AddBill, RemoveBill } from "$wails/main/App";
+	import { billsStore } from "$lib/store/billsStore";
+	import { toast } from "svelte-sonner";
+
+	let showAddForm = false;
+	let newBillName = "";
+
+	async function addBill() {
+		if (!newBillName.trim()) {
+			toast.error("Please enter a bill name");
+			return;
+		}
+
+		const res = await AddBill(newBillName.trim());
+		if (!res.success) {
+			toast.error(`Failed to add bill: ${res.error}`);
+			return;
+		}
+
+		// Refresh the bills store
+		billsStore.refresh();
+
+		toast.success(`Bill "${newBillName}" added successfully`);
+		newBillName = "";
+		showAddForm = false;
+	}
+
+	async function removeBill(billId: number, billName: string) {
+		if (!confirm(`Are you sure you want to remove "${billName}"? This will also delete all payment history for this bill.`)) {
+			return;
+		}
+
+		const res = await RemoveBill(billId);
+		if (!res.success) {
+			toast.error(`Failed to remove bill: ${res.error}`);
+			return;
+		}
+
+		// Refresh the bills store
+		billsStore.refresh();
+
+		toast.success(`Bill "${billName}" removed successfully`);
+	}
+</script>
+
+<div class="glass-morphism rounded-xl p-6 mb-6">
+	<div class="flex items-center justify-between mb-4">
+		<h2 class="text-2xl font-bold text-white">Bill Management</h2>
+		<button
+			class="action-button text-sm px-4 py-2"
+			on:click={() => showAddForm = !showAddForm}
+		>
+			{showAddForm ? 'Cancel' : 'Add New Bill'}
+		</button>
+	</div>
+
+	{#if showAddForm}
+		<div class="mb-6 p-4 bg-white/5 rounded-lg border border-white/10">
+			<div class="flex flex-col space-y-3">
+				<label for="bill-name-input" class="text-sm font-medium text-white/80">New Bill Name:</label>
+				<input
+					id="bill-name-input"
+					type="text"
+					bind:value={newBillName}
+					placeholder="Enter bill name"
+					class="date-input"
+					on:keydown={(e) => e.key === 'Enter' && addBill()}
+				/>
+				<div class="flex space-x-2">
+					<button
+						class="action-button text-sm px-3 py-1.5"
+						on:click={addBill}
+					>
+						Add Bill
+					</button>
+					<button
+						class="px-3 py-1.5 text-sm rounded-lg font-semibold transition-all duration-200 bg-white/10 hover:bg-white/20 text-white/80"
+						on:click={() => { showAddForm = false; newBillName = ""; }}
+					>
+						Cancel
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<div class="space-y-2">
+		<h3 class="text-lg font-semibold text-white/80 mb-3">Current Bills:</h3>
+		{#if Array.from($billsStore.values()).length === 0}
+			<div class="text-center py-8 text-white/50">
+				<p>No bills found. Add your first bill to get started!</p>
+			</div>
+		{:else}
+			{#each Array.from($billsStore.values()) as bill}
+				<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10">
+					<span class="text-white font-medium">{bill.name}</span>
+					<button
+						class="px-3 py-1 text-sm rounded-lg font-semibold transition-all duration-200 bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30"
+						on:click={() => removeBill(bill.id, bill.name)}
+					>
+						Remove
+					</button>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
--- a/frontend/src/lib/components/PaymentBillComp.svelte
+++ b/frontend/src/lib/components/PaymentBillComp.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { type PaymentBill } from "$lib/types";
-	import { SetPaid } from "$wails/main/App";
+	import { SetPaid, SetPaidWithDate, UnmarkPaid } from "$wails/main/App";
 	import { toast } from "svelte-sonner";

 	export let paymentBill: PaymentBill = {
@@ -10,36 +10,114 @@
 	};
 	export let monthFor: Date = new Date();

+	let showDatePicker = false;
+	let selectedDate = "";
 	let paymentDate: string = "";
+
 	$: {
-		if (!!paymentBill.payment?.paymentDate) {
+		if (paymentBill.payment && 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];
+			paymentDate = paymentBill.payment.paymentDate.split("T")[0];
+			selectedDate = paymentDate;
 		}
 	}

 	async function doPaid(event: MouseEvent) {
 		const res = await SetPaid(paymentBill.id, monthFor);
 		if (!res.success) {
-			toast.error(`failed setting paid for ${paymentBill.id} and month ${monthFor} with error ${res.error}`);
-			return;
+			throw new Error(`failed setting paid for ${paymentBill.id} and month ${monthFor} with error ${res.error}`);
 		}
 		paymentBill.payment = res.data;
+		showDatePicker = false;
+	}
+
+	async function doPaidWithDate() {
+		const dateObj = new Date(selectedDate + "T00:00:00");
+		const res = await SetPaidWithDate(paymentBill.id, monthFor, dateObj);
+		if (!res.success) {
+			throw new Error(`failed setting paid for ${paymentBill.id} with custom date: ${res.error}`);
+		}
+		paymentBill.payment = res.data;
+		showDatePicker = false;
+	}
+
+	async function doUnmarkPaid() {
+		const res = await UnmarkPaid(paymentBill.id, monthFor);
+		if (!res.success) {
+			throw new Error(`failed unmarking paid for ${paymentBill.id}: ${res.error}`);
+		}
+		paymentBill.payment = null;
+	}
+
+	function openDatePicker() {
+		if (paymentBill.payment) {
+			showDatePicker = true;
+		} else {
+			doPaid();
+		}
 	}
 </script>

 <template>
-	<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>
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<p
-			class="h-[1.6em] cursor-pointer border-2 border-transparent hover:border-solid hover:border-sky-500"
-			on:click={doPaid}
-		>
-			{paymentDate}
-		</p>
+	<div class="bill-card p-3">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center space-x-2">
+				<div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold {paymentBill.payment == null ? 'bg-red-500' : 'bg-green-500'}">
+					{paymentBill.payment == null ? "!" : "✓"}
+				</div>
+				<div class="min-w-0">
+					<h3 class="text-sm font-semibold {paymentBill.payment == null ? 'text-red-400' : 'text-white'} truncate">
+						{paymentBill.name}
+					</h3>
+					<p class="text-xs text-white/60">
+						{paymentBill.payment == null ? 'Unpaid' : paymentDate}
+					</p>
+				</div>
+			</div>
+			<div class="flex space-x-1">
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<button
+					class="px-2 py-1 text-xs rounded font-medium transition-all duration-200 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400"
+					on:click={openDatePicker}
+				>
+					{paymentBill.payment == null ? 'Pay' : 'Edit'}
+				</button>
+				{#if paymentBill.payment}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<button
+						class="px-2 py-1 text-xs rounded font-medium transition-all duration-200 bg-red-500/20 hover:bg-red-500/30 text-red-400"
+						on:click={doUnmarkPaid}
+					>
+						×
+					</button>
+				{/if}
+			</div>
+		</div>
+
+		{#if showDatePicker}
+			<div class="mt-2 p-2 bg-white/5 rounded border border-white/10">
+				<div class="flex flex-col space-y-2">
+					<input
+						type="date"
+						bind:value={selectedDate}
+						class="px-2 py-1 text-xs rounded bg-white/10 border border-white/20 text-white"
+					/>
+					<div class="flex space-x-1">
+						<button
+							class="px-2 py-1 text-xs rounded font-medium bg-blue-500/30 text-blue-400"
+							on:click={doPaidWithDate}
+						>
+							Set
+						</button>
+						<button
+							class="px-2 py-1 text-xs rounded font-medium bg-white/10 text-white/70"
+							on:click={() => showDatePicker = false}
+						>
+							Cancel
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
 	</div>
 </template>
--- a/frontend/src/lib/components/Payments.svelte
+++ b/frontend/src/lib/components/Payments.svelte
@@ -13,37 +13,62 @@
 		dateString = dateString.split("-").slice(0, 2).join("-");
 	}

-	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 = (() => {
+		console.log('Payments component recalculating...', {
+			date: dateString,
+			paymentsCount: payments.length,
+			billsCount: $billsStore.size
+		});
+
+		const model: { [key: number]: PaymentBill } = {};
+
+		// First, create entries for all bills
+		for (const bill of $billsStore) {
+			model[bill[1].id] = {
+				id: bill[1].id,
+				name: bill[1].name,
+				payment: null,
+			};
 		}
-		paymentsModel[bill.id] = {
-			id: bill.id,
-			name: bill.name,
-			payment: payment,
-		};
-	}
+
+		// Then, add payment data for bills that have payments
+		for (const payment of payments) {
+			const bill = $billsStore.get(payment.billId);
+			if (!bill) {
+				throw new Error(`Bill not found for id ${payment.billId}`);
+			}
+			model[bill.id] = {
+				id: bill.id,
+				name: bill.name,
+				payment: payment,
+			};
+			console.log(`Payment found: ${bill.name} -> ${payment.paymentDate}`);
+		}
+
+		console.log('Final paymentsModel:', model);
+		return model;
+	})();
 </script>

 <template>
-	<div class="border-double border-2 border-gray-500 m-1">
-		<div class="text-4xl font-bold">
+	<div class="glass-morphism rounded-xl p-4 h-full flex flex-col">
+		<div class="month-header text-xl mb-4">
 			{dateString}
 		</div>
-		<div class="">
+		<div class="flex-1 overflow-y-auto space-y-2">
 			{#each Object.values(paymentsModel) as payment}
 				<PaymentBillComp paymentBill={payment} monthFor={date} />
 			{/each}
 		</div>
+		{#if Object.values(paymentsModel).length === 0}
+			<div class="flex-1 flex items-center justify-center text-white/50">
+				<div class="text-center">
+					<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+					</svg>
+					<p class="text-sm">No bills found</p>
+				</div>
+			</div>
+		{/if}
 	</div>
 </template>
--- a/frontend/src/lib/router/routes/Home.svelte
+++ b/frontend/src/lib/router/routes/Home.svelte
@@ -14,13 +14,15 @@
 </script>

 <template>
-	<div class="grid grid-cols-2">
-		{#if forceupdate}
-			<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
-			<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
-		{:else}
-			<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
-			<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
-		{/if}
+	<div class="h-full p-4">
+		<div class="grid grid-cols-2 gap-4 h-full">
+			{#if forceupdate}
+				<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
+				<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
+			{:else}
+				<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
+				<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
+			{/if}
+		</div>
 	</div>
 </template>
--- a/frontend/src/lib/store/billsStore.ts
+++ b/frontend/src/lib/store/billsStore.ts
@@ -25,10 +25,12 @@ async function createStore(): Promise<Writable<Map<number, main.Bill>> & { refre
 			if (!res.success) {
 				toast.error("Error getting bills " + res.error);
 			} else {
+				bills.clear();
 				for (let i = 0; i < res.data.length; i++) {
 					const bill = res.data[i];
 					bills.set(bill.id, bill);
 				}
+				set(bills);
 			}
 		},
 	};
--- a/frontend/src/lib/store/lastMonthPaymentsStore.ts
+++ b/frontend/src/lib/store/lastMonthPaymentsStore.ts
@@ -23,11 +23,12 @@ async function createStore(): Promise<Writable<main.Payment[]>> {

 const lastMonthPaymentsStore = await createStore();
 scrollingTimeFrameStore.subscribe(async (timeframe) => {
+	console.log('lastMonthPaymentsStore: timeframe updated', timeframe.from);
 	const res = await GetPaymentsForMonth(timeframe.from);
 	if (!res.success) {
-		toast.error("Error getting payments " + res.error);
-		return;
+		throw new Error("Error getting payments " + res.error);
 	}
+	console.log('lastMonthPaymentsStore: got payments', res.data.length);
 	lastMonthPaymentsStore.set(res.data);
 });

--- a/frontend/src/lib/store/scrollingTimeFrameStore.ts
+++ b/frontend/src/lib/store/scrollingTimeFrameStore.ts
@@ -16,16 +16,20 @@ async function createStore(): Promise<Writable<ScrollingTimeframe> & { next: Fun
 		set,
 		next: () => {
 			update((frame: ScrollingTimeframe) => {
-				frame.from.setMonth(frame.from.getMonth() + 1);
-				frame.to.setMonth(frame.to.getMonth() + 1);
-				return frame;
+				const newFrom = new Date(frame.from);
+				const newTo = new Date(frame.to);
+				newFrom.setMonth(newFrom.getMonth() + 1);
+				newTo.setMonth(newTo.getMonth() + 1);
+				return { from: newFrom, to: newTo };
 			});
 		},
 		prev: () => {
 			update((frame: ScrollingTimeframe) => {
-				frame.from.setMonth(frame.from.getMonth() - 1);
-				frame.to.setMonth(frame.to.getMonth() - 1);
-				return frame;
+				const newFrom = new Date(frame.from);
+				const newTo = new Date(frame.to);
+				newFrom.setMonth(newFrom.getMonth() - 1);
+				newTo.setMonth(newTo.getMonth() - 1);
+				return { from: newFrom, to: newTo };
 			});
 		},
 	};
--- a/frontend/src/lib/store/thisMonthPaymentsStore.ts
+++ b/frontend/src/lib/store/thisMonthPaymentsStore.ts
@@ -23,11 +23,12 @@ async function createStore(): Promise<Writable<main.Payment[]>> {

 const thisMonthPaymentsStore = await createStore();
 scrollingTimeFrameStore.subscribe(async (timeframe) => {
+	console.log('thisMonthPaymentsStore: timeframe updated', timeframe.to);
 	const res = await GetPaymentsForMonth(timeframe.to);
 	if (!res.success) {
-		toast.error("Error getting payments " + res.error);
-		return;
+		throw new Error("Error getting payments " + res.error);
 	}
+	console.log('thisMonthPaymentsStore: got payments', res.data.length);
 	thisMonthPaymentsStore.set(res.data);
 });

--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -2,18 +2,78 @@
@tailwind components;
@tailwind utilities;

-html {
-    background-color: rgba(27, 38, 54, 1);
-    text-align: center;
-    color: white;
+@layer base {
+    html {
+        background: linear-gradient(135deg, #1a1f2e 0%, #2c3e50 50%, #1a1f2e 100%);
+        text-align: center;
+        color: white;
+        min-height: 100vh;
+    }
+
+    body {
+        margin: 0;
+        color: white;
+        font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+        sans-serif;
+        background: transparent;
+    }
 }

-body {
-    margin: 0;
-    color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+@layer components {
+    .glass-morphism {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    }
+
+    .bill-card {
+        transition: all 300ms ease;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 0.5rem;
+    }
+
+    .bill-card:hover {
+        background: rgba(255, 255, 255, 0.06);
+        box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.25);
+        transform: scale(1.01);
+    }
+
+    .paid-indicator {
+        @apply inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold;
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+    }
+
+    .unpaid-indicator {
+        @apply inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold;
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+    }
+
+    .month-header {
+        @apply text-3xl font-bold mb-6 pb-3 border-b border-white/20;
+        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    .action-button {
+        @apply px-4 py-2 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95;
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+    }
+
+    .action-button:hover {
+        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
+    }
+
+    .date-input {
+        @apply px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-blue-400 focus:bg-white/15 transition-all duration-200;
+    }
 }

@font-face {
@@ -27,4 +87,24 @@ body {
 #app {
    height: 100vh;
    text-align: center;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
 }
--- a/frontend/wailsjs/go/main/App.d.ts
+++ b/frontend/wailsjs/go/main/App.d.ts
@@ -3,6 +3,8 @@
 import {main} from '../models';
 import {time} from '../models';

+export function AddBill(arg1:string):Promise<main.WailsBill>;
+
 export function Close():Promise<void>;

 export function EmptyBill():Promise<main.Bill>;
@@ -13,4 +15,12 @@ export function GetBills():Promise<main.WailsBills>;

 export function GetPaymentsForMonth(arg1:time.Time):Promise<main.WailsPayments>;

+export function MovePayment(arg1:number,arg2:time.Time,arg3:time.Time):Promise<main.WailsPayment>;
+
+export function RemoveBill(arg1:number):Promise<main.WailsVoid>;
+
 export function SetPaid(arg1:number,arg2:time.Time):Promise<main.WailsPayment>;
+
+export function SetPaidWithDate(arg1:number,arg2:time.Time,arg3:time.Time):Promise<main.WailsPayment>;
+
+export function UnmarkPaid(arg1:number,arg2:time.Time):Promise<main.WailsVoid>;
--- a/frontend/wailsjs/go/main/App.js
+++ b/frontend/wailsjs/go/main/App.js
@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT

+export function AddBill(arg1) {
+  return window['go']['main']['App']['AddBill'](arg1);
+}
+
 export function Close() {
  return window['go']['main']['App']['Close']();
 }
@@ -22,6 +26,22 @@ export function GetPaymentsForMonth(arg1) {
  return window['go']['main']['App']['GetPaymentsForMonth'](arg1);
 }

+export function MovePayment(arg1, arg2, arg3) {
+  return window['go']['main']['App']['MovePayment'](arg1, arg2, arg3);
+}
+
+export function RemoveBill(arg1) {
+  return window['go']['main']['App']['RemoveBill'](arg1);
+}
+
 export function SetPaid(arg1, arg2) {
  return window['go']['main']['App']['SetPaid'](arg1, arg2);
 }
+
+export function SetPaidWithDate(arg1, arg2, arg3) {
+  return window['go']['main']['App']['SetPaidWithDate'](arg1, arg2, arg3);
+}
+
+export function UnmarkPaid(arg1, arg2) {
+  return window['go']['main']['App']['UnmarkPaid'](arg1, arg2);
+}
--- a/frontend/wailsjs/go/models.ts
+++ b/frontend/wailsjs/go/models.ts
@@ -50,6 +50,40 @@ export namespace main {
 		    return a;
 		}
 	}
+	export class WailsBill {
+	    data: Bill;
+	    success: boolean;
+	    error: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new WailsBill(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.data = this.convertValues(source["data"], Bill);
+	        this.success = source["success"];
+	        this.error = source["error"];
+	    }
+	
+		convertValues(a: any, classs: any, asMap: boolean = false): any {
+		    if (!a) {
+		        return a;
+		    }
+		    if (a.slice && a.map) {
+		        return (a as any[]).map(elem => this.convertValues(elem, classs));
+		    } else if ("object" === typeof a) {
+		        if (asMap) {
+		            for (const key of Object.keys(a)) {
+		                a[key] = new classs(a[key]);
+		            }
+		            return a;
+		        }
+		        return new classs(a);
+		    }
+		    return a;
+		}
+	}
 	export class WailsBills {
 	    data: Bill[];
 	    success: boolean;
@@ -152,6 +186,20 @@ export namespace main {
 		    return a;
 		}
 	}
+	export class WailsVoid {
+	    success: boolean;
+	    error: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new WailsVoid(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.success = source["success"];
+	        this.error = source["error"];
+	    }
+	}

 }

--- a/frontend/wailsjs/runtime/runtime.d.ts
+++ b/frontend/wailsjs/runtime/runtime.d.ts
@@ -134,7 +134,7 @@ export function WindowIsFullscreen(): Promise<boolean>;

 // [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
 // Sets the width and height of the window.
-export function WindowSetSize(width: number, height: number): Promise<Size>;
+export function WindowSetSize(width: number, height: number): void;

 // [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
 // Gets the width and height of the window.
--- a/go.mod
+++ b/go.mod
@@ -1,42 +1,42 @@
 module bill-manager

-go 1.21
+go 1.22.0

-toolchain go1.23.0
+toolchain go1.23.6

 require (
 	github.com/mattn/go-sqlite3 v1.14.22
-	github.com/wailsapp/wails/v2 v2.9.1
+	github.com/wailsapp/wails/v2 v2.10.2
 )

 require (
 	github.com/bep/debounce v1.2.1 // indirect
-	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/godbus/dbus/v5 v5.1.0 // indirect
-	github.com/google/uuid v1.3.0 // indirect
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
-	github.com/labstack/echo/v4 v4.10.2 // indirect
-	github.com/labstack/gommon v0.4.0 // indirect
-	github.com/leaanthony/go-ansi-parser v1.6.0 // indirect
-	github.com/leaanthony/gosod v1.0.3 // indirect
+	github.com/labstack/echo/v4 v4.13.3 // indirect
+	github.com/labstack/gommon v0.4.2 // indirect
+	github.com/leaanthony/go-ansi-parser v1.6.1 // indirect
+	github.com/leaanthony/gosod v1.0.4 // indirect
 	github.com/leaanthony/slicer v1.6.0 // indirect
-	github.com/leaanthony/u v1.1.0 // indirect
+	github.com/leaanthony/u v1.1.1 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.19 // indirect
-	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c // indirect
 	github.com/pkg/errors v0.9.1 // indirect
-	github.com/rivo/uniseg v0.4.4 // indirect
-	github.com/samber/lo v1.38.1 // indirect
-	github.com/tkrajina/go-reflector v0.5.6 // indirect
+	github.com/rivo/uniseg v0.4.7 // indirect
+	github.com/samber/lo v1.49.1 // indirect
+	github.com/tkrajina/go-reflector v0.5.8 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	github.com/wailsapp/go-webview2 v1.0.10 // indirect
+	github.com/wailsapp/go-webview2 v1.0.19 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
-	golang.org/x/crypto v0.23.0 // indirect
-	golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 // indirect
-	golang.org/x/net v0.25.0 // indirect
-	golang.org/x/sys v0.20.0 // indirect
-	golang.org/x/text v0.15.0 // indirect
+	golang.org/x/crypto v0.33.0 // indirect
+	golang.org/x/net v0.35.0 // indirect
+	golang.org/x/sys v0.30.0 // indirect
+	golang.org/x/text v0.22.0 // indirect
 )

 // replace github.com/wailsapp/wails/v2 v2.9.1 => C:\Users\Administrator\go\pkg\mod
--- a/go.sum
+++ b/go.sum
@@ -1,96 +1,83 @@
 github.com/bep/debounce v1.2.1 h1:v67fRdBA9UQu2NhLFXrSg0Brw7CexQekrBwDMM8bzeY=
 github.com/bep/debounce v1.2.1/go.mod h1:H8yggRPQKLUhUoqrJC1bO2xNya7vanpDl7xR3ISbCJ0=
-github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
-github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
+github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
+github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
 github.com/godbus/dbus/v5 v5.1.0 h1:4KLkAxT3aOY8Li4FRJe/KvhoNFFxo0m6fNuFUO8QJUk=
 github.com/godbus/dbus/v5 v5.1.0/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
-github.com/labstack/echo/v4 v4.10.2 h1:n1jAhnq/elIFTHr1EYpiYtyKgx4RW9ccVgkqByZaN2M=
-github.com/labstack/echo/v4 v4.10.2/go.mod h1:OEyqf2//K1DFdE57vw2DRgWY0M7s65IVQO2FzvI4J5k=
-github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
-github.com/labstack/gommon v0.4.0/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
+github.com/labstack/echo/v4 v4.13.3 h1:pwhpCPrTl5qry5HRdM5FwdXnhXSLSY+WE+YQSeCaafY=
+github.com/labstack/echo/v4 v4.13.3/go.mod h1:o90YNEeQWjDozo584l7AwhJMHN0bOC4tAfg+Xox9q5g=
+github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
+github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
 github.com/leaanthony/debme v1.2.1 h1:9Tgwf+kjcrbMQ4WnPcEIUcQuIZYqdWftzZkBr+i/oOc=
 github.com/leaanthony/debme v1.2.1/go.mod h1:3V+sCm5tYAgQymvSOfYQ5Xx2JCr+OXiD9Jkw3otUjiA=
-github.com/leaanthony/go-ansi-parser v1.6.0 h1:T8TuMhFB6TUMIUm0oRrSbgJudTFw9csT3ZK09w0t4Pg=
-github.com/leaanthony/go-ansi-parser v1.6.0/go.mod h1:+vva/2y4alzVmmIEpk9QDhA7vLC5zKDTRwfZGOp3IWU=
-github.com/leaanthony/gosod v1.0.3 h1:Fnt+/B6NjQOVuCWOKYRREZnjGyvg+mEhd1nkkA04aTQ=
-github.com/leaanthony/gosod v1.0.3/go.mod h1:BJ2J+oHsQIyIQpnLPjnqFGTMnOZXDbvWtRCSG7jGxs4=
-github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/leaanthony/go-ansi-parser v1.6.1 h1:xd8bzARK3dErqkPFtoF9F3/HgN8UQk0ed1YDKpEz01A=
+github.com/leaanthony/go-ansi-parser v1.6.1/go.mod h1:+vva/2y4alzVmmIEpk9QDhA7vLC5zKDTRwfZGOp3IWU=
+github.com/leaanthony/gosod v1.0.4 h1:YLAbVyd591MRffDgxUOU1NwLhT9T1/YiwjKZpkNFeaI=
+github.com/leaanthony/gosod v1.0.4/go.mod h1:GKuIL0zzPj3O1SdWQOdgURSuhkF+Urizzxh26t9f1cw=
 github.com/leaanthony/slicer v1.6.0 h1:1RFP5uiPJvT93TAHi+ipd3NACobkW53yUiBqZheE/Js=
 github.com/leaanthony/slicer v1.6.0/go.mod h1:o/Iz29g7LN0GqH3aMjWAe90381nyZlDNquK+mtH2Fj8=
-github.com/leaanthony/u v1.1.0 h1:2n0d2BwPVXSUq5yhe8lJPHdxevE2qK5G99PMStMZMaI=
-github.com/leaanthony/u v1.1.0/go.mod h1:9+o6hejoRljvZ3BzdYlVL0JYCwtnAsVuN9pVTQcaRfI=
-github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/leaanthony/u v1.1.1 h1:TUFjwDGlNX+WuwVEzDqQwC2lOv0P4uhTQw7CMFdiK7M=
+github.com/leaanthony/u v1.1.1/go.mod h1:9+o6hejoRljvZ3BzdYlVL0JYCwtnAsVuN9pVTQcaRfI=
 github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
-github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+github.com/matryer/is v1.4.1 h1:55ehd8zaGABKLXQUe2awZ99BD/PTc2ls+KV/dXphgEQ=
+github.com/matryer/is v1.4.1/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
-github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
-github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 h1:KoWmjvw+nsYOo29YJK9vDA65RGE3NrOnUtO7a+RF9HU=
-github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
+github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c h1:+mdjkGKdHQG3305AYmdv1U2eRNDiU2ErMBj1gwrq8eQ=
+github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c/go.mod h1:7rwL4CYBLnjLxUqIJNnCWiEdr3bn6IUYi15bNlnbCCU=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
-github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
-github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/samber/lo v1.38.1 h1:j2XEAqXKb09Am4ebOg31SpvzUTTs6EN3VfgeLUhPdXM=
-github.com/samber/lo v1.38.1/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA=
-github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
-github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
-github.com/tkrajina/go-reflector v0.5.6 h1:hKQ0gyocG7vgMD2M3dRlYN6WBBOmdoOzJ6njQSepKdE=
-github.com/tkrajina/go-reflector v0.5.6/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
+github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
+github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/samber/lo v1.49.1 h1:4BIFyVfuQSEpluc7Fua+j1NolZHiEHEpaSEKdsH0tew=
+github.com/samber/lo v1.49.1/go.mod h1:dO6KHFzUKXgP8LDhU0oI8d2hekjXnGOu0DB8Jecxd6o=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tkrajina/go-reflector v0.5.8 h1:yPADHrwmUbMq4RGEyaOUpz2H90sRsETNVpjzo3DLVQQ=
+github.com/tkrajina/go-reflector v0.5.8/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-github.com/wailsapp/go-webview2 v1.0.10 h1:PP5Hug6pnQEAhfRzLCoOh2jJaPdrqeRgJKZhyYyDV/w=
-github.com/wailsapp/go-webview2 v1.0.10/go.mod h1:Uk2BePfCRzttBBjFrBmqKGJd41P6QIHeV9kTgIeOZNo=
+github.com/wailsapp/go-webview2 v1.0.19 h1:7U3QcDj1PrBPaxJNCui2k1SkWml+Q5kvFUFyTImA6NU=
+github.com/wailsapp/go-webview2 v1.0.19/go.mod h1:qJmWAmAmaniuKGZPWwne+uor3AHMB5PFhqiK0Bbj8kc=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/wails/v2 v2.9.1 h1:irsXnoQrCpeKzKTYZ2SUVlRRyeMR6I0vCO9Q1cvlEdc=
-github.com/wailsapp/wails/v2 v2.9.1/go.mod h1:7maJV2h+Egl11Ak8QZN/jlGLj2wg05bsQS+ywJPT0gI=
-golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
-golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
-golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 h1:k/i9J1pBpvlfR+9QsetwPyERsqu1GIbi967PQMq3Ivc=
-golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
+github.com/wailsapp/wails/v2 v2.10.2 h1:29U+c5PI4K4hbx8yFbFvwpCuvqK9VgNv8WGobIlKlXk=
+github.com/wailsapp/wails/v2 v2.10.2/go.mod h1:XuN4IUOPpzBrHUkEd7sCU5ln4T/p1wQedfxP7fKik+4=
+golang.org/x/crypto v0.33.0 h1:IOBPskki6Lysi0lo9qQvbxiQ+FvsCC/YWOecCHAixus=
+golang.org/x/crypto v0.33.0/go.mod h1:bVdXmD7IV/4GdElGPozy6U7lWdRXA4qyRVGJV57uQ5M=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
-golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
-golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/net v0.35.0 h1:T5GQRQb2y08kTAByq9L4/bz8cipCdA8FbRTXewonqY8=
+golang.org/x/net v0.35.0/go.mod h1:EglIi67kWsHKlRzzVMUD93VMSWGFOMSZgxFjparz1Qk=
 golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210616045830-e2b7044e8c71/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
-golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc=
+golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.15.0 h1:h1V/4gjBv8v9cjcR6+AR5+/cIYK5N/WAgiv4xlsEtAk=
-golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM=
+golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
--- a/service.go
+++ b/service.go
@@ -134,3 +134,117 @@ WHERE Payment.paymentDate IS NULL

 	return s.GetPaymentForBillAndDate(billid, monthFor)
 }
+
+func (s *BillService) MovePayment(billid int64, fromMonth time.Time, toMonth time.Time) (Payment, error) {
+	log.Printf("MovePayment for %d from %v to %v", billid, fromMonth, toMonth)
+	res := Payment{}
+	if s == nil {
+		return res, fmt.Errorf("calling MovePayment on nil BillService")
+	}
+	if s.db == nil || !s.db.Ready {
+		return res, fmt.Errorf("cannot move payment, db is nil or not ready - %v", s.db)
+	}
+
+	// First get the existing payment
+	existingPayment, err := s.GetPaymentForBillAndDate(billid, fromMonth)
+	if err != nil {
+		return res, fmt.Errorf("failed to get existing payment: %w", err)
+	}
+
+	// Delete the old payment
+	_, err = s.db.writeConn.Exec(`
+		DELETE FROM Payment WHERE billid = ? AND monthFor = date(strftime('%Y-%m-01', ?))
+	`, billid, fromMonth)
+	if err != nil {
+		return res, fmt.Errorf("failed to delete old payment: %w", err)
+	}
+
+	// Create new payment in the target month
+	payment, err := s.MarkPaid(billid, toMonth, existingPayment.PaymentDate)
+	if err != nil {
+		return res, fmt.Errorf("failed to create new payment: %w", err)
+	}
+
+	return payment, nil
+}
+
+func (s *BillService) AddBill(name string) (Bill, error) {
+	log.Printf("AddBill with name %s", name)
+	res := Bill{}
+	if s == nil {
+		return res, fmt.Errorf("calling AddBill on nil BillService")
+	}
+	if s.db == nil || !s.db.Ready {
+		return res, fmt.Errorf("cannot add bill, db is nil or not ready - %v", s.db)
+	}
+
+	qres, err := s.db.writeConn.Exec(`
+		INSERT INTO Bill (name) VALUES (?)
+	`, name)
+	if err != nil {
+		return res, fmt.Errorf("failed to insert bill: %w", err)
+	}
+
+	id, err := qres.LastInsertId()
+	if err != nil {
+		return res, fmt.Errorf("failed to get last insert id: %w", err)
+	}
+
+	res.Id = id
+	res.Name = name
+
+	// Refresh the bills cache
+	_, _ = s.GetAllBills()
+
+	return res, nil
+}
+
+func (s *BillService) RemoveBill(billid int64) error {
+	log.Printf("RemoveBill with id %d", billid)
+	if s == nil {
+		return fmt.Errorf("calling RemoveBill on nil BillService")
+	}
+	if s.db == nil || !s.db.Ready {
+		return fmt.Errorf("cannot remove bill, db is nil or not ready - %v", s.db)
+	}
+
+	// Delete all payments for this bill first
+	_, err := s.db.writeConn.Exec(`
+		DELETE FROM Payment WHERE billid = ?
+	`, billid)
+	if err != nil {
+		return fmt.Errorf("failed to delete payments for bill: %w", err)
+	}
+
+	// Delete the bill
+	_, err = s.db.writeConn.Exec(`
+		DELETE FROM Bill WHERE id = ?
+	`, billid)
+	if err != nil {
+		return fmt.Errorf("failed to delete bill: %w", err)
+	}
+
+	// Refresh the bills cache
+	_, _ = s.GetAllBills()
+
+	return nil
+}
+
+func (s *BillService) UnmarkPaid(billid int64, month time.Time) error {
+	log.Printf("UnmarkPaid for %d and %v", billid, month)
+	if s == nil {
+		return fmt.Errorf("calling UnmarkPaid on nil BillService")
+	}
+	if s.db == nil || !s.db.Ready {
+		return fmt.Errorf("cannot unmark paid, db is nil or not ready - %v", s.db)
+	}
+
+	_, err := s.db.writeConn.Exec(`
+		DELETE FROM Payment WHERE billid = ? AND monthFor = date(strftime('%Y-%m-01', ?))
+	`, billid, month)
+	if err != nil {
+		return fmt.Errorf("failed to delete payment: %w", err)
+	}
+
+	return nil
+}
--- a/types.go
+++ b/types.go
@@ -29,4 +29,13 @@ type (
 		Success bool    `json:"success"`
 		Error   string  `json:"error"`
 	}
+	WailsBill struct {
+		Data    Bill `json:"data"`
+		Success bool `json:"success"`
+		Error   string `json:"error"`
+	}
+	WailsVoid struct {
+		Success bool   `json:"success"`
+		Error   string `json:"error"`
+	}
 )