Skip to main content
The admin panel provides a comprehensive interface for managing products in the Tienda ETCA e-commerce platform. It is restricted to users with the admin role and provides full CRUD (Create, Read, Update, Delete) operations.

​
Features

The admin panel includes the following capabilities:

Product Management

Add, edit, and delete products from the catalog

Real-time Updates

Changes are immediately reflected via API integration

Product Listing

View all products with images, names, and prices

Modal Forms

User-friendly modal dialogs for adding and editing products

​
Admin Panel Interface

The admin panel is implemented in the Admin component (/workspace/source/src/layout/Admin.jsx) and provides:
  • Logout button: Clears authentication and redirects to home
  • Admin link: Quick navigation to admin panel

​
Product Display

Products are displayed in a grid layout with:
  • Product image
  • Product name
  • Product price
  • Action buttons (Edit/Delete)

​
Action Buttons

Opens the FormularioProducto modal to add a new product to the catalog.
Opens the FormularioEdicion modal with the selected product’s data pre-filled for editing.
Triggers a confirmation dialog before removing the product from the catalog.

​
Access Control

The admin panel is protected by:
  1. Authentication check: User must be logged in
  2. Role verification: User must have admin role
  3. Route protection: Implemented via RutaProtegida component
See Protected Routes for implementation details.

​
State Management

The admin panel uses the AdminContext to manage:
  • Product list
  • Loading states
  • Modal visibility (add/edit)
  • Selected product for editing
  • CRUD operations
Reference: /workspace/source/src/context/AdminContext.jsx

​
API Integration

All product operations connect to: 
https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe/productos
See Product Management for detailed API operations.

Build docs developers (and LLMs) love

Get started for freeTalk to us