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

improve dashboard page

Browse source
This commit is contained in:
juancwu 2026-01-15 01:06:55 +00:00
commit 081499ca59
5 changed files with 89 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

49
internal/ui/layouts/app.templ
View file

@ -32,7 +32,6 @@ templ App(title string) {
@icon.LayoutDashboard()
<div class="flex flex-col">
<span class="text-sm font-bold">{ cfg.AppName }</span>
<span class="text-xs text-muted-foreground">Workspace</span>
</div>
}
}
@ -54,34 +53,11 @@ templ App(title string) {
<span>Dashboard</span>
}
}
@sidebar.MenuItem() {
@sidebar.MenuButton(sidebar.MenuButtonProps{
Href: "/app/goals",
IsActive: ctxkeys.URLPath(ctx) == "/app/goals",
Tooltip: "Goals",
}) {
@icon.FolderOpen(icon.Props{Class: "size-4"})
<span>Goals</span>
}
}
}
}
}
@sidebar.Footer() {
@sidebar.Menu() {
@sidebar.MenuItem() {
@sidebar.MenuButton(sidebar.MenuButtonProps{
Href: "/docs",
Size: sidebar.MenuButtonSizeSm,
Attributes: templ.Attributes{
"target": "_blank",
"rel": "noopener noreferrer",
},
}) {
@icon.BookOpen(icon.Props{Class: "size-4"})
<span>Documentation</span>
}
}
@sidebar.MenuItem() {
@sidebar.MenuButton(sidebar.MenuButtonProps{
Href: "mailto:" + cfg.SupportEmail,
@ -170,23 +146,14 @@ templ AppSidebarDropdown(user *model.User, profile *model.Profile) {
}
</div>
@dropdown.Separator()
@dropdown.Item(dropdown.ItemProps{
Href: "/app/settings",
}) {
<span class="flex items-center">
@icon.Settings(icon.Props{Size: 16, Class: "mr-2"})
Settings
</span>
}
@dropdown.Item(dropdown.ItemProps{
Href: "/app/billing",
}) {
<span class="flex items-center">
@icon.CreditCard(icon.Props{Size: 16, Class: "mr-2"})
Billing
</span>
}
@dropdown.Separator()
<!-- @dropdown.Item(dropdown.ItemProps{ -->
<!-- Href: "/app/settings", -->
<!-- }) { -->
<!-- <span class="flex items-center"> -->
<!-- @icon.Settings(icon.Props{Size: 16, Class: "mr-2"}) -->
<!-- Settings -->
<!-- </span> -->
<!-- } -->
<form action="/auth/logout" method="POST" class="contents">
@csrf.Token()
@dropdown.Item(dropdown.ItemProps{

4
internal/ui/layouts/space.templ
View file

@ -28,7 +28,7 @@ templ Space(title string, space *model.Space) {
@icon.LayoutDashboard()
<div class="flex flex-col">
<span class="text-sm font-bold">{ cfg.AppName }</span>
<span class="text-xs text-muted-foreground">Back to Home</span>
<span class="text-xs text-muted-foreground">Back to Dashboard</span>
</div>
}
}
@ -103,7 +103,7 @@ templ Space(title string, space *model.Space) {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Link(breadcrumb.LinkProps{Href: "/app/dashboard"}) {
Home
Dashboard
}
}
@breadcrumb.Separator()

54
internal/ui/pages/app_dashboard.templ
View file

@ -1,15 +1,55 @@
package pages
import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
import (
"fmt"
"git.juancwu.dev/juancwu/budgit/internal/model"
"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
"git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
)
templ Dashboard() {
templ Dashboard(spaces []*model.Space, totalBalance int) {
@layouts.App("Dashboard") {
<div class="container max-w-7xl px-6 py-8">
<div class="mb-8">
<h1 class="text-3xl font-bold">Dashboard</h1>
<p class="text-muted-foreground mt-2">
Welcome to your dashboard
</p>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
<div>
<h1 class="text-3xl font-bold">Dashboard</h1>
<p class="text-muted-foreground mt-2">
Welcome back! Here's an overview of your spaces.
</p>
</div>
<div class="bg-card border rounded-lg p-4 shadow-sm min-w-[200px]">
<p class="text-sm font-medium text-muted-foreground">Total Balance</p>
<p class={ "text-2xl font-bold", templ.KV("text-destructive", totalBalance < 0) }>
{ fmt.Sprintf("$%.2f", float64(totalBalance)/100.0) }
</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
for _, space := range spaces {
<a href={ templ.SafeURL("/app/spaces/" + space.ID) } class="block hover:no-underline group">
@card.Card(card.Props{ Class: "h-full transition-colors group-hover:border-primary" }) {
@card.Header() {
@card.Title() { { space.Name } }
@card.Description() {
Manage expenses and shopping lists in this space.
}
}
@card.Content() {
// You could add some summary stats here later
}
}
</a>
}
// Option to create a new space
@card.Card(card.Props{ Class: "h-full border-dashed" }) {
@card.Content(card.ContentProps{ Class: "h-full flex flex-col items-center justify-center py-12" }) {
<p class="text-muted-foreground mb-4">Need another space?</p>
// TODO: Add a button or link to create a new space
<span class="text-sm font-medium opacity-50">Create Space (Coming Soon)</span>
}
}
</div>
</div>
}