adminDashboard

[CBarreraB]

Create Admin Dashboard for Reviews Management

Description:

We need to create an admin dashboard accessible through the URL "actualizatucarro.com/atc24$rw/admin". This dashboard will serve as a protected route, accessible only via a unique password. Its main function is to manage reviews efficiently.

Features:

1. Accessible via URL "actualizatucarro.com/atc24$rw/admin" with unique password protection.
2. Review management interface displaying image, name, and comment components.
3. Reviews will be added manually by the administrator and should have a generic image placeholder if no image is provided.
4. Ability to choose which reviews to display with a minimum limit of 5 reviews.
5. Design should align with the website's color scheme while allowing creative freedom.

This dashboard will streamline the process of managing reviews, allowing easy interaction and customization.

[CBarreraB]

Dashboard Design and Functionality Implementation

@JohanMejia77 this task involves the design and implementation of the administrator dashboard, focusing on its navigation bar (navbar) and overall layout to ensure an intuitive user experience across all devices. The dashboard will include the following components:

1. Navigation Bar (Navbar):

   • Positioned at the top of the dashboard.
   • On the left side of the navbar, it will display the label "Panel de Administrador." The label will be designed in two parts:
     1. The text "Panel de" will be placed in a rounded area.
     2. A logo (currently used in the mobile navbar) will be displayed next to it.
     3. Followed by the text "dministrador" to complete the phrase.
   • In the mobile version, only the logo icon will be displayed in the navbar.
   • On the right side of the navbar, a "X" button will be present, which will serve the function of logging out. On hover, a tooltip will appear displaying the text "Cerrar Sesión."

2. Titles:

   • All titles within the dashboard will be displayed in uppercase.

3. Column Layout:

   • The first column will have a fixed width, with a defined minimum and maximum, to adapt to various screen sizes on desktop devices.
   • The last four columns will maintain consistent widths across all screen sizes, with all components within these columns centered.
   • The text within the text column will adapt to the varying screen widths to ensure readability and responsiveness.

4. Create New Review Button:

   • At the bottom of the dashboard, there will be a button labeled "Crear Nueva Reseña."

This issue requires the design and implementation of the above features to ensure a cohesive and user-friendly dashboard interface.

[CBarreraB]

Figma image :

Desktop version:

Tablet version:

Navbar Destop version:

Navbar Mobile version:

[CBarreraB]

Create a Responsive Banner for Dashboard Design Enhancement

Description:

This issue involves the creation of a visually appealing banner to enhance the design of the administrator dashboard. The banner will be composed of two lateral images and a background that complements the overall aesthetic. Below are the detailed specifications:

Banner Composition:

Left Lateral Image:

Image File: dashboardReviewsL.webp Placement: Positioned on the left side of the banner. Height: 4 times the height of the navbar. Right Lateral Image:

Image File: dashboardReviewsR.webp Placement: Positioned on the right side of the banner. Height: 4 times the height of the navbar. Background:

Background Color: Slate with RGB values of rgb(100 116 139) (bg-slate-500). The background will serve to complement the lateral images and provide a cohesive look across different screen widths.

Responsive Design:

Desktop View:

The lateral images will remain fixed to the sides (left and right) of the screen. The background will ensure that the images are seamlessly integrated into the banner as screen sizes vary. As the screen width decreases and the two images approach each other, the layout will adjust to maintain visual balance.

Mobile View:

Once the screen width is narrow enough that the two lateral images would overlap, the dashboardReviewsL.webp image will be displayed centered. The height of the dashboardReviewsL.webp image will be set to twice the height of the navbar in mobile view to maintain proportionality and design integrity.

Objective:

The goal of this issue is to create a responsive and visually compelling banner that enhances the user experience of the administrator dashboard, ensuring that it adapts well across various screen sizes while maintaining a consistent and appealing design.