feat: total values in statistics page

src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitChart/ProfitChart.tsx

@@ -4,6 +4,8 @@ import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx";
 import { useProfitChart } from "./hooks/useProfitChart.tsx";
 import { Skeleton, Stack } from "@mantine/core";
 import { ProfitChartFiltersModal } from "../../modals/ProfitChartFiltersModal.tsx";
+import { Total } from "../Total/Total.tsx";
+import styles from "../../../../ui/StatisticsPage.module.css";
 
 
 export const ProfitChart = () => {
@@ -26,30 +28,33 @@ export const ProfitChart = () => {
     const units = ["₽", "шт"];
 
     return (
-        <PageBlock style={{ flex: 3, minWidth: "600px", padding: "25px" }}>
-            <ProfitChartFiltersModal
-                form={form}
-            />
-            <Skeleton visible={isLoading}>
-                <Stack gap={"xl"}>
-                    {getChartsSeries.map((series, idx) => {
-                        return (
-                            <AreaChart
-                                my={"sm"}
-                                w={"98%"}
-                                h={"39vh"}
-                                data={profitData}
-                                dataKey="date"
-                                unit={units[idx]}
-                                tooltipAnimationDuration={200}
-                                valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
-                                series={series}
-                                fillOpacity={0.5}
-                            />
-                        );
-                    })}
-                </Stack>
-            </Skeleton>
-        </PageBlock>
+        <div className={styles["profit-chart-container"]}>
+            <Total profitData={profitData} />
+            <PageBlock style={{ padding: "25px" }}>
+                <ProfitChartFiltersModal
+                    form={form}
+                />
+                <Skeleton visible={isLoading}>
+                    <Stack gap={"xl"}>
+                        {getChartsSeries.map((series, idx) => {
+                            return (
+                                <AreaChart
+                                    my={"sm"}
+                                    w={"98%"}
+                                    h={"34vh"}
+                                    data={profitData}
+                                    dataKey="date"
+                                    unit={units[idx]}
+                                    tooltipAnimationDuration={200}
+                                    valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
+                                    series={series}
+                                    fillOpacity={0.5}
+                                />
+                            );
+                        })}
+                    </Stack>
+                </Skeleton>
+            </PageBlock>
+        </div>
     );
 };

src/pages/StatisticsPage/tabs/ProfitTab/components/Total/Total.tsx

@@ -0,0 +1,40 @@
+import { Center, Divider, Group, Text } from "@mantine/core";
+import { ProfitChartDataItem } from "../../../../../../client";
+import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx";
+
+type Props = {
+    profitData: ProfitChartDataItem[];
+};
+
+export const Total = ({ profitData }: Props) => {
+    const totalProfit = profitData.reduce(
+        (sum, dataItem) => dataItem.profit + sum,
+        0,
+    );
+    const totalRevenue = profitData.reduce(
+        (sum, dataItem) => dataItem.revenue + sum,
+        0,
+    );
+    const totalCount = profitData.reduce(
+        (sum, dataItem) => dataItem.dealsCount + sum,
+        0,
+    );
+
+    return (
+        <PageBlock style={{ padding: "25px", height: "7vh", flexGrow: 0 }}>
+            <Group gap={2} justify={"space-between"}>
+                <Center w={"30%"}>
+                    <Text>Прибыль: {new Intl.NumberFormat("ru-RU").format(totalProfit)} ₽</Text>
+                </Center>
+                <Divider size={"md"} orientation="vertical" />
+                <Center w={"30%"}>
+                    <Text>Выручка: {new Intl.NumberFormat("ru-RU").format(totalRevenue)} ₽</Text>
+                </Center>
+                <Divider size={"md"} orientation="vertical" />
+                <Center w={"30%"}>
+                    <Text>Сделок: {new Intl.NumberFormat("ru-RU").format(totalCount)} шт</Text>
+                </Center>
+            </Group>
+        </PageBlock>
+    );
+};

src/pages/StatisticsPage/ui/StatisticsPage.module.css

@@ -13,6 +13,16 @@
     flex-wrap: wrap;
 }
 
+.profit-chart-container {
+    display: flex;
+    flex-direction: column;
+    gap: rem(10);
+    height: 96vh;
+    flex-wrap: nowrap;
+    flex: 3;
+    min-width: 600px;
+}
+
 .top-panel {
     padding: rem(5);
     gap: rem(10);