ERP Componentes Demo

Este proyecto es una demostración de componentes reutilizables para un sistema ERP (Enterprise Resource Planning) construido con Next.js, TypeScript y Tailwind CSS.

🚀 Tecnologías Principales

• Next.js 15.1.0
• TypeScript
• Tailwind CSS
• React 19
• Radix UI
• Recharts (para gráficos)

📦 Componentes Principales

1. Barra Lateral (Sidebar)

• SidebarProvider: Contexto para manejar el estado de la barra lateral
• Sidebar: Contenedor principal de la barra lateral
• SidebarHeader: Encabezado con logo y título
• SidebarContent: Contenido principal de la barra lateral
• SidebarGroup: Agrupación de elementos relacionados
• SidebarMenu: Menú de navegación
• SidebarMenuItem: Elementos individuales del menú
• SidebarFooter: Pie de página con información del usuario

2. Componentes de UI

• Avatar: Para mostrar imágenes de perfil
• Badge: Etiquetas para mostrar estados o contadores
• Button: Botones con diferentes variantes
• Card: Tarjetas para mostrar información
• DropdownMenu: Menús desplegables
• Input: Campos de entrada
• Separator: Separadores visuales
• Tabs: Sistema de pestañas
• Table: Tablas de datos
• Select: Selectores desplegables

3. Componentes de Datos

• RevenueChart: Gráfico de área para mostrar ingresos
• UsersView: Vista de gestión de usuarios
• InventoryView: Vista de gestión de inventario
• OrdersView: Vista de gestión de pedidos
• ReportsView: Vista de reportes
• StatisticsView: Vista de estadísticas

4. Componentes de Navegación

• NavigationMenu: Menú de navegación principal
• NavigationMenuItem: Elementos del menú de navegación

🎨 Características

• Diseño responsivo
• Tema claro/oscuro
• Animaciones suaves
• Componentes accesibles
• Interfaz moderna y profesional
• Sistema de navegación intuitivo

🛠️ Instalación

1. Clonar el repositorio:

   git clone [URL_DEL_REPOSITORIO]
   

2. Instalar dependencias:

   pnpm install
   

3. Iniciar el servidor de desarrollo:

   pnpm dev
   

4. Abrir http://localhost:3000 en el navegador

📝 Requisitos del Sistema

• Node.js >= 20.0.0
• pnpm >= 8.0.0
• Navegador moderno con soporte para ES6+

🔧 Configuración

El proyecto utiliza las siguientes configuraciones principales:

• next.config.mjs: Configuración de Next.js
• tailwind.config.js: Configuración de Tailwind CSS
• tsconfig.json: Configuración de TypeScript
• components.json: Configuración de componentes UI

📚 Documentación Adicional

Para más información sobre los componentes y su uso, consulta la documentación de:

• Next.js
• Tailwind CSS
• Radix UI
• Recharts

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor, asegúrate de:

1. Hacer fork del repositorio
2. Crear una rama para tu feature
3. Hacer commit de tus cambios
4. Hacer push a la rama
5. Abrir un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.