fix: sort category lists alphabetically on the Categories page

Expense/income lists were rendered in server sort_order (chart palette
slot order), which looks arbitrary for browsing/managing categories.
Sorts by translated name instead, locale-aware — same approach
BudgetFormModal's category picker already uses. Display-only; sort_order
itself is untouched since the dashboard donut chart still relies on it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ZProger
2026-08-24 23:56:54 +03:00
parent 2c6fcd628c
commit 79e4ebb06b
2 changed files with 13 additions and 4 deletions

View File

@@ -1,7 +1,7 @@
{
"name": "aurum-frontend",
"private": true,
"version": "0.23.1",
"version": "0.23.2",
"type": "module",
"scripts": {
"dev": "vite",

View File

@@ -5,11 +5,20 @@ import { Button } from "@/components/ui/Button";
import { CategoryFormModal } from "@/components/categories/CategoryFormModal";
import { CategoryList } from "@/components/categories/CategoryList";
import { useCategories, useDeleteCategory } from "@/hooks/useCategories";
import { translateCategoryName } from "@/lib/categoryLabels";
import { useTranslation } from "@/lib/i18n";
import type { Category, CategoryKind } from "@/types";
// Alphabetical by displayed (translated) name — same locale-aware sort
// BudgetFormModal's category picker uses, so a default category shown as
// its localized name sorts by that, not its raw stored English name.
function byName(language: string) {
return (a: Category, b: Category) =>
translateCategoryName(a.name).localeCompare(translateCategoryName(b.name), language);
}
export function CategoriesPage() {
const { t } = useTranslation();
const { t, language } = useTranslation();
const { data: categories, isLoading } = useCategories();
const deleteCategory = useDeleteCategory();
@@ -38,8 +47,8 @@ export function CategoriesPage() {
}
}
const expenseCategories = (categories ?? []).filter((category) => category.kind === "expense");
const incomeCategories = (categories ?? []).filter((category) => category.kind === "income");
const expenseCategories = (categories ?? []).filter((category) => category.kind === "expense").sort(byName(language));
const incomeCategories = (categories ?? []).filter((category) => category.kind === "income").sort(byName(language));
return (
<div className="space-y-5">