@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/menu/CustomMenuItemLink.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, useCallback, ReactElement, ReactNode } from 'react';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Link, LinkProps, useMatch } from 'react-router-dom';
+
+import { useTranslate, useBasename } from 'react-admin';
+import { useSidebarState } from 'react-admin';
+
+export type CustomMenuItemLinkProps = LinkProps & {
+	// @ts-ignore - JSX namespace issue
+	leftIcon?: JSX.Element;
+	primaryText?: ReactNode;
+};
+
+const MenuItemLink: React.FC<CustomMenuItemLinkProps> = (props /*, ref*/) => {
+	const { className, primaryText, leftIcon, onClick, ...rest } = props;
+
+	const translate = useTranslate();
+	const basename = useBasename();
+
+	const [open, setOpen] = useSidebarState();
+	const handleMenuTap = useCallback(
+		(e) => {
+			setOpen(false);
+
+			onClick && onClick(e);
+		},
+		[setOpen, onClick],
+	);
+
+	const to =
+		(typeof props.to === 'string' ? props.to : props.to.pathname) || '';
+	const match = useMatch({ path: to, end: to === `${basename}/` });
+
+	return (
+		<Link
+			className={clsx(className, {
+				[MenuItemLinkClasses.active]: !!match,
+			})}
+			//ref={ref}
+			tabIndex={0}
+			{...rest}
+			onClick={handleMenuTap}
+		>
+			{leftIcon && <span className={MenuItemLinkClasses.icon}>{leftIcon}</span>}
+			{typeof primaryText === 'string'
+				? translate(primaryText, { _: primaryText })
+				: primaryText}
+		</Link>
+	);
+};
+
+const PREFIX = 'RaMenuItemLink';
+
+export const MenuItemLinkClasses = {
+	active: `${PREFIX}-active`,
+	icon: `${PREFIX}-icon`,
+};
+
+export default MenuItemLink;

package/src/components/menu/DarkToggleMode.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { LightMode, DarkMode } from '@mui/icons-material';
+import { dashStorage } from 'dash-utils';
+
+import {
+  DASH_REDUX_ACTIONS,
+} from 'dash-admin-state';
+import { Avatar, useColorScheme } from '@mui/material';
+import { DashThemeHelperProvider } from '../../default-theme';
+
+const DarkToggleMode = () => {
+  const { mode, setMode } = useColorScheme();
+  const dispatch = useDispatch();
+
+  // Determine display mode - fallback to stored theme or 'dark' if MUI returns undefined/system
+  const effectiveMode = (mode === 'light' || mode === 'dark') ? mode : (dashStorage.getItem('theme') || 'dark');
+  const darkMode = effectiveMode === 'dark';
+  
+  const onClick = () => {
+    const newMode = effectiveMode === 'dark' ? 'light' : 'dark';
+
+    // Update all systems: MUI, Redux, and dashStorage
+    setMode(newMode);
+    dashStorage.setItem('theme', newMode);
+    document.documentElement.setAttribute('data-theme', newMode);
+    
+    dispatch(DASH_REDUX_ACTIONS.toggleThemeType(newMode));
+  };
+
+  // Sync on initial mount if MUI mode doesn't match stored theme
+  useEffect(() => {
+    const storedTheme = dashStorage.getItem('theme');
+    if (storedTheme && (storedTheme === 'light' || storedTheme === 'dark') && mode !== storedTheme) {
+      setMode(storedTheme as 'light' | 'dark');
+    }
+  }, []);
+  
+  return (
+    <>
+     <div  onClick={onClick}>
+   
+     <DashThemeHelperProvider>
+      <Avatar 
+        sizes='small'
+        sx={{ fontSize: '1rem' }}
+        style={{
+          width: '30px',
+          height: '30px',
+          minHeight: '30px'
+        }}
+       className='dash-icon-button-color dash-icon-button-bg'
+      >
+        {darkMode ? <LightMode /> : <DarkMode />}
+      </Avatar>
+      
+      </DashThemeHelperProvider>
+    </div>
+
+    
+    </>
+  );
+};
+
+export default DarkToggleMode;

package/src/components/menu/LanguageToggleMode.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { useSetLocale, useLocaleState } from 'react-admin';
+import { Language } from '@mui/icons-material';
+import { dashStorage } from 'dash-utils';
+import { Avatar, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
+import { DashThemeHelperProvider } from '../../default-theme';
+
+interface LocaleOption {
+  locale: string;
+  languageId: string;
+  name: string;
+  icon: string;
+}
+
+const LanguageToggleMode = () => {
+  const locale = useLocaleState();
+  const setLocale = useSetLocale();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  // Available locales from main.tsx configuration
+  const availableLocales: LocaleOption[] = [
+    {
+      locale: 'en',
+      languageId: 'english',
+      name: 'English',
+      icon: '🇺🇸',
+    },
+    {
+      locale: 'es',
+      languageId: 'spanish',
+      name: 'Español',
+      icon: '🇪🇸',
+    },
+  ];
+
+  const currentLocale = availableLocales.find(l => l.locale === locale) || availableLocales[1]; // Default to Spanish
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLocaleChange = (newLocale: string) => {
+    // Update react-admin locale
+    setLocale(newLocale);
+    
+    // Store in dashStorage for persistence
+    dashStorage.setItem('locale', newLocale);
+    
+    // Close menu
+    handleClose();
+    
+    console.log('Language changed to:', newLocale);
+  };
+
+  // Sync on initial mount if stored locale exists
+  useEffect(() => {
+    const storedLocale = dashStorage.getItem('locale');
+    if (storedLocale && storedLocale !== locale) {
+      setLocale(storedLocale);
+    }
+  }, []);
+
+  return (
+    <>
+      <div 
+     
+      onClick={handleClick}
+      >
+        <DashThemeHelperProvider>
+          <Avatar 
+            sizes='small'
+            sx={{ fontSize: '1rem', cursor: 'pointer' }}
+            style={{
+              width: '30px',
+              height: '30px',
+              minHeight: '30px'
+            }}
+             className='dash-icon-button-color dash-icon-button-bg'
+          >
+            <span style={{ fontSize: '1.2rem' }}>{currentLocale.icon}</span>
+          </Avatar>
+        </DashThemeHelperProvider>
+      </div>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        {availableLocales.map((localeOption) => (
+          <MenuItem
+            key={localeOption.locale}
+            onClick={() => handleLocaleChange(localeOption.locale)}
+            selected={localeOption.locale === locale}
+          >
+            <ListItemIcon>
+              <span style={{ fontSize: '1.5rem' }}>{localeOption.icon}</span>
+            </ListItemIcon>
+            <ListItemText>{localeOption.name}</ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default LanguageToggleMode;

package/src/components/misc/CustomImageInput.tsx

@@ -0,0 +1,62 @@
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import React from 'react';
+import { useRecordContext } from 'react-admin';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { ImageInput } from 'react-admin';
+import { ImageField } from 'react-admin';
+
+const CustomImageInputView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+    method,
+    attribute,
+}) => {
+    const record = useRecordContext();
+
+    return record ? (
+        <img src={record[attribute.listAttribute] || ''} alt='imagen' />
+    ) : (
+        <></>
+    );
+};
+const ImagePlaceholder = ({ record, attribute }) => (
+    <div style={{ padding: '30px', border: '4px dashed rgba(0, 0, 0, 0.5)', display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <img src={record?.[attribute.listAttribute] || ''} alt='imagen' />
+        <CloudUploadIcon /> 
+        Arrástre una imágen o haga click aquí para seleccionar 
+    </div>
+);
+
+const CustomImageInputEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+    method,
+    attribute,
+}) => {
+    const record = useRecordContext();
+    return (
+        <>
+            <ImageInput
+                fullWidth
+                placeholder={<ImagePlaceholder record={record} attribute={attribute} />}
+                source={attribute.attribute}
+                label={attribute.label}
+                /* @ts-ignore */
+                accept='image/*'
+            >
+                <ImageField source={/*attribute.listAttribute ||*/ `src`} title='title' />
+            </ImageInput>
+        </>
+    );
+};
+const CustomImageInput = ({
+    method,
+    attribute,
+    resourceConfig
+}: IDashAutoAdminCustomFieldComponent) => {
+    switch (method) {
+        case 'edit':
+        case 'create':
+            return <CustomImageInputEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+        case 'view':
+            return <CustomImageInputView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+    }
+};
+
+export default CustomImageInput;

package/src/components/misc/DASHGlobalErrorHandler.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useDialog } from 'dash-dialog';
+import { AxiosError } from 'axios';
+import { IDashAutoAdminBackendError } from 'dash-axios-hook/src/interfaces/IDashAutoAdminBackendError';
+
+interface GlobalErrorHandlerEvent<T> {
+    data: T;
+    config?: { dialog?: boolean, toast?: boolean };
+    origin?: string;
+}
+
+interface IDashGlobalError {
+    status: number;
+    body: any;
+    message?: string;
+}
+
+const _checkError = (errorData: any): IDashGlobalError => {
+    // Handle new AxiosError format from processAxiosError
+    if (errorData.originalError && errorData.status && errorData.message) {
+        const processedError = errorData as IDashAutoAdminBackendError;
+        
+        let errorMessage = processedError.message || "";
+
+        
+        // Add status-specific context if needed
+        if (processedError.status >= 400 && processedError.status < 499) {
+            switch (processedError.status) {
+                case 401:
+                    errorMessage = '🚫 ' + errorMessage;
+                    break;
+                case 403:
+                    errorMessage = '🔒 ' + errorMessage;
+                    break;
+                case 404:
+                    errorMessage = '❌ ' + errorMessage;
+                    break;
+                case 422:
+                    errorMessage = '⚠ ' + errorMessage;
+                    break;
+            }
+        }
+
+        try {
+            if (errorData?.originalError?.response?.data?.errors) {
+                const validationErrors = errorData.originalError.response.data.errors;
+                let errorMessages: string[] = [];
+
+                if (Array.isArray(validationErrors)) {
+                    errorMessages = validationErrors.map(err => String(err));
+                } else if (typeof validationErrors === 'object' && validationErrors !== null) {
+                    Object.values(validationErrors).forEach((value: any) => {
+                        if (typeof value === 'string') {
+                            errorMessages.push(value);
+                        } else if (Array.isArray(value)) {
+                            errorMessages.push(value.join(', '));
+                        } else if (typeof value === 'object' && value !== null) {
+                            errorMessages.push(JSON.stringify(value));
+                        }
+                    });
+                } else if (typeof validationErrors === 'string') {
+                    errorMessages.push(validationErrors);
+                }
+
+                if (errorMessages.length > 0) {
+                    errorMessage += ' ' + errorMessages.join(', ');
+                }
+            }
+        } catch (e) {
+            console.error('error parsing validation errors', e);
+        }
+
+        
+        return {
+            status: processedError.status,
+            body: errorMessage,
+            message: processedError.message
+        };
+    }
+    
+    // Handle legacy error format
+    let e: IDashGlobalError = { ...errorData?.error ? errorData.error : {} };
+    
+    let _extra = "";
+    if (e.status >= 400 && e.status < 499) {
+        if (e.status === 401) _extra = '🚫 ';
+        if (e.status === 403) _extra = '🔒 ';
+        if (e.status === 404) _extra = '❌ ';
+        if (e.status === 422) _extra = '⚠ ';
+
+        e = {
+            status: e.status,
+            body: _extra + (e.body ? " " + e.body : "")
+        };
+    }
+    
+    return e;
+};
+
+export interface IDASHGlobalErrorHandler {
+    checkError?: (error: any) => IDashGlobalError;
+}
+
+const DASHGlobalErrorHandler: React.FC<IDASHGlobalErrorHandler> = ({ checkError }) => {
+    const dialog = useDialog();
+    const [disableNextDialog, setDisableNextDialog] = useState(false);
+
+    const showError = (parsedError: IDashGlobalError, globalError: GlobalErrorHandlerEvent<any>) => {
+        // Show toast if configured
+        if (globalError.config?.toast) {
+            toast.error(<>{parsedError.body}</>, {
+                position: 'bottom-center',
+                autoClose: 4000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+            });
+        }
+        
+        // Show dialog (default behavior unless explicitly disabled)
+        if (globalError.config?.dialog !== false) {
+            dialog({
+                variant: 'danger',
+                title: 'Error',
+                content: parsedError.body
+            });
+        }
+    };
+
+    const errorChangeHandler = (event: any) => {
+        const eventData = event.data || event;
+        
+        // Check if we have an error to process
+        const hasError = eventData?.error || 
+                         eventData?.originalError || 
+                         (eventData?.status && eventData?.message);
+
+        
+        if (hasError) {
+            if (!disableNextDialog) {
+                try {
+                    const parsedError = checkError ? checkError(eventData) : _checkError(eventData);
+                    const globalErrorEvent: GlobalErrorHandlerEvent<any> = {
+                        data: eventData,
+                        config: eventData.config || { dialog: true, toast: false },
+                        origin: eventData.origin || 'Unknown'
+                    };
+                    
+                    showError(parsedError, globalErrorEvent);
+                } catch (e) {
+                    console.error('Error processing global error:', e);
+                    // Fallback error display
+                    showError({
+                        status: 500,
+                        body: 'Error inesperado en la aplicación'
+                    }, {
+                        data: eventData,
+                        config: { dialog: true, toast: false }
+                    });
+                }
+            }
+            
+            // Reset the ignore flag after processing (or skipping) the error
+            if (disableNextDialog) {
+                setDisableNextDialog(false);
+            }
+        }
+    };
+
+    const ignoreNextDialogHandler = () => {
+        setDisableNextDialog(true);
+        
+        // Safety timeout to reset the flag after 30 seconds
+        setTimeout(() => {
+            setDisableNextDialog(false);
+        }, 30000);
+    };
+
+    useEffect(() => {
+        window.addEventListener('DASHGlobalError', errorChangeHandler);
+        window.addEventListener('DASHGlobalErrorIgnore', ignoreNextDialogHandler);
+        
+        return () => {
+            window.removeEventListener('DASHGlobalError', errorChangeHandler);
+            window.removeEventListener('DASHGlobalErrorIgnore', ignoreNextDialogHandler);
+        };
+    }, [disableNextDialog, checkError]);
+
+    return <></>;
+};
+
+export default DASHGlobalErrorHandler;

package/src/components/misc/DarkModeSwitcher.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { useColorScheme } from '@mui/material';
+import { LightMode, DarkMode } from '@mui/icons-material';
+import { Avatar } from '@mui/material';
+import { useDispatch, useSelector } from 'react-redux';
+import { DASH_REDUX_ACTIONS, DASH_THEME_SETTINGS, IDASHAppState } from 'dash-admin-state';
+import {DashThemeHelperProvider} from '../../default-theme';
+const DarkModeSwitcher = () => {
+
+const dashThemeType = useSelector((state: IDASHAppState<any, any, any>) =>
+        state.settings.themeType
+    );
+
+  const { mode, setMode } = useColorScheme();
+  const dispatch = useDispatch();
+  // Handle the case where mode might be 'system'
+  const isDark = mode === 'dark';
+
+  const onClick = () => {
+    debugger;
+    const newMode = isDark ? 'light' : 'dark';
+    setMode(newMode);
+    
+   /* dispatch(DASH_REDUX_ACTIONS.toggleThemeType(
+        isDark
+          ? DASH_THEME_SETTINGS.THEME_TYPE_LIGHT
+          : DASH_THEME_SETTINGS.THEME_TYPE_DARK,
+    ));*/
+    
+
+  };
+
+  // Don't render until mode is determined
+  if (!mode) {
+    return null;
+  }
+
+  return (
+    <div  onClick={onClick}>
+   
+     <DashThemeHelperProvider>
+      <Avatar 
+        sizes='small'
+        sx={{ fontSize: '1rem' }}
+        style={{
+          width: '30px',
+          height: '30px',
+          minHeight: '30px'
+        }}
+       className='dash-icon-button-color dash-icon-button-bg'
+      >
+        {isDark ? <LightMode /> : <DarkMode />}
+      </Avatar>
+      </DashThemeHelperProvider>
+    </div>
+  );
+};
+
+export default DarkModeSwitcher;
+
+
+/*
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { LightMode, DarkMode } from '@mui/icons-material';
+import { Avatar } from '@mui/material';
+
+import {
+  IDASHAppState,
+  DASH_REDUX_ACTIONS,
+  DASH_THEME_SETTINGS
+} from 'dash-admin-state';
+
+const DarkModeSwitcher = () => {
+  const darkMode: boolean = useSelector((state: IDASHAppState<any, any, any>) =>
+    state.settings.themeType === DASH_THEME_SETTINGS.THEME_TYPE_DARK
+      ? true
+      : false,
+  );
+  const dispatch = useDispatch();
+
+  const onClick = () => {
+    dispatch(
+      DASH_REDUX_ACTIONS.toggleThemeType(
+        darkMode
+          ? DASH_THEME_SETTINGS.THEME_TYPE_LIGHT
+          : DASH_THEME_SETTINGS.THEME_TYPE_DARK,
+      ),
+    );
+  };
+
+  return (
+    <div className='dash-theme-avatar' onClick={onClick}>
+     
+      <Avatar 
+        sizes='small'
+        sx={{ fontSize: '1rem' }}
+        style={{
+          width: '30px',
+          height: '30px',
+          minHeight: '30px'
+        }}
+        className='dash-theme-avatar-icon'
+      >
+        {darkMode ?  <LightMode />:  <DarkMode /> }
+      </Avatar>
+    </div>
+  );
+};
+
+export default DarkModeSwitcher;
+*/