@dashadmin/dash-admin 1.3.50 → 1.3.52

package/src/components/subscription/PlanFeaturesSettings.tsx

@@ -42,9 +42,13 @@ const PlanFeaturesView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
 
     if (!features.length) {
         return (
-            <Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
-                No features configured
-            </Typography>
+            <Typography
+                variant="body2"
+                sx={{
+                    color: "text.secondary",
+                    py: 2
+                }}>No features configured
+                            </Typography>
         );
     }
 
@@ -78,11 +82,17 @@ const PlanFeaturesList: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
     const features = record?.features || [];
 
     if (!features.length) {
-        return <Typography variant="body2" color="text.secondary">—</Typography>;
+        return (
+            <Typography variant="body2" sx={{
+                color: "text.secondary"
+            }}>—</Typography>
+        );
     }
 
     return (
-        <Stack direction="row" spacing={0.5} flexWrap="wrap" useFlexGap>
+        <Stack direction="row" spacing={0.5} useFlexGap sx={{
+            flexWrap: "wrap"
+        }}>
             {features.slice(0, 3).map((feature, index) => (
                 <Chip 
                     key={index} 
@@ -151,7 +161,13 @@ const PlanFeaturesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
             <Typography variant="subtitle2" gutterBottom>
                 Plan Features
             </Typography>
-            <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 2 }}>
+            <Typography
+                variant="caption"
+                sx={{
+                    color: "text.secondary",
+                    display: "block",
+                    mb: 2
+                }}>
                 Add feature keys that are enabled for this plan (e.g., "api_access", "custom_branding")
             </Typography>
 
@@ -177,7 +193,9 @@ const PlanFeaturesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
             {/* Display current features */}
             {features.length > 0 ? (
                 <Paper variant="outlined" sx={{ p: 1 }}>
-                    <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+                    <Stack direction="row" spacing={1} useFlexGap sx={{
+                        flexWrap: "wrap"
+                    }}>
                         {features.map((feature, index) => (
                             <Chip
                                 key={index}
@@ -191,7 +209,9 @@ const PlanFeaturesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
                     </Stack>
                 </Paper>
             ) : (
-                <Typography variant="body2" color="text.secondary">
+                <Typography variant="body2" sx={{
+                    color: "text.secondary"
+                }}>
                     No features added yet
                 </Typography>
             )}

package/src/components/subscription/PlanMetadataSettings.tsx

@@ -48,9 +48,13 @@ const PlanMetadataView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
 
     if (!entries.length) {
         return (
-            <Typography variant="body2" color="text.secondary" sx={{ py: 2 }}>
-                No metadata configured
-            </Typography>
+            <Typography
+                variant="body2"
+                sx={{
+                    color: "text.secondary",
+                    py: 2
+                }}>No metadata configured
+                            </Typography>
         );
     }
 
@@ -87,7 +91,11 @@ const PlanMetadataList: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
     const count = Object.keys(metadata).length;
 
     if (!count) {
-        return <Typography variant="body2" color="text.secondary">—</Typography>;
+        return (
+            <Typography variant="body2" sx={{
+                color: "text.secondary"
+            }}>—</Typography>
+        );
     }
 
     return (
@@ -177,12 +185,24 @@ const PlanMetadataEdit: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
             <Typography variant="subtitle2" gutterBottom>
                 Plan Metadata
             </Typography>
-            <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 2 }}>
+            <Typography
+                variant="caption"
+                sx={{
+                    color: "text.secondary",
+                    display: "block",
+                    mb: 2
+                }}>
                 Add key-value pairs for additional plan configuration
             </Typography>
 
             {/* Add new pair input */}
-            <Stack direction="row" spacing={1} sx={{ mb: 2 }} alignItems="flex-start">
+            <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                    alignItems: "flex-start",
+                    mb: 2
+                }}>
                 <TextField
                     value={newKey}
                     onChange={(e) => {
@@ -252,7 +272,9 @@ const PlanMetadataEdit: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
                     </Table>
                 </TableContainer>
             ) : (
-                <Typography variant="body2" color="text.secondary">
+                <Typography variant="body2" sx={{
+                    color: "text.secondary"
+                }}>
                     No metadata added yet
                 </Typography>
             )}

package/src/components/subscription/PlanPricesSettings.tsx

@@ -69,9 +69,10 @@ const PlanPricesView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
 
     if (!prices || Object.keys(prices).length === 0) {
         return (
-            <Typography variant="body2" color="text.secondary">
-                No prices configured
-            </Typography>
+            <Typography variant="body2" sx={{
+                color: "text.secondary"
+            }}>No prices configured
+                            </Typography>
         );
     }
 
@@ -101,7 +102,9 @@ const PlanPricesView: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
                                             color={currency?.is_default ? 'primary' : 'default'}
                                         />
                                         {currency?.is_default && (
-                                            <Typography variant="caption" color="text.secondary">
+                                            <Typography variant="caption" sx={{
+                                                color: "text.secondary"
+                                            }}>
                                                 (Default)
                                             </Typography>
                                         )}
@@ -127,7 +130,11 @@ const PlanPricesList: React.FC<IDashAutoAdminCustomFieldComponent> = () => {
     const prices = plan?.prices;
 
     if (!prices || Object.keys(prices).length === 0) {
-        return <Typography variant="body2" color="text.secondary">—</Typography>;
+        return (
+            <Typography variant="body2" sx={{
+                color: "text.secondary"
+            }}>—</Typography>
+        );
     }
 
     return (
@@ -215,18 +222,21 @@ const PlanPricesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method }
 
     if (!currencies || currencies.length === 0) {
         return (
-            <Typography variant="body2" color="text.secondary">
-                No currencies available. Please configure currencies first.
-            </Typography>
+            <Typography variant="body2" sx={{
+                color: "text.secondary"
+            }}>No currencies available. Please configure currencies first.
+                            </Typography>
         );
     }
 
     return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <Typography variant="subtitle2" color="text.secondary">
+            <Typography variant="subtitle2" sx={{
+                color: "text.secondary"
+            }}>
                 Set the price for each available currency (in cents/smallest unit)
             </Typography>
-            
+
             {currencies.map((currency) => {
                 const currentValue = currentPrices[currency.code] ?? '';
                 
@@ -237,13 +247,6 @@ const PlanPricesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method }
                         type="number"
                         value={currentValue}
                         onChange={(e) => handlePriceChange(currency.code, e.target.value)}
-                        InputProps={{
-                            startAdornment: (
-                                <InputAdornment position="start">
-                                    {currency.symbol}
-                                </InputAdornment>
-                            ),
-                        }}
                         helperText={
                             currency.format 
                                 ? `Format: ${currency.format} • Example: ${currency.symbol}${numeral(29900).format(currency.format)}`
@@ -259,10 +262,19 @@ const PlanPricesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method }
                                 }
                             } : {}
                         }}
+                        slotProps={{
+                            input: {
+                                startAdornment: (
+                                    <InputAdornment position="start">
+                                        {currency.symbol}
+                                    </InputAdornment>
+                                ),
+                            }
+                        }}
                     />
                 );
             })}
-            
+
             {/* Hidden input to ensure prices gets submitted */}
             <input 
                 type="hidden" 

package/src/components/tenant/TenantAttributesContext.tsx

@@ -71,7 +71,7 @@ export const TenantAttributesFormatsProvider: React.FC<{children: React.ReactNod
     if (!LAST_FETCH_TIME) {
       try {
         // Try to get last fetch time from IndexedDB
-        LAST_FETCH_TIME = await idbGet("tenant_attributes_cache") || 0;
+        LAST_FETCH_TIME = (await idbGet("tenant_attributes_cache")) || 0;
       } catch (error) {
         console.error("Error reading from IndexedDB:", error);
       }

package/src/components/tenant/TenantSelector.tsx

@@ -77,9 +77,8 @@ const TenantSelector = React.forwardRef<
 	}
 
 	return (
-		<>
-			Cliente impersonado: {selectedTenantInput}
-			<Autocomplete
+        <>Cliente impersonado: {selectedTenantInput}
+            <Autocomplete
 				fullWidth
 				loading={isLoading && open}
 				sx={{ width: 300 }}
@@ -117,23 +116,27 @@ const TenantSelector = React.forwardRef<
 								handleSearch(ev.target.value);
 							}
 						}}
-						InputProps={{
-							...params.InputProps,
-							autoComplete: 'new-password',
-							endAdornment: (
-								<>
-									{isLoading ? (
-										<CircularProgress color='inherit' size={20} />
-									) : null}
-									{params.InputProps.endAdornment}
-								</>
-							),
-						}}
+						slotProps={{
+                            ...params.slotProps,
+
+                            input: {
+                                ...params.slotProps.input,
+                                autoComplete: 'new-password',
+                                endAdornment: (
+                                    <>
+                                        {isLoading ? (
+                                            <CircularProgress color='inherit' size={20} />
+                                        ) : null}
+                                        {params.slotProps.input.endAdornment}
+                                    </>
+                                ),
+                            }
+                        }}
 					/>
 				)}
 			/>
-		</>
-	);
+        </>
+    );
 });
 
 export default TenantSelector;

package/src/components/tenant/TenantSettingsContext.tsx

@@ -71,7 +71,7 @@ export const TenantSettingsFormatsProvider: React.FC<{children: React.ReactNode}
     if (!LAST_FETCH_TIME) {
       try {
         // Try to get last fetch time from IndexedDB
-        LAST_FETCH_TIME = await idbGet("tenant_settings_cache") || 0;
+        LAST_FETCH_TIME = (await idbGet("tenant_settings_cache")) || 0;
       } catch (error) {
         console.error("Error reading from IndexedDB:", error);
       }

package/src/components/user/UserPreferences.tsx

@@ -332,7 +332,9 @@ const UserPreferences: React.FC = () => {
                             <Box>
                                 <Typography variant="subtitle1">{format.label}</Typography>
                                 {format.description && (
-                                    <Typography variant="caption" color="text.secondary">
+                                    <Typography variant="caption" sx={{
+                                        color: "text.secondary"
+                                    }}>
                                         {format.description}
                                     </Typography>
                                 )}
@@ -352,7 +354,13 @@ const UserPreferences: React.FC = () => {
                         <CardContent>
                             <Typography variant="subtitle1" gutterBottom>{format.label}</Typography>
                             {format.description && (
-                                <Typography variant="caption" color="text.secondary" display="block" mb={2}>
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        color: "text.secondary",
+                                        display: "block",
+                                        mb: 2
+                                    }}>
                                     {format.description}
                                 </Typography>
                             )}
@@ -371,12 +379,14 @@ const UserPreferences: React.FC = () => {
                                     value={value ?? format.default_value ?? 0}
                                     onChange={(e) => handleGenericPreferenceChange(format.id, parseInt(e.target.value, 10))}
                                     disabled={saving || !format.editable}
-                                    inputProps={{
-                                        min: format.min ?? 0,
-                                        max: format.max ?? 100,
-                                    }}
                                     sx={{ width: 80 }}
                                     size="small"
+                                    slotProps={{
+                                        htmlInput: {
+                                            min: format.min ?? 0,
+                                            max: format.max ?? 100,
+                                        }
+                                    }}
                                 />
                             </Box>
                         </CardContent>
@@ -389,7 +399,13 @@ const UserPreferences: React.FC = () => {
                         <CardContent>
                             <Typography variant="subtitle1" gutterBottom>{format.label}</Typography>
                             {format.description && (
-                                <Typography variant="caption" color="text.secondary" display="block" mb={2}>
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        color: "text.secondary",
+                                        display: "block",
+                                        mb: 2
+                                    }}>
                                     {format.description}
                                 </Typography>
                             )}
@@ -398,15 +414,17 @@ const UserPreferences: React.FC = () => {
                                 value={value ?? ''}
                                 onChange={(e) => handleGenericPreferenceChange(format.id, e.target.value)}
                                 disabled={saving || !format.editable}
-                                inputProps={{ maxLength: format.maxLength }}
-                                InputProps={format.maxLength ? {
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            {(value?.length || 0)}/{format.maxLength}
-                                        </InputAdornment>
-                                    ),
-                                } : undefined}
-                            />
+                                slotProps={{
+                                    input: format.maxLength ? {
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                {(value?.length || 0)}/{format.maxLength}
+                                            </InputAdornment>
+                                        ),
+                                    } : undefined,
+
+                                    htmlInput: { maxLength: format.maxLength }
+                                }} />
                         </CardContent>
                     </Card>
                 );
@@ -417,7 +435,13 @@ const UserPreferences: React.FC = () => {
                         <CardContent>
                             <Typography variant="subtitle1" gutterBottom>{format.label}</Typography>
                             {format.description && (
-                                <Typography variant="caption" color="text.secondary" display="block" mb={2}>
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        color: "text.secondary",
+                                        display: "block",
+                                        mb: 2
+                                    }}>
                                     {format.description}
                                 </Typography>
                             )}
@@ -428,8 +452,10 @@ const UserPreferences: React.FC = () => {
                                 value={value ?? ''}
                                 onChange={(e) => handleGenericPreferenceChange(format.id, e.target.value)}
                                 disabled={saving || !format.editable}
-                                inputProps={{ maxLength: format.maxLength }}
                                 helperText={format.maxLength ? `${(value?.length || 0)}/${format.maxLength} characters` : undefined}
+                                slotProps={{
+                                    htmlInput: { maxLength: format.maxLength }
+                                }}
                             />
                         </CardContent>
                     </Card>
@@ -462,7 +488,9 @@ const UserPreferences: React.FC = () => {
                                     <Typography variant="subtitle1">
                                         {formatNotificationName(pref.name)}
                                     </Typography>
-                                    <Typography variant="caption" color="text.secondary">
+                                    <Typography variant="caption" sx={{
+                                        color: "text.secondary"
+                                    }}>
                                         {pref.name}
                                     </Typography>
                                 </Box>
@@ -497,7 +525,9 @@ const UserPreferences: React.FC = () => {
                                     )}
 
                                     {!config?.hasEmail && !config?.hasPush && (
-                                        <Typography variant="caption" color="text.secondary">
+                                        <Typography variant="caption" sx={{
+                                            color: "text.secondary"
+                                        }}>
                                             (No configurable channels)
                                         </Typography>
                                     )}
@@ -518,7 +548,12 @@ const UserPreferences: React.FC = () => {
         return (
             <Box sx={{ pt: 2 }}>
                 {groupConfig?.description && (
-                    <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            color: "text.secondary",
+                            mb: 3
+                        }}>
                         {groupConfig.description}
                     </Typography>
                 )}

package/src/contexts/SystemRequestsCache.tsx

@@ -101,7 +101,7 @@ export const SystemRequestsCacheProvider: React.FC<SystemRequestsCacheProviderPr
     const now = Date.now();
     if (!GLOBALS.current.lastFetchTime) {
       try {
-        GLOBALS.current.lastFetchTime = await idbGet(cacheKey) || 0;
+        GLOBALS.current.lastFetchTime = (await idbGet(cacheKey)) || 0;
         if (DEBUG_SYSTEM_REQUESTS_CACHE) {
           console.log(`[SystemRequestsCache] Loaded lastFetchTime from IndexedDB: ${GLOBALS.current.lastFetchTime}`);
         }

package/src/default-theme/DASHAppProviders.tsx

@@ -74,7 +74,7 @@ const DomainAppProviders = <U, A, R>({
     queryPersister,
     CustomEchoProvider
 }: IDomainAppProviders<U, A, R>): React.JSX.Element => {
-   
+
     const content = (
        <I18nBridgeProvider>
        <DashThemeProvider extendedOptions={extendedThemeOptions}>

package/src/default-theme/DashThemeContext.tsx

@@ -51,9 +51,9 @@ interface DashThemeProviderProps {
 
 export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOptions, children }) => {
     // Track current theme mode from data-theme attribute
-    const [currentMode, setCurrentMode] = useState<string>(() =>
-        document.documentElement.getAttribute('data-theme') || 'dark'
-    );
+    const [currentMode, setCurrentMode] = useState<string>(() => {
+        return document.documentElement.getAttribute('data-theme') || 'dark';
+    });
 
     const [themeOptions, setThemeOptions] = useState<ReturnType<typeof appTheme>>(() => {
         // Read persisted tenant settings on initialization to include tenant colors
@@ -97,8 +97,6 @@ export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOp
         //const themeMode = mode || currentMode;
         const themeMode = mode || document.documentElement.getAttribute('data-theme') || 'dark';
 
-        console.log('Recreating MUI theme with tenant settings:', settings, 'mode:', themeMode);
-
         const newThemeOptions = appTheme(
             extendedOptions,
             {
@@ -112,14 +110,14 @@ export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOp
 
         setThemeOptions(newThemeOptions);
         setTheme(newTheme);
-        
+
 
         setAntTheme(getAntTheme({
                 tenantSettings: settings,
                 colors: settings?.colors,
                 currentMode: themeMode,
             }));
-        
+
             updateDomCssVariables(themeMode, settings?.colors, settings?.values);
         /*if (settings?.colors || settings?.values) {
             updateDomCssVariables(themeMode, settings?.colors, settings?.values);
@@ -133,12 +131,8 @@ export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOp
                 if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
                     const newMode = document.documentElement.getAttribute('data-theme') || 'dark';
                     if (newMode !== currentMode) {
-                        console.log('Theme mode changed from', currentMode, 'to', newMode);
                         setCurrentMode(newMode);
                         const settings = getTenantSettings();
-
-                        console.log('Updating theme with new mode:', newMode, 'and settings:', settings);
-
                         updateDomCssVariables(newMode, settings?.colors, settings?.values);
                     }
                 }
@@ -157,7 +151,6 @@ export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOp
 
     // React to mode changes
     useEffect(() => {
-        console.log('Current mode updated to:', currentMode);
         const tenantSettings = getTenantSettings();
         recreateTheme(tenantSettings, currentMode);
     }, [currentMode]);
@@ -165,9 +158,7 @@ export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOp
     // Initial setup
     useEffect(() => {
         const tenantSettings = getTenantSettings();
-
         if (tenantSettings) {
-            console.log("Recreating MUI theme on mount");
             recreateTheme(tenantSettings, currentMode);
         }
     }, []);

package/src/default-theme/menu/AppMenuComponents/expanded/CollapsableSidebarMenu.tsx

@@ -231,7 +231,7 @@ const CollapsableSidebarMenu = ({
             // onClick above does closest('.expand-icon') to tell "clicked the arrow"
             // from "clicked the row" — if only the svg had it, clicking the circle's
             // padding (outside the svg's own box) would miss the check and navigate.
-            <div className="expand-icon expand-icon-wrapper" onClick={handleExpandClick}>
+            (<div className="expand-icon expand-icon-wrapper" onClick={handleExpandClick}>
               {/* For bottom position, invert icons since submenu opens upward */}
               {sidebarPosition === "bottom" ? (
                 localOpen ? 
@@ -242,11 +242,11 @@ const CollapsableSidebarMenu = ({
                   <ExpandLessOutlinedIcon className='expand-icon less' /> : 
                   <ExpandMoreOutlinedIcon className='expand-icon more' />
               )}
-            </div>
+            </div>)
           )}
         </ListItemButton>
       </div>
-      
+
       {/* Portal submenu for all positions */}
       {/* Vertical mode (Left/Right) - Inline Expansion using Collapse */}
       {!isHorizontal && (

package/src/default-theme/menu/SidebarActions.tsx

@@ -62,20 +62,20 @@ const SidebarActions: React.FC<SidebarActionsProps> = ({
                 ),
             }}
         >
-              {authContext?.authenticated && authContext.user?.id !== 'guest' && (
-                        <AvatarComponent sidebarPosition={sidebarPosition} />
-                    )}    
+            {authContext?.authenticated && authContext.user?.id !== 'guest' && (
+                      <AvatarComponent sidebarPosition={sidebarPosition} />
+                  )}
 
             {HeaderToolBar && headerToolBarReplace ? (
                 // Replace mode: Only render the custom HeaderToolBar
-                <HeaderToolBar />
+                (<HeaderToolBar />)
             ) : (
                 // Default mode: Render all actions
-                <>       
+                (<>
                     {HeaderToolBar && <HeaderToolBar />}
                     {authContext?.authenticated ? <BridgedLocalesMenuButton /> :  <LangSwitcher />}
                     <DarkToggleMode />
-                </>
+                </>)
             )}
         </Box>
     );

package/src/pages/DASHLightWeightLogin.tsx

@@ -403,13 +403,14 @@ const DASHLightWeightLogin: React.FC<DASHLightWeightLoginProps> = (props) => {
                
             >
                 <Container maxWidth="sm" sx={{ p: 1 }}>
-                    <Box 
-                        display="flex" 
-                        justifyContent="center" 
-                        alignItems="center" 
-                        minHeight="50vh"
-                        textAlign="center"
-                    >
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            minHeight: "50vh",
+                            textAlign: "center"
+                        }}>
                         <div>Cargando...</div>
                     </Box>
                 </Container>