@dashadmin/dash-admin 1.3.72 → 1.3.74-srcfree.1

package/src/default-theme/DashThemeHelperProvider.tsx

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

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

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

package/src/default-theme/DomainTheme.tsx

@@ -1,59 +0,0 @@
-import { JSX, PropsWithChildren } from 'react';
-import { Box } from '@mui/material';
-import AppSidebarMaterial from './menu/AppSidebarMaterial';
-import React from 'react';
-
-export interface IDomainTheme<U = any, A = any> extends PropsWithChildren {
-    menuComponent?: JSX.Element;
-    headerToolBar?: JSX.Element;
-    footerComponent?: JSX.Element;
-}
-
-
-// Memoized content wrapper to prevent children re-renders
-const MemoizedContent = ({ children }: { children: React.ReactNode }) => (
-    <Box className="dash-layout-content">
-        {children}
-    </Box>
-);
-
-// Memoized footer wrapper
-const MemoizedFooter = React.memo(({ footerComponent }: { footerComponent?: JSX.Element }) => {
-    if (!footerComponent) return null;
-    
-    return (
-        <Box className="dash-app-layout-footer">
-            {footerComponent}
-        </Box>
-    );
-});
-
-const DomainTheme = <U, A>({
-    children,
-    menuComponent,
-    headerToolBar,
-    footerComponent,
-    ...props
-}: IDomainTheme<U, A>): JSX.Element => {
-
-    return (
-        <div id={'dash-app-layout'} className={'dash-app-layout'}>
-            {menuComponent === undefined ? (
-                <AppSidebarMaterial 
-                    className={'dash-app-layout-sidebar'}
-                />
-            ) : menuComponent}
-            <Box
-                className={'dash-app-layout-content'}
-            >
-                {headerToolBar}
-                <MemoizedContent>
-                    {children}
-                </MemoizedContent>
-                {footerComponent && <MemoizedFooter footerComponent={footerComponent} />}
-            </Box>
-        </div>
-    );
-};
-
-export default DomainTheme;