feat: pay bills

2026-04-22 15:49:00 +00:00 · 2026-04-22 15:49:00 +00:00 · 8c681282ef
commit 8c681282ef
parent d747454f4a
15 changed files with 607 additions and 65 deletions
--- a/internal/ui/forms/create_bill.templ
+++ b/internal/ui/forms/create_bill.templ
@ -0,0 +1,155 @@
+package forms
+
+import "git.juancwu.dev/juancwu/budgit/internal/model"
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/textarea"
+
+type CreateBillProps struct {
+	SpaceID    string
+	AccountID  string
+	Categories []*model.Category
+
+	Title       string
+	Amount      string
+	Date        string
+	Description string
+	CategoryID  string
+
+	TitleErr   string
+	AmountErr  string
+	DateErr    string
+	GeneralErr string
+}
+
+templ CreateBill(props CreateBillProps) {
+	<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.bills.create", "spaceID", props.SpaceID, "accountID", props.AccountID) }>
+		@card.Card(card.Props{Class: "rounded-sm"}) {
+			@card.Content(card.ContentProps{Class: "p-4 space-y-4"}) {
+				if props.GeneralErr != "" {
+					@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+						{ props.GeneralErr }
+					}
+				}
+				@form.Item() {
+					@form.Label(form.LabelProps{For: "title"}) {
+						Title
+					}
+					@input.Input(input.Props{
+						ID:          "title",
+						Name:        "title",
+						Type:        input.TypeText,
+						Placeholder: "e.g. Hydro bill",
+						Class:       "rounded-sm",
+						Value:       props.Title,
+						HasError:    props.TitleErr != "",
+						Required:    true,
+						Attributes: templ.Attributes{
+							"autocomplete": "off",
+							"autofocus":    "",
+						},
+					})
+					if props.TitleErr != "" {
+						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+							{ props.TitleErr }
+						}
+					}
+				}
+				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+					@form.Item() {
+						@form.Label(form.LabelProps{For: "amount"}) {
+							Amount
+						}
+						@input.Input(input.Props{
+							ID:          "amount",
+							Name:        "amount",
+							Type:        input.TypeNumber,
+							Placeholder: "0.00",
+							Class:       "rounded-sm",
+							Value:       props.Amount,
+							HasError:    props.AmountErr != "",
+							Required:    true,
+							Attributes: templ.Attributes{
+								"step":         "0.01",
+								"min":          "0",
+								"inputmode":    "decimal",
+								"autocomplete": "off",
+							},
+						})
+						if props.AmountErr != "" {
+							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+								{ props.AmountErr }
+							}
+						}
+					}
+					@form.Item() {
+						@form.Label(form.LabelProps{For: "date"}) {
+							Date
+						}
+						@input.Input(input.Props{
+							ID:       "date",
+							Name:     "date",
+							Type:     input.TypeDate,
+							Class:    "rounded-sm",
+							Value:    props.Date,
+							HasError: props.DateErr != "",
+							Required: true,
+						})
+						if props.DateErr != "" {
+							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+								{ props.DateErr }
+							}
+						}
+					}
+				</div>
+				@form.Item() {
+					@form.Label(form.LabelProps{For: "category"}) {
+						Category
+					}
+					<select
+						id="category"
+						name="category"
+						class="flex h-9 w-full items-center rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					>
+						<option value="" selected?={ props.CategoryID == "" }>Uncategorized</option>
+						for _, c := range props.Categories {
+							<option value={ c.ID } selected?={ props.CategoryID == c.ID }>{ c.Name }</option>
+						}
+					</select>
+					@form.Description() {
+						Optional. Helps with budget reporting.
+					}
+				}
+				@form.Item() {
+					@form.Label(form.LabelProps{For: "description"}) {
+						Description
+					}
+					@textarea.Textarea(textarea.Props{
+						ID:          "description",
+						Name:        "description",
+						Placeholder: "Anything extra worth remembering",
+						Rows:        3,
+						Value:       props.Description,
+					})
+					@form.Description() {
+						Optional.
+					}
+				}
+			}
+			@card.Footer(card.FooterProps{Class: "flex justify-end gap-2"}) {
+				@button.Button(button.Props{
+					Variant: button.VariantGhost,
+					Href:    routeurl.URL("page.app.spaces.space.accounts.account.overview", "spaceID", props.SpaceID, "accountID", props.AccountID),
+				}) {
+					Cancel
+				}
+				@button.Button(button.Props{Type: button.TypeSubmit}) {
+					Pay Bill
+				}
+			}
+		}
+	</form>
+}