feat: projects and boards

src/pages/DealsPage/drawers/PrefillDealWithExcelDrawer/PrefillDealsWithExcelDrawer.tsx

@@ -0,0 +1,54 @@
+import { Drawer, rem } from "@mantine/core";
+import ExcelDropzone from "../../../../components/ExcelDropzone/ExcelDropzone.tsx";
+import styles from "../PrefillDealWithExcelDrawer/PrefillDealsWithExcelDrawer.module.css";
+import { usePrefillDealsWithExcelContext } from "../../contexts/PrefillDealsWithExcelContext.tsx";
+import ProductsPreview from "./components/ProductsPreview.tsx";
+import { BoardSchema } from "../../../../client";
+
+type Props = {
+    board: BoardSchema | null;
+}
+
+const PrefillDealsWithExcelDrawer = ({ board }: Props) => {
+    const {
+        prefillWithExcelOpened,
+        prefillWithExcelOnClose,
+        barcodeProductsMap,
+        onDrop,
+        excelDropzone,
+    } = usePrefillDealsWithExcelContext();
+
+    const getBody = () => {
+        if (!board || board.dealStatuses.length === 0) return;
+
+        if (barcodeProductsMap?.size === 0) {
+            return <ExcelDropzone dropzone={excelDropzone} onDrop={onDrop} />;
+        }
+        return <ProductsPreview status={board.dealStatuses[0]}/>;
+    };
+
+    return (
+        <Drawer
+            size={"calc(77vw)"}
+            position={"right"}
+            onClose={prefillWithExcelOnClose}
+            removeScrollProps={{ allowPinchZoom: true }}
+            withCloseButton={false}
+            opened={prefillWithExcelOpened}
+            styles={{
+                body: {
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: rem(20),
+                },
+            }}
+        >
+            <div className={styles["deal-container"]}>
+                {getBody()}
+            </div>
+        </Drawer>
+    );
+};
+
+export default PrefillDealsWithExcelDrawer;