feat: projects and boards

2025-02-07 20:07:10 +04:00
parent 58d397ed0b
commit 580552bd47
185 changed files with 3352 additions and 1284 deletions
--- a/src/pages/DealsPage/drawers/DealEditDrawer/DealEditDrawer.tsx
+++ b/src/pages/DealsPage/drawers/DealEditDrawer/DealEditDrawer.tsx
@@ -0,0 +1,126 @@
+import { Box, Drawer, rem, Tabs } from "@mantine/core";
+import { FC, ReactNode, useEffect } from "react";
+import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
+import { IconBox, IconCalendarUser, IconCubeSend, IconSettings, IconUser, IconUsersGroup } from "@tabler/icons-react";
+import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealStatusChangeTable.tsx";
+import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";
+import { useQueryClient } from "@tanstack/react-query";
+import ProductAndServiceTab from "../../tabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
+import { motion } from "framer-motion";
+import ShippingTab from "../../tabs/ShippingTab/ShippingTab.tsx";
+import EmployeesTab from "../../tabs/EmployeesTab/EmployeesTab.tsx";
+import ClientTab from "./tabs/ClientTab.tsx";
+
+const useDealStatusChangeState = () => {
+    const { selectedDeal } = useDealPageContext();
+    return {
+        statusHistory: selectedDeal?.statusHistory || [],
+    };
+};
+
+const DealEditDrawerStatusChangeTable = () => {
+    const { statusHistory } = useDealStatusChangeState();
+
+    return <DealStatusChangeTable items={statusHistory} />;
+};
+
+const useDealEditDrawerState = () => {
+    const { selectedDeal, setSelectedDeal } = useDealPageContext();
+    return {
+        isVisible: selectedDeal !== undefined,
+        onClose: () => setSelectedDeal(undefined),
+    };
+};
+
+const DealEditDrawer: FC = () => {
+    const { isVisible, onClose } = useDealEditDrawerState();
+    const queryClient = useQueryClient();
+    useEffect(() => {
+        if (isVisible) return;
+        queryClient.invalidateQueries({ queryKey: ["getDealSummaries"] });
+    }, [isVisible]);
+
+    const getTabPanel = (value: string, component: ReactNode) => {
+        return (
+            <Tabs.Panel value={value}>
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.2 }}>
+                    <Box
+                        h={"100%"}
+                        w={"100%"}
+                        p={rem(10)}>
+                        {component}
+                    </Box>
+                </motion.div>
+            </Tabs.Panel>
+        );
+    };
+
+    return (
+        <Drawer
+            size={"calc(100vw - 150px)"}
+            position={"right"}
+            onClose={onClose}
+            removeScrollProps={{ allowPinchZoom: true }}
+            withCloseButton={false}
+            opened={isVisible}
+            styles={{
+                body: {
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: rem(10),
+                },
+            }}>
+            <Tabs
+                defaultValue={"general"}
+                flex={1}
+                variant={"outline"}
+                orientation={"vertical"}
+                keepMounted={false}>
+                <Tabs.List>
+                    <Tabs.Tab
+                        value={"general"}
+                        leftSection={<IconSettings />}>
+                        Общее
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"client"}
+                        leftSection={<IconUser />}>
+                        Клиент
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"history"}
+                        leftSection={<IconCalendarUser />}>
+                        История
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"servicesAndProducts"}
+                        leftSection={<IconBox />}>
+                        Товары и услуги
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"shipment"}
+                        leftSection={<IconCubeSend />}>
+                        Отгрузка
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"employees"}
+                        leftSection={<IconUsersGroup />}>
+                        Исполнители
+                    </Tabs.Tab>
+                </Tabs.List>
+                {getTabPanel("general", <DealEditDrawerGeneralTab />)}
+                {getTabPanel("client", <ClientTab />)}
+                {getTabPanel("history", <DealEditDrawerStatusChangeTable />)}
+                {getTabPanel("servicesAndProducts", <ProductAndServiceTab />)}
+                {getTabPanel("shipment", <ShippingTab />)}
+                {getTabPanel("employees", <EmployeesTab />)}
+            </Tabs>
+        </Drawer>
+    );
+};
+
+export default DealEditDrawer;