blueCard component pending

src/Components/Cards/BlueCard.jsx

@@ -0,0 +1,41 @@
+import { Box, Stack, Text, } from '@chakra-ui/react'
+import React from 'react'
+import { MdGroups } from 'react-icons/md'
+
+function BlueCard() {
+    return (
+        <Box
+            backgroundColor={item.backgroundColor}
+            borderRadius="xl"
+        >
+            <Box bg="#fff" borderRadius="xl" p={4} h="115px">
+                <Stack direction={["column", "row"]} color={item.backgroundColor}>
+                    <Text as="span">
+                        <MdGroups />
+                    </Text>
+                    <Text fontSize="xs" mb={0} fontWeight={500}>
+                        {item.title}
+                    </Text>
+                </Stack>
+                <Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
+                    {item.count}
+                </Text>
+            </Box>
+            <Stack
+                direction={["column", "row"]}
+                color="#fff"
+                justifyContent="center"
+                alignItems="center"
+            >
+                <Text as="span">
+                    <MdGroups />
+                </Text>
+                <Text fontSize="sm" m={0} py={2}>
+                    <Link mb={0}>{item.linkText}</Link>
+                </Text>
+            </Stack>
+        </Box>
+    )
+}
+
+export default BlueCard

src/Contexts/GlobalStateProvider.jsx

@@ -46,7 +46,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 1,
       EmpID: "124589",
-      Name: "Status",
+      Name: "Jackson",
       emailAddress: "in***@wdimails.com",
       mobileNumber: "+91 ***8451254",
       Grade: "L1",

src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx

@@ -220,6 +220,8 @@ const OptiFiiExpenseDashboard = () => {
           </GridItem>
         ))}
       </Grid>
+
+      
       <Grid templateColumns="repeat(3, 1fr)" gap={6} mb={4}>
         {gridItemsData.map((item, index) => (
           <GridItem key={index} backgroundColor="#fff" borderRadius="xl">

src/Pages/OptiFiiExpense/ReimbursementRequest.jsx

@@ -1,42 +1,154 @@
-import { Box, HStack, Text, VStack } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  Checkbox,
+  Tag,
+  TagLabel,
+  Text,
+  Image,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
 import { MdOutlineNoFood } from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useNavigate } from "react-router-dom";
+
 
 const ReimbursementRequest = () => {
+
+
+  const navigate = useNavigate();
+  const { employees } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Select",
+    "Sr. No",
+    "Name",
+    "Status",
+    "Email Address",
+    "Mobile number",
+    "Grade",
+    "Department",
+    "Role",
+    "Action",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = employees.map((item, index) => ({
+    "Sr. No": (
+      <Text
+        as={"span"}
+        display={"flex"}
+        gap={2}
+        alignItems={"center"}
+        fontSize={"xs"}
+      >
+        {index + 1}
+      </Text>
+    ),
+    "Name": item?.Name,
+    "Email Address": item?.emailAddress,
+    "Mobile number": item?.mobileNumber,
+    Grade: item?.Grade,
+    Department: item?.Department,
+    Role: item?.Role,
+    Status: (
+      <HStack>
+        <Image
+          borderRadius='full'
+          boxSize='40px'
+          src='https://bit.ly/dan-abramov'
+          alt='Dan Abramov'
+        />
+        <Text color={"#667085"} fontSize={"xs"} mb={1}>
+          Pooja Shah
+        </Text>
+      </HStack>
+    ),
+    Action: (
+
+      <Button
+        _hover={{ color: "gray.900", bg: "gray.300" }}
+        transition={"0.3s"}
+        onClick={() => navigate("/reimbursement-request-view")}
+        size={"xs"}
+        bg={"#6311CB"}
+        py={1}
+        fontWeight={400}
+        px={3}
+        color="#fff"
+      >
+        View
+      </Button>
+    ),
+  }));
+
   return (
-    <Box h={"100%"} p={6}>
+    <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
       {/* <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
       /> */}
 
-    <Box bg={"#fff"} p={4} rounded={"md"}>
-    <HStack justifyContent={"space-between"}>
-        <HStack alignItems={"start"} spacing={4}>
-          <Box bg={"#d7d3fb"} p={2} rounded={"full"}>
-            <MdOutlineNoFood color="#3725EA" />
-          </Box>
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={4}>
+        <HStack justifyContent={"space-between"}>
+          <HStack alignItems={"start"} spacing={4}>
+            <Box bg={"#d7d3fb"} p={2} rounded={"full"}>
+              <MdOutlineNoFood color="#3725EA" />
+            </Box>
+            <Box>
+              <Text color={"#667085"} fontSize={"sm"} mb={1}>
+                Food
+              </Text>
+              <Text color={"#667085"} fontSize={"xs"} mb={0}>
+                Created by - Reethik Thota
+              </Text>
+            </Box>
+          </HStack>
           <Box>
-            <Text color={"#667085"} fontSize={"sm"} mb={1}>
-              Food
-            </Text>
-            <Text color={"#667085"} fontSize={"xs"} mb={0}>
+            <Text color={"#667085"} fontSize={"xs"} mb={1}>
               Created by - Reethik Thota
             </Text>
+            <Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
+              ₹ 50,000
+            </Text>
           </Box>
         </HStack>
-        <Box>
-          <Text color={"#667085"} fontSize={"xs"} mb={1}>
-            Created by - Reethik Thota
-          </Text>
-          <Text color={"#00A438"} fontSize={"sm"} fontWeight={500} mb={0}>
-            ₹ 50,000
-          </Text>
-        </Box>
-      </HStack>
-    </Box>
+      </Box>
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+        />
+      </Box>
     </Box>
   );
 };

src/Pages/OptiFiiExpense/ReimbursementRequestView.jsx

@@ -1,23 +1,146 @@
-import { Badge, Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React from "react";
+import {
+    Box,
+    Button,
+    HStack,
+    VStack,
+    Icon,
+    Checkbox,
+    Tag,
+    TagLabel,
+    Text,
+    Image,
+    useDisclosure,
+    Alert,
+    CloseButton,
+    AlertDescription,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { LiaFileInvoiceSolid } from "react-icons/lia";
+import { PiReceipt } from "react-icons/pi";
 import { MdOutlineNoFood } from "react-icons/md";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { IoMdCheckmark } from "react-icons/io";
+import { RxCross2 } from "react-icons/rx";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton"
+import SecondaryButton from "../../Components/Buttons/SecondaryButton"
 
 const ReimbursementRequestView = () => {
+
+    const [alertStatus, setAlertStatus] = useState(null); 
+
+    const handleApprove = () => {
+        setAlertStatus('success');
+    };
+
+    const handleReject = () => {
+        setAlertStatus('error');
+    };
+
+    const { employees } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        // Set isLoading to true
+        setIsLoading(true);
+
+        // Simulate a 3-second delay
+        const timer = setTimeout(() => {
+            setIsLoading(false); // Set isLoading to false after 3 seconds
+        }, 500);
+
+        // Cleanup the timer when the component unmounts or when the useEffect re-runs
+        return () => clearTimeout(timer);
+    }, []); // Empty dependency array means this effect runs once after the component mounts
+
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+        "Select",
+        "Sr. No",
+        "Name",
+        "Email Address",
+        "Mobile number",
+        "Grade",
+        "Department",
+        "Role",
+        "Action",
+    ];
+
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+
+    const extractedArray = employees.map((item, index) => ({
+        "Sr. No": (
+            <Text
+                as={"span"}
+                display={"flex"}
+                gap={2}
+                alignItems={"center"}
+                fontSize={"xs"}
+            >
+                {index + 1}
+            </Text>
+        ),
+        Name: item?.Name,
+        "Email Address": item?.emailAddress,
+        "Mobile number": item?.mobileNumber,
+        Grade: item?.Grade,
+        Department: item?.Department,
+        Role: item?.Role,
+        Action: (
+            <HStack
+            >
+                <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+                    <LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
+                </Box>
+                <Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
+                    Invoice243
+                </Text>
+            </HStack>
+        ),
+    }));
+
     return (
-        <Box h={"100%"} p={6}>
+
+
+
+
+
+        <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
             {/* <MiniHeader
         title={"My Requests"}
         subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
         backButton={true}
       /> */}
+            {alertStatus === 'success' && (
+                <Alert status="success" bg="#6311CB" color="#fff" rounded={"md"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <IoMdCheckmark size={16} />
+                            <Text fontSize="xs" mb={0} fontWeight={500}>
+                                Approved by giftryt
+                            </Text>
+                        </HStack>
+                    </Box>
+                </Alert>
+            )}
 
-
-
-
-            <Box bg={"#fff"} p={4} rounded={"md"}>
-
+            {alertStatus === 'error' && (
+                <Alert status="error" bg="#EE1B24" color="#fff" rounded={"md"} mb={4}>
+                    <Box>
+                        <HStack>
+                            <RxCross2 size={16} />
+                            <Text fontSize="xs" mb={0} fontWeight={500}>
+                                Rejected by giftryt
+                            </Text>
+                        </HStack>
+                    </Box>
+                </Alert>
+            )}
+            <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
                 <HStack width={"100%"} mb={8}>
                     <Box bg={"#e5f6eb"} border={"1px solid #00A438"} px={4} py={1} rounded={"md"} h={14} flex={1}>
                         <HStack>
@@ -62,8 +185,6 @@ const ReimbursementRequestView = () => {
 
                 </HStack>
 
-
-
                 <HStack justifyContent={"space-between"} mb={6}>
                     <Box>
                         <Text color={"#667085"} fontSize={"xs"} mb={1}>
@@ -83,8 +204,7 @@ const ReimbursementRequestView = () => {
                     </Box>
                 </HStack>
 
-
-                <HStack justifyContent={"space-between"}>
+                <HStack justifyContent={"space-between"} mb={6}>
                     <Box>
                         <Text color={"#667085"} fontSize={"xs"} fontWeight={500} mb={2}>
                             Submitted by
@@ -132,7 +252,22 @@ const ReimbursementRequestView = () => {
                         </HStack>
                     </Box>
                 </HStack>
+
+                <NormalTable
+                    emptyMessage={`We don't have any Sponers `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                    showRadioButton={true}
+                />
+
+                <HStack justifyContent={"end"} my={4} spacing={4}>
+                    <SecondaryButton title="Reject" onClick={handleReject} />
+                    <PrimaryButton title="Approve" onClick={handleApprove} />
+                </HStack>
+
             </Box>
+
         </Box>
     );
 };