feat: Faz 14a - dashboard ana grafiği ve finans raporları

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -6,6 +6,22 @@ Biçim [Keep a Changelog](https://keepachangelog.com/tr-TR/1.1.0/) esas alınır
 
 ## [Yayınlanmamış]
 
+### Eklendi — Faz 14a: dashboard ana grafiği ve finans raporları
+
+- Dashboard ana çizgi grafiği: Planlanan gelir (yeşil), Planlanan gider / bütçe (mavi, kesikli), Gerçekleşen gider (kırmızı). Periyotlar: Haftalık (bu hafta, günlük), Aylık (bütçe ayı, günlük), Altı aylık ve Yıllık (bütçe ayları). Kümülatif / dönemsel görünüm; seçim URL'de (`?periyot=…&gorunum=…`). Bütçesi olmayan dönemde bütçe çizgisi boş, gelecek günlerde gerçekleşen çizilmez; grafiğin altında tablo görünümü.
+- Raporlar (`/raporlar`): bu bütçe ayının özeti (gelir, gider, net, tasarruf oranı, en çok harcanan kategoriler) ve rapor sayfaları; her raporda ay seçici ve CSV dışa aktarma (Türkçe Excel uyumlu).
+  - Kategori dağılımı: halka grafik ve tablo; üst kategori toplamları ve alt kategori kırılımı, toplam gidere oran (%14,3 gibi), önceki aya göre tutar ve yüzde değişim. Dilim renkleri kategorinin kendi rengi; 7'den fazla kategori "Diğer"de toplanır.
+  - Aylık trend: son 12 bütçe ayı gelir ve gider sütunları, ayrı grafikte tasarruf oranı (devam eden ay grafikte gösterilmez), net ve 12 ay toplamı.
+  - Kişi ve hesap bazlı: gideri kaydeden üyeye göre harcama ve pay; hesap başına gelir, gider, gelen/giden transfer ve net değişim. Başka üyelerin "yalnızca ben" hesapları hesap tablosunda hiç görünmez.
+  - Bütçe ve gerçekleşen: kategori bazında limit, gerçekleşen, kalan ve kullanım; son 6 ayın limit/gerçekleşen karşılaştırması.
+- Kurallar bütçeyle aynı: bütçe ayı, gerçekleşmiş işlemler, bölünmüş işlemler kalem bazında, taksit modu ve gizli hesap giderleri hane ayarına göre.
+- Testler: periyot aralıkları ve kümülatif dönüşüm, kategori payı/değişim/tasarruf oranı ve alt kategori kırılımı (birim); rapor toplamlarının bütçeyle tutarlılığı, gizli hesap görünürlüğü, dashboard periyotları (entegrasyon).
+
+### Değişti — Faz 14a
+
+- Dashboard'daki günlük plan kartı istatistik ve tabloya indi; kümülatif ay grafiği ana grafiğin "Aylık" görünümüne taşındı.
+- Bütçe, gelir planı ve günlük plan hesapları bağlam alan yardımcılara ayrıldı (raporlarda birden çok ay için yeniden kullanılır).
+
 ## [0.13.0] - 2026-11-06
 
 Faz 13: alışveriş listeleri, akıllı mağaza önerisi, alışveriş modu ve alışveriş sonrası giriş (13a ve 13b alt fazları).

src/app/(app)/dashboard/page.tsx

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

src/app/(app)/raporlar/butce/csv/route.ts

@@ -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));
+}

src/app/(app)/raporlar/butce/page.tsx

@@ -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>
+  );
+}

src/app/(app)/raporlar/kategoriler/csv/route.ts

@@ -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));
+}

src/app/(app)/raporlar/kategoriler/page.tsx

@@ -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>
+  );
+}

src/app/(app)/raporlar/kisi-hesap/csv/route.ts

@@ -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),
+  );
+}

src/app/(app)/raporlar/kisi-hesap/page.tsx

@@ -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>
+  );
+}

src/app/(app)/raporlar/page.tsx

@@ -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>
+    </>
+  );
+}

src/app/(app)/raporlar/trend/csv/route.ts

@@ -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()));
+}

src/app/(app)/raporlar/trend/page.tsx

@@ -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>
+  );
+}

src/components/layout/nav-config.ts

@@ -28,7 +28,7 @@ export type NavItem = {
 
 /** Şu an tamamlanmış en yüksek faz — sayfalar eklendikçe artar. */
 /** Alt fazlar ondalıkla: 6.1 = Faz 6a. */
-export const CURRENT_PHASE = 13.2;
+export const CURRENT_PHASE = 14.1;
 
 export const isAvailable = (item: NavItem) => item.phase <= CURRENT_PHASE;
 
@@ -44,7 +44,7 @@ export const MAIN_NAV: NavItem[] = [
   { href: "/stok", label: tr.nav.stock, icon: Package, phase: 11.1 },
   { href: "/magazalar", label: tr.nav.stores, icon: Store, phase: 12.1 },
   { href: "/alisveris", label: tr.nav.shopping, icon: ShoppingCart, phase: 13.1 },
-  { href: "/raporlar", label: tr.nav.reports, icon: ChartColumn, phase: 14 },
+  { href: "/raporlar", label: tr.nav.reports, icon: ChartColumn, phase: 14.1 },
   { href: "/ayarlar", label: tr.nav.settings, icon: Settings, phase: 5 },
 ];
 

src/features/budgets/components/daily-plan-view.tsx

@@ -1,17 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import { CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/components/ui/chart";
 import { tr } from "@/i18n/tr";
 import { cn } from "@/lib/utils";
 import { formatDate, formatMoney } from "@/shared/format";
@@ -19,24 +10,13 @@ import type { DailyPlanView as Data } from "../plan";
 
 const t = tr.budget.daily;
 const d = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);
-const dayFmt = new Intl.DateTimeFormat("tr-TR", {
-  day: "numeric",
-  month: "short",
-  timeZone: "Europe/Istanbul",
-});
 const monthFmt = new Intl.DateTimeFormat("tr-TR", {
   month: "long",
   year: "numeric",
   timeZone: "Europe/Istanbul",
 });
-const compact = new Intl.NumberFormat("tr-TR", { notation: "compact", maximumFractionDigits: 1 });
 const signed = (minor: number) => `${minor < 0 ? "−" : ""}${formatMoney(Math.abs(minor))}`;
 
-const config = {
-  planned: { label: t.cumPlanned, color: "var(--budget)" },
-  actual: { label: t.cumActual, color: "var(--expense)" },
-} satisfies ChartConfig;
-
 function Stat({
   label,
   value,
@@ -57,7 +37,7 @@ function Stat({
   );
 }
 
-/** Dashboard: ayın günlük planı, kümülatif grafik ve gelirle karşılaştırma. */
+/** Dashboard: ayın günlük planı ve gelirle karşılaştırma (grafik ana grafikte: Aylık). */
 export function DailyPlanView({ data }: { data: Data }) {
   const p = data.plan;
   if (!data.hasBudget) {
@@ -75,14 +55,6 @@ export function DailyPlanView({ data }: { data: Data }) {
       </Card>
     );
   }
-  const chart = p.days.map((day, i) => ({
-    date: day.date,
-    label: dayFmt.format(new Date(`${day.date}T12:00:00+03:00`)),
-    planned: day.cumPlannedMinor / 100,
-    // Gerçekleşen yalnızca bugüne kadar çizilir.
-    actual: p.todayIndex === -1 || i <= p.todayIndex ? day.cumActualMinor / 100 : null,
-  }));
-  const income = data.income.expectedMinor / 100;
   const nextDiff =
     data.next.budgetMinor === null ? null : data.next.expectedIncomeMinor - data.next.budgetMinor;
 
@@ -116,82 +88,6 @@ export function DailyPlanView({ data }: { data: Data }) {
           />
         </div>
 
-        <ChartContainer
-          config={config}
-          className="aspect-auto h-56 w-full"
-          aria-label={t.chartLabel}
-          role="img"
-        >
-          <LineChart data={chart} margin={{ left: 4, right: 12, top: 8 }}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="label"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={24}
-            />
-            <YAxis
-              tickLine={false}
-              axisLine={false}
-              width={48}
-              tickFormatter={(v: number) => compact.format(v)}
-            />
-            {income > 0 ? (
-              <ReferenceLine
-                y={income}
-                stroke="var(--income)"
-                strokeDasharray="4 4"
-                label={{
-                  value: `${t.income} ${compact.format(income)}`,
-                  position: "insideTopLeft",
-                  fill: "var(--muted-foreground)",
-                  fontSize: 11,
-                }}
-              />
-            ) : null}
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(_, payload) => {
-                    const date = payload?.[0]?.payload?.date as string | undefined;
-                    return date ? d(date) : "";
-                  }}
-                  formatter={(value, name) => (
-                    <div className="flex w-full items-center justify-between gap-3">
-                      <span className="text-muted-foreground">
-                        {config[name as keyof typeof config]?.label}
-                      </span>
-                      <span className="font-medium text-foreground tabular-nums">
-                        {formatMoney(Math.round(Number(value) * 100))}
-                      </span>
-                    </div>
-                  )}
-                />
-              }
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Line
-              dataKey="planned"
-              type="linear"
-              stroke="var(--color-planned)"
-              strokeWidth={2}
-              dot={false}
-              isAnimationActive={false}
-            />
-            <Line
-              dataKey="actual"
-              type="linear"
-              stroke="var(--color-actual)"
-              strokeWidth={2}
-              dot={false}
-              activeDot={{ r: 4 }}
-              connectNulls={false}
-              isAnimationActive={false}
-            />
-          </LineChart>
-        </ChartContainer>
-
         <p className="text-xs text-muted-foreground">
           {t.modes[data.mode]} {p.fixedMinor ? t.fixedNote(formatMoney(p.fixedMinor)) : ""}
         </p>

src/features/budgets/plan.ts

@@ -60,7 +60,7 @@ export type IncomePlan = {
   manual: { id: string; name: string; amountMinor: number }[];
 };
 
-async function incomePlan(ctx: Ctx, s: Settings, month: string): Promise<IncomePlan> {
+export async function incomePlan(ctx: Ctx, s: Settings, month: string): Promise<IncomePlan> {
   const { from, to } = budgetPeriod(month, s.startDay);
   const [docs, budget] = await Promise.all([
     TransactionModel.find(baseMatch(ctx, s, "income", from, to))
@@ -145,7 +145,7 @@ export async function saveIncomeItems(
 // --- Günlük plan ---
 
 /** Güne göre gider: sabit (düzenli/taksit; gerçekleşmiş + planlı) ve gerçekleşen (tümü). */
-async function expensesByDay(ctx: Ctx, s: Settings, from: string, to: string) {
+export async function expensesByDay(ctx: Ctx, s: Settings, from: string, to: string) {
   const pipeline: PipelineStage[] = [
     { $match: baseMatch(ctx, s, "expense", from, to) },
     {
@@ -182,6 +182,20 @@ async function expensesByDay(ctx: Ctx, s: Settings, from: string, to: string) {
   return { fixed, actual, variable };
 }
 
+/** Güne göre beklenen gelir (gerçekleşmiş + planlı gelir işlemleri). */
+export async function incomeByDay(ctx: Ctx, s: Settings, from: string, to: string) {
+  const rows = await TransactionModel.aggregate<{ _id: string; sum: number }>([
+    { $match: baseMatch(ctx, s, "income", from, to) },
+    {
+      $group: {
+        _id: { $dateToString: { date: "$date", format: "%Y-%m-%d", timezone: "Europe/Istanbul" } },
+        sum: { $sum: "$amountMinor" },
+      },
+    },
+  ]);
+  return new Map(rows.map((r) => [r._id, r.sum]));
+}
+
 export type DailyPlanView = {
   month: string;
   period: { from: string; to: string };
@@ -199,6 +213,40 @@ export type DailyPlanView = {
   canWrite: boolean;
 };
 
+/**
+ * Bir bütçe ayının günlük planı: sabit giderler kendi günlerine, değişken bütçe hane ayarına göre
+ * (eşit ya da önceki ayın örüntüsü) dağıtılır.
+ */
+export async function monthDailyPlan(
+  ctx: Ctx,
+  s: Settings,
+  month: string,
+  budgetMinor: number,
+  today = todayIstanbul(),
+): Promise<DailyPlan> {
+  const period = budgetPeriod(month, s.startDay);
+  const byDay = await expensesByDay(ctx, s, period.from, period.to);
+  let weights: number[] | undefined;
+  if (s.dailyMode === "previous_month_pattern") {
+    const prev = budgetPeriod(shiftMonth(month, -1), s.startDay);
+    const prevDays = await expensesByDay(ctx, s, prev.from, prev.to);
+    const len = daysBetween(prev.from, prev.to);
+    weights = patternWeights(
+      Array.from({ length: len }, (_, i) => prevDays.variable.get(addDays(prev.from, i)) ?? 0),
+      daysBetween(period.from, period.to),
+    );
+  }
+  return dailyPlan({
+    from: period.from,
+    to: period.to,
+    today,
+    budgetMinor,
+    fixedByDay: byDay.fixed,
+    actualByDay: byDay.actual,
+    weights,
+  });
+}
+
 /** Dashboard günlük planı: içinde bulunulan bütçe ayı. */
 export async function getDailyPlan(
   userId: string,
@@ -212,34 +260,14 @@ export async function getDailyPlan(
   const period = budgetPeriod(month, s.startDay);
   const nextMonth = shiftMonth(month, 1);
   const mode = s.dailyMode;
-  const [budget, byDay, income, nextIncome, nextBudget] = await Promise.all([
+  const [budget, income, nextIncome, nextBudget] = await Promise.all([
     getBudget(userId, householdId, month),
-    expensesByDay(ctx, s, period.from, period.to),
     incomePlan(ctx, s, month),
     incomePlan(ctx, s, nextMonth),
     getBudget(userId, householdId, nextMonth),
   ]);
   if (!budget) return null;
-
+  const plan = await monthDailyPlan(ctx, s, month, budget.totals.limitMinor, today);
-  let weights: number[] | undefined;
-  if (mode === "previous_month_pattern") {
-    const prev = budgetPeriod(shiftMonth(month, -1), s.startDay);
-    const prevDays = await expensesByDay(ctx, s, prev.from, prev.to);
-    const len = daysBetween(prev.from, prev.to);
-    weights = patternWeights(
-      Array.from({ length: len }, (_, i) => prevDays.variable.get(addDays(prev.from, i)) ?? 0),
-      daysBetween(period.from, period.to),
-    );
-  }
-  const plan = dailyPlan({
-    from: period.from,
-    to: period.to,
-    today,
-    budgetMinor: budget.totals.limitMinor,
-    fixedByDay: byDay.fixed,
-    actualByDay: byDay.actual,
-    weights,
-  });
   const forecastExpense = budget.totals.forecastMinor;
   return {
     month,

src/features/budgets/service.ts

@@ -191,7 +191,11 @@ export async function getBudget(
 ): Promise<BudgetView | null> {
   const ctx = await loadContext(userId, householdId, "viewer");
   if (!ctx) return null;
-  const s = await settingsOf(ctx.m.householdId);
+  return budgetFor(ctx, await settingsOf(ctx.m.householdId), month);
+}
+
+/** Bağlam ve ayarlar hazırken bütçe (raporlarda birden çok ay için yeniden yüklemeden). */
+export async function budgetFor(ctx: Ctx, s: Settings, month?: string): Promise<BudgetView> {
   const today = todayIstanbul();
   const currentMonth = periodOfDate(today, s.startDay);
   const m = month ?? currentMonth;

src/features/dashboard/components/overview-card.tsx

@@ -0,0 +1,24 @@
+import { OVERVIEW_PERIODS, type OverviewPeriod } from "@/shared/overview";
+import { getOverview } from "../service";
+import { OverviewChart } from "./overview-chart";
+
+type Search = Record<string, string | string[] | undefined>;
+
+const periodOf = (x: unknown): OverviewPeriod =>
+  OVERVIEW_PERIODS.includes(x as OverviewPeriod) ? (x as OverviewPeriod) : "month";
+
+/** Dashboard ana grafiği (sunucu): ?periyot=week|month|half|year&gorunum=kumulatif|donemsel. */
+export async function OverviewCard({
+  userId,
+  householdId,
+  searchParams,
+}: {
+  userId: string;
+  householdId: string;
+  searchParams: Promise<Search>;
+}) {
+  const q = await searchParams;
+  const data = await getOverview(userId, householdId, periodOf(q.periyot));
+  if (!data) return null;
+  return <OverviewChart data={data} view={q.gorunum === "donemsel" ? "periodic" : "cumulative"} />;
+}

src/features/dashboard/components/overview-chart.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import Link from "next/link";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatDate, formatMoney } from "@/shared/format";
+import { cumulative, OVERVIEW_PERIODS, type OverviewPeriod } from "@/shared/overview";
+import type { OverviewData } from "../service";
+
+const t = tr.dashboard.overview;
+export type OverviewView = "cumulative" | "periodic";
+
+const compact = new Intl.NumberFormat("tr-TR", { notation: "compact", maximumFractionDigits: 1 });
+const dayShort = new Intl.DateTimeFormat("tr-TR", { day: "numeric", month: "short" });
+const weekdayShort = new Intl.DateTimeFormat("tr-TR", { weekday: "short", day: "numeric" });
+const monthShort = new Intl.DateTimeFormat("tr-TR", { month: "short", year: "2-digit" });
+const monthLong = new Intl.DateTimeFormat("tr-TR", { month: "long", year: "numeric" });
+
+const config = {
+  plannedIncome: { label: t.series.plannedIncome, color: "var(--income)" },
+  budget: { label: t.series.budget, color: "var(--budget)" },
+  actual: { label: t.series.actual, color: "var(--expense)" },
+} satisfies ChartConfig;
+const SERIES = ["plannedIncome", "budget", "actual"] as const;
+
+const asDate = (key: string) =>
+  new Date(key.length === 7 ? `${key}-15T12:00:00+03:00` : `${key}T12:00:00+03:00`);
+
+function bucketLabel(key: string, period: OverviewPeriod) {
+  const d = asDate(key);
+  if (key.length === 7) return monthShort.format(d);
+  return period === "week" ? weekdayShort.format(d) : dayShort.format(d);
+}
+
+/** Bölüm 6.13 ana çizgi grafik: periyot seçici ve kümülatif / dönemsel görünüm (URL'de). */
+export function OverviewChart({ data, view }: { data: OverviewData; view: OverviewView }) {
+  const points = view === "cumulative" ? cumulative(data.points) : data.points;
+  const chart = points.map((p) => ({
+    key: p.key,
+    label: bucketLabel(p.key, data.period),
+    plannedIncome: p.plannedIncome === null ? null : p.plannedIncome / 100,
+    budget: p.budget === null ? null : p.budget / 100,
+    actual: p.actual === null ? null : p.actual / 100,
+  }));
+  const hasGap = data.points.some((p) => p.budget === null);
+  const href = (period: OverviewPeriod, v: OverviewView) =>
+    `?periyot=${period}&gorunum=${v === "cumulative" ? "kumulatif" : "donemsel"}`;
+  const rangeText =
+    data.range.granularity === "month"
+      ? `${monthLong.format(asDate(data.range.buckets[0]!))} – ${monthLong.format(asDate(data.range.buckets.at(-1)!))}`
+      : `${formatDate(asDate(data.range.from))} – ${formatDate(asDate(data.range.to))}`;
+  const pill = (active: boolean) =>
+    cn(
+      "rounded-md px-2.5 py-1 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+      active
+        ? "bg-background font-medium shadow-sm"
+        : "text-muted-foreground hover:text-foreground",
+    );
+
+  return (
+    <Card size="sm">
+      <CardHeader className="flex flex-wrap items-start gap-3">
+        <div className="min-w-0 flex-1">
+          <CardTitle className="text-base">{t.title}</CardTitle>
+          <CardDescription>{t.description(rangeText)}</CardDescription>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <nav aria-label={t.periodLabel} className="flex rounded-lg bg-muted p-0.5">
+            {OVERVIEW_PERIODS.map((p) => (
+              <Link
+                key={p}
+                href={href(p, view)}
+                scroll={false}
+                replace
+                aria-current={p === data.period ? "page" : undefined}
+                className={pill(p === data.period)}
+              >
+                {t.periods[p]}
+              </Link>
+            ))}
+          </nav>
+          <nav aria-label={t.viewLabel} className="flex rounded-lg bg-muted p-0.5">
+            {(["cumulative", "periodic"] as const).map((v) => (
+              <Link
+                key={v}
+                href={href(data.period, v)}
+                scroll={false}
+                replace
+                aria-current={v === view ? "page" : undefined}
+                className={pill(v === view)}
+              >
+                {t.views[v]}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <ChartContainer
+          config={config}
+          className="aspect-auto h-64 w-full"
+          aria-label={t.chartLabel}
+          role="img"
+        >
+          <LineChart data={chart} margin={{ left: 4, right: 12, top: 8 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="label"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={16}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              width={48}
+              tickFormatter={(v: number) => compact.format(v)}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(_, payload) => {
+                    const key = payload?.[0]?.payload?.key as string | undefined;
+                    if (!key) return "";
+                    return key.length === 7
+                      ? monthLong.format(asDate(key))
+                      : formatDate(asDate(key));
+                  }}
+                  formatter={(value, name) => (
+                    <div className="flex w-full items-center justify-between gap-3">
+                      <span className="text-muted-foreground">
+                        {config[name as keyof typeof config]?.label}
+                      </span>
+                      <span className="font-medium text-foreground tabular-nums">
+                        {formatMoney(Math.round(Number(value) * 100))}
+                      </span>
+                    </div>
+                  )}
+                />
+              }
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            {SERIES.map((k) => (
+              <Line
+                key={k}
+                dataKey={k}
+                type="linear"
+                stroke={`var(--color-${k})`}
+                strokeWidth={2}
+                strokeDasharray={k === "budget" ? "6 3" : undefined}
+                dot={
+                  data.range.granularity === "month" || data.period === "week" ? { r: 3 } : false
+                }
+                activeDot={{ r: 5 }}
+                connectNulls={false}
+                isAnimationActive={false}
+              />
+            ))}
+          </LineChart>
+        </ChartContainer>
+        {hasGap ? <p className="text-xs text-muted-foreground">{t.noBudget}</p> : null}
+        <details className="text-sm">
+          <summary className="cursor-pointer text-xs text-muted-foreground">{t.table}</summary>
+          <div className="mt-2 max-h-80 overflow-y-auto">
+            <table className="w-full text-right tabular-nums">
+              <thead className="sticky top-0 bg-card text-xs text-muted-foreground">
+                <tr>
+                  <th className="py-1 text-left font-normal">{t.bucket[data.range.granularity]}</th>
+                  {SERIES.map((k) => (
+                    <th key={k} className="py-1 font-normal">
+                      {t.series[k]}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {points.map((p) => (
+                  <tr key={p.key}>
+                    <td className="py-1 text-left">
+                      {p.key.length === 7
+                        ? monthLong.format(asDate(p.key))
+                        : formatDate(asDate(p.key))}
+                    </td>
+                    {SERIES.map((k) => (
+                      <td key={k} className="py-1">
+                        {p[k] === null ? "—" : formatMoney(p[k])}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </details>
+      </CardContent>
+    </Card>
+  );
+}

src/features/dashboard/service.ts

@@ -0,0 +1,83 @@
+import "server-only";
+import { budgetFor, settingsOf } from "@/features/budgets/service";
+import { incomeByDay, incomePlan, monthDailyPlan } from "@/features/budgets/plan";
+import { loadContext } from "@/features/transactions/service";
+import { budgetPeriod, periodOfDate } from "@/shared/budget";
+import { todayIstanbul } from "@/shared/dates";
+import {
+  overviewRange,
+  type OverviewPeriod,
+  type OverviewPoint,
+  type OverviewRange,
+} from "@/shared/overview";
+
+/**
+ * Dashboard ana grafiği (Bölüm 6.13). Bütçe ve gelir planı motorlarıyla aynı kurallar: bütçe ayı,
+ * taksit modu ve gizli hesap ayarı.
+ *
+ * Aylık noktalar: beklenen gelir (gerçekleşen + planlı + elle), bütçe toplamı (bütçe yoksa boş),
+ * gerçekleşen gider. Günlük noktalar: o günün gelirleri (elle eklenen beklenen gelir dönemin ilk
+ * gününe), günlük plan payı, o günün gerçekleşen gideri; gelecek günlerde gerçekleşen boş.
+ */
+export type OverviewData = {
+  period: OverviewPeriod;
+  range: OverviewRange;
+  points: OverviewPoint[];
+  today: string;
+};
+
+export async function getOverview(
+  userId: string,
+  householdId: string,
+  period: OverviewPeriod,
+): Promise<OverviewData | null> {
+  const ctx = await loadContext(userId, householdId, "viewer");
+  if (!ctx) return null;
+  const s = await settingsOf(ctx.m.householdId);
+  const today = todayIstanbul();
+  const range = overviewRange(period, today, s.startDay);
+
+  if (range.granularity === "month") {
+    const points = await Promise.all(
+      range.buckets.map(async (month) => {
+        const [budget, income] = await Promise.all([
+          budgetFor(ctx, s, month),
+          incomePlan(ctx, s, month),
+        ]);
+        return {
+          key: month,
+          plannedIncome: income.expectedMinor,
+          budget: budget.hasBudget ? budget.totals.limitMinor : null,
+          actual: budget.totals.actualMinor,
+        };
+      }),
+    );
+    return { period, range, points, today };
+  }
+
+  // Günlük: aralığın dokunduğu bütçe ayları (hafta iki aya yayılabilir).
+  const months = [...new Set([range.from, range.to].map((d) => periodOfDate(d, s.startDay)))];
+  const planned = new Map<string, number | null>();
+  const actual = new Map<string, number>();
+  const income = new Map<string, number>();
+  for (const month of months) {
+    const [budget, plan] = await Promise.all([budgetFor(ctx, s, month), incomePlan(ctx, s, month)]);
+    const dp = await monthDailyPlan(ctx, s, month, budget.totals.limitMinor, today);
+    for (const d of dp.days) {
+      planned.set(d.date, budget.hasBudget ? d.plannedMinor : null);
+      actual.set(d.date, d.actualMinor);
+    }
+    const first = budgetPeriod(month, s.startDay).from;
+    if (plan.manualMinor) income.set(first, (income.get(first) ?? 0) + plan.manualMinor);
+  }
+  for (const [d, v] of await incomeByDay(ctx, s, range.from, range.to))
+    income.set(d, (income.get(d) ?? 0) + v);
+
+  const points = range.buckets.map((d) => ({
+    key: d,
+    plannedIncome: income.get(d) ?? 0,
+    budget: planned.get(d) ?? null,
+    actual: d <= today ? (actual.get(d) ?? 0) : null,
+  }));
+  return { period, range, points, today };
+}

src/features/reports/components/budget-report-view.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+import type { BudgetReport } from "../service";
+import { monthLabel, monthShort } from "./report-frame";
+
+const t = tr.reports.budget;
+const compact = new Intl.NumberFormat("tr-TR", { notation: "compact", maximumFractionDigits: 1 });
+const ratio = (bp: number | null) => (bp === null ? "—" : `%${Math.round(bp / 100)}`);
+const STATUS_TONE: Record<string, string> = {
+  ok: "bg-income",
+  warning: "bg-amber-500",
+  over: "bg-expense",
+  none: "bg-muted-foreground",
+};
+
+const config = {
+  limit: { label: t.limit, color: "var(--budget)" },
+  actual: { label: t.actual, color: "var(--expense)" },
+} satisfies ChartConfig;
+
+export function BudgetReportView({ data }: { data: BudgetReport }) {
+  const chart = data.history.map((h) => ({
+    month: h.month,
+    label: monthShort(h.month),
+    limit: h.limitMinor === null ? null : h.limitMinor / 100,
+    actual: h.actualMinor / 100,
+  }));
+  const { totals, hasBudget } = data.budget;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {!hasBudget ? <p className="text-sm text-muted-foreground">{t.noBudget}</p> : null}
+      <div className="overflow-x-auto rounded-xl border bg-card">
+        <table className="w-full min-w-[34rem] text-sm tabular-nums">
+          <thead className="border-b text-xs text-muted-foreground">
+            <tr>
+              <th className="px-3 py-2 text-left font-normal">{t.category}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.limit}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.actual}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.remaining}</th>
+              <th className="w-40 px-3 py-2 text-left font-normal">{t.ratio}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {data.lines.map((l) => (
+              <tr key={l.categoryId} className={cn(l.depth === 0 && "font-medium")}>
+                <td className="py-1.5 pr-3" style={{ paddingLeft: `${0.75 + l.depth * 1.25}rem` }}>
+                  {l.name}
+                </td>
+                <td className="px-3 py-1.5 text-right">
+                  {l.limitMinor === null ? (
+                    <span className="text-xs font-normal text-muted-foreground">
+                      {l.covered ? t.covered : "—"}
+                    </span>
+                  ) : (
+                    formatMoney(l.limitMinor)
+                  )}
+                </td>
+                <td className="px-3 py-1.5 text-right">{formatMoney(l.actualMinor)}</td>
+                <td
+                  className={cn(
+                    "px-3 py-1.5 text-right",
+                    (l.remainingMinor ?? 0) < 0 && "text-expense",
+                  )}
+                >
+                  {l.remainingMinor === null
+                    ? "—"
+                    : `${l.remainingMinor < 0 ? "−" : ""}${formatMoney(Math.abs(l.remainingMinor))}`}
+                </td>
+                <td className="px-3 py-1.5">
+                  {l.ratioBp === null ? (
+                    <span className="text-muted-foreground">—</span>
+                  ) : (
+                    <span className="flex items-center gap-2">
+                      <span
+                        className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted"
+                        aria-hidden
+                      >
+                        <span
+                          className={cn("block h-full rounded-full", STATUS_TONE[l.status])}
+                          style={{ width: `${Math.min(100, l.ratioBp / 100)}%` }}
+                        />
+                      </span>
+                      <span className="w-12 text-right text-xs">{ratio(l.ratioBp)}</span>
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+          <tfoot className="border-t font-medium">
+            <tr>
+              <td className="px-3 py-2">{tr.reports.categories.total}</td>
+              <td className="px-3 py-2 text-right">
+                {hasBudget ? formatMoney(totals.limitMinor) : "—"}
+              </td>
+              <td className="px-3 py-2 text-right">{formatMoney(totals.actualMinor)}</td>
+              <td
+                className={cn("px-3 py-2 text-right", totals.remainingMinor < 0 && "text-expense")}
+              >
+                {hasBudget
+                  ? `${totals.remainingMinor < 0 ? "−" : ""}${formatMoney(Math.abs(totals.remainingMinor))}`
+                  : "—"}
+              </td>
+              <td className="px-3 py-2 text-left text-xs">{ratio(totals.ratioBp)}</td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+
+      <section className="rounded-xl border bg-card p-4" aria-labelledby="bh-h">
+        <h2 id="bh-h" className="mb-2 text-sm font-medium">
+          {t.historyTitle}
+        </h2>
+        <ChartContainer
+          config={config}
+          className="aspect-auto h-56 w-full"
+          role="img"
+          aria-label={t.historyChartLabel}
+        >
+          <BarChart data={chart} margin={{ left: 4, right: 8, top: 8 }} barGap={2}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              width={48}
+              tickFormatter={(v: number) => compact.format(v)}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(_, payload) => {
+                    const m = payload?.[0]?.payload?.month as string | undefined;
+                    return m ? monthLabel(m) : "";
+                  }}
+                  formatter={(value, name) => (
+                    <div className="flex w-full items-center justify-between gap-3">
+                      <span className="text-muted-foreground">
+                        {config[name as keyof typeof config]?.label}
+                      </span>
+                      <span className="font-medium text-foreground tabular-nums">
+                        {formatMoney(Math.round(Number(value) * 100))}
+                      </span>
+                    </div>
+                  )}
+                />
+              }
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="limit"
+              fill="var(--color-limit)"
+              radius={[4, 4, 0, 0]}
+              isAnimationActive={false}
+            />
+            <Bar
+              dataKey="actual"
+              fill="var(--color-actual)"
+              radius={[4, 4, 0, 0]}
+              isAnimationActive={false}
+            />
+          </BarChart>
+        </ChartContainer>
+        <table className="mt-3 w-full text-sm tabular-nums">
+          <thead className="text-xs text-muted-foreground">
+            <tr>
+              <th className="py-1 text-left font-normal">{t.month}</th>
+              <th className="py-1 text-right font-normal">{t.limit}</th>
+              <th className="py-1 text-right font-normal">{t.actual}</th>
+              <th className="py-1 text-right font-normal">{t.ratio}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {data.history.map((h) => (
+              <tr key={h.month}>
+                <td className="py-1 capitalize">{monthLabel(h.month)}</td>
+                <td className="py-1 text-right">
+                  {h.limitMinor === null ? t.noLimit : formatMoney(h.limitMinor)}
+                </td>
+                <td className="py-1 text-right">{formatMoney(h.actualMinor)}</td>
+                <td className="py-1 text-right">{ratio(h.ratioBp)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+    </div>
+  );
+}

src/features/reports/components/categories-view.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { Cell, Pie, PieChart } from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { IconBadge } from "@/components/appearance/swatch";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+import type { CategoryReport } from "../service";
+import { Change, formatPct } from "./report-frame";
+
+const t = tr.reports.categories;
+/** Halkada en fazla bu kadar dilim; kalanlar "Diğer". */
+const MAX_SLICES = 7;
+
+export function CategoriesView({ data }: { data: CategoryReport }) {
+  const { breakdown, appearance } = data;
+  const positive = breakdown.rows.filter((r) => r.amountMinor > 0);
+  const head = positive.slice(0, MAX_SLICES);
+  const rest = positive.slice(MAX_SLICES);
+  const slices = [
+    ...head.map((r) => ({
+      key: r.id,
+      name: r.name,
+      value: r.amountMinor / 100,
+      share: r.sharePct,
+      color: `var(--swatch-${appearance[r.id]?.color ?? "slate"})`,
+    })),
+    ...(rest.length
+      ? [
+          {
+            key: "__other__",
+            name: t.other(rest.length),
+            value: rest.reduce((a, r) => a + r.amountMinor, 0) / 100,
+            share: Math.round(rest.reduce((a, r) => a + r.sharePct, 0) * 10) / 10,
+            color: "var(--muted-foreground)",
+          },
+        ]
+      : []),
+  ];
+  const config = Object.fromEntries(
+    slices.map((s) => [s.key, { label: s.name, color: s.color }]),
+  ) satisfies ChartConfig;
+
+  if (breakdown.totalMinor === 0 && breakdown.rows.length === 0)
+    return (
+      <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+        {tr.reports.noData}
+      </p>
+    );
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:items-start">
+      <div className="rounded-xl border bg-card p-4">
+        <div className="relative">
+          <ChartContainer
+            config={config}
+            className="mx-auto aspect-square w-full max-w-64"
+            role="img"
+            aria-label={t.chartLabel}
+          >
+            <PieChart>
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    hideLabel
+                    nameKey="key"
+                    formatter={(value, _name, item) => (
+                      <div className="flex w-full items-center justify-between gap-3">
+                        <span className="text-muted-foreground">{item.payload.name}</span>
+                        <span className="font-medium text-foreground tabular-nums">
+                          {formatMoney(Math.round(Number(value) * 100))} ·{" "}
+                          {formatPct(item.payload.share)}
+                        </span>
+                      </div>
+                    )}
+                  />
+                }
+              />
+              <Pie
+                data={slices}
+                dataKey="value"
+                nameKey="key"
+                innerRadius="62%"
+                outerRadius="100%"
+                stroke="var(--card)"
+                strokeWidth={2}
+                isAnimationActive={false}
+              >
+                {slices.map((s) => (
+                  <Cell key={s.key} fill={s.color} />
+                ))}
+              </Pie>
+            </PieChart>
+          </ChartContainer>
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+            <span className="text-xs text-muted-foreground">{t.total}</span>
+            <span className="text-lg font-semibold tabular-nums">
+              {formatMoney(breakdown.totalMinor)}
+            </span>
+          </div>
+        </div>
+        <ul className="mt-4 flex flex-col gap-1.5 text-sm">
+          {slices.map((s) => (
+            <li key={s.key} className="flex items-center gap-2">
+              <span
+                aria-hidden
+                className="size-2.5 shrink-0 rounded-sm"
+                style={{ background: s.color }}
+              />
+              <span className="min-w-0 flex-1 truncate">{s.name}</span>
+              <span className="text-muted-foreground tabular-nums">{formatPct(s.share)}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="overflow-x-auto rounded-xl border bg-card">
+        <table className="w-full min-w-[34rem] text-sm">
+          <thead className="border-b text-xs text-muted-foreground">
+            <tr>
+              <th className="px-3 py-2 text-left font-normal">{t.category}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.amount}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.share}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.previous}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.change}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {breakdown.rows.map((r) => {
+              const a = appearance[r.id];
+              return [
+                <tr key={r.id} className="border-t bg-muted/20 font-medium">
+                  <td className="px-3 py-2">
+                    <span className="flex items-center gap-2">
+                      {a ? <IconBadge icon={a.icon} color={a.color} size="sm" /> : null}
+                      {r.name}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-right tabular-nums">
+                    {formatMoney(r.amountMinor)}
+                  </td>
+                  <td className="px-3 py-2 text-right tabular-nums">{formatPct(r.sharePct)}</td>
+                  <td className="px-3 py-2 text-right text-muted-foreground tabular-nums">
+                    {formatMoney(r.prevMinor)}
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    <Change minor={r.changeMinor} pct={r.changePct} format={formatMoney} />
+                  </td>
+                </tr>,
+                ...(r.children.length && r.ownMinor
+                  ? [
+                      <tr key={`${r.id}-own`} className="text-muted-foreground">
+                        <td className="py-1.5 pr-3 pl-10 italic">{t.own}</td>
+                        <td className="px-3 py-1.5 text-right tabular-nums">
+                          {formatMoney(r.ownMinor)}
+                        </td>
+                        <td colSpan={3} />
+                      </tr>,
+                    ]
+                  : []),
+                ...r.children.map((c) => (
+                  <tr key={c.id}>
+                    <td className={cn("py-1.5 pr-3", c.depth > 1 ? "pl-14" : "pl-10")}>{c.name}</td>
+                    <td className="px-3 py-1.5 text-right tabular-nums">
+                      {formatMoney(c.amountMinor)}
+                    </td>
+                    <td className="px-3 py-1.5 text-right text-muted-foreground tabular-nums">
+                      {formatPct(c.sharePct)}
+                    </td>
+                    <td className="px-3 py-1.5 text-right text-muted-foreground tabular-nums">
+                      {formatMoney(c.prevMinor)}
+                    </td>
+                    <td className="px-3 py-1.5 text-right">
+                      <Change minor={c.changeMinor} pct={c.changePct} format={formatMoney} />
+                    </td>
+                  </tr>
+                )),
+              ];
+            })}
+          </tbody>
+          <tfoot className="border-t font-medium">
+            <tr>
+              <td className="px-3 py-2">{t.total}</td>
+              <td className="px-3 py-2 text-right tabular-nums">
+                {formatMoney(breakdown.totalMinor)}
+              </td>
+              <td className="px-3 py-2 text-right tabular-nums">%100</td>
+              <td className="px-3 py-2 text-right text-muted-foreground tabular-nums">
+                {formatMoney(breakdown.prevTotalMinor)}
+              </td>
+              <td className="px-3 py-2 text-right">
+                <Change
+                  minor={breakdown.totalMinor - breakdown.prevTotalMinor}
+                  pct={
+                    breakdown.prevTotalMinor
+                      ? Math.round(
+                          ((breakdown.totalMinor - breakdown.prevTotalMinor) * 1000) /
+                            breakdown.prevTotalMinor,
+                        ) / 10
+                      : null
+                  }
+                  format={formatMoney}
+                />
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  );
+}

src/features/reports/components/people-view.tsx

@@ -0,0 +1,108 @@
+import { Badge } from "@/components/ui/badge";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+import type { PeopleAccountsReport } from "../service";
+import { formatPct } from "./report-frame";
+
+const t = tr.reports.people;
+const signed = (n: number) => `${n > 0 ? "+" : n < 0 ? "−" : ""}${formatMoney(Math.abs(n))}`;
+
+/** Kişi bazlı harcama (pay çubuğu + tablo) ve hesap bazlı hareket tablosu. */
+export function PeopleView({ data }: { data: PeopleAccountsReport }) {
+  return (
+    <div className="flex flex-col gap-6">
+      <section aria-labelledby="people-h" className="flex flex-col gap-2">
+        <div>
+          <h2 id="people-h" className="font-medium">
+            {t.peopleTitle}
+          </h2>
+          <p className="text-xs text-muted-foreground">{t.peopleHint}</p>
+        </div>
+        {data.people.length ? (
+          <ul className="divide-y rounded-xl border bg-card">
+            {data.people.map((p) => (
+              <li key={p.userId} className="flex flex-col gap-1.5 p-3 text-sm">
+                <div className="flex items-baseline gap-3">
+                  <span className="min-w-0 flex-1 truncate font-medium">{p.name}</span>
+                  <span className="text-xs text-muted-foreground tabular-nums">
+                    {p.count} {t.count.toLocaleLowerCase("tr-TR")}
+                  </span>
+                  <span className="w-24 text-right tabular-nums">
+                    {formatMoney(p.expenseMinor)}
+                  </span>
+                  <span className="w-14 text-right text-muted-foreground tabular-nums">
+                    {formatPct(p.sharePct)}
+                  </span>
+                </div>
+                <div className="h-1.5 overflow-hidden rounded-full bg-muted" aria-hidden>
+                  <div
+                    className="h-full rounded-full bg-expense"
+                    style={{ width: `${p.sharePct}%` }}
+                  />
+                </div>
+              </li>
+            ))}
+            <li className="flex justify-between p-3 text-sm font-medium">
+              <span>{tr.reports.categories.total}</span>
+              <span className="tabular-nums">{formatMoney(data.peopleTotalMinor)}</span>
+            </li>
+          </ul>
+        ) : (
+          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+            {tr.reports.noData}
+          </p>
+        )}
+      </section>
+
+      <section aria-labelledby="acc-h" className="flex flex-col gap-2">
+        <div>
+          <h2 id="acc-h" className="font-medium">
+            {t.accountsTitle}
+          </h2>
+          <p className="text-xs text-muted-foreground">{t.accountsHint}</p>
+        </div>
+        <div className="overflow-x-auto rounded-xl border bg-card">
+          <table className="w-full min-w-[40rem] text-sm tabular-nums">
+            <thead className="border-b text-xs text-muted-foreground">
+              <tr>
+                <th className="px-3 py-2 text-left font-normal">{t.account}</th>
+                <th className="px-3 py-2 text-right font-normal">{t.income}</th>
+                <th className="px-3 py-2 text-right font-normal">{t.expense}</th>
+                <th className="px-3 py-2 text-right font-normal">{t.transferIn}</th>
+                <th className="px-3 py-2 text-right font-normal">{t.transferOut}</th>
+                <th className="px-3 py-2 text-right font-normal">{t.net}</th>
+                <th className="px-3 py-2 text-right font-normal">{t.count}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {data.accounts.map((a) => (
+                <tr key={a.id} className={cn(a.count === 0 && "text-muted-foreground")}>
+                  <td className="px-3 py-1.5">
+                    <span className="flex items-center gap-2">
+                      {a.name}
+                      {a.archived ? <Badge variant="secondary">{t.archived}</Badge> : null}
+                    </span>
+                  </td>
+                  <td className="px-3 py-1.5 text-right">{formatMoney(a.incomeMinor)}</td>
+                  <td className="px-3 py-1.5 text-right">{formatMoney(a.expenseMinor)}</td>
+                  <td className="px-3 py-1.5 text-right">{formatMoney(a.transferInMinor)}</td>
+                  <td className="px-3 py-1.5 text-right">{formatMoney(a.transferOutMinor)}</td>
+                  <td
+                    className={cn(
+                      "px-3 py-1.5 text-right font-medium",
+                      a.netMinor < 0 ? "text-expense" : a.netMinor > 0 ? "text-income" : "",
+                    )}
+                  >
+                    {signed(a.netMinor)}
+                  </td>
+                  <td className="px-3 py-1.5 text-right">{a.count}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}

src/features/reports/components/report-frame.tsx

@@ -0,0 +1,127 @@
+import { ArrowLeft, ChevronLeft, ChevronRight, Download } from "lucide-react";
+import Link from "next/link";
+import { PageHeader } from "@/components/page-header";
+import { Button } from "@/components/ui/button";
+import { tr } from "@/i18n/tr";
+import { shiftMonth } from "@/shared/budget";
+
+const t = tr.reports;
+
+const monthFmt = new Intl.DateTimeFormat("tr-TR", { month: "long", year: "numeric" });
+export const monthLabel = (month: string) =>
+  monthFmt.format(new Date(`${month}-15T12:00:00+03:00`));
+const monthShortFmt = new Intl.DateTimeFormat("tr-TR", { month: "short", year: "2-digit" });
+export const monthShort = (month: string) =>
+  monthShortFmt.format(new Date(`${month}-15T12:00:00+03:00`));
+
+/** 14,3 → "%14,3"; −20 → "−%20"; null → "—". */
+export function formatPct(n: number | null): string {
+  if (n === null) return "—";
+  const abs = Math.abs(n).toLocaleString("tr-TR", { maximumFractionDigits: 1 });
+  return n < 0 ? `−%${abs}` : `%${abs}`;
+}
+
+/** Önceki / sonraki bütçe ayı (?ay=). Gelecek aya gidilmez. */
+export function MonthNav({
+  month,
+  currentMonth,
+  path,
+}: {
+  month: string;
+  currentMonth: string;
+  path: string;
+}) {
+  const next = shiftMonth(month, 1);
+  return (
+    <nav aria-label={t.currentMonth} className="flex items-center gap-1">
+      <Button variant="outline" size="icon-sm" asChild>
+        <Link href={`${path}?ay=${shiftMonth(month, -1)}`} aria-label={t.prevMonth}>
+          <ChevronLeft />
+        </Link>
+      </Button>
+      <span className="min-w-36 text-center text-sm font-medium capitalize">
+        {monthLabel(month)}
+      </span>
+      {next <= currentMonth ? (
+        <Button variant="outline" size="icon-sm" asChild>
+          <Link href={`${path}?ay=${next}`} aria-label={t.nextMonth}>
+            <ChevronRight />
+          </Link>
+        </Button>
+      ) : (
+        <Button variant="outline" size="icon-sm" disabled aria-label={t.nextMonth}>
+          <ChevronRight />
+        </Button>
+      )}
+      {month !== currentMonth ? (
+        <Button variant="ghost" size="sm" asChild>
+          <Link href={path}>{t.currentMonth}</Link>
+        </Button>
+      ) : null}
+    </nav>
+  );
+}
+
+/** Rapor sayfası çerçevesi: geri bağlantısı, başlık, araçlar (ay seçici, CSV). */
+export function ReportFrame({
+  title,
+  description,
+  tools,
+  children,
+}: {
+  title: string;
+  description: React.ReactNode;
+  tools?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
+        <Link href="/raporlar">
+          <ArrowLeft />
+          {t.back}
+        </Link>
+      </Button>
+      <PageHeader title={title} description={description} />
+      {tools ? <div className="flex flex-wrap items-center gap-2">{tools}</div> : null}
+      {children}
+    </div>
+  );
+}
+
+export function CsvButton({ href, label }: { href: string; label?: string }) {
+  return (
+    <Button variant="outline" size="sm" asChild>
+      <a href={href} download>
+        <Download />
+        {label ?? t.csv}
+      </a>
+    </Button>
+  );
+}
+
+/** Araç çubuğunun sağ tarafı (CSV düğmeleri). */
+export function ToolsEnd({ children }: { children: React.ReactNode }) {
+  return <div className="ml-auto flex flex-wrap gap-2">{children}</div>;
+}
+
+/** İşaretli tutar ve yüzde değişim; renk tek başına anlam taşımaz (işaret metinde). */
+export function Change({
+  minor,
+  pct,
+  format,
+}: {
+  minor: number;
+  pct: number | null;
+  format: (n: number) => string;
+}) {
+  if (minor === 0) return <span className="text-muted-foreground tabular-nums">0</span>;
+  const up = minor > 0;
+  return (
+    <span className={`tabular-nums ${up ? "text-expense" : "text-income"}`}>
+      {up ? "+" : "−"}
+      {format(Math.abs(minor))}
+      {pct !== null ? ` (${up ? "+" : "−"}%${Math.abs(pct).toLocaleString("tr-TR")})` : ""}
+    </span>
+  );
+}

src/features/reports/components/trend-view.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+import type { TrendReport } from "../service";
+import { monthLabel, monthShort, formatPct } from "./report-frame";
+
+const t = tr.reports.trend;
+const compact = new Intl.NumberFormat("tr-TR", { notation: "compact", maximumFractionDigits: 1 });
+
+const barConfig = {
+  income: { label: t.income, color: "var(--income)" },
+  expense: { label: t.expense, color: "var(--expense)" },
+} satisfies ChartConfig;
+const rateConfig = { rate: { label: t.savings, color: "var(--budget)" } } satisfies ChartConfig;
+
+export function TrendView({ data }: { data: TrendReport }) {
+  const chart = data.months.map((m) => ({
+    month: m.month,
+    label: monthShort(m.month),
+    income: m.incomeMinor / 100,
+    expense: m.expenseMinor / 100,
+    // Devam eden ayın oranı (maaş henüz yatmamış olabilir) ölçeği bozmasın: grafikte yok.
+    rate: m.month === data.currentMonth ? null : m.savingsPct,
+  }));
+  const moneyTip = (
+    <ChartTooltipContent
+      labelFormatter={(_, payload) => {
+        const m = payload?.[0]?.payload?.month as string | undefined;
+        return m ? monthLabel(m) : "";
+      }}
+      formatter={(value, name) => (
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-muted-foreground">
+            {barConfig[name as keyof typeof barConfig]?.label}
+          </span>
+          <span className="font-medium text-foreground tabular-nums">
+            {formatMoney(Math.round(Number(value) * 100))}
+          </span>
+        </div>
+      )}
+    />
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-xl border bg-card p-4">
+        <ChartContainer
+          config={barConfig}
+          className="aspect-auto h-64 w-full"
+          role="img"
+          aria-label={t.chartLabel}
+        >
+          <BarChart data={chart} margin={{ left: 4, right: 8, top: 8 }} barGap={2}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              width={48}
+              tickFormatter={(v: number) => compact.format(v)}
+            />
+            <ChartTooltip content={moneyTip} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="income"
+              fill="var(--color-income)"
+              radius={[4, 4, 0, 0]}
+              isAnimationActive={false}
+            />
+            <Bar
+              dataKey="expense"
+              fill="var(--color-expense)"
+              radius={[4, 4, 0, 0]}
+              isAnimationActive={false}
+            />
+          </BarChart>
+        </ChartContainer>
+      </div>
+
+      <div className="rounded-xl border bg-card p-4">
+        <h2 className="text-sm font-medium">{t.rateTitle}</h2>
+        <p className="mb-2 text-xs text-muted-foreground">
+          {t.rateHint} {t.partialHint}
+        </p>
+        <ChartContainer
+          config={rateConfig}
+          className="aspect-auto h-40 w-full"
+          role="img"
+          aria-label={t.rateChartLabel}
+        >
+          <LineChart data={chart} margin={{ left: 4, right: 8, top: 8 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              width={40}
+              tickFormatter={(v: number) => `%${v}`}
+            />
+            <ReferenceLine y={0} stroke="var(--border)" />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(_, payload) => {
+                    const m = payload?.[0]?.payload?.month as string | undefined;
+                    return m ? monthLabel(m) : "";
+                  }}
+                  formatter={(value) => (
+                    <span className="font-medium text-foreground tabular-nums">
+                      {formatPct(Number(value))}
+                    </span>
+                  )}
+                />
+              }
+            />
+            <Line
+              dataKey="rate"
+              stroke="var(--color-rate)"
+              strokeWidth={2}
+              dot={{ r: 3 }}
+              connectNulls={false}
+              isAnimationActive={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </div>
+
+      <div className="overflow-x-auto rounded-xl border bg-card">
+        <table className="w-full min-w-[32rem] text-sm tabular-nums">
+          <thead className="border-b text-xs text-muted-foreground">
+            <tr>
+              <th className="px-3 py-2 text-left font-normal">{t.month}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.income}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.expense}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.net}</th>
+              <th className="px-3 py-2 text-right font-normal">{t.savings}</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {[...data.months].reverse().map((m) => (
+              <tr key={m.month} className={cn(m.month === data.currentMonth && "bg-muted/40")}>
+                <td className="px-3 py-1.5">
+                  <span className="capitalize">{monthLabel(m.month)}</span>
+                  {m.month === data.currentMonth ? (
+                    <span className="ml-1 text-xs text-muted-foreground">({t.ongoing})</span>
+                  ) : null}
+                </td>
+                <td className="px-3 py-1.5 text-right">{formatMoney(m.incomeMinor)}</td>
+                <td className="px-3 py-1.5 text-right">{formatMoney(m.expenseMinor)}</td>
+                <td className={cn("px-3 py-1.5 text-right", m.netMinor < 0 && "text-expense")}>
+                  {m.netMinor < 0 ? "−" : ""}
+                  {formatMoney(Math.abs(m.netMinor))}
+                </td>
+                <td className="px-3 py-1.5 text-right">{formatPct(m.savingsPct)}</td>
+              </tr>
+            ))}
+          </tbody>
+          <tfoot className="border-t font-medium">
+            <tr>
+              <td className="px-3 py-2">{t.total}</td>
+              <td className="px-3 py-2 text-right">{formatMoney(data.totals.incomeMinor)}</td>
+              <td className="px-3 py-2 text-right">{formatMoney(data.totals.expenseMinor)}</td>
+              <td
+                className={cn("px-3 py-2 text-right", data.totals.netMinor < 0 && "text-expense")}
+              >
+                {data.totals.netMinor < 0 ? "−" : ""}
+                {formatMoney(Math.abs(data.totals.netMinor))}
+              </td>
+              <td className="px-3 py-2 text-right">{formatPct(data.totals.savingsPct)}</td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  );
+}

src/features/reports/csv.ts

@@ -0,0 +1,34 @@
+import "server-only";
+import { tr } from "@/i18n/tr";
+import { getHouseholdContext } from "@/lib/dal";
+import { budgetMonthSchema } from "@/shared/schemas/budget";
+
+/** CSV rotaları için ortak: oturum + aktif hane, ?ay= doğrulaması ve yanıt üretimi. */
+export async function csvContext(request: Request) {
+  const ctx = await getHouseholdContext();
+  if (!ctx?.household) return null;
+  const params = new URL(request.url).searchParams;
+  const ay = budgetMonthSchema.safeParse(params.get("ay"));
+  return {
+    userId: ctx.user.id,
+    householdId: ctx.household.id,
+    month: ay.success ? ay.data : undefined,
+    params,
+  };
+}
+
+export const unauthorized = () => new Response(tr.common.unauthorized, { status: 401 });
+export const forbidden = () => new Response(tr.common.unauthorized, { status: 403 });
+
+export function csvResponse(csv: string, filename: string) {
+  return new Response(csv, {
+    headers: {
+      "Content-Type": "text/csv; charset=utf-8",
+      "Content-Disposition": `attachment; filename="${filename}"`,
+      "Cache-Control": "no-store",
+    },
+  });
+}
+
+/** 14,3 → "14,3" (CSV ondalık virgül). */
+export const csvPct = (n: number | null) => (n === null ? "" : String(n).replace(".", ","));

src/features/reports/service.int.test.ts

@@ -0,0 +1,114 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { getBudget } from "@/features/budgets/service";
+import { getOverview } from "@/features/dashboard/service";
+import { setupSeededDb, teardownDb } from "@/test/seeded-db";
+import {
+  getBudgetReport,
+  getCategoryReport,
+  getPeopleAccountsReport,
+  getTrendReport,
+} from "./service";
+
+let ids: Awaited<ReturnType<typeof setupSeededDb>>;
+let cakir = "";
+let ayse = "";
+let zeynep = "";
+let fatma = "";
+
+beforeAll(async () => {
+  ids = await setupSeededDb();
+  cakir = ids.household("Çakır Ailesi");
+  ayse = ids.user("ayse");
+  zeynep = ids.user("zeynep");
+  fatma = ids.user("fatma");
+});
+afterAll(teardownDb);
+
+describe("kategori dağılımı", () => {
+  it("toplam bütçenin gerçekleşeniyle aynı; oranlar ~%100; başka hane göremez", async () => {
+    const r = (await getCategoryReport(ayse, cakir))!;
+    const budget = (await getBudget(ayse, cakir))!;
+    expect(r.breakdown.totalMinor).toBe(budget.totals.actualMinor);
+    expect(r.breakdown.totalMinor).toBeGreaterThan(0);
+    const sum = r.breakdown.rows.reduce((a, x) => a + x.amountMinor, 0);
+    expect(sum).toBe(r.breakdown.totalMinor);
+    const pct = r.breakdown.rows.reduce((a, x) => a + x.sharePct, 0);
+    expect(Math.abs(pct - 100)).toBeLessThan(1);
+    // Alt kategori kırılımı: çocukların ve doğrudan tutarın toplamı üst satıra eşit.
+    for (const row of r.breakdown.rows) {
+      const kids = row.children.reduce((a, c) => a + c.amountMinor, 0);
+      expect(kids + row.ownMinor).toBe(row.amountMinor);
+    }
+    expect(r.appearance[r.breakdown.rows[0]!.id]).toBeDefined();
+    expect(await getCategoryReport(fatma, cakir)).toBeNull();
+  });
+
+  it("önceki ay seçilebilir", async () => {
+    const cur = (await getCategoryReport(ayse, cakir))!;
+    const prev = (await getCategoryReport(ayse, cakir, cur.previous))!;
+    expect(prev.current).toBe(false);
+    expect(prev.breakdown.totalMinor).toBe(cur.breakdown.prevTotalMinor);
+  });
+});
+
+describe("aylık trend", () => {
+  it("12 ay; içinde bulunulan ayın gideri bütçeyle aynı; tasarruf oranı tutarlı", async () => {
+    const r = (await getTrendReport(ayse, cakir))!;
+    expect(r.months).toHaveLength(12);
+    const last = r.months.at(-1)!;
+    expect(last.month).toBe(r.currentMonth);
+    expect(last.expenseMinor).toBe((await getBudget(ayse, cakir))!.totals.actualMinor);
+    for (const m of r.months) {
+      expect(m.netMinor).toBe(m.incomeMinor - m.expenseMinor);
+      if (m.incomeMinor === 0) expect(m.savingsPct).toBeNull();
+    }
+    expect(r.months.filter((m) => m.incomeMinor > 0).length).toBeGreaterThan(3);
+  });
+});
+
+describe("kişi ve hesap bazlı", () => {
+  it("kişi toplamları ve oranları; gizli hesap yalnızca sahibine görünür", async () => {
+    const own = (await getPeopleAccountsReport(ayse, cakir))!;
+    expect(own.people.reduce((a, p) => a + p.expenseMinor, 0)).toBe(own.peopleTotalMinor);
+    expect(own.people.every((p) => p.name !== "—")).toBe(true);
+    expect(own.accounts.map((a) => a.name)).toContain("Ayşe — Pluxee");
+    for (const a of own.accounts)
+      expect(a.netMinor).toBe(
+        a.incomeMinor + a.transferInMinor - a.expenseMinor - a.transferOutMinor,
+      );
+    const other = (await getPeopleAccountsReport(zeynep, cakir))!;
+    expect(other.accounts.map((a) => a.name)).not.toContain("Ayşe — Pluxee");
+  });
+});
+
+describe("bütçe ve gerçekleşen", () => {
+  it("son 6 ay; son satır seçilen ay", async () => {
+    const r = (await getBudgetReport(ayse, cakir))!;
+    expect(r.history).toHaveLength(6);
+    expect(r.history.at(-1)!.month).toBe(r.month);
+    expect(r.history.at(-1)!.actualMinor).toBe(r.budget.totals.actualMinor);
+  });
+});
+
+describe("dashboard ana grafik", () => {
+  it("periyotlar: hafta 7 gün, ay günleri, 6 ve 12 ay; gelecek günlerde gerçekleşen boş", async () => {
+    const week = (await getOverview(ayse, cakir, "week"))!;
+    expect(week.points).toHaveLength(7);
+    expect(week.points.filter((p) => p.key > week.today).every((p) => p.actual === null)).toBe(
+      true,
+    );
+    const month = (await getOverview(ayse, cakir, "month"))!;
+    const budget = (await getBudget(ayse, cakir))!;
+    const actual = month.points.reduce((a, p) => a + (p.actual ?? 0), 0);
+    expect(actual).toBe(budget.totals.actualMinor);
+    if (budget.hasBudget) {
+      const planned = month.points.reduce((a, p) => a + (p.budget ?? 0), 0);
+      expect(planned).toBe(budget.totals.limitMinor);
+    }
+    const half = (await getOverview(ayse, cakir, "half"))!;
+    expect(half.points).toHaveLength(6);
+    expect(half.points.at(-1)!.actual).toBe(budget.totals.actualMinor);
+    expect((await getOverview(ayse, cakir, "year"))!.points).toHaveLength(12);
+    expect(await getOverview(fatma, cakir, "month")).toBeNull();
+  });
+});

src/features/reports/service.ts

@@ -0,0 +1,353 @@
+import "server-only";
+import { Types } from "mongoose";
+import { incomePlan } from "@/features/budgets/plan";
+import {
+  budgetFor,
+  expenseAmounts,
+  settingsOf,
+  type BudgetLineView,
+  type BudgetView,
+  type Settings,
+} from "@/features/budgets/service";
+import { loadContext, userNames, type Ctx } from "@/features/transactions/service";
+import { tr } from "@/i18n/tr";
+import { TransactionModel } from "@/models/transaction";
+import type { AccountType } from "@/shared/accounts";
+import type { IconKey, Swatch } from "@/shared/appearance";
+import { budgetPeriod, periodOfDate, shiftMonth } from "@/shared/budget";
+import { istanbulDayStart, todayIstanbul } from "@/shared/dates";
+import { categoryBreakdown, savingsRate, sharePct, type CategoryBreakdown } from "@/shared/reports";
+
+/**
+ * Raporlar (Bölüm 6.14). Okuma: viewer. "Ay" bütçe ayıdır (hane ayarı); gider kuralları bütçeyle
+ * aynı: gerçekleşmiş işlemler, bölünmüş işlemler kalem bazında, taksit modu ve başkasının
+ * "yalnızca ben" hesabındaki giderler hane ayarına göre (yalnızca tutar). Başkasının gizli
+ * hesabı hesap raporunda hiç görünmez.
+ */
+
+const DAY_MS = 86_400_000;
+const ORPHAN = "__none__";
+
+type Base = { ctx: Ctx; s: Settings; today: string; currentMonth: string };
+
+async function base(userId: string, householdId: string): Promise<Base | null> {
+  const ctx = await loadContext(userId, householdId, "viewer");
+  if (!ctx) return null;
+  const s = await settingsOf(ctx.m.householdId);
+  const today = todayIstanbul();
+  return { ctx, s, today, currentMonth: periodOfDate(today, s.startDay) };
+}
+
+/** Kategori bazında gerçekleşen gider (kendi tutarı); kategorisiz/bilinmeyen tek satırda. */
+async function actualByCategory(b: Base, month: string) {
+  const { from, to } = budgetPeriod(month, b.s.startDay);
+  const amounts = await expenseAmounts(b.ctx, b.s, from, to);
+  const out = new Map<string, number>();
+  for (const [id, a] of amounts) {
+    const v = a.fixedMinor + a.variableMinor;
+    if (!v) continue;
+    const known = id && b.ctx.categoryMap.get(id)?.kind === "expense";
+    const key = known ? id : ORPHAN;
+    out.set(key, (out.get(key) ?? 0) + v);
+  }
+  return out;
+}
+
+export type MonthInfo = {
+  month: string;
+  from: string;
+  to: string;
+  current: boolean;
+  currentMonth: string;
+};
+
+const monthInfo = (b: Base, month: string): MonthInfo => ({
+  month,
+  ...budgetPeriod(month, b.s.startDay),
+  current: month === b.currentMonth,
+  currentMonth: b.currentMonth,
+});
+
+// --- Kategori dağılımı ---
+
+export type CategoryReport = MonthInfo & {
+  previous: string;
+  breakdown: CategoryBreakdown;
+  appearance: Record<string, { icon: IconKey; color: Swatch; path: string }>;
+  includesHidden: boolean;
+};
+
+export async function getCategoryReport(
+  userId: string,
+  householdId: string,
+  month?: string,
+): Promise<CategoryReport | null> {
+  const b = await base(userId, householdId);
+  if (!b) return null;
+  const m = month ?? b.currentMonth;
+  const prev = shiftMonth(m, -1);
+  const [current, previous] = await Promise.all([
+    actualByCategory(b, m),
+    actualByCategory(b, prev),
+  ]);
+  const cats = b.ctx.flatCategories
+    .filter((c) => c.kind === "expense")
+    .map((c) => ({ id: c.id, parentId: c.parentId, name: c.name, order: c.order }));
+  cats.push({ id: ORPHAN, parentId: null, name: tr.reports.uncategorized, order: 1e9 });
+  const appearance: CategoryReport["appearance"] = {
+    [ORPHAN]: { icon: "tag", color: "slate", path: tr.reports.uncategorized },
+  };
+  for (const c of b.ctx.categoryMap.values())
+    if (c.kind === "expense")
+      appearance[String(c.id)] = { icon: c.icon, color: c.color, path: c.path };
+  return {
+    ...monthInfo(b, m),
+    previous: prev,
+    breakdown: categoryBreakdown(cats, current, previous),
+    appearance,
+    includesHidden: b.s.includePrivate && b.ctx.hiddenAccountIds.length > 0,
+  };
+}
+
+// --- Aylık trend ---
+
+export type TrendRow = {
+  month: string;
+  incomeMinor: number;
+  expenseMinor: number;
+  netMinor: number;
+  savingsPct: number | null;
+};
+
+export type TrendReport = {
+  months: TrendRow[];
+  totals: {
+    incomeMinor: number;
+    expenseMinor: number;
+    netMinor: number;
+    savingsPct: number | null;
+  };
+  currentMonth: string;
+};
+
+/** Son `count` bütçe ayı (içinde bulunulan dahil): gerçekleşen gelir, gider, net, tasarruf oranı. */
+export async function getTrendReport(
+  userId: string,
+  householdId: string,
+  count = 12,
+): Promise<TrendReport | null> {
+  const b = await base(userId, householdId);
+  if (!b) return null;
+  const months = Array.from({ length: count }, (_, i) => shiftMonth(b.currentMonth, i - count + 1));
+  const rows = await Promise.all(
+    months.map(async (month) => {
+      const [income, expense] = await Promise.all([
+        incomePlan(b.ctx, b.s, month),
+        actualByCategory(b, month),
+      ]);
+      const incomeMinor = income.actualMinor;
+      const expenseMinor = [...expense.values()].reduce((a, v) => a + v, 0);
+      return {
+        month,
+        incomeMinor,
+        expenseMinor,
+        netMinor: incomeMinor - expenseMinor,
+        savingsPct: savingsRate(incomeMinor, expenseMinor),
+      };
+    }),
+  );
+  const incomeMinor = rows.reduce((a, r) => a + r.incomeMinor, 0);
+  const expenseMinor = rows.reduce((a, r) => a + r.expenseMinor, 0);
+  return {
+    months: rows,
+    totals: {
+      incomeMinor,
+      expenseMinor,
+      netMinor: incomeMinor - expenseMinor,
+      savingsPct: savingsRate(incomeMinor, expenseMinor),
+    },
+    currentMonth: b.currentMonth,
+  };
+}
+
+// --- Kişi ve hesap bazlı ---
+
+export type PersonRow = {
+  userId: string;
+  name: string;
+  expenseMinor: number;
+  count: number;
+  sharePct: number;
+};
+
+export type AccountRow = {
+  id: string;
+  name: string;
+  type: AccountType;
+  archived: boolean;
+  incomeMinor: number;
+  expenseMinor: number;
+  transferInMinor: number;
+  transferOutMinor: number;
+  netMinor: number;
+  count: number;
+};
+
+export type PeopleAccountsReport = MonthInfo & {
+  people: PersonRow[];
+  peopleTotalMinor: number;
+  accounts: AccountRow[];
+  includesHidden: boolean;
+};
+
+type TxLean = {
+  type: "income" | "expense" | "transfer";
+  amountMinor: number;
+  accountId: Types.ObjectId | null;
+  toAccountId: Types.ObjectId | null;
+  createdBy: Types.ObjectId;
+};
+
+export async function getPeopleAccountsReport(
+  userId: string,
+  householdId: string,
+  month?: string,
+): Promise<PeopleAccountsReport | null> {
+  const b = await base(userId, householdId);
+  if (!b) return null;
+  const m = month ?? b.currentMonth;
+  const info = monthInfo(b, m);
+  const docs = await TransactionModel.find({
+    householdId: b.ctx.m.householdId,
+    deletedAt: null,
+    status: "posted",
+    date: {
+      $gte: istanbulDayStart(info.from)!,
+      $lt: new Date(istanbulDayStart(info.to)!.getTime() + DAY_MS),
+    },
+  })
+    .select({ type: 1, amountMinor: 1, accountId: 1, toAccountId: 1, createdBy: 1 })
+    .lean<TxLean[]>();
+  const hidden = new Set(b.ctx.hiddenAccountIds.map(String));
+
+  // Kişi: kaydı giren üye; gizli hesap giderleri hane ayarına göre (yalnızca tutar).
+  const people = new Map<string, { expense: number; count: number }>();
+  for (const d of docs) {
+    if (d.type !== "expense") continue;
+    if (d.accountId && hidden.has(String(d.accountId)) && !b.s.includePrivate) continue;
+    const key = String(d.createdBy);
+    const p = people.get(key) ?? { expense: 0, count: 0 };
+    p.expense += d.amountMinor;
+    p.count++;
+    people.set(key, p);
+  }
+  const names = await userNames([...people.keys()].map((id) => new Types.ObjectId(id)));
+  const peopleTotal = [...people.values()].reduce((a, p) => a + p.expense, 0);
+
+  // Hesap: başkasının gizli hesabı hiç görünmez.
+  const acc = new Map<string, Omit<AccountRow, "id" | "name" | "type" | "archived" | "netMinor">>();
+  const bump = (
+    id: Types.ObjectId | null,
+    k: "incomeMinor" | "expenseMinor" | "transferInMinor" | "transferOutMinor",
+    v: number,
+  ) => {
+    if (!id || hidden.has(String(id))) return;
+    const key = String(id);
+    const row = acc.get(key) ?? {
+      incomeMinor: 0,
+      expenseMinor: 0,
+      transferInMinor: 0,
+      transferOutMinor: 0,
+      count: 0,
+    };
+    row[k] += v;
+    row.count++;
+    acc.set(key, row);
+  };
+  for (const d of docs) {
+    if (d.type === "income") bump(d.accountId, "incomeMinor", d.amountMinor);
+    else if (d.type === "expense") bump(d.accountId, "expenseMinor", d.amountMinor);
+    else {
+      bump(d.accountId, "transferOutMinor", d.amountMinor);
+      bump(d.toAccountId, "transferInMinor", d.amountMinor);
+    }
+  }
+  const accounts: AccountRow[] = [];
+  for (const a of b.ctx.accountMap.values()) {
+    if (a.hidden) continue;
+    const row = acc.get(String(a.id));
+    if (!row && a.archived) continue;
+    const r = row ?? {
+      incomeMinor: 0,
+      expenseMinor: 0,
+      transferInMinor: 0,
+      transferOutMinor: 0,
+      count: 0,
+    };
+    accounts.push({
+      id: String(a.id),
+      name: a.name,
+      type: a.type,
+      archived: a.archived,
+      ...r,
+      netMinor: r.incomeMinor + r.transferInMinor - r.expenseMinor - r.transferOutMinor,
+    });
+  }
+  accounts.sort((x, y) => y.count - x.count || x.name.localeCompare(y.name, "tr"));
+
+  return {
+    ...info,
+    people: [...people.entries()]
+      .map(([id, p]) => ({
+        userId: id,
+        name: names.get(id) ?? "—",
+        expenseMinor: p.expense,
+        count: p.count,
+        sharePct: sharePct(p.expense, peopleTotal),
+      }))
+      .sort((x, y) => y.expenseMinor - x.expenseMinor),
+    peopleTotalMinor: peopleTotal,
+    accounts,
+    includesHidden: b.s.includePrivate && b.ctx.hiddenAccountIds.length > 0,
+  };
+}
+
+// --- Bütçe vs. gerçekleşen ---
+
+export type BudgetHistoryRow = {
+  month: string;
+  limitMinor: number | null;
+  actualMinor: number;
+  ratioBp: number | null;
+};
+
+export type BudgetReport = MonthInfo & {
+  budget: BudgetView;
+  lines: BudgetLineView[];
+  history: BudgetHistoryRow[];
+};
+
+/** Seçilen ayın kategori bazında bütçe/gerçekleşen tablosu ve son 6 ayın toplamları. */
+export async function getBudgetReport(
+  userId: string,
+  householdId: string,
+  month?: string,
+): Promise<BudgetReport | null> {
+  const b = await base(userId, householdId);
+  if (!b) return null;
+  const m = month ?? b.currentMonth;
+  const months = Array.from({ length: 6 }, (_, i) => shiftMonth(m, i - 5));
+  const budgets = await Promise.all(months.map((x) => budgetFor(b.ctx, b.s, x)));
+  const budget = budgets.at(-1)!;
+  return {
+    ...monthInfo(b, m),
+    budget,
+    lines: budget.lines,
+    history: budgets.map((x) => ({
+      month: x.month,
+      limitMinor: x.hasBudget ? x.totals.limitMinor : null,
+      actualMinor: x.totals.actualMinor,
+      ratioBp: x.hasBudget ? x.totals.ratioBp : null,
+    })),
+  };
+}

src/i18n/tr.ts

@@ -1862,6 +1862,144 @@ export const tr = {
     identifierRequired: "Kullanıcı adı veya e-posta girin",
     passwordRequired: "Şifre girin",
   },
+  reports: {
+    title: "Raporlar",
+    description:
+      "Bütçe ayına göre. Gizli hesap giderleri hane ayarına göre (yalnızca tutar) dahil edilir.",
+    uncategorized: "Kategorisiz",
+    back: "Raporlar",
+    csv: "CSV indir",
+    prevMonth: "Önceki ay",
+    nextMonth: "Sonraki ay",
+    currentMonth: "Bu ay",
+    includesHidden: 'Başka üyelerin "yalnızca ben" hesaplarındaki giderler tutar olarak dahil.',
+    noData: "Bu dönemde kayıt yok.",
+    hub: {
+      thisMonth: "Bu bütçe ayı",
+      income: "Gelir",
+      expense: "Gider",
+      net: "Net",
+      savings: "Tasarruf oranı",
+      topCategories: "En çok harcanan kategoriler",
+      open: "Raporu aç",
+      cards: {
+        categories: {
+          title: "Kategori dağılımı",
+          description:
+            "Kategorilerin toplam gidere oranı, alt kategori kırılımı, önceki aya göre değişim.",
+        },
+        trend: {
+          title: "Aylık trend",
+          description: "Son 12 ay gelir, gider, net ve tasarruf oranı.",
+        },
+        people: {
+          title: "Kişi ve hesap bazlı",
+          description: "Üyelerin harcaması ve hesapların aylık hareketi.",
+        },
+        budget: {
+          title: "Bütçe ve gerçekleşen",
+          description: "Kategori bazında limit ve harcama, son 6 ayın karşılaştırması.",
+        },
+      },
+    },
+    categories: {
+      title: "Kategori dağılımı",
+      description: (month: string) =>
+        `${month} bütçe ayı; toplam gidere oran ve önceki aya göre değişim.`,
+      chartLabel: "Kategorilerin toplam gider içindeki payı, halka grafik",
+      total: "Toplam gider",
+      category: "Kategori",
+      amount: "Tutar",
+      share: "Oran",
+      previous: "Önceki ay",
+      change: "Değişim",
+      own: "Doğrudan üst kategoriye",
+      partialMonth: "Ay devam ediyor; değişim önceki ayın tamamıyla karşılaştırılır.",
+      newCategory: "yeni",
+      other: (n: number) => `Diğer (${n} kategori)`,
+    },
+    trend: {
+      title: "Aylık trend",
+      description: "Son 12 bütçe ayı: gerçekleşen gelir ve gider, net ve tasarruf oranı.",
+      chartLabel: "Son 12 ay gelir ve gider sütun grafiği",
+      rateChartLabel: "Son 12 ay tasarruf oranı",
+      month: "Ay",
+      income: "Gelir",
+      expense: "Gider",
+      net: "Net",
+      savings: "Tasarruf oranı",
+      total: "12 ay toplam",
+      rateTitle: "Tasarruf oranı",
+      rateHint: "(gelir − gider) / gelir. Gelir yoksa hesaplanmaz.",
+      partialHint: "Devam eden ay grafikte gösterilmez.",
+      ongoing: "devam ediyor",
+    },
+    people: {
+      title: "Kişi ve hesap bazlı",
+      description: (month: string) => `${month} bütçe ayı; yalnızca gerçekleşmiş işlemler.`,
+      peopleTitle: "Kişi bazlı harcama",
+      peopleHint: "Gideri kaydeden üyeye göre.",
+      person: "Kişi",
+      expense: "Gider",
+      count: "İşlem",
+      share: "Oran",
+      csvPeople: "Kişiler CSV",
+      csvAccounts: "Hesaplar CSV",
+      accountsTitle: "Hesap bazlı hareket",
+      accountsHint: 'Transferler dahil; başka üyelerin "yalnızca ben" hesapları gösterilmez.',
+      account: "Hesap",
+      income: "Gelir",
+      transferIn: "Gelen transfer",
+      transferOut: "Giden transfer",
+      net: "Net değişim",
+      archived: "arşivli",
+    },
+    budget: {
+      title: "Bütçe ve gerçekleşen",
+      description: (month: string) => `${month} bütçe ayı; kategori bazında limit ve gerçekleşen.`,
+      noBudget: "Bu ay için bütçe yok.",
+      category: "Kategori",
+      limit: "Limit",
+      actual: "Gerçekleşen",
+      remaining: "Kalan",
+      ratio: "Kullanım",
+      historyTitle: "Son 6 ay",
+      historyChartLabel: "Son 6 ay bütçe ve gerçekleşen sütun grafiği",
+      month: "Ay",
+      noLimit: "Bütçe yok",
+      covered: "üst kategoride",
+    },
+    csvFiles: {
+      categories: (month: string) => `butcem-kategori-dagilimi-${month}.csv`,
+      trend: (date: string) => `butcem-aylik-trend-${date}.csv`,
+      people: (month: string) => `butcem-kisi-bazli-${month}.csv`,
+      accounts: (month: string) => `butcem-hesap-bazli-${month}.csv`,
+      budget: (month: string) => `butcem-butce-gerceklesen-${month}.csv`,
+    },
+    csvHeaders: {
+      categories: [
+        "Üst kategori",
+        "Kategori",
+        "Tutar",
+        "Toplam gidere oran (%)",
+        "Önceki ay",
+        "Değişim",
+        "Değişim (%)",
+      ],
+      trend: ["Ay", "Gelir", "Gider", "Net", "Tasarruf oranı (%)"],
+      people: ["Kişi", "Gider", "İşlem sayısı", "Oran (%)"],
+      accounts: [
+        "Hesap",
+        "Gelir",
+        "Gider",
+        "Gelen transfer",
+        "Giden transfer",
+        "Net değişim",
+        "İşlem sayısı",
+      ],
+      budget: ["Kategori", "Limit", "Gerçekleşen", "Kalan", "Kullanım (%)"],
+    },
+  },
   dashboard: {
     title: "Ana sayfa",
     welcome: (name: string) => `Hoş geldin, ${name}`,
@@ -1875,6 +2013,23 @@ export const tr = {
       netWorth: "Net varlık",
     },
     noData: "Henüz veri yok",
+    overview: {
+      title: "Gelir, bütçe ve gider",
+      description: (range: string) => `${range}. Bütçe ayına göre.`,
+      periods: { week: "Haftalık", month: "Aylık", half: "Altı aylık", year: "Yıllık" },
+      views: { cumulative: "Kümülatif", periodic: "Dönemsel" },
+      periodLabel: "Periyot",
+      viewLabel: "Görünüm",
+      series: {
+        plannedIncome: "Planlanan gelir",
+        budget: "Planlanan gider (bütçe)",
+        actual: "Gerçekleşen gider",
+      },
+      chartLabel: "Planlanan gelir, planlanan gider ve gerçekleşen gider çizgi grafiği",
+      noBudget: "Bütçesi olmayan dönemde planlanan gider çizgisi boş kalır.",
+      table: "Tablo olarak göster",
+      bucket: { day: "Gün", month: "Ay" },
+    },
   },
   adminUsers: {
     title: "Kullanıcılar",

src/shared/overview.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { cumulative, overviewRange, weekday } from "./overview";
+
+describe("overviewRange", () => {
+  it("haftalık: Pazartesi–Pazar, bugünü içerir", () => {
+    // 2026-11-07 Cumartesi.
+    expect(weekday("2026-11-07")).toBe(5);
+    const r = overviewRange("week", "2026-11-07");
+    expect(r).toMatchObject({ granularity: "day", from: "2026-11-02", to: "2026-11-08" });
+    expect(r.buckets).toHaveLength(7);
+    // Ay sınırını aşan hafta.
+    expect(overviewRange("week", "2026-12-01").from).toBe("2026-11-30");
+  });
+
+  it("aylık: bütçe ayının günleri (başlangıç günü 15)", () => {
+    const r = overviewRange("month", "2026-11-07", 15);
+    expect(r.from).toBe("2026-10-15");
+    expect(r.to).toBe("2026-11-14");
+    expect(r.buckets).toHaveLength(31);
+    expect(overviewRange("month", "2026-11-07").buckets).toHaveLength(30);
+  });
+
+  it("altı aylık ve yıllık: bu ay dahil son 6 / 12 bütçe ayı", () => {
+    const half = overviewRange("half", "2026-11-07");
+    expect(half).toMatchObject({ granularity: "month", from: "2026-06-01", to: "2026-11-30" });
+    expect(half.buckets).toEqual([
+      "2026-06",
+      "2026-07",
+      "2026-08",
+      "2026-09",
+      "2026-10",
+      "2026-11",
+    ]);
+    const year = overviewRange("year", "2026-01-20", 15);
+    expect(year.buckets[0]).toBe("2025-02");
+    expect(year.buckets.at(-1)).toBe("2026-01");
+  });
+});
+
+describe("cumulative", () => {
+  it("seriler ayrı birikir; boş nokta boş kalır, toplamı bozmaz", () => {
+    const out = cumulative([
+      { key: "a", plannedIncome: 100, budget: 50, actual: 10 },
+      { key: "b", plannedIncome: 0, budget: null, actual: 20 },
+      { key: "c", plannedIncome: 50, budget: 30, actual: null },
+    ]);
+    expect(out.map((p) => [p.plannedIncome, p.budget, p.actual])).toEqual([
+      [100, 50, 10],
+      [100, null, 30],
+      [150, 80, null],
+    ]);
+  });
+});

src/shared/overview.ts

@@ -0,0 +1,76 @@
+import { budgetPeriod, daysBetween, periodOfDate, shiftMonth } from "./budget";
+import { addDays } from "./recurrence";
+
+/**
+ * Dashboard ana grafiği (Bölüm 6.13): Planlanan Gelir, Planlanan Gider (Bütçe), Gerçekleşen Gider.
+ * Saf fonksiyonlar: periyot aralığı ve kümülatif dönüşüm.
+ *
+ * Periyotlar: Haftalık (bu hafta, Pazartesi–Pazar, günlük), Aylık (içinde bulunulan bütçe ayı,
+ * günlük), Altı Aylık ve Yıllık (bu bütçe ayı dahil son 6 / 12 bütçe ayı, aylık).
+ */
+
+export const OVERVIEW_PERIODS = ["week", "month", "half", "year"] as const;
+export type OverviewPeriod = (typeof OVERVIEW_PERIODS)[number];
+
+export type OverviewRange = {
+  granularity: "day" | "month";
+  /** Günlükte "YYYY-MM-DD", aylıkta bütçe ayı "YYYY-MM". */
+  buckets: string[];
+  from: string;
+  to: string;
+};
+
+/** "YYYY-MM-DD" → haftanın günü (0 = Pazartesi … 6 = Pazar). */
+export function weekday(ymd: string): number {
+  const d = new Date(`${ymd}T12:00:00Z`).getUTCDay();
+  return (d + 6) % 7;
+}
+
+export function overviewRange(period: OverviewPeriod, today: string, startDay = 1): OverviewRange {
+  if (period === "week") {
+    const from = addDays(today, -weekday(today));
+    const buckets = Array.from({ length: 7 }, (_, i) => addDays(from, i));
+    return { granularity: "day", buckets, from, to: buckets[6]! };
+  }
+  const current = periodOfDate(today, startDay);
+  if (period === "month") {
+    const { from, to } = budgetPeriod(current, startDay);
+    const buckets = Array.from({ length: daysBetween(from, to) }, (_, i) => addDays(from, i));
+    return { granularity: "day", buckets, from, to };
+  }
+  const n = period === "half" ? 6 : 12;
+  const buckets = Array.from({ length: n }, (_, i) => shiftMonth(current, i - n + 1));
+  return {
+    granularity: "month",
+    buckets,
+    from: budgetPeriod(buckets[0]!, startDay).from,
+    to: budgetPeriod(buckets.at(-1)!, startDay).to,
+  };
+}
+
+export type OverviewPoint = {
+  key: string;
+  plannedIncome: number | null;
+  budget: number | null;
+  actual: number | null;
+};
+
+const SERIES = ["plannedIncome", "budget", "actual"] as const;
+
+/**
+ * Kümülatif görünüm: her seri kendi içinde birikir. Boş (null) nokta boş kalır ama birikime 0
+ * katar; böylece bütçesi olmayan ay ya da gelecek günler çizgiyi koparır, toplamı bozmaz.
+ */
+export function cumulative(points: readonly OverviewPoint[]): OverviewPoint[] {
+  const run = { plannedIncome: 0, budget: 0, actual: 0 };
+  return points.map((p) => {
+    const out: OverviewPoint = { ...p };
+    for (const k of SERIES) {
+      const v = p[k];
+      if (v === null) continue;
+      run[k] += v;
+      out[k] = run[k];
+    }
+    return out;
+  });
+}

src/shared/reports.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { categoryBreakdown, changePct, savingsRate, sharePct } from "./reports";
+
+describe("oranlar", () => {
+  it("toplam gidere oran bir ondalıklı (35.000 içinde 5.000 → %14,3)", () => {
+    expect(sharePct(5_000_00, 35_000_00)).toBe(14.3);
+    expect(sharePct(1, 0)).toBe(0);
+  });
+  it("önceki aya göre değişim; önceki 0 ise null", () => {
+    expect(changePct(120, 100)).toBe(20);
+    expect(changePct(90, 120)).toBe(-25);
+    expect(changePct(50, 0)).toBeNull();
+  });
+  it("tasarruf oranı; gelir yoksa null, gider gelirden fazlaysa negatif", () => {
+    expect(savingsRate(50_000_00, 35_000_00)).toBe(30);
+    expect(savingsRate(10_000_00, 12_000_00)).toBe(-20);
+    expect(savingsRate(0, 100)).toBeNull();
+  });
+});
+
+describe("categoryBreakdown", () => {
+  const cats = [
+    { id: "fatura", parentId: null, name: "Faturalar", order: 1 },
+    { id: "elektrik", parentId: "fatura", name: "Elektrik", order: 1 },
+    { id: "su", parentId: "fatura", name: "Su", order: 2 },
+    { id: "market", parentId: null, name: "Market", order: 2 },
+    { id: "gida", parentId: "market", name: "Gıda", order: 1 },
+    { id: "ulasim", parentId: null, name: "Ulaşım", order: 3 },
+  ];
+
+  it("üst kategori alt ağacı toplar; oranlar toplam gidere göre; boşlar gizli", () => {
+    const current = new Map([
+      ["elektrik", 3_000_00],
+      ["su", 2_000_00],
+      ["gida", 25_000_00],
+      ["market", 5_000_00],
+    ]);
+    const previous = new Map([
+      ["elektrik", 2_500_00],
+      ["gida", 20_000_00],
+      ["ulasim", 1_000_00],
+    ]);
+    const b = categoryBreakdown(cats, current, previous);
+    expect(b.totalMinor).toBe(35_000_00);
+    expect(b.prevTotalMinor).toBe(23_500_00);
+    expect(b.rows.map((r) => [r.id, r.amountMinor, r.sharePct])).toEqual([
+      ["market", 30_000_00, 85.7],
+      ["fatura", 5_000_00, 14.3],
+      // Bu ay harcama yok ama geçen ay vardı: değişimi göstermek için kalır.
+      ["ulasim", 0, 0],
+    ]);
+    const fatura = b.rows.find((r) => r.id === "fatura")!;
+    expect(fatura.children.map((c) => [c.id, c.amountMinor, c.changePct])).toEqual([
+      ["elektrik", 3_000_00, 20],
+      ["su", 2_000_00, null],
+    ]);
+    const market = b.rows.find((r) => r.id === "market")!;
+    expect(market.ownMinor).toBe(5_000_00);
+    expect(market.changePct).toBe(50);
+    expect(b.rows.find((r) => r.id === "ulasim")!.changeMinor).toBe(-1_000_00);
+  });
+});

src/shared/reports.ts

@@ -0,0 +1,120 @@
+/**
+ * Raporlar (Bölüm 6.14). Saf hesaplar: kategori dağılımı (üst kategori toplamları ve alt kategori
+ * kırılımı), toplam gidere oran, önceki aya göre değişim, tasarruf oranı. Tutarlar kuruş; oranlar
+ * bir ondalıklı yüzde (14,3).
+ */
+
+/** Payın toplamdaki yüzdesi, bir ondalık (toplam 0 ise 0). */
+export function sharePct(part: number, total: number): number {
+  if (total <= 0) return 0;
+  return Math.round((part * 1000) / total) / 10;
+}
+
+/** Önceki döneme göre yüzde değişim; önceki 0 ise hesaplanamaz (null). */
+export function changePct(current: number, previous: number): number | null {
+  if (previous === 0) return null;
+  return Math.round(((current - previous) * 1000) / previous) / 10;
+}
+
+/** Tasarruf oranı = (gelir − gider) / gelir; gelir yoksa null. */
+export function savingsRate(incomeMinor: number, expenseMinor: number): number | null {
+  if (incomeMinor <= 0) return null;
+  return sharePct(incomeMinor - expenseMinor, incomeMinor);
+}
+
+export type ReportCategory = {
+  id: string;
+  parentId: string | null;
+  name: string;
+  order: number;
+};
+
+export type CategoryShare = {
+  id: string;
+  name: string;
+  depth: number;
+  amountMinor: number;
+  sharePct: number;
+  prevMinor: number;
+  changeMinor: number;
+  changePct: number | null;
+};
+
+export type TopCategoryShare = CategoryShare & {
+  /** Alt kategoriler (ağaç sırasıyla, derinlik 1+); tutarları kendi tutarlarıdır. */
+  children: CategoryShare[];
+  /** Üst kategoriye doğrudan (alt kategori seçilmeden) yazılan tutar. */
+  ownMinor: number;
+};
+
+export type CategoryBreakdown = {
+  totalMinor: number;
+  prevTotalMinor: number;
+  rows: TopCategoryShare[];
+};
+
+/**
+ * Üst kategori toplamları (alt ağaç dahil) ve alt kategori kırılımı. Tutarı ve önceki tutarı
+ * sıfır olan kategoriler gösterilmez. Satırlar tutara göre büyükten küçüğe.
+ */
+export function categoryBreakdown(
+  categories: readonly ReportCategory[],
+  current: ReadonlyMap<string, number>,
+  previous: ReadonlyMap<string, number>,
+): CategoryBreakdown {
+  const byId = new Map(categories.map((c) => [c.id, c]));
+  const children = new Map<string, ReportCategory[]>();
+  const roots: ReportCategory[] = [];
+  for (const c of categories) {
+    if (c.parentId && byId.has(c.parentId))
+      children.set(c.parentId, [...(children.get(c.parentId) ?? []), c]);
+    else roots.push(c);
+  }
+  const sorted = (list: ReportCategory[]) =>
+    [...list].sort((a, b) => a.order - b.order || a.name.localeCompare(b.name, "tr"));
+  const totalMinor = [...current.values()].reduce((a, b) => a + b, 0);
+  const prevTotalMinor = [...previous.values()].reduce((a, b) => a + b, 0);
+
+  const share = (id: string, name: string, depth: number, cur: number, prev: number) => ({
+    id,
+    name,
+    depth,
+    amountMinor: cur,
+    sharePct: sharePct(cur, totalMinor),
+    prevMinor: prev,
+    changeMinor: cur - prev,
+    changePct: changePct(cur, prev),
+  });
+
+  const rows: TopCategoryShare[] = [];
+  for (const root of roots) {
+    const kids: CategoryShare[] = [];
+    let cur = current.get(root.id) ?? 0;
+    let prev = previous.get(root.id) ?? 0;
+    const walk = (list: ReportCategory[], depth: number, seen: Set<string>) => {
+      for (const c of sorted(list)) {
+        if (seen.has(c.id)) continue;
+        seen.add(c.id);
+        const a = current.get(c.id) ?? 0;
+        const p = previous.get(c.id) ?? 0;
+        cur += a;
+        prev += p;
+        const sub = children.get(c.id) ?? [];
+        const before = kids.length;
+        kids.push(share(c.id, c.name, depth, a, p));
+        walk(sub, depth + 1, seen);
+        // Kendisi ve altı boşsa satırı çıkar.
+        if (a === 0 && p === 0 && kids.length === before + 1) kids.pop();
+      }
+    };
+    walk(children.get(root.id) ?? [], 1, new Set([root.id]));
+    if (cur === 0 && prev === 0) continue;
+    rows.push({
+      ...share(root.id, root.name, 0, cur, prev),
+      ownMinor: current.get(root.id) ?? 0,
+      children: kids,
+    });
+  }
+  rows.sort((a, b) => b.amountMinor - a.amountMinor || a.name.localeCompare(b.name, "tr"));
+  return { totalMinor, prevTotalMinor, rows };
+}