Physical Card

2024-09-24 15:03:36 +05:30
parent 3f6c44ce24
commit 63abeb118a
2 changed files with 259 additions and 2 deletions
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -820,6 +820,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
+      "CardDeliveryStatus" : "Delivered"
    },
    {
      id:2,
@@ -828,6 +829,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
+      "CardDeliveryStatus" : "Not Delivered"
    },
    {
      id:3,
@@ -836,6 +838,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Activate",
+      "CardDeliveryStatus" : "Delivered"
    },
    {
      id:3,
@@ -844,6 +847,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Partially Active",
+      "CardDeliveryStatus" : "Partially Delivered"
      
    },
    {
@@ -853,6 +857,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
+      "CardDeliveryStatus" : "Not Delivered"
    },
    {
      id:5,
@@ -861,6 +866,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Partially Active",
+      "CardDeliveryStatus" : "Not Delivered"
    },
    {
      id:6,
@@ -869,6 +875,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
+      "CardDeliveryStatus" : "Delivered"
    },
    {
      id:7,
@@ -877,6 +884,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Activate",
+      "CardDeliveryStatus" : "Delivered"
    },
    {
      id:8,
@@ -885,6 +893,7 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Activate",
+      "CardDeliveryStatus" : "Delivered"
    },
  ])

--- a/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx
@@ -98,7 +98,250 @@ const GiftCard = () => {
    // "Action",
  ];

-  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const physicaltableHeadRow = [
+    "Sr. no",
+    "Order ID",
+    "Load Status",
+    "Date & time",
+    "Total employees",
+    "Total valuation",
+    "Activation Status",
+    "Card delivery status"
+  ];
+
+  const physicalCardArr = digital.map((item, index) => ({
+    "Sr. no": (
+      // <Radio colorScheme="purple" value="1">
+      <Checkbox colorScheme="purple">
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+        >
+          {/* <Icon
+            as={PiReceipt}
+            boxSize={8}
+            p={1.5}
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+            rounded={"full"}
+          /> */}
+
+          {item?.id}
+        </Text>
+      </Checkbox>
+    ),
+    "Order ID": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+        color="#3725EA"
+      >
+        {/* <Icon
+            as={PiReceipt}
+            boxSize={8}
+            p={1.5}
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
+            rounded={"full"}
+          /> */}
+
+        {item?.orderid}
+      </Text>
+    ),
+    "Email Address": item?.emailAddress,
+    "Date & time": item?.dateTime,
+    "Total valuation": item?.totalvaluation,
+    Role: item?.Role,
+    "Load Status": (
+      <Tag
+        my={1}
+        size={"sm"}
+        bgColor="#ECFDF3"
+        borderRadius="13.75px"
+        color={
+          item?.laodStatus === "Fully Loaded"
+            ? "#027A48"
+            : item?.laodStatus === "Inactive"
+            ? "red"
+            : "gray"
+        }
+        border={`0px solid ${
+          item?.laodStatus === "Fully Loaded"
+            ? "green"
+            : item?.status === "Inactive"
+            ? "red"
+            : "gray" // default border color if status doesn't match any condition
+        }`}
+        p={1}
+        px={3}
+      >
+        <TagLabel>{item?.laodStatus}</TagLabel>
+      </Tag>
+    ),
+    "Total employees": (
+      <Box
+        position="relative"
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+      >
+        <Image src={womenpfp} h={"30px"} position="absolute" />
+        <Image src={blackmen} h={"30px"} position="absolute" left="1.4rem" />
+        <Image src={koreanpfp} h={"30px"} position="absolute" left="2.7rem" />
+        <Image src={asian} h={"30px"} position="absolute" left="3.9rem" />
+        <Image src={goth} h={"30px"} position="absolute" left="4.9rem" />
+        <Box
+          display="flex"
+          position="absolute"
+          alignItems="center"
+          flexDirection="column"
+          borderRadius="50%"
+          h={"30px"}
+          w="30px"
+          bgColor="#F9F5FF"
+          left="5.9rem"
+          boxShadow="md"
+        >
+          <Box
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            pt={1}
+            pr={1}
+          >
+            <Text color="#7F56D9" fontSize="small">
+              +
+            </Text>
+            <Text color="#7F56D9" fontSize="small">
+              {users}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    ),
+    "Activation Status": 
+    (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        {item?.activationStatus === "Active" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#ECFDF3"
+            borderRadius="13.75px"
+            color="#027A48"
+            p={1}
+            px={3}
+            border="1px solid #007E23"
+          >
+            <TagLabel> {item?.activationStatus}</TagLabel>
+          </Tag>
+        ) : item?.activationStatus === "Partially Active" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#EAB60024"
+            borderRadius="13.75px"
+            color="#EAB600"
+            p={1}
+            px={3}
+            border="1px solid #EAB600"
+            display="flex"
+            alignItems="center"
+            gap={1}
+          >
+            <TagLabel> {item?.activationStatus}</TagLabel>
+            <Image src={info} />
+          </Tag>
+        ) : item?.activationStatus === "Activate" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="transparent"
+            borderRadius="13.75px"
+            color="#6311CB"
+            p={1}
+            px={3}
+            display="flex"
+            alignItems="center"
+            gap={1}
+          >
+            <Image h="14px" src={redinfo} />
+            <TagLabel textDecoration="underline">
+              {" "}
+              {item?.activationStatus}
+            </TagLabel>
+          </Tag>
+        ) : (
+          ""
+        )}
+      </Box>
+    ),
+    "Card delivery status":   (
+      <Box
+        display={"flex"}
+        gap={1}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        {item?.CardDeliveryStatus === "Delivered" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#ECFDF3"
+            borderRadius="13.75px"
+            color="#027A48"
+            p={1}
+            px={3}
+            border="1px solid #007E23"
+          >
+            <TagLabel> {item?.CardDeliveryStatus}</TagLabel>
+          </Tag>
+        ) : item?.CardDeliveryStatus === "Partially Delivered" ? (
+          <Tag
+            my={1}
+            size={"sm"}
+            bgColor="#EAB60024"
+            borderRadius="13.75px"
+            color="#EAB600"
+            p={1}
+            px={3}
+            border="1px solid #EAB600"
+            display="flex"
+            alignItems="center"
+            gap={1}
+          >
+            <TagLabel> {item?.CardDeliveryStatus}</TagLabel>
+            <Image src={info} />
+          </Tag>
+        ) : item?.CardDeliveryStatus === "Not Delivered" ? (
+          <Tag
+          my={1}
+          size={"sm"}
+          bgColor="#FFD9D8"
+          borderRadius="13.75px"
+          color="#CC4E4B"
+          p={1}
+          px={3}
+          border="1px solid #FFACAA"
+        >
+          <TagLabel> {item?.CardDeliveryStatus}</TagLabel>
+        </Tag>
+        ) : (
+          ""
+        )}
+      </Box>
+    ),
+  }));

  const extractedArray = digital.map((item, index) => ({
    "Sr. no": (
@@ -460,7 +703,12 @@ const GiftCard = () => {
              />
            </TabPanel>
            <TabPanel>
-              <p>two!</p>
+              <NormalTable
+                emptyMessage={`We don't have any Sponers `}
+                tableHeadRow={physicaltableHeadRow}
+                data={physicalCardArr}
+                isLoading={isLoading}
+              />
            </TabPanel>
            <TabPanel>
              <p>three!</p>