feat: work shifts history

src/pages/AdminPage/components/ActiveShiftsTable/ActiveShiftsTable.tsx

@@ -1,116 +0,0 @@
-import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
-import { useActiveShiftsTableColumns } from "./columns.tsx";
-import { ActionIcon, Flex, Stack, Text, Title, Tooltip } from "@mantine/core";
-import { IconCheck, IconTrash } from "@tabler/icons-react";
-import { ActiveWorkShiftSchema, WorkShiftsService } from "../../../../client";
-import { modals } from "@mantine/modals";
-import { formatDate } from "../../../../types/utils.ts";
-import { MRT_TableOptions } from "mantine-react-table";
-import { notifications } from "../../../../shared/lib/notifications.ts";
-
-
-type Props = {
-    activeShifts: ActiveWorkShiftSchema[];
-    fetchActiveShifts: () => void;
-}
-
-export const ActiveShiftsTable = ({ activeShifts, fetchActiveShifts }: Props) => {
-    const columns = useActiveShiftsTableColumns();
-
-    const onDelete = (workShift: ActiveWorkShiftSchema) => {
-        WorkShiftsService.deleteWorkShift({
-            shiftId: workShift.id,
-        })
-            .then(({ ok, message }) => {
-                notifications.guess(ok, { message });
-                fetchActiveShifts();
-            })
-            .catch(err => {
-                console.log(err);
-            });
-    };
-
-    const onDeleteClick = (workShift: ActiveWorkShiftSchema) => {
-        modals.openConfirmModal({
-            title: "Удаление записи о начале смены",
-            children: (
-                <Text size="sm">
-                    Вы уверены что хотите удалить запись о начале смены работника{" "}
-                    {workShift.user.firstName} {workShift.user.secondName} от{" "}
-                    {formatDate(workShift.startedAt)}
-                </Text>
-            ),
-            labels: { confirm: "Да", cancel: "Нет" },
-            confirmProps: { color: "red" },
-            onConfirm: () => onDelete(workShift),
-        });
-    };
-
-    const onShiftFinish = (workShift: ActiveWorkShiftSchema) => {
-        WorkShiftsService.finishWorkShiftById({
-            shiftId: workShift.id,
-        })
-            .then(({ ok, message }) => {
-                notifications.guess(ok, { message });
-                fetchActiveShifts();
-            })
-            .catch(err => console.log(err));
-    }
-
-    const onShiftFinishClick = (workShift: ActiveWorkShiftSchema) => {
-        modals.openConfirmModal({
-            title: "Завершение смены",
-            children: (
-                <Text size="sm">
-                    Вы уверены что хотите завершить смену работника{" "}
-                    {workShift.user.firstName} {workShift.user.secondName} от{" "}
-                    {formatDate(workShift.startedAt)}
-                </Text>
-            ),
-            labels: { confirm: "Да", cancel: "Нет" },
-            confirmProps: { color: "red" },
-            onConfirm: () => onShiftFinish(workShift),
-        });
-    }
-
-    return (
-        <Stack mx={"xs"}>
-            <Title order={4} mt={"md"}>
-                Активные смены
-            </Title>
-            <BaseTable
-                data={activeShifts}
-                columns={columns}
-                restProps={
-                    {
-                        enableRowActions: true,
-                        enableSorting: true,
-                        enableColumnActions: false,
-                        renderRowActions: ({ row }) => (
-                            <Flex gap="md">
-                                <Tooltip label="Удалить">
-                                    <ActionIcon
-                                        onClick={() =>
-                                            onDeleteClick(row.original)
-                                        }
-                                        variant={"default"}>
-                                        <IconTrash />
-                                    </ActionIcon>
-                                </Tooltip>
-                                <Tooltip label="Завершить смену">
-                                    <ActionIcon
-                                        onClick={() =>
-                                            onShiftFinishClick(row.original)
-                                        }
-                                        variant={"default"}>
-                                        <IconCheck />
-                                    </ActionIcon>
-                                </Tooltip>
-                            </Flex>
-                        ),
-                    } as MRT_TableOptions<ActiveWorkShiftSchema>
-                }
-            />
-        </Stack>
-    );
-};

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

@@ -1,32 +0,0 @@
-import { useMemo } from "react";
-import { MRT_ColumnDef } from "mantine-react-table";
-import { ActiveWorkShiftSchema } from "../../../../client";
-
-export const useActiveShiftsTableColumns = () => {
-    return useMemo<MRT_ColumnDef<ActiveWorkShiftSchema>[]>(
-        () => [
-            {
-                header: "Начало смены",
-                accessorKey: "startedAt",
-                Cell: ({ row }) =>
-                    new Date(row.original.startedAt).toLocaleString("ru-RU"),
-            },
-            {
-                header: "ФИО",
-                Cell: ({ row }) =>
-                    `${row.original.user.firstName} ${row.original.user.secondName}`,
-            },
-            {
-                header: "Роль",
-                accessorKey: "user.role.name",
-                enableSorting: false,
-            },
-            {
-                header: "Должность",
-                accessorKey: "user.position.name",
-                enableSorting: false,
-            }
-        ],
-        []
-    );
-};

src/pages/AdminPage/components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx

@@ -0,0 +1,28 @@
+import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
+import { FC } from "react";
+
+export enum ShiftsTableType {
+    ACTIVE,
+    HISTORY,
+}
+
+type Props = Omit<SegmentedControlProps, "data">;
+const data = [
+    {
+        label: "Активные смены",
+        value: ShiftsTableType.ACTIVE.toString(),
+    },
+    {
+        label: "Завершенные смены",
+        value: ShiftsTableType.HISTORY.toString(),
+    },
+];
+
+export const ShiftsTableSegmentedControl: FC<Props> = props => {
+    return (
+        <SegmentedControl
+            data={data}
+            {...props}
+        />
+    );
+};

src/pages/AdminPage/tabs/WorkShifts/WorkShiftsTab.tsx

@@ -1,91 +1,52 @@
-import { Button, Group, Stack } from "@mantine/core";
-import { ActiveWorkShiftSchema, WorkShiftsService } from "../../../../client";
-import { useEffect, useState } from "react";
-import { notifications } from "../../../../shared/lib/notifications.ts";
-import { modals } from "@mantine/modals";
-import { ActiveShiftsTable } from "../../components/ActiveShiftsTable/ActiveShiftsTable.tsx";
+import { Divider, Flex, Pagination, rem, Skeleton, Stack } from "@mantine/core";
+import { ShiftsTable } from "./components/ShiftsTable.tsx";
+import {
+    ShiftsTableSegmentedControl,
+} from "../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
+import useWorkShiftsTable from "./hooks/useWorkShiftsTable.tsx";
+import WorkShiftInput from "./components/WorkShiftInput.tsx";
 
 export const WorkShiftsTab = () => {
-    let inputType: "StartShift" | "FinishShift" = "StartShift";
-    const [activeShifts, setActiveShifts] = useState<ActiveWorkShiftSchema[]>([]);
-
-    const fetchActiveShifts = () => {
-        WorkShiftsService.getActiveShifts()
-            .then(res => {
-                setActiveShifts(res.shifts);
-            })
-            .catch(err => console.log(err));
-    }
-
-    useEffect(() => {
-        fetchActiveShifts();
-    }, []);
-
-    const onInputFinish = (userIdInput: string) => {
-        const userId = parseInt(userIdInput);
-        if (isNaN(userId)) {
-            notifications.error({ message: "Ошибка, некорректные данные в QR-коде" });
-            return;
-        }
-
-        if (inputType === "StartShift") {
-            WorkShiftsService.startShift({
-                userId: userId!,
-            })
-                .then(async ({ ok, message }) => {
-                    notifications.guess(ok, { message });
-                    fetchActiveShifts();
-                })
-                .catch(err => console.log(err));
-            return;
-        }
-
-        WorkShiftsService.finishShift({
-            userId: userId!,
-        })
-            .then(async ({ ok, message }) => {
-                notifications.guess(ok, { message });
-                fetchActiveShifts();
-            })
-            .catch(err => console.log(err));
-    };
-
-    const onScanningStart = () => {
-        modals.openContextModal({
-            modal: "scanningModal",
-            innerProps: {
-                label: "Отсканируйте QR-код",
-                onScan: onInputFinish,
-                closeOnScan: true,
-            },
-            withCloseButton: false,
-        });
-    };
-
-    const onShiftStart = () => {
-        inputType = "StartShift";
-        onScanningStart();
-    };
-
-    const onShiftFinish = () => {
-        inputType = "FinishShift";
-        onScanningStart();
-    };
+    const {
+        shifts,
+        shiftsTableType,
+        setShiftsTableType,
+        totalPages,
+        page,
+        setPage,
+        fetchShifts,
+        isLoading,
+    } = useWorkShiftsTable();
 
     return (
-        <Stack>
-            <Group ml={"xs"} mt={"xs"}>
-                <Button variant={"default"} onClick={onShiftStart}>
-                    Начать смену
-                </Button>
-                <Button variant={"default"} onClick={onShiftFinish}>
-                    Закончить смену
-                </Button>
-            </Group>
-            <ActiveShiftsTable
-                activeShifts={activeShifts}
-                fetchActiveShifts={fetchActiveShifts}
+        <Stack gap={0}>
+            <WorkShiftInput fetchShifts={fetchShifts} />
+            <Divider />
+            <ShiftsTableSegmentedControl
+                value={shiftsTableType.toString()}
+                onChange={event => {
+                    setPage(1);
+                    setShiftsTableType(parseInt(event));
+                }}
             />
+            <Skeleton visible={isLoading}>
+                <Flex gap={rem(10)} direction={"column"}>
+                    <ShiftsTable
+                        shiftsTableType={shiftsTableType}
+                        shifts={shifts}
+                        fetchShifts={fetchShifts}
+                    />
+                    {totalPages > 1 && (
+                        <Pagination
+                            style={{ alignSelf: "flex-end" }}
+                            withEdges
+                            onChange={event => setPage(event)}
+                            value={page}
+                            total={totalPages}
+                        />
+                    )}
+                </Flex>
+            </Skeleton>
         </Stack>
     );
 };

src/pages/AdminPage/tabs/WorkShifts/components/ShiftsTable.tsx

@@ -0,0 +1,120 @@
+import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
+import { useShiftsTableColumns } from "../hooks/columns.tsx";
+import { ActionIcon, Flex, Text, Tooltip } from "@mantine/core";
+import { IconCheck, IconTrash } from "@tabler/icons-react";
+import { WorkShiftSchema, WorkShiftsService } from "../../../../../client";
+import { modals } from "@mantine/modals";
+import { formatDate } from "../../../../../types/utils.ts";
+import { MRT_TableOptions } from "mantine-react-table";
+import { notifications } from "../../../../../shared/lib/notifications.ts";
+import { ShiftsTableType } from "../../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
+
+
+type Props = {
+    shifts: WorkShiftSchema[];
+    fetchShifts: () => void;
+    shiftsTableType: ShiftsTableType;
+}
+
+export const ShiftsTable = ({
+                                shifts,
+                                fetchShifts,
+                                shiftsTableType,
+                            }: Props) => {
+    const isActiveShiftsTable = shiftsTableType === ShiftsTableType.ACTIVE;
+    const columns = useShiftsTableColumns({ isActiveShiftsTable });
+
+    const onDelete = (workShift: WorkShiftSchema) => {
+        WorkShiftsService.deleteWorkShift({
+            shiftId: workShift.id,
+        })
+            .then(({ ok, message }) => {
+                notifications.guess(ok, { message });
+                fetchShifts();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const onDeleteClick = (workShift: WorkShiftSchema) => {
+        modals.openConfirmModal({
+            title: "Удаление смены",
+            children: (
+                <Text size="sm">
+                    Вы уверены что хотите удалить смену работника{" "}
+                    {workShift.user.firstName} {workShift.user.secondName} от{" "}
+                    {formatDate(workShift.startedAt)}
+                </Text>
+            ),
+            labels: { confirm: "Да", cancel: "Нет" },
+            confirmProps: { color: "red" },
+            onConfirm: () => onDelete(workShift),
+        });
+    };
+
+    const onShiftFinish = (workShift: WorkShiftSchema) => {
+        WorkShiftsService.finishWorkShiftById({
+            shiftId: workShift.id,
+        })
+            .then(({ ok, message }) => {
+                notifications.guess(ok, { message });
+                fetchShifts();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const onShiftFinishClick = (workShift: WorkShiftSchema) => {
+        modals.openConfirmModal({
+            title: "Завершение смены",
+            children: (
+                <Text size="sm">
+                    Вы уверены что хотите завершить смену работника{" "}
+                    {workShift.user.firstName} {workShift.user.secondName} от{" "}
+                    {formatDate(workShift.startedAt)}
+                </Text>
+            ),
+            labels: { confirm: "Да", cancel: "Нет" },
+            confirmProps: { color: "red" },
+            onConfirm: () => onShiftFinish(workShift),
+        });
+    };
+
+    return (
+        <BaseTable
+            data={shifts}
+            columns={columns}
+            restProps={
+                {
+                    enableRowActions: true,
+                    enableSorting: false,
+                    enableColumnActions: false,
+                    renderRowActions: ({ row }) => {
+                        return (
+                            <Flex gap="md">
+                                <Tooltip label="Удалить">
+                                    <ActionIcon
+                                        onClick={() =>
+                                            onDeleteClick(row.original)
+                                        }
+                                        variant={"default"}>
+                                        <IconTrash />
+                                    </ActionIcon>
+                                </Tooltip>
+                                {isActiveShiftsTable && (
+                                    <Tooltip label="Завершить смену">
+                                        <ActionIcon
+                                            onClick={() =>
+                                                onShiftFinishClick(row.original)
+                                            }
+                                            variant={"default"}>
+                                            <IconCheck />
+                                        </ActionIcon>
+                                    </Tooltip>
+                                )}
+                            </Flex>
+                        );
+                    },
+                } as MRT_TableOptions<WorkShiftSchema>
+            }
+        />
+    );
+};

src/pages/AdminPage/tabs/WorkShifts/components/WorkShiftInput.tsx

@@ -0,0 +1,26 @@
+import { Button, Group } from "@mantine/core";
+import useWorkShiftInput from "../hooks/useWorkShiftInput.tsx";
+
+type Props = {
+    fetchShifts: () => void;
+}
+
+const WorkShiftInput = ({ fetchShifts }: Props) => {
+    const {
+        onShiftStart,
+        onShiftFinish,
+    } = useWorkShiftInput({ fetchShifts });
+
+    return (
+        <Group ml={"xs"} my={"xs"}>
+            <Button variant={"default"} onClick={onShiftStart}>
+                Начать смену
+            </Button>
+            <Button variant={"default"} onClick={onShiftFinish}>
+                Закончить смену
+            </Button>
+        </Group>
+    );
+};
+
+export default WorkShiftInput;

src/pages/AdminPage/tabs/WorkShifts/hooks/columns.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from "react";
+import { MRT_ColumnDef, MRT_Row } from "mantine-react-table";
+import { WorkShiftSchema } from "../../../../../client";
+
+
+type Props = {
+    isActiveShiftsTable: boolean;
+}
+
+export const useShiftsTableColumns = ({ isActiveShiftsTable }: Props) => {
+    const getWorkedHoursString = (startedAtStr: string, finishedAtStr: string) => {
+        const finishedAt = new Date(finishedAtStr);
+        const startedAt = new Date(startedAtStr);
+        const diff: number = finishedAt.getTime() - startedAt.getTime();
+        const hours = Math.floor(diff / 3_600_000);
+        const minutes = Math.round(diff % 3_600_000 / 60_000);
+        if (hours === 0) {
+            return `${minutes} мин.`;
+        }
+        return `${hours} ч. ${minutes} мин.`;
+    };
+
+    const getColumnsForHistory = () => {
+        return isActiveShiftsTable ? [] : [
+            {
+                header: "Конец смены",
+                accessorKey: "finishedAt",
+                Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
+                    row.original.finishedAt && new Date(row.original.finishedAt).toLocaleString("ru-RU"),
+            },
+            {
+                header: "Отработано",
+                Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
+                    getWorkedHoursString(row.original.startedAt, row.original.finishedAt ?? ""),
+            },
+        ];
+    };
+
+    return useMemo<MRT_ColumnDef<WorkShiftSchema>[]>(
+        () => [
+            {
+                header: "ФИО",
+                Cell: ({ row }: { row: MRT_Row<WorkShiftSchema> }) =>
+                    `${row.original.user.firstName} ${row.original.user.secondName}`,
+            },
+            {
+                header: "Роль",
+                accessorKey: "user.role.name",
+            },
+            {
+                header: "Должность",
+                accessorKey: "user.position.name",
+            },
+            {
+                header: "Начало смены",
+                accessorKey: "startedAt",
+                Cell: ({ row }) =>
+                    new Date(row.original.startedAt).toLocaleString("ru-RU"),
+            },
+            ...getColumnsForHistory(),
+        ],
+        [isActiveShiftsTable],
+    );
+};

src/pages/AdminPage/tabs/WorkShifts/hooks/useWorkShiftInput.tsx

@@ -0,0 +1,69 @@
+import { WorkShiftsService } from "../../../../../client";
+import { notifications } from "../../../../../shared/lib/notifications.ts";
+import { modals } from "@mantine/modals";
+
+type Props = {
+    fetchShifts: () => void;
+}
+
+const useWorkShiftInput = ({ fetchShifts }: Props) => {
+    let inputType: "StartShift" | "FinishShift" = "StartShift";
+
+    const onInputFinish = (userIdInput: string) => {
+        const userId = parseInt(userIdInput);
+        if (isNaN(userId)) {
+            notifications.error({ message: "Ошибка, некорректные данные в QR-коде" });
+            return;
+        }
+
+        if (inputType === "StartShift") {
+            WorkShiftsService.startShift({
+                userId: userId!,
+            })
+                .then(async ({ ok, message }) => {
+                    notifications.guess(ok, { message });
+                    fetchShifts();
+                })
+                .catch(err => console.log(err));
+            return;
+        }
+
+        WorkShiftsService.finishShift({
+            userId: userId!,
+        })
+            .then(async ({ ok, message }) => {
+                notifications.guess(ok, { message });
+                fetchShifts();
+            })
+            .catch(err => console.log(err));
+    };
+
+    const onScanningStart = () => {
+        modals.openContextModal({
+            modal: "scanningModal",
+            innerProps: {
+                label: "Отсканируйте QR-код",
+                onScan: onInputFinish,
+                closeOnScan: true,
+            },
+            withCloseButton: false,
+        });
+    };
+
+    const onShiftStart = () => {
+        inputType = "StartShift";
+        onScanningStart();
+    };
+
+    const onShiftFinish = () => {
+        inputType = "FinishShift";
+        onScanningStart();
+    };
+
+    return {
+        onShiftStart,
+        onShiftFinish,
+    };
+};
+
+export default useWorkShiftInput;

src/pages/AdminPage/tabs/WorkShifts/hooks/useWorkShiftsTable.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { WorkShiftSchema, WorkShiftsService } from "../../../../../client";
+import { ShiftsTableType } from "../../../components/ShiftsTableSegmentedControl/ShiftsTableSegmentedControl.tsx";
+
+
+const useWorkShiftsTable = () => {
+    const [totalPages, setTotalPages] = useState(1);
+    const [page, setPage] = useState(1);
+    const [shifts, setShifts] = useState<WorkShiftSchema[]>([]);
+    const [shiftsTableType, setShiftsTableType] = useState<ShiftsTableType>(ShiftsTableType.ACTIVE);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const fetchShifts = () => {
+        setIsLoading(true);
+        WorkShiftsService.getShifts({
+            isActive: shiftsTableType === ShiftsTableType.ACTIVE,
+            page,
+            itemsPerPage: 10,
+        })
+            .then(res => {
+                setShifts(res.shifts);
+                setTotalPages(res.paginationInfo.totalPages);
+            })
+            .catch(err => console.log(err))
+            .finally(() => setIsLoading(false));
+    };
+
+    useEffect(() => {
+        fetchShifts();
+    }, [shiftsTableType, page]);
+
+    return {
+        shifts,
+        shiftsTableType,
+        setShiftsTableType,
+        totalPages,
+        page,
+        setPage,
+        fetchShifts,
+        isLoading,
+    };
+};
+
+export default useWorkShiftsTable;