@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/default-theme/DashThemeContext.tsx

@@ -0,0 +1,218 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { appTheme, getAntTheme } from 'dash-styles';
+import { AuthPersistenceService } from 'dash-auth';
+import { useSelector } from 'react-redux';
+import { IDASHAppState } from 'dash-admin-state';
+import { updateDomCssVariables } from 'dash-utils';
+import CssBaseline from '@mui/material/CssBaseline';
+import ConfigProvider from 'antd/es/config-provider';
+
+
+import {
+    Theme,
+    createTheme,
+    ThemeProvider
+} from '@mui/material';
+
+interface DashThemeContextType {
+    theme: Theme;
+    themeOptions: ReturnType<typeof appTheme>;
+    recreateTheme: (tenantSettings?: any) => void;
+    currentMode: string;
+}
+
+
+
+const DashThemeContext = createContext<DashThemeContextType | null>(null);
+
+// Defensive patch for MUI v9: createThemeWithVars can produce a theme where
+// breakpoints.internal_mediaKeys is missing. Ensure it is always set so that
+// responsive `sx` props (e.g. `padding: { xs: 2, sm: 3 }`) do not crash.
+function patchThemeBreakpoints(theme: Theme): Theme {
+    const bp = (theme as any).breakpoints;
+    if (bp && !bp.internal_mediaKeys && bp.keys && bp.up) {
+        bp.internal_mediaKeys = bp.keys.map((key: string) => bp.up(key));
+    }
+    return theme;
+}
+
+export const useDashThemeContext = () => {
+    const context = useContext(DashThemeContext);
+    if (!context) {
+        throw new Error('useDashThemeContext must be used within a DashThemeProvider');
+    }
+    return context;
+};
+
+interface DashThemeProviderProps {
+    children?: React.ReactNode;
+    extendedOptions?: any;
+}
+
+export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOptions, children }) => {
+    // Track current theme mode from data-theme attribute
+    const [currentMode, setCurrentMode] = useState<string>(() =>
+        document.documentElement.getAttribute('data-theme') || 'dark'
+    );
+
+    const [themeOptions, setThemeOptions] = useState<ReturnType<typeof appTheme>>(() => {
+        // Read persisted tenant settings on initialization to include tenant colors
+        // in the initial theme, avoiding a flash of default colors.
+        const initialTenantSettings = AuthPersistenceService.getTenantSettings();
+        return appTheme(extendedOptions, {
+            currentMode,
+            colors: initialTenantSettings?.colors,
+            tenantSettings: initialTenantSettings,
+        });
+    });
+
+    const [theme, setTheme] = useState<Theme>(() => {
+        const initialTenantSettings = AuthPersistenceService.getTenantSettings();
+        /* @ts-ignore */
+        return patchThemeBreakpoints(createTheme(appTheme(extendedOptions, {
+            currentMode,
+            colors: initialTenantSettings?.colors,
+            tenantSettings: initialTenantSettings,
+        })));
+    });
+
+
+    const [antTheme, setAntTheme] = useState<any>(() => {
+        const initialTenantSettings = AuthPersistenceService.getTenantSettings();
+
+        return getAntTheme({
+            currentMode,
+            colors: initialTenantSettings?.colors,
+            tenantSettings: initialTenantSettings,
+        });
+    });
+
+    const getTenantSettings = () => {
+        const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
+        return persistedTenantSettings || null;
+    };
+
+    const recreateTheme = (tenantSettings?: any, mode?: string) => {
+        const settings = tenantSettings || getTenantSettings();
+        //const themeMode = mode || currentMode;
+        const themeMode = mode || document.documentElement.getAttribute('data-theme') || 'dark';
+
+        console.log('Recreating MUI theme with tenant settings:', settings, 'mode:', themeMode);
+
+        const newThemeOptions = appTheme(
+            extendedOptions,
+            {
+                tenantSettings: settings,
+                colors: settings?.colors,
+                currentMode: themeMode,
+            }
+        );
+        /* @ts-ignore */
+        const newTheme = patchThemeBreakpoints(createTheme(newThemeOptions));
+
+        setThemeOptions(newThemeOptions);
+        setTheme(newTheme);
+        
+
+        setAntTheme(getAntTheme({
+                tenantSettings: settings,
+                colors: settings?.colors,
+                currentMode: themeMode,
+            }));
+        
+            updateDomCssVariables(themeMode, settings?.colors, settings?.values);
+        /*if (settings?.colors || settings?.values) {
+            updateDomCssVariables(themeMode, settings?.colors, settings?.values);
+        }*/
+    };
+
+    // Observer for data-theme attribute changes
+    useEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+                    const newMode = document.documentElement.getAttribute('data-theme') || 'dark';
+                    if (newMode !== currentMode) {
+                        console.log('Theme mode changed from', currentMode, 'to', newMode);
+                        setCurrentMode(newMode);
+                        const settings = getTenantSettings();
+
+                        console.log('Updating theme with new mode:', newMode, 'and settings:', settings);
+
+                        updateDomCssVariables(newMode, settings?.colors, settings?.values);
+                    }
+                }
+            });
+        });
+
+        // Start observing
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme']
+        });
+
+        // Cleanup observer on unmount
+        return () => observer.disconnect();
+    }, [currentMode]);
+
+    // React to mode changes
+    useEffect(() => {
+        console.log('Current mode updated to:', currentMode);
+        const tenantSettings = getTenantSettings();
+        recreateTheme(tenantSettings, currentMode);
+    }, [currentMode]);
+
+    // Initial setup
+    useEffect(() => {
+        const tenantSettings = getTenantSettings();
+
+        if (tenantSettings) {
+            console.log("Recreating MUI theme on mount");
+            recreateTheme(tenantSettings, currentMode);
+        }
+    }, []);
+
+    // Listen for DASHTRefreshTheme CustomEvent to trigger theme recreation
+    useEffect(() => {
+        const handler = (event: Event) => {
+            if (event.type === 'DASHTRefreshTheme') {
+                const tenantSettings = getTenantSettings();
+                recreateTheme(tenantSettings, currentMode);
+            }
+        };
+        window.addEventListener('DASHTRefreshTheme', handler);
+        return () => window.removeEventListener('DASHTRefreshTheme', handler);
+    }, []);
+
+    const contextValue: DashThemeContextType = {
+        theme,
+        themeOptions,
+        recreateTheme,
+        currentMode,
+       
+    };
+    
+    return (
+        <ThemeProvider noSsr disableTransitionOnChange theme={theme}>
+            <CssBaseline />
+            <DashThemeContext.Provider value={contextValue}>
+
+
+                <ConfigProvider
+                    theme={antTheme}
+                >
+
+                    {children}
+
+                </ConfigProvider>
+
+
+
+
+
+            </DashThemeContext.Provider>
+        </ThemeProvider>
+    );
+};
+
+export default DashThemeContext;

package/src/default-theme/DashThemeHelperProvider.tsx

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { AuthPersistenceService } from 'dash-auth';
+import { useColorScheme } from '@mui/material/styles';
+import { updateDomCssVariables } from 'dash-utils';
+import { dashStorage } from 'dash-utils';
+
+interface DashThemeHelperContextType {
+    mode: string;
+}
+
+// Get initial mode from storage, defaulting to 'dark'
+const getInitialMode = (): string => {
+    const stored = dashStorage.getItem('theme');
+    return (stored === 'light' || stored === 'dark') ? stored : 'dark';
+};
+
+const DashThemeHelperContext = createContext<DashThemeHelperContextType>({
+    mode: getInitialMode()
+});
+
+
+export const useDashThemeHelperContext = () => useContext(DashThemeHelperContext);
+
+/**
+ * Props interface for DashThemeHelperProvider component
+ * @interface DashThemeHelperProviderProps
+ * @property {React.ReactNode} [children] - Child components to be rendered within the provider
+ */
+interface DashThemeHelperProviderProps {
+    children?: React.ReactNode;
+}
+
+/**
+ * DashThemeHelperProvider component
+ * 
+ * This component is responsible for:
+ * - Listening to MUI theme mode changes (light/dark)
+ * - Updating CSS custom properties (variables) in the DOM based on the current theme mode
+ * - Applying tenant-specific color settings to the theme
+ * - Providing theme mode context to child components
+ * 
+ * @component
+ * @param {DashThemeHelperProviderProps} props - Component props
+ * @returns {React.ReactElement} Provider component with theme context
+ */
+export const DashThemeHelperProvider: React.FC<DashThemeHelperProviderProps> = ({ children }) => {
+    const { mode, setMode } = useColorScheme();
+
+    // Effective mode: use MUI mode if valid, otherwise fallback to stored theme
+    const effectiveMode = (mode === 'light' || mode === 'dark') ? mode : getInitialMode();
+
+    // Helper function to get tenant settings (prioritize persisted over auth)
+    const getTenantSettings = () => {
+        const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
+        if (persistedTenantSettings) {
+            return persistedTenantSettings;
+        }
+        return null;
+    };
+
+    // Sync MUI mode with stored theme on mount
+    useEffect(() => {
+        const storedTheme = dashStorage.getItem('theme');
+        if (storedTheme && (storedTheme === 'light' || storedTheme === 'dark') && mode !== storedTheme) {
+            setMode(storedTheme as 'light' | 'dark');
+        } else if (!storedTheme) {
+            // No stored theme - set default and persist
+            const defaultMode = 'dark';
+            dashStorage.setItem('theme', defaultMode);
+            document.documentElement.setAttribute('data-theme', defaultMode);
+            setMode(defaultMode);
+        }
+    }, []);
+
+    // Listen for theme mode changes and update DOM CSS variables
+    useEffect(() => {
+        if (mode !== 'light' && mode !== 'dark') return; // Skip if MUI returns undefined/system
+        
+        // Emit custom event for theme mode switch
+        const themeEvent = new CustomEvent('dash-theme-mode-switched', { detail: { mode } });
+        window.dispatchEvent(themeEvent);
+     
+        const tenantSettings = getTenantSettings();
+        if (tenantSettings?.colors || tenantSettings?.values) {
+            dashStorage.setItem('theme', mode);
+            document.documentElement.setAttribute('data-theme', mode);
+            updateDomCssVariables(mode, tenantSettings?.colors || {}, tenantSettings?.values || {});
+        }
+    }, [mode]);
+
+    return (
+        <DashThemeHelperContext.Provider value={{ mode: effectiveMode }}>
+            {children}
+        </DashThemeHelperContext.Provider>
+    );
+};
+
+export default DashThemeHelperProvider;

package/src/default-theme/DomainAppLayout.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { useEffect, useRef, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useStore } from 'react-admin';
+import { Box } from '@mui/material';
+
+import { IAppLayout } from '../layout/AppLayout';
+import { DASH_REDUX_ACTIONS, IDASHAppState, IBreadcrumbItem } from 'dash-admin-state';
+
+import DomainTheme, { IDomainTheme } from './DomainTheme';
+import DomainHeader from './DomainHeader';
+import { BreadcrumbsManager } from '../components/navigation';
+
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { DASHAdminSystemConstants } from 'dash-constants';
+
+export interface IDomainAppLayout<U = any, A = any> extends IAppLayout {
+  ThemeComponent?: React.ComponentType<IDomainTheme<any, any>>;
+  /** Whether to show breadcrumb navigation */
+  showBreadcrumbs?: boolean;
+  /** Custom label map for breadcrumb segments */
+  breadcrumbLabelMap?: Record<string, string>;
+  /** Whether to include home in breadcrumbs */
+  breadcrumbIncludeHome?: boolean;
+  CustomDomainHeader?: React.JSX.Element;
+  CustomDomainFooter?: React.JSX.Element;
+}
+
+const DomainAppLayout = <U, A>(props: IDomainAppLayout<U, A>): React.JSX.Element => {
+  const { 
+    ThemeComponent, 
+    children,
+    showBreadcrumbs = true,
+    breadcrumbLabelMap,
+    breadcrumbIncludeHome = false,
+    CustomDomainHeader,
+    CustomDomainFooter,
+  } = props;
+
+  const dispatch = useDispatch();
+  const contentRef = useRef(null);
+  const [resourceConfig] = useStore<IDashAutoAdminResourceConfig>('resourceConfig');
+  
+  // Simple selectors - don't over-optimize
+  const authenticated = useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => state.auth.authenticated
+  );
+  
+  const groupIcons = useSelector(
+    (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) => state.settings.groupIcons
+  );
+
+  // Generate breadcrumbs based on current resource
+  const generateBreadcrumbs = React.useCallback((
+    pathname: string,
+    config?: IDashAutoAdminResourceConfig | null
+  ): IBreadcrumbItem[] => {
+    const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX || '';
+    const breadcrumbs: IBreadcrumbItem[] = [];
+    
+    // Clean the pathname
+    let cleanPath = pathname;
+    if (URL_PREFIX && cleanPath.startsWith(URL_PREFIX)) {
+      cleanPath = cleanPath.slice(URL_PREFIX.length);
+    }
+    
+    const segments = cleanPath.split('/').filter(Boolean);
+    
+    if (segments.length === 0) return breadcrumbs;
+    
+    // If we have a resource config, use it for better labeling
+    if (config) {
+      // Add group as first breadcrumb if available
+      if (config.group) {
+        breadcrumbs.push({
+          label: config.group,
+          path: undefined, // Groups are typically not navigable
+          icon: groupIcons?.[config.group],
+        });
+      }
+      
+      // Add resource label
+      breadcrumbs.push({
+        label: config.label || segments[segments.length - 1],
+        path: `${URL_PREFIX}/${config.model}`,
+      });
+      
+      // Check for action segments (create, edit, show, etc.)
+      const lastSegment = segments[segments.length - 1];
+      const actionLabels: Record<string, string> = {
+        'create': 'Crear',
+        'edit': 'Editar',
+        'show': 'Ver',
+        'inline': 'Detalle',
+        ...breadcrumbLabelMap,
+      };
+      
+      if (actionLabels[lastSegment]) {
+        breadcrumbs.push({
+          label: actionLabels[lastSegment],
+          isActive: true,
+        });
+      } else if (/^\d+$/.test(lastSegment)) {
+        // If last segment is an ID, mark as active
+        const prevSegment = segments[segments.length - 2];
+        if (prevSegment && actionLabels[prevSegment]) {
+          breadcrumbs.push({
+            label: actionLabels[prevSegment],
+            isActive: true,
+          });
+        }
+      }
+    }
+    
+    return breadcrumbs;
+  }, [groupIcons, breadcrumbLabelMap]);
+
+  // Update page info when resource changes
+  useEffect(() => {
+    if (resourceConfig && groupIcons) {
+      
+      dispatch(
+        DASH_REDUX_ACTIONS.updatePage({
+          title: resourceConfig.label,
+          icon: resourceConfig.group && groupIcons[resourceConfig.group],
+          subTitle: resourceConfig.group,
+        }),
+      );
+    }
+  }, [resourceConfig, groupIcons, dispatch]);
+
+  const headerToolBar = CustomDomainHeader || <DomainHeader showBreadcrumbs={showBreadcrumbs} />;
+
+  if (ThemeComponent) {
+    return (
+      <BreadcrumbsManager 
+        labelMap={breadcrumbLabelMap}
+        includeHome={breadcrumbIncludeHome}
+      >
+        <ThemeComponent  headerToolBar={headerToolBar} footerComponent={CustomDomainFooter}>
+          {children}
+        </ThemeComponent>
+      </BreadcrumbsManager>
+    );
+  }
+
+    return (
+      <BreadcrumbsManager 
+        labelMap={breadcrumbLabelMap}
+        includeHome={breadcrumbIncludeHome}
+      >
+        <DomainTheme headerToolBar={headerToolBar} footerComponent={CustomDomainFooter}>
+            {children}
+        </DomainTheme>
+      </BreadcrumbsManager>
+    );
+};
+
+// Simple memo comparison
+/*export default React.memo(DomainAppLayout, (prevProps, nextProps) => {
+  return (
+    prevProps.children === nextProps.children &&
+    prevProps.ThemeComponent === nextProps.ThemeComponent
+  );
+});*/
+export default DomainAppLayout;

package/src/default-theme/DomainHeader.tsx

@@ -0,0 +1,162 @@
+import { JSX, PropsWithChildren, useEffect, useState } from 'react';
+import { Children } from 'react';
+import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { IPageState } from 'dash-admin-state';
+import { DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import { IDASHAppState } from 'dash-admin-state';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'
+import { Box, IconButton } from '@mui/material';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { NavEventManager } from '../utils/navEvents';
+import { Breadcrumbs } from '../components/navigation';
+import { AuthPersistenceService } from 'dash-auth';
+
+export interface IDomainHeader<U = any, A = any> extends PropsWithChildren {
+    /** Whether to show breadcrumb navigation */
+    showBreadcrumbs?: boolean;
+}
+
+const DomainHeader = <U, A>({
+    showBreadcrumbs = true,
+    ...props
+}: IDomainHeader<U, A>): JSX.Element => {
+
+    const dispatch = useDispatch();
+
+    // Keep local state in sync with sidebar for UI feedback
+    const [localNavExpanded, setLocalNavExpanded] = useState(true);
+    const [localNavSize, setLocalNavSize] = useState<'small' | 'large'>('large');
+
+    // State for tenant logos
+    const [tenantLogos, setTenantLogos] = useState<{
+        horizontalLogo: string | null;
+        squaredLogo: string | null;
+    }>({
+        horizontalLogo: null,
+        squaredLogo: null
+    });
+
+    // Listen to nav state changes from sidebar
+    useEffect(() => {
+        const unsubscribe = NavEventManager.onStateChange((expanded, size) => {
+            setLocalNavExpanded(expanded);
+            setLocalNavSize(size);
+            // Also sync to Redux store
+            //dispatch(DASH_REDUX_ACTIONS.setNavExpanded(expanded));
+        });
+
+        return unsubscribe;
+    }, [dispatch]);
+
+    // Load tenant logos
+    useEffect(() => {
+        const tenantImages = AuthPersistenceService.getTenantImages();
+        if (tenantImages) {
+            setTenantLogos({
+                horizontalLogo: tenantImages.horizontal_logo?.original || null,
+                squaredLogo: tenantImages.squared_logo?.original || null
+            });
+        }
+    }, []);
+
+    const HeaderToolBar = useSelector(
+        (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) =>
+            state.common.headerToolBar,
+    );
+    const pageSettings: IPageState = useSelector(
+        (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) =>
+            state.page,
+    );
+
+    const panelSettings = useSelector(
+        (state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) =>
+            state.common.panelSettings,
+    );
+
+    const logo = panelSettings?.logo || <>🖥 DASHAdmin</>;
+    const squaredLogo = panelSettings?.squaredLogo || <>🖥</>;
+    const horizontalLogo = panelSettings?.horizontalLogo || <>🖥</>;
+
+    const onToggleExpandedNav = () => {
+        // Use event system to communicate with sidebar
+        NavEventManager.toggleExpanded();
+    };
+  
+   const HeaderComponentInline = () => { 
+
+        
+     
+    return (
+        <Box
+            className={pageSettings.title ? "dash-header-content" : ""}
+            sx={{ /*display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'*/ }}
+        >
+            {pageSettings.title ? (
+                <Box className='dash-header-inline'>
+                    <span className='dash-header-inline-title'>
+                        {pageSettings.title || ''}
+                    </span>
+                    {/*<span className='dash-header-inline-subtitle'>
+                        {pageSettings.subTitle}
+                    </span>*/}
+                    {/* Breadcrumb Navigation - inline with title */}
+                    {/*showBreadcrumbs && pageSettings.breadcrumbs && pageSettings.breadcrumbs.length > 0 && (
+                        <Box className='dash-header-breadcrumbs'>
+                            <Breadcrumbs />
+                        </Box>
+                    )*/}
+                </Box>
+            ) : null}
+
+            {/* HeaderToolBar moved to SidebarActions */}
+        </Box>
+    );
+       
+    }
+
+    return (
+         <Box component={'div'} className='dash-header'>
+              <Box component={'div'} className='dash-header-container'>
+
+                <Box className='dash-header-subheader' sx={{ display: { xs: 'flex', sm: 'flex', md: 'none' }, alignItems: 'center'}}>
+                    {/* Burger icon - always visible, opens/closes drawer */}
+              
+                    <IconButton 
+                        className='dash-header-burger-toggler' 
+                        onClick={() => onToggleExpandedNav()}
+                        sx={{ 
+                           m: 1,
+                            padding: '8px',
+                            borderRadius: '8px',
+                            backgroundColor: 'rgba(0,0,0,0.04)',
+                            '&:hover': {
+                                backgroundColor: 'rgba(0,0,0,0.08)',
+                            }
+                        }}
+                    >
+                        <MenuOpenIcon sx={{ fontSize: 28 }} />
+                    </IconButton>
+                    
+                    {/* Logo - separate from burger, doesn't toggle drawer */}
+                   <Box className='dash-header-subheader-logo' sx={{ display: 'flex', alignItems: 'center', marginLeft: 1 }}>
+                        {(() => {
+                            const logoToRender = tenantLogos.squaredLogo || squaredLogo;
+                            if (typeof logoToRender === 'string') {
+                                return <img height={32} width={32} src={logoToRender} alt="Logo" style={{ borderRadius: '4px', objectFit: 'contain' }} />;
+                            }
+                            return logoToRender;
+                        })()}
+                    </Box>
+                </Box>
+
+            
+                    <HeaderComponentInline />
+                   
+        
+            </Box>
+        </Box>
+    );
+};
+
+export default DomainHeader;