@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/hooks/data/useStats.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import queryString from 'query-string';
+import { useStore } from 'react-admin';
+import hashCode from '../../utils/hasCode';
+import { useAxios } from 'dash-axios-hook';
+
+export interface IUseStats<T> {
+	url: string;
+	autoRefresh: boolean;
+	autoRefreshInterval?: number;
+	payload?: any;
+	/** If not key present, it will create a store with the url or url+payload hash */
+	storeKey?: string;
+	onRefresh?: (data: T) => any;
+}
+
+export function useStats<T>(
+	options: IUseStats<T>,
+): [T, any, boolean, (ops?:Partial<IUseStats<T>>) => void] {
+	//const { url, payload, autoRefresh, storeKey } = options;
+
+	const [currentOption,setCurrentOptions] = useState(options);
+
+	const axios = useAxios();
+	const hash = currentOption.payload ? hashCode(currentOption.url+queryString.stringify(currentOption.payload, { arrayFormat: 'bracket' })).toString() : hashCode(currentOption.url).toString() 
+
+	const [data, setData] = useStore(!currentOption.storeKey ? hash : currentOption.storeKey, null);
+	const [error, setError] = useState(null);
+	const [loaded, setLoaded] = useState(false);
+
+	const loadDashboardStats = async () => {
+	
+		const _payload = currentOption.payload ? queryString.stringify(currentOption.payload || {}, { arrayFormat: 'bracket' }) : null
+		const _url = _payload ? `${currentOption.url}?${_payload}` : `${currentOption.url}`;
+		setLoaded(false);
+		//if (currentOption.autoRefresh) {
+			try {
+				const response = await axios({
+					method: 'GET',
+					url: _url,
+				});
+
+				if (currentOption.onRefresh) { currentOption.onRefresh(response.data); }
+
+				if (response.status === 200) {
+					setData(response.data);
+				}
+			
+			} catch (e) {
+				setError(e);
+			} finally {
+				setLoaded(true);
+			}
+		//}
+	};
+
+	const[intervalId,setIntervalId] = useState(null);
+
+	useEffect(() => {
+		loadDashboardStats();
+	},[]);
+
+	useEffect(() => {
+		//setCurrentOptions({ ...options, autoRefresh: true });
+		//loadDashboardStats();
+		const _intervalId = setInterval(() => {
+			//setCurrentOptions(options);
+			loadDashboardStats();
+		}, currentOption.autoRefreshInterval || 60000);
+		setIntervalId(_intervalId)
+		return () => {
+			clearInterval(_intervalId);
+		};
+	}, [currentOption]);
+
+	const refresh = (ops?:Partial<IUseStats<T>>) => {
+		if(intervalId) {
+			clearInterval(intervalId);
+			setIntervalId(null);
+		}
+		setCurrentOptions(ops ? { ...options, ...ops } : options);
+		//loadDashboardStats();
+	};
+
+	return [data as T, error, loaded, refresh];
+}

package/src/hooks/isCurrentPath.tsx

@@ -0,0 +1,22 @@
+import IMenuItem from "../interfaces/navigation/IMenuItem";
+
+const isCurrentPath = (path: string, item: IMenuItem): boolean => {
+	let _return = false;
+	let _path = path;
+
+	if (_path === (item as IMenuItem).to) return true;
+
+	while (_path.charAt(0) === '/') {
+		_path = _path.substring(1);
+	}
+
+	if ((item as IMenuItem).children) {
+		(item as IMenuItem).children.forEach((i) => {
+			if (i.model === _path) _return = true;
+		});
+	}
+
+	return _return;
+};
+
+export default isCurrentPath;

package/src/hooks/notifications/WSMessagesManager.tsx

@@ -0,0 +1,152 @@
+
+import { Notification } from 'react-admin';
+import { useEffect, useState } from 'react';
+import { useAuthContext, type IAuthContext } from '../../contexts/auth/AuthContext';
+import type { ILaravelEchoManager } from '../../contexts/com/LaravelEchoMgr';
+import type { IDashNotificationBase, IDashNotificationPayloadBase } from '../../interfaces/communication/INotification';
+import { NotificationComponent } from '../../contexts/com/components/NotificationRenderer';
+import { NotificationWrapper } from '../../contexts/com/components/NotificationsWidget';
+import useLaravelEcho from '../../contexts/com/useLaravelEcho';
+import { toast } from 'react-toastify';
+
+/* This is the default WSMessagesManager implementation for Dash. It listens to private channels for user-specific and tenant-specific notifications,
+    and displays them using toast notifications. */
+
+const popPrivateMessage = (notification: IDashNotificationBase<any>) => {
+
+    if (!notification) return;
+    toast(
+        <NotificationWrapper notification={notification} key={0}>
+            <NotificationComponent notification={notification} />
+        </NotificationWrapper>,
+        {
+            position: 'top-right',
+            autoClose: 8000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+        },
+    );
+
+};
+
+const popStickyMessage = (notification: IDashNotificationBase<any>) => {
+    //if (!appearance) appearance = constants.toastAppearances[0];
+    //addToast(<>{message}</>, { appearance, autoDismiss: false });
+    if (!notification) return;
+    toast(
+        <NotificationWrapper notification={notification} key={0}>
+            <NotificationComponent notification={notification} />
+        </NotificationWrapper>,
+        {
+            position: 'top-right',
+            autoClose: false,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+        },
+    );
+};
+
+export const CustomReactAdminNotification = () => {
+    return <Notification
+        className='dash-notification'
+        autoHideDuration={8000}
+        multiLine={true}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+    />
+};
+
+const DASHWSMessagesManager = (): ILaravelEchoManager => {
+
+    const [events, setEvents] = useState<IDashNotificationPayloadBase[]>([]);
+    const [lastEvent, setLastEvent] = useState<IDashNotificationPayloadBase>(null);
+    const authContext: IAuthContext = useAuthContext();
+
+    const [userId, setUserId] = useState(null);
+    const [tenantId, setTenantId] = useState(null);
+
+
+    useEffect(() => {
+
+        if (!authContext?.user) {
+            return;
+        }
+
+
+        setUserId(authContext.user.id);
+        setTenantId(authContext.user.tenant_id);
+
+
+
+    }, [authContext])
+
+    const clear = () => {
+        setLastEvent(null);
+    };
+
+
+    const { echoChannel: channel2,
+        isConnected: isConnected2,
+        lastEvent: event2,
+        ping: pingConnection2,
+        addListener: addListener2,
+        removeListener: reoveListener2 } = useLaravelEcho({
+            type: 'private',
+            channel: userId ? `user.${userId}` : null,
+            //events: {
+            //  'notification': handlePrivateUserEvent
+            //},
+            enabled: !!userId // Only enable if userId exists
+        });
+
+    const { echoChannel: channel3,
+        isConnected: isConnected3,
+        lastEvent: event3,
+        ping: pingConnection3,
+        addListener: addListener3,
+        removeListener: reoveListener3 } = useLaravelEcho({
+            type: 'private',
+            channel: tenantId ? `tenant.${tenantId}.system` : null,
+            /*events: {
+              'notification': handleSystemTenantEvent,
+              'print': handlePrint,
+            },*/
+            enabled: !!tenantId // Only enable if tenantId exists
+        });
+
+    useEffect(() => {
+        if (!event3?.data) return;
+        console.log("Private Tenant Message", event3);
+        const _lastEvent = event3.data;
+        console.log(_lastEvent);
+        setLastEvent(_lastEvent);
+        popStickyMessage(_lastEvent);
+    }, [event3]);
+
+    useEffect(() => {
+        if (!event2?.data) return;
+        console.log("Private User Message", event2);
+        const _lastEvent = event2.data;
+        console.log(_lastEvent);
+        setLastEvent(_lastEvent);
+        popPrivateMessage(_lastEvent);
+    }, [event2]);
+
+
+    useEffect(() => {
+
+        setEvents((prev) => [...prev, lastEvent])
+    }, [lastEvent])
+
+    return {
+        events,
+        lastEvent,
+        clear
+    };
+};
+export default DASHWSMessagesManager;

package/src/hooks/notifications/WSPusherManager.tsx

@@ -0,0 +1,92 @@
+import { useContext, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { toast } from 'react-toastify';
+import { IAuthContext } from '../../contexts/auth/AuthContextLocalStorage';
+import { AuthContextLocalStorage } from '../../contexts/auth/AuthContextLocalStorage';
+import type { ILaravelEchoManager } from '../../contexts/com/LaravelEchoMgr';
+import type { IDashNotificationPayloadBase } from '../../interfaces/communication/INotification';
+import { NotificationComponent } from '../../contexts/com/components/NotificationRenderer';
+import { NotificationWrapper } from '../../contexts/com/components/NotificationsWidget';
+import useLaravelEcho from '../../contexts/com/useLaravelEcho';
+
+const WSPusherManager = (): ILaravelEchoManager => {
+  const [events, setEvents] = useState<IDashNotificationPayloadBase[]>([]);
+  const [lastEvent, setLastEvent] = useState<IDashNotificationPayloadBase>(null);
+  const authContext: IAuthContext = useContext(AuthContextLocalStorage);
+  const initialized = useRef(false);
+
+  // Memoize the user ID
+  const userId = useMemo(() =>
+    authContext?.user?.id || null,
+    [authContext?.user?.id]
+  );
+
+  // Create stable event handlers
+  const handlePublicEvent = useCallback((notification: IDashNotificationPayloadBase) => {
+    console.log('public', notification);
+    setEvents(prev => [...prev, notification]);
+    setLastEvent(notification);
+  }, []);
+
+  const handlePrivateEvent = useCallback((data) => {
+    console.log('Received notification event:', data);
+    setEvents(prev => [...prev, data]);
+    setLastEvent(data);
+  }, []);
+
+  // Memoize event objects
+  const publicEvents = useMemo(() => ({
+    'public': handlePublicEvent
+  }), [handlePublicEvent]);
+
+  const privateEvents = useMemo(() => ({
+    'notification': handlePrivateEvent
+  }), [handlePrivateEvent]);
+
+  // Only initialize hooks once we have the necessary data
+  const [shouldInitialize, setShouldInitialize] = useState(false);
+
+  useEffect(() => {
+    // Only set to true once we have userId or for public channel
+    if (!initialized.current) {
+      setShouldInitialize(true);
+      initialized.current = true;
+    }
+  }, [userId]);
+
+  // Public channel connection
+  const publicChannel = shouldInitialize ? useLaravelEcho({
+    type: 'public',
+    channel: 'dashpanel_public',
+    events: publicEvents,
+    // Don't pass userId for public channel
+  }) : { echoChannel: null, isConnected: false, currentEvents: [] };
+
+  // Private channel connection
+  const privateChannel = shouldInitialize && userId ? useLaravelEcho({
+    type: 'private',
+    channel: `user.${userId}`,
+    events: privateEvents,
+    userId: userId
+  }) : { echoChannel: null, isConnected: false, currentEvents: [] };
+
+  // Log connection status
+  useEffect(() => {
+    if (publicChannel.isConnected) {
+      console.log('Public channel connected:', publicChannel.isConnected);
+    }
+  }, [publicChannel.isConnected]);
+
+  useEffect(() => {
+    if (privateChannel.isConnected) {
+      console.log('Private channel connected:', privateChannel.isConnected);
+    }
+  }, [privateChannel.isConnected]);
+
+  const clear = useCallback(() => {
+    setLastEvent(null);
+  }, []);
+
+  return { events, lastEvent, clear };
+};
+
+export default WSPusherManager;

package/src/hooks/useBreadcrumbs.tsx

@@ -0,0 +1,329 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { useStore } from 'react-admin';
+import { IBreadcrumbItem, IDASHAppState, DASH_REDUX_ACTIONS, IPageState } from 'dash-admin-state';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { DASHAdminSystemConstants } from 'dash-constants';
+
+// ============================================================================
+// TYPES & INTERFACES
+// ============================================================================
+
+export interface UseBreadcrumbsOptions {
+    /** Whether to auto-update breadcrumbs on route change */
+    autoUpdate?: boolean;
+    /** 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) => IBreadcrumbItem[];
+    /** Whether to fetch record name for detail pages */
+    fetchRecordName?: boolean;
+    /** Field to use as record name (default: 'name') */
+    recordNameField?: string;
+}
+
+export interface UseBreadcrumbsResult {
+    /** Current breadcrumbs */
+    breadcrumbs: IBreadcrumbItem[];
+    /** Manually set breadcrumbs */
+    setBreadcrumbs: (items: IBreadcrumbItem[]) => void;
+    /** Add a breadcrumb item */
+    addBreadcrumb: (item: IBreadcrumbItem) => void;
+    /** Clear all breadcrumbs */
+    clearBreadcrumbs: () => void;
+    /** Current pathname */
+    pathname: string;
+}
+
+// ============================================================================
+// 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',
+};
+
+// ============================================================================
+// 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 && resourceConfig.model?.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
+    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}`;
+    }
+
+    let lastIdIndex = -1;
+    
+    segments.forEach((segment, index) => {
+        currentPath += `/${segment}`;
+        const isLast = index === segments.length - 1;
+        const isId = isIdSegment(segment);
+        
+        // Skip adding ID segments directly, we'll handle them specially
+        if (isId) {
+            lastIdIndex = index;
+            // If we have a record name and this is related to the last ID, use it
+            if (recordName && isLast) {
+                breadcrumbs.push({
+                    label: recordName,
+                    path: isLast ? undefined : currentPath,
+                    isActive: isLast,
+                });
+            } else {
+                // Use a generic "Record #ID" label
+                breadcrumbs.push({
+                    label: `#${segment.substring(0, 8)}${segment.length > 8 ? '...' : ''}`,
+                    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;
+};
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+export const useBreadcrumbs = (options: UseBreadcrumbsOptions = {}): UseBreadcrumbsResult => {
+    const {
+        autoUpdate = true,
+        labelMap = {},
+        includeHome = false,
+        homePath = '/',
+        homeLabel = 'Home',
+        customGenerator,
+        fetchRecordName = true,
+        recordNameField = 'name',
+    } = options;
+    
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const params = useParams();
+    
+    // Get resource config from store
+    const [resourceConfig] = useStore<IDashAutoAdminResourceConfig>('resourceConfig');
+    
+    // Get current page state including existing breadcrumbs
+    const pageState: IPageState = useSelector(
+        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) => state.page
+    );
+    
+    // Note: Record context is not available at the layout level
+    // Use the record prop in options if you need to pass record data
+    const record: any = null;
+    
+    // Merge label maps
+    const mergedLabelMap = useMemo(() => ({
+        ...defaultLabelMap,
+        ...labelMap,
+    }), [labelMap]);
+    
+    // Get record name from record context
+    const recordName = useMemo(() => {
+        if (!fetchRecordName || !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, fetchRecordName, recordNameField, resourceConfig]);
+    
+    // Generate breadcrumbs
+    const breadcrumbs = useMemo(() => {
+        if (customGenerator) {
+            return customGenerator(location.pathname, resourceConfig);
+        }
+        
+        return generateBreadcrumbsFromPath(
+            location.pathname,
+            mergedLabelMap,
+            resourceConfig,
+            includeHome,
+            homePath,
+            homeLabel,
+            recordName
+        );
+    }, [
+        location.pathname,
+        mergedLabelMap,
+        resourceConfig,
+        includeHome,
+        homePath,
+        homeLabel,
+        recordName,
+        customGenerator,
+    ]);
+    
+    // Set breadcrumbs action
+    const setBreadcrumbs = useCallback((items: IBreadcrumbItem[]) => {
+        dispatch(DASH_REDUX_ACTIONS.updatePage({ breadcrumbs: items }));
+    }, [dispatch]);
+    
+    // Add breadcrumb action
+    const addBreadcrumb = useCallback((item: IBreadcrumbItem) => {
+        const currentBreadcrumbs = pageState.breadcrumbs || [];
+        dispatch(DASH_REDUX_ACTIONS.updatePage({ 
+            breadcrumbs: [...currentBreadcrumbs, item] 
+        }));
+    }, [dispatch, pageState.breadcrumbs]);
+    
+    // Clear breadcrumbs action
+    const clearBreadcrumbs = useCallback(() => {
+        dispatch(DASH_REDUX_ACTIONS.updatePage({ breadcrumbs: [] }));
+    }, [dispatch]);
+    
+    // Auto-update breadcrumbs on route change
+    useEffect(() => {
+        if (autoUpdate && breadcrumbs.length > 0) {
+            setBreadcrumbs(breadcrumbs);
+        }
+    }, [autoUpdate, breadcrumbs, setBreadcrumbs]);
+    
+    return {
+        breadcrumbs: pageState.breadcrumbs || breadcrumbs,
+        setBreadcrumbs,
+        addBreadcrumb,
+        clearBreadcrumbs,
+        pathname: location.pathname,
+    };
+};
+
+export default useBreadcrumbs;

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+const useClickOutside = (ref, callback) => {
+	const handleClick = (e) => {
+		if (ref.current && !ref.current.contains(e.target)) {
+			callback();
+		}
+	};
+	useEffect(() => {
+		document.addEventListener('click', handleClick);
+		return () => {
+			document.removeEventListener('click', handleClick);
+		};
+	});
+};
+
+export default useClickOutside;