@digitaldefiance/express-suite-react-components 2.9.1 → 2.9.2

package/src/components/RegisterForm.tsx

@@ -0,0 +1,354 @@
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  InputLabel,
+  Link,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { SuiteCoreComponentId, SuiteCoreStringKey, Constants } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface RegisterFormValues {
+  username: string;
+  email: string;
+  timezone: string;
+  password?: string;
+  confirmPassword?: string;
+  [key: string]: any;
+}
+
+export interface RegisterFormProps {
+  onSubmit: (values: RegisterFormValues, usePassword: boolean) => Promise<
+    | { success: boolean; message: string; mnemonic?: string }
+    | { error: string; errorType?: string; field?: string; errors?: Array<{ path: string; msg: string }> }
+  >;
+  timezones: string[];
+  getInitialTimezone: () => string;
+  usernameValidation?: Yup.StringSchema;
+  emailValidation?: Yup.StringSchema;
+  timezoneValidation?: Yup.StringSchema;
+  passwordValidation?: Yup.StringSchema;
+  confirmPasswordValidation?: Yup.StringSchema;
+  additionalFields?: (formik: any, usePassword: boolean) => React.ReactNode;
+  additionalInitialValues?: Record<string, any>;
+  additionalValidation?: Record<string, Yup.Schema>;
+  labels?: {
+    title?: string;
+    username?: string;
+    email?: string;
+    timezone?: string;
+    password?: string;
+    confirmPassword?: string;
+    useMnemonic?: string;
+    usePassword?: string;
+    registering?: string;
+    register?: string;
+    successTitle?: string;
+    mnemonicSuccess?: string;
+    proceedToLogin?: string;
+    loginLink?: string;
+  };
+}
+
+export const RegisterForm: FC<RegisterFormProps> = ({
+  onSubmit,
+  timezones,
+  getInitialTimezone,
+  usernameValidation,
+  emailValidation,
+  timezoneValidation,
+  passwordValidation,
+  confirmPasswordValidation,
+  additionalFields,
+  additionalInitialValues = {},
+  additionalValidation = {},
+  labels = {},
+}) => {
+  const { t, tComponent } = useI18n();
+  const [apiErrors, setApiErrors] = useState<Record<string, string>>({});
+  const [mnemonic, setMnemonic] = useState<string | null>(null);
+  const [usePassword, setUsePassword] = useState(true);
+  const [registrationSuccess, setRegistrationSuccess] = useState(false);
+  const [registering, setRegistering] = useState(false);
+
+  const validation = {
+    username: usernameValidation || Yup.string()
+      .min(Constants.UsernameMinLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameMinLengthTemplate))
+      .max(Constants.UsernameMaxLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameMaxLengthTemplate))
+      .matches(Constants.UsernameRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    email: emailValidation || Yup.string()
+      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    timezone: timezoneValidation || Yup.string()
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_TimezoneRequired))
+      .oneOf(timezones, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_TimezoneInvalid)),
+    password: passwordValidation || Yup.string()
+      .matches(Constants.PasswordRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate))
+      .min(8, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMinLengthTemplate))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    confirmPassword: confirmPasswordValidation || Yup.string()
+      .oneOf([Yup.ref('password')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+  };
+
+  const formik = useFormik<RegisterFormValues>({
+    initialValues: {
+      username: '',
+      email: '',
+      timezone: getInitialTimezone(),
+      password: '',
+      confirmPassword: '',
+      directChallenge: false,
+      ...additionalInitialValues,
+    },
+    enableReinitialize: true,
+    validationSchema: Yup.object({
+      username: validation.username,
+      email: validation.email,
+      timezone: validation.timezone,
+      ...(usePassword
+        ? {
+            password: validation.password,
+            confirmPassword: validation.confirmPassword,
+          }
+        : {}),
+      ...additionalValidation,
+    }),
+    onSubmit: async (values, { setSubmitting, setFieldError, setTouched }) => {
+      setRegistering(true);
+      const registerResult = await onSubmit(values, usePassword);
+      
+      if ('success' in registerResult && registerResult.success) {
+        setRegistrationSuccess(true);
+        if (!usePassword && registerResult?.mnemonic) {
+          setMnemonic(registerResult.mnemonic);
+        }
+      } else {
+        setRegistrationSuccess(false);
+        const newApiErrors: Record<string, string> = {};
+        const fieldsToTouch: Record<string, boolean> = {};
+
+        if ('field' in registerResult && registerResult.field) {
+          setFieldError(registerResult.field, registerResult.error);
+          fieldsToTouch[registerResult.field] = true;
+        }
+
+        if ('errors' in registerResult && registerResult.errors) {
+          registerResult.errors.forEach((err) => {
+            if (err.path && err.msg) {
+              setFieldError(err.path, err.msg);
+              fieldsToTouch[err.path] = true;
+            }
+          });
+        }
+
+        if ('error' in registerResult && registerResult.error && !Object.keys(newApiErrors).length) {
+          newApiErrors.general = registerResult.error;
+        }
+
+        setApiErrors(newApiErrors);
+        setTouched(fieldsToTouch, false);
+      }
+      setSubmitting(false);
+      setRegistering(false);
+      setApiErrors({});
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ mt: 8, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          {labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Registration)}
+        </Typography>
+
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          <TextField
+            fullWidth
+            id="username"
+            name="username"
+            label={labels.username || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Username)}
+            value={formik.values.username}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.username && (formik.errors.username || apiErrors.username))}
+            helperText={formik.touched.username && (formik.errors.username || apiErrors.username)}
+            margin="normal"
+          />
+          <TextField
+            fullWidth
+            id="email"
+            name="email"
+            label={labels.email || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email)}
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.email && (formik.errors.email || apiErrors.email))}
+            helperText={formik.touched.email && (formik.errors.email || apiErrors.email)}
+            margin="normal"
+          />
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="timezone-label">{labels.timezone || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Timezone)}</InputLabel>
+            <Select
+              labelId="timezone-label"
+              id="timezone"
+              name="timezone"
+              value={formik.values.timezone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={formik.touched.timezone && Boolean(formik.errors.timezone)}
+              label={labels.timezone || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Timezone)}
+            >
+              {timezones.map((tz) => (
+                <MenuItem key={tz} value={tz}>
+                  {tz}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.timezone && (formik.errors.timezone || apiErrors.timezone) && (
+              <Typography color="error" variant="caption">
+                {formik.errors.timezone || apiErrors.timezone}
+              </Typography>
+            )}
+          </FormControl>
+
+          <Box sx={{ display: 'flex', alignItems: 'center', mt: 2 }}>
+            <Button variant="text" onClick={() => setUsePassword(!usePassword)}>
+              {usePassword 
+                ? labels.useMnemonic || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UseMnemonic)
+                : labels.usePassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UsePassword)}
+            </Button>
+          </Box>
+
+          {usePassword && (
+            <>
+              <TextField
+                fullWidth
+                id="password"
+                name="password"
+                label={labels.password || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Password)}
+                type="password"
+                value={formik.values.password}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={Boolean(formik.touched.password && formik.errors.password)}
+                helperText={formik.touched.password && formik.errors.password}
+                margin="normal"
+              />
+              <TextField
+                fullWidth
+                id="confirmPassword"
+                name="confirmPassword"
+                label={labels.confirmPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword)}
+                type="password"
+                value={formik.values.confirmPassword}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
+                helperText={formik.touched.confirmPassword && formik.errors.confirmPassword}
+                margin="normal"
+              />
+            </>
+          )}
+
+          <FormControl fullWidth margin="normal">
+            <FormControlLabel
+              control={
+                <Checkbox
+                  id="directChallenge"
+                  name="directChallenge"
+                  checked={formik.values.directChallenge || false}
+                  onChange={formik.handleChange}
+                />
+              }
+              label={tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_DirectChallengeLabel)}
+            />
+            <FormHelperText>
+              {tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_DirectChallengeHelper)}
+            </FormHelperText>
+          </FormControl>
+
+          {additionalFields && additionalFields(formik, usePassword)}
+
+          {apiErrors.general && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiErrors.general}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {registering 
+              ? labels.registering || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_Registering)
+              : labels.register || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_RegisterButton)}
+          </Button>
+
+          {registering && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2, whiteSpace: 'pre-wrap' }}>
+              <AlertTitle>{labels.registering || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_Registering)}</AlertTitle>
+              <Typography variant="body2" component="div">
+                {tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_RegisteringMessage)}
+              </Typography>
+            </Alert>
+          )}
+
+          {mnemonic && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2, whiteSpace: 'pre-wrap' }}>
+              <AlertTitle>{labels.successTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_SuccessTitle)}</AlertTitle>
+              <Typography variant="body2" component="div">
+                {labels.mnemonicSuccess || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_MnemonicSuccess)}
+                <Typography variant="body1" component="div" sx={{ mt: 1, fontFamily: 'monospace' }}>
+                  {mnemonic}
+                </Typography>
+                <Box sx={{ textAlign: 'center' }}>
+                  <Link href="/login">{labels.proceedToLogin || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ProceedToLogin)}</Link>
+                </Box>
+              </Typography>
+            </Alert>
+          )}
+
+          {registrationSuccess && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              <AlertTitle>{labels.successTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_SuccessTitle)}</AlertTitle>
+              <Typography variant="body2" component="div">
+                {tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_Success)}
+                <Box sx={{ textAlign: 'center' }}>
+                  <Link href="/login">{labels.proceedToLogin || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ProceedToLogin)}</Link>
+                </Box>
+              </Typography>
+            </Alert>
+          )}
+          {!mnemonic && !registrationSuccess && (
+            <Box sx={{ textAlign: 'center' }}>
+              <Link href="/login" variant="body2">
+                {labels.loginLink || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Registration_LoginLink)}
+              </Link>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default RegisterForm;

package/src/components/ResetPasswordForm.tsx

@@ -0,0 +1,164 @@
+import { Alert, Box, Button, Container, TextField, Typography } from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface ResetPasswordFormValues {
+  password: string;
+  confirmPassword: string;
+}
+
+export interface ResetPasswordFormProps {
+  token: string | null;
+  onSubmit: (token: string, password: string) => Promise<void>;
+  passwordValidation?: Yup.StringSchema;
+  confirmPasswordValidation?: Yup.StringSchema;
+  labels?: {
+    title?: string;
+    password?: string;
+    confirmPassword?: string;
+    resetButton?: string;
+    successMessage?: string;
+    invalidToken?: string;
+  };
+}
+
+export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
+  token,
+  onSubmit,
+  passwordValidation,
+  confirmPasswordValidation,
+  labels = {},
+}) => {
+  const { t, tComponent } = useI18n();
+  const [success, setSuccess] = useState(false);
+  const [apiError, setApiError] = useState<string>('');
+
+  const validation = {
+    password: passwordValidation || Yup.string()
+      .min(Constants.PasswordMinLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMinLengthTemplate))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    confirmPassword: confirmPasswordValidation || Yup.string()
+      .oneOf([Yup.ref('password')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+  };
+
+  const translatedLabels = {
+    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Title),
+    password: labels.password || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_NewPassword),
+    confirmPassword: labels.confirmPassword || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword),
+    resetButton: labels.resetButton || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Button),
+    successMessage: labels.successMessage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Success),
+    invalidToken: labels.invalidToken || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ForgotPassword_InvalidToken),
+  };
+
+  const formik = useFormik<ResetPasswordFormValues>({
+    initialValues: {
+      password: '',
+      confirmPassword: '',
+    },
+    validationSchema: Yup.object({
+      password: validation.password,
+      confirmPassword: validation.confirmPassword,
+    }),
+    onSubmit: async (values) => {
+      if (!token) {
+        setApiError(translatedLabels.invalidToken);
+        return;
+      }
+
+      try {
+        await onSubmit(token, values.password);
+        setSuccess(true);
+        setApiError('');
+      } catch (error: any) {
+        setApiError(error.response?.data?.message || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Error_PasswordChange));
+        setSuccess(false);
+      }
+    },
+  });
+
+  if (!token) {
+    return (
+      <Container maxWidth="sm">
+        <Alert severity="error" sx={{ mt: 4 }}>
+          {translatedLabels.invalidToken}
+        </Alert>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {translatedLabels.title}
+        </Typography>
+
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          <TextField
+            fullWidth
+            id="password"
+            name="password"
+            label={translatedLabels.password}
+            type="password"
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.password && formik.errors.password)}
+            helperText={formik.touched.password && formik.errors.password}
+            margin="normal"
+          />
+
+          <TextField
+            fullWidth
+            id="confirmPassword"
+            name="confirmPassword"
+            label={translatedLabels.confirmPassword}
+            type="password"
+            value={formik.values.confirmPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
+            helperText={formik.touched.confirmPassword && formik.errors.confirmPassword}
+            margin="normal"
+          />
+
+          {apiError && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiError}
+            </Alert>
+          )}
+
+          {success && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {translatedLabels.successMessage}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {translatedLabels.resetButton}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default ResetPasswordForm;

package/src/components/SideMenu.tsx

@@ -0,0 +1,46 @@
+import { Drawer, List } from '@mui/material';
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMenu } from '../contexts/MenuContext';
+import { IMenuOption } from '../interfaces/IMenuOption';
+import { MenuTypes } from '../types/MenuType';
+import { SideMenuListItem } from './SideMenuListItem';
+
+interface SideMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const SideMenu: FC<SideMenuProps> = ({ isOpen, onClose }) => {
+  const { getMenuOptions } = useMenu();
+  const navigate = useNavigate();
+
+  const menuOptions = getMenuOptions(MenuTypes.SideMenu, true);
+
+  const handleNavigate = (
+    link: string | Partial<{ pathname: string; state?: unknown }>
+  ) => {
+    if (typeof link === 'string') {
+      navigate(link);
+    } else if (link.pathname) {
+      navigate(link.pathname, { state: link.state });
+    }
+  };
+
+  return (
+    <Drawer anchor="left" open={isOpen} onClose={onClose}>
+      <List>
+        {menuOptions.map((item: IMenuOption) => (
+          <SideMenuListItem
+            key={item.id}
+            menuItem={item}
+            onClose={onClose}
+            onNavigate={handleNavigate}
+          />
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export default SideMenu;

package/src/components/SideMenuListItem.tsx

@@ -0,0 +1,74 @@
+import {
+  Divider,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import { FC, useCallback } from 'react';
+import { IMenuOption } from '../interfaces';
+
+export interface SideMenuListItemProps {
+  menuItem: IMenuOption;
+  onClose: () => void;
+  onNavigate?: (
+    link: string | Partial<{ pathname: string; state?: unknown }>
+  ) => void;
+}
+
+export const SideMenuListItem: FC<SideMenuListItemProps> = ({
+  menuItem,
+  onClose,
+  onNavigate,
+}) => {
+  const handleMenuItemClick = useCallback(
+    (option: IMenuOption) => (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+      if (option.action) {
+        option.action();
+      } else if (option.link !== undefined && onNavigate) {
+        if (typeof option.link === 'string') {
+          onNavigate(option.link);
+        } else if (
+          typeof option.link === 'object' &&
+          'pathname' in option.link &&
+          option.link.pathname
+        ) {
+          onNavigate({
+            pathname: option.link.pathname,
+            state: 'state' in option.link ? option.link.state : undefined,
+          });
+        }
+      }
+      onClose();
+    },
+    [onNavigate, onClose]
+  );
+
+  if (menuItem.divider) {
+    return <Divider key={menuItem.label} />;
+  } else if (menuItem.link) {
+    return (
+      <ListItemButton key={menuItem.id} onClick={handleMenuItemClick(menuItem)}>
+        {menuItem.icon && <ListItemIcon>{menuItem.icon}</ListItemIcon>}
+        <ListItemText primary={menuItem.label} />
+      </ListItemButton>
+    );
+  } else if (menuItem.action) {
+    const action = menuItem.action;
+    return (
+      <ListItemButton
+        key={menuItem.id}
+        onClick={async () => {
+          await action();
+          onClose();
+        }}
+      >
+        {menuItem.icon && <ListItemIcon>{menuItem.icon}</ListItemIcon>}
+        <ListItemText primary={menuItem.label} />
+      </ListItemButton>
+    );
+  }
+  return null;
+};
+
+export default SideMenuListItem;