ac9c8afc4a
- Transform /reports into a hub: highlights panel + 4 nav cards - New service: reportService.getHighlights (parameterised SQL, deterministic via referenceDate argument for tests, computes current-month balance, YTD, 12-month sparkline series, top expense movers vs previous month, top recent transactions within configurable 30/60/90 day window) - Extended types: HighlightsData, HighlightMover, MonthBalance - Wired useHighlights hook with reducer + window-days state - Hub tiles (flat naming under src/components/reports): HubNetBalanceTile, HubTopMoversTile, HubTopTransactionsTile, HubHighlightsPanel, HubReportNavCard - Detailed ReportsHighlightsPage: balance tiles, sortable top movers table, diverging bar chart (Recharts + patterns SVG), top transactions list with 30/60/90 window toggle; ViewModeToggle persistence keyed as reports-viewmode-highlights - New i18n keys: reports.hub.*, reports.highlights.* - 5 new vitest cases: empty profile, parameterised queries, window sizing, delta computation, zero-previous divisor handling Fixes #71 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
24 lines
796 B
TypeScript
24 lines
796 B
TypeScript
import type { ReactNode } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export interface HubReportNavCardProps {
|
|
to: string;
|
|
icon: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
export default function HubReportNavCard({ to, icon, title, description }: HubReportNavCardProps) {
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className="group bg-[var(--card)] border border-[var(--border)] rounded-xl p-5 flex flex-col gap-2 hover:border-[var(--primary)] hover:shadow-sm transition-all"
|
|
>
|
|
<div className="text-[var(--primary)]">{icon}</div>
|
|
<h3 className="text-base font-semibold text-[var(--foreground)] group-hover:text-[var(--primary)]">
|
|
{title}
|
|
</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">{description}</p>
|
|
</Link>
|
|
);
|
|
}
|