budgit/internal/ui/pages/space_transaction.templ

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/dialog"
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
	RecentAuditLogs    []*model.TransactionAuditLogWithActor
	AuditLogCount      int
	RelatedTransaction *model.Transaction
	RelatedAccount     *model.Account
}

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>
				if props.RelatedTransaction == nil {
					<div class="flex items-center gap-2">
						@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
						}
						@dialog.Dialog() {
							@dialog.Trigger() {
								@button.Button(button.Props{
									Variant: button.VariantDestructive,
									Class:   "flex items-center gap-2",
								}) {
									@icon.Trash2(icon.Props{Class: "size-4"})
									Delete
								}
							}
							@dialog.Content() {
								@dialog.Header() {
									@dialog.Title() {
										Delete { props.Transaction.Title }?
									}
									@dialog.Description() {
										if props.Transaction.Type == model.TransactionTypeDeposit {
											This permanently removes the deposit and debits the amount from the account balance.
										} else {
											This permanently removes the bill and credits the amount back to the account balance.
										}
									}
								}
								@dialog.Footer(dialog.FooterProps{Class: "mt-2"}) {
									@dialog.Close() {
										@button.Button(button.Props{Variant: button.VariantOutline}) {
											Cancel
										}
									}
									<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.transactions.transaction.delete", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.Transaction.ID) }>
										@button.Button(button.Props{
											Type:    button.TypeSubmit,
											Variant: button.VariantDestructive,
											Class:   "flex gap-2 items-center",
										}) {
											@icon.Trash2(icon.Props{Class: "size-4"})
											Delete
										}
									</form>
								}
							}
						}
					</div>
				}
			</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>
					}
					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() {
				@card.Header() {
					<div class="flex items-center justify-between">
						<h2 class="text-lg font-semibold">Recent activity</h2>
						if props.AuditLogCount > 0 {
							@button.Button(button.Props{
								Variant: button.VariantLink,
								Size:    button.SizeSm,
								Href:    routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction.activity", "spaceID", props.SpaceID, "accountID", props.AccountID, "transactionID", props.Transaction.ID),
							}) {
								View all activity
							}
						}
					</div>
				}
				@card.Content(card.ContentProps{Class: "p-0"}) {
					if len(props.RecentAuditLogs) == 0 {
						<p class="px-6 py-8 text-sm text-muted-foreground text-center">
							No edits yet.
						</p>
					} else {
						<ol class="divide-y">
							for _, log := range props.RecentAuditLogs {
								@transactionActivityRow(log)
							}
						</ol>
					}
				}
			}
		</div>
	}
}