Ref: modification components in selfcheckout

package/components/organisms/Navbar.tsx

@@ -1,17 +1,23 @@
 "use client";
 import LanguageIcon from '@mui/icons-material/Language';
+import MoreVertIcon from "@mui/icons-material/MoreVert"; // Botón de 3 puntos verticales
+import { Typography } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { useAtom } from 'jotai';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import UserAtom from '@atoms/states/UserAtom';
 import i18n from '@package/utils/language/i18n';
 
 const Navbar: React.FC = () => {
   const { t } = useTranslation();
   const [language, setLanguage] = useState(i18n.language || 'en');
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [user] = useAtom(UserAtom);
+  const [currentDateTime, setCurrentDateTime] = useState<Date | null>(null);
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
@@ -29,8 +35,29 @@ const Navbar: React.FC = () => {
 
   useEffect(() => {
     setLanguage(i18n.language);
+    const interval = setInterval(() => {
+      setCurrentDateTime(new Date());
+    }, 60000);
+
+    setCurrentDateTime(new Date());
+
+    return () => clearInterval(interval);
   }, []);
 
+  const formattedDate = currentDateTime
+    ? currentDateTime.toLocaleDateString(undefined, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+      })
+    : '';
+  const formattedTime = currentDateTime
+    ? currentDateTime.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+    : '';
+
   return (
     <Grid
       container
@@ -39,10 +66,21 @@ const Navbar: React.FC = () => {
       className="bg-blue-600 text-white p-4"
     >
       <Grid>
-        <h1 className="text-white font-bold">{t('lbl_wellcome')}</h1>
+        <h1 className="text-white font-bold">
+          {user ? `${t('lbl_wellcome')} ${user.name} ${user.lastName}` : t('lbl_wellcome')}
+        </h1>
       </Grid>
+
       <Grid>
-        {/* IconButton with globe icon to open language menu */}
+        <Typography variant="body2" color="text.secondary" className="text-white">
+          {formattedDate} - {formattedTime}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" className="text-white">
+          {t("lbl_Store")}: <strong>8004</strong> | {t("lbl_register")}: <strong>317</strong>
+        </Typography>
+      </Grid>
+
+      <Grid container alignItems="center">
         <IconButton
           aria-controls="language-menu"
           aria-haspopup="true"
@@ -60,6 +98,17 @@ const Navbar: React.FC = () => {
           <MenuItem onClick={() => changeLanguage('en')}>English</MenuItem>
           <MenuItem onClick={() => changeLanguage('es')}>Español</MenuItem>
         </Menu>
+
+        {/* Botón de 3 puntos verticales */}
+        <IconButton
+          size="small"
+          className="text-white ml-4"
+          onClick={() => {
+            console.log('Menú de opciones abierto');
+          }}
+        >
+          <MoreVertIcon />
+        </IconButton>
       </Grid>
     </Grid>
   );