77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import {
|
|
Alert,
|
|
Button,
|
|
Group,
|
|
Loader,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import type { FC } from "react";
|
|
import { FormProvider } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StateView } from "@/shared/ui";
|
|
import classes from "../AccountIncomePage.module.css";
|
|
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
|
import { IncomeComparisons } from "./IncomeComparisons.view";
|
|
import { IncomePayments } from "./IncomePayments.view";
|
|
import { IncomePeriodForm } from "./IncomePeriodForm.view";
|
|
import { IncomeSummary } from "./IncomeSummary.view";
|
|
|
|
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
|
|
|
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
|
const {
|
|
analytics,
|
|
display,
|
|
form,
|
|
refreshing,
|
|
refreshError,
|
|
retry,
|
|
onSubmit,
|
|
onReset,
|
|
} = props;
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Stack maw={960} gap="lg" className={classes.page}>
|
|
<Title order={1}>{t("income.title")}</Title>
|
|
<FormProvider {...form}>
|
|
<IncomePeriodForm
|
|
key={props.formRevision}
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
onReset={onReset}
|
|
/>
|
|
</FormProvider>
|
|
{refreshing ? (
|
|
<Group gap="xs" role="status" aria-label={t("income.refreshing")}>
|
|
<Loader size="sm" />
|
|
<Text>{t("income.refreshing")}</Text>
|
|
</Group>
|
|
) : null}
|
|
{refreshError ? (
|
|
<Alert color="orange">
|
|
<Stack gap="sm">
|
|
<Text>{t("income.refreshError")}</Text>
|
|
<Button onClick={retry} variant="default">
|
|
{t("income.retry")}
|
|
</Button>
|
|
</Stack>
|
|
</Alert>
|
|
) : null}
|
|
{analytics.totalsByCurrency.length ? (
|
|
<IncomeSummary totals={analytics.totalsByCurrency} />
|
|
) : (
|
|
<StateView
|
|
title={t("income.emptyTitle")}
|
|
text={t("income.emptyText")}
|
|
/>
|
|
)}
|
|
<Alert color="blue">{t("income.taxBoundary")}</Alert>
|
|
<IncomeComparisons comparison={display.comparison} />
|
|
<IncomePayments entries={display.entries} />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export { AccountIncomePageLoaded };
|