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

package/src/layout/ResoureLayout.tsx

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

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

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

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