@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/tenant/TenantSettingsContext.tsx

@@ -0,0 +1,165 @@
+import { useAxios } from "dash-axios-hook";
+import { createContext, useState, useRef, useEffect, useContext } from "react";
+
+// --- IndexedDB Utility ---
+const DB_NAME = "TenantSettingsCacheDB";
+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 settings formats ---
+const TenantSettingsFormatsContext = createContext<{
+  formats: any;
+  fetchFormats: () => Promise<void>;
+  loading: boolean;
+}>({
+  formats: null,
+  fetchFormats: async () => {},
+  loading: false,
+});
+
+export const TenantSettingsFormatsProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
+  const axios = useAxios();
+  // Use global formats if available or initialize with null
+  const [formats, setFormats] = useState<any>(GLOBAL_FORMATS);
+  const [loading, setLoading] = useState<boolean>(!!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("tenant_settings_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 SETTINGS FORMATS");
+        const { data } = await axios.get('system/tenant/systemSettingFormats');
+        const formatsData = data.data?.setting_formats || data.data;
+        
+        // Update global state
+        GLOBAL_FORMATS = formatsData;
+        LAST_FETCH_TIME = Date.now();
+        
+        // Update component state
+        setFormats(formatsData);
+        setInitialized(true);
+        
+        // Update IndexedDB
+        try {
+          await idbSet("tenant_settings_cache", LAST_FETCH_TIME);
+          await idbSet("tenant_settings_formats", formatsData);
+        } 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(() => {
+    // Try to load formats from IndexedDB first
+    const loadCachedFormats = async () => {
+      try {
+        if (!GLOBAL_FORMATS) {
+          const cachedFormats = await idbGet("tenant_settings_formats");
+          if (cachedFormats) {
+            GLOBAL_FORMATS = cachedFormats;
+            setFormats(cachedFormats);
+          }
+        }
+        
+        // Then fetch if needed
+        fetchFormats();
+      } catch (error) {
+        console.error("Error loading cached formats:", error);
+        fetchFormats();
+      }
+    };
+    
+    loadCachedFormats();
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <TenantSettingsFormatsContext.Provider value={{ 
+      formats: formats || GLOBAL_FORMATS, 
+      fetchFormats, 
+      loading 
+    }}>
+      {children}
+    </TenantSettingsFormatsContext.Provider>
+  );
+};
+
+export const useTenantSettingsFormats = () => {
+  const ctx = useContext(TenantSettingsFormatsContext);
+  return ctx;
+};
+
+export default TenantSettingsFormatsProvider

package/src/components/tenant/TenantTheme.tsx

@@ -0,0 +1,172 @@
+import { DashAutoFormGroups, DashAutoFormTabs, IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import React, { useState, useEffect, useContext, createContext, useRef } from "react";
+import { useGetList, Loading, useRecordContext } from "react-admin";
+import { useAxios } from 'dash-axios-hook';
+import { useFormContext, useWatch } from "react-hook-form";
+import { Tenant } from "../../interfaces/Tenant";
+import MUISimpleJsonTable from "../misc/MuiSimpleJsonTable";
+import { useTenantSettingsFormats } from "./TenantSettingsContext";
+import { useSystemRequestsCache } from "../../contexts/SystemRequestsCache";
+
+/** Wrapper creating a React component boundary so DashAutoFormTabs hooks don't violate Rules of Hooks */
+const FormTabsRenderer: React.FC<{schema: any; method: "list" | "create" | "edit" | "view"; label: string}> = ({schema, method, label}) => (
+    <>{DashAutoFormTabs({schema, resourceConfig: null, options: {mode: method, label}})}</>
+);
+
+const TenantThemeEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, tenant }) => {
+    const [settingFormatsSchema, setSettingFormatsSchema] = useState<any>(null);
+    /*const formContext = useFormContext();
+    const formValues = useWatch({
+        control: formContext.control
+    });*/
+
+    const { formats: formatsData, loading } = useSystemRequestsCache();
+
+    useEffect(() => {
+      
+        if (formatsData && formatsData.data && formatsData.data.setting_formats) {
+
+            const parsedSchema = formatsData.data.setting_formats
+                .filter((entry) => entry.tab === 'colors')
+                .map((entry) => {
+                // Extract the actual setting name from 'settings.setting_name'
+                const settingName = entry.attribute ? entry.attribute.replace('settings.', '') : entry.id;
+
+                const defaultValue =
+                    (tenant.settings && tenant.settings[settingName]) ||
+                    entry?.default_value;
+
+                return {
+                    ...entry,
+                    .../*method === "edit" &&*/ ((defaultValue !== null ||
+                        defaultValue !== undefined) && {
+                        fieldOptions: {
+                            defaultValue: defaultValue,
+                            fullWidth: true,
+                        },
+                    }),
+                    ...(method === 'view' && {
+                        readOnly: true,
+                    }),
+                };
+            });
+
+            console.log('SCHEMA', parsedSchema);
+           
+            setSettingFormatsSchema(parsedSchema);
+
+        }
+
+    }, [formatsData])
+
+    /*useEffect(() => {
+        if(settingFormatsSchema) { 
+            formContext.setValue('settings_schema', settingFormatsSchema); 
+        }
+    }, [settingFormatsSchema]);*/
+
+    /*const readOnlyComponent = ({...props}) => {
+        return <>{props.defaultValue}</>
+    }*/
+    //if (!settingFormatsSchema || loading) return <Loading />
+    return <section>
+        {settingFormatsSchema && <FormTabsRenderer schema={settingFormatsSchema} method={method} label="Tema" />}
+    </section>
+
+}
+
+const TenantThemeCreate: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute }) => {
+
+    const [settingFormatsSchema, setSettingFormatsSchema] = useState<any>(null);
+    const formContext = useFormContext();
+    const formValues = useWatch({
+        control: formContext.control
+    });
+
+
+    const { formats: formatsData, loading } = useSystemRequestsCache();
+
+    useEffect(() => {
+
+        if (!loading && formatsData && formatsData.data && formatsData.data.setting_formats) {
+            const parsedSchema = formatsData.data.setting_formats
+                .filter((entry) => entry.tab === 'colors')
+                .map((entry) => ({
+                ...entry,
+                ...(method === 'view' && {
+                    readOnly: true,
+                }),
+            }));
+
+            setSettingFormatsSchema(parsedSchema);
+
+        }
+
+    }, [formatsData, loading])
+
+
+    //if (!settingFormatsSchema || loading) return <Loading />
+    return <section>
+        {settingFormatsSchema && <FormTabsRenderer schema={settingFormatsSchema} method={method} label="Tema" />}
+    </section>
+
+}
+
+const TenantThemeView: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, tenant }) => {
+
+    const { formats: settingFormats, loading } = useTenantSettingsFormats();
+    const [settingFormatsParsedValues, setSettingFormatsParsedValues] = useState<any>(null);
+
+    const parseValue = (value) => {
+        switch (typeof value) {
+            case "boolean":
+                return value ? "Sí" : "No";
+            case "number":
+            case "string":
+            default:
+                return value
+        }
+    }
+
+    useEffect(() => {
+        let object = {};
+        if (settingFormats && tenant) {
+
+            settingFormats
+                .filter((entry) => entry.tab === 'colors')
+                .forEach((entry) => {
+                const defaultValue = tenant.settings && tenant.settings.hasOwnProperty(entry.id) ? tenant.settings[entry.id] : entry?.default_value;
+
+                object[entry.label] = <>{parseValue(defaultValue)}</>;
+            });
+
+
+            console.log("SCHEMA", object);
+
+            setSettingFormatsParsedValues(object);
+
+        }
+
+    }, [settingFormats, tenant])
+
+
+    return settingFormatsParsedValues ? <MUISimpleJsonTable tableData={settingFormatsParsedValues} vertical={true} /> : <Loading />
+
+
+}
+
+const TenantTheme = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    const tenant: Tenant = useRecordContext();
+    switch (method) {
+        case "edit":
+            return <TenantThemeEdit attribute={attribute} method={method} tenant={tenant} resourceConfig={resourceConfig} />
+        case "view":
+            return <TenantThemeView attribute={attribute} method={method} tenant={tenant} resourceConfig={resourceConfig} />
+        case "create":
+            return <TenantThemeCreate attribute={attribute} method={method} resourceConfig={resourceConfig} />
+        case "list":
+            return <></>
+    }
+}
+
+export default TenantTheme;

package/src/components/user/AvatarComponent.tsx

@@ -0,0 +1,301 @@
+import { Avatar, CircularProgress, Menu, useMediaQuery, useTheme } from '@mui/material';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { IconMenuItem } from 'mui-nested-menu';
+import ReactDOM from 'react-dom';
+
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import LogoutIcon from '@mui/icons-material/Logout';
+import React from 'react';
+
+import { useWindowSize } from 'dash-utils';
+import { useAuthContext } from '../../contexts/auth/AuthContext';
+
+import { useRedirect, useTranslate } from 'react-admin';
+import { useNavigate } from 'react-router-dom';
+import { NavEventManager } from '../../utils/navEvents';
+
+interface AvatarComponentProps {
+    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+
+const AvatarComponent: React.FC<AvatarComponentProps> = ({ sidebarPosition = 'left' }) => {
+    const { user, logout, authenticated } = useAuthContext();
+    const windowSize = useWindowSize();
+    const translate = useTranslate();
+
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const [webView, setWebView] = useState<boolean>(false);
+    const [open, setOpen] = useState(false);
+    const avatarRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const navigate = useNavigate();
+    //const ra_redirect = useRedirect();
+
+    // Add state to track user data changes and force re-renders
+    const [currentUser, setCurrentUser] = useState(user);
+
+    // Update local user state when auth context user changes
+  // Update local user state when auth context user changes
+useEffect(() => {
+    console.log('AvatarComponent: User data changed in auth context:', user);
+    setCurrentUser(user);
+    
+    // Force a re-render by updating a key when user image changes
+    if (user?.image_url !== currentUser?.image_url || user?.image_path !== currentUser?.image_path) {
+        console.log('AvatarComponent: User image changed, forcing update');
+    }
+}, [user, user?.name, user?.image_url, user?.image_path, user?.id]); // Add user.id to dependencies
+    useEffect(() => {
+        if (document.body.classList.contains('webview')) {
+            setWebView(true);
+        } else {
+            setWebView(false);
+        }
+    }, []);
+
+    const handleLogout = async (e: React.MouseEvent) => {
+        e.preventDefault();
+        /*try {
+            await logout();
+            
+            redirect('/login');
+        } catch (error) {
+            
+            console.error('Logout failed:', error);
+            // Fallback logout - redirect to login
+            window.location.href = '/login';
+        }*/
+        localStorage.clear();
+        await logout();
+        //navigate('/');
+        window.location.href = '/';
+    };
+
+    const handleProfileRedirect = () => {
+        //window.location.href = '/profile';
+        //ra_redirect('/profile');
+        navigate('/profile');
+    };
+
+    const calculateMenuPosition = () => {
+        if (avatarRef.current && windowSize.width && windowSize.height) {
+            const rect = avatarRef.current.getBoundingClientRect();
+            const menuWidth = 230; // minWidth from styles
+            const menuHeight = 120; // approximate menu height
+            
+            let left = rect.left + window.scrollX;
+            let top = rect.top + window.scrollY;
+            
+            // Ensure menu doesn't go off-screen horizontally
+            if (left + menuWidth > windowSize.width) {
+                left = windowSize.width - menuWidth - 10; // 10px margin
+            }
+            if (left < 10) {
+                left = 10; // 10px margin
+            }
+            
+            // For bottom sidebar position, open menu above the avatar
+            if (sidebarPosition === 'bottom') {
+                top = rect.top + window.scrollY - menuHeight - 10; // Open above
+            }
+            
+            setMenuPosition({ 
+                top: top, 
+                left: left + 40
+            });
+        }
+    };
+
+    const handleAvatarMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+        console.log("handleAvatarMouseEnter");
+        e.preventDefault();
+        
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        
+        setOpen(true);
+        calculateMenuPosition();
+    };
+
+    const handleAvatarClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        console.log("handleAvatarClick");
+        e.preventDefault();
+        setOpen(prevOpen => !prevOpen);
+        calculateMenuPosition();
+    };
+
+    const handleMouseLeave = () => {
+        console.log("handleMouseLeave");
+        if (!webView) {
+            // Add a small delay before closing to allow moving to menu
+            timeoutRef.current = setTimeout(() => {
+                setOpen(false);
+            }, 100);
+        }
+    };
+
+    const handleMenuMouseEnter = () => {
+        console.log("handleMenuMouseEnter");
+        // Clear timeout when entering menu
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
+
+    const handleMenuMouseLeave = () => {
+        console.log("handleMenuMouseLeave");
+        if (!webView) {
+            setOpen(false);
+        }
+    };
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    // Recalculate position on window size change
+    useEffect(() => {
+        if (open) {
+            calculateMenuPosition();
+        }
+    }, [windowSize.width, windowSize.height, open, isSmallScreen]);
+
+    // Listen for other submenus/menus opening and close this one
+    useEffect(() => {
+        const unsubscribeSubmenuOpened = NavEventManager.onSubmenuOpened(() => {
+            setOpen(false);
+        });
+        
+        const unsubscribeCloseAll = NavEventManager.onCloseAllSubmenus(() => {
+            setOpen(false);
+        });
+        
+        return () => {
+            unsubscribeSubmenuOpened();
+            unsubscribeCloseAll();
+        };
+    }, []);
+
+    // Show loading state if not authenticated or no user data
+    if (!authenticated || !currentUser) {
+        /*return (
+            <Avatar>
+                <CircularProgress size={24} />
+            </Avatar>
+        );*/
+        return null;
+    }
+
+    // Get the most current image URL - check both possible properties
+    const getAvatarImageUrl = () => {
+       
+        return currentUser?.image_url || currentUser?.image_path || null;
+    };
+
+    // Get user display name
+    const getUserDisplayName = () => {
+        return currentUser?.name || 'Usuario';
+    };
+
+    // Get user initials for fallback avatar
+    const getUserInitials = () => {
+        const name = getUserDisplayName();
+        return name ? name.charAt(0).toUpperCase() : '?';
+    };
+       
+    return (
+        <> 
+            <div
+                ref={avatarRef}
+                className='dash-user-avatar'
+                {...(!webView ? { 
+                    onMouseEnter: handleAvatarMouseEnter, 
+                    onMouseLeave: handleMouseLeave 
+                } : { 
+                    onClick: handleAvatarClick 
+                })}
+            >
+                {getAvatarImageUrl() ? (
+                    <Avatar 
+                        src={getAvatarImageUrl()} 
+                        key={getAvatarImageUrl()} // Force re-render when image changes
+                        className='dash-icon-button-color dash-icon-button-bg'
+                    />
+                ) : (
+                    <Avatar
+                        className='dash-icon-button-color dash-icon-button-bg'
+                    >
+                        {getUserInitials()}
+                    </Avatar>
+                )}
+            </div>
+
+            {open && ReactDOM.createPortal(
+                <div 
+                    ref={menuRef}
+                    className="dash-user-menu-portal"
+                    onMouseEnter={!webView ? handleMenuMouseEnter : undefined}
+                    onMouseLeave={!webView ? handleMenuMouseLeave : undefined}
+                >
+                    <div
+                                  className={`dash-user-menu ${open ? 'show' : ''}`}
+                        style={{
+                            zIndex: 10000,
+                            position: 'absolute',
+                            top: menuPosition.top,
+                            left: menuPosition.left,
+                        }}
+                    >
+                        <span className='dash-user-name' style={{ padding: '8px 16px', display: 'block' }}>
+                            {getUserDisplayName()}
+                        </span>
+                        <IconMenuItem
+                            onClick={(e) => {
+                                e.preventDefault();
+                                setOpen(false);
+                                handleProfileRedirect();
+                            }}
+                            leftIcon={
+                                <span className='dash-user-icon'>
+                                    <AccountCircleIcon />
+                                </span>
+                            }
+                            label={translate('ra.auth.user_menu', { _: 'Perfil' })}
+                            className='dash-icon-button-color dash-icon-button-bg'
+                        />
+                        <IconMenuItem
+                            onClick={(e) => {
+                                setOpen(false);
+                                handleLogout(e);
+                            }}
+                            leftIcon={
+                                <span className='dash-user-icon'>
+                                    <LogoutIcon />
+                                </span>
+                            }
+                            label={translate('ra.auth.logout', { _: 'Cerrar sesión' })}
+                            className='dash-icon-button-color dash-icon-button-bg'
+                        />
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+};
+
+//AvatarComponent.whyDidYouRender = true;
+
+export default AvatarComponent;