Brand Vouchers

2024-10-04 13:27:32 +05:30
parent 7495fbacf7
commit 44fb1591d8
4 changed files with 338 additions and 110 deletions
--- a/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
@@ -58,6 +58,7 @@ const BrandVoucher = () => {
  const { voucher } = useContext(GlobalStateContext);
  const [isLoading, setIsLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedRadio, setSelectedRadio] = useState([]);

  useEffect(() => {
    // Set isLoading to true
@@ -86,7 +87,6 @@ const BrandVoucher = () => {

  const extractedArray = voucher.map((item, index) => ({
    "Sr. no": (
-      <Checkbox colorScheme="purple">
        <Text
          as={"span"}
          display={"flex"}
@@ -96,7 +96,6 @@ const BrandVoucher = () => {
        >
          {item?.id}
        </Text>
-      </Checkbox>
    ),
    "Date & time": item?.DateTime,
    "Employees/department": item?.EmployeesDepartment,
@@ -274,6 +273,9 @@ const BrandVoucher = () => {
          tableHeadRow={tableHeadRow}
          data={extractedArray}
          isLoading={isLoading}
+          showRadioButton={true}
+          setSelectedRadio={setSelectedRadio}
+          selectedRadio={selectedRadio}
        />
      </Box>
    </Box>
--- a/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher.jsx
@@ -6,90 +6,138 @@ import {
  AccordionPanel,
  AccordionIcon,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useState } from "react";
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  IconButton,
+} from "@chakra-ui/react";
+import { CalendarIcon } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import Amazonlogo from "../../../assets/amazon.png";
+import { useToast } from "@chakra-ui/react";
+
+// Mock Data
+const bankDetails = [
+  { label: "Name at the bank", value: "Reethik thota" },
+  { label: "Account number", value: "458754215787441" },
+  { label: "Bank name", value: "Bank of India" },
+  { label: "IFSC code", value: "TGY4875845" },
+];
+
+const vouchers = [
+  {
+    id: 1,
+    logo: Amazonlogo,
+    name: "Amazon voucher",
+    validity: "20 June",
+    amount: "₹ 25000",
+    count: 3,
+  },
+];
+

 const PaymentVoucher = () => {
+  const [selectedDate, setSelectedDate] = useState("");
+ 
+  const toast = useToast();
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e.target.value);
+  };
  return (
-    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+    <Box {...OPACITY_ON_LOAD} p={3}>
      <Text color="#111729" fontWeight={600}>
        Payment
      </Text>
-      <HStack>
+      <VStack>
        <Accordion w="100%" allowToggle>
          <AccordionItem border="none" w="100%">
            <h2>
-              <AccordionButton w="100%">
+              <AccordionButton
+                display="flex"
+                flexDirection="row"
+                alignItems="flex-start"
+                gap={8}
+                w="100%"
+              >
                <Box as="span" flex="1" textAlign="left">
                  Show Order Summary
                </Box>
                <AccordionIcon />
+                <Text fontWeight={600} fontSize="medium" color="#111729">
+                  ₹ 50,000
+                </Text>
              </AccordionButton>
            </h2>
            <AccordionPanel w="100%">
              <Box>
-                <HStack
-                  bgColor={"#F8FAFC"}
-                  w="100%"
-                  position="relative"
-                  alignItems="center"
-                  border=" 1px solid #E3E8EF"
-                >
+                {vouchers.map((voucher) => (
                  <HStack
-                    bgColor={"#FFFFFF05"}
-                    justifyContent="space-between"
-                    w="30%"
-                    p={3}
+                    key={voucher.id}
+                    bgColor={"#F8FAFC"}
+                    w="100%"
+                    position="relative"
+                    alignItems="center"
+                    border=" 1px solid #E3E8EF"
                  >
-                    <Box
-                      bgColor="#FFFFFF"
-                      boxShadow="0px 2px 4px rgba(17, 27, 35, 0.1)"
-                      borderRadius="8px"
-                      p={2}
+                    <HStack
+                      bgColor={"#FFFFFF05"}
+                      justifyContent="space-between"
+                      w="30%"
+                      p={3}
                    >
-                      <Image src={Amazonlogo} h="44px" />
-                    </Box>
-                    <Box
-                      h="16px"
-                      w="16px"
-                      borderRadius="50%"
-                      position="absolute"
-                      bgColor="#FFFFFF"
-                      bottom="4.1rem"
-                      left="3.5rem"
-                      border="1px solid #E3E8EF"
-                      boxShadow="0px 2px 4px rgba(175, 187, 195, 0.2)"
-                      display="flex"
-                      alignItems="center"
-                      justifyContent="center"
-                      fontSize="small"
-                      fontWeight={600}
-                    >
-                      3
-                    </Box>
-                  </HStack>
-
-                  <VStack alignItems="flex-start" w="40%">
-                    <Text color="#111729" fontWeight={600} fontSize="small">
-                      Amazon voucher
-                    </Text>
-                    <HStack alignItems="flex-start">
-                      <Text color="#111729" fontWeight={400} fontSize="small">
-                        Validity:
-                      </Text>
-                      <Text color="#111729" fontWeight={600} fontSize="small">
-                        20 June
-                      </Text>
+                      <Box
+                        bgColor="#FFFFFF"
+                        boxShadow="0px 2px 4px rgba(17, 27, 35, 0.1)"
+                        borderRadius="8px"
+                        p={2}
+                      >
+                        <Image src={voucher.logo} h="44px" />
+                      </Box>
+                      <Box
+                        h="16px"
+                        w="16px"
+                        borderRadius="50%"
+                        position="absolute"
+                        bgColor="#FFFFFF"
+                        bottom="4.1rem"
+                        left="3.5rem"
+                        border="1px solid #E3E8EF"
+                        boxShadow="0px 2px 4px rgba(175, 187, 195, 0.2)"
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        fontSize="small"
+                        fontWeight={600}
+                      >
+                        {voucher.count}
+                      </Box>
                    </HStack>
-                  </VStack>

-                  <Text fontSize="small" fontWeight={600} color="#111729">
-                    ₹ 25000
-                  </Text>
-                </HStack>
+                    <VStack alignItems="flex-start" w="40%">
+                      <Text color="#111729" fontWeight={600} fontSize="small">
+                        {voucher.name}
+                      </Text>
+                      <HStack alignItems="flex-start">
+                        <Text color="#111729" fontWeight={400} fontSize="small">
+                          Validity:
+                        </Text>
+                        <Text color="#111729" fontWeight={600} fontSize="small">
+                          {voucher.validity}
+                        </Text>
+                      </HStack>
+                    </VStack>
+
+                    <Text fontSize="small" fontWeight={600} color="#111729">
+                      {voucher.amount}
+                    </Text>
+                  </HStack>
+                ))}
                <Box w="100%" mt={6} borderBottom="1px solid #E3E8EF" />
-
                <HStack w="100%" mt={2} justifyContent="space-between">
                  <Text fontSize="small" fontWeight={600} color="#111729">
                    Total
@@ -98,37 +146,56 @@ const PaymentVoucher = () => {
                    ₹ 50000
                  </Text>
                </HStack>
-
-                <Text color="#000000" fontSize={"medium"} fontWeight={600}>
-                  Make the payment on the below bank account details:
-                </Text>
-                <VStack
-                  alignItems="flex-start"
-                  w="100%"
-                >
-                <HStack w="100%" justifyContent="space-between" >
-                    <Text color="#677489" fontWeight={600} fontSize="small">Name at the bank</Text>
-                    <Text color="#111729" fontWeight={600} fontSize="small">Reethik thota</Text>
-                </HStack>
-                <HStack w="100%" justifyContent="space-between" >
-                    <Text color="#677489" fontWeight={600} fontSize="small">Account number</Text>
-                    <Text color="#111729" fontWeight={600} fontSize="small">458754215787441</Text>
-                </HStack>
-                <HStack w="100%" justifyContent="space-between" >
-                    <Text color="#677489" fontWeight={600} fontSize="small">Bank name</Text>
-                    <Text color="#111729" fontWeight={600} fontSize="small">Bank of India</Text>
-                </HStack>
-                <HStack w="100%" justifyContent="space-between" >
-                    <Text color="#677489" fontWeight={600} fontSize="small">IFSC code</Text>
-                    <Text color="#111729" fontWeight={600} fontSize="small">Reethik thota</Text>
-                </HStack>
-
-                </VStack>
              </Box>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
-      </HStack>
+
+        <Text color="#000000" fontSize={"medium"} fontWeight={600}>
+          Make the payment on the below bank account details:
+        </Text>
+        <VStack alignItems="flex-start" w="100%">
+          {bankDetails.map((detail, index) => (
+            <HStack w="100%" justifyContent="space-between" key={index}>
+              <Text color="#677489" fontWeight={600} fontSize="small">
+                {detail.label}
+              </Text>
+              <Text color="#111729" fontWeight={600} fontSize="small">
+                {detail.value}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+
+        <VStack alignItems="flex-start" w="100%" mt="1rem">
+          <Text color="#000000" fontSize="medium" fontWeight={500}>
+            Schedule order
+          </Text>
+          <FormControl>
+            <FormLabel>Schedule order</FormLabel>
+            <InputGroup>
+              <InputLeftElement pointerEvents="none">
+                <CalendarIcon color="purple.500" />
+              </InputLeftElement>
+
+              <Input
+                type="date"
+                value={selectedDate}
+                onChange={handleDateChange}
+                maxWidth="100%"
+                border="1px solid"
+                borderColor="purple.500"
+                borderRadius="md"
+                _hover={{ borderColor: "purple.600" }}
+                _focus={{ borderColor: "purple.700", outline: "none" }}
+              />
+            </InputGroup>
+          </FormControl>
+          <Text color="#E81515" fontSize="medium" fontWeight={600}>
+            *Once Payment is done kindly share the UTR Code
+          </Text>
+        </VStack>
+      </VStack>
    </Box>
  );
 };
--- a/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/SelectEmployee.jsx
@@ -50,18 +50,40 @@ import blackmen from "../../assets/blackmen.png";
 import koreanpfp from "../../assets/koreanboi.png";
 import asian from "../../assets/asain.png";
 import goth from "../../assets/goth.png";
-import Payment from "./Payment/PaymentaVoucher"
+import Payment from "./Payment/PaymentaVoucher";
+import { useToast } from "@chakra-ui/react";
+import tick from "../../assets/icons/tick.png";
+
+const OverlayOne = () => (
+  <ModalOverlay
+    bg="blackAlpha.300"
+    backdropFilter="blur(10px) hue-rotate(90deg)"
+  />
+);
+
 const Employees = () => {
  const { employees } = useContext(GlobalStateContext);
  const [isLoading, setIsLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] = useState("inside");
+  const [overlay, setOverlay] = React.useState(<OverlayOne />);
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const toast = useToast();
  const btnRef = useRef();
+
  const {
    isOpen: isModalOpen,
    onOpen: onModalOpen,
    onClose: onModalClose,
  } = useDisclosure();
+
+  const {
+    isOpen: isPaymentOpen,
+    onOpen: onPaymentOpen,
+    onClose: onPaymentClose,
+  } = useDisclosure();
+
  const navigate = useNavigate();

  useEffect(() => {
@@ -72,19 +94,30 @@ const Employees = () => {
    return () => clearTimeout(timer);
  }, []);

-  const tableHeadRow = ["Emp ID", "Name", "Email Address", "Department", "Designation"];
+  const tableHeadRow = [
+    "Emp ID",
+    "Name",
+    "Email Address",
+    "Department",
+    "Designation",
+  ];

  const extractedArray = employees.map((item) => ({
    "Emp ID": (
-      <Checkbox colorScheme="purple" value="1">
+      // <Checkbox colorScheme="purple" value="1">
        <Text as={"span"} fontSize={"xs"}>
          {item?.EmpID}
        </Text>
-      </Checkbox>
+      // </Checkbox> 
    ),
    Name: (
      <HStack>
-        <Image borderRadius="full" boxSize="40px" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
+        <Image
+          borderRadius="full"
+          boxSize="40px"
+          src="https://bit.ly/dan-abramov"
+          alt="Dan Abramov"
+        />
        <Text mb={0}>{item?.Name}</Text>
      </HStack>
    ),
@@ -96,8 +129,20 @@ const Employees = () => {
        my={1}
        size={"sm"}
        borderRadius="full"
-        colorScheme={item?.status === "Active" ? "green" : item?.status === "Inactive" ? "red" : "gray"}
-        border={`1px solid ${item?.status === "Active" ? "green" : item?.status === "Inactive" ? "red" : "gray"}`}
+        colorScheme={
+          item?.status === "Active"
+            ? "green"
+            : item?.status === "Inactive"
+            ? "red"
+            : "gray"
+        }
+        border={`1px solid ${
+          item?.status === "Active"
+            ? "green"
+            : item?.status === "Inactive"
+            ? "red"
+            : "gray"
+        }`}
        p={1}
        px={3}
      >
@@ -107,11 +152,25 @@ const Employees = () => {
    Action: (
      <Box>
        <Menu>
-          <MenuButton as={IconButton} aria-label="Options" icon={<BsThreeDotsVertical />} bg={"transparent"} />
+          <MenuButton
+            as={IconButton}
+            aria-label="Options"
+            icon={<BsThreeDotsVertical />}
+            bg={"transparent"}
+          />
          <MenuList>
-            <MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>Edit</MenuItem>
-            <MenuItem icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}>Delete</MenuItem>
-            <MenuItem icon={<LuEye color="#6311CB" size={16} />} onClick={() => navigate("/employees/view")}>
+            <MenuItem icon={<MdOutlineModeEdit color="#6311CB" size={16} />}>
+              Edit
+            </MenuItem>
+            <MenuItem
+              icon={<MdOutlineDeleteOutline color="#EE1B24" size={16} />}
+            >
+              Delete
+            </MenuItem>
+            <MenuItem
+              icon={<LuEye color="#6311CB" size={16} />}
+              onClick={() => navigate("/employees/view")}
+            >
              View
            </MenuItem>
          </MenuList>
@@ -122,12 +181,24 @@ const Employees = () => {

  return (
    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
-      <Box rounded={"xl"} py={3} display={"flex"} flexDirection={"column"} bg={"#fff"} shadow={"md"} minH={"100%"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
            <Box>
              <Menu>
-                <MenuButton as={Button} leftIcon={<BsFilterRight fontSize={"16px"} />} rightIcon={<ChevronDownIcon />}>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                >
                  Sort
                </MenuButton>
                <MenuList>
@@ -153,7 +224,11 @@ const Employees = () => {
                />
              </InputGroup>
              <Menu>
-                <MenuButton as={Button} leftIcon={<LuListFilter fontSize={"16px"} />} rightIcon={<ChevronDownIcon />}>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                >
                  Filter
                </MenuButton>
                <MenuList>
@@ -166,17 +241,43 @@ const Employees = () => {
            </HStack>
          </HStack>
        </VStack>
-        <NormalTable emptyMessage={`We don't have any Employees`} tableHeadRow={tableHeadRow} data={extractedArray} isLoading={isLoading} />
+        <NormalTable
+          emptyMessage={`We don't have any 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" }}>
+        <Button
+          ref={btnRef}
+          onClick={onOpen}
+          bgColor="#6311CB"
+          color="white"
+          _hover={{ bgColor: "#6311CB" }}
+        >
          Open Bottom Drawer
        </Button>
-        <Drawer isOpen={isOpen} placement="bottom" onClose={onClose} finalFocusRef={btnRef}>
+        <Drawer
+          isOpen={isOpen}
+          placement="bottom"
+          onClose={onClose}
+          finalFocusRef={btnRef}
+        >
          <DrawerOverlay />
          <DrawerContent>
            <DrawerCloseButton />
            <DrawerBody>
-              <Box display="flex" flexDirection="row" w="100%" alignItems="center" justifyContent="space-between" mt={4}>
+              <Box
+                display="flex"
+                flexDirection="row"
+                w="100%"
+                alignItems="center"
+                justifyContent="space-between"
+                mt={4}
+              >
                <Box>
                  <Text fontWeight={600}>Summary of order</Text>
                  <Box display="flex" alignItems="center" mt={2}>
@@ -201,7 +302,12 @@ const Employees = () => {
                    </Box>
                  </Box>
                </Box>
-                <Box display="flex" flexDirection="row" alignItems="center" gap={4}>
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="center"
+                  gap={4}
+                >
                  <Text>₹ 10,000</Text>
                  <Button bgColor="#6311CB" color="white" onClick={onModalOpen}>
                    Proceed
@@ -213,13 +319,66 @@ const Employees = () => {
          </DrawerContent>
        </Drawer>

-        <Modal isOpen={isModalOpen} onClose={onModalClose}>
+        <Modal
+          isOpen={isModalOpen}
+          onClose={onModalClose}
+          finalFocusRef={btnRef}
+          scrollBehavior={scrollBehavior}
+          h="900px"
+        >
          <ModalOverlay />
          <ModalContent>
-            <Payment/>
+            <ModalBody>
+              <Payment />
+            </ModalBody>
+            <ModalFooter>
              <Button variant="ghost" onClick={onModalClose}>
-                Cancel
+                Save as draft
              </Button>
+              <Button
+                color="#FFFFFF"
+                bgColor="#6311CB"
+                p={4}
+                _hover={{ color: "#FFFFFF", bgColor: "#6311CB" }}
+                onClick={() => {
+                  setOverlay(<OverlayOne />);
+                  onPaymentOpen();
+                }}
+              >
+                Save & proceed
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+
+        <Modal isCentered isOpen={isPaymentOpen} onClose={onPaymentClose}>
+          {overlay}
+          <ModalOverlay />
+          <ModalContent>
+            <Image src={tick} h="78px" w="78px" />
+            <ModalCloseButton />
+            <ModalBody>
+              <VStack>
+                <Text color="#101828" fontSize="large" fontWeight={600}>
+                  Your Voucher request has been submitted
+                </Text>
+                <Text color="#667085" fontSize="small" fontWeight={400}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  consectetur adipiscing elit.
+                </Text>
+              </VStack>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                w="100%"
+                bgColor="#6311CB"
+                color="#ffff"
+                boxShadow={"0px 1px 2px 0px #1018280D"}
+                _hover={{ bgColor: "#6311CB", color: "#ffff" }}
+              >
+                Done
+              </Button>
+            </ModalFooter>
          </ModalContent>
        </Modal>
      </Box>
--- a/src/assets/icons/tick.png
+++ b/src/assets/icons/tick.png