MMR Group SaaS Dashboard

Un dashboard profesional para la gestión de productos y análisis de datos con funcionalidades de IA para creación automática de ofertas.

🚀 Características Principales

✨ Dashboard Principal

• Métricas en tiempo real: Revenue, subscripciones, ventas y usuarios activos
• Gráficos interactivos: Overview con filtros por semana, mes y trimestre
• Ventas recientes: Lista de transacciones más recientes
• Tema claro/oscuro: Cambio dinámico de tema con persistencia

🎨 Creador de Ofertas con IA

• Paso 1: Integración con ChatGPT Vision para análisis automático de imágenes
• Paso 2: Procesamiento de listas de productos con nombres y precios
• Paso 3: Sistema de tarjetas para procesamiento individual con drag & drop
• Procesamiento automático: Remoción de fondo y aplicación de plantillas
• Descarga masiva: Exportación de todas las ofertas procesadas

📊 Analytics Avanzado

• Análisis de CSV: Carga y procesamiento de datos del chatbot
• Métricas automáticas: Contactos totales, consultas activas, emprendedores, mecánicos
• Visualización: Gráficos de distribución de tipos de usuarios
• Drag & Drop: Interfaz intuitiva para cargar archivos

🎯 Funcionalidades Técnicas

• Responsive Design: Adaptable a todos los dispositivos
• Navegación fluida: Sidebar colapsible con persistencia de estado
• Notificaciones: Sistema de alertas en tiempo real
• Animaciones: Transiciones suaves y efectos visuales
• Accesibilidad: Soporte completo para lectores de pantalla

🛠️ Instalación y Configuración

Requisitos Previos

Python 3.8+
pip (gestor de paquetes de Python)

Instalación de Dependencias

pip install -r requirements.txt

Estructura de Archivos Requerida

mmr_saas/
├── app/
│   ├── app.py              # Aplicación Flask principal
│   └── config.py           # Configuraciones
├── templates/
│   ├── base.html           # Template base
│   └── index.html          # Dashboard principal
├── static/
│   ├── css/
│   │   └── dashboard.css   # Estilos principales
│   ├── js/
│   │   └── dashboard.js    # Lógica del frontend
│   └── images/             # Imágenes estáticas
├── processing/
│   └── product_templates/
│       └── plantilla.png   # Plantilla para ofertas
├── fonts/
│   └── Oswald-VariableFont_wght.ttf  # Fuente principal
└── run.py                  # Punto de entrada

🚀 Ejecución

Desarrollo

python run.py

Producción

python app/app.py

La aplicación estará disponible en: http://localhost:5000

📱 Uso de la Aplicación

Dashboard Principal

1. Navegación: Usa el sidebar para cambiar entre secciones
2. Métricas: Visualiza las estadísticas principales en las tarjetas superiores
3. Gráficos: Interactúa con los filtros para cambiar períodos de tiempo
4. Tema: Usa el botón de luna/sol para cambiar entre tema claro y oscuro

Creador de Ofertas

1. Paso 1 - ChatGPT Vision:

   • Haz clic en "Abrir ChatGPT Visión"
   • Sube tus imágenes de productos
   • Pide: "Extrae nombre, precio y descripción de cada producto en formato lista"
   • Copia la lista generada

2. Paso 2 - Procesar Lista:

   • Pega la lista en el formato:

     - Aceite Gulf 20W-50 - $2,450 - Aceite sintético
     - Kit Transmisión Honda - $8,900 - Kit completo
     - Filtro K&N - $1,200 - Filtro alto rendimiento
     

   • Haz clic en "Procesar Lista"

3. Paso 3 - Procesamiento Individual:

   • Arrastra las imágenes a la zona de drop
   • Las imágenes se asignarán automáticamente a los productos
   • Haz clic en "Procesar Producto" para cada uno
   • Descarga individual o masiva de las ofertas

Analytics

1. Carga de CSV:

   • Arrastra tu archivo CSV o haz clic para seleccionar
   • El sistema procesará automáticamente los datos
   • Visualiza las métricas generadas

2. Interpretación:

   • Total Contactos: Número total de registros
   • Consultas Activas: Contactos con input significativo
   • Emprendedores: Perfiles identificados como emprendedores
   • Mecánicos/Locales: Talleres y mecánicos detectados

🎨 Personalización

Colores de Marca

:root {
  --mmr-yellow: #FFD700;        /* Amarillo principal MMR */
  --mmr-yellow-hover: #FFC107;  /* Amarillo hover */
  --mmr-yellow-dark: #FF8F00;   /* Amarillo oscuro */
}

Fuentes

• Principal: Inter (Google Fonts)
• Logo: Orbitron (Google Fonts)
• Ofertas: Oswald Variable (Local)

Plantillas de Ofertas

• Ubicación: processing/product_templates/plantilla.png
• Formato recomendado: PNG con transparencia
• Resolución: Mínimo 800x600px

🔧 Solución de Problemas

Error: "No se envió imagen"

• Verifica que estés subiendo archivos de imagen válidos
• Formatos soportados: JPG, PNG, GIF, WEBP

Error: "No se pudo convertir la imagen"

• Reinstala rembg: pip install --upgrade rembg
• Verifica que la imagen no esté corrupta

Gráficos no se muestran

• Verifica que Chart.js esté cargando correctamente
• Revisa la consola del navegador para errores JavaScript

Fuente no se carga

• Verifica que fonts/Oswald-VariableFont_wght.ttf existe
• El sistema usará fuente por defecto si no encuentra Oswald

📊 API Endpoints

POST /process

Procesa una imagen de producto y genera la oferta final.

Parámetros:

• image: Archivo de imagen (multipart/form-data)
• name: Nombre del producto (string)
• price: Precio del producto (string)

Respuesta: Imagen PNG procesada

Ejemplo:

const formData = new FormData();
formData.append('image', imageFile);
formData.append('name', 'Aceite Gulf 20W-50');
formData.append('price', '2450');

fetch('/process', {
    method: 'POST',
    body: formData
})
.then(response => response.blob())
.then(blob => {
    // Manejar imagen procesada
});

🔒 Seguridad

• Validación de archivos: Solo se aceptan imágenes válidas
• Límite de tamaño: Configurado en Flask para evitar uploads masivos
• Sanitización: Nombres de productos son sanitizados antes del procesamiento

🚀 Despliegue

Heroku

# Crear Procfile
echo "web: python app/app.py" > Procfile

# Deploy
git add .
git commit -m "Deploy to Heroku"
git push heroku main

Docker

FROM python:3.9-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["python", "app/app.py"]

🤝 Contribución

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Licencia

Este proyecto está bajo la Licencia MIT. Ver LICENSE para más detalles.

📞 Soporte

Para soporte técnico o consultas:

• Email: [email protected]
• Documentación: Wiki del proyecto
• Issues: GitHub Issues

---

MMR Group - Transformando la gestión de productos con tecnología de vanguardia 🚀