Report Graph page

2024-10-10 13:39:56 +05:30
parent db9e51950e
commit 2177d91d9d
10 changed files with 737 additions and 137 deletions
--- a/src/Components/Doughnut/ApexLine.jsx
+++ b/src/Components/Doughnut/ApexLine.jsx
@@ -5,19 +5,19 @@ function ApexLine() {
  const [chartOptions, setChartOptions] = useState({
    series: [{
      name: 'Rate',
-      data: [45, 23, 70, 65, 5, 34, 32],
+      data: ["0","20k", "60k", "50k", "110k","90k", "100k"],
      gradientToColors: ['#004017'],
    }],
    options: {
      chart: {
-        height: 350,
+        height: 500,
        type: 'line',
        toolbar: {
          show: false // Hide the action icons
        }
      },
      stroke: {
-        width: 5,
+        width: 2,
        curve: 'smooth',
        colors: ['#598369'], // Customize the line color here
      },
@@ -29,11 +29,11 @@ function ApexLine() {
      },
      xaxis: {
        type: 'category', // Change from 'datetime' to 'category'
-        categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'],
+        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        tickAmount: 7
      },
      title: {
-        text: 'Exchange Rate Currency', // Adjust the title if needed
+        text: 'Spend summary', // Adjust the title if needed
        align: 'left',
        style: {
          fontSize: '15px',
@@ -58,7 +58,7 @@ function ApexLine() {

  return (
    <div>
-      <ReactApexChart  options={chartOptions.options} series={chartOptions.series} type="line" height={"100%"} width={"600"} />
+      <ReactApexChart  options={chartOptions.options} series={chartOptions.series} type="line" height={"288px"} width={"100%"} />
    </div>
  );
 }
--- a/src/Components/Doughnut/PieCharts.jsx
+++ b/src/Components/Doughnut/PieCharts.jsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react';
+import { Chart, ArcElement, Tooltip, Legend } from 'chart.js'; // Import necessary components
+import { Box, Text } from '@chakra-ui/react';
+
+function PieCharts() {
+  const chartRef = useRef(null);
+
+  useEffect(() => {
+    // Register required components
+    Chart.register(ArcElement, Tooltip, Legend);
+
+    const ctx = chartRef.current.getContext('2d');
+
+    const myChart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Food', 'Fuel', 'Travel', 'Sales call'],
+        datasets: [
+          {
+            data: [25, 15, 30, 30], // Adjust the values as needed
+            backgroundColor: ['#ff6384', '#ffce56', '#36a2eb', '#4bc0c0'],
+            borderColor: ['#fff', '#fff', '#fff', '#fff'],
+            borderWidth: 1,
+            borderRadius:0,
+          },
+        ],
+      },
+      options: {
+        cutout: '75%', 
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'bottom',
+            borderRadius:"0px",
+            labels: {
+              usePointStyle: true,
+              usePointStyle: false, // Disables the point style
+              boxWidth: 25, // Adjust this to make square boxes
+              padding: 15,
+              paddingTop:70,
+            },
+          },
+        },
+      },
+    });
+
+    return () => {
+      myChart.destroy();
+    };
+  }, []);
+
+  return (
+    <div>
+      <Text fontSize={"sm"} fontWeight={500} mb={5}>Total spent by category</Text>
+      <Box position={"relative"}>
+        <canvas ref={chartRef} style={{width:"260px"}} />
+        <Box position={"absolute"} top={"36%"} left={"36%"}>
+            <Text fontSize={"sm"} mb={0}>Total Value</Text>
+            <Text fontSize={"md"} mb={0} fontWeight={500}>₹9,999.99</Text>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+export default PieCharts;
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -2015,9 +2015,6 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

-
-
-
  // Recent report
  const [recentReports, setRecentReports] = useState([
    {
@@ -2203,6 +2200,163 @@ const GlobalStateProvider = ({ children }) => {
  ]);


+  const [transactionHistory, setTransactionHistory] = useState([
+    {
+      id: 1,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 2,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 3,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 4,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 5,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+    {
+      id: 6,
+      employeeName: "Reethik thota",
+      employeeID: "#356567",
+      department: "Sales",
+      wallet: "FOOD",
+      merchant: "Dine In",
+      natureExpense: "Reimbursed",
+      dateTime: "12 July 24, 10am",
+      amount: "₹ 5000",
+    },
+  ]);
+
+  const [reportStatus, setReportStatus] = useState([
+    {
+      id: 1,
+      reportName: "Food",
+      // reportBy: "#356567",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Fully Reimbursed",
+      approver: "Reimbursed",
+      disburser: "12 July 24, 10am",
+      action: "₹ 5000",
+    },
+    {
+      id: 2,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Partially Reimbursed",
+    },
+    {
+      id: 3,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Fully Reimbursed",
+    },
+    {
+      id: 4,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Fully Reimbursed",
+    },
+    {
+      id: 5,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Approved",
+    },
+    {
+      id: 6,
+      reportName: "Food",
+      reportAmount: "₹ 5000",
+      dateTime: "Jun 10, 2024",
+      status: "Approved",
+    },
+
+  ]);
+
+  const [viewReports, setViewReports] = useState([
+    {
+      id: 1,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 2,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 3,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 4,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+    {
+      id: 5,
+      inVoice: "Invoice #01 - Dec 2023",
+      amount: "₹ 5000",
+      paidWallet: "Food",
+      status: "Approved",
+    },
+  ]);
+
  return (
    <GlobalStateContext.Provider
      value={{
@@ -2234,13 +2388,18 @@ const GlobalStateProvider = ({ children }) => {
        walletProgram,
        SupportAndTicket,
        setSupportAndTicket,
-
        recentReports, setRecentReports,
        recentTransaction, setRecentTransaction,
        walletExpense,
        setWalletExpense,
        dash,
-        setDash
+        setDash,
+        transactionHistory,
+        setTransactionHistory,
+        reportStatus,
+        setReportStatus,
+        viewReports,
+        setViewReports,
      }}
    >
      {children}
--- a/src/Pages/NoInternetScreen.jsx
+++ b/src/Pages/NoInternetScreen.jsx
@@ -12,10 +12,10 @@ const NoInternetScreen = () => {
    position={"relative"}
    gap={5}
    >
-        <Image src={noInternet} w={300} />
+        {/* <Image src={noInternet} w={300} /> */}
        {/* <Text color={'blue.800'} as={'span'} className='fw-bold'>No Internet !</Text> */}

-        <Text color={'gray.500'} fontSize={'sm'} fontWeight={'500'} position={'absolute'} bottom={0} left={'47%'}>Tanami v1.0</Text>
+        <Text color={'gray.500'} fontSize={'sm'} fontWeight={'500'} position={'absolute'} bottom={0} left={'47%'}>Optifii v1.0</Text>
    </Box>

  )
--- a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
+++ b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx
@@ -44,7 +44,7 @@ const ReimbursementRequest = () => {

  // ===============================[ Table Header ]
  const tableHeadRow = [
-    "Select",
+    // "Select",
    "Sr. No",
    "Name",
    "Status",
--- a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx
@@ -14,7 +14,7 @@ import { LuListFilter } from 'react-icons/lu';
 import { ArrowForwardIcon, ChevronDownIcon, SearchIcon } from '@chakra-ui/icons';
 import info from "../../assets/info.png";
 import redinfo from "../../assets/redinfo.png";
-import { NavLink } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import { CiCalendar } from 'react-icons/ci';
 import ReactApexChart from 'react-apexcharts';
 import { GoDotFill } from 'react-icons/go';
@@ -794,6 +794,7 @@ const GiftDashboard = () => {
            flex={1}
            position={"relative"}
          >
+            <Link to="/brand-voucher/buy-voucher">
            <Flex alignItems="center" gap={4}>
              <Box
                bgGradient={"linear-gradient(180deg, #FFFFFF -3.85%, #6311CB 210.58%)"}
@@ -805,7 +806,6 @@ const GiftDashboard = () => {
                  w={10}
                  h={6}
                ></Image>
-
              </Box>
              <Text fontWeight="500" fontSize="sm" mb={0}>
                Apply for brand voucher
@@ -829,6 +829,7 @@ const GiftDashboard = () => {
                opacity={0.7}
              ></Image>
            </Box>
+            </Link>
          </Box>

          {/* GPR Card */}
--- a/src/Pages/Report/Report.jsx
+++ b/src/Pages/Report/Report.jsx
@@ -1,9 +1,17 @@
 import {
+  Badge,
  Box,
  Button,
  Divider,
+  Heading,
  HStack,
  Icon,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Select,
  Tag,
  TagLabel,
  Text,
@@ -13,16 +21,24 @@ import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../Components/DataTable/NormalTable";
-import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
+import { CalendarIcon, ChevronDownIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
+import { MdNotificationsNone, MdOutlineHeadsetMic, MdOutlineUnarchive } from "react-icons/md";
 import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
-import { AiOutlineEdit } from "react-icons/ai";
+import { AiOutlineCalendar, AiOutlineEdit } from "react-icons/ai";
 import { FaRegEye } from "react-icons/fa";
 import { PiReceipt } from "react-icons/pi";
+import ApexChart from "../../Components/Doughnut/ApexDonut";
+import ApexLine from "../../Components/Doughnut/ApexLine";
+import PieCharts from "../../Components/Doughnut/PieCharts";
+import { GoDotFill } from "react-icons/go";
+import { Link } from "react-router-dom";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { IoMdArrowDropdown } from "react-icons/io";

 const Report = () => {
-  const { reportsHistory } = useContext(GlobalStateContext);
+  const { transactionHistory } = useContext(GlobalStateContext);
+  const { reportStatus } = useContext(GlobalStateContext);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
@@ -40,138 +56,207 @@ const Report = () => {

  // ===============================[ Table Header ]
  const tableHeadRow = [
-    "Name",
-    "Last Update",
-    "Report type",
-    "Total Expense",
-    "Status",
-    "Actions",
+    "Employee Name",
+    "Employee ID",
+    "Department",
+    "Wallet",
+    "Merchant",
+    "Nature of expense",
+    "Date & time",
+    "Amount",
  ];

  // const extractedArray = reportsHistory.map((item)=>({ }))
-
-  const extractedArray = reportsHistory.map((item, index) => ({
+  const extractedArray = transactionHistory.map((item, index) => ({
    Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
    <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
-    "Last Update": 
-      item?.lastUpdated,
-    "Report type": item?.reportType,
-    "Total Expense": item?.totalExpense,
-    Status: (
-      <Tag
-        my={1}
-        size={"sm"}
-        borderRadius="full"
-        colorScheme={
-          item?.status === "Approved"
-            ? "green"
-            : item?.status === "Fully Reimbursed"
-            ? "purple"
-            : item?.status === "Disapproved"
-            ? "red"
-            : item?.status === "Saved"
-            ? "yellow"
-            : item?.status === "Partially Reimbursed"
-            ? "orange"
-            : "gray" // default color scheme if status doesn't match any condition
-        }
-        border={`1px solid ${
-          item?.status === "Approved"
-            ? "green"
-            : item?.status === "Fully Reimbursed"
-            ? "purple"
-            : item?.status === "Disapproved"
-            ? "red"
-            : item?.status === "Saved"
-            ? "orange"
-            : item?.status === "Partially Reimbursed"
-            ? "orange"
-            : "gray" // default border color if status doesn't match any condition
-        }`}
-        p={1}
-        px={3}
-      >
-        <TagLabel>{item?.status}</TagLabel>
-      </Tag>
-    ),
-    Actions: (
-      <Box
-        display={"flex"}
-        gap={1}
-        alignItems={"center"}
-        justifyContent={"center"}
-      >
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
-          <FaRegEye fontSize={"18px"} />
-        </Button>
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
-          <AiOutlineEdit fontSize={"19px"} />
-        </Button>
-        <Button _hover={{ color:"gray.800", bg:"gray.100"}} transition={'0.5s'}  size={"sm"} bg={"none"} p={0} color="gray.600">
-          <RiDeleteBin5Line fontSize={"18px"} />
-        </Button>
-      </Box>
+    "Employee Name": 
+      item?.employeeName,
+    "Employee ID": item?.employeeID,
+    "Department": item?.department,
+    "Wallet": item?.wallet,
+    "Merchant": item?.merchant,
+    "Nature of expense": item?.natureExpense,
+    "Date & time": item?.dateTime,
+    "Amount":(
+      <Box color={"#59C36A"}>{item?.amount}</Box>
    ),
  }));

+
+    // ===============================[ Table Header ]
+    const tableHeadRowReport = [
+      "Report Name",
+      "Report by",
+      "Report amount",
+      "Date & time",
+      "Status",
+      "Approver",
+      "Disburser",
+      "Action",
+    ];
+  
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+    const extractedArrayReport = reportStatus.map((item, index) => ({
+      Name: <Text as={'span'} display={'flex'} gap={2} alignItems={'center'}>
+      <Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>,
+        "Report Name":item?.reportName,
+        "Report by":(
+          <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>
+        ),
+        "Report amount": item?.reportAmount,
+        "Date & time": item?.dateTime,
+        "Status":  (
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={1}
+            bg={
+              item?.status === "Fully Reimbursed"
+                ? "#F8F3FF"
+                : item?.status === "Partially Reimbursed"
+                  ? "Partially Reimbursed"
+                  : item?.status === "Approved"
+                    ? "#00A43814"
+                    : "#f8d7da" 
+            }
+            rounded={"full"}
+            color={
+              item?.status === "Fully Reimbursed"
+                ? "#6311CB"
+                : item?.status === "Partially Reimbursed"
+                  ? "#EAB600"
+                  : item?.status === "Approved"
+                    ? "#00A438"
+                    : "#721c24" // Default red text for unknown statuses
+            }
+            py={1.5}
+            px={1}
+          >
+            <GoDotFill />
+            {item?.status}
+          </Box>
+        ),
+        "Approver": (
+          <HStack>
+            <Image
+              borderRadius='full'
+              boxSize='40px'
+              src='https://bit.ly/dan-abramov'
+              alt='Dan Abramov'
+            />
+            <Text color={"#667085"} fontSize={"xs"} mb={1}>
+            Ravi Sharma
+            </Text>
+          </HStack>
+        ),
+        "Disburser":(
+          <HStack>
+            <Image
+              borderRadius='full'
+              boxSize='40px'
+              src='https://bit.ly/dan-abramov'
+              alt='Dan Abramov'
+            />
+            <Text color={"#667085"} fontSize={"xs"} mb={1}>
+            Karan Johar
+            </Text>
+          </HStack>
+        ),
+        "Action":(
+          <Link to="/reports/view-report"><Badge fontWeight={500} fontSize={"10px"} bg="#6211CB" color={"#fff"} p={1} px={2} rounded={5}>View Reports</Badge></Link>
+       ),
+    }));
+
  return (
    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
-      <MiniHeader
-        title={"Reports History"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-        backButton={true}
-      />
-
+      <HStack mb={4} justifyContent={"space-between"}>
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
+             Report
+          </Heading>
+          <Box display={"flex"} alignItems={"center"} gap={3}>
+              <Box
+                fontSize={"xs"}
+                display={"flex"}
+                alignItems={"center"}
+                bg={"#fff"}
+                p={"6px 10px"}
+                rounded={"md"}
+              >
+                <Text
+                  as={"span"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  gap={1}
+                >
+                  <AiOutlineCalendar fontSize={"16px"} /> Time Period :
+                </Text>
+                <Text
+                  as={"span"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  color={"#6311CB"}
+                  fontWeight={500}
+                  mx={2}
+                >
+                  <Text as={"span"} me={5}>
+                    Feb 20 - Jan 30, 2024{" "}
+                  </Text>
+                  <IoMdArrowDropdown />
+                </Text>
+              </Box>
+              <Button
+                as={Button}
+                leftIcon={<MdOutlineUnarchive fontSize={"16px"} />}
+                // rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                size={"sm"}
+                me={2}
+                style={{backgroundColor:"#fff"}}
+                color={"#6311CB"}
+              >
+                Export
+              </Button>
+          </Box>
+        </HStack>
+      <HStack w={"100%"} mb={4}>
+          <Box bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
+            <ApexLine />
+          </Box>
+          <Box  bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
+            <PieCharts />
+          </Box>
+        </HStack>
      <Box
        rounded={"xl"}
-        py={3}
-        // pb={0}
        display={"flex"}
        flexDirection={"column"}
        bg={"#fff"}
        shadow={"md"}
        minH={"100%"}
+        mb={4}
      >
-        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
-          <Text fontSize={"lg"} fontWeight={600}>
-            Reports
-          </Text>
-          <HStack w={"100%"} justifyContent={"space-between"}>
-            <Button
-              fontWeight={500}
-              size={"sm"}
-              leftIcon={<CalendarIcon color={"purple.800"} />}
-              colorScheme="gray"
-              color={"gray.700"}
-              variant="outline"
-              fontSize={"xs"}
-            >
-              Select Date Range
-            </Button>
-
-            <Button
-              _hover={{
-                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                opacity: 0.8,
-              }}
-              bgGradient="linear(to-r, #3725EA, #5E0FCD)"
-              fontSize={"xs"}
-              px={8}
-              fontWeight={500}
-              size={"sm"}
-              color={"#fff"}
-              variant="outline"
-              transition={"0.5s all"}
-              _active={{
-                // bgGradient: "linear(to-r, #5E0FCD, #3725EA)",
-                opacity: 1,
-              }}
-            >
-              Add to Report
-            </Button>
-          </HStack>
-        </VStack>
-        <Divider />
+        <Box display={"flex"} justifyContent={"space-between"} p={4} alignItems={"center"}>
+          <Heading fontSize={"md"} mb={0} fontWeight={500}>Transaction history</Heading>
+          <Box display={"flex"}>
+            <Select placeholder="Weekly" size={"sm"} rounded={"md"}>
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+            </Select>
+          </Box>
+        </Box>
        <NormalTable
          emptyMessage={`We don't have any Sponers `}
          tableHeadRow={tableHeadRow}
@@ -179,6 +264,31 @@ const Report = () => {
          isLoading={isLoading}
        />
      </Box>
+      <Box
+        rounded={"xl"}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+      <Box display={"flex"} justifyContent={"space-between"} p={4} alignItems={"center"}>
+          <Heading fontSize={"md"} mb={0} fontWeight={500}>Reimbursement status</Heading>
+          <Box display={"flex"}>
+            <Select placeholder="Weekly" size={"sm"} rounded={"md"}>
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+              <option value="option3">Option 3</option>
+            </Select>
+          </Box>
+        </Box>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRowReport}
+          data={extractedArrayReport}
+          isLoading={isLoading}
+        />
+        </Box>
    </Box>
  );
 };
--- a/src/Pages/Report/ViewReports.jsx
+++ b/src/Pages/Report/ViewReports.jsx
@@ -0,0 +1,201 @@
+import { Box, Button, Divider, Heading, HStack, Image, Menu, MenuButton, MenuItem, MenuList, Tag, TagLabel, Text } from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { LiaFileInvoiceSolid } from "react-icons/lia";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { GrDownload } from "react-icons/gr";
+import { GoDotFill } from "react-icons/go";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import { ChevronDownIcon } from "@chakra-ui/icons";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+
+const ViewReports = () => {
+  const { viewReports } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ======================= [ Table Header ] =======================
+  const tableHeadRow = [
+    "Invoice",
+    "Amount",
+    "Paid from wallet",
+    "Status",
+    "Action",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = viewReports.map((item, index) => ({
+    Invoice: (
+      <HStack>
+        <Box p={2} bg={"#ebe0f8"} rounded={"full"}>
+          <LiaFileInvoiceSolid color="#6311CB" fontSize={"18px"} />
+        </Box>
+        <Text color={"#3725EA"} fontSize={"xs"} fontWeight={500} mb={0}>
+          {item?.inVoice}
+        </Text>
+      </HStack>
+    ),
+    Amount: item?.amount,
+    "Paid from wallet": item?.paidWallet,
+    Status:(
+        <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={1}
+            bg={
+              item?.status === "Fully Reimbursed"
+                ? "#F8F3FF"
+                : item?.status === "Partially Reimbursed"
+                  ? "Partially Reimbursed"
+                  : item?.status === "Approved"
+                    ? "#00A43814"
+                    : "#f8d7da" 
+            }
+            rounded={"full"}
+            color={
+              item?.status === "Fully Reimbursed"
+                ? "#6311CB"
+                : item?.status === "Partially Reimbursed"
+                  ? "#EAB600"
+                  : item?.status === "Approved"
+                    ? "#00A438"
+                    : "#721c24" // Default red text for unknown statuses
+            }
+            p={1}          >
+            <GoDotFill />
+            {item?.status}
+        </Box>
+      ),
+    Action: (
+        <Button
+          gap={2}
+          fontSize="x-small"
+          color="#039E38"
+          bgColor="transparent"
+          _hover={{ bgColor: "white" }}
+        >
+          <GrDownload />
+          Download
+        </Button>
+    ),
+  }));
+
+  return (
+    <Box h={"100%"} p={4} {...OPACITY_ON_LOAD} overflowX={"scroll"}>
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"} mb={5}>
+        <HStack mb={4} justifyContent={"space-between"}>
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
+            Food expense June 2024
+          </Heading>
+          <Box
+            fontSize={"xs"}
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={1}
+            bg={"#F8F3FF"}
+            rounded={"full"}
+            color={"#6311CB"}
+            py={1} px={2}          >
+            <GoDotFill />
+            Fully Reimbursed
+        </Box>
+        </HStack>
+        <Divider />
+        <HStack width={"100%"} mb={8}>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Report by
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              Kartikey Gautam
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Report amount
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              ₹ 10,000
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Date & time
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              22 June, 2024
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Approver
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              Pooja Patade
+            </Text>
+          </Box>
+          <Box flex={1}>
+            <Text fontSize={"sm"} mb={2} fontWeight={500}>
+              Disburser
+            </Text>
+            <Text color={"#696969"} fontSize={"xs"} fontWeight={400}>
+              Pooja Patade
+            </Text>
+          </Box>
+        </HStack>
+      </Box>
+      <Box bg={"#fff"} p={4} rounded={"md"} boxShadow={"md"}>
+      <HStack mb={4} justifyContent={"space-between"}>
+          <Heading fontSize={"md"} fontWeight={500} mb={0}>
+            Food expense June 2024
+          </Heading>
+          <Menu>
+            <MenuButton
+                as={Button}
+                leftIcon={<FaArrowUpFromBracket />}
+                rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                colorScheme="gray"
+                color={"gray.700"}
+                variant="outline"
+                size={"sm"}
+                me={2}
+            >
+                Export
+            </MenuButton>
+            <MenuList>
+                <MenuItem fontSize={"sm"}>
+                <Image src={pdfIcon} me={2} /> Export as PDF
+                </MenuItem>
+                <MenuItem fontSize={"sm"}>
+                <Image src={ExcelIcon} me={2} /> Export as Excel
+                </MenuItem>
+            </MenuList>
+          </Menu>
+        </HStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          showRadioButton={true}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default ViewReports;
--- a/src/Pages/SupportAndTicket/SupportAndTicket.jsx
+++ b/src/Pages/SupportAndTicket/SupportAndTicket.jsx
@@ -20,6 +20,7 @@ import {
  useDisclosure,
  Select,
  Textarea,
+  Flex,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import MiniHeader from "../../Components/MiniHeader";
@@ -34,6 +35,8 @@ import { FaArrowUpFromBracket } from "react-icons/fa6";
 import { PiIdentificationBadge } from "react-icons/pi";
 import PrimaryButton from "../../Components/Buttons/PrimaryButton";
 import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { BsFilterRight } from "react-icons/bs";
+import { LuListFilter } from "react-icons/lu";

 const SupportAndTicket = () => {

@@ -58,7 +61,7 @@ const SupportAndTicket = () => {

  // ===============================[ Table Header ]
  const tableHeadRow = [
-    "Select",
+    // "Select",
    "Ticket ID",
    "Subject",
    "Status",
@@ -178,6 +181,64 @@ const SupportAndTicket = () => {
          </Box>
        </Box>
        <hr />
+        <HStack w={"100%"} justifyContent={"space-between"} px={4} mb={4}>
+          <Flex align={'center'} gap={5}>
+            <Menu>
+              <MenuButton
+                as={Button}
+                leftIcon={<BsFilterRight fontSize={"16px"} />}
+                rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                color={"gray.700"}
+                variant="outline"
+                size={"sm"}
+                me={2}
+              >
+                Sort
+              </MenuButton>
+              <MenuList>
+                <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+              </MenuList>
+            </Menu>
+            <Flex align={'center'} gap={2}>
+              <Text as={'span'} fontSize={'xs'}>Show</Text>
+              <Select borderRadius={5} size={"sm"}>
+                <option value='10'>10</option>
+                <option value='30'>30</option>
+                <option value='50'>50</option>
+                <option value='80'>80</option>
+              </Select>
+              <Text as={'span'} fontSize={'xs'}>entries</Text>
+            </Flex>
+
+
+          </Flex>
+          <Box>
+            <Menu>
+              <MenuButton
+                as={Button}
+                leftIcon={<LuListFilter fontSize={"16px"} />}
+                rightIcon={<ChevronDownIcon />}
+                fontSize={"xs"}
+                color={"gray.700"}
+                variant="outline"
+                size={"sm"}
+                me={2}
+              >
+                Filter
+              </MenuButton>
+              <MenuList>
+                <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+              </MenuList>
+            </Menu>
+          </Box>
+        </HStack>
        <NormalTable
          emptyMessage={`We don't have any Sponers `}
          tableHeadRow={tableHeadRow}
@@ -188,10 +249,10 @@ const SupportAndTicket = () => {
      </Box>

      {/* modal  */}
-      <Modal size={"xl"} isOpen={isOpen} onClose={onClose} isCentered>
+      <Modal size={"md"} isOpen={isOpen} onClose={onClose} isCentered>
        <ModalOverlay />
        <ModalContent>
-          <ModalHeader>Add New ticket</ModalHeader>
+          <ModalHeader fontSize={"md"}>Add New ticket</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Box mb={4}>
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -38,6 +38,7 @@ import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable
 import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher";
 import Profile from "../Pages/Profile/Profile";
 import WalletsPullBackFunds from "../Pages/ManageHumanResource/WalletsPullBackFunds";
+import ViewReports from "../Pages/Report/ViewReports";
 export const RouteLink = [
  { path: "/", Component: Dashbaord },
  { path: "/expenses", Component: Expenses },
@@ -58,6 +59,7 @@ export const RouteLink = [
  { path: "/optiFii-benefit", Component: OptiFiiExpenseDashboard },
  { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
  { path: "/reports", Component: Report },
+  { path: "/reports/view-report", Component: ViewReports },
  { path: "/support-ticket", Component: SupportAndTicket },
  { path: "/settings", Component: Settings },
  { path: "/department", Component: Department },