Coder/aurum
1
0
Fork 0
mirror of https://github.com/Zproger/Aurum.git synced 2026-10-14 11:36:49 +07:00
Code Issues Packages Projects Releases Wiki Activity

fix: restrict transaction splits to one parent category, show subcategory breakdown

Browse Source 
Раньше сплит позволял смешивать вообще любые категории. Реальная задача —
разложить одну покупку по подкатегориям ОДНОЙ базовой категории (100 € на
продукты: сколько на сладости, сколько на уход). А раз Dashboard и рейтинг
категорий сворачивают подкатегории в родителя, эта разбивка нигде не была
видна.

- _build_splits() требует, чтобы все категории сплита были одной родительской
  категорией или её прямыми подкатегориями.
- category_rollup.py отдаёт для каждого родительского тотала список
  category-источников, которые в него скинулись (children) — пусто, если
  источник один.
- Dashboard и рейтинг категорий: строка с непустым children раскрывается по
  клику, показывая вклад каждой подкатегории.
- Форма транзакции: выбор категории при сплите — сначала базовая (верхний
  уровень), затем строки сплита выбирают саму базовую или её подкатегорию.
This commit is contained in:
ZProger
2026-08-30 19:06:29 +03:00
parent f778742134
commit 140f58d33f
16 changed files with 580 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/components/dashboard/SpendingByCategoryCard.tsx
View File

@@ -1,10 +1,12 @@
import { useState } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
import { getCategoryIcon } from "@/lib/icons";
import { formatCurrency } from "@/lib/format";
import { useTranslation } from "@/lib/i18n";
import { useTranslation, type TranslationKey } from "@/lib/i18n";
import { translateCategoryName } from "@/lib/categoryLabels";
import type { CategoryBreakdownItem } from "@/types";
import type { CategoryBreakdownChildItem, CategoryBreakdownItem } from "@/types";
interface SpendingByCategoryCardProps {
items: CategoryBreakdownItem[];
@@ -23,13 +25,31 @@ function DonutTooltip({ active, payload }: { active?: boolean; payload?: Array<{
);
}
// A child's category_id equals its parent's own — the enclosing
// CategoryBreakdownItem's — when that slice of spend was filed directly on
// the parent with no more specific subcategory chosen (see
// services/category_rollup.py's CategoryRollupChildItem).
function childLabel(child: CategoryBreakdownChildItem, parentId: number | null, t: (key: TranslationKey) => string) {
return child.category_id === parentId ? t("reports.directSpendLabel") : translateCategoryName(child.name);
}
export function SpendingByCategoryCard({ items }: SpendingByCategoryCardProps) {
const { t } = useTranslation();
const [expanded, setExpanded] = useState<Set<number>>(new Set());
const hasData = items.length > 0;
// Recharts needs a numeric dataKey — API amounts arrive as strings (Decimal
// is serialized as string to avoid float precision loss).
const chartData = items.map((item) => ({ ...item, amount: Number(item.amount) }));
function toggle(categoryId: number) {
setExpanded((prev) => {
const next = new Set(prev);
if (next.has(categoryId)) next.delete(categoryId);
else next.add(categoryId);
return next;
});
}
return (
<Card>
<CardHeader>
@@ -66,23 +86,48 @@ export function SpendingByCategoryCard({ items }: SpendingByCategoryCardProps) {
<ul className="w-full min-w-0 flex-1 divide-y divide-gridline">
{items.map((item) => {
const Icon = getCategoryIcon(item.icon);
const hasChildren = item.children.length > 0;
const isExpanded = item.category_id !== null && expanded.has(item.category_id);
return (
<li
key={item.category_id ?? "other"}
className="flex items-center gap-3 py-2 first:pt-0 last:pb-0"
>
<span
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
style={{ backgroundColor: `${item.color}26` }}
<li key={item.category_id ?? "other"} className="py-2 first:pt-0 last:pb-0">
<button
type="button"
disabled={!hasChildren}
onClick={() => item.category_id !== null && toggle(item.category_id)}
className="flex w-full items-center gap-3 text-left disabled:cursor-default"
>
<Icon size={14} style={{ color: item.color }} />
</span>
<span className="min-w-0 flex-1 truncate text-sm text-text-primary">
{translateCategoryName(item.name)}
</span>
<span className="shrink-0 text-sm font-medium tabular-nums text-text-primary">
{formatCurrency(item.amount)}
</span>
<span className="flex h-4 w-4 shrink-0 items-center justify-center text-text-muted">
{hasChildren ? isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} /> : null}
</span>
<span
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
style={{ backgroundColor: `${item.color}26` }}
>
<Icon size={14} style={{ color: item.color }} />
</span>
<span className="min-w-0 flex-1 truncate text-sm text-text-primary">
{translateCategoryName(item.name)}
</span>
<span className="shrink-0 text-sm font-medium tabular-nums text-text-primary">
{formatCurrency(item.amount)}
</span>
</button>
{hasChildren && isExpanded && (
<ul className="ml-11 mt-1 space-y-1 border-l border-gridline pl-3">
{item.children.map((child) => (
<li key={child.category_id} className="flex items-center gap-2 text-xs">
<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: child.color }} />
<span className="min-w-0 flex-1 truncate text-text-secondary">
{childLabel(child, item.category_id, t)}
</span>
<span className="shrink-0 tabular-nums text-text-secondary">
{formatCurrency(child.amount)}
</span>
</li>
))}
</ul>
)}
</li>
);
})}