Plantilla de Panel Financiero

Panel financiero moderno construido con Next.js 15 y React 19, con soporte multilenguaje, autenticación y widgets interactivos.

Funcionalidades Clave

• Internacionalización: Soporte para inglés y árabe con next-intl
• Autenticación: Autenticación personalizada basada en Redux con tokens JWT
• Arrastrar y Soltar: Widgets interactivos con @dnd-kit
• Gráficos y Analítica: Visualización de datos con Recharts
• Modo Oscuro/Claro: Cambio de tema con detección del sistema
• Diseño Responsivo: Funciona en todos los dispositivos
• Estado Redux: Gestión centralizada del estado

Stack Técnico

Tecnologías Principales:

• Next.js 15.3.4 con App Router y Turbopack
• React 19.0.0 con características modernas
• TypeScript 5 para tipado seguro
• Tailwind CSS 4 como framework utilitario

Librerías Clave:

• UI: Radix UI, Lucide React, Framer Motion
• Estado: Redux Toolkit, React Redux
• Formularios: React Hook Form, validación con Zod
• Auth: bcryptjs, jsonwebtoken, localStorage
• i18n: next-intl con enrutamiento
• Gráficos: Recharts, @tanstack/react-table
• DnD: Suite @dnd-kit (core, sortable, modifiers)
• Fechas: react-day-picker, date-fns
• Utils: clsx, tailwind-merge, class-variance-authority

Resumen de Componentes

Widgets del Panel:

• DashboardGrid - Layout principal con widgets arrastrables
• BarChartWidget, StatisticsChart - Visualización de datos financieros
• SmartInvestPanel - Seguimiento de inversiones
• TransactionsPanel - Transacciones recientes
• WorldMapWidget - Datos geográficos
• CardSection - Gestión de tarjetas de crédito

Características Núcleo:

• Analítica: RevenueChart, CategoryChart
• Transacciones: Tabla con filtrado, diálogos para agregar/exportar
• Autenticación: LoginForm, botones sociales, protección de rutas
• Layout: Header con notificaciones, sidebar con i18n
• Librería UI: 36+ componentes reutilizables (botones, formularios, tablas, etc.)

Comenzando

Instalación:

1. Descarga el archivo ZIP y extrae
2. Ejecuta npm install o yarn install
3. Ejecuta npm run dev o yarn dev
4. Abre http://localhost:3000

Archivos Preconfigurados:

• next.config.js - Next.js con Turbopack y manejo de SVG
• tailwind.config.mjs - Configuración de Tailwind CSS v4
• messages/ - Traducciones en inglés y árabe
• Todos los archivos de TypeScript, ESLint y configuración de componentes incluidos

Personalización

Sistema de Tema:

• Propiedades CSS para temas claro/oscuro
• Soporte RTL para árabe
• Integración de Tailwind con variantes de componentes

Agregar Nuevas Páginas:

1. Crea src/app/[locale]/dashboard/tu-pagina/page.tsx
2. Agrega navegación en src/components/layout/Sidebar/config.tsx
3. Agrega traducciones en messages/en.json y messages/ar.json

Internacionalización:

• Actualiza src/i18n/routing.ts para nuevos idiomas
• Crea archivos de mensajes en la carpeta messages/

Rendimiento y Arquitectura

Optimizaciones:

• Next.js 15 con Turbopack para builds rápidas
• Division automática de código y lazy loading
• Optimización SVG con @svgr/webpack

Estructura del Proyecto:

Soporte de Navegadores: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Scripts: dev, build, start, lint, type-check, build:analyze