feat: modules, products, services, services kits

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

@@ -1,17 +1,55 @@
-import React, { FC } from "react";
-import { IconCircleDotted, IconEdit } from "@tabler/icons-react";
-import { Tabs, Text } from "@mantine/core";
+import React, { FC, ReactNode } from "react";
+import { IconEdit } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import { Box, Tabs } from "@mantine/core";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
-import { DealSchema } from "@/lib/client";
+import { DealSchema, ProjectSchema } from "@/lib/client";
+import { MODULES } from "@/modules/modules";
 import styles from "../DealEditorDrawer.module.css";
 
 type Props = {
     value: DealSchema;
     onChange: (deal: DealSchema) => void;
     onDelete: (deal: DealSchema) => void;
+    project: ProjectSchema | null;
 };
 
 const DealEditorBody: FC<Props> = props => {
+    const getTabPanel = (value: string, component: ReactNode): ReactNode => (
+        <Tabs.Panel
+            key={value}
+            value={value}>
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.2 }}>
+                <Box
+                    h={"100%"}
+                    w={"100%"}>
+                    {component}
+                </Box>
+            </motion.div>
+        </Tabs.Panel>
+    );
+
+    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}>
+                    {moduleRender.label}
+                </Tabs.Tab>
+            );
+        });
+
+    const getModuleTabPanels = () =>
+        props.project?.builtInModules.map(module =>
+            getTabPanel(module.key, MODULES[module.key]?.getTab?.(props))
+        );
+
     return (
         <Tabs
             defaultValue="general"
@@ -22,19 +60,11 @@ const DealEditorBody: FC<Props> = props => {
                     leftSection={<IconEdit />}>
                     Общая информация
                 </Tabs.Tab>
-                <Tabs.Tab
-                    value="mock"
-                    leftSection={<IconCircleDotted />}>
-                    Mock
-                </Tabs.Tab>
+                {getModuleTabs()}
             </Tabs.List>
 
-            <Tabs.Panel value="general">
-                <GeneralTab {...props} />
-            </Tabs.Panel>
-            <Tabs.Panel value="mock">
-                <Text>mock</Text>
-            </Tabs.Panel>
+            {getTabPanel("general", <GeneralTab {...props} />)}
+            {getModuleTabPanels()}
         </Tabs>
     );
 };