Especificacion Técnica Detallada (ETD)

1. Introducción

El sistema de gestión comercial descrito está orientado a:

  1. 📥 Recibir datos de ventas y clientes provenientes de un ERP
  2. 🎯 Definir objetivos por familia de artículos
  3. 📊 Analizar las ventas comparándolas con los objetivos
  4. 💡 Establecer estrategias comerciales
  5. 📋 Planificar y dar seguimiento a tareas
  6. 📈 Controlar y medir resultados


2. Arquitectura del Sistema ️

Se contempla una arquitectura por capas:

Frontend (UI/UX) 🖥️

  • Tecnología, cambios de (HTML5, CSS3, JavaScript) a React.js
  • Módulos: Objetivos, Análisis, Estrategias, Tareas, Control
  • Botones de Exportar y Compartir
  • Características, cambios agregados: Interfaz responsiva, exportación (PDF, CSV, XLSX), compartir (Email, WhatsApp)

Backend (API/Lógica) ⚙️

  • Tecnología: Node.js con Express

  • Autenticación: JWT con validación de roles

  • Funcionalidades: Análisis de datos, cálculo de KPIs, categorización automática

Base de Datos (Relacional) 💾 cambios

  • Tecnología: SQLite con Sequelize ORM
  • Entidades: usuarios, clientes, objetivos, ventas, estrategias, tareas, comentarios


3. Módulos del Sistema 📱

[Contenido de las secciones 3.1 a 3.5…]

Flujo de Trabajo Completo 🔄

[Contenido detallado del flujo de trabajo…]

Estructura de Datos Detallada 📑

3.1.1 Interfaz de Usuario

  • Pantalla Principal: Lista de objetivos con filtros y acciones
  • Formulario de Creación/Edición: Campos para definir objetivos y metas mensuales
  • Tabla de Metas Mensuales: Visualización y edición de metas por mes

3.1.2 Funcionalidades Implementadas

  • Definición de objetivos mensuales por variable y familia de productos
  • Asignación de objetivos por usuario/responsable
  • Función “Repetir Valores” para auto-completar meses
  • Filtrado por familia, variable, período y estado
  • Exportación de datos en múltiples formatos
  • Notificaciones de objetivos próximos a vencer

3.1.3 Estructura de Datos

  • Objetivo: id, nombre, descripción, variable, familia, período, estado, userId
  • Meta Mensual: id, goalId, responsibleId, mes, año, valor, estado

3.1.4 Flujos de Usuario

  1. Creación de Objetivo:
    • Seleccionar variable (Ingresos, Cantidad de Clientes, etc.)
    • Definir familia de productos
    • Establecer período (mensual, trimestral, anual)
    • Asignar responsable
    • Definir metas mensuales
  2. Gestión de Metas:
    • Visualizar metas por mes
    • Editar valores individuales
    • Utilizar función “Repetir Valores”
    • Monitorear progreso vs. objetivo

3.2 Módulo de Análisis de Ventas

3.2.1 Interfaz de Usuario

  • Selector de Variable: Cambia el dashboard según la variable seleccionada
  • Dashboard Dinámico: Muestra KPIs y gráficos específicos para cada variable
  • Tabla de Análisis: Columnas configurables con datos de clientes y métricas

3.2.2 Dashboards por Variable

  1. Ingresos:
    • Total de ingresos vs. objetivo
    • Porcentaje de cumplimiento
    • Gráficos de barras/líneas por período
    • Alertas de desviación
  2. Cantidad de Clientes:
    • Clientes actuales vs. objetivo
    • Evolución mensual
    • Distribución por categoría
  3. Clientes Nuevos:
    • Nuevos clientes detectados vs. objetivo
    • Porcentaje sobre total de clientes
    • Comparación con meses previos
    • Gráfico de barras comparativo
  4. Clientes No Retenidos:
    • Número de clientes no retenidos vs. meta
    • Gráfico comparativo de categorías
    • Evolución de tasa de retención

3.2.3 Tabla de Análisis Detallado

  • Configuración de Condiciones: Define umbrales para índices (I1-I4)
  • Columnas Configurables: El usuario selecciona qué columnas visualizar
  • Columnas Base: Cliente, Responsable, Ventas del mes, Categoría (editable)
  • Columnas Opcionales: Índices (I1-I4), Clasificación ABC, Diagnóstico, Comentarios, Estrategia
  • Ordenamiento: Criterio primario y secundario configurable
  • Filtros: Hasta 3 filtros combinados

3.2.4 Funcionalidades de Análisis Avanzado

  • Índices (I1-I4): Medición de variaciones vs. períodos anteriores
  • Diagnóstico Automático: Análisis de causas potenciales basado en datos
  • Sugerencia de Estrategias: Recomendaciones basadas en el diagnóstico
  • Sistema de Comentarios: Registro y visualización de notas por cliente

4. Flujos de Trabajo Implementados

4.1 Gestión de Objetivos

  1. Usuario selecciona “Crear Objetivo”
  2. Completa formulario con variable, familia, período
  3. Define metas mensuales por responsable
  4. Sistema guarda y muestra en lista de objetivos
  5. Usuario puede filtrar, editar o exportar objetivos

4.2 Análisis de Ventas

  1. Usuario selecciona variable de análisis
  2. Sistema muestra dashboard específico para esa variable
  3. Usuario configura columnas y filtros en tabla de análisis
  4. Puede revisar índices detallados por cliente
  5. Edita categorías o agrega comentarios según necesidad
  6. Visualiza diagnóstico y sugerencias de estrategia

5. Detalles Técnicos de Implementación

5.1 Componentes Frontend

  • Login.jsx: Pantalla de inicio de sesión con autenticación
  • Dashboard.jsx: Panel principal con navegación y resumen
  • Goals.jsx: Gestión completa de objetivos
  • Analysis.jsx: Análisis de ventas con dashboards dinámicos
  • Strategies.jsx: Creación y seguimiento de estrategias
  • Tasks.jsx: Planificación y seguimiento de tareas
  • Control.jsx: Monitoreo de resultados y KPIs

5.2 Servicios API

  • authService.js: Gestión de autenticación y usuarios
  • goalService.js: CRUD de objetivos y metas
  • clientService.js: Gestión de clientes y categorización
  • saleService.js: Registro y análisis de ventas
  • strategyService.js: Creación y seguimiento de estrategias
  • taskService.js: Gestión de tareas y actividades
  • commentService.js: Sistema de comentarios

5.3 Modelos de Datos

  • User.js: Usuarios y roles (admin, supervisor, ventas)
  • Client.js: Información de clientes y categorización
  • Goal.js: Objetivos comerciales
  • MonthlyTarget.js: Metas mensuales por objetivo
  • Sale.js: Registro de ventas
  • Strategy.js: Estrategias comerciales
  • Task.js: Tareas y actividades
  • Comment.js: Comentarios sobre clientes/estrategias

6. Guía de Uso

6.1 Acceso al Sistema

6.2 Módulo de Objetivos

  1. Acceder a “Objetivos” en el menú lateral
  2. Usar filtros para encontrar objetivos específicos
  3. Crear nuevo objetivo con el botón “Nuevo Objetivo”
  4. Definir metas mensuales en la tabla de objetivos
  5. Exportar datos con botones de exportación

6.3 Módulo de Análisis

  1. Acceder a “Análisis” en el menú lateral
  2. Seleccionar variable de análisis en el selector superior
  3. Visualizar dashboard específico para esa variable
  4. Configurar columnas con botón “Configurar Columnas”
  5. Aplicar filtros con botón “Filtrar”
  6. Revisar índices haciendo clic en valores de la tabla
  7. Editar categorías directamente en la tabla
  8. Ver diagnóstico y estrategias sugeridas

7. Próximas Mejoras Planificadas 🛠

  • Integración con correo electrónico para importación de datos ERP
  • Visualización geoespacial de clientes
  • Reportes personalizados y programados
  • Aplicación móvil para seguimiento de tareas
  • Integración con WhatsApp para compartir informes
  • Análisis predictivo de tendencias de ventas

Información Adicional:

Total de archivos: 66 (excluyendo node_modules y archivos de build)

  • Frontend: 651MB

  • Backend: 115MB

Archivos Principales por Tamaño

  • frontend/package-lock.json: 700KB

  • backend/package-lock.json: 280KB

  • backend/database.sqlite: 52KB

  • frontend/src/pages/Tasks.jsx: 24KB

  • frontend/src/pages/Analysis.jsx: 24KB

  • frontend/src/pages/Control.jsx: 20KB

  • frontend/src/index.css: 16KB

🚀 Pasos de Implementación:

  1. Backend testeo integracion
  2. Configuración BD… (**)
  3. Integración con ERP (**)
  4. Conexión Frontend-API
  5. Sistema de autenticación
  6. Funcionalidades avanzadas (**)
  7. Infraestructura (**)
  8. Infraestructura check: https://rpubs.com/MaraD/ETD_Dimal
DiagrammeR::grViz("
  digraph CRM {
    graph [rankdir = TB, bgcolor = transparent]
    node [shape = rectangle, style = filled, fillcolor = lightblue, fontname = 'Arial']
    
    Frontend [label = 'Frontend\nReact']
    Backend [label = 'Backend\nExpress.js']
    DB [label = 'Base de Datos\nPostgreSQL']
    ERP [label = 'ERP\nIntegración']
    
    Frontend -> Backend [label = 'API REST']
    Backend -> DB [label = 'Queries']
    ERP -> Backend [label = 'Datos']
    
    subgraph cluster_0 {
      label = 'Módulos'
      style = filled
      color = lightgrey
      
      Objetivos [label = 'Gestión\nObjetivos']
      Ventas [label = 'Análisis\nVentas']
      Estrategias [label = 'Definición\nEstrategias']
      Tareas [label = 'Planificación\nTareas']
      KPIs [label = 'Control\nResultados']
    }
  }
")

Integración Backend FrontEnd

✅ IBackend

Funcionalidad del backend para todos los módulos solicitados.
Los cambios han sido enviados al pull request existente aceptados y mostrados:
🔗 https://github.com/MaraDestefanis/CRM_

🔧 Testeo