fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: profit chart in statistics

Browse Source
This commit is contained in:
AlexSserb
2024-11-15 15:19:14 +04:00
parent 90530f0530
commit 608a063369
22 changed files with 515 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/StatisticsPage/components/Filters/Filters.tsx Normal file
View File

@@ -0,0 +1,90 @@
import PageBlock from "../../../../components/PageBlock/PageBlock.tsx";
import { DatePickerInput, DatePickerInputProps } from "@mantine/dates";
import { Group, Text } from "@mantine/core";
import ClientSelectNew from "../../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import { BaseMarketplaceSchema, ClientSchema } from "../../../../client";
import { ObjectSelectProps } from "../../../../components/ObjectSelect/ObjectSelect.tsx";
import BaseMarketplaceSelect from "../../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import DealStatusSelect from "../../../DealsPage/components/DealStatusSelect/DealStatusSelect.tsx";
import { DealStatusType } from "../../../../shared/enums/DealStatus.ts";
import { StatisticsTableSegmentControl } from "../StatisticsTableSegmentControl/StatisticsTableSegmentControl.tsx";
type FiltersProps = {
datePickerProps?: DatePickerInputProps<"range">;
clientSelectProps?: Omit<ObjectSelectProps<ClientSchema>, "data">;
onClientClear?: () => void;
baseMarketplaceSelectProps?: Omit<
ObjectSelectProps<BaseMarketplaceSchema>,
"data" | "getValueFn" | "getLabelFn"
>;
onBaseMarketplaceClear?: () => void;
dealStatusSelectProps?: Omit<ObjectSelectProps<DealStatusType>, "data">;
onDealStatusClear?: () => void;
}
export const Filters = (props: FiltersProps) => {
const {
datePickerProps,
clientSelectProps,
onClientClear,
baseMarketplaceSelectProps,
onBaseMarketplaceClear,
dealStatusSelectProps,
onDealStatusClear,
} = props;
return (
<PageBlock>
<Group>
{datePickerProps &&
<DatePickerInput
{...datePickerProps}
type="range"
placeholder="Выберите даты"
maxDate={new Date()}
/>
}
{dealStatusSelectProps &&
<DealStatusSelect
{...dealStatusSelectProps}
onClear={onDealStatusClear}
clearable
placeholder={"Выберите статус"}
/>
}
{clientSelectProps &&
<ClientSelectNew
{...clientSelectProps}
onClear={onClientClear}
clearable
searchable
placeholder={"Выберите клиента"}
/>
}
{baseMarketplaceSelectProps &&
<BaseMarketplaceSelect
{...baseMarketplaceSelectProps}
onClear={onBaseMarketplaceClear}
clearable
placeholder={"Выберите маркетплейс"}
/>
}
{
<>
<Text>
Группировать:
</Text>
<StatisticsTableSegmentControl
value={groupTableBy.toString()}
onChange={event => setGroupTableBy(parseInt(event))}
/>
</>
}
</Group>
</PageBlock>
);
};

52
src/pages/StatisticsPage/components/ProfitTable/ProfitTable.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { useProfitTableColumns } from "./columns.tsx";
import { ProfitDataItem } from "../../../../client";
import PageBlock from "../../../../components/PageBlock/PageBlock.tsx";
import { GroupStatisticsTable } from "../StatisticsTableSegmentControl/StatisticsTableSegmentControl.tsx";
import styles from "../../ui/StatisticsPage.module.css";
import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
import { MRT_Localization_RU } from "mantine-react-table/locales/ru/index.cjs";
import { Filters } from "../Filters/Filters.tsx";
import { useForm } from "@mantine/form";
import { getDefaultDates } from "../../utils/dates.ts";
import { TableFormFilters } from "../../types/TableFormFilters.ts";
type Props = {
data: ProfitDataItem[];
}
export const ProfitTable = ({ data }: Props) => {
const form = useForm<TableFormFilters>({
mode: "controlled",
initialValues: {
dateRange: getDefaultDates(),
groupTableBy: GroupStatisticsTable.BY_DATES,
},
});
const columns = useProfitTableColumns();
const defaultSorting = [{ id: "date", desc: true }];
const table = useMantineReactTable({
localization: MRT_Localization_RU,
enablePagination: true,
data,
columns,
enableTopToolbar: false,
enableBottomToolbar: true,
enableSorting: true,
initialState: {
sorting: defaultSorting,
},
});
return (
<div className={styles["container"]}>
<PageBlock>
<Filters />
</PageBlock>
<PageBlock>
<MantineReactTable table={table} />
</PageBlock>
</div>
);
};

31
src/pages/StatisticsPage/components/ProfitTable/columns.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { useMemo } from "react";
import { MRT_ColumnDef } from "mantine-react-table";
import { ProfitTableRow } from "../../types/ProfitTableRow.ts";
export const useProfitTableColumns = () => {
return useMemo<MRT_ColumnDef<ProfitTableRow>[]>(
() => [
{
accessorKey: "date",
header: "Дата",
},
{
accessorKey: "dealsCount",
header: "Кол-во сделок"
},
{
accessorKey: "profit",
header: "Прибыль",
Cell: ({ row }) =>
row.original.profit.toLocaleString("ru-RU") + "₽",
},
{
accessorKey: "revenue",
header: "Выручка",
Cell: ({ row }) =>
row.original.revenue.toLocaleString("ru-RU") + "₽",
},
],
[]
);
};

28
src/pages/StatisticsPage/components/StatisticsTabSegmentControl/StatisticsTabSegmentControl.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
import { FC } from "react";
export enum StatisticsTab {
PROFIT,
SALARIES,
}
type Props = Omit<SegmentedControlProps, "data">;
const data = [
{
label: "Выручка по сделкам",
value: StatisticsTab.PROFIT.toString(),
},
{
label: "Зарплаты",
value: StatisticsTab.SALARIES.toString(),
},
];
export const StatisticsTabSegmentControl: FC<Props> = props => {
return (
<SegmentedControl
data={data}
{...props}
/>
);
};

43
src/pages/StatisticsPage/components/StatisticsTableSegmentControl/StatisticsTableSegmentControl.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
import { FC } from "react";
export enum GroupStatisticsTable {
BY_DATES,
BY_CLIENTS,
BY_STATUSES,
BY_WAREHOUSES,
BY_MARKETPLACES,
}
type Props = Omit<SegmentedControlProps, "data">;
const data = [
{
label: "По датам",
value: GroupStatisticsTable.BY_DATES.toString(),
},
{
label: "По клиентам",
value: GroupStatisticsTable.BY_CLIENTS.toString(),
},
{
label: "По статусам",
value: GroupStatisticsTable.BY_STATUSES.toString(),
},
{
label: "По складам отгрузки",
value: GroupStatisticsTable.BY_WAREHOUSES.toString(),
},
{
label: "По маркетплейсам",
value: GroupStatisticsTable.BY_MARKETPLACES.toString(),
},
];
export const StatisticsTableSegmentControl: FC<Props> = props => {
return (
<SegmentedControl
data={data}
{...props}
/>
);
};

1
src/pages/StatisticsPage/index.ts Normal file
View File

@@ -0,0 +1 @@
export { StatisticsPage } from "./ui/StatisticsPage.tsx";

31
src/pages/StatisticsPage/tabs/ProfitTab/Chart.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { AreaChart } from "@mantine/charts";
import "@mantine/charts/styles.css";
import PageBlock from "../../../../components/PageBlock/PageBlock.tsx";
import { ProfitDataItem } from "../../../../client";
type Props = {
data: ProfitDataItem[];
}
export const Chart = ({ data }: Props) => {
return (
<PageBlock>
<AreaChart
mx={"lg"}
my={"sm"}
w={"98%"}
h={"50vh"}
data={data}
dataKey="date"
unit="₽"
tooltipAnimationDuration={200}
valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
series={[
{ name: "profit", label: "Прибыль", color: "indigo.6" },
{ name: "revenue", label: "Выручка", color: "teal.6" },
]}
fillOpacity={0.5}
/>
</PageBlock>
);
};

72
src/pages/StatisticsPage/tabs/ProfitTab/ProfitTab.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { useForm } from "@mantine/form";
import { Chart } from "./Chart.tsx";
import { Filters } from "../../components/Filters/Filters.tsx";
import styles from "../../ui/StatisticsPage.module.css";
import { ChartFormFilters } from "../../types/ChartFormFilters.ts";
import { useEffect, useState } from "react";
import { ProfitDataItem, StatisticsService } from "../../../../client";
import { dateToString, getDefaultDates } from "../../utils/dates.ts";
import { ProfitTable } from "../../components/ProfitTable/ProfitTable.tsx";
export const ProfitTab = () => {
const form = useForm<ChartFormFilters>({
mode: "controlled",
initialValues: {
dateRange: getDefaultDates(),
client: null,
marketplace: null,
dealStatus: null,
},
});
const [profitData, setProfitData] = useState<ProfitDataItem[]>([]);
const getFilters = () => {
const dateRange = form.values.dateRange;
return {
dateRange: [
dateToString(dateRange[0]),
dateToString(dateRange[1]),
],
clientId: form.values.client?.id ?? -1,
baseMarketplaceKey: form.values.marketplace?.key ?? "all",
dealStatusId: form.values.dealStatus?.id ?? -1,
};
};
const fetchProfitData = () => {
StatisticsService.getProfitData({
requestBody: getFilters(),
})
.then(res => {
setProfitData(res.data);
})
.catch(err => console.log(err));
};
useEffect(() => {
if (form.values.dateRange.length < 2 || form.values.dateRange[1] === null) {
return;
}
console.log(form.values);
fetchProfitData();
}, [form.values]);
return (
<div className={styles["container"]}>
<Filters
datePickerProps={form.getInputProps("dateRange")}
clientSelectProps={form.getInputProps("client")}
onClientClear={() => form.setFieldValue("client", null)}
baseMarketplaceSelectProps={form.getInputProps("marketplace")}
onBaseMarketplaceClear={() => form.setFieldValue("marketplace", null)}
dealStatusSelectProps={form.getInputProps("dealStatus")}
onDealStatusClear={() => form.setFieldValue("dealStatus", null)}
/>
<Chart data={profitData} />
<ProfitTable data={profitData} />
</div>
);
};

9
src/pages/StatisticsPage/types/ChartFormFilters.ts Normal file
View File

@@ -0,0 +1,9 @@
import { BaseMarketplaceSchema, ClientSchema } from "../../../client";
import { DealStatusType } from "../../../shared/enums/DealStatus.ts";
export interface ChartFormFilters {
dateRange: [Date | null, Date | null];
client: ClientSchema | null;
marketplace: BaseMarketplaceSchema | null;
dealStatus: DealStatusType | null;
}

6
src/pages/StatisticsPage/types/ProfitTableRow.ts Normal file
View File

@@ -0,0 +1,6 @@
export type ProfitTableRow = {
date: string;
dealsCount: number;
profit: number;
revenue: number;
}

6
src/pages/StatisticsPage/types/TableFormFilters.ts Normal file
View File

@@ -0,0 +1,6 @@
import { GroupStatisticsTable } from "../components/StatisticsTableSegmentControl/StatisticsTableSegmentControl.tsx";
export interface TableFormFilters {
dateRange: [Date | null, Date | null];
groupTableBy: GroupStatisticsTable;
}

12
src/pages/StatisticsPage/ui/StatisticsPage.module.css Normal file
View File

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

38
src/pages/StatisticsPage/ui/StatisticsPage.tsx Normal file
View File

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

15
src/pages/StatisticsPage/utils/dates.ts Normal file
View File

@@ -0,0 +1,15 @@
export const getDefaultDates = (): [Date, Date] => {
const dateTo = new Date();
const dateFrom = new Date();
dateFrom.setDate(dateTo.getDate() - 28);
return [dateFrom, dateTo];
};
export const dateToString = (date: Date | null) => {
if (date === null) return null;
const month = date.getMonth() + 1;
const day = date.getDate();
const monthStr = month < 10 ? `0${month}` : month;
const dayStr = day < 10 ? `0${day}` : day;
return `${date.getFullYear()}-${monthStr}-${dayStr}`;
};