@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/react-admin-dash/RADashComponent.tsx

@@ -0,0 +1,240 @@
+import { useContext, useEffect } from 'react';
+import { useGetIdentity, useResourceDefinitions } from 'react-admin';
+import { useAuthContext } from '../contexts/auth';
+import { useDialog } from 'dash-dialog';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { dashStorage } from 'dash-utils';
+declare global {
+    interface Window {
+        __DASH_DEBUG__: any;
+    }
+}
+
+// Debugging logic moved to a custom hook
+function useRADashDebug({
+    location,
+    resourceDefinitions,
+    reduxState,
+    authContext,
+    identity,
+    identityLoading,
+    dialog,
+    navigate,
+}) {
+    useEffect(() => {
+        // Enhanced route debugging
+        const debugInfo = {
+            timestamp: new Date().toISOString(),
+            location: {
+                pathname: location.pathname,
+                search: location.search,
+                hash: location.hash,
+                state: location.state,
+                key: location.key
+            },
+            reactAdminResources: Object.keys(resourceDefinitions || {}),
+            resourceDefinitionsDetails: resourceDefinitions,
+            reduxResources: reduxState.resources.map(r => ({
+                model: r.model,
+                label: r.label,
+                roles: r.roles,
+                group: r.group
+            })),
+            authContext: {
+                authenticated: authContext.authenticated,
+                user: authContext.user ? {
+                    id: authContext.user.id,
+                    roles: authContext.user.roles,
+                    tenant_id: authContext.user.tenant_id
+                } : null
+            },
+            localStorage: {
+                currentAppPath: dashStorage.getItem('currentAppPath'),
+                currentMallSlug: dashStorage.getItem('currentMallSlug'),
+                currentMallPath: dashStorage.getItem('currentMallPath'),
+                tenant_id: dashStorage.getItem('tenant_id'),
+                userData: dashStorage.getItem('userData')
+            },
+            windowLocation: {
+                href: window.location.href,
+                origin: window.location.origin,
+                pathname: window.location.pathname,
+                search: window.location.search,
+                hash: window.location.hash
+            }
+        };
+
+        console.group('🔍 RADashComponent Route Debug');
+        console.log('📍 Current Location:', debugInfo.location);
+        console.log('🌐 Window Location:', debugInfo.windowLocation);
+        console.log('📦 React Admin Resources:', debugInfo.reactAdminResources);
+        console.log('📋 Resource Definitions:', debugInfo.resourceDefinitionsDetails);
+        console.log('🏪 Redux Resources:', debugInfo.reduxResources);
+        console.log('🔐 Auth Context:', debugInfo.authContext);
+        console.log('💾 Local Storage:', debugInfo.localStorage);
+        
+        // Check for route matches
+        const currentPath = location.pathname;
+        const matchingResources = reduxState.resources.filter(resource => {
+            const resourcePath = resource.model;
+            const matches = currentPath.includes(resourcePath) || resourcePath === '/' && currentPath === '/';
+            return matches;
+        });
+        
+        console.log('🎯 Matching Resources for current path:', matchingResources);
+        
+        // Check if current path should match any resource
+        const pathSegments = currentPath.split('/').filter(Boolean);
+        console.log('📂 Path Segments:', pathSegments);
+        
+        // Analyze potential routing issues
+        const routingIssues = [];
+        
+        if (reduxState.resources.length === 0) {
+            routingIssues.push('No resources loaded in Redux state');
+        }
+        
+        if (Object.keys(resourceDefinitions || {}).length === 0) {
+            routingIssues.push('No React Admin resource definitions found');
+        }
+        
+        if (matchingResources.length === 0 && currentPath !== '/') {
+            routingIssues.push(`No resources match current path: ${currentPath}`);
+        }
+        
+        if (!authContext.authenticated && reduxState.resources.some(r => !r.roles?.includes('Public'))) {
+            routingIssues.push('User not authenticated but trying to access protected resources');
+        }
+        
+        if (routingIssues.length > 0) {
+            console.warn('⚠️ Potential Routing Issues:', routingIssues);
+        }
+        
+        console.groupEnd();
+        
+        // Store debug info globally for inspection
+        window.__DASH_DEBUG__ = {
+            ...window.__DASH_DEBUG__,
+            lastRouteDebug: debugInfo,
+            routingIssues
+        };
+        
+    }, [location, resourceDefinitions, reduxState, authContext]);
+
+    useEffect(() => {
+        // Debug resource changes
+        console.group('📦 Resource Definitions Changed');
+        console.log('Available Resources:', Object.keys(resourceDefinitions || {}));
+        console.log('Resource Details:', resourceDefinitions);
+        console.groupEnd();
+    }, [resourceDefinitions]);
+
+    useEffect(() => {
+        // Debug auth changes
+        console.group('🔐 Auth Context Changed');
+        console.log('Authenticated:', authContext.authenticated);
+        console.log('User:', authContext.user);
+        console.log('Identity Loading:', identityLoading);
+        console.log('Identity:', identity);
+        console.groupEnd();
+    }, [authContext.authenticated, authContext.user, identityLoading, identity]);
+
+    useEffect(() => {
+        // Global axios error handler
+        const handleGlobalAxiosError = (event) => {
+            console.error('🚨 Global Axios Error:', event.data);
+            dialog({
+                variant: 'danger',
+                title: event.data?.name || "Error",
+                content: event.data?.message || "Error desconocido",
+                confirmText: 'Volver',
+                closeText: 'Cerrar',
+                onConfirm: () => {},
+                onClose: () => {},
+            });
+        };
+
+        window.addEventListener('global-axios-error', handleGlobalAxiosError);
+        return () => {
+            window.removeEventListener('global-axios-error', handleGlobalAxiosError);
+        };
+    }, [dialog]);    
+
+    useEffect(() => {
+        // Debug React Admin routing errors
+        const handleReactAdminError = (error) => {
+            console.error('🚨 React Admin Error:', error);
+            // Check if it's a routing error
+            if (error.message?.includes('404') || error.message?.includes('not found')) {
+                console.group('🔍 Route Not Found Debug');
+                console.log('Current path:', location.pathname);
+                console.log('Available resources:', Object.keys(resourceDefinitions || {}));
+                console.log('Redux resources:', reduxState.resources.map(r => r.model));
+                console.log('Suggested fixes:');
+                console.log('1. Check if resource model matches the URL path');
+                console.log('2. Verify resource permissions/roles');
+                console.log('3. Ensure resource is properly registered');
+                console.groupEnd();
+            }
+        };
+
+        window.addEventListener('error', handleReactAdminError);
+        window.addEventListener('unhandledrejection', (event) => {
+            handleReactAdminError(event.reason);
+        });
+
+        return () => {
+            window.removeEventListener('error', handleReactAdminError);
+            window.removeEventListener('unhandledrejection', handleReactAdminError);
+        };
+    }, [location.pathname, resourceDefinitions, reduxState.resources]);
+
+    useEffect(() => {
+        // Add a helper function to manually trigger route analysis
+        window.__DASH_DEBUG__ = {
+            ...window.__DASH_DEBUG__,
+            analyzeCurrentRoute: () => {
+                console.group('🔍 Manual Route Analysis');
+                console.log('Current pathname:', location.pathname);
+                console.log('React Admin resources:', Object.keys(resourceDefinitions || {}));
+                console.log('Redux resources:', reduxState.resources);
+                
+                // Try to find why route is not matching
+                const pathWithoutLeadingSlash = location.pathname.replace(/^\//, '');
+                const pathSegments = pathWithoutLeadingSlash.split('/').filter(Boolean);
+                
+                console.log('Path segments:', pathSegments);
+                
+                // Check each resource for potential matches
+                reduxState.resources.forEach(resource => {
+                    const resourceModel = resource.model.replace(/^\//, '');
+                    const matches = pathSegments[0] === resourceModel || 
+                                  (resource.model === '/' && location.pathname === '/');
+                    
+                    console.log(`Resource "${resource.model}" matches:`, matches, {
+                        resourceModel,
+                        firstPathSegment: pathSegments[0],
+                        roles: resource.roles,
+                        authenticated: authContext.authenticated
+                    });
+                });
+                
+                console.groupEnd();
+            },
+            navigateToResource: (resourceName) => {
+                console.log(`Navigating to resource: ${resourceName}`);
+                navigate(`/${resourceName}`);
+            }
+        };
+    }, [location, resourceDefinitions, reduxState, authContext, navigate]);
+}
+
+const RADashComponent = () => {
+  
+   
+ 
+    return null;
+};
+
+export default RADashComponent;

package/src/react-admin-dash/Resource.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { ComponentType, ReactElement, isValidElement, Children } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { isValidElementType } from 'react-is';
+import { ResourceContextProvider, ResourceProps, RestoreScrollPosition } from 'react-admin';
+
+export const Resource = (props: ResourceProps) => {
+    const { create, edit, list, name, show } = props;
+
+    // Note: In React Router v7, we cannot pass arbitrary children to Routes.
+    // The trash route and other custom routes should be handled via CustomRoutes
+    // at the parent level, not as children of Resource.
+ 
+    return (
+        <ResourceContextProvider value={name}>
+            <Routes>
+                {create ? (
+                    <Route path="create/*" element={getElement(create)} />
+                ) : null}
+                {show ? <Route path=":id/show/*" element={getElement(show)} /> : null}
+                {edit ? <Route path=":id/*" element={getElement(edit)} /> : null}
+                {list ? (
+                    <Route
+                        path="/*"
+                        element={
+                            <RestoreScrollPosition
+                                storeKey={`${name}.list.scrollPosition`}
+                            >
+                                {getElement(list)}
+                            </RestoreScrollPosition>
+                        }
+                    />
+                ) : null}
+            </Routes>
+        </ResourceContextProvider>
+    );
+};
+
+const getElement = (ElementOrComponent: ComponentType<any> | ReactElement) => {
+   
+    if (isValidElement(ElementOrComponent)) {
+        return ElementOrComponent;
+    }
+
+    if (isValidElementType(ElementOrComponent)) {
+        const Element = ElementOrComponent as ComponentType<any>;
+        return <Element />;
+    }
+
+    return null;
+};
+
+Resource.raName = 'Resource';
+
+Resource.registerResource = ({
+    create,
+    edit,
+    icon,
+    list,
+    name,
+    options,
+    show,
+    recordRepresentation,
+    hasCreate,
+    hasEdit,
+    hasShow,
+}: ResourceProps) => ({
+    name,
+    options,
+    hasList: !!list,
+    hasCreate: !!create || !!hasCreate,
+    hasEdit: !!edit || !!hasEdit,
+    hasShow: !!show || !!hasShow,
+    icon,
+    recordRepresentation,
+});
+

package/src/resources/Brand/BrandResource.tsx

@@ -0,0 +1,130 @@
+import { Resource, TabbedShowLayout } from 'react-admin';
+import { Show } from 'react-admin';
+// @ts-ignore - Layout may not exist
+import ApplicationLayout from '../../layouts/ApplicationLayout';
+import { IAppResourceConfig } from '../../interfaces/IAppResourceConfig';
+import { useNotify } from 'react-admin';
+import { useRedirect } from 'react-admin';
+// @ts-ignore - Dialog service may not exist
+import { useDialog } from '../../components/Dialog/DialogService';
+import { TopToolbar } from 'react-admin';
+import { EditButton } from 'react-admin';
+import { CustomRoutes } from 'react-admin';
+import { Route } from 'react-router';
+import TrashTemplate from '../Trash/TrashTemplate';
+// @ts-ignore - dash-auto-admin imports may not be available
+import AutoCreate from 'dash-auto-admin/AutoCreate';
+// @ts-ignore - dash-auto-admin imports may not be available
+import AutoEdit from 'dash-auto-admin/AutoEdit';
+// @ts-ignore - dash-auto-admin imports may not be available
+import DashAutoList from 'dash-auto-admin/DashAutoList';
+// @ts-ignore - dash-auto-admin imports may not be available
+import AutoReferenceTab from 'dash-auto-admin/AutoReferenceTab';
+// @ts-ignore - dash-auto-admin imports may not be available
+import AutoTabs from 'dash-auto-admin/AutoTabs';
+// @ts-ignore - dash-auto-admin imports may not be available
+import { AutoTitle } from 'dash-auto-admin';
+
+export const BrandResource = (resourceConfig: IAppResourceConfig) => {
+	const beforeSubmut = (data: any) => {
+		data.input_brand_mappings = data.input_brand_mappings.map(
+			(ele) => ele.text,
+		);
+		return data;
+	};
+
+	return (
+		<>
+			<CustomRoutes>{TrashTemplate(resourceConfig)}</CustomRoutes>
+			<Resource
+				options={{ label: resourceConfig.label, group: resourceConfig.group }}
+				name={resourceConfig.model}
+				list={() => {
+					return (
+						<ApplicationLayout resourceConfig={resourceConfig}>
+							<DashAutoList
+								/*sx={{
+                    flexGrow: 1
+                }}*/
+								/*search={resourceConfig.search} schema={resourceConfig.listSchema ? resourceConfig.listSchema : resourceConfig.schema} BulkActions={resourceConfig.BulkActions} create={resourceConfig.create}*/ resourceConfig={
+									resourceConfig
+								}
+							/>
+						</ApplicationLayout>
+					);
+				}}
+				edit={() => (
+					<ApplicationLayout resourceConfig={resourceConfig}>
+						<AutoEdit
+							beforeSubmit={beforeSubmut}
+							//schema={resourceConfig.editSchema ? resourceConfig.editSchema : resourceConfig.schema}
+							resourceConfig={resourceConfig}
+						/>
+					</ApplicationLayout>
+				)}
+				create={() => {
+					const notify = useNotify();
+					const redirect = useRedirect();
+					const dialog = useDialog();
+					const onCreate = (data: any) => {
+						notify(`Recurso Creado`,{type:'success'});
+						dialog({
+							variant: 'info',
+							title: 'Recurso Creado',
+							description: 'Se ha creado el recurso  ' + resourceConfig.label,
+							onConfirm: () => {
+								redirect('/' + resourceConfig.model);
+							},
+							onClose: () => {},
+						});
+					};
+					const onError = (error: any) => {
+						notify(`Error!`);
+					};
+					return (
+						<ApplicationLayout resourceConfig={resourceConfig}>
+							<AutoCreate
+								beforeSubmit={beforeSubmut}
+								//schema={resourceConfig.createSchema ? resourceConfig.createSchema : resourceConfig.schema}
+								onError={onError}
+								onSubmit={onCreate}
+								/*toolbar={<ResourceCreateToolbar />}*/ resourceConfig={
+									resourceConfig
+								} /*toolbar={<ResourceCreateToolbar />}*/
+							/>
+						</ApplicationLayout>
+					);
+				}}
+				show={() => {
+					const ShowActions = ({ edit }) => (
+						<TopToolbar sx={{mb:2}} >{edit !== false && <EditButton />}</TopToolbar>
+					);
+					return (
+						<ApplicationLayout resourceConfig={resourceConfig}>
+							<Show
+								title={
+									<AutoTitle
+										//schema={resourceConfig.showSchema ? resourceConfig.showSchema : resourceConfig.schema} />}
+										//actions={<ShowActions edit={resourceConfig.edit}
+										resourceConfig={resourceConfig}
+									/>
+								}
+							>
+								<TabbedShowLayout>
+									{AutoTabs(resourceConfig.schema)}
+									{resourceConfig.references &&
+										resourceConfig.references.map((reference) =>
+											AutoReferenceTab(reference),
+										)}
+								</TabbedShowLayout>
+							</Show>
+						</ApplicationLayout>
+					);
+				}}
+				// @ts-ignore - icon type compatibility issue
+				icon={resourceConfig.icon}
+			/>
+		</>
+	);
+};
+export default BrandResource;

package/src/resources/DASHResourceLoader.ts

@@ -0,0 +1,180 @@
+/**
+ * DASH Resource Loader
+ * 
+ * Dynamic resource loading system that loads resources from a JSON manifest.
+ * Supports caching to prevent redundant imports and can be configured with
+ * a custom manifest path.
+ * 
+ * @packageDocumentation
+ */
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+
+/**
+ * Resource manifest entry interface
+ */
+export interface IResourceManifestEntry {
+    /** Unique name identifier for the resource */
+    name: string;
+    /** Import path for the resource module */
+    path: string;
+}
+
+/**
+ * Resource loader configuration options
+ */
+export interface IDASHResourceLoaderConfig {
+    /** Path to the resource manifest JSON file */
+    manifestPath?: string;
+    /** Whether to enable caching of loaded resources */
+    enableCache?: boolean;
+    /** Custom manifest entries to use instead of loading from file */
+    customManifest?: IResourceManifestEntry[];
+}
+
+/**
+ * Cache for loaded resources to prevent redundant imports
+ */
+let resourceCache: IDashAutoAdminResourceConfig[] | null = null;
+
+/**
+ * Clear the resource cache
+ * Useful when you need to reload resources
+ */
+export const clearResourceCache = (): void => {
+    resourceCache = null;
+};
+
+/**
+ * Get cached resources if available
+ */
+export const getCachedResources = (): IDashAutoAdminResourceConfig[] | null => {
+    return resourceCache;
+};
+
+/**
+ * Load resources from a manifest
+ * 
+ * @param manifest - Array of resource manifest entries
+ * @returns Promise resolving to array of resource configurations
+ */
+export const loadResourcesFromManifest = async (
+    manifest: IResourceManifestEntry[]
+): Promise<IDashAutoAdminResourceConfig[]> => {
+    const resources: IDashAutoAdminResourceConfig[] = [];
+
+    const loadedModules = await Promise.all(
+        manifest.map(async (item) => {
+            try {
+                // Dynamic import of the resource module
+                const module = await import(/* @vite-ignore */ item.path);
+                return {
+                    name: item.name,
+                    module: module.default || module,
+                };
+            } catch (error) {
+                console.error(`Failed to load resource "${item.name}" from "${item.path}":`, error);
+                return null;
+            }
+        })
+    );
+
+    loadedModules.forEach((loaded) => {
+        if (loaded && loaded.module) {
+            // Handle both single resource and array of resources
+            if (Array.isArray(loaded.module)) {
+                resources.push(...loaded.module);
+            } else {
+                resources.push(loaded.module);
+            }
+        }
+    });
+
+    return resources;
+};
+
+/**
+ * Default manifest loader that imports the manifest from a path
+ * 
+ * @param manifestPath - Path to the manifest JSON file
+ * @returns Promise resolving to array of manifest entries
+ */
+export const loadManifest = async (
+    manifestPath: string
+): Promise<IResourceManifestEntry[]> => {
+    try {
+        const manifestModule = await import(/* @vite-ignore */ manifestPath);
+        return manifestModule.default || manifestModule;
+    } catch (error) {
+        console.error(`Failed to load manifest from "${manifestPath}":`, error);
+        return [];
+    }
+};
+
+/**
+ * Create a resource loader function with configuration
+ * 
+ * @param config - Resource loader configuration
+ * @returns Async function that returns loaded resources
+ * 
+ * @example
+ * ```tsx
+ * // Using manifest file path
+ * const getResources = createDASHResourceLoader({
+ *     manifestPath: '@app/resourceManifest.json'
+ * });
+ * 
+ * // Using custom manifest array
+ * const getResources = createDASHResourceLoader({
+ *     customManifest: [
+ *         { name: 'todoResource', path: '@app/resources/todoResource' }
+ *     ]
+ * });
+ * 
+ * // Then use it
+ * const resources = await getResources();
+ * ```
+ */
+export const createDASHResourceLoader = (
+    config: IDASHResourceLoaderConfig = {}
+): (() => Promise<IDashAutoAdminResourceConfig[]>) => {
+    const { manifestPath, enableCache = true, customManifest } = config;
+
+    return async (): Promise<IDashAutoAdminResourceConfig[]> => {
+        // Return cached resources if caching is enabled and cache exists
+        if (enableCache && resourceCache) {
+            return resourceCache;
+        }
+
+        let manifest: IResourceManifestEntry[];
+
+        if (customManifest) {
+            // Use custom manifest if provided
+            manifest = customManifest;
+        } else if (manifestPath) {
+            // Load manifest from file path
+            manifest = await loadManifest(manifestPath);
+        } else {
+            console.warn('No manifest path or custom manifest provided to resource loader');
+            return [];
+        }
+
+        const resources = await loadResourcesFromManifest(manifest);
+
+        // Cache the results if caching is enabled
+        if (enableCache) {
+            resourceCache = resources;
+        }
+
+        return resources;
+    };
+};
+
+/**
+ * Default resource loader using @app/resourceManifest.json
+ * This is a convenience export for the most common use case.
+ */
+export const getDASHResources = createDASHResourceLoader({
+    manifestPath: '@app/resourceManifest.json',
+});
+
+export default createDASHResourceLoader;

package/src/resources/Log/LogResource.tsx

@@ -0,0 +1,73 @@
+import { Resource, TabbedShowLayout } from 'react-admin';
+import { Show } from 'react-admin';
+import { IAppResourceConfig } from '../../interfaces/IAppResourceConfig';
+import { TopToolbar } from 'react-admin';
+import { EditButton } from 'react-admin';
+import { CustomRoutes } from 'react-admin';
+import TrashTemplate from '../Trash/TrashTemplate';
+import {
+	DashAutoList,
+	DashAutoReferenceTab,
+	DashAutoTabs,
+	DashAutoTitle,
+} from 'dash-auto-admin';
+import ApplicationLayout from '../../layout/ApplicationLayout';
+
+export const LogResource = (resourceConfig: IAppResourceConfig) => {
+	return (
+		<>
+			<CustomRoutes>{TrashTemplate(resourceConfig)}</CustomRoutes>
+
+			<Resource
+				options={{ label: resourceConfig.label, group: resourceConfig.group }}
+				name={resourceConfig.model}
+				list={() => {
+					return (
+						<ApplicationLayout resourceConfig={resourceConfig}>
+							<DashAutoList
+								/*sx={{
+                    flexGrow: 1,
+                    transition: (theme: any) =>
+                        theme.transitions.create(['all'], {
+                            duration: theme.transitions.duration.enteringScreen,
+                        })
+                }}*/
+
+								/*search={resourceConfig.search} schema={resourceConfig.listSchema ? resourceConfig.listSchema : resourceConfig.schema} BulkActions={resourceConfig.BulkActions} create={resourceConfig.create}*/ resourceConfig={
+									resourceConfig
+								}
+							/>
+						</ApplicationLayout>
+					);
+				}}
+				show={() => {
+					const ShowActions = ({ edit }) => (
+						<TopToolbar sx={{ mb: 2 }} >{edit !== false && <EditButton />}</TopToolbar>
+					);
+					return (
+						<ApplicationLayout resourceConfig={resourceConfig}>
+							<Show
+								title={
+									<DashAutoTitle
+										resourceConfig={resourceConfig}
+										//schema={resourceConfig.showSchema ? resourceConfig.showSchema : resourceConfig.schema}
+									/>
+								}
+								actions={<ShowActions edit={resourceConfig.edit} />}
+							>
+								<TabbedShowLayout>
+									{DashAutoTabs(resourceConfig)}
+									{resourceConfig.references &&
+                                        resourceConfig.references.map((reference) => DashAutoReferenceTab(reference) )}
+								</TabbedShowLayout>
+							</Show>
+						</ApplicationLayout>
+					);
+				}}
+				/* @ts-ignore Known issue type mismatch */
+				icon={resourceConfig.icon}
+			/>
+		</>
+	);
+};
+export default LogResource;