feat: modules, products, services, services kits

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

@@ -6,12 +6,13 @@ import DealEditorBody from "@/app/deals/drawers/DealEditorDrawer/components/Deal
 import Header from "@/app/deals/drawers/DealEditorDrawer/components/Header";
 import { DrawerProps } from "@/drawers/types";
 import useIsMobile from "@/hooks/utils/useIsMobile";
-import { DealSchema } from "@/lib/client";
+import { DealSchema, ProjectSchema } from "@/lib/client";
 
 type Props = {
     value: DealSchema;
     onChange: (deal: DealSchema) => void;
     onDelete: (deal: DealSchema, onSuccess: () => void) => void;
+    project: ProjectSchema | null;
 };
 
 const DealEditorDrawer: FC<DrawerProps<Props>> = ({
@@ -24,7 +25,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
 
     return (
         <Drawer
-            size={isMobile ? "100%" : "40%"}
+            size={isMobile ? "100%" : "60%"}
             position={"right"}
             onClose={onClose}
             removeScrollProps={{ allowPinchZoom: true }}
@@ -49,6 +50,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
                     props.onChange(deal);
                 }}
                 onDelete={value => props.onDelete(value, onClose)}
+                project={props.project}
             />
         </Drawer>
     );

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

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

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { Stack, Text, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer";
+import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
 import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
 import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
 import { BoardSchema, DealSchema, StatusSchema } from "@/lib/client";