generated from dave/wails-template
Rework the fuck of everything
This commit is contained in:
@@ -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}
|
||||
|
||||
108
frontend/src/lib/components/BillManager.svelte
Normal file
108
frontend/src/lib/components/BillManager.svelte
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
@@ -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 };
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
10
frontend/wailsjs/go/main/App.d.ts
vendored
10
frontend/wailsjs/go/main/App.d.ts
vendored
@@ -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>;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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"];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
2
frontend/wailsjs/runtime/runtime.d.ts
vendored
2
frontend/wailsjs/runtime/runtime.d.ts
vendored
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user