add expenses management

internal/ui/components/expense/expense.templ

@@ -0,0 +1,94 @@
+package expense
+
+import (
+	"fmt"
+	"git.juancwu.dev/juancwu/budgit/internal/model"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/csrf"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+	"time"
+)
+
+templ AddExpenseForm(space *model.Space, tags []*model.Tag, lists []*model.ShoppingList) {
+	<form
+		hx-post={ "/app/spaces/" + space.ID + "/expenses" }
+		hx-target="#expenses-list"
+		hx-swap="afterbegin"
+		class="space-y-4"
+	>
+		@csrf.Token()
+		// Type
+		<div class="flex gap-4">
+			<label>
+				<input type="radio" name="type" value="expense" checked class="radio"/>
+				<span class="label-text ml-2">Expense</span>
+			</label>
+			<label>
+				<input type="radio" name="type" value="topup" class="radio"/>
+				<span class="label-text ml-2">Top-up</span>
+			</label>
+		</div>
+
+		// Description
+		<div>
+			<label for="description" class="label">Description</label>
+			@input.Input(input.Props{
+				Name: "description",
+				ID: "description",
+				Attributes: templ.Attributes{"required": "true"},
+			})
+		</div>
+
+		// Amount
+		<div>
+			<label for="amount" class="label">Amount</label>
+			@input.Input(input.Props{
+				Name: "amount",
+				ID: "amount",
+				Type: "number",
+				Attributes: templ.Attributes{"step": "0.01", "required": "true"},
+			})
+		</div>
+
+		// Date
+		<div>
+			<label for="date" class="label">Date</label>
+			@input.Input(input.Props{
+				Name: "date",
+				ID: "date",
+				Type: "date",
+				Value: time.Now().Format("2006-01-02"),
+				Attributes: templ.Attributes{"required": "true"},
+			})
+		</div>
+
+		// Tags
+		if len(tags) > 0 {
+			<div>
+				<label class="label">Tags</label>
+				<select name="tags" multiple class="select select-bordered w-full h-32">
+					for _, tag := range tags {
+						<option value={ tag.ID }>{ tag.Name }</option>
+					}
+				</select>
+			</div>
+		}
+
+		// TODO: Shopping list items selector
+
+		<div class="flex justify-end">
+			@button.Button(button.Props{ Type: button.TypeSubmit }) {
+				Save Transaction
+			}
+		</div>
+	</form>
+}
+
+templ BalanceCard(balance int, oob bool) {
+	<div id="balance-card" class="border rounded-lg p-4 bg-card text-card-foreground" hx-swap-oob?={ oob }>
+		<h2 class="text-lg font-semibold">Current Balance</h2>
+		<p class={ "text-3xl font-bold", templ.KV("text-destructive", balance < 0) }>
+			{ fmt.Sprintf("$%.2f", float64(balance)/100.0) }
+		</p>
+	</div>
+}

internal/ui/layouts/space.templ

@@ -70,6 +70,16 @@ templ Space(title string, space *model.Space) {
 									<span>Tags</span>
 								}
 							}
+							@sidebar.MenuItem() {
+								@sidebar.MenuButton(sidebar.MenuButtonProps{
+									Href:     "/app/spaces/" + space.ID + "/expenses",
+									IsActive: ctxkeys.URLPath(ctx) == "/app/spaces/"+space.ID+"/expenses",
+									Tooltip:  "Expenses",
+								}) {
+									@icon.Landmark(icon.Props{Class: "size-4"})
+									<span>Expenses</span>
+								}
+							}
 						}
 					}
 				}

internal/ui/pages/app_space_expenses.templ

@@ -0,0 +1,77 @@
+package pages
+
+import (
+	"fmt"
+	"git.juancwu.dev/juancwu/budgit/internal/model"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/expense"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+)
+
+templ SpaceExpensesPage(space *model.Space, expenses []*model.Expense, balance int, tags []*model.Tag, lists []*model.ShoppingList) {
+	@layouts.Space("Expenses", space) {
+		<div class="space-y-4">
+			<div class="flex justify-between items-center">
+				<h1 class="text-2xl font-bold">Expenses</h1>
+				@dialog.Dialog(dialog.Props{ ID: "add-expense-dialog" }) {
+					@dialog.Trigger() {
+						@button.Button() {
+							Add Expense
+						}
+					}
+					@dialog.Content() {
+						@dialog.Header() {
+							@dialog.Title() { Add Transaction }
+							@dialog.Description() {
+								Add a new expense or top-up to your space.
+							}
+						}
+						@expense.AddExpenseForm(space, tags, lists)
+					}
+				}
+			</div>
+
+			// Balance Card
+			@expense.BalanceCard(balance, false)
+
+			// List of expenses
+			<div id="expenses-list" class="border rounded-lg">
+				<h2 class="text-lg font-semibold p-4">History</h2>
+				<div class="divide-y">
+					if len(expenses) == 0 {
+						<p class="p-4 text-sm text-muted-foreground">No expenses recorded yet.</p>
+					}
+					for _, expense := range expenses {
+						@ExpenseListItem(expense)
+					}
+				</div>
+			</div>
+		</div>
+	}
+}
+
+templ ExpenseListItem(expense *model.Expense) {
+	<div class="p-4 flex justify-between items-center">
+		<div>
+			<p class="font-medium">{ expense.Description }</p>
+			<p class="text-sm text-muted-foreground">{ expense.Date.Format("Jan 02, 2006") }</p>
+		</div>
+		<div>
+			if expense.Type == model.ExpenseTypeExpense {
+				<p class="font-bold text-destructive">
+					- { fmt.Sprintf("$%.2f", float64(expense.AmountCents)/100.0) }
+				</p>
+			} else {
+				<p class="font-bold text-green-500">
+					+ { fmt.Sprintf("$%.2f", float64(expense.AmountCents)/100.0) }
+				</p>
+			}
+		</div>
+	</div>
+}
+
+templ ExpenseCreatedResponse(newExpense *model.Expense, balance int) {
+	@ExpenseListItem(newExpense)
+	@expense.BalanceCard(balance, true)
+}