feat: additional expenses

src/pages/AdminPage/AdminPage.tsx

@@ -3,7 +3,7 @@ import { Tabs } from "@mantine/core";
 import PageBlock from "../../components/PageBlock/PageBlock.tsx";
 import {
     IconBriefcase,
-    IconCalendarUser,
+    IconCalendarUser, IconCoins,
     IconCurrencyDollar, IconQrcode,
     IconUser,
 } from "@tabler/icons-react";
@@ -13,6 +13,7 @@ import { motion } from "framer-motion";
 import FinancesTab from "./tabs/Finances/FinancesTab.tsx";
 import WorkTimeTable from "./tabs/WorkTimeTable/ui/WorkTimeTable.tsx";
 import { WorkShiftsTab } from "./tabs/WorkShifts/WorkShiftsTab.tsx";
+import { ExpensesTab } from "./tabs/Expenses/ExpensesTab.tsx";
 
 const AdminPage = () => {
     return (
@@ -48,6 +49,11 @@ const AdminPage = () => {
                             leftSection={<IconQrcode />}>
                             Смены
                         </Tabs.Tab>
+                        <Tabs.Tab
+                            value={"expenses"}
+                            leftSection={<IconCoins />}>
+                            Расходы
+                        </Tabs.Tab>
                     </Tabs.List>
                     <Tabs.Panel value={"users"}>
                         <motion.div
@@ -89,6 +95,14 @@ const AdminPage = () => {
                             <WorkShiftsTab />
                         </motion.div>
                     </Tabs.Panel>
+                    <Tabs.Panel value={"expenses"}>
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ duration: 0.2 }}>
+                            <ExpensesTab />
+                        </motion.div>
+                    </Tabs.Panel>
                 </Tabs>
             </PageBlock>
         </div>

src/pages/AdminPage/hooks/useExpensesList.tsx

@@ -0,0 +1,12 @@
+import { Pagination } from "../../../types/Pagination.ts";
+import { ObjectListWithPagination } from "../../../hooks/objectList.tsx";
+import { ExpenseService } from "../../../client";
+
+
+export const useExpensesList = (pagination: Pagination) =>
+    ObjectListWithPagination({
+        queryFn: () => ExpenseService.getAllExpenses(pagination),
+        queryKey: "getExpenses",
+        getObjectsFn: response => response.expenses,
+        pagination,
+    });

src/pages/AdminPage/tabs/Expenses/ExpensesTab.tsx

@@ -0,0 +1,134 @@
+import { useExpensesList } from "../../hooks/useExpensesList.tsx";
+import { useExpensesTableColumns } from "./hooks/useExpensesTableColumns.tsx";
+import { ExpenseSchemaBase, ExpenseService } from "../../../../client";
+import { dateToString } from "../../../../types/utils.ts";
+import { notifications } from "../../../../shared/lib/notifications.ts";
+import { modals } from "@mantine/modals";
+import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
+import { Pagination, Flex, rem, Button, Tooltip, ActionIcon } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { IconEdit, IconTrash } from "@tabler/icons-react";
+import { MRT_TableOptions } from "mantine-react-table";
+
+
+export const ExpensesTab = () => {
+    const [totalPages, setTotalPages] = useState(10);
+    const [page, setPage] = useState(1);
+    const {
+        pagination: paginationInfo,
+        objects: expenses,
+        refetch,
+    } = useExpensesList({ page: page, itemsPerPage: 10 });
+    const columns = useExpensesTableColumns();
+
+    useEffect(() => {
+        if (!paginationInfo) return;
+        setTotalPages(paginationInfo.totalPages);
+    }, [paginationInfo]);
+
+    const onUpdate = (expense: ExpenseSchemaBase) => {
+        ExpenseService.updateExpense({
+            requestBody: {
+                expense: {
+                    ...expense,
+                    spentDate: dateToString(new Date(expense.spentDate)) ?? "",
+                },
+            },
+        })
+            .then(async ({ ok, message }) => {
+                notifications.guess(ok, { message });
+                await refetch();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const onCreateClick = () => {
+        modals.openContextModal({
+            modal: "expenseFormModal",
+            title: "Создание записи о расходах",
+            withCloseButton: false,
+            innerProps: {
+                onCreate: onUpdate,
+            },
+        });
+    };
+
+    const onEditClick = (expense: ExpenseSchemaBase) => {
+        modals.openContextModal({
+            modal: "expenseFormModal",
+            title: "Редактирование записи о расходах",
+            withCloseButton: false,
+            innerProps: {
+                onChange: event => onUpdate(event),
+                element: expense,
+            },
+        });
+    };
+
+    const onDeleteClick = (expense: ExpenseSchemaBase) => {
+        ExpenseService.deleteExpense({
+            expenseId: expense.id,
+        })
+            .then(async ({ ok, message }) => {
+                notifications.guess(ok, { message });
+                await refetch();
+            })
+            .catch(err => console.log(err));
+    };
+
+    return (
+        <Flex
+            direction={"column"}
+            h={"100%"}
+            gap={rem(10)}>
+            <BaseTable
+                data={expenses}
+                columns={columns}
+                restProps={
+                    {
+                        enableTopToolbar: true,
+                        enableRowActions: true,
+                        enableSorting: false,
+                        enableColumnActions: false,
+                        renderTopToolbar: (
+                            <Flex p={rem(10)}>
+                                <Button
+                                    variant={"default"}
+                                    onClick={() => onCreateClick()}>
+                                    Создать запись о расходах
+                                </Button>
+                            </Flex>
+                        ),
+                        renderRowActions: ({ row }) => (
+                            <Flex gap="md">
+                                <Tooltip label="Редактировать">
+                                    <ActionIcon
+                                        onClick={() => onEditClick(row.original)}
+                                        variant={"default"}>
+                                        <IconEdit />
+                                    </ActionIcon>
+                                </Tooltip>
+                                <Tooltip label="Удалить">
+                                    <ActionIcon
+                                        onClick={() => onDeleteClick(row.original)}
+                                        variant={"default"}>
+                                        <IconTrash />
+                                    </ActionIcon>
+                                </Tooltip>
+                            </Flex>
+                        ),
+                    } as MRT_TableOptions<ExpenseSchemaBase>
+                }
+            />
+            {totalPages > 1 && (
+                <Pagination
+                    style={{ alignSelf: "flex-end" }}
+                    withEdges
+                    onChange={event => setPage(event)}
+                    value={page}
+                    total={totalPages}
+                />
+            )}
+        </Flex>
+    );
+};

src/pages/AdminPage/tabs/Expenses/hooks/useExpensesTableColumns.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { ExpenseSchemaBase } from "../../../../../client";
+import { formatDate } from "../../../../../types/utils.ts";
+
+
+export const useExpensesTableColumns = () => {
+    return useMemo<MRT_ColumnDef<ExpenseSchemaBase>[]>(
+        () => [
+            {
+                accessorKey: "spentDate",
+                header: "Дата",
+                Cell: ({ row }) => formatDate(row.original.spentDate as string),
+            },
+            {
+                accessorKey: "name",
+                header: "Наименование",
+            },
+            {
+                accessorKey: "comment",
+                header: "Комментарий",
+            },
+            {
+                accessorKey: "amount",
+                header: "Сумма",
+            },
+            {
+                accessorKey: "createdByUser",
+                header: "Создал запись",
+                Cell: ({ row }) => {
+                    return `${row.original.createdByUser.firstName} ${row.original.createdByUser.secondName}`;
+                },
+            },
+        ],
+        [],
+    );
+};

src/pages/AdminPage/tabs/Expenses/modals/ExpenseFormModal.tsx

@@ -0,0 +1,67 @@
+import { ContextModalProps } from "@mantine/modals";
+import { useForm } from "@mantine/form";
+import { Flex, NumberInput, rem, TextInput } from "@mantine/core";
+import BaseFormModal, { CreateEditFormProps } from "../../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import { ExpenseSchemaBase } from "../../../../../client";
+import { DatePickerInput } from "@mantine/dates";
+
+type Props = CreateEditFormProps<ExpenseSchemaBase>;
+
+const ExpenseFormModal = ({
+                              context,
+                              id,
+                              innerProps,
+                          }: ContextModalProps<Props>) => {
+    const isEditing = "element" in innerProps;
+    const initialValue: Partial<ExpenseSchemaBase> = isEditing
+        ? innerProps.element
+        : {};
+
+    const form = useForm<Partial<ExpenseSchemaBase>>({
+        initialValues: initialValue,
+        validate: {
+            name: name => !name && "Необходимо указать наименование",
+            amount: amount => !amount && "Необходимо указать сумму",
+            spentDate: spentDate => !spentDate && "Необходимо указать дату",
+        },
+    });
+    return (
+        <BaseFormModal
+            form={form}
+            closeOnSubmit
+            onClose={() => context.closeContextModal(id)}
+            {...innerProps}>
+            <BaseFormModal.Body>
+                <Flex
+                    direction={"column"}
+                    gap={rem(10)}>
+                    <TextInput
+                        label={"Наименование"}
+                        placeholder={"Введите наименование"}
+                        {...form.getInputProps("name")}
+                    />
+                    <TextInput
+                        label={"Комментарий"}
+                        placeholder={"Введите комментарий"}
+                        {...form.getInputProps("comment")}
+                    />
+                    <NumberInput
+                        label={"Сумма"}
+                        placeholder={"Введите сумму"}
+                        min={0}
+                        {...form.getInputProps("amount")}
+                    />
+                    <DatePickerInput
+                        {...form.getInputProps("spentDate")}
+                        value={form.getInputProps("spentDate").value ? new Date(form.getInputProps("spentDate").value) : null}
+                        label={"Дата"}
+                        placeholder={"Укажите дату расхода"}
+                        valueFormat={"DD.MM.YYYY"}
+                    />
+                </Flex>
+            </BaseFormModal.Body>
+        </BaseFormModal>
+    );
+};
+
+export default ExpenseFormModal;

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

@@ -1,9 +1,10 @@
 import { ChartFormFilters } from "../../../../../types/ChartFormFilters.ts";
 import { useForm } from "@mantine/form";
-import { dateToString, getDefaultDates } from "../../../../../utils/dates.ts";
+import { getDefaultDates } from "../../../../../utils/dates.ts";
 import { useEffect, useState } from "react";
 import { ProfitChartDataItem, StatisticsService } from "../../../../../../../client";
 import { defaultDealStatus } from "../../../../../utils/defaultFilterValues.ts";
+import { dateToString } from "../../../../../../../types/utils.ts";
 
 
 export const useProfitChart = () => {

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

@@ -1,11 +1,12 @@
 import { useForm } from "@mantine/form";
 import { TableFormFilters } from "../../../../../types/TableFormFilters.ts";
-import { dateToString, getDefaultDates } from "../../../../../utils/dates.ts";
+import { getDefaultDates } from "../../../../../utils/dates.ts";
 import { GroupStatisticsTable } from "../../ProfitTableSegmentedControl/ProfitTableSegmentedControl.tsx";
 import { useEffect, useState } from "react";
 import { ProfitTableDataItem, StatisticsService } from "../../../../../../../client";
 import { useProfitMantineTable } from "./useProfitMantineTable.tsx";
 import { defaultDealStatus } from "../../../../../utils/defaultFilterValues.ts";
+import { dateToString } from "../../../../../../../types/utils.ts";
 
 
 export const useProfitTable = () => {

src/pages/StatisticsPage/utils/dates.ts

@@ -5,11 +5,3 @@ export const getDefaultDates = (): [Date, Date] => {
     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}`;
-};