@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/layout/ResourceMenu.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from 'react';
+import { useRedirect, useRefresh, useTranslate } from 'react-admin';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router';
+import IAppResourceConfig from '../interfaces/IAppResourceConfig';
+import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import useVirtualHash from '../hooks/useVirtualHash';
+import { Button, ButtonGroup } from '@mui/material';
+import DashResourceButton from 'dash-auto-admin/src/toolbar/buttons/DashResourceButton';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+/**
+ * Check if a string looks like a translation key
+ */
+const isTranslationKey = (value: string): boolean => {
+    if (!value || typeof value !== 'string') return false;
+    // Translation keys typically contain dots and are lowercase
+    return value.includes('.') && value === value.toLowerCase();
+};
+
+export interface IResourceMenu {
+    resourceConfig: IAppResourceConfig;
+    locale?: string;
+}
+
+/**
+ * Resource Menu
+ *
+ * @description Renders the op tabs navigation menu
+ *
+ * @param {IResourceMenu} props - Functional Component Props
+ * @param {IDashAutoAdminResourceConfig} props.resourceConfig - Resource Config
+ *
+ * @returns {JSX.Element} - JSX element
+ */
+const ResourceMenu: React.FC<IResourceMenu> = (props) => {
+    const { resourceConfig, locale } = props;
+    const { resourceMenuDisabled = false, resourceMenuPosition = 'top' } =
+        resourceConfig;
+
+    const redirect = useRedirect();
+    const translate = useTranslate();
+    const { hash, setVirtualHash } = useVirtualHash();
+    const location = useLocation();
+
+    /**
+     * Translate a label if it's a translation key, otherwise return as-is
+     */
+    const translateLabel = (label: string): string => {
+        if (!label) return '';
+        if (isTranslationKey(label)) {
+            const translated = translate(label, { _: label });
+            // If translation returns the key itself, use the label as-is
+            return translated === label ? label : translated;
+        }
+        return label;
+    };
+
+    const dispatch = useDispatch();
+    const updatePageState = (menuItem) => {
+        const newPageState: IPageState = {
+            title: translateLabel(menuItem?.title),
+            //icon: item?.icon,
+            //subTitle: item?.group,
+        };
+        dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
+    };
+
+    const handleMenuClick = (menuItem, e) => {
+        updatePageState(menuItem);
+       
+        // @deprecated - removed currentAppPath logic that caused path duplication
+        let _redirect =  menuItem.redirect?.startsWith('/')
+                    ? menuItem.redirect
+                    : `/${menuItem.redirect}`.replace(/\/+/g, '/');
+        
+        
+
+        menuItem.redirect ? redirect(_redirect) : menuItem?.onClick();
+    };
+
+
+    const [resourceMenu, setResourceMenu] = useState(null);
+    const loc = useLocation();
+
+    useEffect(() => {
+        const val = Array.isArray(resourceConfig.menu)
+            ? resourceConfig.menu
+            : typeof resourceConfig.menu === 'function'
+                ? resourceConfig.menu()
+                : null;
+        setResourceMenu(val);
+    }, [resourceConfig.menu, locale]);
+
+    useEffect(() => {
+        const val = Array.isArray(resourceConfig.menu)
+            ? resourceConfig.menu
+            : typeof resourceConfig.menu === 'function'
+                ? resourceConfig.menu()
+                : null;
+        setResourceMenu(val);
+    }, [loc, resourceConfig.menu, locale]);
+
+    //const refresh = useRefresh();
+
+    return (
+        <div className={`dash-module-${resourceMenuPosition}`}>
+           
+                
+                
+            
+            {resourceConfig.mainAction && (
+                <div className='dash-module-action'>
+
+                        
+                        
+                           {/* <DashResourceButton
+                                resourceConfig={resourceConfig}
+                                label={"Refrescar"}
+                                mode={resourceConfig.mainAction?.mode || 'custom'}  >
+                                 <Button
+                                onClick={() => refresh()}
+                            >
+                                <RefreshIcon />
+                            </Button>
+                            </DashResourceButton>*/}
+
+
+                            {(resourceConfig.create !== false) && !location.pathname.endsWith('/create') && <DashResourceButton
+                                size='small'    
+                                resourceConfig={resourceConfig}
+                                label={translateLabel(resourceConfig.mainAction.title)}
+                                mode={resourceConfig.mainAction?.mode || 'create'}  />
+                            }
+                            {resourceConfig.navActions && resourceConfig.navActions.map((action) => action)}
+                      
+                </div>
+            )}
+            <div className={`dash-module-${resourceMenuPosition}-content`}>
+                <ul className='dash-module-horizontal-nav'>
+                    {resourceMenu &&
+                        resourceMenu.map((menuItem, index) => {
+                            let active: boolean = location.pathname === menuItem?.redirect;
+                            return (
+                                <li
+                                    key={index}
+                                    onClick={(e) => handleMenuClick(menuItem, e)}
+                                    className={active ? 'active' : null}
+                                >
+                                    <span className={'dash-link'}>
+                                        <i className={`icon icon-${menuItem?.icon}`} />
+                                        <span>{translateLabel(menuItem.title)}</span>
+                                    </span>
+                                </li>
+                            );
+                        })}
+                </ul>
+
+            </div>
+        </div>
+    );
+};
+
+export default ResourceMenu;

package/src/layout/ResoureLayout.tsx

@@ -0,0 +1,105 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import ResourceMenu from './ResourceMenu';
+import IAppResourceConfig from '../interfaces/IAppResourceConfig';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+
+/**
+ * Resource Layout
+ *
+ * @description The resource is the wrapper for all the views methods available in the ResourceTemplate such as ['show','edit','list','view']
+ * its parent HoC is the ResourceTemplate
+ * The main goal is to provide a side navigation around the main content.
+ *
+ * Notice: side styles are not implemented in DASH V2 project
+ *
+ * @param {IResourceLayout} props - Functional Component Props
+ * @param {IDashAutoAdminResourceConfig} props.resourceConfig - Resource Config
+ * @param {string} props.position - "top"
+ * @param {boolean} props.showToolbar - default true, shows or hide the navigation toolbar
+ * @param {JSX.Element} props.children - Children content such as Show, Edit, DataGrid
+ *
+ * @returns {JSX.Element} - JSX element
+ */
+
+export interface IResourceLayout extends PropsWithChildren {
+	/** React Auto Admin Resource Config */
+	resourceConfig: IAppResourceConfig;
+    /** Current locale */
+    locale?: string;
+}
+
+// Memoized ResourceMenu component
+const MemoizedResourceMenu = React.memo(({ 
+	resourceConfig,
+    locale
+}: { 
+	resourceConfig: IAppResourceConfig;
+    locale?: string;
+}) => (
+	<ResourceMenu resourceConfig={resourceConfig} locale={locale} />
+), (prevProps, nextProps) => {
+	return prevProps.resourceConfig === nextProps.resourceConfig && prevProps.locale === nextProps.locale;
+});
+
+const ResourceLayout: React.FC<IResourceLayout> = (props) => {
+	const { resourceConfig, children, locale } = props;
+
+	// Memoize the destructured values to prevent unnecessary recalculations
+	const { resourceMenuDisabled, resourceMenuPosition } = useMemo(() => ({
+		resourceMenuDisabled: resourceConfig.resourceMenuDisabled ?? false,
+		resourceMenuPosition: resourceConfig.resourceMenuPosition ?? 'top'
+	}), [resourceConfig.resourceMenuDisabled, resourceConfig.resourceMenuPosition]);
+
+	// Memoize the condition for showing the menu
+	const shouldShowMenu = useMemo(() => {
+      
+		return (resourceConfig.mainAction ||
+			(resourceConfig.menu && resourceConfig.menu.length > 0)) &&
+			!resourceMenuDisabled;
+	}, [
+		resourceConfig.mainAction,
+		resourceConfig.menu,
+		resourceMenuDisabled
+	]);
+
+	// Memoize the header content
+	const headerContent = useMemo(() => {
+		if (!shouldShowMenu) return null;
+
+		return (
+			<div className='dash-module-box-header'>
+				<div className='dash-module-sidenav dash-d-none dash-d-lg-flex'>
+					<MemoizedResourceMenu resourceConfig={resourceConfig} locale={locale} />
+				</div>
+			</div>
+		);
+	}, [shouldShowMenu, resourceConfig]);
+
+	return (
+		<div className='dash-app-module'>
+			<div className='dash-module-horizontal-box' style={{ maxWidth: '100%' }}>
+				{headerContent}
+				<div className='dash-module-box-content'>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+// Memoize the entire component
+export default React.memo(ResourceLayout, (prevProps, nextProps) => {
+	// Compare resourceConfig reference and locale
+	const propsEqual = prevProps.resourceConfig === nextProps.resourceConfig && 
+                      prevProps.locale === nextProps.locale;
+	
+	// Debug logging (remove in production)
+	if (!propsEqual) {
+		console.log('ResourceLayout re-rendering:', {
+			resourceConfigChanged: prevProps.resourceConfig !== nextProps.resourceConfig,
+            localeChanged: prevProps.locale !== nextProps.locale
+		});
+	}
+
+	return propsEqual;
+});

package/src/layout/TransitionWrapper.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+export interface ITransitionWrapper {
+  pageTransition?: boolean;
+  loadingSpinner?: boolean;
+  transitionDuration?: number;
+}
+
+const TransitionWrapper: React.FC<ITransitionWrapper> = (props) => {
+  const {
+    pageTransition = true,
+    loadingSpinner = true,
+    transitionDuration = 500 // in ms
+  } = props;
+  
+  const location = useLocation();
+  const [displayLocation, setDisplayLocation] = useState(location);
+  const [showSpinner, setShowSpinner] = useState(false);
+  const [spinnerOpacity, setSpinnerOpacity] = useState(0);
+  const [isReady, setIsReady] = useState(true);
+  
+  useEffect(() => {
+    // Skip transition for same route
+    if (!pageTransition || location.pathname === displayLocation.pathname) {
+      return;
+    }
+    
+    // Sequence the transition
+    const sequence = async () => {
+      // Step 1: Mark as not ready (prevents premature outlet updates)
+      setIsReady(false);
+      
+      // Step 2: Show spinner container with opacity 0
+      setShowSpinner(true);
+      
+      // Step 3: Wait a frame to ensure DOM is updated
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      
+      // Step 4: Fade in spinner
+      setSpinnerOpacity(1);
+      
+      // Step 5: Wait for spinner to fully fade in
+      await new Promise(resolve => setTimeout(resolve, transitionDuration));
+      
+      // Step 6: Update outlet content (while spinner is fully visible)
+      setDisplayLocation(location);
+      
+      // Step 7: Wait a moment to ensure outlet content is updated
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      // Step 8: Start fading out spinner
+      setSpinnerOpacity(0);
+      
+      // Step 9: Wait for spinner to fully fade out
+      await new Promise(resolve => setTimeout(resolve, transitionDuration));
+      
+      // Step 10: Hide spinner container
+      setShowSpinner(false);
+      
+      // Step 11: Mark as ready for next transition
+      setIsReady(true);
+    };
+    
+    sequence();
+  }, [location, displayLocation, pageTransition, transitionDuration]);
+  
+  return (
+    <div className="transition-container" style={{ position: 'relative', height: '100%' }}>
+      {/* Main content */}
+      <div>
+        <Outlet key={displayLocation.pathname} />
+      </div>
+      
+      {/* Spinner overlay */}
+      {loadingSpinner && showSpinner && (
+        <div 
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1000,
+            opacity: spinnerOpacity,
+            transition: `opacity ${transitionDuration}ms ease-in-out`,
+          }}
+        >
+          <div className="spinner">
+            <style>{`
+              .spinner {
+                display: inline-block;
+                position: relative;
+                width: 80px;
+                height: 80px;
+              }
+              .spinner:after {
+                content: " ";
+                display: block;
+                border-radius: 50%;
+                width: 0;
+                height: 0;
+                margin: 8px;
+                box-sizing: border-box;
+                border: 32px solid #3f51b5;
+                border-color: #3f51b5 transparent #3f51b5 transparent;
+                animation: spinner 1.2s infinite;
+              }
+              @keyframes spinner {
+                0% { transform: rotate(0); }
+                100% { transform: rotate(360deg); }
+              }
+            `}</style>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TransitionWrapper;

package/src/pages/ChangePassword.tsx

@@ -0,0 +1,179 @@
+import { Alert, Box, Button, Input, InputLabel, TextField } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import useAxios from '../hooks/axios';
+import { FullLayoutMarkup } from '../default-theme';
+
+const getUrlParamsObject = (searchParams: any) => {
+	let params: Record<string, any> = {};
+	for (const entry of searchParams) {
+		const [param, value] = entry;
+		params = { ...params, [param]: value };
+	}
+	return Object.keys(params).length > 0 ? params : null;
+};
+
+
+interface ChangePasswordProps {
+   
+    onAuthChange?: (authenticated: any) => void;
+}
+
+const ChangePassword: React.FC<ChangePasswordProps> = ({
+   
+}) => {
+	const navigate = useNavigate();
+	let [searchParams] = useSearchParams();
+	// @ts-ignore - URLSearchParams.entries() type issue
+	const urlQuery: any = getUrlParamsObject(searchParams.entries());
+	// Fix: Remove any trailing non-email characters (like parenthesis) from email param
+	const cleanEmail = urlQuery?.email ? decodeURIComponent(urlQuery.email).replace(/[)\]\s]+$/, '') : '';
+
+	const [password, setPassword] = useState('');
+	const [rePassword, setRePassword] = useState('');
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState('');
+	const [success, setSuccess] = useState(false);
+	const { axios } = useAxios();
+
+	useEffect(() => {
+		if (!urlQuery?.token || !urlQuery?.email) {
+			navigate('/login');
+		}
+	}, []);
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		if (password === rePassword) {
+			setError('');
+			setLoading(true);
+			try {
+				const { data } = await axios.post(`password/reset`, {
+					password,
+					password_confirmation: rePassword,
+					token: urlQuery?.token,
+					email: cleanEmail,
+				});
+				setSuccess(true);
+				// Optionally show notification here
+			} catch (error: any) {
+				let errorMsg = 'Error al cambiar contraseña';
+				if (error?.response?.data) {
+					const resp = error.response.data;
+					// Prefer error from errors.email, then message, then fallback
+					if (resp.errors && resp.errors.email && resp.errors.email.length > 0) {
+						errorMsg = resp.errors.email[0];
+					} else if (resp.message) {
+						errorMsg = resp.message;
+					}
+				} else if (error?.message) {
+					errorMsg = error.message;
+				}
+				setError(errorMsg);
+			} finally {
+				setLoading(false);
+			}
+		} else {
+			setError('Las contraseñas no coinciden');
+		}
+	};
+
+	return (
+		<FullLayoutMarkup>
+			{success ? (
+				<Box
+					sx={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						boxShadow: 3,
+						borderRadius: 2,
+						p: 4,
+						minWidth: 320,
+						minHeight: 200,
+						bgcolor: 'background.paper',
+						mt: 8,
+						mx: 'auto',
+					}}
+				>
+					<h1 className="dash-app-login-form-title" style={{ margin: 0 }}>Contraseña cambiada</h1>
+					<Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+						Tu contraseña ha sido cambiada correctamente.
+					</Alert>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={() => navigate('/login')}
+						sx={{ mt: 2 }}
+					>
+						Ir al Login
+					</Button>
+				</Box>
+			) : (
+				<form 
+					onSubmit={handleSubmit} 
+					className="dash-app-login-form"
+					autoComplete="on"
+					method="post"
+				>
+					<h1 className="dash-app-login-form-title">Cambiar Contraseña</h1>
+
+					{error && (
+						<Alert severity="error" sx={{ mb: 2 }}>
+							{error}
+						</Alert>
+					)}
+
+					<div className="dash-app-form-item">
+						<TextField
+							fullWidth
+							label="Contraseña"
+							placeholder="Contraseña"
+							required
+							type="password"
+							value={password}
+							onChange={(e) => {
+								setError('');
+								setPassword(e.target.value);
+							}}
+							className="dash-app-form-item-input"
+							disabled={loading}
+						/>
+					</div>
+
+					<div className="dash-app-form-item">
+						<TextField
+							fullWidth
+							label="Repetir Contraseña"
+							placeholder="Repetir Contraseña"
+							required
+							type="password"
+							value={rePassword}
+							onChange={(e) => {
+								setError('');
+								setRePassword(e.target.value);
+							}}
+							className="dash-app-form-item-input"
+							disabled={loading}
+						/>
+					</div>
+
+					<div className="dash-app-form-item mt-1">
+						<Button
+							type="submit"
+							variant="contained"
+							className="submit"
+							disabled={loading}
+							sx={{ mb: 2, width: '100%' }}
+						>
+							{loading ? 'Cargando...' : 'Cambiar Contraseña'}
+						</Button>
+					</div>
+				</form>
+			)}
+		</FullLayoutMarkup>
+	);
+};
+
+export default ChangePassword;

package/src/pages/DASHLanding.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Button, Typography } from '@mui/material';
+import { useForm } from 'react-hook-form';
+
+interface Props {
+    
+}
+
+const DashLanding: React.FC<Props> = () => {
+  
+
+    return (
+        <Box sx={{ p: 4 }}>
+            <Typography variant="h4" gutterBottom>
+                Welcome to DASH
+            </Typography>
+            
+        </Box>
+    );
+};
+
+export default DashLanding;