feat: expenses in statistics

src/client/models/ProfitChartDataItem.ts

@@ -6,6 +6,7 @@ export type ProfitChartDataItem = {
     date: string;
     revenue: number;
     profit: number;
+    expenses: number;
     dealsCount: number;
 };
 

src/client/models/ProfitTableDataItem.ts

@@ -6,6 +6,7 @@ export type ProfitTableDataItem = {
     groupedValue: (string | number);
     revenue: number;
     profit: number;
+    expenses?: (number | null);
     dealsCount: number;
 };
 

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

@@ -26,6 +26,7 @@ export const ProfitChart = () => {
         [
             { name: "profit", label: "Прибыль", color: "indigo.6" },
             { name: "revenue", label: "Выручка", color: "teal.6" },
+            { name: "expenses", label: "Расходы", color: "red.6" },
         ],
         [
             { name: "dealsCount", label: "Количество сделок", color: "indigo.6" },
@@ -34,6 +35,8 @@ export const ProfitChart = () => {
 
     const units = ["₽", "шт"];
 
+    const chartSizes = ["42vh", "28vh"];
+
     return (
         <div className={styles["profit-chart-container"]}>
             <Total profitData={profitData} />
@@ -42,13 +45,13 @@ export const ProfitChart = () => {
                     form={form}
                 />
                 <Skeleton visible={isLoading}>
-                    <Stack gap={"xl"}>
+                    <Stack gap="20px">
                         {getChartsSeries.map((series, idx) => {
                             return (
                                 <AreaChart
                                     my={"sm"}
                                     w={"98%"}
-                                    h={"34vh"}
+                                    h={chartSizes[idx]}
                                     data={formattedProfitData}
                                     dataKey="date"
                                     unit={units[idx]}

src/pages/StatisticsPage/tabs/ProfitTab/components/ProfitTable/hooks/columns.tsx

@@ -19,6 +19,28 @@ export const useProfitTableColumns = ({ groupTableBy }: Props) => {
         [GroupStatisticsTable.BY_MANAGERS]: "Менеджер",
     };
 
+    const getConditionalColumns = (): MRT_ColumnDef<ProfitTableDataItem>[] => {
+        if (groupTableBy === GroupStatisticsTable.BY_DATES) {
+            return [
+                {
+                    accessorKey: "revenue",
+                    header: "Выручка",
+                    Cell: ({ row }) =>
+                        row.original.revenue.toLocaleString("ru-RU") + "₽",
+                    size: 50,
+                },
+                {
+                    accessorKey: "expenses",
+                    header: "Расходы",
+                    Cell: ({ row }) =>
+                        row.original.expenses?.toLocaleString("ru-RU") + "₽",
+                    size: 50,
+                }
+            ] as MRT_ColumnDef<ProfitTableDataItem>[];
+        }
+        return [];
+    };
+
     return useMemo<MRT_ColumnDef<ProfitTableDataItem>[]>(
         () => [
             {
@@ -35,13 +57,14 @@ export const useProfitTableColumns = ({ groupTableBy }: Props) => {
                     }
                     return row.original.groupedValue;
                 },
-                size: 60,
+                size: groupTableBy === GroupStatisticsTable.BY_DATES ? 40 : 80,
             },
             {
                 accessorKey: "dealsCount",
                 header: "Кол-во",
                 size: 40,
             },
+            ...getConditionalColumns(),
             {
                 accessorKey: "profit",
                 header: "Прибыль",
@@ -49,13 +72,6 @@ export const useProfitTableColumns = ({ groupTableBy }: Props) => {
                     row.original.profit.toLocaleString("ru-RU") + "₽",
                 size: 50,
             },
-            {
-                accessorKey: "revenue",
-                header: "Выручка",
-                Cell: ({ row }) =>
-                    row.original.revenue.toLocaleString("ru-RU") + "₽",
-                size: 50,
-            },
         ],
         [groupTableBy],
     );

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

@@ -7,14 +7,18 @@ type Props = {
 };
 
 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 totalExpense = profitData.reduce(
+        (sum, dataItem) => dataItem.expenses + sum,
+        0,
+    );
+    const totalProfit = profitData.reduce(
+        (sum, dataItem) => dataItem.profit + sum,
+        0,
+    );
     const totalCount = profitData.reduce(
         (sum, dataItem) => dataItem.dealsCount + sum,
         0,
@@ -23,15 +27,19 @@ export const Total = ({ profitData }: Props) => {
     return (
         <PageBlock style={{ padding: "25px", height: "7vh", flexGrow: 0 }}>
             <Group gap={2} justify={"space-between"}>
-                <Center w={"30%"}>
+                <Center w={"24%"}>
-                    <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%"}>
+                <Center w={"24%"}>
+                    <Text>Расходы: {new Intl.NumberFormat("ru-RU").format(totalExpense)} ₽</Text>
+                </Center>
+                <Divider size={"md"} orientation="vertical" />
+                <Center w={"24%"}>
+                    <Text>Прибыль: {new Intl.NumberFormat("ru-RU").format(totalProfit)} ₽</Text>
+                </Center>
+                <Divider size={"md"} orientation="vertical" />
+                <Center w={"24%"}>
                     <Text>Сделок: {new Intl.NumberFormat("ru-RU").format(totalCount)} шт</Text>
                 </Center>
             </Group>