feat: deal status history table

src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx

@@ -1,7 +1,8 @@
 import React, { FC, ReactNode } from "react";
-import { IconEdit } from "@tabler/icons-react";
+import { IconEdit, IconHistory } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { Box, Tabs, Text } from "@mantine/core";
+import DealStatusHistoryTab from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/DealStatusHistoryTab";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema, ProjectSchema } from "@/lib/client";
@@ -35,22 +36,24 @@ const DealEditorBody: FC<Props> = props => {
         </Tabs.Panel>
     );
 
+    const getTab = (key: string, label: string, icon: ReactNode) => (
+        <Tabs.Tab
+            key={key}
+            value={key}
+            leftSection={icon}>
+            <Box
+                style={{
+                    justifyItems: "left",
+                }}>
+                <Text>{label}</Text>
+            </Box>
+        </Tabs.Tab>
+    );
+
     const getModuleTabs = () =>
         props.project?.builtInModules.map(module => {
-            const moduleRender = MODULES[module.key].renderInfo;
-            return (
-                <Tabs.Tab
-                    key={moduleRender.key}
-                    value={moduleRender.key}
-                    leftSection={moduleRender.icon}>
-                    <Box
-                        style={{
-                            justifyItems: "left",
-                        }}>
-                        <Text>{moduleRender.label}</Text>
-                    </Box>
-                </Tabs.Tab>
-            );
+            const info = MODULES[module.key].renderInfo;
+            return getTab(info.key, info.label, info.icon);
         });
 
     const getModuleTabPanels = () =>
@@ -66,15 +69,13 @@ const DealEditorBody: FC<Props> = props => {
             mih={"97vh"}
             classNames={{ tab: styles.tab }}>
             <Tabs.List>
-                <Tabs.Tab
-                    value="general"
-                    leftSection={<IconEdit />}>
-                    Общая информация
-                </Tabs.Tab>
+                {getTab("general", "Общая информация", <IconEdit />)}
+                {getTab("history", "История", <IconHistory />)}
                 {getModuleTabs()}
             </Tabs.List>
 
             {getTabPanel("general", <GeneralTab {...props} />)}
+            {getTabPanel("history", <DealStatusHistoryTab {...props} />)}
             {getModuleTabPanels()}
         </Tabs>
     );

src/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/DealStatusHistoryTab.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { useDealStatusHistoryTableColumns } from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/columns";
+import useStatusHistoryList from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/useStatusHistoryList";
+import BaseTable from "@/components/ui/BaseTable/BaseTable";
+import { DealSchema } from "@/lib/client";
+
+type Props = {
+    value: DealSchema;
+};
+
+const DealStatusHistoryTab: FC<Props> = ({ value }) => {
+    const { history } = useStatusHistoryList({ dealId: value.id });
+    const columns = useDealStatusHistoryTableColumns();
+
+    return (
+        <BaseTable
+            records={history}
+            columns={columns}
+            groups={undefined}
+            withTableBorder
+            style={{
+                margin: "var(--mantine-spacing-md)",
+            }}
+            verticalSpacing={"md"}
+        />
+    );
+};
+
+export default DealStatusHistoryTab;

src/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/columns.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { DataTableColumn } from "mantine-datatable";
+import { StatusHistorySchema } from "@/lib/client";
+import { utcDateTimeToLocalString } from "@/utils/datetime";
+
+export const useDealStatusHistoryTableColumns = () => {
+    return useMemo(
+        () =>
+            [
+                {
+                    accessor: "createdAt",
+                    title: "Дата",
+                    render: row =>
+                        utcDateTimeToLocalString(new Date(row.createdAt)),
+                },
+                // {
+                //     title: "Пользователь",
+                //     cell: row => `${row.user.firstName} ${row.user.secondName}`,
+                // },
+                {
+                    accessor: "fromStatus.name",
+                    title: "Из статуса",
+                },
+                {
+                    accessor: "toStatus.name",
+                    title: "В статус",
+                },
+            ] as DataTableColumn<StatusHistorySchema>[],
+        []
+    );
+};

src/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/useStatusHistoryList.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { getStatusHistoryOptions } from "@/lib/client/@tanstack/react-query.gen";
+
+type Props = {
+    dealId: number;
+};
+
+const useStatusHistoryList = ({ dealId }: Props) => {
+    const options = {
+        path: { dealId },
+    };
+    const { data, refetch } = useQuery(getStatusHistoryOptions(options));
+
+    return {
+        history: data?.items ?? [],
+        refetch,
+    };
+};
+
+export default useStatusHistoryList;