(null);
+ const [confirmOpen, setConfirmOpen] = useState(false);
+ const [editingNote, setEditingNote] = useState(false);
+ const [noteDraft, setNoteDraft] = useState("");
+
+ useEffect(() => {
+ setAssignedCategory(null);
+ setDisplayTitle(null);
+ setNoteOverride(null);
+ setRenaming(false);
+ setEditingNote(false);
+ }, [id]);
+
+ if (!txn) {
+ return (
+
+
router.push("/accounting")} />
+
+ {s.detail.notFound}
+
+
+ setRenaming(false)}
+ onSave={(name) => {
+ setRenaming(false);
+ setPendingName(name);
+ setConfirmOpen(true);
+ }}
+ />
+
+ );
+ }
+
+ return (
+
+
router.push("/accounting")} />
+
+
+
+
+ {title || category}
+
+ {category}
+
+
+ {signedAmount}
+
+
+
+
+
+
+ setPickerOpen(true)} />
+ setRenaming(true)} />
+ {txn.balanceAfter != null && (
+
+ )}
+
+ {canNote &&
+ (editingNote ? (
+
+
+
+
+
+ setEditingNote(false)}>
+ {s.detail.noteCancel}
+
+
+ {s.detail.noteSave}
+
+
+
+ {label}
+
+ {hidden ? MASKED : tugrikRaw(value)}
+
+
+ );
+}
+
+function TxnRow({ txn, hidden }: { txn: Txn; hidden: boolean }) {
+ const income = txn.direction === "income";
+ const isTransfer = txn.transfer === true;
+ const sign = income ? "+" : "−";
+ const amountText = hidden ? MASKED : `${sign}${tugrikRaw(txn.amount)}`;
+ const amountColor = isTransfer
+ ? "var(--seed-color-fg-neutral-muted, #8b8b8b)"
+ : income
+ ? "var(--mercury-success, #1e9e6b)"
+ : "var(--mercury-critical, #e5484d)";
+
+ return (
+
+
+
+ {txn.title || txn.category}
+
+
+ {isTransfer ? `${txn.category} · ${s.list.transferTag}` : txn.category}
+
+
+ {amountText}
+
+ );
+}
+
+/**
+ * The Тооцоо list: income/expense totals for the loaded month, then the
+ * transaction rows grouped by day. Mirrors `TransactionsView.ledgerTab` /
+ * `TransactionsModel.recompute` (narrowed to this task's scope — no month
+ * nav or category chips): salary deposits (`salary === true`) are hidden by
+ * default, and transfers are excluded from the totals and tagged in the row
+ * meta line instead of colored green/red.
+ */
+export function TransactionList() {
+ const { data, isLoading } = useTransactions();
+ const all = useMemo(() => data ?? [], [data]);
+ const hidden = useHiddenAmounts();
+
+ const totals = useMemo(() => {
+ let income = 0;
+ let expense = 0;
+ for (const txn of all) {
+ if (txn.transfer === true) continue;
+ if (txn.direction === "income") income += amountOf(txn);
+ else expense += amountOf(txn);
+ }
+ return { income, expense };
+ }, [all]);
+
+ const visible = useMemo(() => all.filter((txn) => txn.salary !== true), [all]);
+ const groups = useMemo(() => groupByDay(visible), [visible]);
+
+ return (
+
+
+
{s.list.title}
+
+
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : groups.length === 0 ? (
+
+ {s.list.empty}
+
+ ) : (
+
+ {groups.map((group) => (
+
+
+ {group.label}
+
+
+ {group.items.map((txn, i) => (
+
+ ))}
+
+
+ )}
+