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,7 +28,9 @@ export const ProfitChart = () => {
     const units = ["₽", "шт"];
 
     return (
-        <PageBlock style={{ flex: 3, minWidth: "600px", padding: "25px" }}>
+        <div className={styles["profit-chart-container"]}>
+            <Total profitData={profitData} />
+            <PageBlock style={{ padding: "25px" }}>
                 <ProfitChartFiltersModal
                     form={form}
                 />
@@ -37,7 +41,7 @@ export const ProfitChart = () => {
                                 <AreaChart
                                     my={"sm"}
                                     w={"98%"}
-                                h={"39vh"}
+                                    h={"34vh"}
                                     data={profitData}
                                     dataKey="date"
                                     unit={units[idx]}
@@ -51,5 +55,6 @@ export const ProfitChart = () => {
                     </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);