improve dashboard page

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

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>
}