86 lines
1.8 KiB
TypeScript
86 lines
1.8 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Button, Paper, Stack, Text } from "@mantine/core";
|
|
import { StateView } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
|
|
import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
|
|
|
|
import { formatMoney } from "@/shared/lib";
|
|
|
|
type IncomeSummaryProps = { moreLabel?: string } & (
|
|
| {
|
|
state: "empty";
|
|
to: string;
|
|
}
|
|
| { state: "error"; to: string }
|
|
| {
|
|
state: "loaded";
|
|
summary: IncomeSummaryData;
|
|
to: string;
|
|
}
|
|
| {
|
|
state: "loading";
|
|
to: string;
|
|
}
|
|
| {
|
|
state: "partial";
|
|
to: string;
|
|
}
|
|
);
|
|
|
|
const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
if (props.state === "loading" || props.state === "partial")
|
|
return (
|
|
<Text c="dimmed" role="status">
|
|
{t(
|
|
props.state === "partial"
|
|
? "investment.partial"
|
|
: "income.summaryLoading",
|
|
)}
|
|
</Text>
|
|
);
|
|
if (props.state === "error")
|
|
return (
|
|
<StateView
|
|
error
|
|
text={t("income.errorText")}
|
|
title={t("income.summaryError")}
|
|
/>
|
|
);
|
|
if (props.state === "empty")
|
|
return (
|
|
<Stack gap="xs">
|
|
<Text c="dimmed">{t("income.summaryEmpty")}</Text>
|
|
|
|
<Button component={Link} to={props.to} variant="subtle">
|
|
{props.moreLabel ?? t("income.open")}
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
|
|
return (
|
|
<Stack gap="xs">
|
|
{props.summary.totalsByCurrency.map(total => (
|
|
<Paper key={total.currency} p="sm" 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>
|
|
))}
|
|
|
|
<Button component={Link} to={props.to} variant="subtle">
|
|
{props.moreLabel ?? t("income.open")}
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { IncomeSummary };
|