Merge pull request 'feat(notifications): add notification history page and API' (#37) from notification-history into develop

Reviewed-on: https://repo.ravanertebat.com/TM/tm_panel/pulls/37
Reviewed-by: Nima Nakhsotin <n.nakhostin@ravanertebat.com>

package-lock.json

@@ -32,6 +32,7 @@
         "react-paginate": "^8.3.0",
         "react-switch": "^7.1.0",
         "react-toastify": "^11.0.5",
+        "react-tooltip": "^5.29.1",
         "tailwind-merge": "^2.6.0",
         "zod": "^4.1.5"
       },
@@ -233,6 +234,31 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2171,6 +2197,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -5391,6 +5423,20 @@
         "react-dom": "^18 || ^19"
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "5.29.1",
+      "resolved": "https://registry.npmmirror.com/react-tooltip/-/react-tooltip-5.29.1.tgz",
+      "integrity": "sha512-rmJmEb/p99xWhwmVT7F7riLG08wwKykjHiMGbDPloNJk3tdI73oHsVOwzZ4SRjqMdd5/xwb/4nmz0RcoMfY7Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -33,6 +33,7 @@
     "react-paginate": "^8.3.0",
     "react-switch": "^7.1.0",
     "react-toastify": "^11.0.5",
+    "react-tooltip": "^5.29.1",
     "tailwind-merge": "^2.6.0",
     "zod": "^4.1.5"
   },

src/app/(notifications)/notification-history/[id]/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+import Loading from "@/app/loading";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import IsVisible from "@/components/ui/IsVisible";
+import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
+import { BreadcrumbItem } from "@/types/shared";
+import { unixToDate } from "@/utils/shared";
+import { use } from "react";
+
+interface IProps {
+  params: Promise<{ id: string }>;
+}
+
+const NotificationDetailsPage = ({ params }: IProps) => {
+  const { id } = use(params);
+  const { data, isLoading } = useGetNotificationDetails(id);
+
+  const breadcrumbItems: BreadcrumbItem[] = [
+    {
+      href: "/",
+      name: "Dashboard",
+    },
+    {
+      href: "/notification-history",
+      name: "Notification history",
+    },
+    {
+      href: `/notification-history/${id}`,
+      name: "Notification details",
+    },
+  ];
+  if (isLoading) return <Loading />;
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <ShowcaseSection title={`${data?.data.title}`}>
+        <div className="mt-4 grid grid-cols-4 gap-15 pb-4">
+          <IsVisible condition={!!data?.data.message}>
+            <ShowcaseSection title="Message">
+              {data?.data.message}
+            </ShowcaseSection>
+          </IsVisible>
+          <IsVisible condition={!!data?.data.event_type}>
+            <ShowcaseSection title="Event Type">
+              {data?.data.event_type}
+            </ShowcaseSection>
+          </IsVisible>
+          <IsVisible condition={!!data?.data.link}>
+            <ShowcaseSection title="Link">{data?.data.link}</ShowcaseSection>
+          </IsVisible>
+
+          <IsVisible condition={!!data?.data.priority}>
+            <ShowcaseSection title="Priority">
+              {data?.data.priority}
+            </ShowcaseSection>
+          </IsVisible>
+
+          <IsVisible condition={!!data?.data.type}>
+            <ShowcaseSection title="Type">{data?.data.type}</ShowcaseSection>
+          </IsVisible>
+          <IsVisible condition={!!data?.data.seen_at}>
+            <ShowcaseSection title="Seen at">
+              {unixToDate({ unix: data?.data.seen_at ?? 0, hasTime: false })}
+            </ShowcaseSection>
+          </IsVisible>
+
+          <ShowcaseSection title="Is Scheduled">
+            {data?.data.is_scheduled ? "Yes" : "No"}
+          </ShowcaseSection>
+          <ShowcaseSection title="Has seen">
+            {data?.data.seen ? "Yes" : "No"}
+          </ShowcaseSection>
+        </div>
+      </ShowcaseSection>
+    </>
+  );
+};
+
+export default NotificationDetailsPage;

src/app/(notifications)/notification-history/page.tsx

@@ -0,0 +1,24 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import NotificationHistoryTable from "@/components/Tables/notification-history";
+import { BreadcrumbItem } from "@/types/shared";
+
+const NotificationHistoryPage = () => {
+  const breadcrumbItems: BreadcrumbItem[] = [
+    {
+      href: "/",
+      name: "Dashboard",
+    },
+    {
+      href: "/notification-history",
+      name: "Notification history",
+    },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <NotificationHistoryTable />
+    </>
+  );
+};
+
+export default NotificationHistoryPage;

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import "@/css/satoshi.css";
 import "@/css/style.css";
+import "react-tooltip/dist/react-tooltip.css";
 
 import { ConditionalLayout } from "@/components/Layouts/conditional-layout";
 import "flatpickr/dist/flatpickr.min.css";

src/app/tenders/[details]/page.tsx

@@ -4,20 +4,12 @@ import { LocationIcon } from "@/assets/icons";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import Status from "@/components/ui/Status";
-import {
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { useTenderDetailQuery } from "@/hooks/queries";
 import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
-import { msToDate, unixToDate } from "@/utils/shared";
+import { msToDate } from "@/utils/shared";
 import getSymbolFromCurrency from "currency-symbol-map";
-import { use } from "react";
-import { TableCell } from "../../../components/ui/table";
 import Link from "next/link";
+import { use } from "react";
 
 interface IProps {
   params: Promise<{

src/components/Layouts/header/user-info/index.tsx

@@ -6,16 +6,16 @@ import {
   DropdownContent,
   DropdownTrigger,
 } from "@/components/ui/dropdown";
+import { useUser } from "@/contexts";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
-import { useUser } from "@/contexts";
 
 export function UserInfo() {
   const [isOpen, setIsOpen] = useState(false);
-  const { logout } = useUser();
+  const { logout, user } = useUser();
   const USER = {
     name: "John Smith",
     email: "johnson@nextadmin.com",
@@ -28,16 +28,19 @@ export function UserInfo() {
         <span className="sr-only">My Account</span>
 
         <figure className="flex items-center gap-3">
-          <Image
+          <div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
+            <UserIcon />
+          </div>
+          {/* <Image
             src={USER.img}
             className="size-12"
             alt={`Avatar of ${USER.name}`}
             role="presentation"
             width={200}
             height={200}
-          />
+          /> */}
           <figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
-            <span>{USER.name}</span>
+            <span>{user?.full_name}</span>
 
             <ChevronUpIcon
               aria-hidden

src/components/Layouts/sidebar/data/index.ts

@@ -6,7 +6,7 @@ const navSubItemSchema: z.ZodType<any> = z.lazy(() =>
     title: z.string(),
     url: z.string(),
     icon: z.any(),
-    items: z.array(navSubItemSchema).default([]),
+    items: z.array(navSubItemSchema),
   }),
 );
 
@@ -66,6 +66,12 @@ export const NAV_DATA: NavData = [
         icon: Icons.Table,
         items: [],
       },
+      {
+        title: "Notifications",
+        url: "/notification-history",
+        icon: Icons.NotificationIcon,
+        items: [],
+      },
     ],
   },
 ];

src/components/Layouts/sidebar/icons.tsx

@@ -19,6 +19,20 @@ export function ChevronUp(props: PropsType) {
     </svg>
   );
 }
+export function NotificationIcon(props: PropsType) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
+    </svg>
+  );
+}
 
 export function Building(props: PropsType) {
   return (

src/components/Tables/admins/index.tsx

@@ -3,6 +3,7 @@
 import { PencilSquareIcon, TrashIcon, UserSettingIcon } from "@/assets/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import Modal from "@/components/ui/modal";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -15,6 +16,7 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { AdminStatus } from "@/constants/enums";
 import Link from "next/link";
+import { Tooltip } from "react-tooltip";
 import ChangeStatusModalContent from "./ChangeStatusModalContent";
 import { useAdminsPresenter } from "./useAdminsPresenter";
 
@@ -82,29 +84,43 @@ const AdminsTable = () => {
                 <TableCell className="text-start xl:pr-7.5">
                   <div className="flex items-center justify-start gap-x-3.5">
                     <button
+                      data-tooltip-id="delete"
+                      data-tooltip-content="Delete"
+                      data-tooltip-place="top"
                       className="hover:text-red-500"
                       onClick={() => {
                         setCurrentUser(item);
                         setIsModalOpen(true);
                       }}
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                       <span className="sr-only">Delete Admin </span>
                       <TrashIcon />
                     </button>
                     <button
+                      data-tooltip-id="change-status"
+                      data-tooltip-content="Change status"
+                      data-tooltip-place="top"
                       className="hover:text-yellow-dark"
                       onClick={() => {
                         setCurrentUser(item);
                         setIsChangeStatusModalOpen(true);
                       }}
                     >
+                      <Tooltip
+                        {..._TooltipDefaultParams({ id: "change-status" })}
+                      />
                       <span className="sr-only">Change Admin Status</span>
                       <UserSettingIcon />
                     </button>
                     <button
+                      data-tooltip-id="edit"
+                      data-tooltip-content="Edit"
+                      data-tooltip-place="top"
                       className="hover:text-primary"
                       onClick={() => router.push(`/admins/edit/${item.id}`)}
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                       <span className="sr-only">Edit Admin </span>
                       <PencilSquareIcon />
                     </button>

src/components/Tables/companies/company-categories/index.tsx

@@ -12,8 +12,10 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
 import Link from "next/link";
+import { Tooltip } from "react-tooltip";
 import { Skeleton } from "../../../ui/skeleton";
 import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
 
@@ -65,7 +67,7 @@ const CompanyCategoriesTable = () => {
                   <TableCell colSpan={100}>{category.name}</TableCell>
                   <TableCell colSpan={100}>{category.description}</TableCell>
                   <TableCell colSpan={100}>
-                    {unixToDate(category.created_at)}
+                    {unixToDate({ unix: category.created_at, hasTime: true })}
                   </TableCell>
                   <TableCell colSpan={100}>
                     <IsVisible condition={isToggling}>
@@ -87,21 +89,29 @@ const CompanyCategoriesTable = () => {
                   <TableCell className="text-start xl:pr-7.5">
                     <div className="flex items-center justify-start gap-x-3.5">
                       <button
+                        data-tooltip-id="delete"
+                        data-tooltip-content="Delete"
+                        data-tooltip-place="top"
                         className="hover:text-red-500"
                         onClick={() => {
                           setCurrentCategory(category);
                           setIsModalOpen(true);
                         }}
                       >
+                        <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                         <span className="sr-only">Delete Admin </span>
                         <TrashIcon />
                       </button>
                       <button
+                        data-tooltip-id="edit"
+                        data-tooltip-content="Edit"
+                        data-tooltip-place="top"
                         className="hover:text-primary"
                         onClick={() =>
                           router.push(`${pathName}/edit/${category.id}`)
                         }
                       >
+                        <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                         <span className="sr-only">Edit Category</span>
                         <PencilSquareIcon />
                       </button>

src/components/Tables/companies/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import {
   Table,
   TableBody,
@@ -12,6 +13,7 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { formatPhoneNumber } from "@/utils/shared";
 import Link from "next/link";
+import { Tooltip } from "react-tooltip";
 import { useCompanyListPresenter } from "./useCompanyListPresenter";
 
 interface IProps {}
@@ -88,30 +90,42 @@ const CompaniesTable = ({}: IProps) => {
                 <TableCell className="text-start xl:pr-7.5">
                   <div className="flex items-center justify-start gap-x-3.5">
                     <button
+                      data-tooltip-id="delete"
+                      data-tooltip-content="Delete"
+                      data-tooltip-place="top"
                       className="hover:text-red-500"
                       onClick={() => {
                         setCurrentCompany(company);
                         setIsModalOpen(true);
                       }}
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                       <span className="sr-only">Delete Company </span>
                       <TrashIcon />
                     </button>
                     <button
+                      data-tooltip-id="edit"
+                      data-tooltip-content="Edit"
+                      data-tooltip-place="top"
                       className="hover:text-primary"
                       onClick={() =>
                         router.push(`${pathName}/edit/${company.id}`)
                       }
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                       <span className="sr-only">Edit Company </span>
                       <PencilSquareIcon />
                     </button>
                     <button
+                      data-tooltip-id="feedback"
+                      data-tooltip-content="Feedback"
+                      data-tooltip-place="top"
                       className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                       onClick={() => {
                         router.push(`${pathName}/feedback/${company.id}`);
                       }}
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
                       <ExclamationIcon />
                     </button>
                   </div>

src/components/Tables/customers/index.tsx

@@ -9,6 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import Link from "next/link";
 import useCustomerListPresenter from "./useCustomerListPresenter";
 
@@ -18,6 +19,7 @@ import Status from "@/components/ui/Status";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { unixToDate } from "@/utils/shared";
 import { toast } from "react-toastify";
+import { Tooltip } from "react-tooltip";
 import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
 
 const CustomersTable = () => {
@@ -65,7 +67,7 @@ const CustomersTable = () => {
               <TableCell colSpan={100}>{customer.full_name}</TableCell>
               <TableCell colSpan={100}>{customer.email}</TableCell>
               <TableCell colSpan={100}>
-                {unixToDate(customer.created_at)}
+                {unixToDate({ unix: customer.created_at, hasTime: true })}
               </TableCell>
 
               <TableCell colSpan={100} className="uppercase">
@@ -89,25 +91,36 @@ const CustomersTable = () => {
               <TableCell className="text-start xl:pr-7.5">
                 <div className="flex items-center justify-start gap-x-3.5">
                   <button
+                    data-tooltip-id="delete"
+                    data-tooltip-content="Delete"
+                    data-tooltip-place="top"
                     className="hover:text-red-500"
                     onClick={() => {
                       setCurrentCustomer(customer);
                       setIsModalOpen(true);
                     }}
                   >
+                    <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                     <span className="sr-only">Delete Company </span>
                     <TrashIcon />
                   </button>
                   <button
+                    data-tooltip-id="edit"
+                    data-tooltip-content="Edit"
+                    data-tooltip-place="top"
                     className="hover:text-primary"
                     onClick={() =>
                       router.push(`${pathName}/edit/${customer.id}`)
                     }
                   >
+                    <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                     <span className="sr-only">Edit Company </span>
                     <PencilSquareIcon />
                   </button>
                   <button
+                    data-tooltip-id="assign-company"
+                    data-tooltip-content="Assign to company"
+                    data-tooltip-place="top"
                     className="hover:text-green-dark"
                     onClick={() => {
                       setCurrentCustomer(customer);
@@ -117,15 +130,22 @@ const CustomersTable = () => {
                       });
                     }}
                   >
+                    <Tooltip
+                      {..._TooltipDefaultParams({ id: "assign-company" })}
+                    />
                     <span className="sr-only">Assign To Company </span>
                     <Building />
                   </button>
                   <button
+                    data-tooltip-id="feedback"
+                    data-tooltip-content="Feedback"
+                    data-tooltip-place="top"
                     className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                     onClick={() => {
                       router.push(`${pathName}/feedback/${customer.id}`);
                     }}
                   >
+                    <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
                     <ExclamationIcon />
                   </button>
                 </div>

src/components/Tables/feedback-table/index.tsx

@@ -67,11 +67,11 @@ const FeedbackTable = ({ id, paramKey }: IProps) => {
                   {item.feedback_type}
                 </TableCell>
                 <TableCell className="uppercase" colSpan={100}>
-                  {unixToDate(item.updated_at)}
+                  {unixToDate({ unix: item.updated_at, hasTime: true })}
                 </TableCell>
 
                 <TableCell className="uppercase" colSpan={100}>
-                  {unixToDate(item.created_at)}
+                  {unixToDate({ unix: item.created_at, hasTime: true })}
                 </TableCell>
                 <TableCell
                   className={cn(`text flex gap-2 capitalize`)}

src/components/Tables/notification-history/index.tsx

@@ -0,0 +1,113 @@
+"use client";
+import { EyeIcon } from "@/assets/icons";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Pagination from "@/components/ui/pagination";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
+import { Tooltip } from "react-tooltip";
+import Status from "@/components/ui/Status";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { isoStringToDate } from "@/utils/shared";
+import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";
+
+const NotificationHistoryTable = () => {
+  const {
+    columns,
+    isLoading,
+    metadata,
+    notificationHistory,
+    pathName,
+    router,
+    setParams,
+  } = useNotificationHistoryTablePresenter();
+
+  return (
+    <ShowcaseSection>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead colSpan={100} key={column}>
+                {column}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        {isLoading && <TableSkeleton column={columns.length} />}
+        <TableBody>
+          {!notificationHistory?.length ? (
+            <TableRow>
+              <TableCell>
+                <h2>No notifications</h2>
+              </TableCell>
+            </TableRow>
+          ) : (
+            notificationHistory.map((item, index) => (
+              <TableRow key={item.id}>
+                <TableCell colSpan={100}>{index + 1}</TableCell>
+                <TableCell colSpan={100}>{item.title}</TableCell>
+                <TableCell colSpan={100}>{item.event_type}</TableCell>
+                <TableCell colSpan={100}>
+                  {isoStringToDate({
+                    hasTime: true,
+                    isoString: item.created_at,
+                  })}
+                </TableCell>
+                <TableCell colSpan={100}>{item.message}</TableCell>
+                <TableCell className="capitalize" colSpan={100}>
+                  {item.priority}
+                </TableCell>
+                <TableCell className="capitalize" colSpan={100}>
+                  {item.type}
+                </TableCell>
+                <TableCell className="capitalize" colSpan={100}>
+                  {item.seen ? "Seen" : "Unseen"}
+                </TableCell>
+                <TableCell colSpan={100}>
+                  <Status status={item.status}>{item.status}</Status>
+                </TableCell>
+                <TableCell colSpan={100}>
+                  <button
+                    data-tooltip-id="details"
+                    data-tooltip-content="Details"
+                    data-tooltip-place="top"
+                    onClick={() => {
+                      router.push(`${pathName}/${item.id}`);
+                    }}
+                  >
+                    <Tooltip
+                      {..._TooltipDefaultParams({
+                        id: "details",
+                      })}
+                    />
+                    <EyeIcon />
+                  </button>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+      <Pagination
+        currentPage={metadata?.page ? metadata?.page - 1 : 1}
+        totalPages={metadata?.pages ?? 1}
+        onPageChange={(e) => {
+          setParams((currentParams) => ({
+            ...currentParams,
+            offset: e.selected * (metadata?.limit ?? 10),
+            limit: metadata?.limit ?? 1000,
+          }));
+        }}
+      />
+    </ShowcaseSection>
+  );
+};
+
+export default NotificationHistoryTable;

src/components/Tables/notification-history/useNotificationHistoryTablePresenter.ts

@@ -0,0 +1,37 @@
+"use client";
+import { apiDefaultParams } from "@/constants/Api_Params";
+import { useGetNotificationHistoryQuery } from "@/hooks/queries/useNotificationQueries";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+
+const useNotificationHistoryTablePresenter = () => {
+  const [params, setParams] = useState<Record<string, any>>({
+    ...apiDefaultParams,
+  });
+  const { data, isLoading } = useGetNotificationHistoryQuery(params);
+  const columns: string[] = [
+    "row",
+    "title",
+    "channel",
+    "created at",
+    "message",
+    "priority",
+    "type",
+    "seen",
+    "status",
+    "actions",
+  ];
+  const pathName = usePathname();
+  const router = useRouter();
+  return {
+    notificationHistory: data?.data.notifications,
+    metadata: data?.meta,
+    isLoading,
+    columns,
+    router,
+    pathName,
+    setParams,
+  };
+};
+
+export default useNotificationHistoryTablePresenter;

src/components/Tables/tenders/index.tsx

@@ -9,11 +9,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tooltip } from "react-tooltip";
 import useTenderListPresenter from "./useTenderListPresenter";
 
 import { ExclamationIcon, EyeIcon } from "@/assets/icons";
 import Pagination from "@/components/ui/pagination";
 import TableSkeleton from "@/components/ui/TableSkeleton";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 const TendersTable = () => {
@@ -70,18 +72,30 @@ const TendersTable = () => {
                   colSpan={100}
                 >
                   <button
+                    data-tooltip-id="details"
+                    data-tooltip-content="Details"
+                    data-tooltip-place="top"
                     onClick={() => {
                       router.push(`${pathName}/${item.id}`);
                     }}
                   >
+                    <Tooltip
+                      {..._TooltipDefaultParams({
+                        id: "details",
+                      })}
+                    />
                     <EyeIcon />
                   </button>
                   <button
+                    data-tooltip-id="feedback"
+                    data-tooltip-content="Feedback"
+                    data-tooltip-place="top"
                     className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                     onClick={() => {
                       router.push(`${pathName}/feedback/${item.id}`);
                     }}
                   >
+                    <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
                     <ExclamationIcon />
                   </button>
                 </TableCell>

src/components/ui/Status.tsx

@@ -22,6 +22,7 @@ const Status = ({ status, children }: IProps) => {
     "success",
     "verified",
     "published",
+    "sent"
   ];
   const blues = ["awarded", "processing", "in-review", "scheduled"];
   const yellows = ["pending", "warning", "on-hold", "delayed"];

src/components/ui/table.tsx

@@ -70,7 +70,7 @@ export function TableHead({
   return (
     <th
       className={cn(
-        "h-12 px-4 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
+        "h-12 px-4 text-left align-middle font-medium uppercase text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
         className,
       )}
       {...props}

src/constants/tooltip.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+import { VariantType } from "react-tooltip";
+
+export const _TooltipDefaultParams = ({
+  id,
+  variant = id === "delete" ? "error" : "info",
+  styles,
+}: {
+  id: string;
+  variant?: VariantType;
+  styles?: CSSProperties;
+}) => ({
+  id,
+  delayShow: 500,
+  delayHide: 500,
+  variant,
+  style: { backgroundColor: variant === "error" ? "#F23030" : "", ...styles },
+});

src/css/style.css

@@ -49,6 +49,9 @@
 .tableCheckbox:checked ~ div span {
   @apply opacity-100;
 }
+.react-tooltip {
+  @apply !rounded-full !transition-opacity !duration-500;
+}
 
 .tableCheckbox:checked ~ div {
   @apply border-primary bg-primary;
@@ -502,17 +505,17 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .Toastify__toast--success {
-  background: linear-gradient(to bottom right, #82E6AC, #1A8245) !important;
+  background: linear-gradient(to bottom right, #82e6ac, #1a8245) !important;
 }
 
 .Toastify__toast--error {
-  background: linear-gradient(to bottom right, #F89090, #E10E0E) !important;
+  background: linear-gradient(to bottom right, #f89090, #e10e0e) !important;
 }
 
 .Toastify__toast--warning {
-  background: linear-gradient(to bottom right, #F59E0B, #D97706) !important;
+  background: linear-gradient(to bottom right, #f59e0b, #d97706) !important;
 }
 
 .Toastify__toast--info {
-  background: linear-gradient(to bottom right, #8099EC, #1C3FB7) !important;
+  background: linear-gradient(to bottom right, #8099ec, #1c3fb7) !important;
 }

src/hooks/queries/useNotificationQueries.ts

@@ -0,0 +1,27 @@
+import { API_ENDPOINTS } from "@/lib/api";
+import { notificationService } from "@/lib/api/services/notification-service";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+export const useGetNotificationHistoryQuery = (
+  params?: Record<string, any>,
+) => {
+  const queryKey = useMemo(
+    () => [API_ENDPOINTS.NOTIFICATIONS.HISTORY, "READ NOTIFICATIONS HISTORY"],
+    [],
+  );
+  return useQuery({
+    queryKey,
+    queryFn: () => notificationService.getNotifications(params),
+  });
+};
+export const useGetNotificationDetails = (id: string) => {
+  const queryKey = useMemo(
+    () => [API_ENDPOINTS.NOTIFICATIONS.DETAILS(id), "NOTIFICATION DETAILS"],
+    [id],
+  );
+  return useQuery({
+    queryKey,
+    queryFn: () => notificationService.getNotificationDetails(id),
+  });
+};

src/lib/api/endpoints.ts

@@ -50,4 +50,8 @@ export const API_ENDPOINTS = {
     DETAILS: (id: string) => `feedback/${id}`,
     DELETE: (id: string) => `feedback/${id}`,
   },
+  NOTIFICATIONS: {
+    HISTORY: "notifications",
+    DETAILS: (id: string) => `notifications/view/${id}`,
+  },
 } as const;

src/lib/api/services/notification-service.ts

@@ -0,0 +1,37 @@
+import api from "../axios";
+import { API_ENDPOINTS } from "../endpoints";
+import {
+  TNotificationDetailsResponse,
+  TNotificationHistoryResponse,
+} from "../types/NotificationHistory";
+import { ApiResponse } from "../types/shared";
+
+export const notificationService = {
+  getNotifications: async (
+    params?: Record<string, any>,
+  ): Promise<TNotificationHistoryResponse> => {
+    try {
+      return (await api.get(API_ENDPOINTS.NOTIFICATIONS.HISTORY, { params }))
+        .data;
+    } catch (error) {
+      console.error(
+        "ERROR Caught in notification service => getNotifications",
+        error,
+      );
+      throw error;
+    }
+  },
+  getNotificationDetails: async (
+    id: string,
+  ): Promise<ApiResponse<TNotificationDetailsResponse>> => {
+    try {
+      return (await api.get(API_ENDPOINTS.NOTIFICATIONS.DETAILS(id))).data;
+    } catch (error) {
+      console.error(
+        "ERROR Caught in notification service => getNotificationDetails",
+        error,
+      );
+      throw error;
+    }
+  },
+};

src/lib/api/types/Customers.ts

@@ -31,9 +31,6 @@ const customersSchema = z.object({
   username: z.string(),
 });
 
-export const customersListResponse = z.object({
-  customers: z.array(customersSchema),
-});
 const createCustomerCredentials = z.object({
   address: z
     .object({
@@ -99,6 +96,9 @@ const createCustomerCredentials = z.object({
       "Username must contain only alphanumeric characters",
     ),
 });
+export const customersListResponse = z.object({
+  customers: z.array(customersSchema),
+});
 const assignCustomerToCompanySchema = z.object({
   company_ids: z.array(z.string()),
 });

src/lib/api/types/NotificationHistory.ts

@@ -0,0 +1,43 @@
+import { z } from "zod";
+import { createApiResponseSchema } from "./Factory";
+
+export const notificationSchema = z.object({
+  created_at: z.string(),
+  event_type: z.string(),
+  id: z.string(),
+  image: z.string(),
+  is_scheduled: z.boolean(),
+  link: z.string(),
+  message: z.string(),
+  metadata: z.object({
+    additionalProp1: z.string(),
+    additionalProp2: z.string(),
+    additionalProp3: z.string(),
+  }),
+  method: z.object({
+    additionalProp1: z.string(),
+    additionalProp2: z.string(),
+    additionalProp3: z.string(),
+  }),
+  priority: z.string(),
+  schedule_at: z.number(),
+  scheduled_at: z.number(),
+  seen: z.boolean(),
+  seen_at: z.number(),
+  status: z.string(),
+  title: z.string(),
+  type: z.string(),
+  updated_at: z.string(),
+  user_id: z.string(),
+});
+
+const notificationHistoryResponseSchema = createApiResponseSchema(
+  z.object({
+    notifications: z.array(notificationSchema),
+  }),
+);
+export type TNotificationHistory = z.infer<typeof notificationSchema>;
+export type TNotificationDetailsResponse = z.infer<typeof notificationSchema>;
+export type TNotificationHistoryResponse = z.infer<
+  typeof notificationHistoryResponseSchema
+>;

src/utils/shared.ts

@@ -1,11 +1,29 @@
 import * as moment from "moment";
-export const unixToDate = (unix: number) => {
+export const unixToDate = ({
-  return moment.unix(unix).format("YYYY/MM/DD HH:MM");
+  hasTime = false,
+  unix,
+}: {
+  unix: number;
+  hasTime?: boolean;
+}) => {
+  return moment.unix(unix).format(`YYYY/MM/DD ${hasTime && "HH:MM"}`);
 };
 export const msToDate = (ms: number) => {
   return moment.default(ms).format("YYYY/MM/DD");
 };
 
+export const isoStringToDate = ({
+  hasTime = false,
+  isoString,
+}: {
+  isoString: string;
+  hasTime: boolean;
+}): string => {
+  return moment
+    .default(isoString)
+    .format(`YYYY/MM/DD ${hasTime ? "HH:MM" : ""}`);
+};
+
 export const getStatusColor = <T>(status: T) => {
   switch (status) {
     case "active":