feat(ui): dashboard ana grafiği ve rapor sayfaları

- dashboard: periyot seçici ve kümülatif/dönemsel görünüm, tablo; günlük plan kartı sadeleşti - /raporlar özet ve kategori, trend, kişi/hesap, bütçe sayfaları; ay seçici ve CSV indirme Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-07 00:29:25 +03:00
parent bc2a8a3bde
commit 29d7b29cfa
19 changed files with 1488 additions and 108 deletions
@@ -3,6 +3,8 @@ import Link from "next/link";
 import { Suspense } from "react";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { OverviewCard } from "@/features/dashboard/components/overview-card";
 import { SummaryCardsSkeleton } from "@/features/dashboard/components/summary-cards-skeleton";
 import { DailyPlanCard } from "@/features/budgets/components/daily-plan-card";
 import { BudgetWarningBanner } from "@/features/budgets/components/warning-banner";
@@ -84,7 +86,7 @@ async function SummaryCards({ userId, householdId }: { userId: string; household
  );
 }

-export default async function DashboardPage() {
+export default async function DashboardPage({ searchParams }: PageProps<"/dashboard">) {
  const { user, household } = await requireActiveHousehold("viewer");
  return (
    <>
@@ -104,6 +106,9 @@ export default async function DashboardPage() {
      <Suspense fallback={<SummaryCardsSkeleton />}>
        <SummaryCards userId={user.id} householdId={household.id} />
      </Suspense>
+      <Suspense fallback={<Skeleton className="h-96 rounded-xl" />}>
+        <OverviewCard userId={user.id} householdId={household.id} searchParams={searchParams} />
+      </Suspense>
      <Suspense fallback={null}>
        <DailyPlanCard userId={user.id} householdId={household.id} />
      </Suspense>
@@ -0,0 +1,23 @@
+import { csvContext, csvPct, csvResponse, forbidden, unauthorized } from "@/features/reports/csv";
+import { getBudgetReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { csvMoney, toCsv } from "@/shared/csv";
+
+/** GET /raporlar/butce/csv?ay=YYYY-MM — kategori bazında limit ve gerçekleşen. */
+export async function GET(request: Request) {
+  const c = await csvContext(request);
+  if (!c) return unauthorized();
+  const r = await getBudgetReport(c.userId, c.householdId, c.month);
+  if (!r) return forbidden();
+  const csv = toCsv(
+    tr.reports.csvHeaders.budget,
+    r.lines.map((l) => [
+      l.path,
+      l.limitMinor === null ? "" : csvMoney(l.limitMinor),
+      csvMoney(l.actualMinor),
+      l.remainingMinor === null ? "" : csvMoney(l.remainingMinor),
+      csvPct(l.ratioBp === null ? null : Math.round(l.ratioBp / 10) / 10),
+    ]),
+  );
+  return csvResponse(csv, tr.reports.csvFiles.budget(r.month));
+}
@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { BudgetReportView } from "@/features/reports/components/budget-report-view";
+import {
+  CsvButton,
+  ToolsEnd,
+  MonthNav,
+  ReportFrame,
+  monthLabel,
+} from "@/features/reports/components/report-frame";
+import { getBudgetReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+import { budgetMonthSchema } from "@/shared/schemas/budget";
+
+const t = tr.reports.budget;
+export const metadata: Metadata = { title: t.title };
+
+/** /raporlar/butce?ay=YYYY-MM — bütçe ve gerçekleşen. */
+export default async function BudgetReportPage({ searchParams }: PageProps<"/raporlar/butce">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const ay = budgetMonthSchema.safeParse((await searchParams).ay);
+  const data = await getBudgetReport(user.id, household.id, ay.success ? ay.data : undefined);
+  if (!data) notFound();
+  return (
+    <ReportFrame
+      title={t.title}
+      description={t.description(monthLabel(data.month))}
+      tools={
+        <>
+          <MonthNav month={data.month} currentMonth={data.currentMonth} path="/raporlar/butce" />
+          <ToolsEnd>
+            <CsvButton href={`/raporlar/butce/csv?ay=${data.month}`} />
+          </ToolsEnd>
+        </>
+      }
+    >
+      <BudgetReportView data={data} />
+    </ReportFrame>
+  );
+}
@@ -0,0 +1,29 @@
+import { csvContext, csvPct, csvResponse, forbidden, unauthorized } from "@/features/reports/csv";
+import { getCategoryReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { csvMoney, toCsv } from "@/shared/csv";
+
+/** GET /raporlar/kategoriler/csv?ay=YYYY-MM — üst kategori ve alt kategori satırları. */
+export async function GET(request: Request) {
+  const c = await csvContext(request);
+  if (!c) return unauthorized();
+  const r = await getCategoryReport(c.userId, c.householdId, c.month);
+  if (!r) return forbidden();
+  const rows = r.breakdown.rows.flatMap((top) => [
+    top,
+    ...top.children.map((k) => ({ ...k, parent: top.name })),
+  ]);
+  const csv = toCsv(
+    tr.reports.csvHeaders.categories,
+    rows.map((x) => [
+      "parent" in x ? x.parent : x.name,
+      "parent" in x ? x.name : "",
+      csvMoney(x.amountMinor),
+      csvPct(x.sharePct),
+      csvMoney(x.prevMinor),
+      csvMoney(x.changeMinor),
+      csvPct(x.changePct),
+    ]),
+  );
+  return csvResponse(csv, tr.reports.csvFiles.categories(r.month));
+}
@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { CategoriesView } from "@/features/reports/components/categories-view";
+import {
+  CsvButton,
+  ToolsEnd,
+  MonthNav,
+  ReportFrame,
+  monthLabel,
+} from "@/features/reports/components/report-frame";
+import { getCategoryReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+import { budgetMonthSchema } from "@/shared/schemas/budget";
+
+const t = tr.reports.categories;
+export const metadata: Metadata = { title: t.title };
+
+/** /raporlar/kategoriler?ay=YYYY-MM — kategori dağılımı. */
+export default async function CategoryReportPage({
+  searchParams,
+}: PageProps<"/raporlar/kategoriler">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const ay = budgetMonthSchema.safeParse((await searchParams).ay);
+  const data = await getCategoryReport(user.id, household.id, ay.success ? ay.data : undefined);
+  if (!data) notFound();
+  return (
+    <ReportFrame
+      title={t.title}
+      description={t.description(monthLabel(data.month))}
+      tools={
+        <>
+          <MonthNav
+            month={data.month}
+            currentMonth={data.currentMonth}
+            path="/raporlar/kategoriler"
+          />
+          <ToolsEnd>
+            <CsvButton href={`/raporlar/kategoriler/csv?ay=${data.month}`} />
+          </ToolsEnd>
+        </>
+      }
+    >
+      {data.current ? <p className="text-xs text-muted-foreground">{t.partialMonth}</p> : null}
+      {data.includesHidden ? (
+        <p className="text-xs text-muted-foreground">{tr.reports.includesHidden}</p>
+      ) : null}
+      <CategoriesView data={data} />
+    </ReportFrame>
+  );
+}
@@ -0,0 +1,36 @@
+import { csvContext, csvPct, csvResponse, forbidden, unauthorized } from "@/features/reports/csv";
+import { getPeopleAccountsReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { csvMoney, toCsv } from "@/shared/csv";
+
+/** GET /raporlar/kisi-hesap/csv?ay=YYYY-MM&tablo=kisi|hesap */
+export async function GET(request: Request) {
+  const c = await csvContext(request);
+  if (!c) return unauthorized();
+  const r = await getPeopleAccountsReport(c.userId, c.householdId, c.month);
+  if (!r) return forbidden();
+  const h = tr.reports.csvHeaders;
+  if (c.params.get("tablo") === "hesap")
+    return csvResponse(
+      toCsv(
+        h.accounts,
+        r.accounts.map((a) => [
+          a.name,
+          csvMoney(a.incomeMinor),
+          csvMoney(a.expenseMinor),
+          csvMoney(a.transferInMinor),
+          csvMoney(a.transferOutMinor),
+          csvMoney(a.netMinor),
+          a.count,
+        ]),
+      ),
+      tr.reports.csvFiles.accounts(r.month),
+    );
+  return csvResponse(
+    toCsv(
+      h.people,
+      r.people.map((p) => [p.name, csvMoney(p.expenseMinor), p.count, csvPct(p.sharePct)]),
+    ),
+    tr.reports.csvFiles.people(r.month),
+  );
+}
@@ -0,0 +1,61 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { PeopleView } from "@/features/reports/components/people-view";
+import {
+  CsvButton,
+  ToolsEnd,
+  MonthNav,
+  ReportFrame,
+  monthLabel,
+} from "@/features/reports/components/report-frame";
+import { getPeopleAccountsReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+import { budgetMonthSchema } from "@/shared/schemas/budget";
+
+const t = tr.reports.people;
+export const metadata: Metadata = { title: t.title };
+
+/** /raporlar/kisi-hesap?ay=YYYY-MM — kişi bazlı harcama ve hesap bazlı hareket. */
+export default async function PeopleReportPage({
+  searchParams,
+}: PageProps<"/raporlar/kisi-hesap">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const ay = budgetMonthSchema.safeParse((await searchParams).ay);
+  const data = await getPeopleAccountsReport(
+    user.id,
+    household.id,
+    ay.success ? ay.data : undefined,
+  );
+  if (!data) notFound();
+  return (
+    <ReportFrame
+      title={t.title}
+      description={t.description(monthLabel(data.month))}
+      tools={
+        <>
+          <MonthNav
+            month={data.month}
+            currentMonth={data.currentMonth}
+            path="/raporlar/kisi-hesap"
+          />
+          <ToolsEnd>
+            <CsvButton
+              href={`/raporlar/kisi-hesap/csv?ay=${data.month}&tablo=kisi`}
+              label={t.csvPeople}
+            />
+            <CsvButton
+              href={`/raporlar/kisi-hesap/csv?ay=${data.month}&tablo=hesap`}
+              label={t.csvAccounts}
+            />
+          </ToolsEnd>
+        </>
+      }
+    >
+      {data.includesHidden ? (
+        <p className="text-xs text-muted-foreground">{tr.reports.includesHidden}</p>
+      ) : null}
+      <PeopleView data={data} />
+    </ReportFrame>
+  );
+}
@@ -0,0 +1,101 @@
+import { ChartPie, ChevronRight, Target, TrendingUp, Users } from "lucide-react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { PageHeader } from "@/components/page-header";
+import { monthLabel, formatPct } from "@/features/reports/components/report-frame";
+import { getCategoryReport, getTrendReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+
+const t = tr.reports;
+export const metadata: Metadata = { title: t.title };
+
+const REPORTS = [
+  { href: "/raporlar/kategoriler", key: "categories", icon: ChartPie },
+  { href: "/raporlar/trend", key: "trend", icon: TrendingUp },
+  { href: "/raporlar/kisi-hesap", key: "people", icon: Users },
+  { href: "/raporlar/butce", key: "budget", icon: Target },
+] as const;
+
+/** /raporlar — bu bütçe ayının özeti ve raporlar. */
+export default async function ReportsPage() {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const [trend, cats] = await Promise.all([
+    getTrendReport(user.id, household.id, 1),
+    getCategoryReport(user.id, household.id),
+  ]);
+  if (!trend || !cats) notFound();
+  const m = trend.months[0]!;
+  const top = cats.breakdown.rows.filter((r) => r.amountMinor > 0).slice(0, 3);
+  const stats = [
+    { label: t.hub.income, value: formatMoney(m.incomeMinor), tone: "text-income" },
+    { label: t.hub.expense, value: formatMoney(m.expenseMinor), tone: "text-expense" },
+    {
+      label: t.hub.net,
+      value: `${m.netMinor < 0 ? "−" : ""}${formatMoney(Math.abs(m.netMinor))}`,
+      tone: m.netMinor < 0 ? "text-expense" : undefined,
+    },
+    { label: t.hub.savings, value: formatPct(m.savingsPct) },
+  ];
+  return (
+    <>
+      <PageHeader title={t.title} description={t.description} />
+      <section aria-labelledby="hub-month" className="rounded-xl border bg-card p-4">
+        <h2 id="hub-month" className="text-sm font-medium">
+          {t.hub.thisMonth}: <span className="capitalize">{monthLabel(m.month)}</span>{" "}
+          <span className="font-normal text-muted-foreground">({t.trend.ongoing})</span>
+        </h2>
+        <dl className="mt-3 grid grid-cols-2 gap-3 md:grid-cols-4">
+          {stats.map((s) => (
+            <div key={s.label}>
+              <dt className="text-xs text-muted-foreground">{s.label}</dt>
+              <dd className={cn("text-lg font-semibold tabular-nums", s.tone)}>{s.value}</dd>
+            </div>
+          ))}
+        </dl>
+        {top.length ? (
+          <div className="mt-4">
+            <h3 className="text-xs text-muted-foreground">{t.hub.topCategories}</h3>
+            <ul className="mt-1 flex flex-col gap-1 text-sm">
+              {top.map((r) => (
+                <li key={r.id} className="flex justify-between gap-3">
+                  <span className="truncate">{r.name}</span>
+                  <span className="tabular-nums">
+                    {formatMoney(r.amountMinor)}{" "}
+                    <span className="text-muted-foreground">· {formatPct(r.sharePct)}</span>
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </section>
+      <ul className="grid gap-3 md:grid-cols-2">
+        {REPORTS.map((r) => {
+          const c = t.hub.cards[r.key];
+          const Icon = r.icon;
+          return (
+            <li key={r.href}>
+              <Link
+                href={r.href}
+                className="flex h-full items-start gap-3 rounded-xl border bg-card p-4 transition-colors hover:bg-accent/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+              >
+                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
+                  <Icon className="size-4.5 text-muted-foreground" aria-hidden />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block font-medium">{c.title}</span>
+                  <span className="block text-sm text-muted-foreground">{c.description}</span>
+                </span>
+                <ChevronRight className="mt-2 size-4 text-muted-foreground" aria-hidden />
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+}
@@ -0,0 +1,24 @@
+import { csvContext, csvPct, csvResponse, forbidden, unauthorized } from "@/features/reports/csv";
+import { getTrendReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { csvMoney, toCsv } from "@/shared/csv";
+import { todayIstanbul } from "@/shared/dates";
+
+/** GET /raporlar/trend/csv — son 12 bütçe ayı. */
+export async function GET(request: Request) {
+  const c = await csvContext(request);
+  if (!c) return unauthorized();
+  const r = await getTrendReport(c.userId, c.householdId);
+  if (!r) return forbidden();
+  const csv = toCsv(
+    tr.reports.csvHeaders.trend,
+    r.months.map((m) => [
+      m.month,
+      csvMoney(m.incomeMinor),
+      csvMoney(m.expenseMinor),
+      csvMoney(m.netMinor),
+      csvPct(m.savingsPct),
+    ]),
+  );
+  return csvResponse(csv, tr.reports.csvFiles.trend(todayIstanbul()));
+}
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { CsvButton, ToolsEnd, ReportFrame } from "@/features/reports/components/report-frame";
+import { TrendView } from "@/features/reports/components/trend-view";
+import { getTrendReport } from "@/features/reports/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+const t = tr.reports.trend;
+export const metadata: Metadata = { title: t.title };
+
+/** /raporlar/trend — son 12 bütçe ayı gelir, gider, net ve tasarruf oranı. */
+export default async function TrendReportPage() {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const data = await getTrendReport(user.id, household.id);
+  if (!data) notFound();
+  return (
+    <ReportFrame
+      title={t.title}
+      description={t.description}
+      tools={
+        <ToolsEnd>
+          <CsvButton href="/raporlar/trend/csv" />
+        </ToolsEnd>
+      }
+    >
+      <TrendView data={data} />
+    </ReportFrame>
+  );
+}