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/hooks/queries/useCustomerQueries.ts

@@ -124,6 +124,9 @@ export const useUpdateCustomer = (id: string) => {
       queryClient.invalidateQueries({
         queryKey: [API_ENDPOINTS.CUSTOMERS.READ_ALL],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["GET ALL CUSTOMERS", id],
+      });
       router.push("/customers");
     },
   });

src/hooks/queries/useNotificationQueries.ts

@@ -28,18 +28,11 @@ export const useGetMyNotifications = (params?: Record<string, any>) => {
     queryFn: () => notificationService.getMyNotifications(params),
   });
 };
-export const useMarkNotificationAsSeen = (
-  id: string,
-  successCallback?: () => void,
-) => {
+export const useMarkNotificationAsSeen = (successCallback?: () => void) => {
   const queryClient = useQueryClient();
-  const mutationKey = useMemo(
-    () => [API_ENDPOINTS.NOTIFICATIONS.MARK_AS_SEEN(id), id],
-    [id],
-  );
   return useMutation({
-    mutationKey,
-    mutationFn: () => notificationService.markNotificationAsSeen(id),
+    mutationKey: ["MARK_NOTIFICATION_AS_SEEN"],
+    mutationFn: (id: string) => notificationService.markNotificationAsSeen(id),
     onSuccess: () => {
       if (successCallback) {
         successCallback();