feat: investment accounts

internal/ui/pages/investment_holding_form.templ

@@ -0,0 +1,88 @@
+package pages
+
+import (
+	"git.juancwu.dev/juancwu/budgit/internal/routeurl"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+)
+
+type InvestmentHoldingFormPageProps struct {
+	SpaceID     string
+	SpaceName   string
+	AccountID   string
+	AccountName string
+}
+
+templ InvestmentHoldingFormPage(props InvestmentHoldingFormPageProps) {
+	@layouts.AppWithBreadcrumb(
+		"Add holding",
+		accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Add holding"),
+		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">Add holding</h1>
+				<p class="text-muted-foreground mt-2">
+					Track a symbol inside { props.AccountName }. You can record buy/sell trades after creating it.
+				</p>
+			</div>
+			<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.investments.holdings.create", "spaceID", props.SpaceID, "accountID", props.AccountID) }>
+				@card.Card(card.Props{Class: "rounded-sm"}) {
+					@card.Content(card.ContentProps{Class: "p-4 space-y-4"}) {
+						@form.Item() {
+							@form.Label(form.LabelProps{For: "symbol"}) {
+								Symbol
+							}
+							@input.Input(input.Props{
+								ID:          "symbol",
+								Name:        "symbol",
+								Type:        input.TypeText,
+								Placeholder: "e.g. VFV.TO",
+								Class:       "rounded-sm uppercase",
+								Required:    true,
+								Attributes: templ.Attributes{
+									"autocomplete": "off",
+									"autofocus":    "",
+								},
+							})
+							@form.Description() {
+								Use the broker's symbol exactly (e.g. VFV.TO for TSX, AAPL for NASDAQ).
+							}
+						}
+						@form.Item() {
+							@form.Label(form.LabelProps{For: "display_name"}) {
+								Display name
+							}
+							@input.Input(input.Props{
+								ID:          "display_name",
+								Name:        "display_name",
+								Type:        input.TypeText,
+								Placeholder: "e.g. Vanguard S&P 500 Index ETF",
+								Class:       "rounded-sm",
+							})
+							@form.Description() {
+								Optional. Falls back to the symbol if left empty.
+							}
+						}
+					}
+					@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}) {
+							Add holding
+						}
+					}
+				}
+			</form>
+		</div>
+	}
+}