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.

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>