Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/elegroag/nuxt-credito-caja/llms.txt

Use this file to discover all available pages before exploring further.

Comfaca Créditos en Línea es la plataforma web oficial de la Caja de Compensación Familiar del Caquetá (COMFACA) para la gestión digital de solicitudes de crédito. Desarrollada con Nuxt 4 y Vue 3, moderniza el proceso tradicional de solicitud y aprobación de créditos, permitiendo a los empleados afiliados radicar solicitudes en línea con carga de documentos, firma electrónica integrada y seguimiento en tiempo real. El equipo administrativo, por su parte, cuenta con un panel de back-office completo para gestionar, revisar y aprobar solicitudes sin necesidad de trámites presenciales.

Casos de Uso

Los empleados afiliados a COMFACA acceden al front-office de la plataforma para gestionar sus solicitudes de crédito de principio a fin:
  1. Registro y autenticación — inicio de sesión con credenciales empresariales, recuperación de contraseña y gestión del perfil de usuario.
  2. Solicitud de crédito — selección de la línea de crédito, diligenciamiento del formulario y carga de los documentos requeridos.
  3. Seguimiento del estado — visualización en tiempo real del estado de la solicitud a lo largo de su ciclo de vida: POSTULADODOCUMENTOS_CARGADOSENVIADO_VALIDACIONPENDIENTE_FIRMADOFIRMADOENVIADO_PENDIENTE_APROBACIONAPROBADA (o RECHAZADA / DESESTIMADA / CANCELADA / DESISTE según el resultado).
  4. Firma electrónica — visualización de los documentos contractuales generados, firma con código OTP y descarga del comprobante firmado.
  5. Descarga de documentos — acceso a todos los documentos asociados a la solicitud una vez completado el proceso.

Tecnologías

Core

TecnologíaVersiónDescripción
Nuxt^4.4.6Framework full-stack basado en Vue 3
Vue^3.5.35Framework UI progresivo y reactivo
TypeScript^6.0.3Tipado estático sobre JavaScript
Tailwind CSS^4.3.0Framework CSS utility-first

UI/UX

TecnologíaVersiónDescripción
Nuxt UI^4.8.1Biblioteca de componentes UI para Nuxt
@lucide/vue^1.17.0Biblioteca de iconos SVG para Vue
Heroicons^2.2.0Iconos SVG de Tailwind Labs
Radix Vue^1.9.17Primitivos UI accesibles sin estilos

Backend

TecnologíaVersiónDescripción
Prisma^7.8.0ORM para modelado y acceso a base de datos
MariaDB Adapter^7.8.0Conector oficial de Prisma para MariaDB/MySQL
NitroIntegradoEngine de servidor HTTP incluido en Nuxt
Zod^4.4.3Validación de esquemas en endpoints de la API

Auth

TecnologíaVersiónDescripción
nuxt-auth-utils^0.5.29Gestión de sesiones cifradas para Nuxt
jose^6.2.3Implementación JWT (firma y verificación)
bcryptjs^3.0.3Hash seguro de contraseñas con salt

Integraciones

ServicioDescripción
API SISUSistema de información de usuarios y afiliados de COMFACA
FirmaPlusServicio externo de firma electrónica de documentos contractuales
FlaskPDFMicroservicio de generación de documentos PDF
SFTPTransferencia segura de archivos firmados vía SSH
SMTP / NodemailerEnvío de correos transaccionales (notificaciones, OTP, recuperación de contraseña) vía Gmail u otro servidor SMTP

Roles de Usuario

La plataforma reconoce tres tipos de usuario con accesos y capacidades diferenciados:
RolTipo de accesoDescripción
PúblicoSin autenticaciónPuede explorar la página de inicio (/), ver información general del proceso de crédito y acceder a los formularios de registro y autenticación.
AfiliadoFront-office (/dash/**)Empleado afiliado a COMFACA autenticado. Puede crear y gestionar sus propias solicitudes de crédito, firmar documentos electrónicamente y descargar comprobantes.
AdministradorBack-office (/admin/**)Funcionario de COMFACA con acceso total al panel administrativo. Puede revisar, aprobar o rechazar solicitudes, monitorear firmas y administrar convenios y usuarios.
Las rutas /dash/** y /admin/** están protegidas por middleware de autenticación. El acceso sin sesión válida redirige automáticamente al inicio de sesión. Las sesiones tienen una duración máxima de 8 horas con renovación automática.

Estructura del Proyecto

nuxt-creditos/
├── app/                    # Código fuente de la aplicación
│   ├── components/         # Componentes Vue reutilizables
│   │   ├── admin/          # Componentes de panel admin
│   │   ├── dashboard/      # Componentes de dashboard
│   │   ├── notifications/  # Sistema de notificaciones
│   │   └── ui/             # Componentes UI base
│   ├── composables/        # Composables Vue (lógica reutilizable)
│   │   └── admin/          # Composables específicos de admin
│   ├── layouts/            # Layouts de la aplicación
│   ├── middleware/         # Middleware de autenticación
│   ├── pages/              # Rutas de la aplicación
│   │   ├── admin/          # Rutas de administración
│   │   ├── auth/           # Rutas de autenticación
│   │   └── dash/           # Dashboard de usuario
│   └── assets/             # Recursos estáticos (CSS, imágenes)
├── server/                 # API y lógica del servidor
│   ├── api/                # Endpoints de la API
│   │   ├── auth/           # Rutas de autenticación
│   │   ├── admin/          # Rutas administrativas
│   │   └── solicitudes/    # Rutas de solicitudes de crédito
│   ├── middleware/         # Middleware del servidor
│   ├── services/           # Servicios de negocio
│   │   ├── admin/          # Servicios administrativos
│   │   └── storage/        # Servicios de almacenamiento
│   └── utils/              # Utilidades del servidor
├── tests/                  # Suite de testing
│   ├── setup/              # Configuración de entorno
│   │   ├── global.ts       # Setup global de Vitest
│   │   ├── integration.ts  # Setup para integración
│   │   └── msw.ts          # Configuración de MSW
│   ├── integration/        # Pruebas de integración
│   │   └── api/
│   └── unit/               # Pruebas unitarias
├── shared/                 # Código compartido
│   └── types/              # Definiciones de tipos TypeScript
├── prisma/                 # Esquema y migraciones de Prisma
└── public/                 # Archivos públicos estáticos
El alias @/ apunta a ./app/ y ~~/ apunta a la raíz del proyecto. Úsalos en tus importaciones para mantener rutas consistentes independientemente de la profundidad del archivo.

Instalar y Ejecutar

Levanta el entorno de desarrollo local en menos de 10 minutos con Node.js, pnpm y MariaDB.

Ver Arquitectura

Explora en detalle la arquitectura de capas, el modelo de datos y los flujos de integración.

Build docs developers (and LLMs) love