@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/components/menu/DarkToggleMode.tsx

@@ -1,65 +0,0 @@
-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 className='dash-theme-mode-switcher' 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

@@ -1,120 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,194 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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;
-*/