From 1701dae273fcfc81b3a6c68bc2ecda9a879f05f4 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Thu, 10 Oct 2024 13:45:41 +0530
Subject: [PATCH] notification page done

---
 src/Components/HeaderMain.jsx           |   5 +-
 src/Pages/Dashboard/Dashbaord.jsx       |   5 +-
 src/Pages/Notification/Notification.jsx | 151 ++++++++++++++++++++++++
 src/Routes/Routes.js                    |   7 ++
 4 files changed, 164 insertions(+), 4 deletions(-)
 create mode 100644 src/Pages/Notification/Notification.jsx

diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index 1ae1e69..d227ea0 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -127,7 +127,10 @@ const HeaderMain = ({
       >
         <Box display={"flex"} gap={2}>
           <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
-            <Button size={"sm"} bg={"none"} p={0}>
+            <Button 
+            onClick={()=>navigate("/notification")}
+            size={"sm"} bg={"none"} p={0}
+            >
               <MdNotificationsNone fontSize={"20px"} />
             </Button>
           </Box>
diff --git a/src/Pages/Dashboard/Dashbaord.jsx b/src/Pages/Dashboard/Dashbaord.jsx
index 40db544..a80baf4 100644
--- a/src/Pages/Dashboard/Dashbaord.jsx
+++ b/src/Pages/Dashboard/Dashbaord.jsx
@@ -604,7 +604,7 @@ const Dashbaord = () => {
 
               <TabPanels>
                 <TabPanel px={0}>
-                  <HStack justifyContent={"space-between"} mt={2}>
+                  <HStack justifyContent={"space-between"} mt={2} mb={4}>
                     <HStack bg={"#F2EEF8"} p={2} rounded={"md"}>
                       <Text fontSize={"xs"} color={"#888888"} mb={0}>
                         Total report amount
@@ -643,14 +643,13 @@ const Dashbaord = () => {
                         style={{
                           float: "right",
                           marginRight: "4px",
-                          marginBottom: "8px",
                         }}
                         to="/reimbursement-request"
                       >
                         <BsArrowsAngleExpand
                           as={Button}
                           color={"#6311CB"}
-                          size={14}
+                          size={18}
                           cursor={"pointer"}
 
                           // onClick={zoomIn}
diff --git a/src/Pages/Notification/Notification.jsx b/src/Pages/Notification/Notification.jsx
new file mode 100644
index 0000000..d723301
--- /dev/null
+++ b/src/Pages/Notification/Notification.jsx
@@ -0,0 +1,151 @@
+import {
+    Box,
+    HStack,
+    Text,
+    Image,
+    VStack,
+    Icon,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
+import { IoIosCheckmark } from "react-icons/io";
+
+const Notification = () => {
+    // Define an array of notification objects with unique data
+    const [notifications, setNotifications] = useState([
+        {
+            id: 1,
+            avatar: 'https://bit.ly/dan-abramov',
+            sender: 'Admin',
+            time: '1 Min ago',
+            message: 'Lorem ipsum dolor sit amet, consectetur',
+        },
+        {
+            id: 2,
+            avatar: 'https://bit.ly/code-beast',
+            sender: 'Support',
+            time: '5 Min ago',
+            message: 'Your ticket has been updated.',
+        },
+        {
+            id: 3,
+            avatar: 'https://bit.ly/ryan-florence',
+            sender: 'System',
+            time: '10 Min ago',
+            message: 'System maintenance scheduled for tonight.',
+        },
+        {
+            id: 4,
+            avatar: 'https://bit.ly/kent-c-dodds',
+            sender: 'John Doe',
+            time: '20 Min ago',
+            message: 'Your profile has been viewed 10 times.',
+        },
+        {
+            id: 5,
+            avatar: 'https://bit.ly/sage-adebayo',
+            sender: 'Jane Smith',
+            time: '30 Min ago',
+            message: 'New comment on your post.',
+        },
+    ]);
+
+    // Handler to delete a notification
+    const handleDelete = (id) => {
+        setNotifications(notifications.filter(notification => notification.id !== id));
+    };
+
+    return (
+        <Box h="100%" p={4} {...OPACITY_ON_LOAD} overflowY="auto">
+            <HStack alignItems={"start"} justifyContent={"space-between"}>
+                <MiniHeader
+                    title="Notification"
+                />
+                <HStack>
+                    <HStack
+                        as={"button"}
+                        spacing={0}
+                        border={"1px solid #D2D2D2"}
+                        bg={"#fff"}
+                        px={2}
+                        py={1}
+                        rounded={"md"}
+                        color={"#1C1C1C"}
+                    >
+                        <Icon as={IoIosCheckmark} />
+                        <Text mb={0} fontSize={"xs"} fontWeight={500}>Mark as read</Text>
+                    </HStack>
+                    <HStack
+                        as={"button"}
+                        spacing={0}
+                        border={"1px solid #EE1B24"}
+                        bg={"#fff"}
+                        px={2}
+                        py={1}
+                        rounded={"md"}
+                        color={"#EE1B24"}
+                    >
+                        <Icon as={MdDeleteOutline} boxSize={3} />
+                        <Text mb={0} ms={1} fontSize={"xs"} fontWeight={500}>Mark as read</Text>
+                    </HStack>
+                </HStack>
+            </HStack>
+
+            <Box
+                bg="#fff"
+                p={4}
+                rounded="md"
+                boxShadow="md"
+                minH={"76vh"}
+            >
+                {/* Wrap all notifications inside a single VStack */}
+                <VStack spacing={4} align="stretch">
+                    {notifications.map((notification) => (
+                        <HStack
+                            key={notification.id}
+                            justifyContent="space-between"
+                            bg="#F3F7F9"
+                            p={2}
+                            rounded="sm"
+                            boxShadow="md"
+                        >
+                            <HStack spacing={2}>
+                                <Box bg="#d7d3fb" p={1} rounded="full">
+                                    <Image
+                                        borderRadius="full"
+                                        boxSize="30px"
+                                        src={notification.avatar}
+                                        alt={notification.sender}
+                                    />
+                                </Box>
+                                <Box>
+                                    <Box mb={0}>
+                                        <Text as="span" fontSize="sm" fontWeight={600} mb={0}>
+                                            {notification.sender}
+                                        </Text>
+                                        <Text as="span" color="#A0A0A0" fontSize="xs" ms={2} fontWeight={500} mb={0}>
+                                            {notification.time}
+                                        </Text>
+                                    </Box>
+                                    <Text color="#A0A0A0" fontSize="xs" mb={0}>
+                                        {notification.message}
+                                    </Text>
+                                </Box>
+                            </HStack>
+                            <Box
+                                onClick={() => handleDelete(notification.id)}
+                                cursor="pointer"
+                            >
+                                <MdOutlineDelete color="#686868" size={16} />
+                            </Box>
+                        </HStack>
+                    ))}
+                </VStack>
+            </Box>
+        </Box>
+    );
+};
+
+export default Notification;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index cdeaa0d..1a887a0 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -42,6 +42,7 @@ import ApplyForGiftCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/A
 import ApplyForDigitalCard from "../Pages/OptiFiiGifsAndVouchers/ApplyForGiftCard/ApplyForDigitalCard";
 import BenifitOverView from "../Pages/OptiFiiTaxBenefit/BeinifitOverView";
 import ViewTicket from "../Pages/SupportAndTicket/ViewTicket";
+import Notification from "../Pages/Notification/Notification";
 
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
@@ -55,6 +56,12 @@ export const RouteLink = [
   { path: "/reimbursement-request", Component: ReimbursementRequest },
   { path: "/reimbursement-request-view", Component: ReimbursementRequestView },
   { path: "/advance-expense-request", Component: AdvanceExpenseRequest },
+
+  // Notification 
+
+  { path: "/notification", Component: Notification },
+
+
   {
     path: "/advance-expense-request-view",
     Component: AdvanceExpenseRequestView,