55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Stack, Title } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
brokerageOperationGroupKey,
|
|
LedgerEntryRow,
|
|
OperationGroup,
|
|
} from "@/entities/broker-operation";
|
|
import { groupItems } from "@/shared/lib";
|
|
|
|
import type { IncomeDisplayModel } from "../../../model/display";
|
|
|
|
import classes from "../AccountIncomePage.module.css";
|
|
|
|
type IncomePaymentsProps = {
|
|
allAccounts?: boolean;
|
|
entries: IncomeDisplayModel["entries"];
|
|
totalVisible?: boolean;
|
|
};
|
|
|
|
const IncomePayments: FC<IncomePaymentsProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack aria-label={t("income.payments")} component="section">
|
|
<Title order={2}>{t("income.payments")}</Title>
|
|
|
|
<Stack className={classes.entries} component="ul" gap="sm">
|
|
{groupItems(
|
|
props.entries,
|
|
entry => props.allAccounts
|
|
? brokerageOperationGroupKey(entry.operation)
|
|
: null,
|
|
).map(entry => entry.type === "group"
|
|
? (
|
|
<OperationGroup
|
|
entries={entry.items}
|
|
key={entry.key}
|
|
totalVisible={props.totalVisible === true}
|
|
/>
|
|
)
|
|
: (
|
|
<li key={entry.item.key}>
|
|
<LedgerEntryRow operation={entry.item.operation} wrap />
|
|
</li>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { IncomePayments };
|