UserDashboard

[CBarreraB]

1. Al iniciar sesión en el sistema, veo un enlace en la barra de navegación que me redirige a mi
   dashboard de usuario.

2. El dashboard muestra una estética acorde a los colores de la página, destacando
   principalmente los colores rojo y negro. El Navbar y el Footer son siempre visibles para facilitar
   la navegación y consultar cualquier producto en cualquier momento.

3. El dashboard presenta cinco secciones al usuario: Datos Personales, Direcciones, Favoritos,
   Pedidos y Ayuda, todos ellos acompañados de iconos ilustrativos.

4. En la sección de Datos Personales, puedo visualizar mi nombre, apellido, correo y número de
   teléfono. Tengo la capacidad de editar estos datos. Además, se me proporciona la opción de
   eliminar mi perfil, siempre y cuando no tenga pedidos activos en proceso.

5. En la sección de Direcciones, puedo ver y gestionar mis direcciones. Puedo crear una nueva
   dirección, modificar una dirección existente o eliminar una dirección.

6. En la sección de Favoritos, puedo acceder a una lista de productos previamente marcados
   como favoritos. Un botón me permite acceder a la página de productos (/productos) para

buscar y agregar nuevos productos a mis favoritos, eliminar productos de la lista y buscar o
filtrar productos dentro de mi lista de favoritos.

7. La sección de Pedidos me permite acceder a la lista de mis pedidos anteriores. Cada pedido
   muestra su número, fecha, medio de pago, estado de aprobación del pago, dirección de envío,
   lista de productos comprados con cantidades y precios unitarios y totales. Además, tengo la
   opción de informar problemas con mis pedidos, seleccionando una de las categorías
   predefinidas: "Envío", "Producto" ó "Pago".

8. La sección de Ayuda brinda acceso a un formulario de contacto para comunicarme con el
   administrador del sistema.

Documento Tecnico:

https://drive.google.com/file/d/1syQM4f424es5mLrcJp-p7AaNeFs0O8-d/view?usp=drive_link

[CBarreraB]

Diseño del Dashboard de Usuario Datos Personales

Descripción:

Se plantea la creación del diseño para el dashboard de usuario, que estará en consonancia con el estilo de la navbar existente. Se implementará un slide bar que estará abierto en modo desktop y cerrado en modo móvil, con un botón para abrir y cerrar este slide bar. Cuando esté abierto, se mostrarán los iconos y sus títulos, y cuando esté cerrado, solo se verán los iconos. Este slide bar tendrá un efecto hover similar al de la nueva modificación de la navbar, donde al pasar el cursor sobre él, su fondo cambiará al color primario (rojo), y al hacer clic, quedará seleccionado.

En la vista de datos personales, se mostrarán todos los datos del usuario, junto con un botón superior para modificarlos. Al hacer clic en este botón, se abrirán los campos de texto y se ofrecerá la opción de guardar los cambios o cancelarlos. Se mantendrá el mismo orden de las imágenes de referencia de diseño UX para garantizar la coherencia visual y la experiencia del usuario. Este sera el diseño a usar la imagen del Logo creado para este Dashboard de Usuario se encuentra en la carpeta public\images/logo/logoDU.

[CBarreraB]

Vista Desktop:

Vista Mobile:

Actualización de la Vista de Pedido a Compras

Descripción:

Se propone realizar una actualización en la vista de Pedido, cambiando su nombre a Compras para reflejar con mayor precisión su funcionalidad. Cuando no haya compras registradas, se mostrará una bolsa vacía, similar a la utilizada en el carrito de compras, invitando al usuario a realizar su primera compra.

En caso de tener compras registradas, en las vistas de escritorio y tablet, se mostrarán las compras con la bolsa llena. En la vista móvil, no se mostrará la bolsa. Cada compra se representará mediante una tarjeta que mostrará el estado del pedido, un botón para acceder a los detalles del pedido y los artículos comprados en él. Además, los artículos comprados tendrán activos los enlaces en la foto y en el título para acceder al detalle del artículo.

Pasos para Reproducir:

• Acceder a la vista de Compras y verificar el cambio de nombre.
• Si no hay compras registradas, observar la bolsa vacía e invitar al usuario a realizar su primera compra.
• En caso de tener compras registradas, verificar que en las vistas de escritorio y tablet se muestren las compras con la bolsa llena, mientras que en la vista móvil no se muestre la bolsa.
• Verificar que cada compra se represente mediante una tarjeta que muestre el estado del pedido, un botón para acceder a los detalles del pedido y los artículos comprados en él, con enlaces activos en la foto y en el título.

Se mantendrá el mismo orden de las imágenes de referencia de diseño UX para garantizar la coherencia visual y la experiencia del usuario. Este sera el diseño a usar la imagen del Logo creado para este Dashboard de Usuario se encuentra en la carpeta public\images/shopping/...