Update validation, dll Hospital-Portal

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

@@ -1,28 +1,24 @@
-import { useState } from 'react';
+import React, { useState, useContext } from 'react';
 // @mui
-import { MenuItem, Stack } from '@mui/material';
+import { ButtonBase, Box, Typography, MenuItem, Stack } from '@mui/material';
 // components
 import Image from '@/components/Image';
 import MenuPopover from '@/components/MenuPopover';
 import { IconButtonAnimate } from '@/components/animate';
+import { LanguageContext } from '@/contexts/LanguageContext';
 
 // ----------------------------------------------------------------------
 
 const LANGS = [
+  {
+    label: 'Bahasa Indonesia',
+    value: 'id-ID',
+    icon: '/icons/ic_flag_id.svg',
+  },
   {
     label: 'English',
-    value: 'en',
-    icon: 'https://minimal-assets-api.vercel.app/assets/icons/ic_flag_en.svg',
-  },
-  {
-    label: 'German',
-    value: 'de',
-    icon: 'https://minimal-assets-api.vercel.app/assets/icons/ic_flag_de.svg',
-  },
-  {
-    label: 'French',
-    value: 'fr',
-    icon: 'https://minimal-assets-api.vercel.app/assets/icons/ic_flag_fr.svg',
+    value: 'en-US',
+    icon: '/icons/ic_flag_en.svg',
   },
 ];
 
@@ -39,18 +35,34 @@ export default function LanguagePopover() {
     setOpen(null);
   };
 
+  const { setCurrentLocale } = useContext(LanguageContext);
+  const handleChangeLanguage = (language) => {
+    localStorage.setItem('currentLocale', language);
+    setCurrentLocale(language);
+  };
+
   return (
     <>
-      <IconButtonAnimate
-        onClick={handleOpen}
-        sx={{
-          width: 40,
-          height: 40,
-          ...(open && { bgcolor: 'action.selected' }),
-        }}
-      >
-        <Image disabledEffect src={LANGS[0].icon} alt={LANGS[0].label} />
-      </IconButtonAnimate>
+      <Box display="flex" alignItems="center" border={0} borderColor="grey.300" borderRadius={3} p={1}>
+        
+          <IconButtonAnimate
+          onClick={handleOpen}
+            sx={{
+              width: 35,
+              height: 35,
+              ...(open && { bgcolor: 'action.selected' }),
+            }}
+          >
+            <Image disabledEffect src={!localStorage.getItem('currentLocale') ? LANGS[0].icon : (localStorage.getItem('currentLocale') === 'id-ID' ? LANGS[0].icon : LANGS[1].icon)} alt={!localStorage.getItem('currentLocale') ? LANGS[0].label : (localStorage.getItem('currentLocale') === 'id-ID' ? LANGS[0].label : LANGS[1].label)} />
+          </IconButtonAnimate>
+        
+
+        <ButtonBase onClick={handleOpen}>
+          <Typography variant="body2" component="span" marginRight={1} color="textPrimary">
+            Language
+          </Typography>
+        </ButtonBase>
+      </Box>
 
       <MenuPopover
         open={Boolean(open)}
@@ -67,17 +79,22 @@ export default function LanguagePopover() {
           {LANGS.map((option) => (
             <MenuItem
               key={option.value}
-              selected={option.value === LANGS[0].value}
-              onClick={handleClose}
+              selected={option.value === localStorage.getItem('currentLocale')}
+              onClick = {() => {
+                handleClose();
+                handleChangeLanguage(option.value);
+              }}
             >
               <Image
                 disabledEffect
                 alt={option.label}
                 src={option.icon}
-                sx={{ width: 28, mr: 2 }}
+                sx={{ width: 28 }}
               />
 
+              <Typography variant="body2" component="span" marginLeft={1} color="textPrimary">
               {option.label}
+              </Typography>
             </MenuItem>
           ))}
         </Stack>

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

@@ -93,8 +93,8 @@ export default function DashboardHeader({
 
         <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 1.5 }}>
           <LanguagePopover />
-          <NotificationsPopover />
-          <ContactsPopover />
+          {/*<NotificationsPopover />
+          <ContactsPopover />*/}
           <AccountPopover />
         </Stack>
       </Toolbar>