@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/navigation/BreadcrumbsManager.tsx

@@ -0,0 +1,310 @@
+import React, { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { useStore } from 'react-admin';
+import { IBreadcrumbItem, DASH_REDUX_ACTIONS } from 'dash-admin-state';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { DASHAdminSystemConstants } from 'dash-constants';
+
+// ============================================================================
+// TYPES & INTERFACES
+// ============================================================================
+
+export interface BreadcrumbsManagerProps {
+    /** Custom label map for route segments */
+    labelMap?: Record<string, string>;
+    /** Whether to include the home item */
+    includeHome?: boolean;
+    /** Home path */
+    homePath?: string;
+    /** Home label */
+    homeLabel?: string;
+    /** Custom breadcrumb generator function */
+    customGenerator?: (
+        pathname: string, 
+        resourceConfig?: IDashAutoAdminResourceConfig,
+        record?: any
+    ) => IBreadcrumbItem[];
+    /** Field to use as record name (default: 'name') */
+    recordNameField?: string;
+    /** Children components */
+    children?: React.ReactNode;
+}
+
+// ============================================================================
+// DEFAULT LABEL MAPPINGS
+// ============================================================================
+
+const defaultLabelMap: Record<string, string> = {
+    // Common actions
+    'create': 'Crear',
+    'edit': 'Editar',
+    'show': 'Ver',
+    'list': 'Lista',
+    'inline': 'Detalle',
+    'trash': 'Papelera',
+    
+    // Common routes
+    'admin': 'Admin',
+    'system': 'Sistema',
+    'settings': 'Configuración',
+    'users': 'Usuarios',
+    'roles': 'Roles',
+    'permissions': 'Permisos',
+    'tenants': 'Tenants',
+    'profile': 'Perfil',
+    'dashboard': 'Dashboard',
+    'apps': 'Aplicaciones',
+    'client': 'Cliente',
+    'mall': 'Mall',
+    'public': 'Público',
+};
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+/**
+ * Parse a route segment into a readable label
+ */
+const parseSegmentLabel = (
+    segment: string, 
+    labelMap: Record<string, string>,
+    resourceConfig?: IDashAutoAdminResourceConfig
+): string => {
+    // Check custom label map first
+    if (labelMap[segment]) {
+        return labelMap[segment];
+    }
+    
+    // Check default label map
+    if (defaultLabelMap[segment]) {
+        return defaultLabelMap[segment];
+    }
+    
+    // Check if segment matches resource model
+    if (resourceConfig) {
+        const modelParts = resourceConfig.model?.split('/') || [];
+        if (modelParts.includes(segment)) {
+            return resourceConfig.label || segment;
+        }
+    }
+    
+    // Convert kebab-case or snake_case to Title Case
+    return segment
+        .replace(/[-_]/g, ' ')
+        .replace(/\b\w/g, char => char.toUpperCase());
+};
+
+/**
+ * Check if a segment is an ID (numeric or UUID-like)
+ */
+const isIdSegment = (segment: string): boolean => {
+    // Check for numeric ID
+    if (/^\d+$/.test(segment)) {
+        return true;
+    }
+    // Check for UUID
+    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
+        return true;
+    }
+    // Check for short hash-like IDs (at least 20 chars alphanumeric)
+    if (/^[a-z0-9]{20,}$/i.test(segment)) {
+        return true;
+    }
+    return false;
+};
+
+/**
+ * Generate breadcrumbs from pathname
+ */
+const generateBreadcrumbsFromPath = (
+    pathname: string,
+    labelMap: Record<string, string>,
+    resourceConfig?: IDashAutoAdminResourceConfig,
+    includeHome?: boolean,
+    homePath?: string,
+    homeLabel?: string,
+    recordName?: string
+): IBreadcrumbItem[] => {
+    const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX || '';
+    
+    // Remove URL prefix and clean path
+    let cleanPath = pathname;
+    if (URL_PREFIX && cleanPath.startsWith(URL_PREFIX)) {
+        cleanPath = cleanPath.slice(URL_PREFIX.length);
+    }
+    
+    // Split into segments and filter empty ones
+    const segments = cleanPath.split('/').filter(Boolean);
+    
+    if (segments.length === 0) {
+        return [];
+    }
+    
+    const breadcrumbs: IBreadcrumbItem[] = [];
+    
+    // Add home item if requested
+    if (includeHome) {
+        breadcrumbs.push({
+            label: homeLabel || 'Home',
+            path: homePath || '/',
+        });
+    }
+    
+    let currentPath = URL_PREFIX;
+    
+    // Ensure path starts with slash if prefix doesn't have one
+    if (currentPath && !currentPath.startsWith('/')) {
+        currentPath = `/${currentPath}`;
+    }
+    
+    // Build breadcrumbs for each segment
+    segments.forEach((segment, index) => {
+        currentPath += `/${segment}`;
+        const isLast = index === segments.length - 1;
+        const isId = isIdSegment(segment);
+        
+        // Handle ID segments
+        if (isId) {
+            // If we have a record name and this is the last segment or second-to-last, use it
+            if (recordName && (isLast || index === segments.length - 2)) {
+                breadcrumbs.push({
+                    label: recordName,
+                    path: isLast ? undefined : currentPath,
+                    isActive: isLast,
+                    data: { id: segment },
+                });
+            } else {
+                // Use a generic "Record #ID" label (truncated for display)
+                const displayId = segment.length > 8 
+                    ? `#${segment.substring(0, 8)}...` 
+                    : `#${segment}`;
+                breadcrumbs.push({
+                    label: displayId,
+                    path: isLast ? undefined : currentPath,
+                    isActive: isLast,
+                    data: { id: segment },
+                });
+            }
+            return;
+        }
+        
+        // Get the label for this segment
+        const label = parseSegmentLabel(segment, labelMap, resourceConfig);
+        
+        breadcrumbs.push({
+            label,
+            path: isLast ? undefined : currentPath,
+            isActive: isLast,
+        });
+    });
+    
+    return breadcrumbs;
+};
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * BreadcrumbsManager
+ * 
+ * A component that automatically manages breadcrumb state based on the current route.
+ * Place this component in your app layout to enable automatic breadcrumb generation.
+ * 
+ * @example
+ * ```tsx
+ * // In your app layout
+ * <BreadcrumbsManager includeHome homeLabel="Dashboard">
+ *     {children}
+ * </BreadcrumbsManager>
+ * ```
+ */
+export const BreadcrumbsManager: React.FC<BreadcrumbsManagerProps> = ({
+    labelMap = {},
+    includeHome = false,
+    homePath = '/',
+    homeLabel = 'Home',
+    customGenerator,
+    recordNameField = 'name',
+    children,
+}) => {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    
+    // Get resource config from store
+    const [resourceConfig] = useStore<IDashAutoAdminResourceConfig>('resourceConfig');
+    
+    // Note: We don't use useRecordContext here because it requires RecordContextProvider
+    // The record name will be handled by the useBreadcrumbs hook in resource templates instead
+    const record: any = null;
+    
+    // Merge label maps
+    const mergedLabelMap = useMemo(() => ({
+        ...defaultLabelMap,
+        ...labelMap,
+    }), [labelMap]);
+    
+    // Get record name from record context
+    const recordName = useMemo(() => {
+        if (!record) return undefined;
+        
+        // Try common name fields
+        const nameFields = [recordNameField, 'name', 'title', 'label', 'displayName', 'username'];
+        for (const field of nameFields) {
+            if (record[field]) {
+                return String(record[field]);
+            }
+        }
+        
+        // Use recordRepresentation if available
+        if (resourceConfig?.recordRepresentation) {
+            const repr = resourceConfig.recordRepresentation;
+            if (typeof repr === 'string' && record[repr]) {
+                return String(record[repr]);
+            }
+        }
+        
+        return undefined;
+    }, [record, recordNameField, resourceConfig]);
+    
+    // Generate and dispatch breadcrumbs on route change
+    useEffect(() => {
+        let breadcrumbs: IBreadcrumbItem[];
+        
+        if (customGenerator) {
+            breadcrumbs = customGenerator(location.pathname, resourceConfig, record);
+        } else {
+            breadcrumbs = generateBreadcrumbsFromPath(
+                location.pathname,
+                mergedLabelMap,
+                resourceConfig,
+                includeHome,
+                homePath,
+                homeLabel,
+                recordName
+            );
+        }
+        
+        // Only update if we have breadcrumbs
+        if (breadcrumbs.length > 0) {
+            dispatch(DASH_REDUX_ACTIONS.updatePage({ breadcrumbs }));
+        }
+    }, [
+        location.pathname,
+        mergedLabelMap,
+        resourceConfig,
+        includeHome,
+        homePath,
+        homeLabel,
+        recordName,
+        customGenerator,
+        dispatch,
+        record,
+    ]);
+    
+    return <>{children}</>;
+};
+
+export default BreadcrumbsManager;

package/src/components/navigation/index.tsx

@@ -0,0 +1,5 @@
+export { Breadcrumbs, default as BreadcrumbsComponent } from './Breadcrumbs';
+export type { BreadcrumbsProps } from './Breadcrumbs';
+
+export { BreadcrumbsManager, default as BreadcrumbsManagerComponent } from './BreadcrumbsManager';
+export type { BreadcrumbsManagerProps } from './BreadcrumbsManager';

package/src/components/panel/Error.tsx

@@ -0,0 +1,168 @@
+import { ComponentType, ErrorInfo, Fragment, HtmlHTMLAttributes } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import {
+	Button,
+	Accordion,
+	AccordionDetails,
+	AccordionSummary,
+	Typography,
+} from '@mui/material';
+import ErrorIcon from '@mui/icons-material/Report';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import History from '@mui/icons-material/History';
+import { useTranslate } from 'react-admin';
+import { useResetErrorBoundaryOnLocationChange } from 'react-admin';
+import { Title } from 'react-admin';
+
+export const Error = (
+	props: InternalErrorProps & {
+		errorComponent?: ComponentType<ErrorProps>;
+	},
+) => {
+	const {
+		error,
+		errorComponent: ErrorComponent,
+		errorInfo,
+		resetErrorBoundary,
+		className,
+		title,
+		...rest
+	} = props;
+
+	const translate = useTranslate();
+	useResetErrorBoundaryOnLocationChange(resetErrorBoundary);
+
+	if (ErrorComponent) {
+		return <ErrorComponent error={error} errorInfo={errorInfo} title={title} />;
+	}
+
+	return (
+		<Fragment>
+			{title && <Title title={title} />}
+			<Root className={className} {...rest}>
+				<h1 className={ErrorClasses.title} role='alert'>
+					<ErrorIcon className={ErrorClasses.icon} />
+					{translate('ra.page.error')}
+				</h1>
+				<div>{translate('ra.message.error')}</div>
+				{/* @ts-ignore */}
+				{process.env.NODE_ENV !== 'production' && (
+					<>
+						<Accordion className={ErrorClasses.panel}>
+							<AccordionSummary
+								expandIcon={<ExpandMoreIcon />}
+								className={ErrorClasses.panelSumary}
+							>
+								{translate(error.message, {
+									_: error.message,
+								})}
+							</AccordionSummary>
+							<AccordionDetails className={ErrorClasses.panelDetails}>
+								{/*
+                                    error message is repeated here to allow users to copy it. AccordionSummary doesn't support text selection.
+                                */}
+								<p>
+									{translate(error.message, {
+										_: error.message,
+									})}
+								</p>
+								<p>{errorInfo?.componentStack}</p>
+							</AccordionDetails>
+						</Accordion>
+					</>
+				)}
+				<div className={ErrorClasses.toolbar}>
+					<Button variant='contained' startIcon={<History />} onClick={goBack}>
+						{translate('ra.action.back')}
+					</Button>
+				</div>
+			</Root>
+		</Fragment>
+	);
+};
+
+Error.propTypes = {
+	className: PropTypes.string,
+	error: PropTypes.object.isRequired,
+	errorInfo: PropTypes.object,
+	title: PropTypes.string,
+};
+
+interface InternalErrorProps
+	extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'>,
+		FallbackProps,
+		ErrorProps {
+	className?: string;
+}
+
+export interface ErrorProps extends Pick<FallbackProps, 'error'> {
+	errorInfo?: ErrorInfo;
+	//title?: TitleComponent;
+	title?: any;
+}
+
+const PREFIX = 'RaError';
+
+export const ErrorClasses = {
+	container: `${PREFIX}-container`,
+	title: `${PREFIX}-title`,
+	icon: `${PREFIX}-icon`,
+	panel: `${PREFIX}-panel`,
+	panelSumary: `${PREFIX}-panelSumary`,
+	panelDetails: `${PREFIX}-panelDetails`,
+	toolbar: `${PREFIX}-toolbar`,
+	advice: `${PREFIX}-advice`,
+};
+
+const Root = styled('div', {
+	name: PREFIX,
+	overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	justifyContent: 'center',
+	[theme.breakpoints.down('md')]: {
+		padding: '1em',
+	},
+	fontFamily: 'Roboto, sans-serif',
+	opacity: 0.5,
+
+	[`& .${ErrorClasses.title}`]: {
+		display: 'flex',
+		alignItems: 'center',
+	},
+
+	[`& .${ErrorClasses.icon}`]: {
+		width: '2em',
+		height: '2em',
+		marginRight: '0.5em',
+	},
+
+	[`& .${ErrorClasses.panel}`]: {
+		marginTop: '1em',
+		maxWidth: '60em',
+	},
+
+	[`& .${ErrorClasses.panelSumary}`]: {
+		userSelect: 'all',
+	},
+
+	[`& .${ErrorClasses.panelDetails}`]: {
+		whiteSpace: 'pre-wrap',
+	},
+
+	[`& .${ErrorClasses.toolbar}`]: {
+		marginTop: '2em',
+	},
+
+	[`& .${ErrorClasses.advice}`]: {
+		marginTop: '2em',
+	},
+}));
+
+function goBack() {
+	window.history.go(-1);
+}

package/src/components/permission/AvailablePermissionsContext.tsx

@@ -0,0 +1,173 @@
+import { useAxios } from "dash-axios-hook";
+import { createContext, useState, useRef, useEffect, useContext } from "react";
+
+// --- IndexedDB Utility ---
+const DB_NAME = "SystemSettingsCacheDB";
+const STORE_NAME = "kvstore";
+const DB_VERSION = 1;
+
+function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      req.result.createObjectStore(STORE_NAME);
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function idbSet(key: string, value: any) {
+  const db = await openDB();
+  return new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    tx.objectStore(STORE_NAME).put(value, key);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+export async function idbGet(key: string) {
+  const db = await openDB();
+  return new Promise<any>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const req = tx.objectStore(STORE_NAME).get(key);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+// Global request tracking to prevent multiple requests across component instances
+let GLOBAL_FETCH_PROMISE: Promise<any> | null = null;
+let GLOBAL_FORMATS: any = null;
+let LAST_FETCH_TIME = 0;
+
+// --- Context and Provider for memoizing available permissions formats ---
+const AvailablePermissionsFormatsContext = createContext<{
+  formats: any;
+  fetchFormats: () => Promise<void>;
+  loading: boolean;
+}>({
+  formats: null,
+  fetchFormats: async () => {},
+  loading: false,
+});
+
+export const AvailablePermissionsContext: React.FC<{children: React.ReactNode}> = ({ children }) => {
+  const axios = useAxios();
+  const [formats, setFormats] = useState<any>(GLOBAL_FORMATS);
+  const [loading, setLoading] = useState<boolean>(!GLOBAL_FORMATS && !GLOBAL_FETCH_PROMISE);
+  const [initialized, setInitialized] = useState<boolean>(!!LAST_FETCH_TIME);
+  
+  const fetchFormats = async () => {
+  
+    // If there's already a global fetch in progress, return that promise
+    if (GLOBAL_FETCH_PROMISE) {
+      return GLOBAL_FETCH_PROMISE;
+    }
+    
+    // Check if we recently fetched (within 10 seconds)
+    const now = Date.now();
+    if (!LAST_FETCH_TIME) {
+      try {
+        // Try to get last fetch time from IndexedDB
+        LAST_FETCH_TIME = await idbGet("system_available_permissions_cache") || 0;
+      } catch (error) {
+        console.error("Error reading from IndexedDB:", error);
+      }
+    }
+    
+    // Return early if we have formats and fetched recently
+    if (GLOBAL_FORMATS && now - LAST_FETCH_TIME < 10000) {
+      if (!formats) {
+        setFormats(GLOBAL_FORMATS);
+      }
+      return;
+    }
+    
+    // Start a new fetch
+    setLoading(true);
+    
+    // Create global fetch promise and store it
+    GLOBAL_FETCH_PROMISE = (async () => {
+      try {
+        console.log("FETCHING AVAILABLE PERMISSIONS");
+        const { data } = await axios.get('system/permission/availablePermissions');
+
+        
+        // Update global state
+        GLOBAL_FORMATS = data;
+        LAST_FETCH_TIME = Date.now();
+        
+        // Update component state
+        setFormats(data);
+        setInitialized(true);
+        
+        // Update IndexedDB
+        try {
+          await idbSet("system_available_permissions_cache", LAST_FETCH_TIME);
+          await idbSet("system_available_permissions_formats", data);
+        } catch (error) {
+          console.error("Error writing to IndexedDB:", error);
+        }
+      } catch (error) {
+        console.error("Error fetching settings formats:", error);
+      } finally {
+        setLoading(false);
+        GLOBAL_FETCH_PROMISE = null;
+      }
+    })();
+    
+    return GLOBAL_FETCH_PROMISE;
+  };
+
+  // Initialize on mount
+  useEffect(() => {
+    const loadCachedFormats = async () => {
+      
+      try {
+        if (!GLOBAL_FORMATS) {
+          const cachedFormats = await idbGet("system_available_permissions_formats");
+          if (cachedFormats) {
+            GLOBAL_FORMATS = cachedFormats;
+            setFormats(cachedFormats);
+            setLoading(false); // <-- Set loading to false if cache is found
+          }
+        }
+        // If still no formats, set loading to true and fetch
+        if (!GLOBAL_FORMATS) setLoading(true);
+        await fetchFormats();
+      } catch (error) {
+        console.error("Error loading cached formats:", error);
+        setLoading(true);
+        await fetchFormats();
+      }
+    };
+    loadCachedFormats();
+    // eslint-disable-next-line
+  }, []);
+
+  // If formats are set (from fetch or cache), ensure loading is false
+  useEffect(() => {
+
+    if (formats) setLoading(false);
+  }, [formats]);
+
+  return (
+    <AvailablePermissionsFormatsContext.Provider value={{ 
+      formats: (formats || GLOBAL_FORMATS) ?? null,
+      fetchFormats, 
+      loading 
+    }}>
+      {children}
+    </AvailablePermissionsFormatsContext.Provider>
+  );
+};
+
+// Correct hook name for consumers
+export const useAvailablePermissionsFormats = () => {
+  const ctx = useContext(AvailablePermissionsFormatsContext);
+  return ctx;
+};
+
+export default AvailablePermissionsContext