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

package/src/default-theme/FullLayoutMarkup.tsx

@@ -1,231 +0,0 @@
-import * as React from 'react';
-import { useTheme, useMediaQuery } from '@mui/material';
-/* @ts-ignore */
-import Logo from '@app/assets/logo-horizontal.png';
-/* @ts-ignore */
-import BackImage from '@app/assets/login-back.png';
-
-export interface IFullLayoutMarkup<U = any, A = any> extends React.PropsWithChildren {
-    logo?: string | React.ReactNode;
-    loginBackground?: string | React.ReactNode;
-}
-
-const FullLayoutMarkup = <U, A>({
-    children,
-    className,
-    logo = <img alt='logo' className='dash-app-login-logo' src={Logo} />,
-    loginBackground = <img alt='' src={BackImage} />,
-    ...props
-}: IFullLayoutMarkup<U, A> & { className?: string }): React.JSX.Element => {
-    const theme = useTheme();
-    const isXs = useMediaQuery(theme.breakpoints.only('xs'));
-    const isSm = useMediaQuery(theme.breakpoints.only('sm'));
-    const isMd = useMediaQuery(theme.breakpoints.only('md'));
-    const isLg = useMediaQuery(theme.breakpoints.only('lg'));
-    const isXl = useMediaQuery(theme.breakpoints.only('xl'));
-    /*
-          // Mobile and keyboard state
-        const [isMobile, setIsMobile] = useState(false);
-        const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
-        const [keyboardHeight, setKeyboardHeight] = useState(0);
-    
-         
-        // Check if Capacitor Keyboard is available through window
-        const isCapacitorKeyboardAvailable = (): boolean => {
-            const hasCapacitor = !!(window as any)?.Capacitor?.Plugins?.Keyboard;
-            const hasCapacitorKeyboard = !!(window as any)?.CapacitorKeyboard;
-            console.log('Checking Capacitor keyboard availability:', { hasCapacitor, hasCapacitorKeyboard });
-            return hasCapacitor || hasCapacitorKeyboard;
-        };
-    
-        // Get Capacitor Keyboard instance from window
-        const getCapacitorKeyboard = () => {
-            return (window as any)?.Capacitor?.Plugins?.Keyboard || (window as any)?.CapacitorKeyboard;
-        };
-        
-        const checkMobileDevice = () => {
-            // Check body classes for mobile devices
-            const bodyClasses = document.body.className;
-            const hasMobileClass = bodyClasses.includes('webview') || 
-                                  bodyClasses.includes('android') || 
-                                  bodyClasses.includes('ios') || 
-                                  bodyClasses.includes('mobile');
-            
-            // Check screen width
-            const screenWidth = window.innerWidth;
-            const isSmallScreen = screenWidth < 700;
-            
-            // Consider mobile if either condition is true
-            return hasMobileClass || isSmallScreen;
-        };
-    
-        // Keyboard logging functions
-        const logKeyboardShow = (height?: number, source: 'capacitor' | 'fallback' = 'capacitor') => {
-            console.log(`🔼 KEYBOARD OPENED (${source}):`, {
-                height: height || 'unknown',
-                timestamp: new Date().toISOString(),
-                isMobile,
-                screenHeight: window.screen.height,
-                viewportHeight: window.visualViewport?.height || window.innerHeight,
-                source
-            });
-        };
-    
-        const logKeyboardHide = (source: 'capacitor' | 'fallback' = 'capacitor') => {
-            console.log(`🔽 KEYBOARD CLOSED (${source}):`, {
-                timestamp: new Date().toISOString(),
-                isMobile,
-                screenHeight: window.screen.height,
-                viewportHeight: window.visualViewport?.height || window.innerHeight,
-                source
-            });
-        };
-    
-        // Fallback keyboard detection for web/non-Capacitor environments
-        const setupFallbackKeyboardDetection = () => {
-            const handleResize = () => {
-                const mobile = checkMobileDevice();
-                setIsMobile(mobile);
-                
-                if (mobile) {
-                    // On mobile, detect keyboard by viewport height change
-                    const viewportHeight = window.visualViewport?.height || window.innerHeight;
-                    const screenHeight = window.screen.height;
-                    
-                    // If viewport is significantly smaller than screen, keyboard is likely open
-                    const keyboardThreshold = screenHeight * 0.75;
-                    const keyboardOpen = viewportHeight < keyboardThreshold;
-                    
-                    // Only log if keyboard state actually changed
-                    if (keyboardOpen !== isKeyboardOpen) {
-                        if (keyboardOpen) {
-                            const estimatedKeyboardHeight = screenHeight - viewportHeight;
-                            logKeyboardShow(estimatedKeyboardHeight, 'fallback');
-                            setKeyboardHeight(estimatedKeyboardHeight);
-                        } else {
-                            logKeyboardHide('fallback');
-                            setKeyboardHeight(0);
-                        }
-                        setIsKeyboardOpen(keyboardOpen);
-                    }
-                }
-            };
-    
-            // Add resize listeners
-            window.addEventListener('resize', handleResize);
-            if (window.visualViewport) {
-                window.visualViewport.addEventListener('resize', handleResize);
-            }
-            
-            return () => {
-                window.removeEventListener('resize', handleResize);
-                if (window.visualViewport) {
-                    window.visualViewport.removeEventListener('resize', handleResize);
-                }
-            };
-        };
-    
-        // Setup keyboard detection (Capacitor or fallback)
-        useEffect(() => {
-            // Initial mobile check
-            setIsMobile(checkMobileDevice());
-            
-            if (isCapacitorKeyboardAvailable()) {
-                const Keyboard = getCapacitorKeyboard();
-                
-                if (Keyboard) {
-                    console.log('🎹 Using Capacitor Keyboard API for keyboard detection');
-                    
-                    // Setup Capacitor keyboard listeners
-                    const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (info: any) => {
-                        console.log('📱 Capacitor: keyboard will show with height:', info.keyboardHeight);
-                        logKeyboardShow(info.keyboardHeight, 'capacitor');
-                        setIsKeyboardOpen(true);
-                        setKeyboardHeight(info.keyboardHeight);
-                    });
-    
-                    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (info: any) => {
-                        console.log('📱 Capacitor: keyboard did show with height:', info.keyboardHeight);
-                        // Don't log again here to avoid duplicate logs, just ensure state is correct
-                        setIsKeyboardOpen(true);
-                        setKeyboardHeight(info.keyboardHeight);
-                    });
-    
-                    const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
-                        console.log('📱 Capacitor: keyboard will hide');
-                        logKeyboardHide('capacitor');
-                        setIsKeyboardOpen(false);
-                        setKeyboardHeight(0);
-                    });
-    
-                    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-                        console.log('📱 Capacitor: keyboard did hide');
-                        // Don't log again here to avoid duplicate logs, just ensure state is correct
-                        setIsKeyboardOpen(false);
-                        setKeyboardHeight(0);
-                    });
-    
-                    // Cleanup function for Capacitor listeners
-                    return () => {
-                        keyboardWillShowListener.then((listener: any) => listener.remove());
-                        keyboardDidShowListener.then((listener: any) => listener.remove());
-                        keyboardWillHideListener.then((listener: any) => listener.remove());
-                        keyboardDidHideListener.then((listener: any) => listener.remove());
-                    };
-                }
-            }
-            
-            // If Capacitor is not available or Keyboard is not found, use fallback
-            console.log('🌐 Using fallback keyboard detection (viewport-based)');
-            return setupFallbackKeyboardDetection();
-        }, []);
-    
-        // Configure Capacitor Keyboard on mount (if available)
-        useEffect(() => {
-            const configureKeyboard = async () => {
-                if (isCapacitorKeyboardAvailable()) {
-                    const Keyboard = getCapacitorKeyboard();
-                    
-                    if (Keyboard) {
-                        try {
-                            console.log('⚙️ Configuring Capacitor Keyboard settings...');
-                            
-                            // Disable accessory bar for cleaner login UI
-                            await Keyboard.setAccessoryBarVisible({ isVisible: false });
-                            
-                            // Set resize mode to body for better control
-                            await Keyboard.setResizeMode({ mode: 'body' });
-                            
-                            console.log('✅ Capacitor Keyboard configured successfully');
-                        } catch (error) {
-                            console.log('❌ Error configuring Capacitor Keyboard:', error);
-                        }
-                    }
-                }
-            };
-    
-            configureKeyboard();
-        }, []);
-        */
-
-    const currentSize = isXs ? 'xs' : isSm ? 'sm' : isMd ? 'md' : isLg ? 'lg' : isXl ? 'xl' : '';
-    const largerToSm = currentSize === 'md' || currentSize === 'lg' || currentSize === 'xl';
-
-    // `logo`/`loginBackground` are still accepted for backwards compatibility
-    // with existing callers, but are no longer rendered as a decorative
-    // `.dash-app-login-back` side/stacked panel here — pages that want a
-    // logo/banner (e.g. DASHLightWeightLogin's "already logged in" screen)
-    // now render their own, inline with their content.
-    void largerToSm;
-    void logo;
-    void loginBackground;
-
-    return (
-        <div className={`dash-app-layout ${className || ''}`}>
-            <div className='dash-app-login-wrapper'>
-                {children}
-            </div>
-        </div>
-    );
-};
-export default FullLayoutMarkup;

package/src/default-theme/StaticLayout.tsx

@@ -1,47 +0,0 @@
-import { IDASHAppState } from 'dash-admin-state';
-import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
-import React, { PropsWithChildren } from 'react';
-import { useSelector } from 'react-redux';
-
-export interface IStaticLayout<U = any, A = any> extends React.PropsWithChildren { }
-
-const StaticLayout = <U, A>({
-    children,
-    ...props
-  }: IStaticLayout<U, A>): React.JSX.Element => {
-
-    const panelSettings = useSelector(
-		(state: IDASHAppState<U, A, IDashAutoAdminResourceConfig>) =>
-			state.common.panelSettings,
-	);
-
-	//const logo = panelSettings?.logo || <>🖥 DASH</>;
-	const squaredLogo = panelSettings?.squaredLogo || <>🖥.</>;
-    //const loginBackground = panelSettings?.loginBackground || <> Welcome to Dash Panel </>;
-
-	return (
-		<div className='dash-app-static'>
-			<div className='dash-app-static-wrapper'>
-				<div className='dash-app-static-content'>
-					<a href='/'>
-											{typeof squaredLogo === 'string' ? (
-												<img alt='logo' className='dash-app-static-logo' src={squaredLogo} />
-											) : (
-												<div className='dash-app-static-logo'>{squaredLogo}</div>
-											)}
-					</a>
-
-					{children}
-				</div>
-				{/*<div className='dash-app-back'>
-					<img alt='logo' src={ImgLogo} className='dash-app-logo' />
-					<div className='dash-app-login-img'>
-						<img src={ImgLoginBack} alt='' />
-					</div>
-				</div>*/}
-			</div>
-		</div>
-	);
-};
-
-export default StaticLayout;

package/src/default-theme/menu/AppDashboardGrid.tsx

@@ -1,279 +0,0 @@
-import * as React from 'react';
-
-import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Box, Paper, ButtonBase, Typography, useTheme, SxProps, Theme } from '@mui/material';
-import HorizontalScroller from '../../components/misc/HorizontalScroller';
-
-import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
-import { IDASHAppState } from 'dash-admin-state';
-
-import checkRole from '../../helpers/checkRole';
-import { useAuthContext } from '../../contexts/auth/AuthContext';
-import { useI18nBridge } from '../../contexts/I18nBridgeContext';
-
-export type DashboardGridCardSize = 'small' | 'medium' | 'large' | number;
-
-export interface IDashboardMenuGridColumns {
-    xs?: number;
-    sm?: number;
-    md?: number;
-    lg?: number;
-    xl?: number;
-}
-
-export interface IDashboardMenuGridProps {
-    /** Number of grid columns — a single number, or MUI-style responsive breakpoints. Default: { xs: 2, sm: 3, md: 4, lg: 6 }. */
-    columns?: number | IDashboardMenuGridColumns;
-    /** Caps the visible grid to this many rows, scrolling internally beyond that. Omit to let the grid grow with its content. */
-    rows?: number;
-    /**
-     * Which way the grid overflows once `rows` is set.
-     *
-     * 'vertical' (default) keeps the existing behaviour — fixed columns, scroll
-     * down. 'horizontal' lays the cards out in `rows` fixed rows flowing left to
-     * right and scrolls/swipes sideways, which suits a shortcut strip sharing a
-     * dashboard with other content: it takes a predictable amount of vertical
-     * space no matter how many resources a tenant has.
-     *
-     * Ignored without `rows` — there is nothing to overflow.
-     */
-    orientation?: 'vertical' | 'horizontal';
-    /** Card/icon preset, or an explicit card size in pixels. Default: 'large'. */
-    size?: DashboardGridCardSize;
-    /** Gap between cards, in MUI spacing units. Default: 2. */
-    gap?: number;
-    /** Overrides the resources pulled from the Redux store — mirrors AppMaterialMenu's `menu` prop, mainly for debugging/storybook. */
-    menu?: IDashAutoAdminResourceConfig[];
-    debug?: boolean;
-    sx?: SxProps<Theme>;
-    className?: string;
-}
-
-interface IDashboardGridItem {
-    key: React.Key;
-    label: string;
-    to: string;
-    icon?: IDashAutoAdminResourceConfig['icon'];
-}
-
-const SIZE_PRESETS: Record<'small' | 'medium' | 'large', { card: number; icon: number }> = {
-    small: { card: 96, icon: 32 },
-    medium: { card: 128, icon: 48 },
-    large: { card: 160, icon: 64 },
-};
-
-const resolveSize = (size: DashboardGridCardSize | undefined) => {
-    if (typeof size === 'number') {
-        return { card: size, icon: Math.round(size * 0.4) };
-    }
-    return SIZE_PRESETS[size ?? 'large'];
-};
-
-// Same convention AppMaterialMenu uses to turn a resource config into a
-// navigable path — kept in sync deliberately, so a resource lands on the
-// same URL whether it's clicked from the sidebar or from this grid.
-const buildMenuPath = (resource: IDashAutoAdminResourceConfig): string => {
-    if (resource.menuOnly) {
-        return resource.redirect || resource.path || `/${resource.model}`;
-    }
-    if (resource?.redirect?.startsWith('/')) {
-        return resource.redirect;
-    }
-    if (resource?.redirect) {
-        return `/${resource.model}/${resource.redirect}`.replace(/\/+/g, '/');
-    }
-    return `/${resource.model}`.replace(/\/+/g, '/');
-};
-
-const renderIcon = (icon: IDashAutoAdminResourceConfig['icon'], size: number) => {
-    if (!icon) return null;
-
-    if (React.isValidElement(icon)) {
-        const existingSx = (icon.props as any)?.sx;
-        return React.cloneElement(icon as React.ReactElement<any>, {
-            sx: { fontSize: size, color: 'primary.main', ...existingSx },
-        });
-    }
-
-    const IconComponent = icon as React.ComponentType<any>;
-    return <IconComponent sx={{ fontSize: size, color: 'primary.main' }} />;
-};
-
-/**
- * Flat, icon-first grid of every resource/menu option the current user can
- * access — a launcher-style alternative to the sidebar, meant to be dropped
- * into an app's Dashboard. Layout (columns/rows/card size) is fully
- * prop-driven; the item list itself always comes from the same role-filtered
- * resource set AppMaterialMenu uses, so the grid never drifts out of sync
- * with what's actually reachable from the sidebar.
- */
-const AppDashboardGrid: React.FC<IDashboardMenuGridProps> = ({
-    columns = { xs: 2, sm: 3, md: 4, lg: 6 },
-    rows,
-    size = 'large',
-    orientation = 'vertical',
-    gap = 2,
-    menu,
-    debug,
-    sx,
-    className,
-}) => {
-    const navigate = useNavigate();
-    const theme = useTheme();
-    const authContext = useAuthContext();
-    const { i18nProvider } = useI18nBridge();
-
-    const translate = React.useCallback((key: string, options?: any) => {
-        if (typeof key !== 'string') return key;
-        if (i18nProvider?.translate) {
-            try {
-                return i18nProvider.translate(key, options);
-            } catch {
-                return key;
-            }
-        }
-        return key;
-    }, [i18nProvider]);
-
-    const resources = useSelector(
-        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) => {
-            if (debug || menu) return menu;
-            return state.resources.items;
-        },
-    );
-
-    const items = React.useMemo<IDashboardGridItem[]>(() => {
-        const userRoles = authContext?.user?.roles
-            ? authContext.user.roles.flatMap((role) => role.name)
-            : ['Public'];
-
-        return (resources || [])
-            .filter((resource) => resource.hidden !== true && checkRole(userRoles, resource.roles || []))
-            .map((resource) => {
-                const label = resource.label || resource.model;
-                return {
-                    key: label,
-                    label: translate(label, { _: label }),
-                    to: buildMenuPath(resource),
-                    icon: resource.icon,
-                };
-            });
-    }, [resources, authContext?.user, translate]);
-
-    const { card: cardSize, icon: iconSize } = resolveSize(size);
-
-    const columnTemplate = React.useMemo(() => {
-        if (typeof columns === 'number') {
-            return `repeat(${columns}, minmax(0, 1fr))`;
-        }
-        return {
-            xs: `repeat(${columns.xs ?? 2}, minmax(0, 1fr))`,
-            sm: `repeat(${columns.sm ?? columns.xs ?? 3}, minmax(0, 1fr))`,
-            md: `repeat(${columns.md ?? columns.sm ?? 4}, minmax(0, 1fr))`,
-            lg: `repeat(${columns.lg ?? columns.md ?? 6}, minmax(0, 1fr))`,
-            xl: `repeat(${columns.xl ?? columns.lg ?? 6}, minmax(0, 1fr))`,
-        };
-    }, [columns]);
-
-    if (!items.length) return null;
-
-    const gapPx = theme.spacing(gap);
-
-    // Defined once and used by both layouts — the two branches differ only in
-    // how the cards are arranged, never in what a card is.
-    const cards = items.map((item) => (
-        <ButtonBase
-            key={item.key}
-            onClick={() => navigate(item.to)}
-            sx={{ display: 'block', borderRadius: 2, textAlign: 'left' }}
-        >
-                    <Paper
-                        variant="outlined"
-                        sx={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            gap: 1,
-                            height: cardSize,
-                            width: '100%',
-                            p: 2,
-                            borderRadius: 2,
-                            transition: 'background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease',
-                            '&:hover': {
-                                bgcolor: 'action.hover',
-                                borderColor: 'primary.main',
-                                transform: 'translateY(-2px)',
-                            },
-                        }}
-                    >
-                        {renderIcon(item.icon, iconSize)}
-                        <Typography
-                            variant="body2"
-                            align="center"
-                            sx={{
-                                fontWeight: 500,
-                                lineHeight: 1.2,
-                                display: '-webkit-box',
-                                WebkitLineClamp: 2,
-                                WebkitBoxOrient: 'vertical',
-                                overflow: 'hidden',
-                            }}
-                        >
-                            {item.label}
-                        </Typography>
-                    </Paper>
-        </ButtonBase>
-    ));
-
-    // The horizontal strip is wrapped in HorizontalScroller so it gets the same
-    // arrows-plus-swipe behaviour as the category carousel on the create-tab
-    // screen, rather than a second, subtly different way of scrolling.
-    if (rows && orientation === 'horizontal') {
-        return (
-            <HorizontalScroller
-                className={className}
-                ariaLabel="dashboard shortcuts"
-                step={Math.round(cardSize * 1.1) * 2}
-                trackSx={{
-                    display: 'grid',
-                    gap,
-                    gridAutoFlow: 'column',
-                    gridTemplateRows: `repeat(${rows}, ${cardSize}px)`,
-                    // A definite column width so the content can exceed the
-                    // container; `1fr` would shrink to fit and never scroll.
-                    gridAutoColumns: `${Math.round(cardSize * 1.1)}px`,
-                    pb: 1,
-                }}
-                sx={sx}
-            >
-                {cards}
-            </HorizontalScroller>
-        );
-    }
-
-    return (
-        <Box
-            className={className}
-            sx={{
-                display: 'grid',
-                gap,
-                ...(rows
-                    ? {
-                          gridAutoRows: cardSize,
-                          maxHeight: `calc(${rows} * ${cardSize}px + ${rows - 1} * ${gapPx})`,
-                          overflowY: 'auto',
-                          pr: 1,
-                      }
-                    : {}),
-                gridTemplateColumns: columnTemplate,
-                ...sx,
-            }}
-        >
-            {cards}
-        </Box>
-    );
-};
-
-export default AppDashboardGrid;