Skip to content

README.md

Latest commit

 

History

History
244 lines (194 loc) · 14.4 KB

README.md

File metadata and controls

244 lines (194 loc) · 14.4 KB

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:

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