feat: tags for expenses, filters by tags in statistics

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

@@ -1,20 +1,18 @@
 import { AreaChart } from "@mantine/charts";
 import "@mantine/charts/styles.css";
 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";
 import { formatDate } from "../../../../../../types/utils.ts";
+import { useProfitTabContext } from "../../contexts/ProfitTabContext.tsx";
 
 
 export const ProfitChart = () => {
     const {
-        profitData,
-        form,
-        isLoading,
-    } = useProfitChart();
+        profitChartData: profitData,
+        isChartLoading: isLoading,
+    } = useProfitTabContext();
 
     const formattedProfitData = profitData.map(
         value => {
@@ -35,17 +33,14 @@ export const ProfitChart = () => {
 
     const units = ["₽", "шт"];
 
-    const chartSizes = ["42vh", "28vh"];
+    const chartSizes = ["47vh", "28vh"];
 
     return (
         <div className={styles["profit-chart-container"]}>
             <Total profitData={profitData} />
             <PageBlock style={{ padding: "25px" }}>
-                <ProfitChartFiltersModal
-                    form={form}
-                />
                 <Skeleton visible={isLoading}>
-                    <Stack gap="20px">
+                    <Stack gap="4vh">
                         {getChartsSeries.map((series, idx) => {
                             return (
                                 <AreaChart