Update

frontend/hospital-portal/public/lang/en-US.json

@@ -40,5 +40,10 @@
   "txtProvider": "Provider",
   "txtAlertProvider" : "Please enter provider",
   "txtHelp" : "Need help?",
-  "txtContactUs" : "Contact Us"
+  "txtContactUs" : "Contact Us",
+  "txtNotifications" : "Notifications",
+  "txtYouHave" : "You have",
+  "txtUnm" : "unread messages",
+  "txtNew" : "New",
+  "txtBeforeThat" : "Before that"
 }

frontend/hospital-portal/public/lang/id-ID.json

@@ -40,5 +40,10 @@
   "txtProvider": "Provider",
   "txtAlertProvider" : "Mohon masukan provider",
   "txtHelp" : "Butuh Bantuan?",
-  "txtContactUs" : "Kontak Kami"
+  "txtContactUs" : "Kontak Kami",
+  "txtNotifications" : "Notifikasi",
+  "txtYouHave" : "Anda memiliki",
+  "txtUnm" : "pesan yang belum dibaca",
+  "txtNew" : "Baru",
+  "txtBeforeThat" : "Sebelum"
 }

frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx

@@ -1,5 +1,5 @@
 import { noCase } from 'change-case';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 // @mui
 import {
   Box,
@@ -27,10 +27,12 @@ import MenuPopover from '@/components/MenuPopover';
 import { IconButtonAnimate } from '@/components/animate';
 import axios from '@/utils/axios';
 import { useSnackbar } from 'notistack';
+import { LanguageContext } from '@/contexts/LanguageContext';
 
 // ----------------------------------------------------------------------
 
 export default function NotificationsPopover() {
+  const { localeData }: any =  useContext(LanguageContext);
   const [notifications, setNotifications] = useState([]);
   const {enqueueSnackbar} = useSnackbar();
   const getDataNotifications = async () => {
@@ -88,9 +90,9 @@ export default function NotificationsPopover() {
       >
         <Box sx={{ display: 'flex', alignItems: 'center', py: 2, px: 2.5 }}>
           <Box sx={{ flexGrow: 1 }}>
-            <Typography variant="subtitle1">Notifications</Typography>
+            <Typography variant="subtitle1">{localeData.txtNotifications}</Typography>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              You have {totalUnRead} unread messages
+              {localeData.txtYouHave} {totalUnRead} {localeData.txtUnm}
             </Typography>
           </Box>
 
@@ -112,7 +114,7 @@ export default function NotificationsPopover() {
                 disablePadding
                 subheader={
                   <ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
-                    New
+                    {localeData.txtNew}
                   </ListSubheader>
                 }
               >
@@ -125,7 +127,7 @@ export default function NotificationsPopover() {
                 disablePadding
                 subheader={
                   <ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
-                    Before that
+                    {localeData.txtBeforeThat}
                   </ListSubheader>
                 }
               >