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

feat: edit transactions

Browse source
This commit is contained in:
juancwu 2026-05-03 23:16:08 +00:00
commit 283a157b29
11 changed files with 998 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

57
internal/ui/blocks/transaction_list.templ
View file

@ -1,24 +1,32 @@
package blocks
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/icon"
import "git.juancwu.dev/juancwu/budgit/internal/ui/utils"
templ TransactionList(txns []*model.Transaction) {
if len(txns) == 0 {
type TransactionListProps struct {
SpaceID string
AccountID string
Transactions []*model.Transaction
}
templ TransactionList(props TransactionListProps) {
if len(props.Transactions) == 0 {
<div class="text-sm text-muted-foreground py-6 text-center">
No transactions yet.
</div>
} else {
<ul class="divide-y">
for _, t := range txns {
@transactionRow(t)
for _, t := range props.Transactions {
@transactionRow(props.SpaceID, props.AccountID, t)
}
</ul>
}
}
templ transactionRow(t *model.Transaction) {
templ transactionRow(spaceID, accountID string, t *model.Transaction) {
{{
isDeposit := t.Type == model.TransactionTypeDeposit
amountClasses := []string{"text-sm font-semibold tabular-nums"}
@ -40,16 +48,41 @@ templ transactionRow(t *model.Transaction) {
}
</div>
<div class="min-w-0">
<p class="font-medium truncate">{ t.Title }</p>
if spaceID != "" && accountID != "" {
<a
href={ templ.SafeURL(routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction", "spaceID", spaceID, "accountID", accountID, "transactionID", t.ID)) }
class="font-medium truncate block hover:underline"
>
{ t.Title }
</a>
} else {
<p class="font-medium truncate">{ t.Title }</p>
}
<p class="text-xs text-muted-foreground">{ t.OccurredAt.Format("Jan 2, 2006") }</p>
</div>
</div>
<div class="text-right shrink-0">
<p class={ utils.TwMerge(amountClasses...) }>
{ sign }${ utils.FormatDecimalWithThousands(t.Value.StringFixedBank(2)) }
</p>
if t.Description != nil && *t.Description != "" {
<p class="text-xs text-muted-foreground truncate max-w-[200px]">{ *t.Description }</p>
<div class="flex items-center gap-3 shrink-0">
<div class="text-right">
<p class={ utils.TwMerge(amountClasses...) }>
{ sign }${ utils.FormatDecimalWithThousands(t.Value.StringFixedBank(2)) }
</p>
if t.Description != nil && *t.Description != "" {
<p class="text-xs text-muted-foreground truncate max-w-[200px]">{ *t.Description }</p>
}
</div>
if spaceID != "" && accountID != "" {
@button.Button(button.Props{
Variant: button.VariantGhost,
Size: button.SizeIcon,
Href: routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction.edit", "spaceID", spaceID, "accountID", accountID, "transactionID", t.ID),
Class: "h-8 w-8",
Attributes: templ.Attributes{
"aria-label": "Edit transaction",
"title": "Edit transaction",
},
}) {
@icon.Pencil(icon.Props{Class: "size-4"})
}
}
</div>
</li>

162
internal/ui/forms/edit_bill.templ Normal file
View file

@ -0,0 +1,162 @@
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 EditBillProps struct {
SpaceID string
AccountID string
TransactionID string
Categories []*model.Category
Title string
Amount string
Date string
Description string
CategoryID string
TitleErr string
AmountErr string
DateErr string
GeneralErr string
SuccessMsg string
}
templ EditBill(props EditBillProps) {
<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.transactions.transaction.edit", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.TransactionID) }>
@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 }
}
}
if props.SuccessMsg != "" {
@form.Message() {
{ props.SuccessMsg }
}
}
@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.transactions.transaction", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.TransactionID),
}) {
Cancel
}
@button.Button(button.Props{Type: button.TypeSubmit}) {
Save Changes
}
}
}
</form>
}

141
internal/ui/forms/edit_deposit.templ Normal file
View file

@ -0,0 +1,141 @@
package forms
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 EditDepositProps struct {
SpaceID string
AccountID string
TransactionID string
Title string
Amount string
Date string
Description string
TitleErr string
AmountErr string
DateErr string
GeneralErr string
SuccessMsg string
}
templ EditDeposit(props EditDepositProps) {
<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.transactions.transaction.edit", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.TransactionID) }>
@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 }
}
}
if props.SuccessMsg != "" {
@form.Message() {
{ props.SuccessMsg }
}
}
@form.Item() {
@form.Label(form.LabelProps{For: "title"}) {
Title
}
@input.Input(input.Props{
ID: "title",
Name: "title",
Type: input.TypeText,
Placeholder: "e.g. Paycheck",
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: "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.transactions.transaction", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.TransactionID),
}) {
Cancel
}
@button.Button(button.Props{Type: button.TypeSubmit}) {
Save Changes
}
}
}
</form>
}

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

@ -91,7 +91,11 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
</div>
}
@card.Content() {
@blocks.TransactionList(props.RecentTransactions)
@blocks.TransactionList(blocks.TransactionListProps{
SpaceID: props.SpaceID,
AccountID: props.AccountID,
Transactions: props.RecentTransactions,
})
}
@card.Footer(card.FooterProps{Class: "justify-end"}) {
@button.Button(button.Props{

6
internal/ui/pages/space_account_transactions.templ
View file

@ -61,7 +61,11 @@ templ SpaceAccountTransactionsPage(props SpaceAccountTransactionsPageProps) {
}
}
@card.Content() {
@blocks.TransactionList(props.Transactions)
@blocks.TransactionList(blocks.TransactionListProps{
SpaceID: props.SpaceID,
AccountID: props.AccountID,
Transactions: props.Transactions,
})
}
if props.TotalPages > 1 {
@card.Footer() {

33
internal/ui/pages/space_edit_transaction.templ Normal file
View file

@ -0,0 +1,33 @@
package pages
import "git.juancwu.dev/juancwu/budgit/internal/model"
import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
type SpaceEditTransactionPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
TransactionType model.TransactionType
BillForm forms.EditBillProps
DepositForm forms.EditDepositProps
}
templ SpaceEditTransactionPage(props SpaceEditTransactionPageProps) {
@layouts.AppWithBreadcrumb("Edit Transaction", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Edit Transaction"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Edit Transaction</h1>
<p class="text-muted-foreground mt-2">
Update the details of this transaction in { props.AccountName }.
</p>
</div>
if props.TransactionType == model.TransactionTypeDeposit {
@forms.EditDeposit(props.DepositForm)
} else {
@forms.EditBill(props.BillForm)
}
</div>
}
}

105
internal/ui/pages/space_transaction.templ Normal file
View file

@ -0,0 +1,105 @@
package pages
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/icon"
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
import "git.juancwu.dev/juancwu/budgit/internal/ui/utils"
type SpaceTransactionPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
Transaction *model.Transaction
CategoryName string
}
templ SpaceTransactionPage(props SpaceTransactionPageProps) {
@layouts.AppWithBreadcrumb("Transaction", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, props.Transaction.Title), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
{{
isDeposit := props.Transaction.Type == model.TransactionTypeDeposit
amountClasses := []string{"text-3xl font-semibold tabular-nums"}
sign := "-"
label := "Bill"
if isDeposit {
amountClasses = append(amountClasses, "text-green-600 dark:text-green-400")
sign = "+"
label = "Deposit"
} else {
amountClasses = append(amountClasses, "text-red-600 dark:text-red-400")
}
}}
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-6">
<div class="flex items-center gap-2">
@button.Button(button.Props{
Variant: button.VariantGhost,
Size: button.SizeSm,
Href: routeurl.URL("page.app.spaces.space.accounts.account.transactions", "spaceID", props.SpaceID, "accountID", props.AccountID),
Class: "flex items-center gap-1 -ml-2",
}) {
@icon.ChevronLeft(icon.Props{Class: "size-4"})
Back to all transactions
}
</div>
<div class="flex items-start justify-between flex-wrap gap-4">
<div>
<h1 class="text-3xl font-bold">{ props.Transaction.Title }</h1>
<p class="text-muted-foreground mt-1">
{ label } in { props.AccountName }
</p>
</div>
@button.Button(button.Props{
Variant: button.VariantDefault,
Href: routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction.edit", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.Transaction.ID),
Class: "flex items-center gap-2",
}) {
@icon.Pencil(icon.Props{Class: "size-4"})
Edit
}
</div>
@card.Card() {
@card.Content(card.ContentProps{Class: "p-6 space-y-6"}) {
<div>
<p class="text-sm text-muted-foreground">Amount</p>
<p class={ utils.TwMerge(amountClasses...) }>
{ sign }${ utils.FormatDecimalWithThousands(props.Transaction.Value.StringFixedBank(2)) }
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<p class="text-sm text-muted-foreground">Date</p>
<p class="font-medium">{ props.Transaction.OccurredAt.Format("January 2, 2006") }</p>
</div>
<div>
<p class="text-sm text-muted-foreground">Type</p>
<p class="font-medium">{ label }</p>
</div>
if !isDeposit {
<div>
<p class="text-sm text-muted-foreground">Category</p>
if props.CategoryName != "" {
<p class="font-medium">{ props.CategoryName }</p>
} else {
<p class="font-medium text-muted-foreground">Uncategorized</p>
}
</div>
}
<div>
<p class="text-sm text-muted-foreground">Last updated</p>
<p class="font-medium">{ props.Transaction.UpdatedAt.Format("Jan 2, 2006 3:04 PM") }</p>
</div>
</div>
if props.Transaction.Description != nil && *props.Transaction.Description != "" {
<div>
<p class="text-sm text-muted-foreground">Description</p>
<p class="whitespace-pre-wrap">{ *props.Transaction.Description }</p>
</div>
}
}
}
</div>
}
}