update,

03_source/frontend/src/components/hook-form/rhf-upload.tsx

@@ -1,7 +1,9 @@
 import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
 import { Controller, useFormContext } from 'react-hook-form';
-import { Upload } from '../upload';
+import { Upload, UploadAvatar, UploadBox } from '../upload';
 import type { UploadProps } from '../upload';
+import { HelperText } from './help-text';
 
 // ----------------------------------------------------------------------
 
@@ -12,6 +14,48 @@ export type RHFUploadProps = UploadProps & {
   };
 };
 
+export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
+  const { control, setValue } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => {
+        const onDrop = (acceptedFiles: File[]) => {
+          const value = acceptedFiles[0];
+
+          setValue(name, value, { shouldValidate: true });
+        };
+
+        return (
+          <Box {...slotProps?.wrapper}>
+            <UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
+
+            <HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
+          </Box>
+        );
+      }}
+    />
+  );
+}
+
+// ----------------------------------------------------------------------
+
+export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <UploadBox value={field.value} error={!!error} {...other} />
+      )}
+    />
+  );
+}
+
 // ----------------------------------------------------------------------
 
 export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadProps) {
@@ -35,8 +79,6 @@ export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadPro
           setValue(name, value, { shouldValidate: true });
         };
 
-        // return <>{JSON.stringify({ t: field.value })}</>;
-
         return <Upload {...uploadProps} value={field.value} onDrop={onDrop} {...other} />;
       }}
     />

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

@@ -2,11 +2,11 @@ import Collapse from '@mui/material/Collapse';
 import { useTheme } from '@mui/material/styles';
 import { useBoolean } from 'minimal-shared/hooks';
 import { mergeClasses } from 'minimal-shared/utils';
+import { useTranslation } from 'react-i18next';
 import { Nav, NavLi, NavSubheader, NavUl } from '../components';
 import { navSectionClasses, navSectionCssVars } from '../styles';
 import type { NavGroupProps, NavSectionProps } from '../types';
 import { NavList } from './nav-list';
-import { useTranslation } from 'react-i18next';
 
 // ----------------------------------------------------------------------
 
@@ -26,7 +26,11 @@ export function NavSectionVertical({
   const cssVars = { ...navSectionCssVars.vertical(theme), ...overridesVars };
 
   return (
-    <Nav className={mergeClasses([navSectionClasses.vertical, className])} sx={[{ ...cssVars }, ...(Array.isArray(sx) ? sx : [sx])]} {...other}>
+    <Nav
+      className={mergeClasses([navSectionClasses.vertical, className])}
+      sx={[{ ...cssVars }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...other}
+    >
       <NavUl sx={{ flex: '1 1 auto', gap: 'var(--nav-item-gap)' }}>
         {data.map((group) => (
           <Group
@@ -46,7 +50,14 @@ export function NavSectionVertical({
 
 // ----------------------------------------------------------------------
 
-function Group({ items, render, subheader, slotProps, checkPermissions, enabledRootRedirect }: NavGroupProps) {
+function Group({
+  items,
+  render,
+  subheader,
+  slotProps,
+  checkPermissions,
+  enabledRootRedirect,
+}: NavGroupProps) {
   const groupOpen = useBoolean(true);
   const { t } = useTranslation();
 
@@ -70,9 +81,15 @@ function Group({ items, render, subheader, slotProps, checkPermissions, enabledR
     <NavLi>
       {subheader ? (
         <>
-          <NavSubheader data-title={subheader} open={groupOpen.value} onClick={groupOpen.onToggle} sx={slotProps?.subheader}>
-            {t(subheader)}
+          <NavSubheader
+            data-title={subheader}
+            open={groupOpen.value}
+            onClick={groupOpen.onToggle}
+            sx={slotProps?.subheader}
+          >
+            {subheader}
           </NavSubheader>
+
           <Collapse in={groupOpen.value}>{renderContent()}</Collapse>
         </>
       ) : (