feat: work shifts by QR codes

src/modals/ScanningModal/ScanningModal.tsx

@@ -0,0 +1,38 @@
+import { ContextModalProps } from "@mantine/modals";
+import { Text } from "@mantine/core";
+import { useWindowEvent } from "@mantine/hooks";
+import { useState } from "react";
+
+type Props = {
+    label: string;
+    onScan: (value: string) => void;
+    closeOnScan?: boolean;
+};
+
+const ScanningModal = ({
+                           context,
+                           id,
+                           innerProps,
+                       }: ContextModalProps<Props>) => {
+    const [inputValues, setInputValues] = useState<string>("");
+
+    const { label, onScan, closeOnScan } = innerProps;
+
+    useWindowEvent("keydown", (event) => {
+        event.preventDefault();
+        console.log(inputValues);
+        setInputValues(prevState => prevState + event.key);
+        if (event.key === "Enter") {
+            onScan(inputValues);
+            if (closeOnScan) {
+                context.closeContextModal(id);
+            }
+        }
+    });
+
+    return (
+        <Text>{label}</Text>
+    );
+};
+
+export default ScanningModal;

src/modals/modals.ts

@@ -21,6 +21,7 @@ import SelectDealProductsModal from "../pages/LeadsPage/modals/SelectDealProduct
 import ShippingWarehouseForm from "../pages/ShippingWarehousesPage/modals/ShippingWarehouseForm.tsx";
 import MarketplaceFormModal from "../pages/MarketplacesPage/modals/MarketplaceFormModal/MarketplaceFormModal.tsx";
 import ServicePriceCategoryForm from "../pages/ServicesPage/modals/ServicePriceCategoryForm.tsx";
+import ScanningModal from "./ScanningModal/ScanningModal.tsx";
 
 export const modals = {
     enterDeadline: EnterDeadlineModal,
@@ -46,4 +47,5 @@ export const modals = {
     shippingWarehouseForm: ShippingWarehouseForm,
     marketplaceFormModal: MarketplaceFormModal,
     servicePriceCategoryForm: ServicePriceCategoryForm,
+    scanningModal: ScanningModal,
 };