34 lines
876 B
TypeScript
34 lines
876 B
TypeScript
import type { FC } from "react";
|
|
|
|
import { Paper, Stack, Text, Title } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { IncomeAnalytics } from "@/entities/income";
|
|
|
|
import { formatMoney } from "@/shared/lib";
|
|
|
|
type IncomeSummaryProps = { totals: IncomeAnalytics["totalsByCurrency"] };
|
|
|
|
const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack>
|
|
<Title order={2}>{t("income.summaryTitle")}</Title>
|
|
|
|
{props.totals.map(total => (
|
|
<Paper key={total.currency} p="md" radius="md" withBorder>
|
|
<Text fw={700}>{formatMoney(total.total)}</Text>
|
|
|
|
<Text c="dimmed" size="sm">
|
|
{t("income.coupon")}: {formatMoney(total.coupon)} ·{" "}
|
|
{t("income.dividend")}: {formatMoney(total.dividend)}
|
|
</Text>
|
|
</Paper>
|
|
))}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { IncomeSummary };
|