juancwu/budgit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: pay bills

Browse source
This commit is contained in:
juancwu 2026-04-22 15:49:00 +00:00
commit 8c681282ef
15 changed files with 607 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

20
internal/ui/components/icon/icon_data.go
View file

@ -1415,9 +1415,9 @@ var internalSvgData = map[string]string{
<path d="M7 6v12" />`,
"chevron-last": `<path d="m7 18 6-6-6-6" />
<path d="M17 6v12" />`,
"chevron-left": `<path d="m15 18-6-6 6-6" />`,
"chevron-left": `<path d="m15 18-6-6 6-6" />`,
"chevron-right": `<path d="m9 18 6-6-6-6" />`,
"chevron-up": `<path d="m18 15-6-6-6 6" />`,
"chevron-up": `<path d="m18 15-6-6-6 6" />`,
"chevrons-down": `<path d="m7 6 5 5 5-5" />
<path d="m7 13 5 5 5-5" />`,
"chevrons-down-up": `<path d="m7 20 5-5 5 5" />
@ -2619,9 +2619,9 @@ var internalSvgData = map[string]string{
<path d="m2 2 20 20" />
<path d="M4 22V4" />
<path d="M7.656 2H8c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10.347" />`,
"flag-triangle-left": `<path d="M18 22V2.8a.8.8 0 0 0-1.17-.71L5.45 7.78a.8.8 0 0 0 0 1.44L18 15.5" />`,
"flag-triangle-left": `<path d="M18 22V2.8a.8.8 0 0 0-1.17-.71L5.45 7.78a.8.8 0 0 0 0 1.44L18 15.5" />`,
"flag-triangle-right": `<path d="M6 22V2.8a.8.8 0 0 1 1.17-.71l11.38 5.69a.8.8 0 0 1 0 1.44L6 15.5" />`,
"flame": `<path d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4" />`,
"flame": `<path d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4" />`,
"flame-kindling": `<path d="M12 2c1 3 2.5 3.5 3.5 4.5A5 5 0 0 1 17 10a5 5 0 1 1-10 0c0-.3 0-.6.1-.9a2 2 0 1 0 3.3-2C8 4.5 11 2 12 2Z" />
<path d="m5 22 14-4" />
<path d="m5 18 14 4" />`,
@ -4189,7 +4189,7 @@ var internalSvgData = map[string]string{
<path d="m9 9 12-2" />
<circle cx="6" cy="18" r="3" />
<circle cx="18" cy="16" r="3" />`,
"navigation": `<polygon points="3 11 22 2 13 21 11 13 3 11" />`,
"navigation": `<polygon points="3 11 22 2 13 21 11 13 3 11" />`,
"navigation-2": `<polygon points="12 2 19 21 12 17 5 21 12 2" />`,
"navigation-2-off": `<path d="M9.31 9.31 5 21l7-4 7 4-1.17-3.17" />
<path d="M14.53 8.88 12 2l-1.17 3.17" />
@ -4768,9 +4768,9 @@ var internalSvgData = map[string]string{
<path d="M12 12h.01" />
<path d="M17 12h.01" />
<path d="M7 12h.01" />`,
"rectangle-goggles": `<path d="M20 6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-1.6-.8l-1.6-2.13a1 1 0 0 0-1.6 0L9.6 17.2A2 2 0 0 1 8 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" />`,
"rectangle-goggles": `<path d="M20 6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-1.6-.8l-1.6-2.13a1 1 0 0 0-1.6 0L9.6 17.2A2 2 0 0 1 8 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" />`,
"rectangle-horizontal": `<rect width="20" height="12" x="2" y="6" rx="2" />`,
"rectangle-vertical": `<rect width="12" height="20" x="6" y="2" rx="2" />`,
"rectangle-vertical": `<rect width="12" height="20" x="6" y="2" rx="2" />`,
"recycle": `<path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5" />
<path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12" />
<path d="m14 16-3 3 3 3" />
@ -5723,7 +5723,7 @@ var internalSvgData = map[string]string{
<path d="M22 14v2" />
<path d="M22 20a2 2 0 0 1-2 2" />`,
"squares-unite": `<path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 0 1 1h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-3a1 1 0 0 0-1-1z" />`,
"squircle": `<path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9" />`,
"squircle": `<path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9" />`,
"squircle-dashed": `<path d="M13.77 3.043a34 34 0 0 0-3.54 0" />
<path d="M13.771 20.956a33 33 0 0 1-3.541.001" />
<path d="M20.18 17.74c-.51 1.15-1.29 1.93-2.439 2.44" />
@ -5739,7 +5739,7 @@ var internalSvgData = map[string]string{
"stamp": `<path d="M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13" />
<path d="M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z" />
<path d="M5 22h14" />`,
"star": `<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />`,
"star": `<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />`,
"star-half": `<path d="M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2" />`,
"star-off": `<path d="m10.344 4.688 1.181-2.393a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.237 3.152" />
<path d="m17.945 17.945.43 2.505a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a8 8 0 0 0 .4-.099" />
@ -6280,7 +6280,7 @@ var internalSvgData = map[string]string{
"tv-minimal-play": `<path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z" />
<path d="M7 21h10" />
<rect width="20" height="14" x="2" y="3" rx="2" />`,
"twitch": `<path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" />`,
"twitch": `<path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" />`,
"twitter": `<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />`,
"type": `<path d="M12 4v16" />
<path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" />

1
internal/ui/components/icon/icon_defs.go
View file

@ -1,6 +1,7 @@
// templui component icon - version: v1.9.5 installed by templui v1.9.5
// 📚 Documentation: https://templui.io/docs/components/icon
package icon
// This file is auto generated
// Using Lucide icons version 0.576.0
var AArrowDown = Icon("a-arrow-down")

155
internal/ui/forms/create_bill.templ Normal file
View file

@ -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>
}

18
internal/ui/pages/space_account.templ
View file

@ -1,6 +1,7 @@
package pages
import "github.com/shopspring/decimal"
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
@ -8,12 +9,10 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
import "git.juancwu.dev/juancwu/budgit/internal/ui/utils"
type SpaceAccountPageProps struct {
SpaceID string
AccountID string
AccountName string
AccountDescription string
AccountNumber string
AccountBalance decimal.Decimal
SpaceID string
AccountID string
AccountName string
AccountBalance decimal.Decimal
}
templ SpaceAccountPage(props SpaceAccountPageProps) {
@ -35,16 +34,10 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
@card.Title() {
{ props.AccountName }
}
@card.Description(card.DescriptionProps{Class: "text-sm"}) {
{ props.AccountDescription }
}
}
@card.Content() {
<h1 class={ utils.TwMerge(balanceTextClasses...) }>${ utils.FormatDecimalWithThousands(props.AccountBalance.StringFixedBank(2)) }</h1>
<p class="text-sm text-muted-foreground">Available Balance</p>
<p class="mt-8 text-sm text-muted-foreground">
Account <span>•••• { props.AccountNumber }</span>
</p>
}
}
@card.Card(card.Props{Class: "rounded-sm col-span-full md:col-span-4"}) {
@ -57,6 +50,7 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
@button.Button(button.Props{
Class: "w-full flex gap-2 md:gap-4 items-center",
Variant: button.VariantDefault,
Href: routeurl.URL("page.app.spaces.space.accounts.account.bills.create", "spaceID", props.SpaceID, "accountID", props.AccountID),
}) {
Pay Bills
@icon.HandCoins()

23
internal/ui/pages/space_create_bill.templ
View file

@ -1,4 +1,25 @@
package pages
templ SpaceCreateBill() {
import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
type SpaceCreateBillPageProps struct {
SpaceID string
AccountID string
AccountName string
Form forms.CreateBillProps
}
templ SpaceCreateBillPage(props SpaceCreateBillPageProps) {
@layouts.App("Pay Bills", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Pay Bills</h1>
<p class="text-muted-foreground mt-2">
Record a bill paid from { props.AccountName }.
</p>
</div>
@forms.CreateBill(props.Form)
</div>
}
}