From 7014ed3d2e2e3e0f062650b704f8d7cdbc055832 Mon Sep 17 00:00:00 2001
From: Munkherdene <muunuu960@gmail.com>
Date: Sat, 22 Aug 2026 23:33:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20planner=20category=20drill-down=20?=
 =?UTF-8?q?=E2=80=94=20filter=20to=20the=20actual=20category=20(backend=20?=
 =?UTF-8?q?appends=20unrelated=20stragglers)=20+=20localized=20title/icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/planner/CategoryTransactions.tsx | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/features/planner/CategoryTransactions.tsx b/src/features/planner/CategoryTransactions.tsx
index d624a23..59fdd2d 100644
--- a/src/features/planner/CategoryTransactions.tsx
+++ b/src/features/planner/CategoryTransactions.tsx
@@ -3,7 +3,8 @@
 import * as React from "react";
 import Link from "next/link";
 import { TextFieldRoot, TextFieldInput } from "@seed-design/react";
-import { Card } from "@/ds";
+import { Card, IconChip } from "@/ds";
+import { categoryStyle } from "@/ds/categoryStyle";
 import { tugrik } from "@/ds/money";
 import { useTransactions } from "@/api/hooks/reads";
 import type { Txn } from "@/api/schemas";
@@ -36,12 +37,20 @@ export function CategoryTransactions({ category }: CategoryTransactionsProps) {
   });
   const [search, setSearch] = React.useState("");
 
+  // The backend's ?category= filter always appends a handful of unrelated
+  // "straggler" rows (recent uncategorized/other-category txns) to every
+  // result, which makes a low-activity category look like it shows the wrong
+  // transactions. Filter to the exact category client-side so the drill-down
+  // is trustworthy (empty categories correctly show empty). Case-insensitive.
   const rows: Txn[] = React.useMemo(() => {
-    const all = data ?? [];
+    const key = category.trim().toLowerCase();
+    const inCategory = (data ?? []).filter((t) => (t.category ?? "").trim().toLowerCase() === key);
     const needle = search.trim().toLowerCase();
-    if (!needle) return all;
-    return all.filter((t) => t.title.toLowerCase().includes(needle));
-  }, [data, search]);
+    if (!needle) return inCategory;
+    return inCategory.filter((t) => t.title.toLowerCase().includes(needle));
+  }, [data, category, search]);
+
+  const cat = categoryStyle(category);
 
   return (
     <div className="flex flex-col gap-4">
@@ -49,7 +58,8 @@ export function CategoryTransactions({ category }: CategoryTransactionsProps) {
         <Link href="/planner" aria-label={s.amountEntry.cancel} style={{ color: "var(--seed-color-fg-neutral)" }}>
           ←
         </Link>
-        <h1 style={{ fontWeight: 700, fontSize: 16 }}>{category}</h1>
+        <IconChip icon={cat.icon} tint={cat.tint} fg={cat.fg} size={34} />
+        <h1 style={{ fontWeight: 700, fontSize: 18 }}>{cat.name}</h1>
       </div>
 
       <TextFieldRoot value={search} onValueChange={setSearch}>