Jean-Luc Makiola
9647f5759d
Redesign WeightSummaryCard stats from a disconnected 4-column grid to a compact legend-style list with color dots, percentages, and a divider before the total row. Switch chart and legend colors to a neutral gray palette. Add a currency selector to settings (USD, EUR, GBP, JPY, CAD, AUD) that changes the displayed symbol across the app. This is visual only — no value conversion is performed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { DashboardCard } from "../components/DashboardCard";
|
|
import { useSetups } from "../hooks/useSetups";
|
|
import { useThreads } from "../hooks/useThreads";
|
|
import { useTotals } from "../hooks/useTotals";
|
|
import { useWeightUnit } from "../hooks/useWeightUnit";
|
|
import { useCurrency } from "../hooks/useCurrency";
|
|
import { formatPrice, formatWeight } from "../lib/formatters";
|
|
|
|
export const Route = createFileRoute("/")({
|
|
component: DashboardPage,
|
|
});
|
|
|
|
function DashboardPage() {
|
|
const { data: totals } = useTotals();
|
|
const { data: threads } = useThreads(false);
|
|
const { data: setups } = useSetups();
|
|
const unit = useWeightUnit();
|
|
const currency = useCurrency();
|
|
|
|
const global = totals?.global;
|
|
const activeThreadCount = threads?.length ?? 0;
|
|
const setupCount = setups?.length ?? 0;
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<DashboardCard
|
|
to="/collection"
|
|
title="Collection"
|
|
icon="backpack"
|
|
stats={[
|
|
{ label: "Items", value: String(global?.itemCount ?? 0) },
|
|
{
|
|
label: "Weight",
|
|
value: formatWeight(global?.totalWeight ?? null, unit),
|
|
},
|
|
{ label: "Cost", value: formatPrice(global?.totalCost ?? null, currency) },
|
|
]}
|
|
emptyText="Get started"
|
|
/>
|
|
<DashboardCard
|
|
to="/collection"
|
|
search={{ tab: "planning" }}
|
|
title="Planning"
|
|
icon="search"
|
|
stats={[
|
|
{ label: "Active threads", value: String(activeThreadCount) },
|
|
]}
|
|
/>
|
|
<DashboardCard
|
|
to="/collection"
|
|
search={{ tab: "setups" }}
|
|
title="Setups"
|
|
icon="tent"
|
|
stats={[{ label: "Setups", value: String(setupCount) }]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|