@dashadmin/dash-admin 1.3.44 → 1.3.46

package/src/contexts/com/components/EchoNotificationsCenter.tsx

@@ -0,0 +1,65 @@
+/**
+ * EchoNotificationsCenter
+ *
+ * Wires LaravelEchoContext's real-time "urgency-alert" events into
+ * dash-components' generic NotificationsCenter (bell button + menu + toast
+ * stack + draggable dialogs). This replaces what used to be an ~500-line
+ * NotificationsCenter.tsx hand-copied into every domain app — kitchntabs-app,
+ * kitchntabs-system, kitchntabs-web, vanexa-app, vanexa-system, vanexa-web all
+ * had byte-identical copies of this exact wiring. Each of those apps now just
+ * renders <EchoNotificationsCenter /> instead of maintaining its own copy.
+ *
+ * kitchntabs-mall intentionally keeps its own NotificationsCenter — it also
+ * handles mall-specific "mall_order_status_update" events with event
+ * deduplication and translated messages, which is real business logic, not
+ * duplicated boilerplate. Folding it into this shared component would need a
+ * proper event-transformer API, not a copy/paste consolidation.
+ */
+import React, { useContext, useEffect } from 'react';
+import { NotificationsCenter, useNotificationsCenter, type NotificationsCenterLabels } from 'dash-components';
+import LaravelEchoContext, { ILaravelEchoContext } from '../LaravelEchoContext';
+
+// Matches the hardcoded Spanish strings every duplicated app copy used to
+// render (dash-components' defaults are English).
+const spanishLabels: NotificationsCenterLabels = {
+    title: 'Notificaciones',
+    markAll: 'Marcar todas',
+    noNotifications: 'No hay notificaciones',
+    close: 'Cerrar',
+    acknowledge: 'Entendido',
+    customer: 'Cliente:',
+    store: 'Tienda:',
+    received: 'Recibido:',
+    now: 'Ahora',
+    minutesAgo: 'm',
+    hoursAgo: 'h',
+    daysAgo: 'd',
+};
+
+const EchoNotificationsCenter: React.FC = () => {
+    const { lastEvent } = useContext<ILaravelEchoContext>(LaravelEchoContext);
+    const hook = useNotificationsCenter({ labels: spanishLabels });
+
+    useEffect(() => {
+        if (lastEvent && lastEvent.type === 'urgency-alert') {
+            const notification: any = lastEvent?.notificationPayload;
+            hook.addNotification({
+                title: notification?.title || 'Alerta',
+                message: notification?.message || '',
+                customer: notification?.customer_info?.name
+                    ? `${notification.customer_info.name} - Mesa ${notification.customer_info.table}`
+                    : '',
+                store: notification?.store_info?.name || '',
+                data: notification,
+            }, { showDialog: true, showToast: true, toastSeverity: 'warning' });
+        }
+        // Only re-run when a new event arrives, matching the original per-app
+        // implementations — addNotification's own setState calls are all
+        // functional updates, so a stale hook reference here is harmless.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [lastEvent]);
+
+    return <NotificationsCenter notificationsHook={hook} />;
+};
+
+export default EchoNotificationsCenter;

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

@@ -82,7 +82,7 @@ const GenerateItems: React.FC<{ items: IMenuItem[]; navExpanded: boolean, navSiz
                             />
                         ) : (
 
-                            <SidebarItem level={level} navExpanded={navExpanded} navSize={navSize} item={item} key={index} />
+                            <SidebarItem  level={level} navExpanded={navExpanded} navSize={navSize} item={item} key={index} />
                         );
                     })}
                 </List>

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

@@ -63,6 +63,7 @@ const SidebarItem = ({
 
   return (
     <ListItemButton
+      className={className}
       selected={isCurrent}
       onClick={(e) => {
       

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

@@ -71,7 +71,7 @@ const SidebarActions: React.FC<SidebarActionsProps> = ({
                 <HeaderToolBar />
             ) : (
                 // Default mode: Render all actions
-                <>            
+                <>       
                     {HeaderToolBar && <HeaderToolBar />}
                     {authContext?.authenticated ? <BridgedLocalesMenuButton /> :  <LangSwitcher />}
                     <DarkToggleMode />

package/src/index.tsx

@@ -32,6 +32,7 @@ export { default as CacheInvalidatorListenerComponent } from './utils/cache/Cach
 export { AuthContext } from './contexts/auth';
 export { NotificationComponent } from './contexts/com/components/NotificationRenderer'
 export { NotificationWrapper } from './contexts/com/components/NotificationsWidget'
+export { default as EchoNotificationsCenter } from './contexts/com/components/EchoNotificationsCenter'
 
 export { default as useLaravelEcho } from './contexts/com/useLaravelEcho';
 export { default as WSMessagesManager } from './hooks/notifications/WSMessagesManager';
@@ -84,7 +85,21 @@ export { default as useFormPersistence } from "./hooks/useFormPersistance";
 export { default as AvatarComponent } from './components/user/AvatarComponent';
 export { default as TenantAvatarComponent } from './components/user/TenantAvatarComponent';
 export { default as UserPreferences } from './components/user/UserPreferences';
+export { default as Profile } from './pages/Profile';
 export { default as LanguageSwitcher } from './components/misc/LanguageSwitcher';
+export { default as LangSwitcher } from './components/i18n/LangSwitcher';
+export {
+    default as TenantSwitcher,
+    dispatchTenantSwitchEvent,
+    getActiveTenantId,
+    isTenantImpersonationEnabled,
+    type TenantSwitcherProps,
+    type TenantSwitchEventDetail,
+} from './components/tenancy/TenantSwitcher';
+export {
+    default as GlobalTenantWrapper,
+    type IGlobalTenantWrapper,
+} from './components/tenancy/GlobalTenantWrapper';
 export { default as DarkModeSwitcher } from './components/misc/DarkModeSwitcher';
 
 // Navigation Components

package/src/pages/Profile.tsx

@@ -1,5 +1,4 @@
 import { FC, useEffect, useState } from 'react';
-//import { Button as LoadingButton } from "@mui/material";
 
 import { Button, Card, CardContent, CardHeader, Grid, Typography } from '@mui/material';
 
@@ -8,7 +7,7 @@ import {
 	useRefresh,
 	Loading,
 	useNotify,
-	useGetIdentity,
+	useTranslate,
 	TextInput,
 } from 'react-admin';
 
@@ -16,54 +15,61 @@ import { useDispatch } from 'react-redux';
 import { DASH_REDUX_ACTIONS } from 'dash-admin-state';
 
 import React from 'react';
-import useAxios from '../hooks/axios';
-import SingleImageUploader from './SingleImageUploader';
+import { useAxios } from 'dash-axios-hook';
+import { SingleImageUploader } from 'dash-components';
 import { useAuthContext } from '../contexts/auth';
-import UserPreferences from "../components/user/UserPreferences";
+import UserPreferences from '../components/user/UserPreferences';
 
 const Profile: FC = (_props) => {
 	const [currTab, setCurrTab] = useState('auth/update/info');
 	const [isLoading, setIsLoading] = useState(false);
-	//const { identity, isLoading: identityLoading } = useGetIdentity();
-    
-    const { user, fetchAuth } = useAuthContext(); // Add fetchCompleteAuth here
+
+	const { user, fetchAuth } = useAuthContext();
 	const [avatar, setAvatar] = useState({ rawFile: null, urlFile: '' });
 	const notify = useNotify();
-	
-	const { axios } = useAxios();
+	const translate = useTranslate();
+
+	const axios = useAxios();
 	const refresh = useRefresh();
 
+	const { showPreferences = false } = _props;
+
 	const dispatch = useDispatch();
 
 	useEffect(() => {
 		dispatch(
 			DASH_REDUX_ACTIONS.updatePage({
-				title: 'Perfil',
+				title: translate('profile.title', { _: 'Perfil' }),
 				//icon:
-				subTitle: 'Configuración de perfil',
+				subTitle: translate('profile.subtitle', { _: 'Configuración de perfil' }),
 			}),
 		);
-	}, []);
+		// translate is included so the page header re-translates on locale change
+		// (react-admin returns a new translate reference when the locale changes)
+	}, [translate]);
 
 	const validateUserCreation = (values) => {
 		const errors: any = {};
 		if (currTab === 'auth/update/password') {
+			const required = translate('profile.validation.required', { _: 'El campo es requerido' });
+			const mismatch = translate('profile.validation.password_mismatch', { _: 'Las contraseñas no coinciden' });
+
 			if (
 				(values.password || values.password_confirmation) &&
 				!values.current_password
 			) {
-				errors.current_password = 'El campo es requerido';
+				errors.current_password = required;
 			}
 			if (
 				values.current_password &&
 				(!values.password || !values.password_confirmation)
 			) {
-				errors.password = 'El campo es requerido';
-				errors.password_confirmation = 'El campo es requerido';
+				errors.password = required;
+				errors.password_confirmation = required;
 			}
 			if (values.password_confirmation !== values.password) {
-				errors.password = 'Las contraseñas no coinciden';
-				errors.password_confirmation = 'Las contraseñas no coinciden';
+				errors.password = mismatch;
+				errors.password_confirmation = mismatch;
 			}
 		}
 
@@ -72,7 +78,7 @@ const Profile: FC = (_props) => {
 
 	const handleSubmit = async (values) => {
 		setIsLoading(true);
-		
+
 		const formData = new FormData();
 
 		const passwords = {
@@ -96,31 +102,27 @@ const Profile: FC = (_props) => {
 			} else {
 				await axios.put(currTab, passwords);
 			}
-			
-			
-			   
+
 			// Refresh the auth context with updated user data
 			try {
-           
 				await fetchAuth();
 				console.log('Auth context refreshed after profile update');
 			} catch (authError) {
-				console.error('Faileds to refresh auth context:', authError);
+				console.error('Failed to refresh auth context:', authError);
 				// Don't show error to user as the main operation succeeded
 			}
 
-            notify('Usuario actualizado correctamente', { type:'success' });
+			notify(translate('profile.notify.success', { _: 'Usuario actualizado correctamente' }), { type: 'success' });
 			refresh();
 		} catch (error: any) {
 
-        
 			// Handle backend error messages gracefully
 			let mainMessage = error?.response?.data?.message || error?.body?.message || '';
 			let fieldErrors = error?.response?.data?.errors || error?.body?.errors || error;
 			if (mainMessage) {
-				notify(`Error al actualizar el usuario, ${mainMessage}`, { type: 'error' });
+				notify(translate('profile.notify.error_with_message', { message: mainMessage, _: `Error al actualizar el usuario, ${mainMessage}` }), { type: 'error' });
 			} else {
-				notify('Error al actualizar el usuario', { type: 'error' });
+				notify(translate('profile.notify.error', { _: 'Error al actualizar el usuario' }), { type: 'error' });
 			}
 			if (fieldErrors && typeof fieldErrors === 'object') {
 				const errors: any = {};
@@ -133,6 +135,8 @@ const Profile: FC = (_props) => {
 			}
 		} finally {
 			setIsLoading(false);
+			// TechDebt: the avatar update doesn't reflect immediately after the update, this is a quick fix to reload the page and show the new avatar, ideally we should update the auth context with the new avatar url and avoid reloading the page
+			window.location.reload();
 		}
 	};
 
@@ -146,17 +150,6 @@ const Profile: FC = (_props) => {
 
 	return (
 		<div className='dash-profile'>
-       
-			{/*Page Header
-      <Row>
-        <Col xs={24} md={12}>
-          <div className="dash-mb-2">
-            <h2 className="dash-page-title">Perfil</h2>
-          </div>
-        </Col>
-      </Row>
-      */}
- 
 
 			{user ? (
 				<Form
@@ -165,16 +158,16 @@ const Profile: FC = (_props) => {
 					defaultValues={{ name: user?.name, email: user?.email, lastname: user?.lastname }}
 					className='dash-form'
 				>
-                   
+
 					<div className='dash-card-content dash-module dash-card-profile'>
-                      
-						<Grid 
-							container 
+
+						<Grid
+							container
 							spacing={{ xs: 2, md: 3 }}
 							sx={{ minHeight: '400px' }}
 						>
 							{/* Profile Image Section */}
-							<Grid 
+							<Grid
 								size={{ xs: 12, md: 4 }}
 								display="flex"
 								justifyContent="center"
@@ -190,51 +183,18 @@ const Profile: FC = (_props) => {
 										width: '100%',
 									}}
 								>
-									{/*<div className='dash-profile-img'>
-										{identity.image_url || avatar.urlFile ? (
-											<img src={avatar.urlFile || identity.image_url} alt='' />
-										) : (
-											<div className='dash-profile-icon'>
-												<Icon.User size={'90px'} color={'#fff'} />
-											</div>
-										)}
-										<IconButton
-											aria-label='upload picture'
-											component='label'
-											className='dash-profile-edit'
-										>
-											<input
-												hidden
-												accept='image/*'
-												type='file'
-												onChange={(e) =>
-													setAvatar({
-														rawFile: e.target.files[0],
-														urlFile: URL.createObjectURL(e.target.files[0]),
-													})
-												}
-											/>
-											<Icon.PenTool
-												size={'22px'}
-												color={'#000'}
-												style={{ opacity: '0.6' }}
-											/>
-										</IconButton>
-											</div>*/}
-                                   
-                                   {"<!-- F -->"}
-									<SingleImageUploader 
-										currentUrl={user?.image_path} 
+									<SingleImageUploader
+										currentUrl={user?.image_path}
 										onChange={(file: File) => {
 											setAvatar({
 												rawFile: file,
 												urlFile: URL.createObjectURL(file),
 											});
-										}}  
-                                        classNamePrefix='dash-profile'
+										}}
+										classNamePrefix='dash-profile'
 									/>
-									<Typography 
-										className='dash-profile-name' 
+									<Typography
+										className='dash-profile-name'
 										variant='h2'
 										sx={{ mt: 2, textAlign: 'center' }}
 									>
@@ -257,16 +217,16 @@ const Profile: FC = (_props) => {
 
 							{/* User Info Section */}
 							<Grid size={{ xs: 12, md: 4 }}>
-								<CardHeader 
-									sx={{ padding: '16px 25px 0' }} 
-									title='Info' 
+								<CardHeader
+									sx={{ padding: '16px 25px 0' }}
+									title={translate('profile.info.title', { _: 'Info' })}
 								/>
 								<CardContent sx={{ padding: '25px' }}>
 									<Grid container spacing={2}>
 										<Grid size={12}>
 											<TextInput
 												source='name'
-												label='Nombre'
+												label={translate('profile.info.name', { _: 'Nombre' })}
 												variant='outlined'
 												fullWidth
 											/>
@@ -274,7 +234,7 @@ const Profile: FC = (_props) => {
 										<Grid size={12}>
 											<TextInput
 												source='lastname'
-												label='Apellido'
+												label={translate('profile.info.lastname', { _: 'Apellido' })}
 												variant='outlined'
 												fullWidth
 											/>
@@ -282,7 +242,7 @@ const Profile: FC = (_props) => {
 										<Grid size={12}>
 											<TextInput
 												source='email'
-												label='Email'
+												label={translate('profile.info.email', { _: 'Email' })}
 												variant='outlined'
 												fullWidth
 											/>
@@ -303,7 +263,9 @@ const Profile: FC = (_props) => {
 													}
 												}}
 											>
-												{isLoading && currTab === 'auth/update/info' ? 'Guardando...' : 'Guardar'}
+												{isLoading && currTab === 'auth/update/info'
+													? translate('profile.info.saving', { _: 'Guardando...' })
+													: translate('profile.info.save', { _: 'Guardar' })}
 											</Button>
 										</Grid>
 									</Grid>
@@ -314,7 +276,7 @@ const Profile: FC = (_props) => {
 							<Grid size={{ xs: 12, md: 4 }}>
 								<CardHeader
 									sx={{ padding: '16px 25px 0' }}
-									title='Contraseñas'
+									title={translate('profile.password.title', { _: 'Contraseñas' })}
 								/>
 								<CardContent sx={{ padding: '25px' }}>
 									<Grid container spacing={2}>
@@ -322,7 +284,7 @@ const Profile: FC = (_props) => {
 											<TextInput
 												type='password'
 												source='current_password'
-												label='Contraseña actual'
+												label={translate('profile.password.current', { _: 'Contraseña actual' })}
 												variant='outlined'
 												fullWidth
 											/>
@@ -331,14 +293,14 @@ const Profile: FC = (_props) => {
 											<TextInput
 												type='password'
 												source='password'
-												label='Nueva contraseña'
+												label={translate('profile.password.new', { _: 'Nueva contraseña' })}
 												variant='outlined'
 												fullWidth
 											/>
 										</Grid>
 										<Grid size={12}>
 											<TextInput
-												label='Repita nueva contraseña'
+												label={translate('profile.password.confirm', { _: 'Repita nueva contraseña' })}
 												type='password'
 												source='password_confirmation'
 												variant='outlined'
@@ -361,7 +323,9 @@ const Profile: FC = (_props) => {
 													}
 												}}
 											>
-												{isLoading && currTab === 'auth/update/password' ? 'Guardando Contraseñas...' : 'Guardar Contraseñas'}
+												{isLoading && currTab === 'auth/update/password'
+													? translate('profile.password.saving', { _: 'Guardando Contraseñas...' })
+													: translate('profile.password.save', { _: 'Guardar Contraseñas' })}
 											</Button>
 										</Grid>
 									</Grid>
@@ -369,21 +333,19 @@ const Profile: FC = (_props) => {
 							</Grid>
 
 							{/* User Preferences Section */}
-							<Grid size={{ xs: 12
-                             }}>
-								<CardHeader
-									sx={{ padding: '16px 25px 0' }}
-									title='Preferencias'
-								/>
-								<CardContent sx={{ padding: '25px' }}>
-									<UserPreferences />
-								</CardContent>
-							</Grid>
+							{showPreferences && (
+								<Grid size={{ xs: 12 }}>
+									<CardContent sx={{ padding: '25px' }}>
+										<UserPreferences />
+									</CardContent>
+								</Grid>
+							)}
+
 						</Grid>
 					</div>
-			
+
 				</Form>
-				
+
 			) : (
 				<Loading />
 			)}

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,70 @@ 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',
+		},
+	},
+	// Profile page
+	profile: {
+		title: 'Profile',
+		subtitle: 'Profile settings',
+		info: {
+			title: 'Info',
+			name: 'Name',
+			lastname: 'Last name',
+			email: 'Email',
+			save: 'Save',
+			saving: 'Saving...',
+		},
+		password: {
+			title: 'Passwords',
+			current: 'Current password',
+			new: 'New password',
+			confirm: 'Confirm new password',
+			save: 'Save Passwords',
+			saving: 'Saving Passwords...',
+		},
+		preferences: {
+			title: 'Preferences',
+		},
+		validation: {
+			required: 'This field is required',
+			password_mismatch: 'Passwords do not match',
+		},
+		notify: {
+			success: 'User updated successfully',
+			error: 'Error updating user',
+			error_with_message: 'Error updating user, %{message}',
+		},
+	},
 };
 
 export default {