notification + change call back and ...

src/pages/notification/Notification.tsx

@@ -12,19 +12,22 @@ import InfiniteScroll from 'react-infinite-scroll-component';
 import MoonLoader from "react-spinners/MoonLoader"
 import Button from '../../components/Button';
 import { toast } from 'react-toastify';
+import { useGetDashboardSummary } from '../home/hooks/useHomeData';
 
 const Notifications: FC = () => {
     const { t } = useTranslation('global');
     const ref = useOutsideClick(() => setShowModal(false));
     const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all');
     const [showModal, setShowModal] = useState<boolean>(false);
-    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification();
+    const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
     const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
+    const getDashboard = useGetDashboardSummary()
 
     const handleAllRead = () => {
         readAll.mutate(undefined, {
             onSuccess: () => {
+                getDashboard.refetch()
                 refetch()
                 toast.success(t('success'))
             }
@@ -33,7 +36,12 @@ const Notifications: FC = () => {
 
     return (
         <div ref={ref}>
-            <Notification onClick={() => setShowModal(!showModal)} size={18} color="black" />
+            <div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
+                <Notification size={18} color="black" />
+                <div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex justify-center items-center">
+                    {getDashboard.data?.data?.notificationCount}
+                </div>
+            </div>
 
             {showModal && (
                 <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">