mercury-web/src/features/accounting/MonthNav.tsx
Munkherdene e478ca5826 feat(web): transactions month nav + category filters + categorize-review queue
Adds a month navigator and category filter chips to the Тооцоо list, plus a
categorize-review flow at /accounting/review for bulk-assigning categories to
uncategorized merchants (grouped by matchKey, biggest spend first).
2026-08-22 23:00:09 +08:00

42 lines
1.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import type { CSSProperties } from "react";
import { Icon } from "@/ds/icons";
const navButtonStyle: CSSProperties = {
all: "unset",
cursor: "pointer",
width: 32,
height: 32,
flexShrink: 0,
borderRadius: 10,
display: "grid",
placeItems: "center",
color: "var(--seed-color-fg-neutral)",
};
export interface MonthNavProps {
/** e.g. "2026 оны 8-р сар" (see `monthLabel`). */
label: string;
onPrev: () => void;
onNext: () => void;
prevLabel?: string;
nextLabel?: string;
}
/** [month] — the month navigator above the Тооцоо list. Ports the
* `monthRow` control from `TransactionsView.swift` (narrowed to just the
* month stepper, no week/month panel toggle). */
export function MonthNav({ label, onPrev, onNext, prevLabel = "Өмнөх сар", nextLabel = "Дараагийн сар" }: MonthNavProps) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 4 }}>
<button type="button" onClick={onPrev} aria-label={prevLabel} style={navButtonStyle}>
<Icon name="chevron-left" size={16} />
</button>
<span style={{ fontSize: 17, fontWeight: 700, minWidth: 150, textAlign: "center" }}>{label}</span>
<button type="button" onClick={onNext} aria-label={nextLabel} style={navButtonStyle}>
<Icon name="chevron-right" size={16} />
</button>
</div>
);
}