El panel de administración
Lo que hace la trastienda: productos, categorías, pedidos, clientes, la página de inicio, el personal, los roles y permisos, los ajustes y las notificaciones.
Para el paquete Full Stack
Páginas
Cada página existe en inglés en /en y en árabe en /ar. El panel se abre en /en/dashboard, después del inicio de sesión en /en/auth/login.
| Elemento de la barra lateral | Ruta | Qué hace |
|---|---|---|
| Resumen | /en/dashboard | La tienda de un vistazo, con los últimos pedidos. Las tarjetas de ingresos, ventas, objetivo, visitantes, conversión y mapa muestran cifras de ejemplo hasta que las conectes a tus propios datos. |
| Asistente de IA | /en/dashboard/ai-assistant | Un chat que responde preguntas sobre la tienda y actúa sobre ella dentro de los permisos del administrador. |
| Productos | /en/dashboard/products/all | La lista de productos, el formulario de producto con el estudio de IA, y los productos eliminados. |
| Categorías | /en/dashboard/categories/all | La lista de categorías y las categorías eliminadas. |
| Pedidos | /en/dashboard/orders | Todos los pedidos, y la página de detalle de cada pedido. |
| Usuarios | /en/dashboard/users/all | Los clientes de la tienda, y los eliminados. |
| Página de inicio | /en/dashboard/homepage | Lo que muestra la página de inicio de la tienda, sección por sección. |
| Gestión de administradores | /en/dashboard/admins-management | Cuentas del personal. |
| Roles de administrador | /en/dashboard/admins-roles | Los roles y sus permisos. |
| Ajustes | /en/dashboard/settings | El perfil y la contraseña del administrador con sesión iniciada, y los ajustes de la aplicación. |
La campana de la barra superior contiene las notificaciones, y el enlace "Go to storefront" abre NEXT_PUBLIC_STOREFRONT_URL. Los buscadores nunca indexan el panel: cada página lleva una etiqueta noindex y robots.txt bloquea todas las rutas.
Qué puede hacer cada administrador
- La API comprueba un permiso en cada ruta de administración, así que un administrador solo puede leer y cambiar lo que permiten sus roles, muestre lo que muestre la pantalla.
- El panel oculta o desactiva cada botón que su administrador no puede usar, como Add Product sin
products.create, y la página AI Assistant muestra "No Access" sinai_chat.use. - Todos los elementos siguen en la barra lateral para todos los administradores. Una página que el administrador no puede leer muestra su estado vacío o de error.
- Los cambios de permisos llegan al momento a un administrador con sesión iniciada, sin que tenga que cerrar sesión.
Productos
| Parte del formulario | Campos |
|---|---|
| Detalles | Nombre y descripciones corta y larga en inglés y en árabe (el nombre en inglés es obligatorio), slug, SKU (obligatorio), categoría (obligatoria) |
| Precio y stock | Precio (obligatorio), precio de comparación, precio de coste, cantidad en stock |
| Archivos multimedia | Hasta 12 imágenes y videos (MP4, WebM, MOV), en cualquier orden, uno de ellos principal, cada uno con texto alternativo |
| Variantes | Tipo y valor de opción (como Size y M, o Colour con su código hexadecimal), SKU, ajuste de precio, stock, activa. Los SKU de las variantes son únicos. |
| Indicadores y etiquetas | Activo, destacado, más vendido y etiquetas libres |
- Un producto con un precio de comparación superior a su precio cuenta como rebajado en los filtros de la tienda.
- El formulario guarda un borrador por sí solo mientras escribes. Si vuelves a abrir el producto, el panel te ofrece recuperar el borrador; guardar el producto lo elimina.
- Eliminar mueve un producto a Deleted, donde se puede restaurar. Restaurar necesita el permiso
products.restore. - Los productos destacados y los más vendidos también se pueden configurar desde sus propias páginas,
/en/dashboard/products/featuredy/en/dashboard/products/best-sellers, que la barra lateral no enlaza.
Categorías
Una categoría tiene un nombre y una descripción en inglés y en árabe, una imagen, un slug, un orden y un interruptor de activación. Eliminarla la mueve a Deleted, donde se puede restaurar con el permiso categories.restore.
La API guarda una categoría padre para cada categoría y la lista filtra por ella, pero el formulario no configura ninguna categoría padre: las categorías incluidas forman un solo nivel.
Pedidos
La lista busca y filtra por estado del pedido y estado del pago, de más reciente a más antiguo. La página de un pedido muestra sus artículos, totales, cliente, direcciones, nota, cronología y número de seguimiento, y se descarga como archivo CSV.
| Estado | Significado |
|---|---|
pending | Realizado. Un pedido con tarjeta se queda aquí hasta que Stripe confirma el pago. |
confirmed | Pagado con tarjeta, o realizado con pago contra reembolso. |
processing | En preparación. |
shipped | En camino. Añade el número de seguimiento que verá el cliente. |
delivered | Recibido. El pedido queda cerrado. |
cancelled | Detenido. El pedido queda cerrado. |
La página del pedido avanza un pedido paso a paso, o lo cancela antes de que se cierre. El estado del pago (sin pagar, pagado, fallido, reembolsado) lo fija el pago, no se cambia a mano. Cambiar un pedido necesita orders.edit.
Clientes
- La lista Users busca y filtra clientes por nombre, correo, teléfono, país, nombre de usuario, si su correo está verificado, y fechas.
- Un administrador puede crear un cliente, cambiar su contraseña, marcar su correo como verificado o no verificado, y eliminarlo o restaurarlo.
- Los clientes editan sus propios datos desde su cuenta en la tienda; el panel no tiene un formulario para editarlos.
La página de inicio de la tienda
Home Page elige los productos y los textos que muestra cada sección de la página de inicio de la tienda. Editar una sección necesita products.edit.
| Sección | Elementos | En la tienda |
|---|---|---|
| Categorías | Solo el orden | La fila de categorías, en el orden fijado aquí |
| Pilares de estilo | Hasta 3 | Tres puntos destacados de estilo |
| Bloque editorial dividido | Hasta 2 | Un bloque editorial de dos paneles |
| Novedades | Hasta 6 | Novedades; si está vacía, muestra los productos más recientes |
| Los más vendidos | Hasta 8 | La fila de los más vendidos |
| Destacado | Hasta 6 | La galería destacada |
| Carrusel editorial | Hasta 5 | El carrusel final |
El editor Lux difference no tiene sección en la página de inicio de la tienda incluida, así que lo que configures ahí no se muestra.
Personal, roles y permisos
- Admin Management muestra el personal y permite crearlo, editarlo y eliminarlo. Assign roles fija qué roles tiene un administrador.
- Admin Roles crea, renombra y elimina roles. View permissions abre una cuadrícula de casillas, agrupadas por módulo, para conceder cada permiso.
- Los permisos se llaman
<module>.<action>, comoproducts.edituorders.view, y un administrador tiene todos los permisos de todos sus roles. - La pestaña de perfil de Settings guarda mediante
admins.edit, así que un administrador de solo lectura no puede cambiar sus propios datos. La pestaña de seguridad, para cambiar la contraseña, no necesita ningún permiso.
| Rol de los datos iniciales | Concede |
|---|---|
| Super Admin | Todos los permisos |
| Viewer | Todos los permisos que terminan en .view, lo que deja fuera el asistente de IA |
| Admin, Manager, Editor | Nada todavía: marca sus permisos en Admin Roles antes de asignarlos al personal |
Los datos iniciales dan al Super Admin la cuenta admin@example.com y asignan el rol Viewer a las otras once cuentas del personal.
Ajustes
Settings tiene tres pestañas: Profile, Security y App settings. App settings es una tabla de pares de clave y valor, agrupados por categoría, que un administrador con settings.edit puede cambiar o eliminar.
| Categoría | Claves de los datos iniciales |
|---|---|
| payment | stripe_fees_percentage, stripe_fixed_fee, platform_commission_percentage |
| withdrawal | minimum_withdrawal_amount, maximum_withdrawal_amount, withdrawal_processing_days |
support_email, notification_email | |
| general | site_name, site_tagline, maintenance_mode |
| features | referral_program_enabled, referral_bonus_percentage |
Son valores guardados para que los lea tu propio código. Nada en la tienda ni en la API incluidas los lee todavía, así que cambiar uno, incluido maintenance_mode, no cambia por sí solo ningún comportamiento.
Notificaciones
- Un pedido nuevo notifica a todos los administradores que pueden ver pedidos, y una generación del estudio de IA terminada o fallida notifica al administrador que la inició.
- Llegan en directo, con un mensaje breve en pantalla, y se quedan en la lista de la campana hasta que se marcan como leídas o se eliminan.
- La conexión en directo usa
NEXT_PUBLIC_WEBSOCKET_BASE_URL, la dirección de la API sin/api, y la API solo la acepta desdeFRONTEND_URL. En tus propios dominios, configura ambas. - Con la tienda de ejemplo no hay conexión en directo.
El asistente de IA y el estudio de IA
- AI Assistant es una página propia en la barra lateral. Sin una clave de Gemini en la API, dice "No AI model is connected".
- El estudio de IA es el propio formulario de producto, que se abre desde Add Product o desde la fila de un producto. Tiene dos modos, Assistant y Animate, y un botón "Remove background". Sus campos funcionan y se guardan sin ninguna clave; hasta que se configuran sus claves muestra "Listing writer not connected" o "AI studio not connected".
La tienda de ejemplo
Sin NEXT_PUBLIC_API_BASE_URL, el panel responde a todas las solicitudes desde una tienda de ejemplo en el navegador y muestra un aviso "Sample data", que se puede cerrar hasta la siguiente recarga.
- El formulario de inicio de sesión viene rellenado con
admin@example.comyAdmin@123. Cualquier correo válido con una contraseña de al menos 6 caracteres inicia sesión como Super Admin. - Los cambios son reales: crear un producto, editar una categoría, mover un pedido y conceder un permiso se guardan en el navegador y sobreviven a una recarga.
- El asistente de IA y las herramientas del estudio de IA no están disponibles, y no hay notificaciones en directo.
yarn remove:mockelimina la tienda de ejemplo cuando tu API está conectada, y conservapublic/mock-media/.
Modo demostración
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
Cómo ejecutar una demostración pública: cuentas por visitante, lo que los visitantes pueden cambiar y el uso de su propia clave.
Cómo encaja el código del panel
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
La estructura del código, y las recetas para añadir una página, una traducción y un servicio de API.