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>
     );