```

refactor notifications popover to include unread count, mark all as read button, and loading state
```

002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx

@@ -189,7 +189,15 @@ function NotificationsButton(): React.JSX.Element {
       <Tooltip title="Notifications">
         <Badge
           color="error"
-          sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
+          sx={{
+            '& .MuiBadge-dot': {
+              borderRadius: '50%',
+              right: '6px',
+              top: '6px',
+              height: '10px',
+              width: '10px',
+            },
+          }}
           variant="dot"
         >
           <IconButton

002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx

@@ -25,12 +25,18 @@ import { getUnreadNotificationsByUserId } from '@/db/Notifications/GetUnreadNoti
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
 
+import { NoteBlank as NoteBlankIcon } from '@phosphor-icons/react/dist/ssr/NoteBlank';
+import { Sun as SunIcon } from '@phosphor-icons/react/dist/ssr/Sun';
+import { MarkAllAsReadButton } from './mark-all-as-read-button';
+import { Button } from '@mui/material';
+
 export interface NotificationsPopoverProps {
   anchorEl: null | Element;
   onClose?: () => void;
   onMarkAllAsRead?: () => void;
   onRemoveOne?: (id: string, reload: () => Promise<void>) => void;
   open?: boolean;
+  setListLength: React.Dispatch<React.SetStateAction<number>>;
 }
 
 export function NotificationsPopover({
@@ -39,6 +45,7 @@ export function NotificationsPopover({
   onMarkAllAsRead,
   onRemoveOne,
   open = false,
+  setListLength,
 }: NotificationsPopoverProps): React.JSX.Element {
   const { t } = useTranslation();
   const [notiList, setNotiList] = React.useState<Notification[]>([]);
@@ -53,6 +60,7 @@ export function NotificationsPopover({
       if (user?.id) {
         const tempNotiList: Notification[] = await getUnreadNotificationsByUserId(user.id);
         setNotiList(tempNotiList);
+        setListLength(tempNotiList.length);
       }
     } catch (loadNotiError) {
       logger.error(loadNotiError);
@@ -78,10 +86,60 @@ export function NotificationsPopover({
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         onClose={onClose}
         open={open}
-        slotProps={{ paper: { sx: { width: '380px' } } }}
+        slotProps={{ paper: { sx: { width: 'unset' } } }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
+        >
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'left' }}
+          >
+            <Typography variant="h6">
+              {t('Notifications')} ({notiList.length})
+            </Typography>
+
+            {loading ? (
+              <Typography
+                color="gray"
+                variant="subtitle2"
+              >
+                ({t('loading')})
+              </Typography>
+            ) : (
+              <></>
+            )}
+          </Stack>
+          {/* MarkAllAsReadButton(onMarkAllAsRead, notiList.length <= 0) */}
+          <MarkAllAsReadButton
+            onMarkAllAsRead={onMarkAllAsRead}
+            disabled={notiList.length <= 0}
+          />
+        </Stack>
+
+        <Stack
+          direction="column"
+          spacing={2}
+          sx={{ alignItems: 'center', padding: '50px' }}
+        >
+          <SunIcon
+            size={48}
+            color="lightgray"
+          />
+
+          <Typography
+            color="lightgray"
+            variant={'subtitle2'}
           >
             {t('list-is-empty')}
+          </Typography>
+
+          <Button variant="outlined">{t('refresh')}</Button>
+        </Stack>
       </Popover>
     );
 
@@ -91,7 +149,7 @@ export function NotificationsPopover({
       anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
       onClose={onClose}
       // todo: should not use 'true', fallback to 'open'
-      open
+      open={open}
       slotProps={{ paper: { sx: { width: '380px' } } }}
       transformOrigin={{ horizontal: 'right', vertical: 'top' }}
     >
@@ -105,7 +163,9 @@ export function NotificationsPopover({
           spacing={2}
           sx={{ alignItems: 'left' }}
         >
-          <Typography variant="h6">{t('Notifications')}</Typography>
+          <Typography variant="h6">
+            {t('Notifications')} ({notiList.length})
+          </Typography>
 
           {loading ? (
             <Typography
@@ -118,14 +178,10 @@ export function NotificationsPopover({
             <></>
           )}
         </Stack>
-        <Tooltip title={t('Mark all as read')}>
-          <IconButton
-            edge="end"
-            onClick={onMarkAllAsRead}
-          >
-            <EnvelopeSimpleIcon />
-          </IconButton>
-        </Tooltip>
+        <MarkAllAsReadButton
+          onMarkAllAsRead={onMarkAllAsRead}
+          disabled={notiList.length <= 0}
+        />
       </Stack>
 
       {notiList.length === 0 ? (
@@ -151,3 +207,26 @@ export function NotificationsPopover({
     </Popover>
   );
 }
+
+// TODO: remove me
+// function MarkAllAsReadButton({
+//   onMarkAllAsRead,
+//   disabled,
+// }: {
+//   onMarkAllAsRead: (() => void) | undefined;
+//   disabled: boolean;
+// }): React.JSX.Element {
+//   const { t } = useTranslation();
+
+//   return (
+//     <Tooltip title={t('mark-all-as-read')}>
+//       <IconButton
+//         edge="end"
+//         onClick={onMarkAllAsRead}
+//         disabled={disabled}
+//       >
+//         <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
+//       </IconButton>
+//     </Tooltip>
+//   );
+// }

002_source/cms/src/components/dashboard/layout/notifications-popover/mark-all-as-read-button.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+import { useTranslation } from 'react-i18next';
+
+export function MarkAllAsReadButton({
+  onMarkAllAsRead,
+  disabled,
+}: {
+  onMarkAllAsRead: (() => void) | undefined;
+  disabled: boolean;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={t('mark-all-as-read')}>
+      <IconButton
+        edge="end"
+        onClick={onMarkAllAsRead}
+        disabled={disabled}
+      >
+        <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
+      </IconButton>
+    </Tooltip>
+  );
+}

002_source/cms/src/components/dashboard/layout/vertical/main-nav/notifications-button.tsx

@@ -9,18 +9,60 @@ import { Bell as BellIcon } from '@phosphor-icons/react/dist/ssr/Bell';
 import { usePopover } from '@/hooks/use-popover';
 
 import { NotificationsPopover } from '../../notifications-popover';
+import { logger } from '@/lib/default-logger';
 // import { NotificationsButton } from './notifications-button';
+import { toast } from '@/components/core/toaster';
+import { MarkOneAsRead } from '@/db/Notifications/mark-one-as-read';
+import { getUnreadNotificationsByUserId } from '@/db/Notifications/GetUnreadNotificationsByUserId';
+import { Notification } from '@/db/Notifications/type';
+import { useUser } from '@/hooks/use-user';
 
 export function NotificationsButton(): React.JSX.Element {
   const popover = usePopover<HTMLButtonElement>();
+  const { user } = useUser();
+
+  const [loading, setLoading] = React.useState(true);
+  const [showError, setShowError] = React.useState<boolean>(false);
+  const [listLength, setListLength] = React.useState<number>(0);
+
+  const [notiList, setNotiList] = React.useState<Notification[]>([]);
+
+  function handleMarkAllAsRead(): void {
+    // try {
+    //   await MarkOneAsRead(id);
+    //   toast.success('Notification marked as read');
+    // } catch (error) {
+    //   logger.debug(error);
+    //   toast.error('Something went wrong');
+    // }
+  }
+
+  function handleRemoveOne(id: string, cb: () => void): void {
+    MarkOneAsRead(id)
+      .then(() => {
+        toast.success('Notification marked as read');
+        cb();
+      })
+      .catch((error) => {
+        logger.debug(error);
+        toast.error('Something went wrong');
+      });
+  }
 
   return (
     <React.Fragment>
       <Tooltip title="Notifications">
         <Badge
           color="error"
-          sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
-          variant="dot"
+          sx={{
+            '& .MuiBadge-badge': {
+              height: '20px',
+              width: '20px',
+              right: '6px',
+              top: '6px',
+            },
+          }}
+          badgeContent={listLength}
         >
           <IconButton
             onClick={popover.handleOpen}
@@ -30,10 +72,14 @@ export function NotificationsButton(): React.JSX.Element {
           </IconButton>
         </Badge>
       </Tooltip>
+      {/*  */}
       <NotificationsPopover
         anchorEl={popover.anchorRef.current}
         onClose={popover.handleClose}
         open={popover.open}
+        onMarkAllAsRead={handleMarkAllAsRead}
+        onRemoveOne={handleRemoveOne}
+        setListLength={setListLength}
       />
     </React.Fragment>
   );

002_source/cms/src/db/Notifications/GetNotificationByUserId.tsx

@@ -1,14 +1,18 @@
 //
 // RULES:
 // api method for get notifications by user id
-import { pb } from '@/lib/pb';
 import { COL_NOTIFICATIONS } from '@/constants';
+
+import { pb } from '@/lib/pb';
+
 import type { Notification } from './type.d';
 
 export async function getNotificationsByUserId(userId: string): Promise<Notification[]> {
   const records = await pb.collection(COL_NOTIFICATIONS).getFullList({
-    filter: `author.id = "000000000000001"`,
+    expand: 'author, to_user_id',
+    filter: `to_user_id.id = "${userId}"`,
     sort: '-created',
   });
+
   return records as unknown as Notification[];
 }

002_source/cms/src/db/Notifications/GetUnreadNotificationsByUserId.tsx

@@ -0,0 +1,20 @@
+//
+// RULES:
+// api method for get notifications by user id
+import { COL_NOTIFICATIONS } from '@/constants';
+
+import { pb } from '@/lib/pb';
+
+import type { Notification } from './type.d';
+
+export async function getUnreadNotificationsByUserId(userId: string): Promise<Notification[]> {
+  const records = await pb.collection(COL_NOTIFICATIONS).getFullList({
+    expand: 'author, to_user_id',
+    filter: `to_user_id.id = "${userId}" && read = false`,
+    sort: '-created',
+    cache: 'no-cache',
+    requestKey: null,
+  });
+
+  return records as unknown as Notification[];
+}

002_source/cms/src/db/Notifications/mark-one-as-read.tsx

@@ -0,0 +1,11 @@
+// api method for update notification record
+// RULES:
+// TBA
+import { pb } from '@/lib/pb';
+import { COL_NOTIFICATIONS } from '@/constants';
+import type { RecordModel } from 'pocketbase';
+import type { NotificationFormProps } from '@/components/dashboard/notification/type.d';
+
+export async function MarkOneAsRead(id: string): Promise<RecordModel> {
+  return pb.collection(COL_NOTIFICATIONS).update(id, { read: true });
+}

002_source/cms/src/db/Notifications/type.d.ts

@@ -1,17 +1,21 @@
 'use client';
 
+import type { User } from '@/types/user';
+
 export type SortDir = 'asc' | 'desc';
 
 export interface Notification {
   id: string;
+  created: string;
+  createdAt: Date;
   read: boolean;
   type: string;
-  author: Record<string, unknown>;
-  job: Record<string, unknown>;
-  description: string;
-  NOTI_ID: string;
-  created: string;
-  updated: string;
+  author?: User;
+  job?: { title: string };
+  description?: string;
+  company?: { name: string };
+  to_user_id?: User;
+  link: string;
 }
 
 export interface CreateFormProps {