131 lines
2.8 KiB
TypeScript
131 lines
2.8 KiB
TypeScript
import type { CSSProperties, FC } from "react";
|
|
|
|
import { Skeleton, Stack, Text, Title } from "@mantine/core";
|
|
import { OperationIcon } from "@wealthledger/icons";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { formatMoney } from "@/shared/lib";
|
|
|
|
import type { BankSummary } from "../../api/types";
|
|
|
|
import { bankOperationAppearance } from "../../model/operation-appearance";
|
|
import classes from "./BankSummary.module.css";
|
|
|
|
const CATEGORY_COLUMNS = 2;
|
|
|
|
type BankSummaryViewProps = {
|
|
all?: boolean;
|
|
data?: BankSummary;
|
|
error: boolean;
|
|
fetching: boolean;
|
|
loading: boolean;
|
|
};
|
|
|
|
const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
if (props.data) {
|
|
if (props.data.categories.length > 0) {
|
|
return (
|
|
<dl
|
|
className={classes.categories}
|
|
style={
|
|
{
|
|
"--category-rows": Math.ceil(
|
|
props.data.categories.length / CATEGORY_COLUMNS,
|
|
),
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
{props.data.categories.map(category => (
|
|
<div className={classes.category} key={category.categoryId}>
|
|
<dt className={classes.label}>
|
|
<OperationIcon
|
|
{...bankOperationAppearance("expense", category.categoryName)}
|
|
/>
|
|
|
|
<span>{category.categoryName}</span>
|
|
</dt>
|
|
|
|
<dd className={classes.amount}>
|
|
{formatMoney(category.net, { withZeroCents: true })}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Text c="dimmed" size="sm">
|
|
{t("bank.noExpenses")}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
if (props.loading) {
|
|
return (
|
|
<LoadingSkeleton label={t("bank.loading")}>
|
|
<Stack gap="sm">
|
|
<Skeleton h={32} w="35%" />
|
|
|
|
<Skeleton h={40} />
|
|
|
|
<Skeleton h={40} />
|
|
</Stack>
|
|
</LoadingSkeleton>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Stack aria-busy={props.loading || props.fetching} gap="md">
|
|
<div className={classes.header}>
|
|
<Title order={2}>
|
|
{t(props.all ? "bank.allSummary" : "bank.summary")}
|
|
</Title>
|
|
|
|
{props.data && (
|
|
<dl className={classes.totals}>
|
|
<div>
|
|
<dt>{t("bank.summary")}</dt>
|
|
|
|
<dd>
|
|
{formatMoney(props.data.expenses, { withZeroCents: true })}
|
|
</dd>
|
|
</div>
|
|
|
|
<div>
|
|
<dt>{t("bank.refunds")}</dt>
|
|
|
|
<dd>
|
|
{formatMoney(props.data.refunds, { withZeroCents: true })}
|
|
</dd>
|
|
</div>
|
|
|
|
<div>
|
|
<dt>{t("bank.net")}</dt>
|
|
|
|
<dd className={classes.total}>
|
|
{formatMoney(props.data.net, { withZeroCents: true })}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
)}
|
|
</div>
|
|
|
|
<BankSummaryViewCategories {...props} />
|
|
|
|
{props.error && !props.data && <Text role="alert">{t("bank.error")}</Text>}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { BankSummaryView };
|