@dashadmin/dash-admin 1.3.42 → 1.3.45

package/src/components/serviceAccount/ApiKeyRevealDialog.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CheckIcon from "@mui/icons-material/Check";
+import { useI18nBridge } from "../../contexts/I18nBridgeContext";
+
+export interface IApiKeyRevealContentProps {
+    /** The plaintext token, shown exactly once. */
+    token: string;
+    /** Name of the key, for context. */
+    name?: string | null;
+}
+
+/**
+ * One-time reveal of a newly issued API key.
+ *
+ * The plaintext credential is never persisted in recoverable form - only a
+ * short display prefix is stored - so this is the single moment the operator
+ * can copy it.
+ *
+ * Designed to be passed as the `content` of the framework dialog via a
+ * resource's `createSuccessDialog`, so it inherits the app's dialog chrome
+ * rather than introducing a second dialog system:
+ *
+ *   createSuccessDialog: (data) => data?.plain_text_token
+ *       ? { title: '...', content: <ApiKeyRevealContent token={data.plain_text_token} name={data.name} /> }
+ *       : null,
+ */
+export const ApiKeyRevealContent: React.FC<IApiKeyRevealContentProps> = ({ token, name }) => {
+    // DialogServiceProvider is mounted ABOVE <Admin> in DASHAppProviders, so
+    // dialog content renders outside React Admin's i18n context and
+    // useTranslate() would silently fall through to the English defaults.
+    // The bridge is the supported way to translate from out there - same
+    // pattern as AppMaterialMenu.
+    const { i18nProvider, locale } = useI18nBridge();
+    const [copied, setCopied] = useState(false);
+
+    const translate = React.useCallback(
+        (key: string, options?: any) => {
+            if (i18nProvider?.translate) {
+                try {
+                    return i18nProvider.translate(key, options);
+                } catch {
+                    return options?._ ?? key;
+                }
+            }
+            return options?._ ?? key;
+        },
+        // locale is a dependency so the text re-renders on a language switch.
+        [i18nProvider, locale]
+    );
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(token);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch {
+            // Clipboard API unavailable (insecure context or denied permission).
+            // The value stays selectable so the operator can still copy it by
+            // hand - never leave them without a path to the secret.
+            setCopied(false);
+        }
+    };
+
+    return (
+        <Box>
+            <Alert severity="warning" sx={{ mb: 2 }}>
+                {translate("serviceAccount.reveal.warning", {
+                    _: "This is the only time this key will be shown. It cannot be recovered later — if you lose it, you will have to issue a new one.",
+                })}
+            </Alert>
+
+            {name ? (
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                    {translate("serviceAccount.reveal.forKey", { _: "Key" })}: <strong>{name}</strong>
+                </Typography>
+            ) : null}
+
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    p: 1.5,
+                    borderRadius: 1,
+                    border: (theme) => `1px solid ${theme.palette.divider}`,
+                    bgcolor: (theme) =>
+                        theme.palette.mode === "dark" ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)",
+                }}
+            >
+                <Box
+                    component="code"
+                    sx={{
+                        flex: 1,
+                        fontFamily: "monospace",
+                        fontSize: "0.875rem",
+                        wordBreak: "break-all",
+                        userSelect: "all",
+                    }}
+                >
+                    {token}
+                </Box>
+
+                <Tooltip
+                    title={
+                        copied
+                            ? translate("serviceAccount.reveal.copied", { _: "Copied" })
+                            : translate("serviceAccount.reveal.copy", { _: "Copy" })
+                    }
+                >
+                    <IconButton onClick={handleCopy} size="small" aria-label="copy api key">
+                        {copied ? (
+                            <CheckIcon color="success" fontSize="small" />
+                        ) : (
+                            <ContentCopyIcon fontSize="small" />
+                        )}
+                    </IconButton>
+                </Tooltip>
+            </Box>
+        </Box>
+    );
+};
+
+export default ApiKeyRevealContent;

package/src/components/serviceAccount/ServiceAccountStatusSwitch.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { useRecordContext, useNotify, useRefresh } from "react-admin";
+import { useAxios } from "dash-axios-hook";
+import Box from "@mui/material/Box";
+import Switch from "@mui/material/Switch";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import CircularProgress from "@mui/material/CircularProgress";
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import { useI18nBridge } from "../../contexts/I18nBridgeContext";
+
+/**
+ * Enable/disable switch for a service account API key.
+ *
+ * Deliberately NOT a form field. Status is changed through the dedicated
+ * enable/disable endpoints rather than the update payload, for two reasons:
+ *
+ *  - The update contract rejects everything except role_ids, so submitting a
+ *    status would 422.
+ *  - Disabling must not rotate the credential. The endpoints flip a flag and
+ *    leave the token untouched, so re-enabling restores the same key rather
+ *    than forcing every integration to redeploy a new secret.
+ *
+ * The switch therefore acts immediately and refreshes, instead of waiting for
+ * a form save that would never carry it.
+ */
+const ServiceAccountStatusSwitch: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+    resourceConfig,
+}) => {
+    const record = useRecordContext();
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const axios = useAxios();
+    const { i18nProvider } = useI18nBridge();
+    const [loading, setLoading] = useState(false);
+
+    const translate = React.useCallback(
+        (key: string, fallback: string) => {
+            try {
+                return i18nProvider?.translate(key, { _: fallback }) ?? fallback;
+            } catch {
+                return fallback;
+            }
+        },
+        [i18nProvider]
+    );
+
+    if (!record) return null;
+
+    const isActive = record.status === "active";
+
+    const handleToggle = async () => {
+        setLoading(true);
+        try {
+            const action = isActive ? "disable" : "enable";
+
+            await axios.post(`${resourceConfig.model}/${record.id}/${action}`);
+
+            notify(
+                isActive
+                    ? translate("serviceAccount.notify.disabled", "API key disabled")
+                    : translate("serviceAccount.notify.enabled", "API key enabled"),
+                { type: "success" }
+            );
+
+            refresh();
+        } catch (error) {
+            console.error("ServiceAccountStatusSwitch: toggle failed", error);
+            notify(
+                translate("serviceAccount.notify.toggle_error", "Could not change the key status"),
+                { type: "error" }
+            );
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1, my: 1 }}>
+            <FormControlLabel
+                control={
+                    <Switch
+                        checked={isActive}
+                        onChange={handleToggle}
+                        disabled={loading}
+                        color="success"
+                    />
+                }
+                label={
+                    isActive
+                        ? translate("serviceAccount.status.active", "Active")
+                        : translate("serviceAccount.status.disabled", "Disabled")
+                }
+            />
+            {loading ? <CircularProgress size={16} /> : null}
+        </Box>
+    );
+};
+
+export default ServiceAccountStatusSwitch;

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

@@ -390,6 +390,7 @@ const AppMaterialMenu: React.FC<IAppMenuExtended> = props => {
     const isHorizontal = sidebarPosition === "top" || sidebarPosition === "bottom";
 
     return <>
+
         <Box className='sidebar-header'
 
             sx={{

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

@@ -227,7 +227,11 @@ const CollapsableSidebarMenu = ({
             />
           )}
           {navExpanded && (
-            <div onClick={handleExpandClick}>
+            // "expand-icon" is ALSO on the wrapper (not just the inner svg): the row's
+            // 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}>
               {/* For bottom position, invert icons since submenu opens upward */}
               {sidebarPosition === "bottom" ? (
                 localOpen ? 

package/src/default-theme/menu/AppMenuComponents/submenuConstants.ts

@@ -20,9 +20,14 @@ export const getSubmenuBaseStyle = (
     overflowY: 'auto',
     width: sidebarPosition === "top" || sidebarPosition === "bottom" ? 'auto' : '260px',
     minWidth: '200px',
-    background: 'var(--module-bg, #252526)',
-    boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
-    borderRadius: 8,
+    // The wrapper is the SINGLE owner of the panel visuals (surface, border,
+    // shadow, radius, padding). The inner ul.dropdown must stay transparent —
+    // if both layers draw a border/background, their edges show as a seam line.
+    background: 'var(--primary-contrast, #252526)',
+    border: '1px solid rgba(255,255,255,0.08)',
+    boxShadow: '0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -4px rgba(0,0,0,0.4)',
+    borderRadius: 12,
+    padding: 6,
 });
 
 /**

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

@@ -305,7 +305,7 @@ const AppSidebarMaterial: React.FC<AppSidebarMaterialProps> = (props) => {
     
     return (
         <Box sx={{ display: 'flex' }}>
-          
+       
             <MuiDrawer
                 variant={localNavSize === "small" ? 'temporary' : 'permanent'}
                 anchor={sidebarPosition}

package/src/hooks/axios.tsx

@@ -2,6 +2,23 @@ import axios from 'axios';
 import constants from 'dash-constants/src/DASHAdminSystemConstants';
 import { dashStorage } from 'dash-utils';
 
+// Track refresh state to prevent multiple simultaneous refresh attempts
+let isRefreshing = false;
+let failedQueue: Array<{ resolve: (token: string) => void; reject: (error: any) => void }> = [];
+
+const processQueue = (error: any, token?: string) => {
+	failedQueue.forEach(prom => {
+		if (error) {
+			prom.reject(error);
+		} else {
+			prom.resolve(token!);
+		}
+	});
+
+	isRefreshing = false;
+	failedQueue = [];
+};
+
 export const initAxios = () => {
 	let CSRFAuth = false;
 
@@ -36,8 +53,74 @@ export const initAxios = () => {
 			//console.log("Axios Success", response);
 			return response;
 		},
-		(error) => {
-			window.dispatchEvent(new MessageEvent('GlobalError', { data: {error:error} }));
+		async (error) => {
+			const originalRequest = error.config;
+
+			// Skip refresh for auth-related endpoints to prevent infinite loops
+			const authEndpoints = ['/login', '/auth/refresh', '/logout', '/register'];
+			const isAuthEndpoint = authEndpoints.some(endpoint =>
+				originalRequest.url?.includes(endpoint)
+			);
+
+			// Handle 401 Unauthorized
+			if (error.response?.status === 401 && !isAuthEndpoint && !originalRequest._retry) {
+				if (isRefreshing) {
+					// If already refreshing, queue this request
+					return new Promise((resolve, reject) => {
+						failedQueue.push({ resolve, reject });
+					}).then(token => {
+						originalRequest.headers.Authorization = 'Bearer ' + token;
+						return instance(originalRequest);
+					}).catch(err => {
+						return Promise.reject(err);
+					});
+				}
+
+				originalRequest._retry = true;
+				isRefreshing = true;
+
+				try {
+					const refreshToken = dashStorage.getItem('refreshToken');
+
+					if (!refreshToken) {
+						// No refresh token available, logout user
+						await handleAuthFailure();
+						return Promise.reject(error);
+					}
+
+					// Attempt to refresh the access token
+					const refreshResponse = await axios.post(
+						`${constants.system.ADMIN_API_URL}/auth/refresh`,
+						{ refresh_token: refreshToken }
+					);
+
+					const { token, refresh_token } = refreshResponse.data;
+
+					// Store new tokens
+					dashStorage.setItem('token', token);
+					dashStorage.setItem('refreshToken', refresh_token);
+
+					// Update original request with new token
+					originalRequest.headers.Authorization = 'Bearer ' + token;
+
+					// Process queued requests
+					processQueue(null, token);
+
+					// Retry original request
+					return instance(originalRequest);
+				} catch (refreshError) {
+					// Refresh failed, logout user
+					await handleAuthFailure();
+					processQueue(refreshError, null);
+					return Promise.reject(refreshError);
+				}
+			}
+
+			// Dispatch global error event for other errors
+			if (error.response?.status !== 401) {
+				window.dispatchEvent(new MessageEvent('GlobalError', { data: { error } }));
+			}
+
 			if (error.response && error.response.status === 422) {
 				/**
 				 * Error Handling This is important for the system to parse Form field errors within AutoAdmin.
@@ -45,6 +128,7 @@ export const initAxios = () => {
 				 **/
 				return Promise.reject(error.response.data?.errors || error);
 			}
+
 			return Promise.reject(error);
 		},
 	);
@@ -52,6 +136,25 @@ export const initAxios = () => {
 	return instance;
 };
 
+// Helper function to handle authentication failure
+async function handleAuthFailure() {
+	// Clear auth data
+	dashStorage.removeItem('token');
+	dashStorage.removeItem('refreshToken');
+	dashStorage.removeItem('user');
+	dashStorage.removeItem('auth');
+	dashStorage.removeItem('authenticated');
+	dashStorage.removeItem('roles');
+
+	// Dispatch logout event
+	window.dispatchEvent(new MessageEvent('auth:logout'));
+
+	// Redirect to login if not already there
+	if (!window.location.pathname.includes('/login')) {
+		window.location.href = '/login';
+	}
+}
+
 const useAxios = () => {
 	const axios = initAxios();
 	return {

package/src/providers/authProvider.tsx

@@ -9,9 +9,11 @@ export const logoutFromStorage = async () => {
 	removeCookie('token');
 	dashStorage.removeItem('user');
 	dashStorage.removeItem('auth');
+	dashStorage.removeItem('token');
+	dashStorage.removeItem('refreshToken'); // Clear refresh token for security
 	dashStorage.setItem('authenticated', 'false');
 	dashStorage.setItem('roles', null); // before it was guest role.
-	
+
 	// Clear auth data from device store (Electron/Capacitor)
 	await clearDeviceStoreAuth();
 };
@@ -40,6 +42,11 @@ export default {
 
 				dashStorage.setItem('token', loginResponse.data.token);
 
+				// Store refresh token for automatic token refresh
+				if (loginResponse.data.refresh_token) {
+					dashStorage.setItem('refreshToken', loginResponse.data.refresh_token);
+				}
+
 				try {
 					let { data: auth } = await axios.get('/auth/getauth');
 

package/src/providers/i18n/en.ts

@@ -311,8 +311,57 @@ const dashEnglish = {
 		auto_reset_notice: 'This screen will automatically reset in 30 seconds',
 		loading: 'Loading...',
 	},
+	// Service account API keys
+	serviceAccount: {
+		reveal: {
+			title: 'Copy your API key now',
+			warning:
+				'This is the only time this key will be shown. It cannot be recovered later — if you lose it, you will have to issue a new one.',
+			forKey: 'Key',
+			copy: 'Copy',
+			copied: 'Copied',
+			dismiss: 'I have saved it',
+		},
+		status: {
+			active: 'Active',
+			disabled: 'Disabled',
+		},
+		expiration: {
+			'1': '1 day',
+			'7': '7 days',
+			'30': '30 days',
+			never: 'Never',
+		},
+		notify: {
+			enabled: 'API key enabled',
+			disabled: 'API key disabled',
+			toggle_error: 'Could not change the key status',
+		},
+		action: {
+			enable: 'Enable',
+			disable: 'Disable',
+		},
+		// Shown when a tenancy-level role is selected: such a key reaches every
+		// tenant in the account, so the tenant field stops being a boundary.
+		tenancy_role_warning:
+			'This role grants access to every tenant in the account. The selected tenant is informational, not a security boundary.',
+	},
 	// Resource labels for admin panel
 	resource: {
+		tenancy: {
+			serviceAccounts: {
+				label: 'Service Accounts',
+				name: 'Name',
+				tenant: 'Tenant',
+				roles: 'Roles',
+				expiration: 'Expiration',
+				status: 'Status',
+				token: 'Key',
+				expires_at: 'Expires',
+				last_used_at: 'Last used',
+				created_at: 'Created',
+			},
+		},
 		// Groups
 		groups: {
 			system_resources: 'System Resources',
@@ -525,6 +574,37 @@ const dashEnglish = {
 		has_modifiers: 'Customizable',
 		no_more_products: 'No more products',
 	},
+	// JSON Color Selector - image-based theme extraction
+	colorSelector: {
+		imageExtractor: {
+			title_ai: 'AI Theme Generator',
+			title_local: 'Theme from Image',
+			upload_prompt: 'Upload an Image to Extract Colors',
+			upload_hint: "Select an image file and we'll automatically extract a color palette",
+			upload_button: 'Choose Image',
+			drop_hint: 'or drag and drop it here',
+			invalid_file_type: 'Please select a valid image file',
+			file_too_large: 'File size must be less than %{limit}MB',
+			extracting: 'Extracting colors from image...',
+			extracted_colors: 'Extracted Colors (%{count} colors found)',
+			dominant_label: 'Dominant',
+			uploaded_image_alt: 'Uploaded image',
+			no_palette_error: 'Please extract colors from an image first',
+			theme_generation_failed: 'Failed to generate theme',
+			theme_description_label: 'Theme Description (Optional)',
+			theme_description_placeholder:
+				"Optional: Describe the theme style you want (e.g., 'modern and minimalist', 'warm and cozy', 'professional corporate')",
+			apply_colors_button: 'Apply Colors',
+			generate_button: 'Generate AI Theme',
+			generating_button: 'Generating...',
+			apply_colors_help_label: 'Apply Colors:',
+			apply_colors_help_desc:
+				'Maps the extracted palette to your base theme colors locally — no AI involved',
+			generate_help_label: 'Generate AI Theme:',
+			generate_help_desc:
+				'Uses AI to create a complete color scheme based on extracted colors and your description',
+		},
+	},
 };
 
 export default {

package/src/providers/i18n/es.ts

@@ -318,8 +318,57 @@ const dashSpanish = {
 		auto_reset_notice: 'Esta pantalla se reiniciará automáticamente en 30 segundos',
 		loading: 'Cargando...',
 	},
+	// Service account API keys
+	serviceAccount: {
+		reveal: {
+			title: 'Copia tu API Key ahora',
+			warning:
+				'Esta es la única vez que se mostrará esta clave. No se puede recuperar más adelante — si la pierdes, tendrás que emitir una nueva.',
+			forKey: 'Clave',
+			copy: 'Copiar',
+			copied: 'Copiado',
+			dismiss: 'La he guardado',
+		},
+		status: {
+			active: 'Activa',
+			disabled: 'Deshabilitada',
+		},
+		expiration: {
+			'1': '1 día',
+			'7': '7 días',
+			'30': '30 días',
+			never: 'Nunca',
+		},
+		notify: {
+			enabled: 'API Key habilitada',
+			disabled: 'API Key deshabilitada',
+			toggle_error: 'No se pudo cambiar el estado de la API Key',
+		},
+		action: {
+			enable: 'Habilitar',
+			disable: 'Deshabilitar',
+		},
+		// Shown when a tenancy-level role is selected: such a key reaches every
+		// tenant in the account, so the tenant field stops being a boundary.
+		tenancy_role_warning:
+			'Este rol otorga acceso a todos los locales de la cuenta. El local seleccionado es informativo, no un límite de seguridad.',
+	},
 	// Resource labels for admin panel
 	resource: {
+		tenancy: {
+			serviceAccounts: {
+				label: 'Cuentas de Servicio',
+				name: 'Nombre',
+				tenant: 'Local',
+				roles: 'Roles',
+				expiration: 'Expiración',
+				status: 'Estado',
+				token: 'Clave',
+				expires_at: 'Expira',
+				last_used_at: 'Último uso',
+				created_at: 'Creado',
+			},
+		},
 		// Groups
 		groups: {
 			system_resources: 'Recursos de Sistema',
@@ -531,6 +580,37 @@ const dashSpanish = {
 		has_modifiers: 'Personalizable',
 		no_more_products: 'No hay más productos',
 	},
+	// JSON Color Selector - extracción de tema desde imagen
+	colorSelector: {
+		imageExtractor: {
+			title_ai: 'Generador de Tema con IA',
+			title_local: 'Tema desde Imagen',
+			upload_prompt: 'Sube una Imagen para Extraer Colores',
+			upload_hint: 'Selecciona un archivo de imagen y extraeremos automáticamente una paleta de colores',
+			upload_button: 'Elegir Imagen',
+			drop_hint: 'o arrástrala aquí',
+			invalid_file_type: 'Por favor selecciona un archivo de imagen válido',
+			file_too_large: 'El archivo debe pesar menos de %{limit}MB',
+			extracting: 'Extrayendo colores de la imagen...',
+			extracted_colors: 'Colores Extraídos (%{count} colores encontrados)',
+			dominant_label: 'Dominante',
+			uploaded_image_alt: 'Imagen subida',
+			no_palette_error: 'Primero extrae los colores de una imagen',
+			theme_generation_failed: 'No se pudo generar el tema',
+			theme_description_label: 'Descripción del Tema (Opcional)',
+			theme_description_placeholder:
+				"Opcional: Describe el estilo de tema que deseas (ej: 'moderno y minimalista', 'cálido y acogedor', 'corporativo profesional')",
+			apply_colors_button: 'Aplicar Colores',
+			generate_button: 'Generar Tema con IA',
+			generating_button: 'Generando...',
+			apply_colors_help_label: 'Aplicar Colores:',
+			apply_colors_help_desc:
+				'Aplica la paleta extraída a los colores base de tu tema localmente — sin usar IA',
+			generate_help_label: 'Generar Tema con IA:',
+			generate_help_desc:
+				'Usa IA para crear un esquema de color completo basado en los colores extraídos y tu descripción',
+		},
+	},
 };
 
 export default {

package/src/providers/i18n/languages.tsx

@@ -3,3 +3,6 @@ import esMessages from './es';
 
 export const en = enMessages;
 export const es = esMessages;
+
+export { mergeTranslations } from './mergeTranslations';
+export type { TranslationMessages } from './mergeTranslations';