refactor: align frontend ownership boundaries
Close audit gaps across API drift, query policy, UI, and tests.
This commit is contained in:
@@ -1,13 +1,14 @@
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { HttpResponse, http } from "msw";
|
||||
import type { FC, PropsWithChildren } from "react";
|
||||
import { MemoryRouter, Route, Routes } from "react-router";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import type { IncomeAnalytics } from "@/entities/income";
|
||||
import { configureAuthClient } from "@/shared/api";
|
||||
import { createQueryWrapper } from "@/test/query";
|
||||
import { server } from "@/test/server";
|
||||
import { AccountIncomePage } from "./AccountIncomePage";
|
||||
import { isDate, toIncomeDisplayModel } from "./AccountIncomePage.vm";
|
||||
|
||||
const analytics = {
|
||||
accountId: "account-1",
|
||||
@@ -41,7 +42,7 @@ const analytics = {
|
||||
},
|
||||
],
|
||||
entries: [entry()],
|
||||
};
|
||||
} satisfies IncomeAnalytics;
|
||||
|
||||
function money(currency: string, value: string) {
|
||||
return { currency, value };
|
||||
@@ -65,7 +66,7 @@ function comparison(currency: string) {
|
||||
};
|
||||
}
|
||||
|
||||
function entry() {
|
||||
function entry(): IncomeAnalytics["entries"][number] {
|
||||
return {
|
||||
id: "coupon-1",
|
||||
occurredAt: "2026-08-01T12:00:00Z",
|
||||
@@ -91,36 +92,45 @@ function renderPage() {
|
||||
refresh: async () => true,
|
||||
clear: vi.fn(),
|
||||
});
|
||||
const Wrapper: FC<PropsWithChildren> = (props) => (
|
||||
<MantineProvider>
|
||||
<QueryClientProvider client={new QueryClient()}>
|
||||
{props.children}
|
||||
</QueryClientProvider>
|
||||
</MantineProvider>
|
||||
);
|
||||
const { wrapper: QueryWrapper } = createQueryWrapper();
|
||||
return render(
|
||||
<Wrapper>
|
||||
<MemoryRouter
|
||||
initialEntries={[
|
||||
"/accounts/account-1/income?from=2026-08-01&to=2026-08-27",
|
||||
]}
|
||||
>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/accounts/:accountId/income"
|
||||
element={<AccountIncomePage />}
|
||||
/>
|
||||
<Route path="/accounts/:accountId/events" element={<h1>Events</h1>} />
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
</Wrapper>,
|
||||
<MantineProvider>
|
||||
<QueryWrapper>
|
||||
<MemoryRouter
|
||||
initialEntries={[
|
||||
"/accounts/account-1/income?from=2026-08-01&to=2026-08-27",
|
||||
]}
|
||||
>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/accounts/:accountId/income"
|
||||
element={<AccountIncomePage />}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/events"
|
||||
element={<h1>Events</h1>}
|
||||
/>
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
</QueryWrapper>
|
||||
</MantineProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("AccountIncomePage", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
configureAuthClient(null);
|
||||
it("rejects malformed calendar dates without throwing", () => {
|
||||
expect(isDate("2026-99-99")).toBe(false);
|
||||
expect(isDate("2026-02-29")).toBe(false);
|
||||
expect(isDate("2024-02-29")).toBe(true);
|
||||
});
|
||||
|
||||
it("groups income entries once in the view model", () => {
|
||||
const display = toIncomeDisplayModel(analytics);
|
||||
|
||||
expect(display.instruments[0].entries).toEqual([analytics.entries[0]]);
|
||||
expect(display.trend[0].buckets[0].total).toEqual(
|
||||
analytics.buckets[0].totalsByCurrency[0],
|
||||
);
|
||||
});
|
||||
|
||||
it("renders realized analytics, drill-down, and the independent forecast", async () => {
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import type { FC } from "react";
|
||||
import {
|
||||
AccountIncomePageError,
|
||||
AccountIncomePageLoaded,
|
||||
AccountIncomePageLoading,
|
||||
} from "./AccountIncomePage.view";
|
||||
import { useAccountIncomePageViewModel } from "./AccountIncomePage.vm";
|
||||
import { AccountIncomePageError } from "./components/AccountIncomePageError.view";
|
||||
import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view";
|
||||
import { AccountIncomePageLoading } from "./components/AccountIncomePageLoading.view";
|
||||
|
||||
const AccountIncomePage: FC = () => {
|
||||
const viewModel = useAccountIncomePageViewModel();
|
||||
|
||||
@@ -1,388 +0,0 @@
|
||||
import {
|
||||
Accordion,
|
||||
Alert,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
SegmentedControl,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
import { LedgerEntryRow } from "@/entities/broker-operation";
|
||||
import type { BrokerageEvent } from "@/entities/brokerage-event";
|
||||
import type { IncomeAnalytics } from "@/entities/income";
|
||||
import { formatMoney } from "@/entities/portfolio";
|
||||
import { LoadingSkeleton, StateView } from "@/shared/ui";
|
||||
import styles from "./AccountIncomePage.module.css";
|
||||
import type { AccountIncomePageViewModel } from "./AccountIncomePage.vm";
|
||||
|
||||
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
||||
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
|
||||
|
||||
const AccountIncomePageLoading: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<LoadingSkeleton label={t("states.loadingTitle")}>
|
||||
<Skeleton height={32} width="40%" />
|
||||
<Skeleton height={120} radius="md" />
|
||||
<Skeleton height={260} radius="md" />
|
||||
</LoadingSkeleton>
|
||||
);
|
||||
};
|
||||
|
||||
const AccountIncomePageError: FC<ErrorProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("income.errorTitle")}
|
||||
text={t("income.errorText")}
|
||||
action={<Button onClick={props.retry}>{t("income.retry")}</Button>}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
||||
const { analytics, form, forecast, onSubmit, onReset } = props;
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack maw={960} gap="lg">
|
||||
<Title order={1}>{t("income.title")}</Title>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<Group align="end">
|
||||
<TextInput
|
||||
error={form.formState.errors.from?.message}
|
||||
label={t("income.from")}
|
||||
type="date"
|
||||
{...form.register("from")}
|
||||
/>
|
||||
<TextInput
|
||||
error={form.formState.errors.to?.message}
|
||||
label={t("income.to")}
|
||||
type="date"
|
||||
{...form.register("to")}
|
||||
/>
|
||||
<Button type="submit">{t("income.apply")}</Button>
|
||||
<Button onClick={onReset} variant="subtle">
|
||||
{t("income.reset")}
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
<Text c="dimmed">
|
||||
{analytics.period.from} — {analytics.period.to}
|
||||
</Text>
|
||||
{analytics.totalsByCurrency.length ? (
|
||||
<IncomeSummary totals={analytics.totalsByCurrency} />
|
||||
) : (
|
||||
<StateView
|
||||
title={t("income.emptyTitle")}
|
||||
text={t("income.emptyText")}
|
||||
/>
|
||||
)}
|
||||
<Alert color="blue">{t("income.taxBoundary")}</Alert>
|
||||
<IncomeComparisons analytics={analytics} />
|
||||
<IncomeTrend analytics={analytics} />
|
||||
<IncomeBreakdown analytics={analytics} />
|
||||
<IncomeForecast forecast={forecast} />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const IncomeSummary: FC<{ totals: IncomeAnalytics["totalsByCurrency"] }> = (
|
||||
props,
|
||||
) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack>
|
||||
{props.totals.map((total) => (
|
||||
<Paper key={total.currency} p="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>
|
||||
);
|
||||
};
|
||||
|
||||
const IncomeComparisons: FC<{ analytics: IncomeAnalytics }> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.comparisons")}</Title>
|
||||
<Comparison
|
||||
title={t("income.previous", {
|
||||
from: props.analytics.previous.period.from,
|
||||
to: props.analytics.previous.period.to,
|
||||
})}
|
||||
values={props.analytics.previous.totalsByCurrency}
|
||||
/>
|
||||
{props.analytics.yearComparison ? (
|
||||
<Comparison
|
||||
title={t("income.yearAgo", {
|
||||
from: props.analytics.yearComparison.period.from,
|
||||
to: props.analytics.yearComparison.period.to,
|
||||
})}
|
||||
values={props.analytics.yearComparison.totalsByCurrency}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed">{t("income.yearUnavailable")}</Text>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const Comparison: FC<{
|
||||
title: string;
|
||||
values: IncomeAnalytics["previous"]["totalsByCurrency"];
|
||||
}> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Paper p="sm" withBorder>
|
||||
<Text fw={700}>{props.title}</Text>
|
||||
{props.values.map((value) => (
|
||||
<Stack gap={2} key={value.currency}>
|
||||
<Text size="sm">{value.currency}</Text>
|
||||
<Text size="sm">
|
||||
{t("income.selected")}: {t("income.coupon")}{" "}
|
||||
{formatMoney(value.selected.coupon)} · {t("income.dividend")}{" "}
|
||||
{formatMoney(value.selected.dividend)} · {t("income.total")}{" "}
|
||||
{formatMoney(value.selected.total)}
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
{t("income.compared")}: {t("income.coupon")}{" "}
|
||||
{formatMoney(value.compared.coupon)} · {t("income.dividend")}{" "}
|
||||
{formatMoney(value.compared.dividend)} · {t("income.total")}{" "}
|
||||
{formatMoney(value.compared.total)}
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
{t("income.difference")}: {t("income.coupon")}{" "}
|
||||
{formatMoney(value.difference.coupon)} · {t("income.dividend")}{" "}
|
||||
{formatMoney(value.difference.dividend)} · {t("income.total")}{" "}
|
||||
{formatMoney(value.difference.total)}
|
||||
</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
const IncomeTrend: FC<{ analytics: IncomeAnalytics }> = (props) => {
|
||||
const currencies = props.analytics.totalsByCurrency.map(
|
||||
(total) => total.currency,
|
||||
);
|
||||
const [currency, setCurrency] = useState(currencies[0] ?? "");
|
||||
const { t } = useTranslation();
|
||||
const buckets = props.analytics.buckets.map((bucket) => ({
|
||||
period: bucket.period,
|
||||
total:
|
||||
bucket.totalsByCurrency.find((item) => item.currency === currency) ??
|
||||
zeroSummary(currency),
|
||||
}));
|
||||
const values = buckets.map((bucket) => ({
|
||||
...bucket,
|
||||
coupon: Number(bucket.total.coupon.value),
|
||||
dividend: Number(bucket.total.dividend.value),
|
||||
}));
|
||||
const scale = Math.max(
|
||||
1,
|
||||
...values.map((value) =>
|
||||
Math.max(
|
||||
positive(value.coupon) + positive(value.dividend),
|
||||
negative(value.coupon) + negative(value.dividend),
|
||||
),
|
||||
),
|
||||
);
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.trend")}</Title>
|
||||
{currencies.length > 1 ? (
|
||||
<SegmentedControl
|
||||
aria-label={t("income.currency")}
|
||||
data={currencies}
|
||||
onChange={setCurrency}
|
||||
value={currency}
|
||||
/>
|
||||
) : null}
|
||||
<div aria-hidden="true" className={styles.trendChart}>
|
||||
{values.map((value) => (
|
||||
<div className={styles.trendColumn} key={value.period.from}>
|
||||
<span className={styles.baseline} />
|
||||
<div className={styles.positiveStack}>
|
||||
{value.coupon > 0 ? (
|
||||
<span
|
||||
className={styles.coupon}
|
||||
data-testid={`trend-positive-coupon-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.coupon, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
{value.dividend > 0 ? (
|
||||
<span
|
||||
className={styles.dividend}
|
||||
data-testid={`trend-positive-dividend-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.dividend, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles.negativeStack}>
|
||||
{value.coupon < 0 ? (
|
||||
<span
|
||||
className={styles.coupon}
|
||||
data-testid={`trend-negative-coupon-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.coupon, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
{value.dividend < 0 ? (
|
||||
<span
|
||||
className={styles.dividend}
|
||||
data-testid={`trend-negative-dividend-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.dividend, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Stack gap={2}>
|
||||
{buckets.map((bucket) => (
|
||||
<Text key={bucket.period.from} size="sm">
|
||||
{bucket.period.from} — {bucket.period.to}: {t("income.coupon")}{" "}
|
||||
{formatMoney(bucket.total?.coupon ?? null)}, {t("income.dividend")}{" "}
|
||||
{formatMoney(bucket.total?.dividend ?? null)}
|
||||
</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const IncomeBreakdown: FC<{ analytics: IncomeAnalytics }> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.instruments")}</Title>
|
||||
<Accordion>
|
||||
{props.analytics.instruments.map((instrument) => (
|
||||
<Accordion.Item key={instrument.key} value={instrument.key}>
|
||||
<Accordion.Control>
|
||||
{instrument.displayName} · {formatMoney(instrument.total)} ·{" "}
|
||||
{instrument.receiptCount}
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Text size="sm">
|
||||
{t("income.coupon")}: {formatMoney(instrument.coupon)} ·{" "}
|
||||
{t("income.dividend")}: {formatMoney(instrument.dividend)}
|
||||
</Text>
|
||||
<Stack mt="sm">
|
||||
{props.analytics.entries
|
||||
.filter((entry) => entryKey(entry) === instrument.key)
|
||||
.map((entry) => (
|
||||
<LedgerEntryRow key={entry.id} operation={entry} />
|
||||
))}
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
</Accordion>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const IncomeForecast: FC<{ forecast: LoadedProps["forecast"] }> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
if (props.forecast.state === "loading")
|
||||
return <Text c="dimmed">{t("income.forecastLoading")}</Text>;
|
||||
if (props.forecast.state === "error")
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("income.forecastError")}
|
||||
text={t("income.errorText")}
|
||||
action={
|
||||
<Button onClick={props.forecast.retry}>{t("income.retry")}</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
if (props.forecast.state === "empty")
|
||||
return (
|
||||
<StateView
|
||||
title={t("income.forecastTitle")}
|
||||
text={t("income.forecastEmpty")}
|
||||
/>
|
||||
);
|
||||
if (props.forecast.state !== "loaded") return null;
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.forecastTitle")}</Title>
|
||||
<Alert color="yellow">{t("income.forecastWarning")}</Alert>
|
||||
{props.forecast.totals.map((total) => (
|
||||
<Text key={total.currency} fw={700}>
|
||||
{formatMoney(total)}
|
||||
</Text>
|
||||
))}
|
||||
{props.forecast.events.map((event) => (
|
||||
<ForecastEvent
|
||||
event={event}
|
||||
key={`${event.type}-${event.date}-${event.ticker}`}
|
||||
/>
|
||||
))}
|
||||
<Button component={Link} to="../events" variant="subtle">
|
||||
{t("events.open")}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const ForecastEvent: FC<{ event: BrokerageEvent }> = (props) => (
|
||||
<Paper p="sm" withBorder>
|
||||
<Text fw={700}>{props.event.displayName}</Text>
|
||||
<Text size="sm">
|
||||
{props.event.date} · {formatMoney(props.event.projectedAmount)}
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
function entryKey(entry: IncomeAnalytics["entries"][number]): string {
|
||||
const base = entry.instrumentUid
|
||||
? `uid:${entry.instrumentUid}`
|
||||
: entry.figi
|
||||
? `figi:${entry.figi}`
|
||||
: entry.ticker || entry.instrumentType
|
||||
? `ticker:${entry.ticker ?? ""}:${entry.instrumentType ?? ""}`
|
||||
: `operation:${entry.id}`;
|
||||
return `${base}:${entry.payment?.currency ?? ""}`;
|
||||
}
|
||||
|
||||
function zeroSummary(
|
||||
currency: string,
|
||||
): IncomeAnalytics["totalsByCurrency"][number] {
|
||||
const zero = { currency, value: "0" };
|
||||
return { currency, coupon: zero, dividend: zero, total: zero };
|
||||
}
|
||||
|
||||
function positive(value: number): number {
|
||||
return Math.max(0, value);
|
||||
}
|
||||
|
||||
function negative(value: number): number {
|
||||
return Math.max(0, -value);
|
||||
}
|
||||
|
||||
function chartHeight(value: number, scale: number): string {
|
||||
return `${(Math.abs(value) / scale) * 100}%`;
|
||||
}
|
||||
|
||||
export {
|
||||
AccountIncomePageError,
|
||||
AccountIncomePageLoaded,
|
||||
AccountIncomePageLoading,
|
||||
};
|
||||
@@ -20,12 +20,26 @@ type IncomeForecast =
|
||||
events: BrokerageEvent[];
|
||||
};
|
||||
|
||||
type IncomeDisplayModel = {
|
||||
trend: {
|
||||
currency: string;
|
||||
buckets: {
|
||||
period: IncomeAnalytics["buckets"][number]["period"];
|
||||
total: IncomeAnalytics["totalsByCurrency"][number];
|
||||
}[];
|
||||
}[];
|
||||
instruments: (IncomeAnalytics["instruments"][number] & {
|
||||
entries: IncomeAnalytics["entries"];
|
||||
})[];
|
||||
};
|
||||
|
||||
type AccountIncomePageViewModel =
|
||||
| { state: "loading" }
|
||||
| { state: "error"; retry: () => void; period: IncomePeriod }
|
||||
| {
|
||||
state: "loaded";
|
||||
analytics: IncomeAnalytics;
|
||||
display: IncomeDisplayModel;
|
||||
forecast: IncomeForecast;
|
||||
form: ReturnType<typeof useForm<IncomeForm>>;
|
||||
onReset: () => void;
|
||||
@@ -81,6 +95,7 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
|
||||
return {
|
||||
state: "loaded",
|
||||
analytics: analytics.data,
|
||||
display: toIncomeDisplayModel(analytics.data),
|
||||
forecast: toForecast(events),
|
||||
form,
|
||||
onSubmit,
|
||||
@@ -126,12 +141,59 @@ function validPeriod(period: IncomePeriod): period is IncomePeriod {
|
||||
}
|
||||
|
||||
function isDate(value: string): boolean {
|
||||
if (!datePattern.test(value)) return false;
|
||||
const parsed = new Date(`${value}T00:00:00Z`);
|
||||
return (
|
||||
datePattern.test(value) &&
|
||||
new Date(`${value}T00:00:00Z`).toISOString().slice(0, 10) === value
|
||||
Number.isFinite(parsed.valueOf()) &&
|
||||
parsed.toISOString().slice(0, 10) === value
|
||||
);
|
||||
}
|
||||
|
||||
function toIncomeDisplayModel(analytics: IncomeAnalytics): IncomeDisplayModel {
|
||||
const entriesByInstrument = new Map<string, IncomeAnalytics["entries"]>();
|
||||
for (const entry of analytics.entries) {
|
||||
const key = incomeEntryKey(entry);
|
||||
entriesByInstrument.set(key, [
|
||||
...(entriesByInstrument.get(key) ?? []),
|
||||
entry,
|
||||
]);
|
||||
}
|
||||
|
||||
return {
|
||||
trend: analytics.totalsByCurrency.map(({ currency }) => ({
|
||||
currency,
|
||||
buckets: analytics.buckets.map((bucket) => ({
|
||||
period: bucket.period,
|
||||
total:
|
||||
bucket.totalsByCurrency.find((item) => item.currency === currency) ??
|
||||
zeroSummary(currency),
|
||||
})),
|
||||
})),
|
||||
instruments: analytics.instruments.map((instrument) => ({
|
||||
...instrument,
|
||||
entries: entriesByInstrument.get(instrument.key) ?? [],
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
function incomeEntryKey(entry: IncomeAnalytics["entries"][number]): string {
|
||||
const base = entry.instrumentUid
|
||||
? `uid:${entry.instrumentUid}`
|
||||
: entry.figi
|
||||
? `figi:${entry.figi}`
|
||||
: entry.ticker || entry.instrumentType
|
||||
? `ticker:${entry.ticker ?? ""}:${entry.instrumentType ?? ""}`
|
||||
: `operation:${entry.id}`;
|
||||
return `${base}:${entry.payment?.currency ?? ""}`;
|
||||
}
|
||||
|
||||
function zeroSummary(
|
||||
currency: string,
|
||||
): IncomeAnalytics["totalsByCurrency"][number] {
|
||||
const zero = { currency, value: "0" };
|
||||
return { currency, coupon: zero, dividend: zero, total: zero };
|
||||
}
|
||||
|
||||
function moscowDate(value: Date): string {
|
||||
const parts = new Intl.DateTimeFormat("en-CA", {
|
||||
timeZone: "Europe/Moscow",
|
||||
@@ -144,4 +206,9 @@ function moscowDate(value: Date): string {
|
||||
return `${part("year")}-${part("month")}-${part("day")}`;
|
||||
}
|
||||
|
||||
export { type AccountIncomePageViewModel, useAccountIncomePageViewModel };
|
||||
export {
|
||||
type AccountIncomePageViewModel,
|
||||
isDate,
|
||||
toIncomeDisplayModel,
|
||||
useAccountIncomePageViewModel,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Button } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StateView } from "@/shared/ui";
|
||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||
|
||||
type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
|
||||
|
||||
const AccountIncomePageError: FC<ErrorProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("income.errorTitle")}
|
||||
text={t("income.errorText")}
|
||||
action={<Button onClick={props.retry}>{t("income.retry")}</Button>}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { AccountIncomePageError };
|
||||
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StateView } from "@/shared/ui";
|
||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||
import { IncomeBreakdown } from "./IncomeBreakdown.view";
|
||||
import { IncomeComparisons } from "./IncomeComparisons.view";
|
||||
import { IncomeForecast } from "./IncomeForecast.view";
|
||||
import { IncomeSummary } from "./IncomeSummary.view";
|
||||
import { IncomeTrend } from "./IncomeTrend.view";
|
||||
|
||||
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
||||
|
||||
const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
|
||||
const { analytics, display, form, forecast, onSubmit, onReset } = props;
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack maw={960} gap="lg">
|
||||
<Title order={1}>{t("income.title")}</Title>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<Group align="end">
|
||||
<TextInput
|
||||
error={form.formState.errors.from?.message}
|
||||
label={t("income.from")}
|
||||
type="date"
|
||||
{...form.register("from")}
|
||||
/>
|
||||
<TextInput
|
||||
error={form.formState.errors.to?.message}
|
||||
label={t("income.to")}
|
||||
type="date"
|
||||
{...form.register("to")}
|
||||
/>
|
||||
<Button type="submit">{t("income.apply")}</Button>
|
||||
<Button onClick={onReset} variant="subtle">
|
||||
{t("income.reset")}
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
<Text c="dimmed">
|
||||
{analytics.period.from} — {analytics.period.to}
|
||||
</Text>
|
||||
{analytics.totalsByCurrency.length ? (
|
||||
<IncomeSummary totals={analytics.totalsByCurrency} />
|
||||
) : (
|
||||
<StateView
|
||||
title={t("income.emptyTitle")}
|
||||
text={t("income.emptyText")}
|
||||
/>
|
||||
)}
|
||||
<Alert color="blue">{t("income.taxBoundary")}</Alert>
|
||||
<IncomeComparisons analytics={analytics} />
|
||||
<IncomeTrend trend={display.trend} />
|
||||
<IncomeBreakdown instruments={display.instruments} />
|
||||
<IncomeForecast forecast={forecast} />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export { AccountIncomePageLoaded };
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Skeleton } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LoadingSkeleton } from "@/shared/ui";
|
||||
|
||||
const AccountIncomePageLoading: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<LoadingSkeleton label={t("states.loadingTitle")}>
|
||||
<Skeleton height={32} width="40%" />
|
||||
<Skeleton height={120} radius="md" />
|
||||
<Skeleton height={260} radius="md" />
|
||||
</LoadingSkeleton>
|
||||
);
|
||||
};
|
||||
|
||||
export { AccountIncomePageLoading };
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Accordion, Stack, Text, Title } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { LedgerEntryRow } from "@/entities/broker-operation";
|
||||
import { formatMoney } from "@/shared/lib";
|
||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||
|
||||
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
||||
type IncomeBreakdownProps = {
|
||||
instruments: LoadedProps["display"]["instruments"];
|
||||
};
|
||||
|
||||
const IncomeBreakdown: FC<IncomeBreakdownProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.instruments")}</Title>
|
||||
<Accordion>
|
||||
{props.instruments.map((instrument) => (
|
||||
<Accordion.Item key={instrument.key} value={instrument.key}>
|
||||
<Accordion.Control>
|
||||
{instrument.displayName} · {formatMoney(instrument.total)} ·{" "}
|
||||
{instrument.receiptCount}
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Text size="sm">
|
||||
{t("income.coupon")}: {formatMoney(instrument.coupon)} ·{" "}
|
||||
{t("income.dividend")}: {formatMoney(instrument.dividend)}
|
||||
</Text>
|
||||
<Stack mt="sm">
|
||||
{instrument.entries.map((entry) => (
|
||||
<LedgerEntryRow key={entry.id} operation={entry} />
|
||||
))}
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
</Accordion>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export { IncomeBreakdown };
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { IncomeAnalytics } from "@/entities/income";
|
||||
import { formatMoney } from "@/shared/lib";
|
||||
|
||||
type IncomeComparisonsProps = { analytics: IncomeAnalytics };
|
||||
type ComparisonProps = {
|
||||
title: string;
|
||||
values: IncomeAnalytics["previous"]["totalsByCurrency"];
|
||||
};
|
||||
|
||||
const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.comparisons")}</Title>
|
||||
<Comparison
|
||||
title={t("income.previous", {
|
||||
from: props.analytics.previous.period.from,
|
||||
to: props.analytics.previous.period.to,
|
||||
})}
|
||||
values={props.analytics.previous.totalsByCurrency}
|
||||
/>
|
||||
{props.analytics.yearComparison ? (
|
||||
<Comparison
|
||||
title={t("income.yearAgo", {
|
||||
from: props.analytics.yearComparison.period.from,
|
||||
to: props.analytics.yearComparison.period.to,
|
||||
})}
|
||||
values={props.analytics.yearComparison.totalsByCurrency}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed">{t("income.yearUnavailable")}</Text>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const Comparison: FC<ComparisonProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Paper p="sm" withBorder>
|
||||
<Text fw={700}>{props.title}</Text>
|
||||
{props.values.map((value) => (
|
||||
<Stack gap={2} key={value.currency}>
|
||||
<Text size="sm">{value.currency}</Text>
|
||||
<Text size="sm">
|
||||
{t("income.selected")}: {t("income.coupon")}{" "}
|
||||
{formatMoney(value.selected.coupon)} · {t("income.dividend")}{" "}
|
||||
{formatMoney(value.selected.dividend)} · {t("income.total")}{" "}
|
||||
{formatMoney(value.selected.total)}
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
{t("income.compared")}: {t("income.coupon")}{" "}
|
||||
{formatMoney(value.compared.coupon)} · {t("income.dividend")}{" "}
|
||||
{formatMoney(value.compared.dividend)} · {t("income.total")}{" "}
|
||||
{formatMoney(value.compared.total)}
|
||||
</Text>
|
||||
<Text size="sm">
|
||||
{t("income.difference")}: {t("income.coupon")}{" "}
|
||||
{formatMoney(value.difference.coupon)} · {t("income.dividend")}{" "}
|
||||
{formatMoney(value.difference.dividend)} · {t("income.total")}{" "}
|
||||
{formatMoney(value.difference.total)}
|
||||
</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export { IncomeComparisons };
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Alert, Button, Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
import type { BrokerageEvent } from "@/entities/brokerage-event";
|
||||
import { formatMoney } from "@/shared/lib";
|
||||
import { StateView } from "@/shared/ui";
|
||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||
|
||||
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
||||
type IncomeForecastProps = { forecast: LoadedProps["forecast"] };
|
||||
type ForecastEventProps = { event: BrokerageEvent };
|
||||
|
||||
const IncomeForecast: FC<IncomeForecastProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
if (props.forecast.state === "loading")
|
||||
return <Text c="dimmed">{t("income.forecastLoading")}</Text>;
|
||||
if (props.forecast.state === "error")
|
||||
return (
|
||||
<StateView
|
||||
error
|
||||
title={t("income.forecastError")}
|
||||
text={t("income.errorText")}
|
||||
action={
|
||||
<Button onClick={props.forecast.retry}>{t("income.retry")}</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
if (props.forecast.state === "empty")
|
||||
return (
|
||||
<StateView
|
||||
title={t("income.forecastTitle")}
|
||||
text={t("income.forecastEmpty")}
|
||||
/>
|
||||
);
|
||||
if (props.forecast.state !== "loaded") return null;
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.forecastTitle")}</Title>
|
||||
<Alert color="yellow">{t("income.forecastWarning")}</Alert>
|
||||
{props.forecast.totals.map((total) => (
|
||||
<Text key={total.currency} fw={700}>
|
||||
{formatMoney(total)}
|
||||
</Text>
|
||||
))}
|
||||
{props.forecast.events.map((event) => (
|
||||
<ForecastEvent
|
||||
event={event}
|
||||
key={`${event.type}-${event.date}-${event.ticker}`}
|
||||
/>
|
||||
))}
|
||||
<Button component={Link} to="../events" variant="subtle">
|
||||
{t("events.open")}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const ForecastEvent: FC<ForecastEventProps> = (props) => (
|
||||
<Paper p="sm" withBorder>
|
||||
<Text fw={700}>{props.event.displayName}</Text>
|
||||
<Text size="sm">
|
||||
{props.event.date} · {formatMoney(props.event.projectedAmount)}
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
export { IncomeForecast };
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Paper, Stack, Text } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
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>
|
||||
{props.totals.map((total) => (
|
||||
<Paper key={total.currency} p="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 };
|
||||
@@ -0,0 +1,107 @@
|
||||
import { SegmentedControl, Stack, Text, Title } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { formatMoney } from "@/shared/lib";
|
||||
import styles from "../AccountIncomePage.module.css";
|
||||
import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
|
||||
|
||||
type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
|
||||
type IncomeTrendProps = { trend: LoadedProps["display"]["trend"] };
|
||||
|
||||
const IncomeTrend: FC<IncomeTrendProps> = (props) => {
|
||||
const currencies = props.trend.map(({ currency }) => currency);
|
||||
const [currency, setCurrency] = useState(currencies[0] ?? "");
|
||||
const { t } = useTranslation();
|
||||
const buckets =
|
||||
props.trend.find((item) => item.currency === currency)?.buckets ?? [];
|
||||
const values = buckets.map((bucket) => ({
|
||||
...bucket,
|
||||
coupon: Number(bucket.total.coupon.value),
|
||||
dividend: Number(bucket.total.dividend.value),
|
||||
}));
|
||||
const scale = Math.max(
|
||||
1,
|
||||
...values.map((value) =>
|
||||
Math.max(
|
||||
positive(value.coupon) + positive(value.dividend),
|
||||
negative(value.coupon) + negative(value.dividend),
|
||||
),
|
||||
),
|
||||
);
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={2}>{t("income.trend")}</Title>
|
||||
{currencies.length > 1 ? (
|
||||
<SegmentedControl
|
||||
aria-label={t("income.currency")}
|
||||
data={currencies}
|
||||
onChange={setCurrency}
|
||||
value={currency}
|
||||
/>
|
||||
) : null}
|
||||
<div aria-hidden="true" className={styles.trendChart}>
|
||||
{values.map((value) => (
|
||||
<div className={styles.trendColumn} key={value.period.from}>
|
||||
<span className={styles.baseline} />
|
||||
<div className={styles.positiveStack}>
|
||||
{value.coupon > 0 ? (
|
||||
<span
|
||||
className={styles.coupon}
|
||||
data-testid={`trend-positive-coupon-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.coupon, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
{value.dividend > 0 ? (
|
||||
<span
|
||||
className={styles.dividend}
|
||||
data-testid={`trend-positive-dividend-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.dividend, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={styles.negativeStack}>
|
||||
{value.coupon < 0 ? (
|
||||
<span
|
||||
className={styles.coupon}
|
||||
data-testid={`trend-negative-coupon-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.coupon, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
{value.dividend < 0 ? (
|
||||
<span
|
||||
className={styles.dividend}
|
||||
data-testid={`trend-negative-dividend-${value.period.from}`}
|
||||
style={{ flexBasis: chartHeight(value.dividend, scale) }}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Stack gap={2}>
|
||||
{buckets.map((bucket) => (
|
||||
<Text key={bucket.period.from} size="sm">
|
||||
{bucket.period.from} — {bucket.period.to}: {t("income.coupon")}{" "}
|
||||
{formatMoney(bucket.total.coupon)}, {t("income.dividend")}{" "}
|
||||
{formatMoney(bucket.total.dividend)}
|
||||
</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
function positive(value: number): number {
|
||||
return Math.max(0, value);
|
||||
}
|
||||
|
||||
function negative(value: number): number {
|
||||
return Math.max(0, -value);
|
||||
}
|
||||
|
||||
function chartHeight(value: number, scale: number): string {
|
||||
return `${(Math.abs(value) / scale) * 100}%`;
|
||||
}
|
||||
|
||||
export { IncomeTrend };
|
||||
Reference in New Issue
Block a user