feat: deals table

src/app/deals/components/shared/Header/Header.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
-import { Box, Flex, Group, Stack, Text } from "@mantine/core";
-import Boards from "@/app/deals/components/shared/Boards/Boards";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
-import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
-import { useDrawersContext } from "@/drawers/DrawersContext";
-import useIsMobile from "@/hooks/utils/useIsMobile";
-
-const Header = () => {
-    const { projects, setSelectedProjectId, refetchProjects, selectedProject } =
-        useProjectsContext();
-    const { refetchBoards } = useBoardsContext();
-    const { openDrawer } = useDrawersContext();
-    const isMobile = useIsMobile();
-
-    const spacer = (
-        <Box
-            flex={1}
-            style={{ borderBottom: "2px solid gray" }}
-        />
-    );
-
-    const getDesktopHeader = () => {
-        return (
-            <Flex
-                wrap={"nowrap"}
-                justify={"space-between"}>
-                <Boards />
-                {spacer}
-                <Flex
-                    align={"center"}
-                    style={{
-                        borderBottom: "2px solid gray",
-                    }}>
-                    <ProjectSelect
-                        data={projects}
-                        value={selectedProject}
-                        onChange={value =>
-                            value && setSelectedProjectId(value.id)
-                        }
-                        style={{ minWidth: 200 }}
-                    />
-                </Flex>
-            </Flex>
-        );
-    };
-
-    const selectProjectId = async (projectId: number | null) => {
-        await refetchProjects();
-        setSelectedProjectId(projectId);
-    };
-
-    const openProjectsEditorDrawer = () => {
-        openDrawer({
-            key: "projectsEditorDrawer",
-            props: {
-                setSelectedProjectId: selectProjectId,
-            },
-        });
-    };
-
-    const openBoardsEditorDrawer = () => {
-        if (!selectedProject) return;
-        openDrawer({
-            key: "projectBoardsEditorDrawer",
-            props: {
-                project: selectedProject,
-            },
-            onClose: refetchBoards,
-        });
-    };
-
-    const getMobileHeader = () => {
-        return (
-            <>
-                <Group justify={"space-between"}>
-                    <Box
-                        p={"md"}
-                        onClick={openProjectsEditorDrawer}>
-                        <IconChevronLeft />
-                    </Box>
-                    <Text>{selectedProject?.name}</Text>
-                    <Box
-                        p={"md"}
-                        onClick={openBoardsEditorDrawer}>
-                        <IconSettings />
-                    </Box>
-                </Group>
-                <Group
-                    wrap={"nowrap"}
-                    gap={0}
-                    align={"end"}>
-                    <Boards />
-                    {spacer}
-                </Group>
-            </>
-        );
-    };
-
-    return (
-        <Group
-            justify={"flex-end"}
-            w={"100%"}>
-            <Stack
-                gap={0}
-                w={"100%"}>
-                {isMobile ? getMobileHeader() : getDesktopHeader()}
-            </Stack>
-        </Group>
-    );
-};
-
-export default Header;

src/app/deals/components/shared/PageBody/PageBody.tsx

@@ -1,26 +1,42 @@
 "use client";
 
-import { Space } from "@mantine/core";
+import { Box, Space } from "@mantine/core";
+import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
 import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
 import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { useViewContext } from "@/app/deals/contexts/ViewContext";
 
 const PageBody = () => {
+    const { selectedBoard } = useBoardsContext();
+    const { selectedProject } = useProjectsContext();
     const { view } = useViewContext();
 
-    if (view === "board")
+    if (view === "board") {
         return (
             <>
                 <MainBlockHeader />
                 <Space h={"md"} />
-                <DealsContextProvider>
+                <DealsContextProvider boardId={selectedBoard?.id}>
                     <Funnel />
                 </DealsContextProvider>
             </>
         );
+    }
 
-    if (view === "table") return <>-</>;
+    if (view === "table") {
+        return (
+            <Box>
+                <DealsContextProvider
+                    withPagination
+                    projectId={selectedProject?.id}>
+                    <DealsTable />
+                </DealsContextProvider>
+            </Box>
+        );
+    }
 
     return <>-</>;
 };