update,

03_source/frontend/src/components/custom-dialog/confirm-dialog.tsx

@@ -5,17 +5,13 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 
 import type { ConfirmDialogProps } from './types';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
-export function ConfirmDialog({
-  open,
-  title,
-  action,
-  content,
-  onClose,
-  ...other
-}: ConfirmDialogProps) {
+export function ConfirmDialog({ open, title, action, content, onClose, ...other }: ConfirmDialogProps) {
+  const { t } = useTranslation();
+
   return (
     <Dialog fullWidth maxWidth="xs" open={open} onClose={onClose} {...other}>
       <DialogTitle sx={{ pb: 2 }}>{title}</DialogTitle>
@@ -26,7 +22,7 @@ export function ConfirmDialog({
         {action}
 
         <Button variant="outlined" color="inherit" onClick={onClose}>
-          Cancel
+          {t('Cancel')}
         </Button>
       </DialogActions>
     </Dialog>

03_source/frontend/src/components/mega-menu/components/nav-sub-list.tsx

@@ -11,24 +11,20 @@ import { megaMenuClasses } from '../styles';
 import { NavUl, NavLi } from './nav-elements';
 
 import type { NavSubItemProps, NavSubListProps } from '../types';
+import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
 export function NavSubList({ data, slotProps, ...other }: NavSubListProps) {
   const pathname = usePathname();
+  const { t } = useTranslation();
 
   return (
     <>
       {data?.map((list) => (
         <NavLi key={list?.subheader ?? list.items[0].title} {...other}>
           {list?.subheader && (
-            <Typography
-              noWrap
-              component="div"
-              variant="subtitle2"
-              className={megaMenuClasses.subheader}
-              sx={{ mb: 1, ...slotProps?.subheader }}
-            >
+            <Typography noWrap component="div" variant="subtitle2" className={megaMenuClasses.subheader} sx={{ mb: 1, ...slotProps?.subheader }}>
               {list.subheader}
             </Typography>
           )}

03_source/frontend/src/components/nav-section/components/nav-subheader.tsx

@@ -13,16 +13,8 @@ import { Iconify, iconifyClasses } from '../../iconify';
 export type NavSubheaderProps = ListSubheaderProps & { open?: boolean };
 
 export const NavSubheader = styled(({ open, children, className, ...other }: NavSubheaderProps) => (
-  <ListSubheader
-    disableSticky
-    component="div"
-    {...other}
-    className={mergeClasses([navSectionClasses.subheader, className])}
-  >
-    <Iconify
-      width={16}
-      icon={open ? 'eva:arrow-ios-downward-fill' : 'eva:arrow-ios-forward-fill'}
-    />
+  <ListSubheader disableSticky component="div" {...other} className={mergeClasses([navSectionClasses.subheader, className])}>
+    <Iconify width={16} icon={open ? 'eva:arrow-ios-downward-fill' : 'eva:arrow-ios-forward-fill'} />
     {children}
   </ListSubheader>
 ))(({ theme }) => ({

03_source/frontend/src/components/nav-section/horizontal/nav-section-horizontal.tsx

@@ -27,10 +27,7 @@ export function NavSectionHorizontal({
   const cssVars = { ...navSectionCssVars.horizontal(theme), ...overridesVars };
 
   return (
-    <Scrollbar
-      sx={{ height: 1 }}
-      slotProps={{ contentSx: { height: 1, display: 'flex', alignItems: 'center' } }}
-    >
+    <Scrollbar sx={{ height: 1 }} slotProps={{ contentSx: { height: 1, display: 'flex', alignItems: 'center' } }}>
       <Nav
         className={mergeClasses([navSectionClasses.horizontal, className])}
         sx={[
@@ -66,14 +63,7 @@ export function NavSectionHorizontal({
 
 // ----------------------------------------------------------------------
 
-function Group({
-  items,
-  render,
-  cssVars,
-  slotProps,
-  checkPermissions,
-  enabledRootRedirect,
-}: NavGroupProps) {
+function Group({ items, render, cssVars, slotProps, checkPermissions, enabledRootRedirect }: NavGroupProps) {
   return (
     <NavLi>
       <NavUl sx={{ flexDirection: 'row', gap: 'var(--nav-item-gap)' }}>