chore: finish frontend ESLint migration #18
Enable every plugin recommended preset and replace Biome with ESLint formatting. Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { resource } from "@/test/resource";
|
||||
|
||||
import { section } from "./section";
|
||||
|
||||
describe("instrument source and transport presentation", () => {
|
||||
@@ -9,9 +11,9 @@ describe("instrument source and transport presentation", () => {
|
||||
const data = availability === "missing" ? undefined : { rows: [] };
|
||||
const state = section({
|
||||
data,
|
||||
meta: resource(data, { availability }).meta,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
meta: resource(data, { availability }).meta,
|
||||
refetch: vi.fn(),
|
||||
});
|
||||
expect(state.loading).toBe(availability === "missing");
|
||||
@@ -23,37 +25,39 @@ describe("instrument source and transport presentation", () => {
|
||||
const retry = vi.fn();
|
||||
const refetch = vi.fn();
|
||||
const meta = resource([], {
|
||||
sync: { id: "work", state: "failed", errorCode: "TBANK_UNAVAILABLE" },
|
||||
sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" },
|
||||
}).meta;
|
||||
const state = section(
|
||||
{ data: [], meta, isError: false, isFetching: false, refetch },
|
||||
{ data: [], isError: false, isFetching: false, meta, refetch },
|
||||
retry,
|
||||
);
|
||||
expect(state).toMatchObject({
|
||||
hasData: true,
|
||||
loading: false,
|
||||
error: true,
|
||||
refreshing: false,
|
||||
hasData: true,
|
||||
lastSuccessfulAt: meta.lastSuccessfulAt,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
});
|
||||
state.retry();
|
||||
expect(retry).toHaveBeenCalledOnce();
|
||||
expect(refetch).not.toHaveBeenCalled();
|
||||
});
|
||||
it("shows source failure without a false loading or empty result", () => {
|
||||
const state = section({
|
||||
data: undefined,
|
||||
meta: resource(null, {
|
||||
sync: { id: "work", state: "failed", errorCode: "TBANK_UNAVAILABLE" },
|
||||
}).meta,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(),
|
||||
});
|
||||
const state = section((
|
||||
{
|
||||
data: undefined,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
meta: resource(null, {
|
||||
sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" },
|
||||
}).meta,
|
||||
refetch: vi.fn(),
|
||||
}
|
||||
));
|
||||
expect(state).toMatchObject({
|
||||
error: true,
|
||||
hasData: false,
|
||||
loading: false,
|
||||
error: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
import type { paths } from "@/shared/api";
|
||||
|
||||
type Meta =
|
||||
paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number];
|
||||
type Meta
|
||||
= paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number];
|
||||
type SectionState = {
|
||||
stale?: boolean;
|
||||
sourceError?: boolean;
|
||||
partial?: boolean;
|
||||
lastSuccessfulAt?: string | null;
|
||||
hasData: boolean;
|
||||
loading: boolean;
|
||||
error: boolean;
|
||||
hasData: boolean;
|
||||
lastSuccessfulAt?: null | string;
|
||||
loading: boolean;
|
||||
partial?: boolean;
|
||||
refreshing: boolean;
|
||||
retry: () => void;
|
||||
sourceError?: boolean;
|
||||
stale?: boolean;
|
||||
};
|
||||
function section(
|
||||
query: {
|
||||
data: unknown;
|
||||
meta?: Meta;
|
||||
isError: boolean;
|
||||
isFetching: boolean;
|
||||
meta?: Meta;
|
||||
refetch: () => unknown;
|
||||
},
|
||||
retry?: () => unknown,
|
||||
): SectionState {
|
||||
const error = query.isError || query.meta?.sync.state === "failed";
|
||||
const isError = query.isError || query.meta?.sync.state === "failed";
|
||||
return {
|
||||
stale: query.meta?.freshness === "stale",
|
||||
sourceError: query.meta?.sync.state === "failed",
|
||||
partial: query.meta?.availability === "partial",
|
||||
lastSuccessfulAt: query.meta?.lastSuccessfulAt,
|
||||
error: isError,
|
||||
hasData: Boolean(query.data),
|
||||
loading: !query.data && !error,
|
||||
error,
|
||||
lastSuccessfulAt: query.meta?.lastSuccessfulAt,
|
||||
loading: !query.data && !isError,
|
||||
partial: query.meta?.availability === "partial",
|
||||
refreshing:
|
||||
Boolean(query.data) &&
|
||||
(query.isFetching ||
|
||||
query.meta?.sync.state === "running" ||
|
||||
query.meta?.sync.state === "queued"),
|
||||
Boolean(query.data)
|
||||
&& (query.isFetching
|
||||
|| query.meta?.sync.state === "running"
|
||||
|| query.meta?.sync.state === "queued"),
|
||||
retry: () => {
|
||||
void (retry ?? query.refetch)();
|
||||
},
|
||||
sourceError: query.meta?.sync.state === "failed",
|
||||
stale: query.meta?.freshness === "stale",
|
||||
};
|
||||
}
|
||||
|
||||
export { type SectionState, section };
|
||||
export { section, type SectionState };
|
||||
|
||||
@@ -1,38 +1,39 @@
|
||||
import type { BrokerageOperation } from "@/entities/broker-operation";
|
||||
import type { paths } from "@/shared/api";
|
||||
|
||||
import type { SectionState } from "./section";
|
||||
|
||||
type Position = NonNullable<
|
||||
paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
||||
>;
|
||||
type Candles = NonNullable<
|
||||
paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
||||
>;
|
||||
type ChartRow = Candles["candles"][number] & { date: string; price: number };
|
||||
type InstrumentChartVm = {
|
||||
averageLine: null | number;
|
||||
candles?: Candles;
|
||||
candlesState: SectionState;
|
||||
chartData: ChartRow[];
|
||||
hasIncompleteCandle: boolean;
|
||||
period: string;
|
||||
position?: Position;
|
||||
priceRows: ChartRow[];
|
||||
setPeriod: (value: string) => void;
|
||||
};
|
||||
type InstrumentEventsVm = {
|
||||
eventRows: BrokerageOperation[];
|
||||
filter: string;
|
||||
hasPrevious: boolean;
|
||||
onNext: () => void;
|
||||
onPrevious: () => void;
|
||||
operations?: { hasNext: boolean };
|
||||
operationsState: SectionState;
|
||||
setFilter: (value: string) => void;
|
||||
};
|
||||
type InstrumentPositionVm = {
|
||||
position?: Position;
|
||||
positionState: SectionState;
|
||||
};
|
||||
type InstrumentChartVm = {
|
||||
candles?: Candles;
|
||||
candlesState: SectionState;
|
||||
chartData: ChartRow[];
|
||||
priceRows: ChartRow[];
|
||||
period: string;
|
||||
setPeriod: (value: string) => void;
|
||||
averageLine: number | null;
|
||||
hasIncompleteCandle: boolean;
|
||||
position?: Position;
|
||||
};
|
||||
type InstrumentEventsVm = {
|
||||
operations?: { hasNext: boolean };
|
||||
operationsState: SectionState;
|
||||
filter: string;
|
||||
setFilter: (value: string) => void;
|
||||
eventRows: BrokerageOperation[];
|
||||
hasPrevious: boolean;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
};
|
||||
type Position = NonNullable<
|
||||
paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]
|
||||
>;
|
||||
|
||||
export type { InstrumentChartVm, InstrumentEventsVm, InstrumentPositionVm };
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
brokerageOperationsQueryOptions,
|
||||
type OperationCategory,
|
||||
@@ -14,37 +15,38 @@ function useInstrumentOperations(
|
||||
) {
|
||||
const scope = `${uid}:${filter}`;
|
||||
const [pagination, setPagination] = useState<{
|
||||
scope: string;
|
||||
cursors: string[];
|
||||
}>({ scope, cursors: [] });
|
||||
scope: string;
|
||||
}>({ cursors: [], scope });
|
||||
const cursors = pagination.scope === scope ? pagination.cursors : [];
|
||||
const client = useQueryClient();
|
||||
const firstPage = { instrumentUid: uid, categories, limit: 20 };
|
||||
const firstPage = { categories, instrumentUid: uid, limit: 20 };
|
||||
const operations = useBrokerageOperations(uid ? "all" : undefined, {
|
||||
...firstPage,
|
||||
cursor: cursors.at(-1),
|
||||
});
|
||||
const retry = (retryScreen: () => unknown) => {
|
||||
if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") {
|
||||
setPagination({ scope, cursors: [] });
|
||||
setPagination({ cursors: [], scope });
|
||||
void client.invalidateQueries({
|
||||
queryKey: brokerageOperationsQueryOptions("all", firstPage).queryKey,
|
||||
exact: true,
|
||||
queryKey: brokerageOperationsQueryOptions("all", firstPage).queryKey,
|
||||
});
|
||||
} else void retryScreen();
|
||||
}
|
||||
else void retryScreen();
|
||||
};
|
||||
return {
|
||||
operations,
|
||||
retry,
|
||||
hasPrevious: cursors.length > 0,
|
||||
onPrevious: () => setPagination({ scope, cursors: cursors.slice(0, -1) }),
|
||||
onNext: () => {
|
||||
if (operations.data?.nextCursor)
|
||||
setPagination({
|
||||
scope,
|
||||
cursors: [...cursors, operations.data.nextCursor],
|
||||
scope,
|
||||
});
|
||||
},
|
||||
onPrevious: () => setPagination({ cursors: cursors.slice(0, -1), scope }),
|
||||
operations,
|
||||
retry,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { FC } from "react";
|
||||
|
||||
import { AreaChart } from "@mantine/charts";
|
||||
import {
|
||||
Accordion,
|
||||
@@ -7,185 +9,187 @@ import {
|
||||
Table,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { formatDecimal, formatMoney } from "@/shared/lib";
|
||||
|
||||
import type { InstrumentChartVm } from "../model/types";
|
||||
|
||||
import classes from "./InstrumentDetails.module.css";
|
||||
import { InstrumentSection } from "./InstrumentSection.view";
|
||||
|
||||
type InstrumentChartProps = { vm: InstrumentChartVm; priceUnit?: "percent" };
|
||||
type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
|
||||
const InstrumentChart: FC<InstrumentChartProps> = (props) => {
|
||||
const { vm } = props;
|
||||
const { t } = useTranslation();
|
||||
const priceLabel = (value: string) => {
|
||||
if (props.priceUnit === "percent") return `${formatDecimal(value)} %`;
|
||||
const currency = vm.candles?.currency;
|
||||
return formatMoney(currency ? { currency, value } : undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<InstrumentSection
|
||||
title={t("stock.chart")}
|
||||
state={vm.candlesState}
|
||||
large
|
||||
controls={
|
||||
controls={(
|
||||
<div className={classes.controls}>
|
||||
<SegmentedControl
|
||||
aria-label={t("stock.period")}
|
||||
value={vm.period}
|
||||
onChange={vm.setPeriod}
|
||||
data={["month", "halfYear", "year", "all"].map((value) => ({
|
||||
value,
|
||||
data={["month", "halfYear", "year", "all"].map(value => ({
|
||||
label: t(`stock.periods.${value}`),
|
||||
value,
|
||||
}))}
|
||||
onChange={vm.setPeriod}
|
||||
value={vm.period}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
large
|
||||
state={vm.candlesState}
|
||||
title={t("stock.chart")}
|
||||
>
|
||||
{vm.candles ? (
|
||||
vm.chartData.length ? (
|
||||
<>
|
||||
<AreaChart
|
||||
h={310}
|
||||
data={vm.chartData}
|
||||
dataKey="date"
|
||||
series={[
|
||||
{ name: "price", color: "blue.6", label: t("stock.price") },
|
||||
]}
|
||||
curveType="linear"
|
||||
withDots={vm.chartData.length === 1}
|
||||
withGradient
|
||||
gridAxis="y"
|
||||
tickLine="none"
|
||||
tooltipAnimationDuration={0}
|
||||
areaProps={{ isAnimationActive: false }}
|
||||
yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
|
||||
referenceLines={
|
||||
vm.averageLine === null
|
||||
? []
|
||||
: [
|
||||
{
|
||||
y: vm.averageLine,
|
||||
ifOverflow: "extendDomain",
|
||||
color: "orange.7",
|
||||
label: t("stock.averageLine"),
|
||||
},
|
||||
]
|
||||
}
|
||||
valueFormatter={(value) =>
|
||||
new Intl.NumberFormat("ru-RU", {
|
||||
maximumFractionDigits: 4,
|
||||
}).format(value)
|
||||
}
|
||||
aria-label={t(
|
||||
props.priceUnit === "percent"
|
||||
? "bond.chartLabel"
|
||||
: "stock.chartLabel",
|
||||
{
|
||||
currency:
|
||||
{!!(vm.candles) && ((
|
||||
vm.chartData.length > 0
|
||||
? (
|
||||
<>
|
||||
<AreaChart
|
||||
areaProps={{ isAnimationActive: false }}
|
||||
aria-label={t(
|
||||
props.priceUnit === "percent"
|
||||
? "bond.chartLabel"
|
||||
: "stock.chartLabel",
|
||||
{
|
||||
currency:
|
||||
props.priceUnit === "percent"
|
||||
? t("bond.percentOfNominal")
|
||||
: (vm.candles.currency ?? ""),
|
||||
},
|
||||
)}
|
||||
/>
|
||||
<Text size="xs" c="dimmed" mt="sm">
|
||||
{t(
|
||||
props.priceUnit === "percent"
|
||||
? "bond.chartNote"
|
||||
: "stock.chartNote",
|
||||
)}
|
||||
</Text>
|
||||
{vm.hasIncompleteCandle ? (
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("stock.incomplete")}
|
||||
</Text>
|
||||
) : null}
|
||||
{vm.averageLine !== null ? (
|
||||
<Text size="sm" mt="xs">
|
||||
{t("stock.averageLine")}:{" "}
|
||||
{formatMoney(vm.position?.averagePurchasePrice ?? null)}
|
||||
</Text>
|
||||
) : null}
|
||||
<Accordion
|
||||
className={classes.priceTable}
|
||||
variant="contained"
|
||||
radius="md"
|
||||
>
|
||||
<Accordion.Item value="prices">
|
||||
<Accordion.Control>
|
||||
<Text fw={600}>{t("stock.priceTable")}</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("stock.priceTableHint", { count: vm.chartData.length })}
|
||||
},
|
||||
)}
|
||||
curveType="linear"
|
||||
data={vm.chartData}
|
||||
dataKey="date"
|
||||
gridAxis="y"
|
||||
h={310}
|
||||
referenceLines={
|
||||
vm.averageLine === null
|
||||
? []
|
||||
: [
|
||||
{
|
||||
color: "orange.7",
|
||||
ifOverflow: "extendDomain",
|
||||
label: t("stock.averageLine"),
|
||||
y: vm.averageLine,
|
||||
},
|
||||
]
|
||||
}
|
||||
series={[
|
||||
{ color: "blue.6", label: t("stock.price"), name: "price" },
|
||||
]}
|
||||
tickLine="none"
|
||||
tooltipAnimationDuration={0}
|
||||
valueFormatter={value =>
|
||||
new Intl.NumberFormat("ru-RU", {
|
||||
maximumFractionDigits: 4,
|
||||
}).format(value)}
|
||||
withDots={vm.chartData.length === 1}
|
||||
withGradient
|
||||
yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
|
||||
/>
|
||||
<Text c="dimmed" mt="sm" size="xs">
|
||||
{t(
|
||||
props.priceUnit === "percent"
|
||||
? "bond.chartNote"
|
||||
: "stock.chartNote",
|
||||
)}
|
||||
</Text>
|
||||
{!!(vm.hasIncompleteCandle) && ((
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.incomplete")}
|
||||
</Text>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<ScrollArea.Autosize
|
||||
mah={360}
|
||||
type="auto"
|
||||
viewportProps={{
|
||||
tabIndex: 0,
|
||||
role: "region",
|
||||
"aria-label": t("stock.priceTable"),
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
striped
|
||||
highlightOnHover
|
||||
stickyHeader
|
||||
verticalSpacing="sm"
|
||||
horizontalSpacing="md"
|
||||
>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("stock.date")}</Table.Th>
|
||||
<Table.Th>{t("stock.price")}</Table.Th>
|
||||
<Table.Th>{t("stock.candle")}</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{vm.priceRows.map((candle) => (
|
||||
<Table.Tr key={candle.time}>
|
||||
<Table.Td>{candle.date}</Table.Td>
|
||||
<Table.Td>
|
||||
{props.priceUnit === "percent"
|
||||
? `${formatDecimal(candle.close)} %`
|
||||
: formatMoney(
|
||||
vm.candles?.currency
|
||||
? {
|
||||
value: candle.close,
|
||||
currency: vm.candles.currency,
|
||||
}
|
||||
: null,
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant="light"
|
||||
color={candle.isComplete ? "gray" : "blue"}
|
||||
size="sm"
|
||||
>
|
||||
{t(
|
||||
candle.isComplete
|
||||
? "stock.complete"
|
||||
: "stock.forming",
|
||||
)}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea.Autosize>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
) : (
|
||||
<Text c="dimmed">
|
||||
{t(
|
||||
vm.candlesState.partial
|
||||
? "investment.partial"
|
||||
: "stock.noCandles",
|
||||
)}
|
||||
</Text>
|
||||
)
|
||||
) : null}
|
||||
))}
|
||||
{vm.averageLine !== null && ((
|
||||
<Text mt="xs" size="sm">
|
||||
{t("stock.averageLine")}
|
||||
:
|
||||
{" "}
|
||||
{formatMoney(vm.position?.averagePurchasePrice)}
|
||||
</Text>
|
||||
))}
|
||||
<Accordion
|
||||
className={classes.priceTable}
|
||||
radius="md"
|
||||
variant="contained"
|
||||
>
|
||||
<Accordion.Item value="prices">
|
||||
<Accordion.Control>
|
||||
<Text fw={600}>{t("stock.priceTable")}</Text>
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.priceTableHint", { count: vm.chartData.length })}
|
||||
</Text>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<ScrollArea.Autosize
|
||||
mah={360}
|
||||
type="auto"
|
||||
viewportProps={{
|
||||
"aria-label": t("stock.priceTable"),
|
||||
"role": "region",
|
||||
"tabIndex": 0,
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
highlightOnHover
|
||||
horizontalSpacing="md"
|
||||
stickyHeader
|
||||
striped
|
||||
verticalSpacing="sm"
|
||||
>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("stock.date")}</Table.Th>
|
||||
<Table.Th>{t("stock.price")}</Table.Th>
|
||||
<Table.Th>{t("stock.candle")}</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{vm.priceRows.map(candle => (
|
||||
<Table.Tr key={candle.time}>
|
||||
<Table.Td>{candle.date}</Table.Td>
|
||||
<Table.Td>
|
||||
{priceLabel(candle.close)}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
color={candle.isComplete ? "gray" : "blue"}
|
||||
size="sm"
|
||||
variant="light"
|
||||
>
|
||||
{t(
|
||||
candle.isComplete
|
||||
? "stock.complete"
|
||||
: "stock.forming",
|
||||
)}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea.Autosize>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<Text c="dimmed">
|
||||
{t(
|
||||
vm.candlesState.partial
|
||||
? "investment.partial"
|
||||
: "stock.noCandles",
|
||||
)}
|
||||
</Text>
|
||||
)
|
||||
))}
|
||||
</InstrumentSection>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
import { Button, Group, SegmentedControl, Stack, Text } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
|
||||
import { Button, Group, SegmentedControl, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { LedgerEntryRow } from "@/entities/broker-operation";
|
||||
|
||||
import type { InstrumentEventsVm } from "../model/types";
|
||||
|
||||
import classes from "./InstrumentDetails.module.css";
|
||||
import { InstrumentSection } from "./InstrumentSection.view";
|
||||
|
||||
type InstrumentEventsProps = {
|
||||
vm: InstrumentEventsVm;
|
||||
incomeLabel?: string;
|
||||
incomeFilter?: string;
|
||||
historyNote?: string;
|
||||
incomeFilter?: string;
|
||||
incomeLabel?: string;
|
||||
vm: InstrumentEventsVm;
|
||||
};
|
||||
|
||||
const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
|
||||
@@ -18,73 +22,75 @@ const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<InstrumentSection
|
||||
title={t("stock.history")}
|
||||
state={vm.operationsState}
|
||||
controls={
|
||||
controls={(
|
||||
<div className={classes.controls}>
|
||||
<SegmentedControl
|
||||
aria-label={t("stock.eventFilter")}
|
||||
value={vm.filter}
|
||||
onChange={vm.setFilter}
|
||||
data={[
|
||||
"all",
|
||||
"trades",
|
||||
props.incomeFilter ?? "dividends",
|
||||
"other",
|
||||
].map((value) => ({
|
||||
value,
|
||||
].map(value => ({
|
||||
label:
|
||||
value === (props.incomeFilter ?? "dividends") &&
|
||||
props.incomeLabel
|
||||
value === (props.incomeFilter ?? "dividends")
|
||||
&& props.incomeLabel
|
||||
? props.incomeLabel
|
||||
: t(`stock.filters.${value}`),
|
||||
value,
|
||||
}))}
|
||||
onChange={vm.setFilter}
|
||||
value={vm.filter}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
state={vm.operationsState}
|
||||
title={t("stock.history")}
|
||||
>
|
||||
{vm.operations ? (
|
||||
{!!(vm.operations) && ((
|
||||
<>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{props.historyNote ?? t("stock.historyNote")}
|
||||
</Text>
|
||||
{vm.eventRows.length ? (
|
||||
<Stack gap="sm" mt="md">
|
||||
{vm.eventRows.map((event) => (
|
||||
<LedgerEntryRow
|
||||
key={`${event.account?.id}:${event.id}`}
|
||||
operation={event}
|
||||
withDetails
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Text c="dimmed" py="lg">
|
||||
{t(
|
||||
vm.operationsState.partial
|
||||
? "investment.partial"
|
||||
: "stock.noOperations",
|
||||
{vm.eventRows.length > 0
|
||||
? (
|
||||
<Stack gap="sm" mt="md">
|
||||
{vm.eventRows.map(event => (
|
||||
<LedgerEntryRow
|
||||
key={`${event.account?.id}:${event.id}`}
|
||||
operation={event}
|
||||
withDetails
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)
|
||||
: (
|
||||
<Text c="dimmed" py="lg">
|
||||
{t(
|
||||
vm.operationsState.partial
|
||||
? "investment.partial"
|
||||
: "stock.noOperations",
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
<Group justify="space-between" mt="md">
|
||||
<Button
|
||||
variant="default"
|
||||
disabled={!vm.hasPrevious || vm.operationsState.refreshing}
|
||||
onClick={vm.onPrevious}
|
||||
variant="default"
|
||||
>
|
||||
{t("stock.previous")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
disabled={!vm.operations.hasNext || vm.operationsState.refreshing}
|
||||
onClick={vm.onNext}
|
||||
variant="default"
|
||||
>
|
||||
{t("stock.next")}
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
) : null}
|
||||
))}
|
||||
</InstrumentSection>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,31 +1,35 @@
|
||||
import { Alert, Anchor, Stack, Text } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
|
||||
import { Alert, Anchor, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib";
|
||||
|
||||
import type { InstrumentPositionVm } from "../model/types";
|
||||
|
||||
import classes from "./InstrumentDetails.module.css";
|
||||
import { InstrumentSection } from "./InstrumentSection.view";
|
||||
|
||||
type InstrumentPositionProps = {
|
||||
vm: InstrumentPositionVm;
|
||||
returnNote?: string;
|
||||
quantityLabel?: string;
|
||||
returnNote?: string;
|
||||
vm: InstrumentPositionVm;
|
||||
};
|
||||
const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
|
||||
const { vm } = props;
|
||||
const { t } = useTranslation();
|
||||
if (vm.position && !vm.position.accounts.length) return null;
|
||||
if (vm.position && vm.position.accounts.length === 0) return;
|
||||
return (
|
||||
<InstrumentSection title={t("stock.position")} state={vm.positionState}>
|
||||
{vm.position ? (
|
||||
<InstrumentSection state={vm.positionState} title={t("stock.position")}>
|
||||
{!!(vm.position) && ((
|
||||
<Stack gap="md">
|
||||
{vm.position.isStale ? (
|
||||
{!!(vm.position.isStale) && ((
|
||||
<Alert color="orange">{t("portfolio.staleWarning")}</Alert>
|
||||
) : null}
|
||||
))}
|
||||
<div className={`${classes.metrics} ${classes.holding}`}>
|
||||
<div>
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text c="dimmed" size="sm">
|
||||
{props.quantityLabel ?? t("stock.quantity")}
|
||||
</Text>
|
||||
<Text className={classes.metricValue}>
|
||||
@@ -33,7 +37,7 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("stock.value")}
|
||||
</Text>
|
||||
<Text className={classes.metricValue}>
|
||||
@@ -41,7 +45,7 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("stock.average")}
|
||||
</Text>
|
||||
<Text className={classes.metricValue}>
|
||||
@@ -49,89 +53,93 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
|
||||
</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text size="sm" c="dimmed">
|
||||
<Text c="dimmed" size="sm">
|
||||
{t("stock.openReturn")}
|
||||
</Text>
|
||||
<Text
|
||||
className={classes.metricValue}
|
||||
c={
|
||||
vm.position.absoluteReturn?.value.startsWith("-")
|
||||
? "red.8"
|
||||
: "green.8"
|
||||
}
|
||||
className={classes.metricValue}
|
||||
>
|
||||
{formatMoney(vm.position.absoluteReturn)}
|
||||
</Text>
|
||||
{vm.position.returnPercent !== null ? (
|
||||
{vm.position.returnPercent !== null && ((
|
||||
<Text size="sm">
|
||||
{formatDecimal(vm.position.returnPercent)} %
|
||||
{formatDecimal(vm.position.returnPercent)}
|
||||
{" "}
|
||||
%
|
||||
</Text>
|
||||
) : null}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{props.returnNote ?? t("stock.openReturnNote")}
|
||||
</Text>
|
||||
<div>
|
||||
{vm.position.accounts.map((account) => (
|
||||
{vm.position.accounts.map(account => (
|
||||
<div className={classes.accountRow} key={account.account?.id}>
|
||||
{account.account ? (
|
||||
<Anchor
|
||||
component={Link}
|
||||
to={`/accounts/${encodeURIComponent(account.account.id)}`}
|
||||
>
|
||||
{account.account.name}
|
||||
</Anchor>
|
||||
) : (
|
||||
<Text>{t("stock.portfolio")}</Text>
|
||||
)}
|
||||
{account.account
|
||||
? (
|
||||
<Anchor
|
||||
component={Link}
|
||||
to={`/accounts/${encodeURIComponent(account.account.id)}`}
|
||||
>
|
||||
{account.account.name}
|
||||
</Anchor>
|
||||
)
|
||||
: (
|
||||
<Text>{t("stock.portfolio")}</Text>
|
||||
)}
|
||||
<div>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{props.quantityLabel ?? t("stock.quantity")}
|
||||
</Text>
|
||||
<Text>{formatDecimal(account.quantity)}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.average")}
|
||||
</Text>
|
||||
<Text>{formatMoney(account.averagePurchasePrice)}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.value")}
|
||||
</Text>
|
||||
<Text>{formatMoney(account.currentValue)}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.openReturn")}
|
||||
</Text>
|
||||
<Text
|
||||
c={
|
||||
account.absoluteReturn?.value.startsWith("-")
|
||||
? "red.8"
|
||||
: undefined
|
||||
(account.absoluteReturn?.value.startsWith("-")) ? ("red.8") : undefined
|
||||
}
|
||||
>
|
||||
{formatMoney(account.absoluteReturn)}
|
||||
</Text>
|
||||
{account.returnPercent !== null ? (
|
||||
{account.returnPercent !== null && ((
|
||||
<Text size="xs">
|
||||
{formatDecimal(account.returnPercent)} %
|
||||
{formatDecimal(account.returnPercent)}
|
||||
{" "}
|
||||
%
|
||||
</Text>
|
||||
) : null}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("stock.snapshotAt", {
|
||||
date: formatSnapshotTime(vm.position.observedAt),
|
||||
})}
|
||||
</Text>
|
||||
</Stack>
|
||||
) : null}
|
||||
))}
|
||||
</InstrumentSection>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { FC, PropsWithChildren, ReactNode } from "react";
|
||||
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
@@ -9,28 +11,31 @@ import {
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { LoadingSkeleton } from "@wealthledger/ui";
|
||||
import type { FC, PropsWithChildren, ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { formatSnapshotTime } from "@/shared/lib";
|
||||
|
||||
import type { SectionState } from "../model/section";
|
||||
|
||||
import classes from "./InstrumentDetails.module.css";
|
||||
|
||||
const CHART_SKELETON_HEIGHT_PX = 280;
|
||||
const SECTION_SKELETON_HEIGHT_PX = 65;
|
||||
|
||||
type InstrumentSectionProps = PropsWithChildren<{
|
||||
title: string;
|
||||
state: SectionState;
|
||||
controls?: ReactNode;
|
||||
large?: boolean;
|
||||
embedded?: boolean;
|
||||
large?: boolean;
|
||||
state: SectionState;
|
||||
title: string;
|
||||
}>;
|
||||
const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const readError = t(props.state.hasData ? "accounts.refreshError" : "stock.sectionError");
|
||||
return (
|
||||
<Paper
|
||||
component="section"
|
||||
className={props.embedded ? classes.embeddedSection : classes.section}
|
||||
component="section"
|
||||
withBorder={!props.embedded}
|
||||
>
|
||||
<Group justify="space-between" mb="md">
|
||||
@@ -39,63 +44,63 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
|
||||
</Title>
|
||||
{props.controls}
|
||||
</Group>
|
||||
{props.state.stale ? (
|
||||
{!!(props.state.stale) && ((
|
||||
<Text size="xs">{t("investment.stale")}</Text>
|
||||
) : null}
|
||||
{props.state.partial ? (
|
||||
))}
|
||||
{!!(props.state.partial) && ((
|
||||
<Text role="status">{t("investment.partial")}</Text>
|
||||
) : null}
|
||||
{props.state.lastSuccessfulAt ? (
|
||||
<Text size="xs" c="dimmed">
|
||||
))}
|
||||
{!!(props.state.lastSuccessfulAt) && ((
|
||||
<Text c="dimmed" size="xs">
|
||||
{t("investment.sourceTime", {
|
||||
date: formatSnapshotTime(props.state.lastSuccessfulAt),
|
||||
})}
|
||||
</Text>
|
||||
) : null}
|
||||
{props.state.refreshing ? (
|
||||
<Text role="status" size="xs" c="dimmed">
|
||||
))}
|
||||
{!!(props.state.refreshing) && ((
|
||||
<Text c="dimmed" role="status" size="xs">
|
||||
{t("accounts.refreshing")}
|
||||
</Text>
|
||||
) : null}
|
||||
{props.state.error ? (
|
||||
<Alert color="orange" mb="sm" role="status" aria-live="polite">
|
||||
))}
|
||||
{!!(props.state.error) && ((
|
||||
<Alert aria-live="polite" color="orange" mb="sm" role="status">
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">
|
||||
{props.state.sourceError
|
||||
? t("investment.syncFailed")
|
||||
: props.state.hasData
|
||||
? t("accounts.refreshError")
|
||||
: t("stock.sectionError")}
|
||||
: readError}
|
||||
</Text>
|
||||
<Button
|
||||
disabled={props.state.refreshing}
|
||||
onClick={props.state.retry}
|
||||
size="xs"
|
||||
variant="default"
|
||||
onClick={props.state.retry}
|
||||
disabled={props.state.refreshing}
|
||||
>
|
||||
{t("accounts.retry")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Alert>
|
||||
) : null}
|
||||
{props.state.loading ? (
|
||||
<LoadingSkeleton
|
||||
label={t("stock.loadingSection", { section: props.title })}
|
||||
>
|
||||
<Stack>
|
||||
<Skeleton
|
||||
h={
|
||||
props.large
|
||||
? CHART_SKELETON_HEIGHT_PX
|
||||
: SECTION_SKELETON_HEIGHT_PX
|
||||
}
|
||||
/>
|
||||
<Skeleton h={14} w="60%" />
|
||||
</Stack>
|
||||
</LoadingSkeleton>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
))}
|
||||
{props.state.loading
|
||||
? (
|
||||
<LoadingSkeleton
|
||||
label={t("stock.loadingSection", { section: props.title })}
|
||||
>
|
||||
<Stack>
|
||||
<Skeleton
|
||||
h={
|
||||
props.large
|
||||
? CHART_SKELETON_HEIGHT_PX
|
||||
: SECTION_SKELETON_HEIGHT_PX
|
||||
}
|
||||
/>
|
||||
<Skeleton h={14} w="60%" />
|
||||
</Stack>
|
||||
</LoadingSkeleton>
|
||||
)
|
||||
: (
|
||||
props.children
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user