Qué es la plantilla
Un panel financiero para un banco, una fintech o una app de dinero. Es una sola app de Next.js sin base de datos ni back end: cada cifra, tarjeta y transacción es un dato de ejemplo en el código, y el inicio de sesión es un marcador de posición que se ejecuta en el navegador. No hay que configurar nada antes de la primera ejecución.
Incluye una página de inicio de sesión, un resumen, analíticas, transacciones, tarjetas, ajustes y una página que muestra cada componente de interfaz reutilizable con ejemplos en vivo. Funciona en inglés y árabe, de derecha a izquierda, en modo oscuro y claro.
Un vistazo al panel
Con qué está construida
| Tecnología | Qué hace aquí |
|---|---|
| Next.js 16 (App Router) | El framework, las páginas, los metadatos y el servidor de producción |
| React 19 y TypeScript | Todos los componentes y archivos de código fuente |
| Tailwind CSS 4 | Todo el estilo, con variables de color para los modos claro y oscuro |
| next-intl | Los textos en inglés y árabe y el idioma en cada dirección |
| Redux Toolkit | El usuario con la sesión iniciada y el estado de inicio de sesión |
| React Hook Form y Zod | Los formularios de inicio de sesión y de transferencia rápida, y sus comprobaciones |
| Recharts y react-simple-maps | Los gráficos y el mapa del mundo |
| TanStack Table y dnd-kit | La tabla de transacciones y las tarjetas de estadísticas que puedes arrastrar |
| Radix UI, Lucide y Tabler Icons | Menús, diálogos y pestañas accesibles, y los iconos |
Cada dependencia está fijada a una versión exacta en package.json, y se incluye yarn.lock, así que tu instalación obtiene las mismas versiones con las que se probó la plantilla.
Qué incluye la descarga
El ZIP se extrae en una carpeta llamada dashboard-template-1:
| Ruta | Qué es |
|---|---|
src/ | La app: las páginas, la barra lateral y el encabezado, los gráficos y widgets, el inicio de sesión y la configuración de idiomas |
messages/ | Todos los textos visibles, en inglés y árabe |
public/ | El logo, las ilustraciones de las tarjetas y los avatares de ejemplo |
Dockerfile, .dockerignore | Construye la app en una imagen que la sirve en el puerto 3030 |
.env.example | Los ajustes opcionales, con sus valores por defecto |
README.md | La guía de instalación y personalización |
LICENSE.md | Tu licencia comercial |
package.json, yarn.lock, .yarnrc.yml | Las dependencias y la configuración de Yarn 4 |
Conviene saber antes de empezar a construir sobre ella
- El inicio de sesión es un marcador de posición: una sola cuenta, comprobada en el navegador. Conéctalo a tu propia API antes de publicar.
- Las cifras, tarjetas, personas y transacciones son datos de ejemplo para que los reemplaces por los tuyos o por datos de tu API.
- Los botones que cambiarían datos en un servidor, como enviar una transferencia o añadir una transacción, no guardan nada hasta que los conectes.
- Empieza en modo oscuro, con un color de marca naranja. Incluye cuatro temas de color y eliges uno en una sola línea.
El panel incluye inglés y árabe. Cada dirección empieza con su idioma, como /en/dashboard o /ar/dashboard, y las páginas en árabe se muestran de derecha a izquierda.
En Windows, usa PowerShell o Git Bash para los comandos de estas guías.