feat: transfer funds between accounts

internal/ui/blocks/transaction_list.templ

@@ -10,6 +10,9 @@ type TransactionListProps struct {
 	SpaceID      string
 	AccountID    string
 	Transactions []*model.Transaction
+	// NonEditableIDs marks transaction IDs whose Edit button should be hidden
+	// (currently: transfer halves). Nil/empty means everything is editable.
+	NonEditableIDs map[string]bool
 }
 
 templ TransactionList(props TransactionListProps) {
@@ -20,13 +23,13 @@ templ TransactionList(props TransactionListProps) {
 	} else {
 		<ul class="divide-y">
 			for _, t := range props.Transactions {
-				@transactionRow(props.SpaceID, props.AccountID, t)
+				@transactionRow(props.SpaceID, props.AccountID, t, !props.NonEditableIDs[t.ID])
 			}
 		</ul>
 	}
 }
 
-templ transactionRow(spaceID, accountID string, t *model.Transaction) {
+templ transactionRow(spaceID, accountID string, t *model.Transaction, editable bool) {
 	{{
 		isDeposit := t.Type == model.TransactionTypeDeposit
 		amountClasses := []string{"text-sm font-semibold tabular-nums"}
@@ -70,7 +73,7 @@ templ transactionRow(spaceID, accountID string, t *model.Transaction) {
 					<p class="text-xs text-muted-foreground truncate max-w-[200px]">{ *t.Description }</p>
 				}
 			</div>
-			if spaceID != "" && accountID != "" {
+			if spaceID != "" && accountID != "" && editable {
 				@button.Button(button.Props{
 					Variant: button.VariantGhost,
 					Size:    button.SizeIcon,

internal/ui/forms/create_transfer.templ

@@ -0,0 +1,176 @@
+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 CreateTransferProps struct {
+	SpaceID         string
+	SourceAccountID string
+
+	// DestAccounts is the list of other accounts in the same space the user
+	// can transfer to. Excludes the source account.
+	DestAccounts []*model.Account
+
+	Title         string
+	Amount        string
+	DestAccountID string
+	Date          string
+	Description   string
+
+	TitleErr   string
+	AmountErr  string
+	DestErr    string
+	DateErr    string
+	GeneralErr string
+}
+
+templ CreateTransfer(props CreateTransferProps) {
+	<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.transfers.create", "spaceID", props.SpaceID, "accountID", props.SourceAccountID) }>
+		@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. Move to savings",
+						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 }
+						}
+					}
+				}
+				@form.Item() {
+					@form.Label(form.LabelProps{For: "destination"}) {
+						Destination account
+					}
+					if len(props.DestAccounts) == 0 {
+						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+							This space has no other accounts. Create one first.
+						}
+					} else {
+						<select
+							id="destination"
+							name="destination"
+							class={ "flex h-9 w-full items-center rounded-sm border bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+								templ.KV("border-destructive", props.DestErr != ""),
+								templ.KV("border-input", props.DestErr == "") }
+							required
+						>
+							<option value="" selected?={ props.DestAccountID == "" }>Select an account…</option>
+							for _, a := range props.DestAccounts {
+								<option value={ a.ID } selected?={ props.DestAccountID == a.ID }>{ a.Name }</option>
+							}
+						</select>
+					}
+					if props.DestErr != "" {
+						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+							{ props.DestErr }
+						}
+					}
+				}
+				<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.Description() {
+							Transfers may exceed the source balance and result in a negative balance.
+						}
+					}
+					@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. Shared by both sides of the transfer.
+					}
+				}
+			}
+			@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.SourceAccountID),
+				}) {
+					Cancel
+				}
+				@button.Button(button.Props{
+					Type:     button.TypeSubmit,
+					Disabled: len(props.DestAccounts) == 0,
+				}) {
+					Transfer
+				}
+			}
+		}
+	</form>
+}

internal/ui/pages/space_account.templ

@@ -16,7 +16,8 @@ type SpaceAccountPageProps struct {
 	AccountID          string
 	AccountName        string
 	AccountBalance     decimal.Decimal
-	RecentTransactions []*model.Transaction
+	RecentTransactions       []*model.Transaction
+	NonEditableTransactionIDs map[string]bool
 }
 
 templ SpaceAccountPage(props SpaceAccountPageProps) {
@@ -92,9 +93,10 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
 					}
 					@card.Content() {
 						@blocks.TransactionList(blocks.TransactionListProps{
-							SpaceID:      props.SpaceID,
-							AccountID:    props.AccountID,
-							Transactions: props.RecentTransactions,
+							SpaceID:        props.SpaceID,
+							AccountID:      props.AccountID,
+							Transactions:   props.RecentTransactions,
+							NonEditableIDs: props.NonEditableTransactionIDs,
 						})
 					}
 					@card.Footer(card.FooterProps{Class: "justify-end"}) {

internal/ui/pages/space_account_activity.templ

@@ -147,9 +147,12 @@ func accountActivityTxMessage(spaceID, accountID string, log *model.TransactionA
 	switch log.Action {
 	case model.TransactionAuditActionCreated:
 		var meta struct {
-			TransactionType string `json:"transaction_type"`
-			Title           string `json:"title"`
-			Amount          string `json:"amount"`
+			TransactionType   string `json:"transaction_type"`
+			Title             string `json:"title"`
+			Amount            string `json:"amount"`
+			TransferRole      string `json:"transfer_role"`
+			TransferOtherAcct string `json:"transfer_other_acct"`
+			TransferOtherName string `json:"transfer_other_name"`
 		}
 		_ = json.Unmarshal(log.Metadata, &meta)
 		title := meta.Title
@@ -161,6 +164,20 @@ func accountActivityTxMessage(spaceID, accountID string, log *model.TransactionA
 		if meta.Amount != "" {
 			amountSuffix = fmt.Sprintf(" for $%s", templEscape(meta.Amount))
 		}
+		// Transfer events get a more descriptive sentence so users can see
+		// which side this entry is and where the money went / came from.
+		if meta.TransferRole != "" {
+			direction := "to"
+			if meta.TransferRole == "destination" {
+				direction = "from"
+			}
+			otherName := meta.TransferOtherName
+			if otherName == "" {
+				otherName = "another account"
+			}
+			return fmt.Sprintf("%s transferred %s%s %s %s.",
+				actor, titleHTML, amountSuffix, templEscape(direction), bold(otherName))
+		}
 		return fmt.Sprintf("%s added a %s %s%s.",
 			actor, templEscape(transactionTypeLabel(meta.TransactionType)), titleHTML, amountSuffix)
 	case model.TransactionAuditActionEdited:

internal/ui/pages/space_account_transactions.templ

@@ -11,15 +11,16 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
 import "git.juancwu.dev/juancwu/budgit/internal/ui/components/pagination"
 
 type SpaceAccountTransactionsPageProps struct {
-	SpaceID      string
-	SpaceName    string
-	AccountID    string
-	AccountName  string
-	Transactions []*model.Transaction
-	CurrentPage  int
-	TotalPages   int
-	TotalCount   int
-	PerPage      int
+	SpaceID                  string
+	SpaceName                string
+	AccountID                string
+	AccountName              string
+	Transactions             []*model.Transaction
+	NonEditableTransactionIDs map[string]bool
+	CurrentPage              int
+	TotalPages               int
+	TotalCount               int
+	PerPage                  int
 }
 
 templ SpaceAccountTransactionsPage(props SpaceAccountTransactionsPageProps) {
@@ -62,9 +63,10 @@ templ SpaceAccountTransactionsPage(props SpaceAccountTransactionsPageProps) {
 				}
 				@card.Content() {
 					@blocks.TransactionList(blocks.TransactionListProps{
-						SpaceID:      props.SpaceID,
-						AccountID:    props.AccountID,
-						Transactions: props.Transactions,
+						SpaceID:        props.SpaceID,
+						AccountID:      props.AccountID,
+						Transactions:   props.Transactions,
+						NonEditableIDs: props.NonEditableTransactionIDs,
 					})
 				}
 				if props.TotalPages > 1 {

internal/ui/pages/space_create_transfer.templ

@@ -0,0 +1,32 @@
+package pages
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+
+type SpaceCreateTransferPageProps struct {
+	SpaceID     string
+	SpaceName   string
+	AccountID   string
+	AccountName string
+	Form        forms.CreateTransferProps
+}
+
+templ SpaceCreateTransferPage(props SpaceCreateTransferPageProps) {
+	@layouts.AppWithBreadcrumb(
+		"Transfer Funds",
+		accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Transfer Funds"),
+		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">Transfer Funds</h1>
+				<p class="text-muted-foreground mt-2">
+					Move money out of { props.AccountName } into another account in this space.
+				</p>
+			</div>
+			@forms.CreateTransfer(props.Form)
+		</div>
+	}
+}

internal/ui/pages/space_overview.templ

@@ -144,6 +144,16 @@ templ spaceAccountSidebarContent(spaceID, accountID string) {
 					<span>Deposit Funds</span>
 				}
 			}
+			@sidebar.MenuItem() {
+				@sidebar.MenuButton(sidebar.MenuButtonProps{
+					Href:     routeurl.URL("page.app.spaces.space.accounts.account.transfers.create", "spaceID", spaceID, "accountID", accountID),
+					IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces.space.accounts.account.transfers.create", "spaceID", spaceID, "accountID", accountID),
+					Tooltip:  "Transfer Funds",
+				}) {
+					@icon.ArrowRightLeft()
+					<span>Transfer Funds</span>
+				}
+			}
 			@sidebar.MenuItem() {
 				@sidebar.MenuButton(sidebar.MenuButtonProps{
 					Href:     routeurl.URL("page.app.spaces.space.accounts.account.activity", "spaceID", spaceID, "accountID", accountID),

internal/ui/pages/space_transaction.templ

@@ -9,14 +9,16 @@ 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
-	RecentAuditLogs []*model.TransactionAuditLogWithActor
-	AuditLogCount   int
+	SpaceID            string
+	SpaceName          string
+	AccountID          string
+	AccountName        string
+	Transaction        *model.Transaction
+	CategoryName       string
+	RecentAuditLogs    []*model.TransactionAuditLogWithActor
+	AuditLogCount      int
+	RelatedTransaction *model.Transaction
+	RelatedAccount     *model.Account
 }
 
 templ SpaceTransactionPage(props SpaceTransactionPageProps) {
@@ -53,13 +55,15 @@ templ SpaceTransactionPage(props SpaceTransactionPageProps) {
 						{ 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
+				if props.RelatedTransaction == nil {
+					@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() {
@@ -100,6 +104,23 @@ templ SpaceTransactionPage(props SpaceTransactionPageProps) {
 							<p class="whitespace-pre-wrap">{ *props.Transaction.Description }</p>
 						</div>
 					}
+					if props.RelatedTransaction != nil && props.RelatedAccount != nil {
+						{{
+							direction := "to"
+							if props.Transaction.Type == model.TransactionTypeDeposit {
+								direction = "from"
+							}
+						}}
+						<div>
+							<p class="text-sm text-muted-foreground">Transferred { direction }</p>
+							<a
+								class="font-medium underline-offset-2 hover:underline"
+								href={ templ.SafeURL(routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction", "spaceID", props.SpaceID, "accountID", props.RelatedAccount.ID, "transactionID", props.RelatedTransaction.ID)) }
+							>
+								{ props.RelatedAccount.Name }
+							</a>
+						</div>
+					}
 				}
 			}
 			@card.Card() {