k

src/pages/AdminPage/components/PayRateTable/PayRateTable.tsx

@@ -0,0 +1,94 @@
+import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
+import {PayRateSchema} from "../../../../client";
+import {FC} from "react";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import {usePayRatesTableColumns} from "./columns.tsx";
+import {ActionIcon, Button, Flex, rem, Text, Tooltip} from "@mantine/core";
+import {modals} from "@mantine/modals";
+import {IconEdit, IconTrash} from "@tabler/icons-react";
+import {MRT_TableOptions} from "mantine-react-table";
+
+type Props = CRUDTableProps<PayRateSchema>;
+
+const PayRateTable: FC<Props> = ({items, onCreate, onChange, onDelete}) => {
+    const columns = usePayRatesTableColumns();
+
+    const onCreateClick = () => {
+        if (!onCreate) return;
+        modals.openContextModal({
+            modal: "payRateForm",
+            withCloseButton: false,
+            innerProps: {
+                onCreate: onCreate
+            }
+        })
+    }
+    const onEditClick = (payRate: PayRateSchema) => {
+        if (!onChange) return;
+        modals.openContextModal({
+            modal: "payRateForm",
+            withCloseButton: false,
+            innerProps: {
+                onChange: (event) => onChange({...event, id: payRate.id}),
+                element: payRate
+            }
+        })
+    }
+    const onDeleteClick = (payRate: PayRateSchema) => {
+        if (!onDelete) return;
+        modals.openConfirmModal({
+            title: 'Удаление тарифа',
+            children: (
+                <Text size="sm">
+                    Вы уверены что хотите удалить тариф {payRate.name}
+                </Text>
+            ),
+            labels: {confirm: 'Да', cancel: "Нет"},
+            confirmProps: {color: 'red'},
+            onConfirm: () => onDelete(payRate)
+        });
+    }
+
+    return (
+        <BaseTable
+            data={items}
+            columns={columns}
+            restProps={{
+                enableSorting: false,
+                enableColumnActions: false,
+                enableTopToolbar: true,
+                renderTopToolbar: (
+                    <Flex p={rem(10)}>
+
+                        <Button
+                            variant={"default"}
+                            onClick={() => onCreateClick()}
+                        >
+                            Создать тариф
+                        </Button>
+                    </Flex>
+
+                ),
+                enableRowActions: true,
+                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<PayRateSchema>}
+        />
+    )
+}
+
+export default PayRateTable;

src/pages/AdminPage/components/PayRateTable/columns.tsx

@@ -0,0 +1,32 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {PayRateSchema} from "../../../../client";
+
+export const usePayRatesTableColumns = () => {
+    return useMemo<MRT_ColumnDef<PayRateSchema>[]>(() => [
+        {
+            accessorKey: "name",
+            header: "Название тарифа"
+        },
+        {
+            accessorKey: "payrollScheme.name",
+            header: "Система оплаты"
+        },
+        {
+            accessorKey: "baseRate",
+            header: "Базовая ставка",
+            Cell: ({row}) => `${row.original.baseRate.toLocaleString("ru")}₽`
+
+        },
+        {
+            accessorKey: "overtimeThreshold",
+            header: "Порог сверхурочных"
+        },
+        {
+            accessorKey: "overtimeRate",
+            header: "Сверхурочная ставка",
+            Cell: ({row}) => row.original.overtimeRate && `${row.original.overtimeRate.toLocaleString("ru")}₽`
+
+        }
+    ], []);
+}