feat: add space account page

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

internal/ui/blocks/account_card.templ

@@ -3,15 +3,17 @@ package blocks
 import "github.com/shopspring/decimal"
 import "strings"
 import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
 
 type AccountCardInfo struct {
+	SpaceID string
 	ID      string
 	Name    string
 	Balance decimal.Decimal
 }
 
 templ AccountCard(info AccountCardInfo) {
-	<div class="px-2 py-2 block rounded-md hover:bg-sidebar-accent">
+	<a href={ routeurl.URL("page.app.spaces.space.accounts.account.overview", "spaceID", info.SpaceID, "accountID", info.ID) } class="px-2 py-2 block rounded-md hover:bg-sidebar-accent">
 		<div class="flex items-center justify-between">
 			<div class="flex gap-4 items-center">
 				<div class="w-10 h-10 shrink-0 overflow-hidden rounded-md bg-muted flex items-center justify-center">
@@ -28,5 +30,5 @@ templ AccountCard(info AccountCardInfo) {
 				@icon.ChevronRight()
 			</div>
 		</div>
-	</div>
+	</a>
 }

internal/ui/pages/space_account.templ

@@ -0,0 +1,99 @@
+package pages
+
+import "github.com/shopspring/decimal"
+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"
+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
+}
+
+templ SpaceAccountPage(props SpaceAccountPageProps) {
+	{{
+		balanceTextClasses := []string{"text-4xl font-bold"}
+		if props.AccountBalance.IsPositive() {
+			balanceTextClasses = append(balanceTextClasses, "text-green-600 dark:text-green-400")
+		} else {
+			balanceTextClasses = append(balanceTextClasses, "text-red-600 dark:text-red-400")
+		}
+	}}
+	@layouts.App("Space Account", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
+		<div class="container px-6 py-8 mx-auto space-y-8">
+			<div class="grid gap-4 grid-cols-1 md:grid-cols-12">
+				@card.Card(card.Props{
+					Class: "rounded-sm col-span-full md:col-span-8",
+				}) {
+					@card.Header() {
+						@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"}) {
+					@card.Header() {
+						@card.Title() {
+							Quick Actions 
+						}
+					}
+					@card.Content(card.ContentProps{Class: "space-y-4"}) {
+						@button.Button(button.Props{
+							Class:   "w-full flex gap-2 md:gap-4 items-center",
+							Variant: button.VariantDefault,
+						}) {
+							Pay Bills
+							@icon.HandCoins()
+						}
+						@button.Button(button.Props{
+							Class:   "w-full flex gap-2 md:gap-4 items-center",
+							Variant: button.VariantSecondary,
+						}) {
+							Deposit Funds
+							@icon.BanknoteArrowDown()
+						}
+						@button.Button(button.Props{
+							Class:   "w-full flex gap-2 md:gap-4 items-center",
+							Variant: button.VariantLink,
+						}) {
+							Account Settings
+							@icon.Settings()
+						}
+					}
+				}
+			</div>
+			<div>
+				@card.Card() {
+					@card.Header() {
+						<div>
+							@card.Title() {
+								Transaction History 
+							}
+							@card.Description() {
+								Overview of your activity for August 2024 
+							}
+						</div>
+					}
+					@card.Content() {
+					}
+				}
+			</div>
+		</div>
+	}
+}

internal/ui/pages/space_account_settings.templ

@@ -0,0 +1,4 @@
+package pages
+
+templ SpaceAccountSettings() {
+}

internal/ui/pages/space_create_bill.templ

@@ -0,0 +1,4 @@
+package pages
+
+templ SpaceCreateBill() {
+}

internal/ui/pages/space_create_deposit.templ

@@ -0,0 +1,4 @@
+package pages
+
+templ SpaceCreateDeposit() {
+}

internal/ui/utils/currency.go

@@ -0,0 +1,35 @@
+package utils
+
+import "strings"
+
+func FormatDecimalWithThousands(numStr string) (string, error) {
+	// Split into integer and decimal parts
+	parts := strings.SplitN(numStr, ".", 2)
+	intPart := parts[0]
+
+	// Handle negative numbers
+	negative := false
+	if strings.HasPrefix(intPart, "-") {
+		negative = true
+		intPart = intPart[1:]
+	}
+
+	// Insert thousand separators
+	var result []byte
+	for i, c := range intPart {
+		if i > 0 && (len(intPart)-i)%3 == 0 {
+			result = append(result, ',')
+		}
+		result = append(result, byte(c))
+	}
+
+	// Reassemble
+	formatted := string(result)
+	if len(parts) == 2 {
+		formatted += "." + parts[1]
+	}
+	if negative {
+		formatted = "-" + formatted
+	}
+	return formatted, nil
+}