feat(notification): enhance NotificationDetailsPage and Notification component with improved UI and functionality

- Refactored NotificationDetailsPage to utilize a presenter hook for better state management and loading handling.
- Improved UI elements in NotificationDetailsPage, including a hero header and detail grid for displaying notification information.
- Updated Notification component to streamline the marking of notifications as seen and enhance the display of notification details.
- Added gradient backgrounds and improved tooltip functionality for better visual feedback and user experience.

src/components/Tables/customers/index.tsx

@@ -206,7 +206,6 @@ const CustomersTable = () => {
                             setIsModalOpen(true);
                           }}
                         >
-                          <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                           <span className="sr-only">Delete Company </span>
                           <TrashIcon />
                         </button>
@@ -219,7 +218,6 @@ const CustomersTable = () => {
                             router.push(`${pathName}/edit/${customer.id}`)
                           }
                         >
-                          <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                           <span className="sr-only">Edit Company </span>
                           <PencilSquareIcon />
                         </button>
@@ -237,9 +235,6 @@ const CustomersTable = () => {
                             });
                           }}
                         >
-                          <Tooltip
-                            {..._TooltipDefaultParams({ id: "assign-company" })}
-                          />
                           <span className="sr-only">Assign To Company </span>
                           <Building />
                         </button>
@@ -253,11 +248,6 @@ const CustomersTable = () => {
                             openResetPasswordModalForCustomer(customer)
                           }
                         >
-                          <Tooltip
-                            {..._TooltipDefaultParams({
-                              id: "reset-password",
-                            })}
-                          />
                           <span className="sr-only">
                             Reset Customer Password
                           </span>
@@ -272,7 +262,6 @@ const CustomersTable = () => {
                             router.push(`${pathName}/feedback/${customer.id}`);
                           }}
                         >
-                          <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
                           <ExclamationIcon />
                         </button>
                       </div>
@@ -346,6 +335,11 @@ const CustomersTable = () => {
           onCancel={() => setIsModalOpen(false)}
         />
       )}
+      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
+      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
+      <Tooltip {..._TooltipDefaultParams({ id: "assign-company" })} />
+      <Tooltip {..._TooltipDefaultParams({ id: "reset-password" })} />
+      <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
     </ListWrapper>
   );
 };