Drawer Vouvher

src/Pages/OptiFiiGifsAndVouchers/SelectDepartment.jsx

@@ -57,9 +57,18 @@ const Employees = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [users, setusers] = useState(50);
+  const [selectedRadio, setSelectedRadio] = useState([]);
   const navigate = useNavigate();
   const btnRef = useRef();
 
+  useEffect(() => {
+    if (selectedRadio.length > 0) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [selectedRadio, onOpen, onClose]);
+
   // ===============================[ Table Header ]
   const tableHeadRow = ["Sr No", "Department", "Employees"];
 
@@ -67,11 +76,9 @@ const Employees = () => {
 
   const extractedArray = employees.map((item, index) => ({
     "Sr No": (
-      <Checkbox colorScheme="purple" value="1">
-        <Text as={"span"} fontSize={"xs"}>
-          {item?.id}
-        </Text>
-      </Checkbox>
+      <Text as={"span"} fontSize={"small"}>
+        {item?.id}
+      </Text>
     ),
     Name: (
       <HStack>
@@ -115,7 +122,7 @@ const Employees = () => {
             boxShadow="md"
             justifyContent={"center"}
           >
-            <Text color="#7F56D9" fontSize="xs" mb={0}>
+            <Text color="#7F56D9" fontSize="small" mb={0}>
               +{users}
             </Text>
           </Box>
@@ -187,7 +194,7 @@ const Employees = () => {
                 <MenuList>
                   <MenuItem
                     icon={<FaRegUser size={14} />}
-                    fontSize={"xs"}
+                    fontSize={"small"}
                     fontWeight={500}
                     color={"#4D4D4D"}
                   >
@@ -195,7 +202,7 @@ const Employees = () => {
                   </MenuItem>
                   <MenuItem
                     icon={<HiOutlineUserGroup size={14} />}
-                    fontSize={"xs"}
+                    fontSize={"small"}
                     fontWeight={500}
                     color={"#4D4D4D"}
                   >
@@ -213,7 +220,7 @@ const Employees = () => {
                   as={Button}
                   leftIcon={<BsFilterRight fontSize={"16px"} />}
                   rightIcon={<ChevronDownIcon />}
-                  fontSize={"xs"}
+                  fontSize={"small"}
                   color={"gray.700"}
                   variant="outline"
                   size={"sm"}
@@ -271,17 +278,11 @@ const Employees = () => {
           tableHeadRow={tableHeadRow}
           data={extractedArray}
           isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
         />
-        <Button
-          ref={btnRef}
-          onClick={onOpen}
-          bgColor="#6311CB"
-          color="white"
-          _hover={{ bgColor: "#6311CB" }}
-        >
-          Open Bottom Drawer
-        </Button>
-
+    
         <Drawer
           isOpen={isOpen}
           placement="bottom"
@@ -334,7 +335,7 @@ const Employees = () => {
                       boxShadow="md"
                       ml={"-10px"}
                     >
-                      <Text color="#7F56D9" fontSize="xs">
+                      <Text color="#7F56D9" fontSize="small">
                         +200
                       </Text>
                     </Box>

src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx

@@ -94,6 +94,14 @@ const Employees = () => {
     return () => clearTimeout(timer);
   }, []);
 
+  useEffect(() => {
+    if (selectedRadio.length > 0) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [selectedRadio, onOpen, onClose]);
+
   const tableHeadRow = [
     "Emp ID",
     "Name",
@@ -251,15 +259,6 @@ const Employees = () => {
           selectedRadio={selectedRadio}
         />
 
-        <Button
-          ref={btnRef}
-          onClick={onOpen}
-          bgColor="#6311CB"
-          color="white"
-          _hover={{ bgColor: "#6311CB" }}
-        >
-          Open Bottom Drawer
-        </Button>
         <Drawer
           isOpen={isOpen}
           placement="bottom"