feat: profit chart in statistics

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

@@ -0,0 +1,12 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: rem(10);
+}
+
+.top-panel {
+    padding: rem(5);
+    gap: rem(10);
+    display: flex;
+}

src/pages/StatisticsPage/ui/StatisticsPage.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import {
+    StatisticsTab,
+    StatisticsTabSegmentControl,
+} from "../components/StatisticsTabSegmentControl/StatisticsTabSegmentControl.tsx";
+import styles from "./StatisticsPage.module.css";
+import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
+import { ProfitTab } from "../tabs/ProfitTab/ProfitTab.tsx";
+
+export const StatisticsPage = () => {
+    const [serviceType, setServiceType] = useState(StatisticsTab.PROFIT);
+
+    const getBody = () => {
+        switch (serviceType) {
+            case StatisticsTab.PROFIT:
+                return (
+                    <ProfitTab />
+                );
+            case StatisticsTab.SALARIES:
+                return (
+                    <>Статистика по ЗП</>
+                );
+        }
+    };
+
+    return (
+        <div className={styles["container"]}>
+            <PageBlock>
+                <StatisticsTabSegmentControl
+                    size={"md"}
+                    value={serviceType.toString()}
+                    onChange={event => setServiceType(parseInt(event))}
+                />
+            </PageBlock>
+            {getBody()}
+        </div>
+    );
+};