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>
     );
 };