feat: payment methods

internal/ui/components/expense/expense.templ

@@ -11,6 +11,7 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/paymentmethod"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/radio"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/tagsinput"
 )
@@ -19,6 +20,7 @@ type AddExpenseFormProps struct {
 	Space          *model.Space
 	Tags           []*model.Tag
 	ListsWithItems []model.ListWithUncheckedItems
+	PaymentMethods []*model.PaymentMethod
 	DialogID       string // which dialog to close on success
 	FromOverview   bool   // if true, POSTs with ?from=overview; server redirects to expenses page
 }
@@ -158,6 +160,8 @@ templ AddExpenseForm(props AddExpenseFormProps) {
 				Attributes:  templ.Attributes{"list": "available-tags"},
 			})
 		</div>
+		// Payment Method
+		@paymentmethod.MethodSelector(props.PaymentMethods, nil)
 		// Shopping list items selector
 		@ItemSelectorSection(props.ListsWithItems, false)
 		<div class="flex justify-end">
@@ -168,7 +172,7 @@ templ AddExpenseForm(props AddExpenseFormProps) {
 	</form>
 }
 
-templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTags) {
+templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTagsAndMethod, methods []*model.PaymentMethod) {
 	{{ editDialogID := "edit-expense-" + exp.ID }}
 	{{ tagValues := make([]string, len(exp.Tags)) }}
 	for i, t := range exp.Tags {
@@ -260,6 +264,8 @@ templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTags) {
 				Placeholder: "Add tags (press enter)",
 			})
 		</div>
+		// Payment Method
+		@paymentmethod.MethodSelector(methods, exp.PaymentMethodID)
 		<div class="flex justify-end">
 			@button.Button(button.Props{Type: button.TypeSubmit}) {
 				Save

internal/ui/components/paymentmethod/paymentmethod.templ

@@ -0,0 +1,268 @@
+package paymentmethod
+
+import (
+	"fmt"
+	"strings"
+	"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/dialog"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/radio"
+)
+
+func methodDisplay(m *model.PaymentMethod) string {
+	upper := strings.ToUpper(string(m.Type))
+	if m.LastFour != nil {
+		return upper + " **** " + *m.LastFour
+	}
+	return upper
+}
+
+templ MethodItem(spaceID string, method *model.PaymentMethod) {
+	{{ editDialogID := "edit-method-" + method.ID }}
+	{{ delDialogID := "del-method-" + method.ID }}
+	<div id={ "method-item-" + method.ID } class="border rounded-lg p-4 bg-card text-card-foreground">
+		<div class="flex justify-between items-start">
+			<div>
+				<h3 class="font-semibold text-lg">{ method.Name }</h3>
+				<p class="text-sm text-muted-foreground">
+					{ methodDisplay(method) }
+				</p>
+			</div>
+			<div class="flex gap-1">
+				@dialog.Dialog(dialog.Props{ID: editDialogID}) {
+					@dialog.Trigger() {
+						@button.Button(button.Props{Variant: button.VariantGhost, Size: button.SizeIcon, Class: "size-7"}) {
+							@icon.Pencil(icon.Props{Size: 14})
+						}
+					}
+					@dialog.Content() {
+						@dialog.Header() {
+							@dialog.Title() {
+								Edit Payment Method
+							}
+							@dialog.Description() {
+								Update the payment method details.
+							}
+						}
+						@EditMethodForm(spaceID, method, editDialogID)
+					}
+				}
+				@dialog.Dialog(dialog.Props{ID: delDialogID}) {
+					@dialog.Trigger() {
+						@button.Button(button.Props{Variant: button.VariantGhost, Size: button.SizeIcon, Class: "size-7"}) {
+							@icon.Trash2(icon.Props{Size: 14})
+						}
+					}
+					@dialog.Content() {
+						@dialog.Header() {
+							@dialog.Title() {
+								Delete Payment Method
+							}
+							@dialog.Description() {
+								Are you sure you want to delete "{ method.Name }"? Existing expenses will keep their data but will no longer show a payment method.
+							}
+						}
+						@dialog.Footer() {
+							@dialog.Close() {
+								@button.Button(button.Props{Variant: button.VariantOutline}) {
+									Cancel
+								}
+							}
+							@button.Button(button.Props{
+								Variant: button.VariantDestructive,
+								Attributes: templ.Attributes{
+									"hx-delete": fmt.Sprintf("/app/spaces/%s/payment-methods/%s", spaceID, method.ID),
+									"hx-target": "#method-item-" + method.ID,
+									"hx-swap":   "delete",
+								},
+							}) {
+								Delete
+							}
+						}
+					}
+				}
+			</div>
+		</div>
+	</div>
+}
+
+templ CreateMethodForm(spaceID string, dialogID string) {
+	<form
+		hx-post={ "/app/spaces/" + spaceID + "/payment-methods" }
+		hx-target="#methods-list"
+		hx-swap="beforeend"
+		_={ "on htmx:afterOnLoad if event.detail.xhr.status == 200 then call window.tui.dialog.close('" + dialogID + "') then reset() me end" }
+		class="space-y-4"
+	>
+		@csrf.Token()
+		<div>
+			@label.Label(label.Props{For: "method-name"}) {
+				Name
+			}
+			@input.Input(input.Props{
+				Name:       "name",
+				ID:         "method-name",
+				Attributes: templ.Attributes{"required": "true", "placeholder": "e.g. Chase Sapphire"},
+			})
+		</div>
+		<div>
+			@label.Label(label.Props{}) {
+				Type
+			}
+			<div class="flex gap-4 mt-1">
+				<div class="flex items-center gap-2">
+					@radio.Radio(radio.Props{
+						ID:      "method-type-credit",
+						Name:    "type",
+						Value:   "credit",
+						Checked: true,
+					})
+					@label.Label(label.Props{For: "method-type-credit"}) {
+						Credit
+					}
+				</div>
+				<div class="flex items-center gap-2">
+					@radio.Radio(radio.Props{
+						ID:    "method-type-debit",
+						Name:  "type",
+						Value: "debit",
+					})
+					@label.Label(label.Props{For: "method-type-debit"}) {
+						Debit
+					}
+				</div>
+			</div>
+		</div>
+		<div id="last-four-group">
+			@label.Label(label.Props{For: "method-last-four"}) {
+				Last 4 Digits
+			}
+			@input.Input(input.Props{
+				Name: "last_four",
+				ID:   "method-last-four",
+				Attributes: templ.Attributes{
+					"required":    "true",
+					"maxlength":   "4",
+					"minlength":   "4",
+					"pattern":     "[0-9]{4}",
+					"placeholder": "1234",
+				},
+			})
+		</div>
+		<div class="flex justify-end">
+			@button.Button(button.Props{Type: button.TypeSubmit}) {
+				Create
+			}
+		</div>
+	</form>
+}
+
+templ EditMethodForm(spaceID string, method *model.PaymentMethod, dialogID string) {
+	{{ lastFourVal := "" }}
+	if method.LastFour != nil {
+		{{ lastFourVal = *method.LastFour }}
+	}
+	<form
+		hx-patch={ fmt.Sprintf("/app/spaces/%s/payment-methods/%s", spaceID, method.ID) }
+		hx-target={ "#method-item-" + method.ID }
+		hx-swap="outerHTML"
+		_={ "on htmx:afterOnLoad if event.detail.xhr.status == 200 then call window.tui.dialog.close('" + dialogID + "') end" }
+		class="space-y-4"
+	>
+		@csrf.Token()
+		<div>
+			@label.Label(label.Props{For: "edit-method-name-" + method.ID}) {
+				Name
+			}
+			@input.Input(input.Props{
+				Name:       "name",
+				ID:         "edit-method-name-" + method.ID,
+				Value:      method.Name,
+				Attributes: templ.Attributes{"required": "true"},
+			})
+		</div>
+		<div>
+			@label.Label(label.Props{}) {
+				Type
+			}
+			<div class="flex gap-4 mt-1">
+				<div class="flex items-center gap-2">
+					@radio.Radio(radio.Props{
+						ID:      "edit-method-type-credit-" + method.ID,
+						Name:    "type",
+						Value:   "credit",
+						Checked: method.Type == model.PaymentMethodTypeCredit,
+					})
+					@label.Label(label.Props{For: "edit-method-type-credit-" + method.ID}) {
+						Credit
+					}
+				</div>
+				<div class="flex items-center gap-2">
+					@radio.Radio(radio.Props{
+						ID:      "edit-method-type-debit-" + method.ID,
+						Name:    "type",
+						Value:   "debit",
+						Checked: method.Type == model.PaymentMethodTypeDebit,
+					})
+					@label.Label(label.Props{For: "edit-method-type-debit-" + method.ID}) {
+						Debit
+					}
+				</div>
+			</div>
+		</div>
+		<div id={ "edit-last-four-group-" + method.ID }>
+			@label.Label(label.Props{For: "edit-method-last-four-" + method.ID}) {
+				Last 4 Digits
+			}
+			@input.Input(input.Props{
+				Name:  "last_four",
+				ID:    "edit-method-last-four-" + method.ID,
+				Value: lastFourVal,
+				Attributes: templ.Attributes{
+					"required":  "true",
+					"maxlength": "4",
+					"minlength": "4",
+					"pattern":   "[0-9]{4}",
+				},
+			})
+		</div>
+		<div class="flex justify-end">
+			@button.Button(button.Props{Type: button.TypeSubmit}) {
+				Save
+			}
+		</div>
+	</form>
+}
+
+templ MethodSelector(methods []*model.PaymentMethod, selectedMethodID *string) {
+	<div>
+		@label.Label(label.Props{For: "method-select"}) {
+			Payment Method
+		}
+		<select
+			name="payment_method_id"
+			id="method-select"
+			class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+		>
+			<option value="">Cash</option>
+			for _, m := range methods {
+				<option
+					value={ m.ID }
+					if selectedMethodID != nil && *selectedMethodID == m.ID {
+						selected
+					}
+				>
+					if m.LastFour != nil {
+						{ m.Name } (*{ *m.LastFour })
+					} else {
+						{ m.Name }
+					}
+				</option>
+			}
+		</select>
+	</div>
+}

internal/ui/layouts/space.templ

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

internal/ui/pages/app_space_expenses.templ

@@ -13,7 +13,7 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
 )
 
-templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTags, balance int, allocated int, tags []*model.Tag, listsWithItems []model.ListWithUncheckedItems, currentPage, totalPages int) {
+templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTagsAndMethod, balance int, allocated int, tags []*model.Tag, listsWithItems []model.ListWithUncheckedItems, methods []*model.PaymentMethod, currentPage, totalPages int) {
 	@layouts.Space("Expenses", space) {
 		<div class="space-y-4">
 			<div class="flex justify-between items-center">
@@ -37,6 +37,7 @@ templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTags, b
 							Space:          space,
 							Tags:           tags,
 							ListsWithItems: listsWithItems,
+							PaymentMethods: methods,
 							DialogID:       "add-expense-dialog",
 						})
 					}
@@ -47,21 +48,21 @@ templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTags, b
 			// List of expenses
 			<div class="border rounded-lg">
 				<div id="expenses-list-wrapper">
-					@ExpensesListContent(space.ID, expenses, currentPage, totalPages)
+					@ExpensesListContent(space.ID, expenses, methods, currentPage, totalPages)
 				</div>
 			</div>
 		</div>
 	}
 }
 
-templ ExpensesListContent(spaceID string, expenses []*model.ExpenseWithTags, currentPage, totalPages int) {
+templ ExpensesListContent(spaceID string, expenses []*model.ExpenseWithTagsAndMethod, methods []*model.PaymentMethod, currentPage, totalPages int) {
 	<h2 class="text-lg font-semibold p-4">History</h2>
 	<div id="expenses-list" class="divide-y">
 		if len(expenses) == 0 {
 			<p class="p-4 text-sm text-muted-foreground">No expenses recorded yet.</p>
 		}
 		for _, exp := range expenses {
-			@ExpenseListItem(spaceID, exp)
+			@ExpenseListItem(spaceID, exp, methods)
 		}
 	</div>
 	if totalPages > 1 {
@@ -108,11 +109,22 @@ templ ExpensesListContent(spaceID string, expenses []*model.ExpenseWithTags, cur
 	}
 }
 
-templ ExpenseListItem(spaceID string, exp *model.ExpenseWithTags) {
+templ ExpenseListItem(spaceID string, exp *model.ExpenseWithTagsAndMethod, methods []*model.PaymentMethod) {
 	<div id={ "expense-" + exp.ID } class="p-4 flex justify-between items-start gap-2">
 		<div class="min-w-0 flex-1">
 			<p class="font-medium">{ exp.Description }</p>
-			<p class="text-sm text-muted-foreground">{ exp.Date.Format("Jan 02, 2006") }</p>
+			<p class="text-sm text-muted-foreground">
+				{ exp.Date.Format("Jan 02, 2006") }
+				if exp.PaymentMethod != nil {
+					if exp.PaymentMethod.LastFour != nil {
+						<span> &middot; { exp.PaymentMethod.Name } (*{ *exp.PaymentMethod.LastFour })</span>
+					} else {
+						<span> &middot; { exp.PaymentMethod.Name }</span>
+					}
+				} else {
+					<span> &middot; Cash</span>
+				}
+			</p>
 			if len(exp.Tags) > 0 {
 				<div class="flex flex-wrap gap-1 mt-1">
 					for _, t := range exp.Tags {
@@ -149,7 +161,7 @@ templ ExpenseListItem(spaceID string, exp *model.ExpenseWithTags) {
 							Update the details of this transaction.
 						}
 					}
-					@expense.EditExpenseForm(spaceID, exp)
+					@expense.EditExpenseForm(spaceID, exp, methods)
 				}
 			}
 			// Delete button
@@ -191,12 +203,12 @@ templ ExpenseListItem(spaceID string, exp *model.ExpenseWithTags) {
 	</div>
 }
 
-templ ExpenseCreatedResponse(spaceID string, expenses []*model.ExpenseWithTags, balance int, allocated int, currentPage, totalPages int) {
-	@ExpensesListContent(spaceID, expenses, currentPage, totalPages)
+templ ExpenseCreatedResponse(spaceID string, expenses []*model.ExpenseWithTagsAndMethod, balance int, allocated int, currentPage, totalPages int) {
+	@ExpensesListContent(spaceID, expenses, nil, currentPage, totalPages)
 	@expense.BalanceCard(spaceID, balance, allocated, true)
 }
 
-templ ExpenseUpdatedResponse(spaceID string, exp *model.ExpenseWithTags, balance int, allocated int) {
-	@ExpenseListItem(spaceID, exp)
+templ ExpenseUpdatedResponse(spaceID string, exp *model.ExpenseWithTagsAndMethod, balance int, allocated int, methods []*model.PaymentMethod) {
+	@ExpenseListItem(spaceID, exp, methods)
 	@expense.BalanceCard(exp.SpaceID, balance, allocated, true)
 }

internal/ui/pages/app_space_payment_methods.templ

@@ -0,0 +1,45 @@
+package pages
+
+import (
+	"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/paymentmethod"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+)
+
+templ SpacePaymentMethodsPage(space *model.Space, methods []*model.PaymentMethod) {
+	@layouts.Space("Payment Methods", space) {
+		<div class="space-y-4">
+			<div class="flex justify-between items-center">
+				<h1 class="text-2xl font-bold">Payment Methods</h1>
+				@dialog.Dialog(dialog.Props{ID: "add-method-dialog"}) {
+					@dialog.Trigger() {
+						@button.Button() {
+							Add Method
+						}
+					}
+					@dialog.Content() {
+						@dialog.Header() {
+							@dialog.Title() {
+								Add Payment Method
+							}
+							@dialog.Description() {
+								Add a credit or debit card to track how you pay for expenses.
+							}
+						}
+						@paymentmethod.CreateMethodForm(space.ID, "add-method-dialog")
+					}
+				}
+			</div>
+			<div id="methods-list" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+				if len(methods) == 0 {
+					<p class="text-sm text-muted-foreground col-span-full">No payment methods yet. Add one to start tracking how you pay for expenses.</p>
+				}
+				for _, method := range methods {
+					@paymentmethod.MethodItem(space.ID, method)
+				}
+			</div>
+		</div>
+	}
+}