Instant Card

2024-09-24 15:42:51 +05:30
parent 63abeb118a
commit 7106845c99
2 changed files with 213 additions and 10 deletions
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -820,7 +820,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Delivered"
+      "CardDeliveryStatus" : "Delivered",
+      "quantity":"500"
    },
    {
      id:2,
@@ -829,7 +830,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Not Delivered"
+      "CardDeliveryStatus" : "Not Delivered",
+      "quantity":"500"
    },
    {
      id:3,
@@ -838,7 +840,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Activate",
-      "CardDeliveryStatus" : "Delivered"
+      "CardDeliveryStatus" : "Delivered",
+      "quantity":"500"
    },
    {
      id:3,
@@ -847,7 +850,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Partially Active",
-      "CardDeliveryStatus" : "Partially Delivered"
+      "CardDeliveryStatus" : "Partially Delivered",
+      "quantity":"500"
      
    },
    {
@@ -857,7 +861,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Not Delivered"
+      "CardDeliveryStatus" : "Not Delivered",
+      "quantity":"500"
    },
    {
      id:5,
@@ -866,7 +871,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Partially Active",
-      "CardDeliveryStatus" : "Not Delivered"
+      "CardDeliveryStatus" : "Not Delivered",
+      "quantity":"500"
    },
    {
      id:6,
@@ -875,7 +881,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Active",
-      "CardDeliveryStatus" : "Delivered"
+      "CardDeliveryStatus" : "Delivered",
+      "quantity":"500"
    },
    {
      id:7,
@@ -884,7 +891,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Activate",
-      "CardDeliveryStatus" : "Delivered"
+      "CardDeliveryStatus" : "Delivered",
+      "quantity":"500"
    },
    {
      id:8,
@@ -893,7 +901,8 @@ const GlobalStateProvider = ({ children }) => {
      "dateTime":"10 June 2024, 10am",
      "totalvaluation":"₹ 70,000",
      "activationStatus":"Activate",
-      "CardDeliveryStatus" : "Delivered"
+      "CardDeliveryStatus" : "Delivered",
+      "quantity":"500"
    },
  ])

--- a/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/GiftCard.jsx
@@ -110,6 +110,17 @@ const GiftCard = () => {
    "Card delivery status"
  ];

+  const instantTableHeadRow = [
+    "Sr. no",
+    "Order ID",
+    "Load Status",
+    "Date & time",
+    "Quantity",
+    "Total employees",
+    "Total valuation",
+    "Activation Status",
+  ];
+
  const physicalCardArr = digital.map((item, index) => ({
    "Sr. no": (
      // <Radio colorScheme="purple" value="1">
@@ -520,6 +531,184 @@ const GiftCard = () => {
    ),
  }));

+  const instaCardArr = 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,
+    "Quantity": item?.quantity,
+    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>
+    ),
+  }));
+
  return (
    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
      <Box
@@ -711,7 +900,12 @@ const GiftCard = () => {
              />
            </TabPanel>
            <TabPanel>
-              <p>three!</p>
+            <NormalTable
+                emptyMessage={`We don't have any Sponers `}
+                tableHeadRow={instantTableHeadRow}
+                data={instaCardArr}
+                isLoading={isLoading}
+              />
            </TabPanel>
          </TabPanels>
        </Tabs>