feat: deal status history table

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;