feat(01-02): integrate PageShell, SummaryStrip, and DashboardSkeleton into DashboardPage
- Replace inline SummaryCard with SummaryStrip component (responsive 3-card grid) - Replace inline h1 header with PageShell wrapper - Replace loading null returns with DashboardSkeleton pulse animation - Replace hardcoded green/red color classes with semantic tokens (text-on-budget, text-over-budget, bg-on-budget, bg-over-budget) - Derive budgetedIncome/budgetedExpenses for variance display Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
294
src/pages/DashboardPage.tsx
Normal file
294
src/pages/DashboardPage.tsx
Normal file
@@ -0,0 +1,294 @@
|
|||||||
|
import { Link } from "react-router-dom"
|
||||||
|
import { useTranslation } from "react-i18next"
|
||||||
|
import {
|
||||||
|
PieChart,
|
||||||
|
Pie,
|
||||||
|
Cell,
|
||||||
|
ResponsiveContainer,
|
||||||
|
Tooltip,
|
||||||
|
} from "recharts"
|
||||||
|
import { useBudgets, useBudgetDetail } from "@/hooks/useBudgets"
|
||||||
|
import type { CategoryType } from "@/lib/types"
|
||||||
|
import { categoryColors } from "@/lib/palette"
|
||||||
|
import { formatCurrency } from "@/lib/format"
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { PageShell } from "@/components/shared/PageShell"
|
||||||
|
import { SummaryStrip } from "@/components/dashboard/SummaryStrip"
|
||||||
|
import { DashboardSkeleton } from "@/components/dashboard/DashboardSkeleton"
|
||||||
|
import QuickAddPicker from "@/components/QuickAddPicker"
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Constants
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
const EXPENSE_TYPES: CategoryType[] = [
|
||||||
|
"bill",
|
||||||
|
"variable_expense",
|
||||||
|
"debt",
|
||||||
|
"saving",
|
||||||
|
"investment",
|
||||||
|
]
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Helpers
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the ISO date string for the first day of the given month.
|
||||||
|
* e.g. currentMonthStart(2026, 3) => "2026-03-01"
|
||||||
|
*/
|
||||||
|
function currentMonthStart(year: number, month: number): string {
|
||||||
|
return `${year}-${String(month).padStart(2, "0")}-01`
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Dashboard inner — rendered once a budget id is known
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function DashboardContent({ budgetId }: { budgetId: string }) {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { budget, items, loading } = useBudgetDetail(budgetId)
|
||||||
|
|
||||||
|
if (loading) return <DashboardSkeleton />
|
||||||
|
if (!budget) return null
|
||||||
|
|
||||||
|
const currency = budget.currency
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
// Derived totals
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
|
||||||
|
const totalIncome = items
|
||||||
|
.filter((i) => i.category?.type === "income")
|
||||||
|
.reduce((sum, i) => sum + i.actual_amount, 0)
|
||||||
|
|
||||||
|
const totalExpenses = items
|
||||||
|
.filter((i) => i.category?.type !== "income")
|
||||||
|
.reduce((sum, i) => sum + i.actual_amount, 0)
|
||||||
|
|
||||||
|
const availableBalance = totalIncome - totalExpenses + budget.carryover_amount
|
||||||
|
|
||||||
|
const budgetedIncome = items
|
||||||
|
.filter((i) => i.category?.type === "income")
|
||||||
|
.reduce((sum, i) => sum + i.budgeted_amount, 0)
|
||||||
|
|
||||||
|
const budgetedExpenses = items
|
||||||
|
.filter((i) => i.category?.type !== "income")
|
||||||
|
.reduce((sum, i) => sum + i.budgeted_amount, 0)
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
// Pie chart data — actual spending grouped by category type (non-income)
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
|
||||||
|
const pieData = EXPENSE_TYPES.map((type) => {
|
||||||
|
const total = items
|
||||||
|
.filter((i) => i.category?.type === type)
|
||||||
|
.reduce((sum, i) => sum + i.actual_amount, 0)
|
||||||
|
return { name: t(`categories.types.${type}`), value: total, type }
|
||||||
|
}).filter((d) => d.value > 0)
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
// Category progress rows — non-income types with at least one item
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
|
||||||
|
const progressGroups = EXPENSE_TYPES.map((type) => {
|
||||||
|
const groupItems = items.filter((i) => i.category?.type === type)
|
||||||
|
if (groupItems.length === 0) return null
|
||||||
|
|
||||||
|
const budgeted = groupItems.reduce((sum, i) => sum + i.budgeted_amount, 0)
|
||||||
|
const actual = groupItems.reduce((sum, i) => sum + i.actual_amount, 0)
|
||||||
|
const pct = budgeted > 0 ? Math.round((actual / budgeted) * 100) : 0
|
||||||
|
const overBudget = actual > budgeted
|
||||||
|
|
||||||
|
return { type, budgeted, actual, pct, overBudget }
|
||||||
|
}).filter(Boolean)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Quick Add button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<QuickAddPicker budgetId={budgetId} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary cards */}
|
||||||
|
<SummaryStrip
|
||||||
|
income={{
|
||||||
|
value: formatCurrency(totalIncome, currency),
|
||||||
|
budgeted: formatCurrency(budgetedIncome, currency),
|
||||||
|
}}
|
||||||
|
expenses={{
|
||||||
|
value: formatCurrency(totalExpenses, currency),
|
||||||
|
budgeted: formatCurrency(budgetedExpenses, currency),
|
||||||
|
}}
|
||||||
|
balance={{
|
||||||
|
value: formatCurrency(availableBalance, currency),
|
||||||
|
isPositive: availableBalance >= 0,
|
||||||
|
}}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Expense breakdown chart + category progress */}
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
{/* Pie chart */}
|
||||||
|
{pieData.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
{t("dashboard.expenseBreakdown")}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={240}>
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={pieData}
|
||||||
|
dataKey="value"
|
||||||
|
nameKey="name"
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
outerRadius={90}
|
||||||
|
innerRadius={48}
|
||||||
|
>
|
||||||
|
{pieData.map((entry) => (
|
||||||
|
<Cell
|
||||||
|
key={entry.type}
|
||||||
|
fill={categoryColors[entry.type]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
formatter={(value) =>
|
||||||
|
formatCurrency(Number(value), currency)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
<ul className="mt-2 space-y-1">
|
||||||
|
{pieData.map((entry) => (
|
||||||
|
<li key={entry.type} className="flex items-center gap-2 text-sm">
|
||||||
|
<span
|
||||||
|
className="inline-block size-3 shrink-0 rounded-full"
|
||||||
|
style={{ backgroundColor: categoryColors[entry.type] }}
|
||||||
|
/>
|
||||||
|
<span className="text-muted-foreground">{entry.name}</span>
|
||||||
|
<span className="ml-auto tabular-nums font-medium">
|
||||||
|
{formatCurrency(entry.value, currency)}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Category progress */}
|
||||||
|
{progressGroups.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
{t("dashboard.expenseBreakdown")}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{progressGroups.map((group) => {
|
||||||
|
if (!group) return null
|
||||||
|
const barColor = group.overBudget
|
||||||
|
? "bg-over-budget"
|
||||||
|
: "bg-on-budget"
|
||||||
|
const clampedPct = Math.min(group.pct, 100)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={group.type} className="space-y-1.5">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="inline-block size-3 shrink-0 rounded-full"
|
||||||
|
style={{ backgroundColor: categoryColors[group.type] }}
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{t(`categories.types.${group.type}`)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`ml-auto text-xs tabular-nums ${
|
||||||
|
group.overBudget
|
||||||
|
? "text-over-budget"
|
||||||
|
: "text-muted-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{formatCurrency(group.actual, currency)}
|
||||||
|
{" / "}
|
||||||
|
{formatCurrency(group.budgeted, currency)}
|
||||||
|
{" "}
|
||||||
|
({group.pct}%)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar */}
|
||||||
|
<div className="h-2 w-full rounded-full bg-muted">
|
||||||
|
<div
|
||||||
|
className={`h-2 rounded-full transition-all ${barColor}`}
|
||||||
|
style={{ width: `${clampedPct}%` }}
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuenow={group.pct}
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={100}
|
||||||
|
aria-label={t(`categories.types.${group.type}`)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// DashboardPage
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export default function DashboardPage() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { budgets, loading } = useBudgets()
|
||||||
|
|
||||||
|
// Find budget whose start_date falls in the current calendar month
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = now.getMonth() + 1
|
||||||
|
const monthPrefix = currentMonthStart(year, month).slice(0, 7) // "YYYY-MM"
|
||||||
|
|
||||||
|
const currentBudget = budgets.find((b) =>
|
||||||
|
b.start_date.startsWith(monthPrefix)
|
||||||
|
)
|
||||||
|
|
||||||
|
if (loading) return (
|
||||||
|
<PageShell title={t("dashboard.title")}>
|
||||||
|
<DashboardSkeleton />
|
||||||
|
</PageShell>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageShell title={t("dashboard.title")}>
|
||||||
|
{!currentBudget ? (
|
||||||
|
/* No budget for this month */
|
||||||
|
<div className="flex flex-col items-center gap-4 py-20 text-center">
|
||||||
|
<p className="text-muted-foreground">{t("dashboard.noBudget")}</p>
|
||||||
|
<Link
|
||||||
|
to="/budgets"
|
||||||
|
className="text-sm underline underline-offset-4 hover:text-foreground"
|
||||||
|
>
|
||||||
|
{t("budgets.newBudget")}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<DashboardContent budgetId={currentBudget.id} />
|
||||||
|
)}
|
||||||
|
</PageShell>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user