feat(ui): add tooltips to action icons in admins table

This commit introduces the `react-tooltip` library to improve user interface clarity and provide a better user experience.

Tooltips have been added to the action icons (Edit, Delete, Change Status) in the Admins table. This provides users with clear, on-hover information about the function of each icon, enhancing usability and reducing ambiguity.

The implementation involved:
- Adding `react-tooltip` as a project dependency.
- Importing the required CSS in the root layout.
- Integrating the `Tooltip` component within the Admins table.

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/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/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

@@ -2,6 +2,7 @@
 import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import { Switch } from "@/components/FormElements/switch";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import IsVisible from "@/components/ui/IsVisible";
 import {
   Table,
@@ -14,6 +15,7 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { unixToDate } from "@/utils/shared";
 import Link from "next/link";
+import { Tooltip } from "react-tooltip";
 import { Skeleton } from "../../../ui/skeleton";
 import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
 
@@ -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

@@ -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,
@@ -17,6 +18,7 @@ import Modal from "@/components/ui/modal";
 import Status from "@/components/ui/Status";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { unixToDate } from "@/utils/shared";
+import { Tooltip } from "react-tooltip";
 import { toast } from "react-toastify";
 import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
 
@@ -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/notification-history/index.tsx

@@ -2,6 +2,8 @@
 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,
@@ -73,10 +75,18 @@ const NotificationHistoryTable = () => {
                 </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>

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/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;
 }