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