@dashadmin/dash-admin 1.3.45 → 1.3.47

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

@@ -605,6 +605,39 @@ const dashEnglish = {
 				'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 {

package/src/providers/i18n/es.ts

@@ -611,6 +611,39 @@ const dashSpanish = {
 				'Usa IA para crear un esquema de color completo basado en los colores extraídos y tu descripción',
 		},
 	},
+	// Profile page
+	profile: {
+		title: 'Perfil',
+		subtitle: 'Configuración de perfil',
+		info: {
+			title: 'Info',
+			name: 'Nombre',
+			lastname: 'Apellido',
+			email: 'Email',
+			save: 'Guardar',
+			saving: 'Guardando...',
+		},
+		password: {
+			title: 'Contraseñas',
+			current: 'Contraseña actual',
+			new: 'Nueva contraseña',
+			confirm: 'Repita nueva contraseña',
+			save: 'Guardar Contraseñas',
+			saving: 'Guardando Contraseñas...',
+		},
+		preferences: {
+			title: 'Preferencias',
+		},
+		validation: {
+			required: 'El campo es requerido',
+			password_mismatch: 'Las contraseñas no coinciden',
+		},
+		notify: {
+			success: 'Usuario actualizado correctamente',
+			error: 'Error al actualizar el usuario',
+			error_with_message: 'Error al actualizar el usuario, %{message}',
+		},
+	},
 };
 
 export default {

package/src/resources/User/components/AvatarUploadField.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import { useRecordContext } from 'react-admin';
+import { SingleImageUploader } from 'dash-components';
+import { useFormContext } from 'react-hook-form';
+
+export type AvatarComponent = IDashAutoAdminCustomFieldComponent;
+
+export const AvatarHandler: React.FC<AvatarComponent> = (props) => {
+	const { method, attribute } = props;
+	const record = useRecordContext();
+	const {
+		setValue,
+		formState: { errors },
+	} = useFormContext();
+
+	const onChange = (file: File) => {
+		setValue(attribute.attribute, file, { shouldDirty: true });
+	};
+
+	return (
+		<>
+			<SingleImageUploader
+				classNamePrefix='dash-profile'
+				{...method === "edit" && { currentUrl: `${record.image_path}`} }
+				onChange={onChange}
+			/>
+			{errors[attribute.attribute] && (
+				<span style={{ color: 'red' }}>
+					{errors[attribute.attribute]?.message?.toString() || 'Error'}
+				</span>
+			)}
+		</>
+	);
+};
+
+/**
+ * Generic user-avatar upload field for the shared user resource schema.
+ *
+ * Moved from kt-ecommerce (components/User/Avatar.tsx) - purely generic
+ * (dash-auto-admin/dash-components/react-hook-form only, no kitchntabs- or
+ * vanexa-specific logic), so it belongs alongside userSchema.tsx here rather
+ * than duplicated per domain. Renamed from "Avatar" to avoid colliding with
+ * dash-admin's unrelated components/user/AvatarComponent.tsx (the topbar
+ * user-menu avatar widget - a different component for a different purpose).
+ */
+const AvatarUploadField = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+			return <AvatarHandler attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'create':
+			return <AvatarHandler attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+			return <></>;
+	}
+};
+export default AvatarUploadField;

package/src/resources/User/components/PasswordFields.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import {
+	PasswordInput,
+} from 'react-admin';
+import { Box } from '@mui/material';
+
+/**
+ * Generic password + confirm-password field pair for the shared user
+ * resource schema. Moved from kt-ecommerce (components/User/Password.tsx) -
+ * no kitchntabs- or vanexa-specific logic. Renamed from "Password" to avoid
+ * ambiguity with other password-related components in this package.
+ */
+export type PasswordComponent = IDashAutoAdminCustomFieldComponent;
+export const PasswordShow: React.FC<PasswordComponent> = (_props) => {
+	return <></>;
+};
+export const PasswordEdit: React.FC<PasswordComponent> = (_props) => {
+
+	return (
+		<>
+			<Box>
+				<PasswordInput
+					sx={{ width: '100%' }}
+					autoComplete='off'
+					source='Contraseña'
+					name='password'
+				/>
+			</Box>
+			<Box>
+				<PasswordInput
+					sx={{ width: '100%' }}
+					autoComplete='off'
+					source='Confirmar Contraseña'
+					name='password_confirmation'
+				/>
+			</Box>
+		</>
+	);
+};
+export const PasswordCreate: React.FC<PasswordComponent> = (_props) => {
+
+
+	return (
+		<>
+			<Box>
+				<PasswordInput
+					sx={{ width: '100%' }}
+					source='Contraseña'
+					name='password'
+				/>
+			</Box>
+			<Box>
+				<PasswordInput
+					sx={{ width: '100%' }}
+					source='Confirmar Contraseña'
+					name='password_confirmation'
+				/>
+			</Box>
+		</>
+	);
+};
+const PasswordFields = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+			return <PasswordEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'create':
+			return <PasswordCreate attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+			return <PasswordShow attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+export default PasswordFields;

package/src/resources/User/getProfileMenu.ts

@@ -0,0 +1,57 @@
+/**
+ * Profile menu generator for user navigation.
+ *
+ * Moved here from kt-utils (getProfileMenu.ts) per the profile/user resource
+ * refactor - it is consumed by resources/User/profileResource.tsx, which now
+ * also lives in this package, and doesn't depend on anything kitchntabs- or
+ * vanexa-specific beyond the 'Cliente' role check below (kept verbatim - both
+ * domains currently use it identically; a domain that needs a different
+ * profile menu can still override profileResource.menu after importing it).
+ */
+
+import { dashStorage } from 'dash-utils';
+import type IApplicationLayoutMenuItem from 'dash-auto-admin/src/interfaces/IDashApplicationLayoutMenuItem';
+
+/**
+ * Generates the profile menu based on user roles
+ */
+const getProfileMenu = (resourceConfig?: any): IApplicationLayoutMenuItem[] => {
+    const userStr = dashStorage.getItem('user');
+    const rolesStr = dashStorage.getItem('roles');
+
+    const user = userStr ? JSON.parse(userStr) : null;
+    const roles: any[] = rolesStr ? JSON.parse(rolesStr) : [];
+
+    const profileMenu: IApplicationLayoutMenuItem[] = [
+        {
+            title: 'Perfil',
+            redirect: '/profile',
+        },
+    ];
+
+    const isCliente = roles
+        ? roles.map((role) => role.name).includes('Cliente')
+        : false;
+
+    if (isCliente) {
+        profileMenu.push(
+            {
+                title: 'Comunas',
+                redirect: '/profile/commune',
+            },
+            {
+                title: 'Centros Logísticos',
+                redirect: '/profile/logistic-center',
+            },
+            {
+                title: 'Notificaciones',
+                redirect: '/profile/notification',
+            },
+        );
+    }
+
+    return profileMenu;
+};
+
+export default getProfileMenu;
+export { getProfileMenu };

package/src/resources/User/profileResource.tsx

@@ -0,0 +1,51 @@
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import ResourceTemplate from '../../templates/ResourceTemplate';
+import Dashboard from '@mui/icons-material/Dashboard';
+import {DASHAdminSystemConstants} from 'dash-constants';
+
+import getProfileMenu from './getProfileMenu';
+
+/**
+ * Shared "/profile" resource shell.
+ *
+ * Moved here from kt-ecommerce (resources/user/profileResource.tsx) - the
+ * config itself is generic. `listComponent` is intentionally left unset: the
+ * kt-ecommerce original hardcoded kt-pages' CustomProfile page, which would
+ * have made this package depend on a kitchntabs-flavored consumer package
+ * (backwards - dash-admin is core, kt-pages/kt-ecommerce are domain layers
+ * built on top of it). Each app supplies its own profile page component by
+ * overriding `listComponent` after importing this base config, e.g.:
+ *
+ *   import profileResource from 'dash-admin/src/resources/User/profileResource';
+ *   import CustomProfile from 'kt-pages/src/pages/Account/CustomProfile';
+ *
+ *   export default {
+ *     ...profileResource,
+ *     listComponent: (_resourceConfig) => <CustomProfile />,
+ *   };
+ */
+const profileResource: IDashAutoAdminResourceConfig = {
+	filterWithSubmit: true,
+	roles: ["*"
+		/*
+        DASHAdminSystemConstants.system.DASH_SYSTEM_ROLE,
+		DASHAppConstants.system.TENANT_ROLE,
+		DASHAppConstants.system.USER_ROLE,
+		DASHAppConstants.system.CREATOR_ROLE,
+		DASHAppConstants.system.CLOSING_ROLE,
+		DASHAppConstants.system.GUNNER_ROLE,
+		DASHAppConstants.system.DRIVER_ROLE
+        */
+	],
+	component: ResourceTemplate,
+	hidden: true,
+	model: 'profile',
+	group: 'Perfil',
+	label: 'Perfil',
+	icon: <Dashboard />,
+	schema: null,
+	menu: getProfileMenu,
+	listProps : { perPage: DASHAdminSystemConstants.system.DEFAULT_PER_PAGE || 50}
+};
+
+export default profileResource;