📊 InsightFlow - Dashboard Inteligente de Gestión de Inventario

Sistema avanzado de gestión de inventario con Inteligencia Artificial

---

🚀 Descripción del Proyecto

InsightFlow es una plataforma web moderna para la gestión inteligente de inventarios que combina análisis de datos en tiempo real con Inteligencia Artificial de Google Gemini. El sistema proporciona alertas predictivas, análisis de demanda automatizado, visualización de tendencias y optimización de recursos para empresas del sector alimenticio y retail.

🎯 Desarrollado para HackaTecNM

Proyecto creado para el hackathon HackaTecNM, enfocado en solucionar problemas reales de gestión empresarial mediante tecnología innovadora.

---

✨ Características Principales

🤖 Inteligencia Artificial Integrada

• Análisis predictivo de demanda con Google Gemini AI
• 6 tipos de alertas inteligentes generadas automáticamente:
  • ⏰ Riesgo de caducidad con cálculo de pérdidas financieras
  • 📦 Stock crítico y recomendaciones de reabastecimiento
  • 📈 Planificación de demanda con fechas específicas
  • 💰 Oportunidades de optimización de márgenes
  • 📋 Optimización de espacio de almacén
  • 🔄 Productos de rotación lenta con estrategias de liquidación

📊 Dashboard Interactivo

• Visualización en tiempo real de métricas clave (KPIs)
• Gráficos dinámicos con Chart.js:
  • Proyección de demanda (gráfico de líneas)
  • Distribución de stock (gráfico de dona)
  • Stock de materias primas (gráfico de barras)
  • Productos por caducar (alertas visuales)
  • Tendencias históricas de inventario

🗄️ Gestión de Inventario

• Control completo de materias primas y productos terminados
• Seguimiento de stock actual, mínimo y máximo
• Alertas de caducidad automáticas
• Categorización inteligente de productos
• Estados visuales (Normal, Bajo, Alto)

📈 Reportes y Análisis

• Ventas totales por período
• Porcentaje de inventario próximo a caducar
• Exportación de reportes automáticos
• Análisis de tendencias históricas

---

🛠️ Tecnologías Utilizadas

Frontend

• React 19.1.0 - Framework principal
• Chart.js 4.4.9 - Visualización de gráficos
• React-ChartJS-2 - Integración de Chart.js con React
• CSS3 - Diseño moderno y responsive

Backend

• Node.js - Entorno de ejecución
• Express 4.18.2 - Framework web
• MySQL2 - Base de datos relacional
• CORS - Manejo de peticiones cross-origin
• dotenv - Gestión de variables de entorno

Inteligencia Artificial

• Google Gemini AI (2.0 Flash Lite) - Análisis predictivo y generación de alertas
• Generative Language API - Procesamiento de lenguaje natural

---

📋 Requisitos Previos

Antes de instalar, asegúrate de tener instalado:

• Node.js (v16 o superior) - Descargar aquí
• MySQL (v8.0 o superior) - Descargar aquí
• npm o yarn - Gestor de paquetes
• API Key de Google Gemini - Obtener aquí

---

📦 Instalación

1️⃣ Clonar el repositorio

git clone https://github.com/tu-usuario/HackaTecNM.git
cd HackaTecNM

2️⃣ Instalar dependencias del Frontend

npm install

3️⃣ Instalar dependencias del Backend

cd backend
npm install
cd ..

4️⃣ Configurar la Base de Datos

Crear la base de datos en MySQL:

mysql -u root -p

Luego ejecuta los scripts SQL en el siguiente orden:

-- Crear estructura
SOURCE Inventario.sql;

-- Cargar datos de ejemplo
SOURCE datos_ejemplo.sql;

-- O usar datos de prueba del backend
SOURCE backend/data/clean_database.sql;
SOURCE backend/data/datos_prueba.sql;

5️⃣ Configurar Variables de Entorno

Crea un archivo .env en la carpeta backend/ con el siguiente contenido:

# Configuración del Servidor
PORT=5000

# Configuración de MySQL
DB_HOST=localhost
DB_USER=tu_usuario
DB_PASSWORD=tu_contraseña
DB_NAME=inventario_db

6️⃣ Configurar tu API Key de Gemini (REQUERIDO)

Obtener API Key GRATIS:

1. Ve a Google AI Studio
2. Inicia sesión con tu cuenta de Google
3. Haz clic en "Create API Key"
4. Copia tu API Key

Configurar en el proyecto:

Abre el archivo src/geminiPrompt.js y reemplaza YOUR_API_KEY_HERE con tu API Key:

// Línea 10 en src/geminiPrompt.js
const GEMINI_API_KEY = 'TU_API_KEY_AQUI';  // ← Pega aquí tu API Key

⚠️ Importante:

• Cada usuario debe usar su propia API Key de Google Gemini (es gratuita)
• NO subas tu API Key personal a GitHub
• Esta es una implementación para demostración/hackathon

---

🚀 Uso

Iniciar el Backend

cd backend
npm start

El servidor se ejecutará en http://localhost:5000

Iniciar el Frontend

En otra terminal:

npm start

La aplicación se abrirá en http://localhost:3000

---

📁 Estructura del Proyecto

HackaTecNM/
├── backend/
│   ├── config/
│   │   └── db.js                 # Configuración de MySQL
│   ├── data/
│   │   ├── clean_database.sql    # Script de limpieza
│   │   └── datos_prueba.sql      # Datos de prueba
│   ├── routes/
│   │   ├── dashboard.js          # Endpoints de KPIs
│   │   ├── demanda.js            # Endpoints de demanda
│   │   ├── graficas.js           # Endpoints de gráficas
│   │   └── inventario.js         # Endpoints de inventario
│   ├── server.js                 # Servidor Express
│   └── package.json
│
├── src/
│   ├── App.js                    # Componente principal
│   ├── Dashboard.jsx             # Dashboard completo
│   ├── Dashboard.css             # Estilos del dashboard
│   ├── geminiPrompt.js           # Integración con Gemini AI
│   ├── index.js                  # Punto de entrada
│   └── Logo.PNG                  # Logo de la aplicación
│
├── public/
│   ├── index.html
│   └── manifest.json
│
├── Inventario.sql                # Estructura de base de datos
├── datos_ejemplo.sql             # Datos de ejemplo
├── package.json                  # Dependencias del frontend
└── README.md                     # Este archivo

---

🔌 API Endpoints

Inventario

• GET /api/inventario - Obtener todo el inventario

Dashboard KPIs

• GET /api/dashboard/ventas-totales - Ventas totales del período
• GET /api/dashboard/inventario-caducar - % de inventario próximo a caducar
• GET /api/dashboard/alertas - Número de alertas activas

Demanda

• GET /api/demanda - Obtener datos de demanda histórica

Gráficas

• GET /api/graficas/distribucion-stock - Distribución de stock por categoría
• GET /api/graficas/stock-materias - Stock de materias primas
• GET /api/graficas/productos-caducar - Productos próximos a caducar
• GET /api/graficas/tendencia-stock - Tendencia histórica de stock

---

🎨 Funcionalidades Detalladas

1. Panel de Resumen (Dashboard Principal)

• Gráfico de proyección de demanda con tendencias mensuales
• Cards informativos con métricas clave:
  • Ventas totales (últimos 30 días)
  • Alertas inteligentes activas
  • % de inventario por caducar
  • Nivel de demanda predicho por IA
  • Última fecha de exportación de reportes

2. Inventario

• Tabla de Materias Primas:

  • Nombre, categoría, stock actual/mínimo/máximo
  • Fecha de caducidad próxima
  • Estado visual (Normal/Bajo/Alto)

• Tabla de Productos Terminados:

  • Misma estructura que materias primas
  • Indicadores de color según estado

3. Alertas Inteligentes

Sistema de 6 alertas dinámicas generadas con IA:

1. ⏰ Riesgo de Caducidad: Identifica productos próximos a caducar con cálculo de pérdidas financieras y sugerencias de descuentos.

2. 📦 Stock Crítico: Detecta productos con stock bajo el mínimo y recomienda cantidades exactas de reabastecimiento.

3. 📈 Planificación de Demanda: Predice fechas específicas y cantidades necesarias para producción basándose en patrones históricos.

4. 💰 Oportunidad de Margen: Analiza productos con potencial de incremento de precio y calcula el impacto en ingresos.

5. 📋 Optimización de Almacén: Sugiere reorganización de categorías para liberar espacio y reducir costos.

6. 🔄 Rotación Lenta: Identifica productos estancados y propone estrategias de liquidación con cálculo de capital a liberar.

4. Gráficos y Análisis

• Distribución de Stock: Visualización en dona de la distribución por categorías
• Stock de Materias Primas: Gráfico de barras con stock actual por categoría
• Productos por Caducar: Alertas visuales de productos con días hasta caducidad
• Tendencia de Stock: Gráfico de líneas comparando materias primas vs productos

---

🔐 Consideraciones de Seguridad

⚠️ Importante: Este proyecto es una demostración para hackathon.

• La API Key de Gemini se configura en el frontend (src/geminiPrompt.js)
• Cada usuario debe usar su propia API Key (gratuita en Google AI Studio)
• NO subas tu API Key personal a repositorios públicos
• Para uso en producción, considera mover las API Keys al backend con variables de entorno

---

📄 Licencia

Este proyecto fue desarrollado para el HackaTecNM con fines educativos y de demostración.

---

🎓 Agradecimientos

• HackaTecNM por la oportunidad de desarrollar este proyecto
• Google Gemini AI por proporcionar la API de inteligencia artificial
• TecNM por fomentar la innovación tecnológica

---

⭐ Si este proyecto te fue útil, considera darle una estrella en GitHub ⭐

Desarrollado con ❤️ para HackaTecNM 2024