school
PrepaBE
User
description

PrepaBE Admin

Sistema de Gestión Educativa

PrepaBE Admin es una plataforma integral para la administración de franquicias educativas. Gestiona el ciclo completo desde la captación de prospectos hasta el seguimiento académico y financiero de estudiantes, permitiendo operar múltiples sucursales desde una sola interfaz centralizada.

pages

Páginas

19

widgets

Módulos

5

database

Tablas BD

12

responsive_layout

Responsive

✓

architecture

Arquitectura del Sistema 

graph TB
    subgraph Frontend["🖥️ Frontend - Admin Panel"]
        UI[HTML + TailwindCSS + JavaScript]
    end
    
    subgraph Backend["⚙️ Backend API"]
        API[REST API / GraphQL]
        AUTH[Autenticación JWT]
        LOGIC[Lógica de Negocio]
    end
    
    subgraph Database["💾 Base de Datos"]
        DB[(MySQL / PostgreSQL)]
    end
    
    subgraph External["🌐 Servicios Externos"]
        EMAIL[📧 Email SMTP]
        SMS[📱 SMS / WhatsApp API]
        STORAGE[☁️ File Storage S3]
    end
    
    UI --> API
    API --> AUTH
    AUTH --> LOGIC
    LOGIC --> DB
    LOGIC --> EMAIL
    LOGIC --> SMS
    LOGIC --> STORAGE

apps Módulos del Sistema

groups

CRM

Gestión de prospectos y embudo de conversión

arrow_forward Directorio de Prospectos arrow_forward Detalle de Prospecto arrow_forward Nuevo Prospecto

✨ Características:

  • • Captura multicanal (Web, Redes, Referidos)
  • • Asignación automática a asesores
  • • Seguimiento de estados del funnel
  • • Integración WhatsApp Business
school

Estudiantes

Administración académica y expedientes

arrow_forward Directorio de Estudiantes arrow_forward Inscripción de Estudiantes arrow_forward Planes Educativos

✨ Características:

  • • Matrículas únicas auto-generadas
  • • Múltiples tipos de certificación
  • • Validación de documentos
  • • Control de progreso académico
account_balance_wallet

Finanzas

Control financiero y cuentas por cobrar

arrow_forward Registrar Pago arrow_forward Corte Diario arrow_forward Ingresos y Reportes arrow_forward Cartera Vencida

✨ Características:

  • • Múltiples métodos de pago (Efectivo, Tarjeta, Transferencia)
  • • Cálculo automático de saldos
  • • Alertas de pagos vencidos
  • • Cierre de caja diario
analytics

Reportes

Analíticas y KPIs en tiempo real

arrow_forward Dashboard General arrow_forward Analíticas Avanzadas arrow_forward Reporte de Conversiones

✨ Características:

  • • KPIs en tiempo real
  • • Funnel de conversión visualizado
  • • Comparativas multi-sucursal
  • • Exportación a Excel/PDF
settings

Sistema

Administración y configuración global

arrow_forward Gestión de Oficinas arrow_forward Detalle de Oficina arrow_forward Nueva Oficina arrow_forward Usuarios y Roles arrow_forward Configuración
route

Flujos de Trabajo Principales

conversion_path 1. Captación y Conversión de Prospectos 

graph LR
    A[📝 Captura Lead] --> B[👤 Asignar Asesor]
    B --> C[📞 Primer Contacto]
    C --> D{¿Interesado?}
    D -->|Sí| E[📅 Agendar Cita]
    D -->|No| F[❌ Marcar Perdido]
    E --> G[💼 Presentar Planes]
    G --> H{¿Inscribe?}
    H -->|Sí| I[✅ Crear Estudiante]
    H -->|No| J[⏸️ Seguimiento]
    I --> K[💳 Registrar Pago Inicial]

person_add 2. Inscripción de Nuevo Estudiante 

graph LR
    A[🎓 Iniciar Inscripción] --> B[📋 Llenar Formulario]
    B --> C[📄 Subir Documentos]
    C --> D[🔍 Validar Información]
    D --> E[💼 Asignar Plan]
    E --> F[🏷️ Generar Matrícula]
    F --> G[💵 Calcular Costo Total]
    G --> H[💳 Registrar Primer Pago]
    H --> I[✅ Activar Estudiante]

receipt_long 3. Registro de Pago y Actualización de Saldo 

graph LR
    A[💵 Recibir Pago] --> B[🔎 Buscar Estudiante]
    B --> C[📝 Capturar Datos]
    C --> D[💳 Seleccionar Método]
    D --> E[💰 Ingresar Monto]
    E --> F[🧮 Actualizar Saldo]
    F --> G[🖨️ Generar Recibo]
    G --> H{¿Saldo = 0?}
    H -->|Sí| I[🎉 Marcar Plan Liquidado]
    H -->|No| J[⏰ Programar Recordatorio]
code

Stack Tecnológico

Frontend

  • ✓ HTML5 (Semantic Markup)
  • ✓ TailwindCSS 3.x (Utility-first)
  • ✓ Vanilla JavaScript (ES6+)
  • ✓ Google Material Symbols
  • ✓ Responsive Design (Mobile-first)

Backend (Sugerido)

  • ○ Node.js + Express / Django
  • ○ PostgreSQL / MySQL
  • ○ JWT Authentication
  • ○ REST API / GraphQL
  • ○ AWS S3 / CloudFlare R2
construction

Próximos Pasos de Implementación

  1. 1. Revisar el esquema de base de datos y crear las tablas
  2. 2. Implementar el backend API con endpoints para cada módulo
  3. 3. Conectar las vistas HTML con el backend mediante fetch/axios
  4. 4. Implementar autenticación JWT y protección de rutas
  5. 5. Configurar servicios externos (Email, SMS, Storage)
  6. 6. Realizar pruebas end-to-end de cada flujo
  7. 7. Desplegar en producción (Frontend + Backend + DB)