eyujra
/
web_Admision
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login2026

Browse Source
main
elmer-20 2 months ago
parent 87e72bc029
commit 489cfd8f6b
19 changed files with 2886 additions and 1985 deletions
Show Stats Download Patch File Download Diff File

109
back/app/Http/Controllers/Administracion/CalificacionController.php
Unescape Escape View File

@ -0,0 +1,109 @@
<?php
namespace App\Http\Controllers\Administracion;
use App\Http\Controllers\Controller;
use App\Models\Calificacion;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class CalificacionController extends Controller
{
// ✅ Listar todas
public function index()
{
$calificaciones = Calificacion::all();
return response()->json([
'success' => true,
'data' => $calificaciones
]);
}
// ✅ Guardar nueva
public function store(Request $request)
{
$request->validate([
'nombre' => 'required|string|max:255',
'puntos_correcta' => 'required|numeric',
'puntos_incorrecta' => 'required|numeric',
'puntos_nula' => 'required|numeric',
'puntaje_maximo' => 'required|numeric',
]);
$calificacion = Calificacion::create($request->all());
return response()->json([
'success' => true,
'message' => 'Calificación creada correctamente',
'data' => $calificacion
]);
}
// ✅ Mostrar una
public function show($id)
{
$calificacion = Calificacion::find($id);
if (!$calificacion) {
return response()->json([
'success' => false,
'message' => 'No encontrada'
], 404);
}
return response()->json([
'success' => true,
'data' => $calificacion
]);
}
// ✅ Actualizar
public function update(Request $request, $id)
{
$calificacion = Calificacion::find($id);
if (!$calificacion) {
return response()->json([
'success' => false,
'message' => 'No encontrada'
], 404);
}
$request->validate([
'nombre' => 'required|string|max:255',
'puntos_correcta' => 'required|numeric',
'puntos_incorrecta' => 'required|numeric',
'puntos_nula' => 'required|numeric',
'puntaje_maximo' => 'required|numeric',
]);
$calificacion->update($request->all());
return response()->json([
'success' => true,
'message' => 'Calificación actualizada correctamente',
'data' => $calificacion
]);
}
// ✅ Eliminar
public function destroy($id)
{
$calificacion = Calificacion::find($id);
if (!$calificacion) {
return response()->json([
'success' => false,
'message' => 'No encontrada'
], 404);
}
$calificacion->delete();
return response()->json([
'success' => true,
'message' => 'Calificación eliminada correctamente'
]);
}
}

465
back/app/Http/Controllers/Administracion/ExamenesController.php
Unescape Escape View File

@ -1,465 +0,0 @@
<?php
namespace App\Http\Controllers\Administracion;
use App\Http\Controllers\Controller;
use App\Models\Academia;
use App\Models\User;
use App\Models\Examen;
use App\Models\Pregunta;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Str;
use Carbon\Carbon;
class ExamenesController extends Controller
{
public function getExamenes(Request $request)
{
try {
$user = auth()->user();
if (!$user->hasRole('administrador')) {
return response()->json([
'success' => false,
'message' => 'No autorizado'
], 403);
}
$academia = Academia::where('admin_academia_id', $user->id)->first();
if (!$academia) {
return response()->json([
'success' => false,
'message' => 'Academia no encontrada'
], 404);
}
$query = $academia->examenes()
->withCount(['preguntas', 'intentos' => function($query) {
$query->where('estado', 'finalizado');
}])
->latest();
if ($request->has('search')) {
$search = $request->search;
$query->where('titulo', 'like', "%{$search}%");
}
if ($request->has('publicado')) {
$query->where('publicado', $request->publicado);
}
if ($request->has('tipo')) {
$query->where('tipo', $request->tipo);
}
$examenes = $query->paginate(15);
return response()->json([
'success' => true,
'data' => $examenes
]);
} catch (\Exception $e) {
Log::error('Error obteniendo exámenes', [
'error' => $e->getMessage()
]);
return response()->json([
'success' => false,
'message' => 'Error al cargar los exámenes'
], 500);
}
}
public function crearExamen(Request $request)
{
try {
$user = auth()->user();
if (!$user->hasRole('administrador')) {
return response()->json([
'success' => false,
'message' => 'No autorizado'
], 403);
}
$academia = Academia::where('admin_academia_id', $user->id)->first();
if (!$academia) {
return response()->json([
'success' => false,
'message' => 'Academia no encontrada'
], 404);
}
$validator = Validator::make($request->all(), [
'titulo' => 'required|string|max:255',
'descripcion' => 'nullable|string',
'tipo' => 'required|in:practica,simulacro,evaluacion',
'dificultad' => 'required|in:facil,medio,dificil,avanzado',
'duracion_minutos' => 'required|integer|min:1|max:480',
'intentos_permitidos' => 'required|integer|min:1|max:10',
'puntaje_minimo' => 'required|numeric|min:0|max:100',
'preguntas_aleatorias' => 'boolean',
'mostrar_resultados' => 'boolean',
'mostrar_respuestas' => 'boolean',
'publicado' => 'boolean',
'fecha_inicio' => 'nullable|date',
'fecha_fin' => 'nullable|date|after_or_equal:fecha_inicio',
'configuracion' => 'nullable|array'
]);
if ($validator->fails()) {
return response()->json([
'success' => false,
'errors' => $validator->errors()
], 422);
}
DB::beginTransaction();
$examen = Examen::create([
'academia_id' => $academia->id,
'titulo' => $request->titulo,
'descripcion' => $request->descripcion,
'tipo' => $request->tipo,
'dificultad' => $request->dificultad,
'duracion_minutos' => $request->duracion_minutos,
'intentos_permitidos' => $request->intentos_permitidos,
'puntaje_minimo' => $request->puntaje_minimo,
'preguntas_aleatorias' => $request->preguntas_aleatorias ?? 0,
'mezclar_opciones' => $request->mezclar_opciones ?? true,
'mostrar_resultados' => $request->mostrar_resultados ?? true,
'mostrar_respuestas' => $request->mostrar_respuestas ?? false,
'mostrar_explicaciones' => $request->mostrar_explicaciones ?? false,
'activar_timer' => $request->activar_timer ?? true,
'permitir_navegacion' => $request->permitir_navegacion ?? true,
'permitir_revisar' => $request->permitir_revisar ?? true,
'publicado' => $request->publicado ?? false,
'fecha_inicio' => $request->fecha_inicio,
'fecha_fin' => $request->fecha_fin,
'orden' => $request->orden ?? 1,
'configuracion' => $request->configuracion ?? []
]);
DB::commit();
Log::info('Examen creado por admin', [
'academia_id' => $academia->id,
'examen_id' => $examen->id,
'admin_id' => $user->id
]);
return response()->json([
'success' => true,
'message' => 'Examen creado exitosamente',
'data' => $examen
], 201);
} catch (\Exception $e) {
DB::rollBack();
Log::error('Error creando examen', [
'error' => $e->getMessage()
]);
return response()->json([
'success' => false,
'message' => 'Error al crear el examen'
], 500);
}
}
public function getExamen($examenId)
{
try {
$user = auth()->user();
if (!$user->hasRole('administrador')) {
return response()->json([
'success' => false,
'message' => 'No autorizado'
], 403);
}
$academia = Academia::where('admin_academia_id', $user->id)->first();
if (!$academia) {
return response()->json([
'success' => false,
'message' => 'Academia no encontrada'
], 404);
}
$examen = Examen::where('academia_id', $academia->id)
->with(['preguntas'])
->find($examenId);
if (!$examen) {
return response()->json([
'success' => false,
'message' => 'Examen no encontrado'
], 404);
}
$estadisticas = DB::table('intentos_examen')
->where('examen_id', $examenId)
->where('estado', 'finalizado')
->selectRaw('COUNT(*) as total_intentos')
->selectRaw('AVG(porcentaje) as promedio')
->selectRaw('SUM(CASE WHEN aprobado = 1 THEN 1 ELSE 0 END) as aprobados')
->first();
return response()->json([
'success' => true,
'data' => [
'examen' => $examen,
'estadisticas' => $estadisticas
]
]);
} catch (\Exception $e) {
Log::error('Error obteniendo examen', [
'error' => $e->getMessage()
]);
return response()->json([
'success' => false,
'message' => 'Error al cargar el examen'
], 500);
}
}
public function actualizarExamen(Request $request, $examenId)
{
try {
$user = auth()->user();
if (!$user->hasRole('administrador')) {
return response()->json([
'success' => false,
'message' => 'No autorizado'
], 403);
}
$academia = Academia::where('admin_academia_id', $user->id)->first();
if (!$academia) {
return response()->json([
'success' => false,
'message' => 'Academia no encontrada'
], 404);
}
$examen = Examen::where('academia_id', $academia->id)->find($examenId);
if (!$examen) {
return response()->json([
'success' => false,
'message' => 'Examen no encontrado'
], 404);
}
$validator = Validator::make($request->all(), [
'titulo' => 'sometimes|string|max:255',
'descripcion' => 'nullable|string',
'tipo' => 'sometimes|in:practica,simulacro,evaluacion',
'duracion_minutos' => 'sometimes|integer|min:1|max:480',
'intentos_permitidos' => 'sometimes|integer|min:1|max:10',
'puntaje_minimo' => 'sometimes|numeric|min:0|max:100',
'preguntas_aleatorias' => 'boolean',
'mostrar_resultados' => 'boolean',
'mostrar_respuestas' => 'boolean',
'publicado' => 'boolean',
'fecha_inicio' => 'nullable|date',
'fecha_fin' => 'nullable|date|after_or_equal:fecha_inicio',
'configuracion' => 'nullable|array'
]);
if ($validator->fails()) {
return response()->json([
'success' => false,
'errors' => $validator->errors()
], 422);
}
$examen->update($request->only([
'titulo', 'descripcion', 'tipo', 'duracion_minutos', 'intentos_permitidos',
'puntaje_minimo', 'preguntas_aleatorias', 'mostrar_resultados',
'mostrar_respuestas', 'publicado', 'fecha_inicio', 'fecha_fin', 'configuracion'
]));
Log::info('Examen actualizado por admin', [
'academia_id' => $academia->id,
'examen_id' => $examen->id,
'admin_id' => $user->id
]);
return response()->json([
'success' => true,
'message' => 'Examen actualizado exitosamente',
'data' => $examen
]);
} catch (\Exception $e) {
Log::error('Error actualizando examen', [
'error' => $e->getMessage()
]);
return response()->json([
'success' => false,
'message' => 'Error al actualizar el examen'
], 500);
}
}
public function eliminarExamen($examenId)
{
try {
$user = auth()->user();
if (!$user->hasRole('administrador')) {
return response()->json([
'success' => false,
'message' => 'No autorizado'
], 403);
}
$academia = Academia::where('admin_academia_id', $user->id)->first();
if (!$academia) {
return response()->json([
'success' => false,
'message' => 'Academia no encontrada'
], 404);
}
$examen = Examen::where('academia_id', $academia->id)->find($examenId);
if (!$examen) {
return response()->json([
'success' => false,
'message' => 'Examen no encontrado'
], 404);
}
$tieneIntentos = $examen->intentos()->exists();
if ($tieneIntentos) {
return response()->json([
'success' => false,
'message' => 'No se puede eliminar un examen con intentos realizados'
], 400);
}
$examen->delete();
Log::info('Examen eliminado por admin', [
'academia_id' => $academia->id,
'examen_id' => $examenId,
'admin_id' => $user->id
]);
return response()->json([
'success' => true,
'message' => 'Examen eliminado exitosamente'
]);
} catch (\Exception $e) {
Log::error('Error eliminando examen', [
'error' => $e->getMessage()
]);
return response()->json([
'success' => false,
'message' => 'Error al eliminar el examen'
], 500);
}
}
public function getResultadosExamen($examenId)
{
try {
$user = auth()->user();
if (!$user->hasRole('administrador')) {
return response()->json([
'success' => false,
'message' => 'No autorizado'
], 403);
}
$academia = Academia::where('admin_academia_id', $user->id)->first();
if (!$academia) {
return response()->json([
'success' => false,
'message' => 'Academia no encontrada'
], 404);
}
$examen = Examen::where('academia_id', $academia->id)->find($examenId);
if (!$examen) {
return response()->json([
'success' => false,
'message' => 'Examen no encontrado'
], 404);
}
$resultados = DB::table('intentos_examen')
->join('users', 'intentos_examen.user_id', '=', 'users.id')
->where('intentos_examen.examen_id', $examenId)
->where('intentos_examen.estado', 'finalizado')
->select(
'users.id as estudiante_id',
'users.name as estudiante_nombre',
'users.email as estudiante_email',
'intentos_examen.numero_intento',
'intentos_examen.porcentaje',
'intentos_examen.aprobado',
'intentos_examen.tiempo_utilizado',
'intentos_examen.finalizado_en'
)
->orderBy('intentos_examen.porcentaje', 'desc')
->get();
$estadisticas = [
'total_estudiantes' => $resultados->groupBy('estudiante_id')->count(),
'promedio' => $resultados->avg('porcentaje'),
'aprobados' => $resultados->where('aprobado', true)->count(),
'reprobados' => $resultados->where('aprobado', false)->count(),
'tiempo_promedio' => $resultados->avg('tiempo_utilizado')
];
return response()->json([
'success' => true,
'data' => [
'resultados' => $resultados,
'estadisticas' => $estadisticas
]
]);
} catch (\Exception $e) {
Log::error('Error obteniendo resultados', [
'error' => $e->getMessage()
]);
return response()->json([
'success' => false,
'message' => 'Error al cargar los resultados'
], 500);
}
}
}

64
back/app/Http/Controllers/Administracion/PostulanteController.php
Unescape Escape View File

@ -0,0 +1,64 @@
<?php
namespace App\Http\Controllers\Administracion;
use App\Http\Controllers\Controller;
use App\Models\Postulante;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class PostulanteController extends Controller
{
public function obtenerPostulantes(Request $request)
{
$query = Postulante::query();
if ($request->buscar) {
$query->where(function ($q) use ($request) {
$q->where('name', 'like', "%{$request->buscar}%")
->orWhere('email', 'like', "%{$request->buscar}%")
->orWhere('dni', 'like', "%{$request->buscar}%");
});
}
$postulantes = $query->orderBy('id', 'desc')
->paginate(20);
return response()->json([
'success' => true,
'data' => $postulantes
]);
}
public function actualizarPostulante(Request $request, $id)
{
$postulante = Postulante::findOrFail($id);
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|email|unique:postulantes,email,' . $postulante->id,
'dni' => 'required|string|max:20|unique:postulantes,dni,' . $postulante->id,
'password' => 'nullable|string|min:6'
]);
$postulante->update([
'name' => $request->name,
'email' => $request->email,
'dni' => $request->dni,
]);
// 🔹 Solo si envían nueva contraseña
if ($request->filled('password')) {
$postulante->password = $request->password;
$postulante->save();
}
return response()->json([
'success' => true,
'message' => 'Postulante actualizado correctamente',
'data' => $postulante
]);
}
}

2
back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
Unescape Escape View File

@ -11,7 +11,7 @@ use Illuminate\Support\Facades\DB;
class ReglaAreaProcesoController extends Controller class ReglaAreaProcesoController extends Controller
{ {
ion areasProcesos() public function areasProcesos()
{ {
$areasProcesos = DB::table('area_proceso as ap') $areasProcesos = DB::table('area_proceso as ap')
->leftJoin('reglas_area_proceso as r', 'ap.id', '=', 'r.area_proceso_id') ->leftJoin('reglas_area_proceso as r', 'ap.id', '=', 'r.area_proceso_id')

2
back/app/Http/Controllers/ExamenController.php
Unescape Escape View File

@ -431,7 +431,7 @@ public function iniciarExamen(Request $request)
public function responderPregunta($preguntaAsignadaId, Request $request) public function responderPregunta($preguntaAsignadaId, Request $request)
{ {
$request->validate([ $request->validate([
'respuesta' => 'required|string' 'respuesta' => 'nullable|string'
]); ]);
$preguntaAsignada = PreguntaAsignada::with(['examen', 'pregunta']) $preguntaAsignada = PreguntaAsignada::with(['examen', 'pregunta'])

2
back/app/Models/PreguntaAsignada.php
Unescape Escape View File

@ -21,7 +21,7 @@ class PreguntaAsignada extends Model
]; ];
protected $casts = [ protected $casts = [
'es_correcta' => 'boolean', 'es_correcta' => 'integer',
'puntaje' => 'decimal:2' 'puntaje' => 'decimal:2'
]; ];

37
back/app/Models/ResultadoExamen.php
Unescape Escape View File

@ -0,0 +1,37 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class ResultadoExamen extends Model
{
protected $table = 'resultados_examenes';
protected $fillable = [
'postulante_id',
'examen_id',
'total_puntos',
'correctas_por_curso',
'incorrectas_por_curso',
'preguntas_totales_por_curso',
'total_correctas',
'total_incorrectas',
'total_nulas',
'porcentaje_correctas',
'calificacion_sobre_20',
'orden_merito',
'probabilidad_ingreso',
'programa_recomendado',
];
public function postulante()
{
return $this->belongsTo(Postulante::class);
}
public function examen()
{
return $this->belongsTo(Examen::class);
}
}

42
back/app/Services/ExamenService.php
Unescape Escape View File

@ -115,29 +115,49 @@ public function obtenerPreguntasExamen(Examen $examen): array
public function guardarRespuesta(PreguntaAsignada $pa, string $respuesta): array public function guardarRespuesta(PreguntaAsignada $pa, ?string $respuesta): array
{ {
if ($pa->estado === 'respondida') { if ($pa->estado === 'respondida') {
return ['success' => false, 'message' => 'Ya respondida']; return ['success' => false, 'message' => 'Ya respondida'];
} }
$esCorrecta = $respuesta === $pa->pregunta->respuesta_correcta; // 🔹 Si está en blanco
if (empty($respuesta)) {
$pa->update([ $pa->update([
'respuesta_usuario' => $respuesta, 'respuesta_usuario' => null,
'es_correcta' => $esCorrecta, 'es_correcta' => 2, // 2 = blanco
'puntaje_obtenido' => $esCorrecta ? $pa->puntaje_base : 0, 'puntaje_obtenido' => 0,
'estado' => 'respondida', 'estado' => 'respondida',
'respondida_at' => now() 'respondida_at' => now()
]); ]);
return [ return [
'success' => true, 'success' => true,
'correcta' => $esCorrecta, 'correcta' => 2,
'puntaje' => $pa->puntaje_obtenido 'puntaje' => 0
]; ];
} }
// 🔹 Si respondió algo
$esCorrecta = $respuesta === $pa->pregunta->respuesta_correcta;
$pa->update([
'respuesta_usuario' => $respuesta,
'es_correcta' => $esCorrecta ? 1 : 0,
'puntaje_obtenido' => $esCorrecta ? $pa->puntaje_base : 0,
'estado' => 'respondida',
'respondida_at' => now()
]);
return [
'success' => true,
'correcta' => $esCorrecta ? 1 : 0,
'puntaje' => $pa->puntaje_obtenido
];
}
/** /**
* Finalizar examen * Finalizar examen
*/ */

23
back/routes/api.php
Unescape Escape View File

@ -6,7 +6,6 @@ use App\Http\Controllers\AuthController;
use App\Http\Controllers\AcademiaController; use App\Http\Controllers\AcademiaController;
use App\Http\Controllers\VinculacionController; use App\Http\Controllers\VinculacionController;
use App\Http\Controllers\Administracion\administradorController; use App\Http\Controllers\Administracion\administradorController;
use App\Http\Controllers\Administracion\ExamenesController;
use App\Http\Controllers\Administracion\AreaController; use App\Http\Controllers\Administracion\AreaController;
use App\Http\Controllers\Administracion\CursoController; use App\Http\Controllers\Administracion\CursoController;
use App\Http\Controllers\Administracion\PreguntaController; use App\Http\Controllers\Administracion\PreguntaController;
@ -16,8 +15,11 @@ use App\Http\Controllers\ExamenController;
use App\Http\Controllers\Administracion\ReglaAreaProcesoController; use App\Http\Controllers\Administracion\ReglaAreaProcesoController;
use App\Http\Controllers\Administracion\ProcesoAdmisionController; use App\Http\Controllers\Administracion\ProcesoAdmisionController;
use App\Http\Controllers\Administracion\ProcesoAdmisionDetalleController; use App\Http\Controllers\Administracion\ProcesoAdmisionDetalleController;
use App\Http\Controllers\Administracion\PostulanteController;
use App\Http\Administracion\CalificacionController;
use App\Models\ProcesoAdmisionDetalle; use App\Models\ProcesoAdmisionDetalle;
Route::get('/user', function (Request $request) { Route::get('/user', function (Request $request) {
return $request->user(); return $request->user();
})->middleware('auth:sanctum'); })->middleware('auth:sanctum');
@ -74,6 +76,14 @@ Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
}); });
Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
Route::get('/postulantes', [PostulanteController::class, 'obtenerPostulantes']);
Route::put('/postulantes/{id}', [PostulanteController::class, 'actualizarPostulante']);
});
Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () { Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
@ -85,6 +95,17 @@ Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
}); });
Route::middleware('auth:sanctum')->group(function () {
Route::get('/calificaciones', [CalificacionController::class, 'index']);
Route::post('/calificaciones', [CalificacionController::class, 'store']);
Route::get('/calificaciones/{id}', [CalificacionController::class, 'show']);
Route::put('/calificaciones/{id}', [CalificacionController::class, 'update']);
Route::delete('/calificaciones/{id}', [CalificacionController::class, 'destroy']);
});
Route::prefix('postulante')->group(function () { Route::prefix('postulante')->group(function () {

11
front/src/router/index.js
Unescape Escape View File

@ -127,6 +127,17 @@ const routes = [
path: '/admin/dashboard/procesos/:id/detalles', path: '/admin/dashboard/procesos/:id/detalles',
name: 'ProcesoAdmisionDetalles', name: 'ProcesoAdmisionDetalles',
component: () => import('../views/administrador/procesoadmision/ProcesoAdmisionDetalles.vue') component: () => import('../views/administrador/procesoadmision/ProcesoAdmisionDetalles.vue')
},
{
path: '/admin/dashboard/lista-calificacion',
name: 'CalificacionList',
component: () => import('../views/administrador/Procesos/CalificacionTest.vue')
},
{
path: '/admin/dashboard/lista-postulantes',
name: 'PostulantesList',
component: () => import('../views/administrador/estudiantes/ListPostulantes.vue')
} }
] ]
}, },

62
front/src/store/examen.store.js
Unescape Escape View File

@ -12,17 +12,23 @@ export const useExamenStore = defineStore('examenStore', {
error: null, error: null,
}), }),
actions: { actions: {
async fetchProcesos() { async fetchProcesos() {
try { try {
this.cargando = true this.cargando = true
const { data } = await api.get('/examen/procesos') const { data } = await api.get('/examen/procesos')
this.procesos = data
} catch (e) { // ✅ normaliza
this.error = e.response?.data?.message || e.message this.procesos = (data || []).map(p => ({
} finally { ...p,
this.cargando = false requiere_pago: p.requiere_pago === 1 || p.requiere_pago === '1' || p.requiere_pago === true
} }))
}, } catch (e) {
this.error = e.response?.data?.message || e.message
} finally {
this.cargando = false
}
},
async fetchAreas(proceso_id) { async fetchAreas(proceso_id) {
try { try {
@ -95,17 +101,29 @@ export const useExamenStore = defineStore('examenStore', {
}, },
async responderPregunta(preguntaId, respuesta) { async responderPregunta(preguntaId, respuesta) {
try { try {
const { data } = await api.post(`/examen/pregunta/${preguntaId}/responder`, { respuesta }) const { data } = await api.post(
const index = this.preguntas.findIndex(p => p.id === preguntaId) `/examen/pregunta/${preguntaId}/responder`,
if (index !== -1) this.preguntas[index].respuesta = respuesta { respuesta }
return data )
} catch (e) {
this.error = e.response?.data?.message || e.message const index = this.preguntas.findIndex(p => p.id === preguntaId)
return { success: false, message: this.error }
} if (index !== -1 && data.success) {
}, this.preguntas[index].respuesta = respuesta
this.preguntas[index].es_correcta = data.correcta // 1, 0 o 2
this.preguntas[index].puntaje = data.puntaje
}
return data
} catch (e) {
this.error = e.response?.data?.message || e.message
return { success: false, message: this.error }
}
},
async finalizarExamen(examenId) { async finalizarExamen(examenId) {
try { try {

181
front/src/views/administrador/Procesos/CalificacionTest.vue
Unescape Escape View File

@ -0,0 +1,181 @@
<template>
<div class="page-wrapper">
<a-card :bordered="false" class="main-card">
<!-- Header -->
<div class="header">
<h2>Gestión de Calificaciones</h2>
<a-button type="primary" @click="openModal()">
Nueva Calificación
</a-button>
</div>
<!-- Tabla -->
<a-table
:columns="columns"
:data-source="calificaciones"
:loading="loading"
row-key="id"
bordered
>
<template #actions="{ record }">
<a-space>
<a-button type="link" @click="openModal(record)">
Editar
</a-button>
<a-popconfirm
title="¿Seguro de eliminar?"
@confirm="eliminar(record.id)"
>
<a-button type="link" danger>
Eliminar
</a-button>
</a-popconfirm>
</a-space>
</template>
</a-table>
</a-card>
<!-- Modal -->
<a-modal
v-model:open="modalVisible"
:title="form.id ? 'Editar Calificación' : 'Nueva Calificación'"
@ok="guardar"
@cancel="cerrarModal"
ok-text="Guardar"
>
<a-form layout="vertical">
<a-form-item label="Nombre">
<a-input v-model:value="form.nombre" />
</a-form-item>
<a-form-item label="Puntos Correcta">
<a-input-number v-model:value="form.puntos_correcta" style="width:100%" />
</a-form-item>
<a-form-item label="Puntos Incorrecta">
<a-input-number v-model:value="form.puntos_incorrecta" style="width:100%" />
</a-form-item>
<a-form-item label="Puntos Nula">
<a-input-number v-model:value="form.puntos_nula" style="width:100%" />
</a-form-item>
<a-form-item label="Puntaje Máximo">
<a-input-number v-model:value="form.puntaje_maximo" style="width:100%" />
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import api from '../../../axios'
const calificaciones = ref([])
const loading = ref(false)
const modalVisible = ref(false)
const form = ref({
id: null,
nombre: '',
puntos_correcta: 0,
puntos_incorrecta: 0,
puntos_nula: 0,
puntaje_maximo: 0
})
const columns = [
{ title: 'Nombre', dataIndex: 'nombre' },
{ title: 'Correcta', dataIndex: 'puntos_correcta' },
{ title: 'Incorrecta', dataIndex: 'puntos_incorrecta' },
{ title: 'Nula', dataIndex: 'puntos_nula' },
{ title: 'Máximo', dataIndex: 'puntaje_maximo' },
{ title: 'Acciones', key: 'actions', slots: { customRender: 'actions' } }
]
const cargar = async () => {
loading.value = true
try {
const { data } = await api .getAll()
calificaciones.value = data.data
} catch (error) {
message.error('Error al cargar')
} finally {
loading.value = false
}
}
const openModal = (record = null) => {
if (record) {
form.value = { ...record }
} else {
form.value = {
id: null,
nombre: '',
puntos_correcta: 0,
puntos_incorrecta: 0,
puntos_nula: 0,
puntaje_maximo: 0
}
}
modalVisible.value = true
}
const cerrarModal = () => {
modalVisible.value = false
}
const guardar = async () => {
try {
if (form.value.id) {
await api .update(form.value.id, form.value)
message.success('Actualizado correctamente')
} else {
await api .create(form.value)
message.success('Creado correctamente')
}
cerrarModal()
cargar()
} catch (error) {
message.error('Error al guardar')
}
}
const eliminar = async (id) => {
try {
await api .delete(id)
message.success('Eliminado correctamente')
cargar()
} catch (error) {
message.error('Error al eliminar')
}
}
onMounted(() => {
cargar()
})
</script>
<style scoped>
.page-wrapper {
padding: 24px;
}
.main-card {
border-radius: 12px;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
</style>

201
front/src/views/administrador/estudiantes/ListPostulantes.vue
Unescape Escape View File

@ -0,0 +1,201 @@
<template>
<div class="postulantes-container">
<!-- Header -->
<div class="header">
<div>
<h2 class="page-title">Gestión de Postulantes</h2>
<p class="page-subtitle">Administra los usuarios registrados</p>
</div>
<a-input-search
v-model:value="search"
placeholder="Buscar por nombre, email o DNI"
style="width: 300px"
@search="fetchPostulantes"
/>
</div>
<!-- Tabla -->
<a-card>
<a-table
:columns="columns"
:data-source="postulantes"
:loading="loading"
:pagination="pagination"
row-key="id"
@change="handleTableChange"
>
<template #bodyCell="{ column, record }">
<!-- Nombre -->
<template v-if="column.key === 'name'">
<strong>{{ record.name }}</strong>
</template>
<!-- Email -->
<template v-else-if="column.key === 'email'">
{{ record.email }}
</template>
<!-- DNI -->
<template v-else-if="column.key === 'dni'">
<a-tag color="blue">{{ record.dni }}</a-tag>
</template>
<!-- Última actividad -->
<template v-else-if="column.key === 'last_activity'">
{{ record.last_activity ?? 'Sin actividad' }}
</template>
<!-- Acciones -->
<template v-else-if="column.key === 'acciones'">
<a-space>
<a-button type="text" @click="editar(record)">
Editar
</a-button>
</a-space>
</template>
</template>
</a-table>
</a-card>
<!-- Modal Editar -->
<a-modal
v-model:open="showModal"
title="Editar Postulante"
@ok="guardarCambios"
@cancel="resetForm"
>
<a-form layout="vertical">
<a-form-item label="Nombre">
<a-input v-model:value="form.name" />
</a-form-item>
<a-form-item label="Email">
<a-input v-model:value="form.email" />
</a-form-item>
<a-form-item label="DNI">
<a-input v-model:value="form.dni" />
</a-form-item>
<a-form-item label="Nueva contraseña (opcional)">
<a-input-password v-model:value="form.password" />
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import api from '../../../axios'
const postulantes = ref([])
const loading = ref(false)
const search = ref('')
const showModal = ref(false)
const editingId = ref(null)
const pagination = reactive({
current: 1,
pageSize: 20,
total: 0
})
const form = reactive({
name: '',
email: '',
dni: '',
password: ''
})
const columns = [
{ title: 'Nombre', dataIndex: 'name', key: 'name' },
{ title: 'Email', dataIndex: 'email', key: 'email' },
{ title: 'DNI', dataIndex: 'dni', key: 'dni' },
{ title: 'Última actividad', dataIndex: 'last_activity', key: 'last_activity' },
{ title: 'Acciones', key: 'acciones', align: 'center' }
]
const fetchPostulantes = async () => {
loading.value = true
try {
const { data } = await api.get('/admin/postulantes', {
params: {
page: pagination.current,
buscar: search.value
}
})
postulantes.value = data.data.data
pagination.total = data.data.total
} catch (error) {
message.error('Error al cargar postulantes')
} finally {
loading.value = false
}
}
const editar = (record) => {
editingId.value = record.id
form.name = record.name
form.email = record.email
form.dni = record.dni
form.password = ''
showModal.value = true
}
const guardarCambios = async () => {
try {
await api.put(`/admin/postulantes/${editingId.value}`, form)
message.success('Postulante actualizado correctamente')
showModal.value = false
fetchPostulantes()
} catch (error) {
message.error(error.response?.data?.message || 'Error al actualizar')
}
}
const handleTableChange = (pag) => {
pagination.current = pag.current
fetchPostulantes()
}
const resetForm = () => {
showModal.value = false
editingId.value = null
}
onMounted(fetchPostulantes)
</script>
<style scoped>
.postulantes-container {
padding: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.page-title {
margin: 0;
font-size: 22px;
font-weight: 600;
}
.page-subtitle {
font-size: 14px;
color: #666;
}
</style>

17
front/src/views/administrador/layout/layout.vue
Unescape Escape View File

@ -24,9 +24,8 @@
</div> </div>
</div> </div>
<!-- Desktop Actions -->
<div class="header-right"> <div class="header-right">
<!-- Perfil -->
<a-dropdown :trigger="['click']" placement="bottomRight" class="profile-dropdown-wrapper"> <a-dropdown :trigger="['click']" placement="bottomRight" class="profile-dropdown-wrapper">
<div class="profile-trigger"> <div class="profile-trigger">
<div class="profile-info"> <div class="profile-info">
@ -138,8 +137,7 @@
<span class="menu-label">Dashboard</span> <span class="menu-label">Dashboard</span>
</div> </div>
</a-menu-item> </a-menu-item>
<!-- Gestión Académica -->
<div class="menu-section" v-if="!sidebarCollapsed"> <div class="menu-section" v-if="!sidebarCollapsed">
<div class="section-label">Gestión Académica</div> <div class="section-label">Gestión Académica</div>
</div> </div>
@ -199,6 +197,12 @@
<span class="menu-label">Reglas</span> <span class="menu-label">Reglas</span>
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item key="examenes-calificaciones-lista" class="menu-item">
<div class="menu-item-content">
<UnorderedListOutlined class="menu-icon" />
<span class="menu-label">Calificacion</span>
</div>
</a-menu-item>
</a-sub-menu> </a-sub-menu>
<a-sub-menu key="procesos" class="sub-menu"> <a-sub-menu key="procesos" class="sub-menu">
@ -413,14 +417,13 @@ const handleMenuSelect = ({ key }) => {
const routes = { const routes = {
'dashboard': { name: 'Dashboard' }, 'dashboard': { name: 'Dashboard' },
'estudiantes-lista': { name: 'AcademiaEstudiantes' }, 'estudiantes-lista': { name: 'PostulantesList' },
'estudiantes-nuevo': { name: 'AcademiaEstudianteNuevo' }, 'examenes-calificaciones-lista': { name: 'CalificacionList' },
'examenes-proceso-lista': { name: 'Procesos' }, 'examenes-proceso-lista': { name: 'Procesos' },
'examenes-area-lista': { name: 'Areas' }, 'examenes-area-lista': { name: 'Areas' },
'examenes-curso-lista': { name: 'Cursos' }, 'examenes-curso-lista': { name: 'Cursos' },
'examenes-reglas-lista': { name: 'Reglas' }, 'examenes-reglas-lista': { name: 'Reglas' },
'procesos-lista': { name: 'ProcesosAdmisionList' }, 'procesos-lista': { name: 'ProcesosAdmisionList' },
'lista-cursos': { name: 'AcademiaCursos' }, 'lista-cursos': { name: 'AcademiaCursos' },
'resultados': { name: 'AcademiaResultados' }, 'resultados': { name: 'AcademiaResultados' },

797
front/src/views/postulante/Dashboard.vue
Unescape Escape View File

@ -1,6 +1,185 @@
<template>
<a-spin :spinning="loading">
<div class="topbar">
<div class="topbarLeft">
<div class="hello">Bienvenido, {{ authStore.userName}}</div>
<div class="sub">DNI: {{ authStore.userDni || 'No registrado' }}</div>
</div>
<div class="topbarRight">
<div class="statusLine">
<span class="label">Estado:</span>
<a-badge :status="eligibilityUi.badge" :text="eligibilityUi.text" />
</div>
<a-button class="btnTop" @click="fetchDashboard" :loading="loading" block>
Actualizar
</a-button>
</div>
</div>
<a-divider />
<div class="testBox">
<div class="testHead">
<div class="testHeadLeft">
<div class="testTitle">Tu test de admisión</div>
<div class="testSub">
Responde con calma. Busca un lugar tranquilo. (10 preguntas • 10 min aprox.)
</div>
</div>
<div class="testHeadRight">
<a-button
type="primary"
size="large"
class="btnTest"
:disabled="!canStartTest"
block
@click="onStartTest"
>
{{ testCtaText }}
</a-button>
<div class="microHelp" v-if="!canStartTest">No disponible por el momento.</div>
</div>
</div>
<div class="testInfoGrid">
<div class="infoItem">
<div class="infoK">Estado</div>
<div class="infoV">
<a-badge :status="testStatusUi.badge" :text="testStatusUi.text" />
</div>
</div>
<div class="infoItem">
<div class="infoK">Tiempo restante</div>
<div class="infoV">
<span class="strong" :class="{ warn: expiresSoon && timeRemainingText !== 'Vencido' }">
{{ timeRemainingText }}
</span>
<span v-if="expiresSoon && timeRemainingText !== 'Vencido'" class="hintInline">
(vence pronto)
</span>
</div>
</div>
<div class="infoItem">
<div class="infoK">Disponible desde</div>
<div class="infoV">
{{ state.eligibility.testAvailableAt ? fmtDate(state.eligibility.testAvailableAt) : "—" }}
</div>
</div>
<div class="infoItem">
<div class="infoK">Fecha límite</div>
<div class="infoV">
{{ state.eligibility.testExpiresAt ? fmtDate(state.eligibility.testExpiresAt) : "—" }}
</div>
</div>
</div>
<div class="mt12">
<a-alert
v-if="state.eligibility.testStatus === 'COMPLETADO'"
type="success"
show-icon
message="¡Listo! Ya completaste el test."
description="Ahora puedes revisar los procesos disponibles."
/>
<a-alert
v-else-if="!state.eligibility.hasTestAssigned"
type="info"
show-icon
message="Aún no tienes un test asignado."
description="Vuelve a revisar en unos minutos."
/>
<a-alert
v-else
type="info"
show-icon
message="Importante"
description="Al iniciar o continuar, el tiempo puede comenzar a correr según la configuración del proceso."
/>
</div>
<a-alert
v-if="!state.eligibility.isEligibleToApply && state.eligibility.reasons?.length"
type="warning"
show-icon
message="Requisitos pendientes"
class="mt12"
>
<template #description>
<ul class="reasons">
<li v-for="(r, idx) in state.eligibility.reasons" :key="idx">{{ r }}</li>
</ul>
</template>
</a-alert>
</div>
<a-divider />
<a-divider />
<!-- Procesos -->
<div class="section">
<div class="sectionHead">
<div>
<div class="sectionTitle">Procesos disponibles</div>
<div class="sectionSub">Revisa fechas y postula cuando esté habilitado.</div>
</div>
</div>
<div class="tableWrap mt12">
<a-table
:columns="processColumns"
:data-source="state.availableProcesses"
row-key="id"
:pagination="{ pageSize: 6 }"
:scroll="{ x: 720 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'startDate'">
{{ fmtDate(record.startDate) }}
</template>
<template v-else-if="column.key === 'endDate'">
{{ fmtDate(record.endDate) }}
</template>
<template v-else-if="column.key === 'status'">
<a-tag class="chip">{{ record.status }}</a-tag>
</template>
<template v-else-if="column.key === 'actions'">
<div class="actions">
<a-button size="small" block @click="onViewProcess(record)">Ver</a-button>
<a-button size="small" type="primary" block :disabled="!record.canApply" @click="onApply(record)">
Postular
</a-button>
</div>
<div v-if="!record.canApply" class="microHelp">Este proceso aún no permite postular.</div>
</template>
</template>
</a-table>
</div>
</div>
<a-divider />
</a-spin>
</template>
<script setup> <script setup>
import { computed, onMounted, reactive, ref, onBeforeUnmount } from "vue"; import { computed, onMounted, reactive, ref, onBeforeUnmount } from "vue";
import { message, Modal } from "ant-design-vue"; import { message, Modal } from "ant-design-vue";
import { useAuthStore } from '../../store/postulanteStore'
const authStore = useAuthStore()
const loading = ref(false); const loading = ref(false);
const nowTick = ref(Date.now()); const nowTick = ref(Date.now());
@ -13,7 +192,7 @@ const state = reactive({
isEligibleToApply: false, isEligibleToApply: false,
reasons: [], reasons: [],
hasTestAssigned: true, hasTestAssigned: true,
testStatus: "PENDIENTE", // PENDIENTE | EN_PROGRESO | COMPLETADO | NO_DISPONIBLE testStatus: "PENDIENTE",
testAvailableAt: null, testAvailableAt: null,
testExpiresAt: null, testExpiresAt: null,
testUrl: null, testUrl: null,
@ -21,13 +200,10 @@ const state = reactive({
availableProcesses: [], availableProcesses: [],
}); });
/** ---------------------------
* Helpers tiempo (sin dayjs)
* --------------------------- */
function parseDate(val) { function parseDate(val) {
if (!val) return null; if (!val) return null;
// soporta "YYYY-MM-DD HH:mm" o ISO const iso = String(val).includes("T") ? String(val) : String(val).replace(" ", "T");
const iso = val.includes("T") ? val : val.replace(" ", "T");
const d = new Date(iso); const d = new Date(iso);
return isNaN(d.getTime()) ? null : d; return isNaN(d.getTime()) ? null : d;
} }
@ -41,36 +217,36 @@ function msToHuman(ms) {
if (h > 0) return `${h}h ${m}m`; if (h > 0) return `${h}h ${m}m`;
return `${m}m`; return `${m}m`;
} }
function fmtDate(val) {
const d = parseDate(val);
if (!d) return val || "—";
const dd = String(d.getDate()).padStart(2, "0");
const mm = String(d.getMonth() + 1).padStart(2, "0");
const yyyy = d.getFullYear();
const hh = String(d.getHours()).padStart(2, "0");
const mi = String(d.getMinutes()).padStart(2, "0");
return `${dd}/${mm}/${yyyy} ${hh}:${mi}`;
}
/** ---------------------------
* Computed
* --------------------------- */
const totalApplications = computed(() => state.applications.length);
const applicationsByStatus = computed(() => {
const map = {};
for (const a of state.applications) map[a.status] = (map[a.status] || 0) + 1;
return map;
});
const eligibilityTag = computed(() => { const eligibilityUi = computed(() => {
return state.eligibility.isEligibleToApply return state.eligibility.isEligibleToApply
? { color: "green", text: "Apto para postular" } ? { badge: "success", text: "Apto para postular" }
: { color: "red", text: "No apto para postular" }; : { badge: "error", text: "No apto para postular" };
}); });
const testStatusUi = computed(() => { const testStatusUi = computed(() => {
const s = state.eligibility.testStatus; const s = state.eligibility.testStatus;
if (s === "EN_PROGRESO") return { color: "blue", text: "En progreso" }; if (s === "EN_PROGRESO") return { badge: "processing", text: "En progreso" };
if (s === "COMPLETADO") return { color: "green", text: "Completado" }; if (s === "COMPLETADO") return { badge: "success", text: "Completado" };
if (s === "NO_DISPONIBLE") return { color: "default", text: "No disponible" }; if (s === "NO_DISPONIBLE") return { badge: "default", text: "No disponible" };
return { color: "orange", text: "Pendiente" }; return { badge: "warning", text: "Pendiente" };
}); });
const testCtaText = computed(() => { const testCtaText = computed(() => {
const s = state.eligibility.testStatus; const s = state.eligibility.testStatus;
if (s === "EN_PROGRESO") return "Continuar test"; if (s === "EN_PROGRESO") return "Continuar test";
if (s === "COMPLETADO") return "Test completado"; if (s === "COMPLETADO") return "Ver estado";
if (s === "NO_DISPONIBLE") return "No disponible"; if (s === "NO_DISPONIBLE") return "No disponible";
return "Iniciar test"; return "Iniciar test";
}); });
@ -90,29 +266,34 @@ const testExpireMs = computed(() => {
}); });
const expiresSoon = computed(() => { const expiresSoon = computed(() => {
// “pronto” si queda <= 24h
const ms = testExpireMs.value; const ms = testExpireMs.value;
return ms !== null && ms > 0 && ms <= 24 * 60 * 60 * 1000; return ms !== null && ms > 0 && ms <= 24 * 60 * 60 * 1000;
}); });
const processColumns = [ const timeRemainingText = computed(() => {
{ title: "Proceso", dataIndex: "name", key: "name" }, const ms = testExpireMs.value;
{ title: "Inicio", dataIndex: "startDate", key: "startDate", width: 140 }, if (ms === null) return "—";
{ title: "Fin", dataIndex: "endDate", key: "endDate", width: 140 }, if (ms <= 0) return "Vencido";
{ title: "Estado", dataIndex: "status", key: "status", width: 120 }, return msToHuman(ms);
{ title: "Vacantes", dataIndex: "vacancies", key: "vacancies", width: 110 }, });
{ title: "Acciones", key: "actions", width: 220 },
];
const processColumns = computed(() => [
{ title: "Proceso", dataIndex: "name", key: "name", ellipsis: true },
{ title: "Inicio", dataIndex: "startDate", key: "startDate", responsive: ["md"] },
{ title: "Fin", dataIndex: "endDate", key: "endDate", responsive: ["md"] },
{ title: "Estado", dataIndex: "status", key: "status", responsive: ["sm"] },
{ title: "Vacantes", dataIndex: "vacancies", key: "vacancies", responsive: ["sm"] },
{ title: "Acciones", key: "actions" },
]);
/** ---------------------------
* API (reemplaza por tus endpoints)
* --------------------------- */
const api = { const api = {
async getDashboard() { async getDashboard() {
return new Promise((resolve) => { return new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
resolve({ resolve({
applicant: { id: 7, nombres: "Juan Pérez", documento: "DNI 12345678" },
applications: [ applications: [
{ id: 1, processName: "Admisión 2025-II", status: "NO_APTO", createdAt: "2025-09-05" }, { id: 1, processName: "Admisión 2025-II", status: "NO_APTO", createdAt: "2025-09-05" },
{ id: 2, processName: "Admisión 2026-I", status: "EN_REVISION", createdAt: "2026-02-03" }, { id: 2, processName: "Admisión 2026-I", status: "EN_REVISION", createdAt: "2026-02-03" },
@ -125,7 +306,7 @@ const api = {
testStatus: "PENDIENTE", testStatus: "PENDIENTE",
testAvailableAt: "2026-02-10 09:00", testAvailableAt: "2026-02-10 09:00",
testExpiresAt: "2026-02-20 23:59", testExpiresAt: "2026-02-20 23:59",
testUrl: "/postulante/test", testUrl: "portal-postulante/test",
}, },
availableProcesses: [ availableProcesses: [
{ id: 10, name: "Admisión 2026-I", startDate: "2026-02-01", endDate: "2026-02-20", status: "ABIERTO", vacancies: 120, canApply: true }, { id: 10, name: "Admisión 2026-I", startDate: "2026-02-01", endDate: "2026-02-20", status: "ABIERTO", vacancies: 120, canApply: true },
@ -167,12 +348,11 @@ async function onStartTest() {
Modal.confirm({ Modal.confirm({
title: "Test de Admisión", title: "Test de Admisión",
content: "Al iniciar o continuar, el tiempo puede comenzar a correr según la configuración. ¿Deseas continuar?", content: "Al iniciar o continuar, el tiempo puede comenzar a correr según la configuración. ¿Deseas continuar?",
okText: "Sí", okText: "Continuar",
cancelText: "Cancelar", cancelText: "Cancelar",
async onOk() { async onOk() {
try { try {
await api.startTest(); await api.startTest();
message.success("Listo.");
if (state.eligibility.testUrl) window.location.href = state.eligibility.testUrl; if (state.eligibility.testUrl) window.location.href = state.eligibility.testUrl;
} catch { } catch {
message.error("No se pudo iniciar el test."); message.error("No se pudo iniciar el test.");
@ -183,6 +363,7 @@ async function onStartTest() {
async function onApply(process) { async function onApply(process) {
if (!process.canApply) return; if (!process.canApply) return;
Modal.confirm({ Modal.confirm({
title: "Confirmar postulación", title: "Confirmar postulación",
content: `¿Deseas postular al proceso "${process.name}"?`, content: `¿Deseas postular al proceso "${process.name}"?`,
@ -214,396 +395,270 @@ onBeforeUnmount(() => {
}); });
</script> </script>
<template>
<a-spin :spinning="loading">
<a-space direction="vertical" size="large" style="width: 100%">
<!-- Encabezado del postulante -->
<a-card class="soft-card">
<div class="header-row">
<div>
<div class="h-title">Bienvenido, {{ state.applicant.nombres }}</div>
<div class="h-sub">{{ state.applicant.documento }}</div>
</div>
<div class="header-actions">
<a-tag :color="eligibilityTag.color" class="pill-tag">{{ eligibilityTag.text }}</a-tag>
</div>
</div>
<a-alert
v-if="!state.eligibility.isEligibleToApply && state.eligibility.reasons?.length"
type="warning"
show-icon
message="Requisitos pendientes"
style="margin-top: 14px"
>
<template #description>
<ul style="margin: 8px 0 0 18px">
<li v-for="(r, idx) in state.eligibility.reasons" :key="idx">{{ r }}</li>
</ul>
</template>
</a-alert>
</a-card>
<!-- ✅ HERO: TEST DE ADMISIÓN (MUY RESALTADO) -->
<a-badge-ribbon
:text="state.eligibility.testStatus === 'COMPLETADO' ? 'LISTO' : 'IMPORTANTE'"
:color="state.eligibility.testStatus === 'COMPLETADO' ? 'green' : 'red'"
>
<a-card class="test-hero" :bordered="false">
<div class="test-grid">
<div>
<div class="test-kicker">Test de admisión</div>
<div class="test-title">Tu evaluación está aquí</div>
<div class="test-meta"> <style scoped>
<a-tag :color="testStatusUi.color" class="pill-tag">
Estado: {{ testStatusUi.text }}
</a-tag>
<a-tag v-if="expiresSoon" color="volcano" class="pill-tag">
Vence pronto: {{ msToHuman(testExpireMs || 0) }}
</a-tag>
<a-tag v-else-if="testExpireMs !== null && testExpireMs > 0" color="blue" class="pill-tag">
Tiempo restante: {{ msToHuman(testExpireMs) }}
</a-tag>
</div>
<div class="test-dates" v-if="state.eligibility.testAvailableAt || state.eligibility.testExpiresAt">
<div v-if="state.eligibility.testAvailableAt">
<span class="muted">Disponible desde:</span> <b>{{ state.eligibility.testAvailableAt }}</b>
</div>
<div v-if="state.eligibility.testExpiresAt">
<span class="muted">Fecha límite:</span> <b>{{ state.eligibility.testExpiresAt }}</b>
</div>
</div>
<a-alert
v-if="state.eligibility.testStatus === 'COMPLETADO'"
type="success"
show-icon
message="Tu test ya fue completado. ¡Bien!"
style="margin-top: 12px"
/>
<a-alert
v-else-if="!state.eligibility.hasTestAssigned"
type="info"
show-icon
message="Aún no tienes un test asignado."
style="margin-top: 12px"
/>
<a-alert
v-else-if="!state.eligibility.isEligibleToApply"
type="warning"
show-icon
message="No estás apto para postular por ahora. Revisa los requisitos pendientes."
style="margin-top: 12px"
/>
</div>
<div class="test-cta">
<div class="cta-box">
<div class="cta-label">Acción</div>
<a-button
type="primary"
size="large"
block
class="cta-btn"
:disabled="!canStartTest"
@click="onStartTest"
>
{{ testCtaText }}
</a-button>
<div class="cta-hint" v-if="canStartTest">
Entra cuando estés listo. Si estás en progreso, puedes continuar.
</div>
<div class="cta-hint" v-else>
No disponible por el momento.
</div>
<a-divider style="margin: 14px 0" />
<div class="cta-stats">
<div class="stat">
<div class="stat-num">{{ totalApplications }}</div>
<div class="stat-txt">Postulaciones</div>
</div>
<div class="stat">
<div class="stat-num">
{{ state.eligibility.isEligibleToApply ? "Sí" : "No" }}
</div>
<div class="stat-txt">Apto</div>
</div>
</div>
</div>
</div>
</div>
</a-card>
</a-badge-ribbon>
<!-- KPIs secundarios (más limpios) -->
<a-row :gutter="[16, 16]">
<a-col :xs="24" :md="12">
<a-card class="soft-card" title="Resumen de postulaciones">
<div class="kpi-row">
<div class="kpi">
<div class="kpi-label">Veces que postuló</div>
<div class="kpi-value">{{ totalApplications }}</div>
</div>
<div class="kpi-tags">
<a-tag v-for="(v, k) in applicationsByStatus" :key="k">
{{ k }}: <b>{{ v }}</b>
</a-tag>
<a-tag v-if="!Object.keys(applicationsByStatus).length">Sin registros</a-tag>
</div>
</div>
</a-card>
</a-col>
<a-col :xs="24" :md="12">
<a-card class="soft-card" title="Estado del postulante">
<a-descriptions :column="1" size="small" bordered>
<a-descriptions-item label="Aptitud">
<a-tag :color="eligibilityTag.color" class="pill-tag">{{ eligibilityTag.text }}</a-tag>
</a-descriptions-item>
<a-descriptions-item label="Test">
<a-tag :color="testStatusUi.color" class="pill-tag">{{ testStatusUi.text }}</a-tag>
</a-descriptions-item>
</a-descriptions>
</a-card>
</a-col>
</a-row>
<!-- Procesos disponibles -->
<a-card class="soft-card" title="Procesos disponibles">
<a-table
:columns="processColumns"
:data-source="state.availableProcesses"
row-key="id"
:pagination="{ pageSize: 6 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<a-tag :color="record.status === 'ABIERTO' ? 'green' : record.status === 'PRONTO' ? 'blue' : 'default'">
{{ record.status }}
</a-tag>
</template>
<template v-else-if="column.key === 'actions'"> .page {
<a-space> width: 100%;
<a-button @click="onViewProcess(record)">Ver</a-button> padding: 12px;
<a-button }
type="primary"
:disabled="!record.canApply || !state.eligibility.isEligibleToApply"
@click="onApply(record)"
>
Postular
</a-button>
</a-space>
<div v-if="!state.eligibility.isEligibleToApply" class="mini-help">
Debes estar apto para postular.
</div>
</template>
</template>
</a-table>
</a-card>
<!-- Historial -->
<a-card class="soft-card" title="Historial de postulaciones">
<a-list
:data-source="state.applications"
:locale="{ emptyText: 'Aún no tienes postulaciones registradas.' }"
>
<template #renderItem="{ item }">
<a-list-item class="list-item">
<a-list-item-meta>
<template #title>
<div class="list-title">
<span class="list-title-text">{{ item.processName }}</span>
<a-tag>{{ item.status }}</a-tag>
</div>
</template>
<template #description>
<span class="muted">Postuló el:</span> {{ item.createdAt }}
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</a-card>
</a-space>
</a-spin>
</template>
<style scoped> .pageCard {
/* Cards */ max-width: 1120px;
.soft-card { margin: 0 auto;
border-radius: 14px; border-radius: 14px;
} }
.pill-tag {
border-radius: 999px;
padding: 4px 10px;
font-weight: 600;
}
/* Header */ /* Header */
.header-row { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 14px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: flex-start;
} }
.h-title {
font-size: 18px; .hello {
font-weight: 700; font-size: 24px;
font-weight: 800;
color: var(--ant-colorTextHeading, #111827);
} }
.h-sub { .sub {
opacity: 0.75;
margin-top: 4px; margin-top: 4px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
} }
.header-actions {
.topbarRight {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 10px; gap: 10px;
align-items: flex-end;
min-width: 260px;
} }
.statusLine {
/* TEST HERO */ display: flex;
.test-hero { gap: 8px;
border-radius: 18px; align-items: center;
overflow: hidden; flex-wrap: wrap;
background: linear-gradient(135deg, rgba(24, 144, 255, 0.14), rgba(82, 196, 26, 0.10));
}
.test-grid {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 16px;
} }
@media (max-width: 992px) { .label {
.test-grid { font-size: 12px;
grid-template-columns: 1fr; color: var(--ant-colorTextSecondary, #6b7280);
}
} }
.test-kicker { .btnTop {
font-weight: 700; min-width: 180px;
letter-spacing: 0.2px;
opacity: 0.85;
} }
.test-title {
font-size: 26px; /* TEST destacado (sin degradado) */
font-weight: 800; .testBox {
margin-top: 6px; border: 2px solid var(--ant-colorPrimary, #1677ff);
line-height: 1.15; background: var(--ant-colorBgContainer, #fff);
border-radius: 12px;
padding: 16px;
} }
.test-meta {
margin-top: 12px; .testHead {
display: flex; display: flex;
gap: 8px; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
flex-wrap: wrap; /* ✅ clave para móvil */
align-items: flex-start;
} }
.test-dates {
margin-top: 10px; .testTitle {
display: grid; font-size: 20px;
gap: 6px; font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
} }
.muted { .testSub {
opacity: 0.75; margin-top: 4px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
line-height: 1.4;
} }
/* CTA box */ .testHeadRight {
.test-cta { min-width: 260px;
display: flex; display: flex;
align-items: stretch; flex-direction: column;
gap: 6px;
align-items: flex-end;
} }
.cta-box {
width: 100%; .btnTest {
background: rgba(255, 255, 255, 0.75); height: 44px;
border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px;
border-radius: 16px; font-weight: 800;
padding: 16px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
} }
.cta-label {
font-weight: 700; .testInfoGrid {
opacity: 0.85; margin-top: 12px;
margin-bottom: 10px; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
} }
.cta-btn {
height: 44px; .infoItem {
border-radius: 12px; border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 10px;
padding: 10px 12px;
min-width: 0;
}
.infoK {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
}
.infoV {
margin-top: 4px;
font-weight: 800; font-weight: 800;
color: var(--ant-colorText, #111827);
word-break: break-word;
} }
.cta-hint {
margin-top: 10px; .strong { font-weight: 900; }
.warn { color: var(--ant-colorTextHeading, #111827); }
.hintInline {
margin-left: 6px;
font-size: 12px; font-size: 12px;
opacity: 0.75; color: var(--ant-colorTextSecondary, #6b7280);
line-height: 1.35; }
.reasons {
margin: 8px 0 0 18px;
line-height: 1.7;
}
.summaryBox {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 12px;
padding: 14px;
}
.summaryTitle {
font-weight: 800;
color: var(--ant-colorTextHeading, #111827);
margin-bottom: 10px;
} }
.cta-stats { .summaryGrid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 2fr;
gap: 12px; gap: 12px;
} }
.stat { .summaryK {
border-radius: 12px; font-size: 12px;
padding: 10px 12px; color: var(--ant-colorTextSecondary, #6b7280);
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.05);
} }
.stat-num { .summaryV {
font-size: 18px;
font-weight: 900; font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
} }
.stat-txt { .chips {
font-size: 12px; display: flex;
opacity: 0.75; gap: 8px;
flex-wrap: wrap;
} }
.chip {
/* KPI */ border-radius: 999px;
.kpi-row {
display: grid;
gap: 10px;
} }
.kpi {
/* Secciones */
.sectionHead {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline;
gap: 12px; gap: 12px;
flex-wrap: wrap;
align-items: flex-start;
} }
.kpi-label { .sectionTitle {
opacity: 0.75; font-size: 20px;
font-weight: 800;
color: var(--ant-colorTextHeading, #111827);
} }
.kpi-value { .sectionSub {
font-size: 26px; margin-top: 4px;
font-weight: 900; font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
} }
.kpi-tags {
display: flex; /* Tabla: evita romper en móvil */
.tableWrap {
width: 100%;
overflow-x: auto;
}
:deep(.ant-table-container) {
overflow-x: auto;
}
/* Acciones: en móvil se apilan */
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px; gap: 8px;
flex-wrap: wrap; }
.microHelp {
margin-top: 6px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
} }
/* List */ .listItem {
.list-item { padding-left: 0;
border-radius: 12px; padding-right: 0;
} }
.list-title { .listTitle {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
.list-title-text { .listName {
font-weight: 700; font-weight: 700;
} }
.mini-help { .muted {
margin-top: 6px; color: var(--ant-colorTextSecondary, #6b7280);
font-size: 12px; }
opacity: 0.7;
.mt12 { margin-top: 12px; }
/* ✅ Breakpoints reales */
@media (max-width: 768px) {
.page { padding: 8px; }
.topbarRight {
width: 100%;
min-width: 0;
align-items: stretch;
}
.btnTop {
width: 100%;
min-width: 0;
}
.testHeadRight {
width: 100%;
min-width: 0;
align-items: stretch;
}
.testInfoGrid {
grid-template-columns: 1fr; /* ✅ cards info en columna */
}
.summaryGrid {
grid-template-columns: 1fr; /* ✅ resumen en columna */
}
.actions {
grid-template-columns: 1fr; /* ✅ botones uno debajo del otro */
}
}
@media (max-width: 480px) {
.testBox { padding: 12px; }
.testTitle { font-size: 16px; }
} }
</style> </style>

439
front/src/views/postulante/MisProcesos.vue
Unescape Escape View File

@ -1,222 +1,389 @@
<template> <template>
<a-card class="procesos-card" :bordered="false"> <a-card class="card" :bordered="true">
<template #title> <template #title>
<div class="card-title"> <div class="header">
<div class="title-left"> <div class="headerLeft">
<div class="title-main">Mis procesos de admisión</div> <div class="title">Mis procesos de admisión</div>
<div class="title-sub">Resultados registrados por DNI</div> <div class="subtitle">Resultados registrados por DNI</div>
</div> </div>
<div class="title-right"> <div class="headerRight">
<a-space> <a-button @click="obtenerProcesos" :loading="loading" class="btn" block>
<a-button @click="obtenerProcesos" :loading="loading">Actualizar</a-button> Actualizar
</a-space> </a-button>
</div> </div>
</div> </div>
</template> </template>
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<div class="top-summary"> <!-- Top tools -->
<a-alert v-if="!loading" type="info" show-icon class="summary-alert"> <div class="tools">
Total de procesos: <strong>{{ procesos.length }}</strong> <div class="counter">
</a-alert> <span class="counterLabel">Total</span>
<span class="counterValue">{{ procesosFiltrados.length }}</span>
</div>
<a-input <a-input
v-model:value="search" v-model:value="search"
allow-clear allow-clear
placeholder="Buscar por nombre de proceso..." placeholder="Buscar por nombre de proceso…"
class="search-input" class="search"
/> />
</div> </div>
<a-table <!-- Desktop/tablet: tabla -->
class="procesos-table" <div v-if="!isMobile" class="tableWrap">
:dataSource="procesosFiltrados" <a-table
:columns="columns" class="table"
rowKey="id" :dataSource="procesosFiltrados"
:pagination="{ pageSize: 7, showSizeChanger: false }" :columns="columns"
:scroll="{ x: 900 }" rowKey="id"
> :pagination="{ pageSize: 7, showSizeChanger: false }"
<template #bodyCell="{ column, record }"> :scroll="{ x: 900 }"
<!-- Nombre --> >
<template v-if="column.key === 'nombre'"> <template #bodyCell="{ column, record }">
<div class="nombre"> <template v-if="column.key === 'nombre'">
{{ record.nombre || '-' }} <div class="nombre">{{ record.nombre || "-" }}</div>
</div> <div class="meta">ID: {{ record.id }}</div>
</template> </template>
<!-- Puntaje --> <template v-else-if="column.key === 'puntaje'">
<template v-else-if="column.key === 'puntaje'"> <div class="puntaje">{{ record.puntaje ?? "-" }}</div>
<span class="puntaje"> <div class="meta">Puntaje</div>
{{ record.puntaje ?? '-' }} </template>
</span>
</template> <template v-else-if="column.key === 'apto'">
<span class="statusPill" :class="statusClass(record.apto)">
{{ aptoTexto(record.apto) }}
</span>
</template>
<!-- Apto --> <template v-else-if="column.key === 'acciones'">
<template v-else-if="column.key === 'apto'"> <a-space>
<a-tag :color="aptoColor(record.apto)" class="tag-pill"> <a-button size="small" @click="verDetalle(record)">Ver detalle</a-button>
{{ aptoTexto(record.apto) }} </a-space>
</a-tag> </template>
</template> </template>
<!-- Acciones --> <template #emptyText>
<template v-else-if="column.key === 'acciones'"> <a-empty description="No se encontraron procesos" />
<a-space>
<a-button size="small" @click="verDetalle(record)">Ver detalle</a-button>
</a-space>
</template> </template>
</template> </a-table>
</div>
<!-- Mobile: cards -->
<div v-else class="cards">
<template v-if="procesosFiltrados.length">
<div v-for="p in procesosFiltrados" :key="p.id" class="itemCard">
<div class="itemTop">
<div class="itemTitle">{{ p.nombre || "-" }}</div>
<span class="statusPill" :class="statusClass(p.apto)">
{{ aptoTexto(p.apto) }}
</span>
</div>
<template #emptyText> <div class="itemGrid">
<a-empty description="No se encontraron procesos" /> <div class="kv">
<div class="k">Puntaje</div>
<div class="v strong">{{ p.puntaje ?? "-" }}</div>
</div>
<div class="kv">
<div class="k">ID</div>
<div class="v">{{ p.id }}</div>
</div>
</div>
<div class="itemActions">
<a-button type="primary" class="btnPrimary" block @click="verDetalle(p)">
Ver detalle
</a-button>
</div>
</div>
</template> </template>
</a-table>
<a-empty v-else description="No se encontraron procesos" />
</div>
</a-spin> </a-spin>
</a-card> </a-card>
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { message } from 'ant-design-vue' import { message } from "ant-design-vue";
import api from '../../axiosPostulante' // ✅ ajusta la ruta a tu axios import api from "../../axiosPostulante";
const procesos = ref([]) const procesos = ref([]);
const loading = ref(false) const loading = ref(false);
const search = ref('') const search = ref("");
const columns = [ const columns = [
{ title: 'Proceso', dataIndex: 'nombre', key: 'nombre', width: 420 }, { title: "Proceso", dataIndex: "nombre", key: "nombre", width: 420 },
{ title: 'Puntaje', dataIndex: 'puntaje', key: 'puntaje', width: 140 }, { title: "Puntaje", dataIndex: "puntaje", key: "puntaje", width: 140 },
{ title: 'Estado', dataIndex: 'apto', key: 'apto', width: 160 }, { title: "Estado", dataIndex: "apto", key: "apto", width: 160 },
{ title: 'Acciones', key: 'acciones', width: 160 } { title: "Acciones", key: "acciones", width: 160 },
] ];
const obtenerProcesos = async () => { const obtenerProcesos = async () => {
loading.value = true loading.value = true;
try { try {
// ✅ Ruta: crea una ruta GET que apunte a misProcesos() const { data } = await api.get("/postulante/mis-procesos");
// Ejemplo: Route::get('/postulante/mis-procesos', ...)
const { data } = await api.get('/postulante/mis-procesos')
if (data?.success) { if (data?.success) {
procesos.value = Array.isArray(data.data) ? data.data : [] procesos.value = Array.isArray(data.data) ? data.data : [];
} else { } else {
message.error('No se pudieron obtener los procesos') message.error("No se pudieron obtener los procesos");
} }
} catch (e) { } catch (e) {
console.error(e) console.error(e);
message.error(e.response?.data?.message || 'Error al cargar procesos') message.error(e.response?.data?.message || "Error al cargar procesos");
} finally { } finally {
loading.value = false loading.value = false;
} }
} };
const aptoTexto = (apto) => { const aptoTexto = (apto) => {
// en DB puede venir 1/0, true/false, "1"/"0" if (apto === 1 || apto === true || apto === "1") return "APTO";
if (apto === 1 || apto === true || apto === '1') return 'APTO' if (apto === 0 || apto === false || apto === "0") return "NO APTO";
if (apto === 0 || apto === false || apto === '0') return 'NO APTO' return String(apto ?? "-").toUpperCase();
return String(apto ?? '-').toUpperCase() };
}
const aptoColor = (apto) => { /** ✅ Un solo color: no usamos verde/rojo; solo estilos neutros + primary sutil */
if (apto === 1 || apto === true || apto === '1') return 'green' const statusClass = (apto) => {
if (apto === 0 || apto === false || apto === '0') return 'red' if (apto === 1 || apto === true || apto === "1") return "ok";
return 'default' if (apto === 0 || apto === false || apto === "0") return "bad";
} return "neutral";
};
const procesosFiltrados = computed(() => { const procesosFiltrados = computed(() => {
const q = search.value.trim().toLowerCase() const q = search.value.trim().toLowerCase();
if (!q) return procesos.value if (!q) return procesos.value;
return procesos.value.filter(p => return procesos.value.filter((p) => String(p.nombre || "").toLowerCase().includes(q));
String(p.nombre || '').toLowerCase().includes(q) });
)
})
const verDetalle = (record) => { const verDetalle = (record) => {
// ✅ Aquí puedes navegar a otra vista si tienes ruta message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? "-"}`);
// router.push({ name: 'DetalleProceso', params: { procesoId: record.id } }) };
message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? '-'}`)
/* ✅ Responsive real: detecta móvil para cambiar a cards */
const isMobile = ref(false);
let mq = null;
function setMobile() {
isMobile.value = window.matchMedia("(max-width: 640px)").matches;
} }
onMounted(() => { onMounted(() => {
obtenerProcesos() obtenerProcesos();
}) mq = window.matchMedia("(max-width: 640px)");
setMobile();
// addEventListener es lo moderno; fallback por compatibilidad
if (mq.addEventListener) mq.addEventListener("change", setMobile);
else mq.addListener(setMobile);
});
onBeforeUnmount(() => {
if (!mq) return;
if (mq.removeEventListener) mq.removeEventListener("change", setMobile);
else mq.removeListener(setMobile);
});
</script> </script>
<style scoped> <style scoped>
.procesos-card { /* =========================
Base (formal 17+, sin degradados)
1 color acento: primary
========================= */
.card {
max-width: 1100px; max-width: 1100px;
margin: 20px auto; margin: 16px auto;
border-radius: 18px; border-radius: 14px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
background: #fff;
} }
.card-title { /* Header */
.header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; }
.headerLeft {
min-width: 240px;
}
.title {
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
font-size: 16px;
}
.subtitle {
margin-top: 4px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
}
.headerRight {
min-width: 180px;
display: flex;
justify-content: flex-end;
}
.btn {
border-radius: 10px;
} }
.title-left { /* Tools */
.tools {
display: grid;
grid-template-columns: 220px 1fr;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.counter {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 12px;
padding: 10px 12px;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
gap: 4px; align-items: baseline;
}
.counterLabel {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
font-weight: 700;
}
.counterValue {
font-size: 18px;
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
}
.search {
border-radius: 12px;
} }
.title-main { /* Table */
.tableWrap {
border-radius: 12px;
overflow: hidden;
}
.table :deep(.ant-table) {
border-radius: 12px;
overflow: hidden;
}
.nombre {
font-weight: 800;
color: var(--ant-colorTextHeading, #111827);
}
.puntaje {
font-weight: 900; font-weight: 900;
font-size: 18px; color: var(--ant-colorPrimary, #1677ff); /* ✅ único acento */
color: #111827; }
.meta {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
margin-top: 2px;
} }
.title-sub { /* Status pill (sin verde/rojo) */
font-weight: 650; .statusPill {
color: #6b7280; display: inline-flex;
font-size: 13px; align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorFillAlter, #fafafa);
color: var(--ant-colorTextHeading, #111827);
}
.statusPill.ok {
border-color: rgba(22,119,255,.35);
background: rgba(22,119,255,.08);
}
.statusPill.bad {
border-color: rgba(0,0,0,.10);
background: rgba(0,0,0,.04);
}
.statusPill.neutral {
opacity: .85;
} }
.top-summary { /* Mobile cards */
display: flex; .cards {
display: grid;
gap: 12px; gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 14px;
} }
.summary-alert { .itemCard {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorBgContainer, #fff);
border-radius: 14px; border-radius: 14px;
margin: 0; padding: 12px;
flex: 1;
min-width: 280px;
} }
.search-input { .itemTop {
max-width: 360px; display: flex;
border-radius: 12px; justify-content: space-between;
gap: 10px;
align-items: flex-start;
flex-wrap: wrap;
} }
.nombre { .itemTitle {
font-weight: 850; font-weight: 900;
color: #111827; color: var(--ant-colorTextHeading, #111827);
line-height: 1.2;
} }
.puntaje { .itemGrid {
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.kv {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 12px;
padding: 10px 12px;
}
.k {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
font-weight: 700;
}
.v {
margin-top: 4px;
font-weight: 900; font-weight: 900;
color: #1677ff; color: var(--ant-colorTextHeading, #111827);
}
.v.strong {
color: var(--ant-colorPrimary, #1677ff);
} }
.tag-pill { .itemActions {
border-radius: 999px; margin-top: 12px;
font-weight: 800; }
padding: 2px 10px; .btnPrimary {
height: 42px;
border-radius: 12px;
font-weight: 900;
} }
.procesos-table :deep(.ant-table) { /* Responsive tools */
border-radius: 14px; @media (max-width: 640px) {
overflow: hidden; .card {
margin: 0;
border-radius: 0;
}
.headerRight {
width: 100%;
min-width: 0;
}
.tools {
grid-template-columns: 1fr;
}
.itemGrid {
grid-template-columns: 1fr;
}
} }
</style> </style>

581
front/src/views/postulante/Pagos.vue
Unescape Escape View File

@ -1,202 +1,190 @@
<template> <template>
<a-card class="pagos-card" :bordered="false"> <a-card class="card" :bordered="true">
<template #title> <template #title>
<div class="card-title"> <div class="header">
<div class="title-left"> <div class="headerLeft">
<div class="title-main">Mis Pagos Realizados</div> <div class="title">Mis pagos realizados</div>
<div class="title-sub">Historial de pagos registrados en el sistema</div> <div class="subtitle">Historial de pagos registrados en el sistema</div>
</div> </div>
<div class="title-right"> <div class="headerRight">
<a-space> <a-button @click="obtenerPagos" :loading="loading" class="btn" block>
<a-button @click="obtenerPagos" :loading="loading">Actualizar</a-button> Actualizar
</a-space> </a-button>
</div> </div>
</div> </div>
</template> </template>
<!-- Loading -->
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<!-- Resumen superior --> <!-- Tools -->
<div class="top-summary"> <div class="tools">
<a-alert type="info" show-icon class="summary-alert"> <div class="counter">
Total de pagos encontrados: <strong>{{ pagos.length }}</strong> <span class="counterLabel">Total</span>
</a-alert> <span class="counterValue">{{ pagosFiltrados.length }}</span>
</div>
<a-input <a-input
v-model:value="search" v-model:value="search"
allow-clear allow-clear
placeholder="Buscar por código, uso/proceso o tipo..." placeholder="Buscar por código, uso/proceso o tipo…"
class="search-input" class="search"
/> />
</div> </div>
<!-- Tabla --> <!-- Desktop/tablet: tabla -->
<a-table <div v-if="!isMobile" class="tableWrap">
class="pagos-table" <a-table
:dataSource="pagosFiltrados" class="table"
:columns="columns" :dataSource="pagosFiltrados"
rowKey="key" :columns="columns"
:pagination="{ pageSize: 6, showSizeChanger: false }" rowKey="key"
:scroll="{ x: 900 }" :pagination="{ pageSize: 6, showSizeChanger: false }"
> :scroll="{ x: 900 }"
<template #bodyCell="{ column, record }"> >
<!-- Tipo --> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'tipo'"> <template v-if="column.key === 'tipo'">
<a-tag :color="getColor(record.tipo)" class="tag-pill"> <span class="pill pill--neutral">{{ tipoLabel(record.tipo) }}</span>
{{ tipoLabel(record.tipo) }} </template>
</a-tag>
<template v-else-if="column.key === 'codigo'">
<div class="codigoCell">
<div class="codigo">{{ record.codigo || "-" }}</div>
<span v-if="record.estado" class="pill pill--soft">{{ record.estado }}</span>
</div>
</template>
<template v-else-if="column.key === 'uso'">
<div class="usoCell">
<div class="usoMain">{{ getUso(record) }}</div>
<div v-if="record.proceso_nombre || record.proceso" class="usoSub">
{{ record.proceso_nombre || record.proceso }}
</div>
</div>
</template>
<template v-else-if="column.key === 'monto'">
<div class="monto">S/ {{ Number(record.monto || 0).toFixed(2) }}</div>
</template>
<template v-else-if="column.key === 'fecha_pago'">
<div class="fecha">{{ formatFecha(record.fecha_pago) }}</div>
</template>
</template> </template>
<!-- Código --> <template #emptyText>
<template v-else-if="column.key === 'codigo'"> <a-empty description="No se encontraron pagos" />
<div class="codigo-cell">
<span class="codigo">{{ record.codigo || '-' }}</span>
<a-tag v-if="record.estado" color="default" class="tag-mini">
{{ record.estado }}
</a-tag>
</div>
</template> </template>
</a-table>
</div>
<!-- Uso / Proceso --> <!-- Mobile: cards -->
<template v-else-if="column.key === 'uso'"> <div v-else class="cards">
<div class="uso-cell"> <template v-if="pagosFiltrados.length">
<div class="uso-main"> <div v-for="p in pagosFiltrados" :key="p.key" class="itemCard">
{{ getUso(record) }} <div class="itemTop">
</div> <div class="itemLeft">
<div v-if="record.proceso_nombre || record.proceso" class="uso-sub"> <div class="itemTitle">{{ getUso(p) }}</div>
{{ record.proceso_nombre || record.proceso }} <div class="itemSub" v-if="p.proceso_nombre || p.proceso">
{{ p.proceso_nombre || p.proceso }}
</div>
</div> </div>
<span class="pill pill--neutral">{{ tipoLabel(p.tipo) }}</span>
</div> </div>
</template>
<!-- Monto --> <div class="grid">
<template v-else-if="column.key === 'monto'"> <div class="kv">
<span class="monto"> <div class="k">Código</div>
S/ {{ Number(record.monto || 0).toFixed(2) }} <div class="v strong">{{ p.codigo || "-" }}</div>
</span> </div>
</template>
<!-- Fecha --> <div class="kv">
<template v-else-if="column.key === 'fecha_pago'"> <div class="k">Monto</div>
<span class="fecha">{{ formatFecha(record.fecha_pago) }}</span> <div class="v strong primary">S/ {{ Number(p.monto || 0).toFixed(2) }}</div>
</template> </div>
</template>
<!-- Empty --> <div class="kv">
<template #emptyText> <div class="k">Fecha</div>
<a-empty description="No se encontraron pagos" /> <div class="v">{{ formatFecha(p.fecha_pago) }}</div>
</div>
<div class="kv" v-if="p.estado">
<div class="k">Estado</div>
<div class="v">
<span class="pill pill--soft">{{ p.estado }}</span>
</div>
</div>
</div>
</div>
</template> </template>
</a-table>
<a-empty v-else description="No se encontraron pagos" />
<!-- Tip informativo --> </div>
<a-alert
class="tip-alert" <!-- Nota (sin colores fuertes) -->
type="warning" <div class="note">
show-icon <div class="noteTitle">Nota</div>
message="Nota" <div class="noteText">
description="Si un pago no muestra el campo “Uso / Proceso”, es porque aún no está asociado a un proceso en el backend." Si un pago no muestra “Uso / Proceso”, es porque aún no está asociado a un proceso en el backend.
/> </div>
</div>
</a-spin> </a-spin>
</a-card> </a-card>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed } from 'vue' import { ref, onMounted, computed, onBeforeUnmount } from "vue";
import { message } from 'ant-design-vue' import { message } from "ant-design-vue";
import api from '.././../axiosPostulante' import api from ".././../axiosPostulante";
const pagos = ref([]) const pagos = ref([]);
const loading = ref(false) const loading = ref(false);
const search = ref('') const search = ref("");
const columns = [ const columns = [
{ { title: "Tipo", dataIndex: "tipo", key: "tipo", width: 160 },
title: 'Tipo', { title: "Código", dataIndex: "codigo", key: "codigo", width: 220 },
dataIndex: 'tipo', { title: "Uso / Proceso", dataIndex: "uso", key: "uso", width: 360 },
key: 'tipo', { title: "Monto", dataIndex: "monto", key: "monto", width: 160 },
width: 140 { title: "Fecha de pago", dataIndex: "fecha_pago", key: "fecha_pago", width: 220 },
}, ];
{
title: 'Código',
dataIndex: 'codigo',
key: 'codigo',
width: 200
},
{
title: 'Uso / Proceso',
dataIndex: 'uso',
key: 'uso',
width: 320
},
{
title: 'Monto',
dataIndex: 'monto',
key: 'monto',
width: 140
},
{
title: 'Fecha de Pago',
dataIndex: 'fecha_pago',
key: 'fecha_pago',
width: 220
}
]
const obtenerPagos = async () => { const obtenerPagos = async () => {
loading.value = true loading.value = true;
try { try {
const { data } = await api.get('/postulante/pagos') const { data } = await api.get("/postulante/pagos");
if (data.success) { if (data.success) {
pagos.value = (data.pagos || []).map((pago, index) => ({ pagos.value = (data.pagos || []).map((pago, index) => ({
...pago, ...pago,
key: pago.id ?? `${pago.codigo ?? 'pago'}-${index}` // key estable key: pago.id ?? `${pago.codigo ?? "pago"}-${index}`,
})) }));
} else { } else {
message.error('No se pudieron obtener los pagos') message.error("No se pudieron obtener los pagos");
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error);
message.error('Error al cargar pagos') message.error("Error al cargar pagos");
} finally { } finally {
loading.value = false loading.value = false;
} }
} };
const getColor = (tipo) => {
if (tipo === 'pyto_peru') return 'blue'
if (tipo === 'banco_nacion') return 'green'
if (tipo === 'caja') return 'orange'
return 'default'
}
const tipoLabel = (tipo) => { const tipoLabel = (tipo) => {
const map = { const map = {
pyto_peru: 'PYTO PERÚ', pyto_peru: "PYTO PERÚ",
banco_nacion: 'BANCO NACIÓN', banco_nacion: "BANCO NACIÓN",
caja: 'CAJA' caja: "CAJA",
} };
return map[tipo] || String(tipo || '-').toUpperCase() return map[tipo] || String(tipo || "-").toUpperCase();
} };
const formatFecha = (fecha) => { const formatFecha = (fecha) => {
if (!fecha) return '-' if (!fecha) return "-";
const soloFecha = String(fecha).split(' ')[0] // "2025-01-27" const soloFecha = String(fecha).split(" ")[0];
const [y, m, d] = soloFecha.split('-') const [y, m, d] = soloFecha.split("-");
return `${Number(d)}/${Number(m)}/${y}` // "27/1/2025" return `${Number(d)}/${Number(m)}/${y}`;
} };
/**
* ✅ “Uso / Proceso”
* Ajusta los nombres según lo que tu backend mande:
* - uso
* - concepto
* - motivo
* - descripcion
* - proceso_nombre
* - proceso
*/
const getUso = (record) => { const getUso = (record) => {
return ( return (
record.uso || record.uso ||
@ -205,149 +193,282 @@ const getUso = (record) => {
record.descripcion || record.descripcion ||
record.proceso_nombre || record.proceso_nombre ||
record.proceso || record.proceso ||
'-' "-"
) );
} };
const pagosFiltrados = computed(() => { const pagosFiltrados = computed(() => {
const q = search.value.trim().toLowerCase() const q = search.value.trim().toLowerCase();
if (!q) return pagos.value if (!q) return pagos.value;
return pagos.value.filter((p) => { return pagos.value.filter((p) => {
const texto = [ const texto = [p.tipo, p.codigo, getUso(p), p.proceso_nombre, p.proceso]
p.tipo,
p.codigo,
getUso(p),
p.proceso_nombre,
p.proceso
]
.filter(Boolean) .filter(Boolean)
.join(' ') .join(" ")
.toLowerCase() .toLowerCase();
return texto.includes(q);
return texto.includes(q) });
}) });
})
/* ✅ Responsive real: móvil = cards */
const isMobile = ref(false);
let mq = null;
function setMobile() {
isMobile.value = window.matchMedia("(max-width: 640px)").matches;
}
onMounted(() => { onMounted(() => {
obtenerPagos() obtenerPagos();
}) mq = window.matchMedia("(max-width: 640px)");
setMobile();
if (mq.addEventListener) mq.addEventListener("change", setMobile);
else mq.addListener(setMobile);
});
onBeforeUnmount(() => {
if (!mq) return;
if (mq.removeEventListener) mq.removeEventListener("change", setMobile);
else mq.removeListener(setMobile);
});
</script> </script>
<style scoped> <style scoped>
.pagos-card { /* Formal 17+ | sin degradados | un solo acento: Primary */
.card {
max-width: 1100px; max-width: 1100px;
margin: 20px auto; margin: 16px auto;
border-radius: 18px; border-radius: 14px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
background: #fff;
} }
.card-title { /* Header */
.header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start;
} }
.headerLeft {
.title-left { min-width: 240px;
display: flex;
flex-direction: column;
gap: 4px;
} }
.title {
.title-main {
font-weight: 900; font-weight: 900;
font-size: 18px; color: var(--ant-colorTextHeading, #111827);
color: #111827; font-size: 16px;
} }
.subtitle {
.title-sub { margin-top: 4px;
font-weight: 650; font-size: 12px;
color: #6b7280; color: var(--ant-colorTextSecondary, #6b7280);
font-size: 13px;
} }
.headerRight {
.top-summary { min-width: 180px;
display: flex; display: flex;
justify-content: flex-end;
}
.btn {
border-radius: 10px;
}
/* Tools */
.tools {
display: grid;
grid-template-columns: 220px 1fr;
gap: 12px; gap: 12px;
align-items: center; align-items: center;
margin-bottom: 12px;
}
.counter {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 12px;
padding: 10px 12px;
display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; align-items: baseline;
margin-bottom: 14px;
} }
.counterLabel {
.summary-alert { font-size: 12px;
border-radius: 14px; color: var(--ant-colorTextSecondary, #6b7280);
margin: 0; font-weight: 800;
flex: 1;
min-width: 280px;
} }
.counterValue {
.search-input { font-size: 18px;
max-width: 360px; font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
}
.search {
border-radius: 12px; border-radius: 12px;
} }
.pagos-table :deep(.ant-table) { /* Table */
border-radius: 14px; .tableWrap {
border-radius: 12px;
overflow: hidden; overflow: hidden;
} }
.table :deep(.ant-table) {
.tag-pill { border-radius: 12px;
border-radius: 999px; overflow: hidden;
font-weight: 800;
padding: 2px 10px;
} }
.tag-mini { /* Pills (neutras, sin verde/azul/naranja por tipo) */
.pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px; border-radius: 999px;
font-weight: 700; font-weight: 900;
font-size: 12px;
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorFillAlter, #fafafa);
color: var(--ant-colorTextHeading, #111827);
white-space: nowrap;
}
.pill--neutral {
border-color: rgba(0,0,0,.10);
background: rgba(0,0,0,.04);
}
.pill--soft {
border-color: rgba(22,119,255,.25);
background: rgba(22,119,255,.08); /* ✅ único acento */
color: var(--ant-colorTextHeading, #111827);
} }
.codigo-cell { /* Cells */
.codigoCell {
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.codigo { .codigo {
font-weight: 900; font-weight: 900;
color: #111827; color: var(--ant-colorTextHeading, #111827);
} }
.uso-cell { .usoCell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
} }
.usoMain {
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
line-height: 1.25;
}
.usoSub {
font-weight: 700;
color: var(--ant-colorTextSecondary, #6b7280);
font-size: 12px;
}
.uso-main { .monto {
font-weight: 900;
color: var(--ant-colorPrimary, #1677ff); /* ✅ único acento */
}
.fecha {
font-weight: 800; font-weight: 800;
color: #111827; color: var(--ant-colorText, #374151);
line-height: 1.3;
} }
.uso-sub { /* Mobile cards */
font-weight: 650; .cards {
color: #6b7280; display: grid;
font-size: 12px; gap: 12px;
} }
.monto { .itemCard {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorBgContainer, #fff);
border-radius: 14px;
padding: 12px;
}
.itemTop {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
flex-wrap: wrap;
}
.itemTitle {
font-weight: 900; font-weight: 900;
color: #1677ff; color: var(--ant-colorTextHeading, #111827);
line-height: 1.2;
}
.itemSub {
margin-top: 4px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
} }
.fecha { .grid {
font-weight: 650; margin-top: 10px;
color: #374151; display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.kv {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 12px;
padding: 10px 12px;
}
.k {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
font-weight: 800;
}
.v {
margin-top: 4px;
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
}
.v.strong {
font-weight: 900;
}
.v.primary {
color: var(--ant-colorPrimary, #1677ff);
} }
.tip-alert { /* Nota */
.note {
margin-top: 14px; margin-top: 14px;
border-radius: 14px; border-radius: 14px;
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorFillAlter, #fafafa);
padding: 12px;
}
.noteTitle {
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
}
.noteText {
margin-top: 4px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
line-height: 1.5;
}
/* Responsive */
@media (max-width: 640px) {
.card {
margin: 0;
border-radius: 0;
}
.headerRight {
width: 100%;
min-width: 0;
}
.tools {
grid-template-columns: 1fr;
}
.grid {
grid-template-columns: 1fr;
}
} }
</style> </style>

1284
front/src/views/postulante/PreguntasExamen.vue
View File

File diff suppressed because it is too large Load Diff

552
front/src/views/postulante/Test.vue
Unescape Escape View File

@ -7,11 +7,25 @@ import { message } from "ant-design-vue";
const router = useRouter(); const router = useRouter();
const examenStore = useExamenStore(); const examenStore = useExamenStore();
/** =========================
* UI State
* ========================= */
const showModal = ref(false); const showModal = ref(false);
const iniciandoExamen = ref(false); const iniciandoExamen = ref(false);
const creandoExamen = ref(false); const creandoExamen = ref(false);
const formRef = ref(); const formRef = ref(null);
/**
* ✅ SEPARA LOADINGS:
* - loadingPage: solo para cargar data inicial de la página (no debe tumbar modales)
* - loadingAreas: solo para cargar áreas cuando cambias de proceso (se usa en el select)
*/
const loadingPage = ref(false);
const loadingAreas = ref(false);
/** =========================
* Form
* ========================= */
const formState = reactive({ const formState = reactive({
proceso_id: undefined, proceso_id: undefined,
area_proceso_id: undefined, area_proceso_id: undefined,
@ -19,7 +33,9 @@ const formState = reactive({
codigo_pago: "", codigo_pago: "",
}); });
/* ===== Modal Voucher ===== */ /** =========================
* Modal Voucher
* ========================= */
const secuenciaModalOpen = ref(false); const secuenciaModalOpen = ref(false);
const secuenciaTipo = ref("caja"); const secuenciaTipo = ref("caja");
@ -50,28 +66,23 @@ const openSecuencia = (tipo) => {
const modalBodyStyle = computed(() => ({ maxHeight: "72vh", overflowY: "auto" })); const modalBodyStyle = computed(() => ({ maxHeight: "72vh", overflowY: "auto" }));
/* ===== Datos ===== */ /** =========================
* Datos (computed)
* ========================= */
const hasExamen = computed(() => !!examenStore.examenActual); const hasExamen = computed(() => !!examenStore.examenActual);
const procesoNombre = computed(() => examenStore.examenActual?.proceso?.nombre || "No asignado"); const procesoNombre = computed(() => examenStore.examenActual?.proceso?.nombre || "No asignado");
const areaNombre = computed(() => examenStore.examenActual?.area?.nombre || "No seleccionada"); const areaNombre = computed(() => examenStore.examenActual?.area?.nombre || "No seleccionada");
const intentosActuales = computed(() => examenStore.examenActual?.intentos || 0); const intentosActuales = computed(() => examenStore.examenActual?.intentos || 0);
const intentosMax = computed(() => examenStore.examenActual?.intentos_max || 1); const intentosMax = computed(() => examenStore.examenActual?.intentos_max || 1);
const yaDioTest = computed(() => intentosActuales.value > 0); const yaDioTest = computed(() => intentosActuales.value > 0);
/** ✅ Formal + agradable: dejamos el Primary solo para el CTA */
const estadoTexto = computed(() => { const estadoTexto = computed(() => {
if (!hasExamen.value) return "Aún sin asignar"; if (!hasExamen.value) return "Aún sin asignar";
return yaDioTest.value ? "Completado" : "Listo para iniciar"; return yaDioTest.value ? "Completado" : "Listo para iniciar";
}); });
const estadoBadgeStatus = computed(() => { /** Progreso */
if (!hasExamen.value) return "default";
return yaDioTest.value ? "success" : "processing";
});
/* ===== Progreso / Mensajes ===== */
const stepCurrent = computed(() => { const stepCurrent = computed(() => {
if (!hasExamen.value) return 0; if (!hasExamen.value) return 0;
return yaDioTest.value ? 2 : 1; return yaDioTest.value ? 2 : 1;
@ -94,7 +105,7 @@ const estadoAlertDesc = computed(() => {
: "Son 10 preguntas. Al finalizar verás tu resultado al instante."; : "Son 10 preguntas. Al finalizar verás tu resultado al instante.";
}); });
/* ===== CTA único (sin duplicar botones) ===== */ /** CTA */
const primaryAction = computed(() => { const primaryAction = computed(() => {
if (!hasExamen.value) { if (!hasExamen.value) {
return { label: "Seleccionar área", type: "primary", loading: false, onClick: () => (showModal.value = true) }; return { label: "Seleccionar área", type: "primary", loading: false, onClick: () => (showModal.value = true) };
@ -105,13 +116,20 @@ const primaryAction = computed(() => {
return { label: "Ver resultados", type: "primary", loading: false, onClick: verResultado }; return { label: "Ver resultados", type: "primary", loading: false, onClick: verResultado };
}); });
/* ===== Options ===== */ /** Options */
const procesoOptions = computed(() => const procesoOptions = computed(() =>
examenStore.procesos.map((p) => ({ value: p.id, label: p.nombre, requiere_pago: p.requiere_pago })) (examenStore.procesos || []).map((p) => ({
value: p.id,
label: p.nombre,
requiere_pago: p.requiere_pago,
}))
); );
const areaOptions = computed(() => const areaOptions = computed(() =>
examenStore.areas.map((a) => ({ value: a.area_proceso_id, label: a.nombre })) (examenStore.areas || []).map((a) => ({
value: a.area_proceso_id,
label: a.nombre,
}))
); );
const tipoPagoOptions = [ const tipoPagoOptions = [
@ -120,12 +138,22 @@ const tipoPagoOptions = [
{ value: "caja", label: "Caja" }, { value: "caja", label: "Caja" },
]; ];
/**
* ✅ IMPORTANTE:
* La condición de pago debe funcionar aunque venga 1/"1"/true/"true"
*/
const procesoRequierePago = computed(() => { const procesoRequierePago = computed(() => {
const proceso = examenStore.procesos.find((p) => p.id === formState.proceso_id); const pid = formState.proceso_id;
return proceso?.requiere_pago === 1; if (pid === undefined || pid === null || pid === "") return false;
const proceso = (examenStore.procesos || []).find((p) => String(p.id) === String(pid));
if (!proceso) return false;
const v = proceso.requiere_pago;
return v === 1 || v === "1" || v === true || v === "true";
}); });
/* ===== Validación ===== */ /** Validación (condicional) */
const rules = { const rules = {
proceso_id: [{ required: true, message: "Selecciona un proceso", trigger: "change" }], proceso_id: [{ required: true, message: "Selecciona un proceso", trigger: "change" }],
area_proceso_id: [{ required: true, message: "Selecciona un área", trigger: "change" }], area_proceso_id: [{ required: true, message: "Selecciona un área", trigger: "change" }],
@ -151,15 +179,44 @@ const rules = {
], ],
}; };
/* ===== Actions ===== */ /** =========================
* Actions
* ========================= */
const refrescar = async () => { const refrescar = async () => {
await examenStore.fetchExamenActual(); try {
message.success("Actualizado"); await examenStore.fetchExamenActual();
message.success("Actualizado");
} catch {
message.error("No se pudo actualizar");
}
}; };
/**
* ✅ SOLO una forma de cargar áreas: por @change
* (NO uses watch(proceso_id) + @change a la vez)
*/
const handleProcesoChange = async (procesoId) => { const handleProcesoChange = async (procesoId) => {
// reset dependientes
formState.area_proceso_id = undefined; formState.area_proceso_id = undefined;
if (procesoId) await examenStore.fetchAreas(procesoId);
// reset pago cuando cambia proceso
formState.tipo_pago = undefined;
formState.codigo_pago = "";
// limpiar validaciones relacionadas
formRef.value?.clearValidate?.(["area_proceso_id", "tipo_pago", "codigo_pago"]);
if (!procesoId) {
examenStore.areas = [];
return;
}
loadingAreas.value = true;
try {
await examenStore.fetchAreas(procesoId);
} finally {
loadingAreas.value = false;
}
}; };
const crearExamen = async () => { const crearExamen = async () => {
@ -170,21 +227,30 @@ const crearExamen = async () => {
try { try {
creandoExamen.value = true; creandoExamen.value = true;
// ✅ valida con reglas condicionales
if (formRef.value) await formRef.value.validate(); if (formRef.value) await formRef.value.validate();
// ✅ si requiere pago, se manda en plano al store (payload final lo arma el store)
const pagoData = procesoRequierePago.value const pagoData = procesoRequierePago.value
? { tipo_pago: formState.tipo_pago, codigo_pago: formState.codigo_pago } ? { tipo_pago: formState.tipo_pago, codigo_pago: formState.codigo_pago }
: null; : null;
const result = await examenStore.crearExamen(formState.area_proceso_id, pagoData); const result = await examenStore.crearExamen(formState.area_proceso_id, pagoData);
if (result.success) { if (result?.success) {
message.success("Área asignada"); message.success("Área asignada");
showModal.value = false; showModal.value = false;
resetModal(); resetModal();
await examenStore.fetchExamenActual(); await examenStore.fetchExamenActual();
} else { } else {
message.error(result.message || "No se pudo asignar el área"); // si backend responde errors, intenta mostrarlo
const msg =
result?.message ||
(result?.errors
? Object.values(result.errors).flat().join(" ")
: "No se pudo asignar el área");
message.error(msg);
} }
} catch (e) { } catch (e) {
message.error("No se pudo asignar el área"); message.error("No se pudo asignar el área");
@ -237,102 +303,151 @@ const resetModal = () => {
formState.area_proceso_id = undefined; formState.area_proceso_id = undefined;
formState.tipo_pago = undefined; formState.tipo_pago = undefined;
formState.codigo_pago = ""; formState.codigo_pago = "";
if (formRef.value) formRef.value.clearValidate?.(); examenStore.areas = [];
formRef.value?.clearValidate?.();
}; };
/* ===== Lifecycle ===== */ /**
onMounted(async () => { * ✅ Solo resetea cuando CIERRAS modal (no cuando cambia proceso)
await examenStore.fetchProcesos(); * IMPORTANTE: usamos watch(showModal) y NO tocamos showModal desde otros watchers
await examenStore.fetchExamenActual(); */
watch(showModal, (open) => {
if (!open) resetModal();
}); });
watch(showModal, (newVal) => { /** Lifecycle */
if (!newVal) { onMounted(async () => {
examenStore.areas = []; loadingPage.value = true;
resetModal(); try {
await examenStore.fetchProcesos();
await examenStore.fetchExamenActual();
} finally {
loadingPage.value = false;
} }
}); });
</script> </script>
<template> <template>
<!-- ✅ 1 solo Card contenedor. Sin degradados. Formal y “amigable”. --> <!-- ✅ OJO: loading del card SOLO usa loadingPage, NO uses examenStore.cargando -->
<a-card :loading="examenStore.cargando" class="page-card" :bordered="true"> <a-card :loading="loadingPage" class="pageCard" :bordered="true">
<!-- Header -->
<template #title> <template #title>
<div class="header"> <div class="topbar">
<div class="header__left"> <div class="topbarLeft">
<div class="header__titleRow"> <div class="titleRow">
<span class="header__title">Test diagnóstico</span> <span class="title">Test diagnóstico</span>
<span class="statusPill">{{ estadoTexto }}</span>
<a-badge :status="estadoBadgeStatus" :text="estadoTexto" />
</div> </div>
<div class="subtitle">
<div class="header__subtitle"> Guía referencial para medir tu nivel. <b>No afecta</b> tu admisión.
Es una guía para que midas tu nivel. <b>No afecta</b> tu admisión.
</div> </div>
</div> </div>
<div class="header__right"> <div class="topbarRight">
<a-button @click="refrescar">Actualizar</a-button> <a-button @click="refrescar" class="btnTop" block>Actualizar</a-button>
</div> </div>
</div> </div>
</template> </template>
<!-- ✅ 1 bloque principal (sin cards anidados) --> <!-- HERO -->
<div class="content"> <section class="hero">
<!-- Mensaje principal --> <div class="heroLeft">
<a-alert :type="estadoAlertType" show-icon :message="estadoAlertMessage" :description="estadoAlertDesc" /> <div class="heroKicker">Tu evaluación</div>
<div class="heroTitle">Aquí está tu test</div>
<a-divider /> <div class="heroText">10 preguntas • 10 min aprox. • Resultado inmediato</div>
<!-- Resumen amigable (rápido de leer) --> <div class="heroFacts">
<div class="subhead">Resumen rápido</div> <div class="fact">
<a-descriptions size="small" bordered :column="{ xs: 1, sm: 2, md: 3 }"> <div class="factK">Proceso</div>
<a-descriptions-item label="Proceso">{{ procesoNombre }}</a-descriptions-item> <div class="factV">{{ procesoNombre }}</div>
<a-descriptions-item label="Área">{{ areaNombre }}</a-descriptions-item> </div>
<a-descriptions-item label="Intentos">{{ intentosActuales }} / {{ intentosMax }}</a-descriptions-item> <div class="fact">
<a-descriptions-item label="Preguntas">10</a-descriptions-item> <div class="factK">Área</div>
<a-descriptions-item label="Duración">10 min aprox.</a-descriptions-item> <div class="factV">{{ areaNombre }}</div>
<a-descriptions-item label="Resultado">Al instante</a-descriptions-item> </div>
</a-descriptions> <div class="fact">
<div class="factK">Intentos</div>
<!-- ✅ ÚNICO CTA --> <div class="factV">{{ intentosActuales }} / {{ intentosMax }}</div>
<div class="ctaRow"> </div>
<a-button </div>
:type="primaryAction.type"
size="large" <a-alert
:loading="primaryAction.loading" class="mt12"
@click="primaryAction.onClick" :type="estadoAlertType"
class="ctaBtn" show-icon
> :message="estadoAlertMessage"
{{ primaryAction.label }} :description="estadoAlertDesc"
</a-button> />
<!-- Link discreto (solo si aplica) -->
<a-button v-if="procesoRequierePago" type="link" @click="openSecuencia('bn')">
¿Dónde veo mi secuencia?
</a-button>
</div> </div>
<a-divider /> <div class="heroRight">
<div class="ctaCard">
<div class="ctaTitle">Acción</div>
<div class="ctaHint">
<span v-if="!hasExamen">Primero selecciona tu área.</span>
<span v-else-if="hasExamen && !yaDioTest">Inicia cuando estés listo.</span>
<span v-else>Puedes ver tus resultados.</span>
</div>
<!-- Progreso --> <a-button
<div class="subhead">Tu camino</div> :type="primaryAction.type"
<a-steps :current="stepCurrent" size="small"> size="large"
:loading="primaryAction.loading"
@click="primaryAction.onClick"
class="ctaBtn"
block
>
{{ primaryAction.label }}
</a-button>
<a-button v-if="procesoRequierePago" type="link" class="ctaLink" @click="openSecuencia('bn')">
¿Dónde veo mi secuencia?
</a-button>
<a-divider class="ctaDivider" />
<div class="miniGrid">
<div class="mini">
<div class="miniK">Estado</div>
<div class="miniV">{{ estadoTexto }}</div>
</div>
<div class="mini">
<div class="miniK">Consejo</div>
<div class="miniV">Responde con calma.</div>
</div>
</div>
</div>
</div>
</section>
<a-divider />
<!-- Progreso -->
<section class="section">
<div class="sectionTitle">Tu camino</div>
<div class="sectionSub">Paso a paso, sin complicaciones.</div>
<a-steps :current="stepCurrent" size="small" class="mt12">
<a-step title="Selecciona área" description="Elige proceso y área." /> <a-step title="Selecciona área" description="Elige proceso y área." />
<a-step title="Resuelve el test" description="10 preguntas." /> <a-step title="Resuelve el test" description="10 preguntas." />
<a-step title="Mira tu resultado" description="Recomendaciones." /> <a-step title="Mira tu resultado" description="Recomendaciones." />
</a-steps> </a-steps>
<div class="hint"> <div class="hint mt12">
<span v-if="!hasExamen">Tip: selecciona un área y luego podrás iniciar.</span> <span v-if="!hasExamen">Tip: selecciona un área y luego podrás iniciar.</span>
<span v-else-if="hasExamen && !yaDioTest">Tip: responde tranquilo, sin apuro.</span> <span v-else-if="hasExamen && !yaDioTest">Tip: responde tranquilo, sin apuro.</span>
<span v-else>Tip: puedes volver a ver tus resultados cuando quieras.</span> <span v-else>Tip: puedes volver a ver tus resultados cuando quieras.</span>
</div> </div>
</section>
<a-divider />
<a-divider /> <!-- FAQ -->
<section class="section">
<div class="sectionTitle">Preguntas frecuentes</div>
<div class="sectionSub">Respuestas cortas y claras.</div>
<!-- FAQ corto --> <a-collapse accordion class="mt12">
<a-collapse accordion>
<a-collapse-panel key="1" header="¿Para qué sirve este test?"> <a-collapse-panel key="1" header="¿Para qué sirve este test?">
<ul class="bullets"> <ul class="bullets">
<li>Te ayuda a medir tu preparación antes del examen.</li> <li>Te ayuda a medir tu preparación antes del examen.</li>
@ -356,7 +471,7 @@ watch(showModal, (newVal) => {
</a-space> </a-space>
</a-collapse-panel> </a-collapse-panel>
</a-collapse> </a-collapse>
</div> </section>
<!-- ================== MODAL SECUENCIA ================== --> <!-- ================== MODAL SECUENCIA ================== -->
<a-modal <a-modal
@ -372,7 +487,7 @@ watch(showModal, (newVal) => {
<a-col :xs="24" :md="14"> <a-col :xs="24" :md="14">
<a-card :bordered="true"> <a-card :bordered="true">
<div class="voucher-caption"> <div class="voucher-caption">
Busca el campo <b>“Secuencia”</b> o <b>“N° operación”</b> (según el comprobante). Busca el campo <b>“Secuencia”</b> o <b>“N° operación”</b>.
</div> </div>
<div class="voucher-img-wrap"> <div class="voucher-img-wrap">
@ -385,9 +500,9 @@ watch(showModal, (newVal) => {
<a-col :xs="24" :md="10"> <a-col :xs="24" :md="10">
<a-card :bordered="true"> <a-card :bordered="true">
<div class="subhead">¿Qué hago?</div> <div class="sectionTitle">¿Qué hago?</div>
<ol class="ordered"> <ol class="ordered mt12">
<li>Ubica el número de secuencia en tu voucher/boleta.</li> <li>Ubica el número de secuencia en tu voucher/boleta.</li>
<li>Ingresa ese número cuando el sistema lo pida.</li> <li>Ingresa ese número cuando el sistema lo pida.</li>
<li>Si pagaste hoy y no aparece, espera el tiempo de habilitación.</li> <li>Si pagaste hoy y no aparece, espera el tiempo de habilitación.</li>
@ -412,7 +527,8 @@ watch(showModal, (newVal) => {
title="Seleccionar área" title="Seleccionar área"
:mask-closable="false" :mask-closable="false"
width="640px" width="640px"
@cancel="resetModal" @cancel="showModal = false"
class="select-modal"
> >
<a-alert <a-alert
v-if="hasExamen" v-if="hasExamen"
@ -440,14 +556,19 @@ watch(showModal, (newVal) => {
placeholder="Selecciona un área" placeholder="Selecciona un área"
:options="areaOptions" :options="areaOptions"
:disabled="!formState.proceso_id" :disabled="!formState.proceso_id"
:loading="examenStore.cargando" :loading="loadingAreas"
/> />
</a-form-item> </a-form-item>
<!-- ✅ CAMPOS DE PAGO: aparecen sin cerrar modal -->
<div v-if="procesoRequierePago" class="pay-block"> <div v-if="procesoRequierePago" class="pay-block">
<a-alert message="Este proceso requiere pago" type="info" show-icon class="mb12" /> <a-alert message="Este proceso requiere pago" type="info" show-icon class="mb12" />
<a-form-item label="Tipo de Pago" name="tipo_pago"> <a-form-item label="Tipo de Pago" name="tipo_pago">
<a-select v-model:value="formState.tipo_pago" placeholder="Selecciona tipo de pago" :options="tipoPagoOptions" /> <a-select
v-model:value="formState.tipo_pago"
placeholder="Selecciona tipo de pago"
:options="tipoPagoOptions"
/>
</a-form-item> </a-form-item>
<a-form-item label="Código de Pago" name="codigo_pago"> <a-form-item label="Código de Pago" name="codigo_pago">
<a-input v-model:value="formState.codigo_pago" placeholder="Escribe el código de pago" /> <a-input v-model:value="formState.codigo_pago" placeholder="Escribe el código de pago" />
@ -468,82 +589,207 @@ watch(showModal, (newVal) => {
</template> </template>
<style scoped> <style scoped>
/* ✅ Sin degradados, formal, y agradable: /* =========================
- Más aire Base (formal, 17+, sin degradados)
- Mensajes cortos ========================= */
- 1 CTA principal .pageCard {
- Tipos legibles
*/
.page-card {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
border-radius: 14px;
} }
.mt12 { margin-top: 12px; }
.mb12 { margin-bottom: 12px; }
/* Header */ /* Header */
.header { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start;
} }
.header__titleRow { .titleRow {
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
} }
.header__title { .title {
font-weight: 700; font-weight: 800;
color: var(--ant-colorTextHeading, #111827); color: var(--ant-colorTextHeading, #111827);
} }
.header__subtitle { .statusPill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
background: var(--ant-colorFillAlter, #fafafa);
font-size: 12px;
font-weight: 700;
color: var(--ant-colorText, #111827);
}
.subtitle {
margin-top: 4px; margin-top: 4px;
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280); color: var(--ant-colorTextSecondary, #6b7280);
line-height: 1.35;
}
.topbarRight {
min-width: 220px;
display: flex;
justify-content: flex-end;
}
.btnTop {
border-radius: 10px;
}
/* HERO (sin degradado) */
.hero {
border: 2px solid var(--ant-colorPrimary, #1677ff);
border-radius: 14px;
padding: 16px;
background: var(--ant-colorBgContainer, #fff);
display: grid;
grid-template-columns: 1.4fr 0.9fr;
gap: 14px;
}
.heroKicker {
font-size: 12px; font-size: 12px;
letter-spacing: 0.2px;
color: var(--ant-colorTextSecondary, #6b7280);
font-weight: 700;
}
.heroTitle {
margin-top: 4px;
font-size: 20px;
line-height: 1.15;
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
} }
.content { .heroText {
padding: 4px 0; margin-top: 6px;
font-size: 13px;
color: var(--ant-colorText, #374151);
} }
.subhead { .heroFacts {
font-weight: 600; margin-top: 12px;
margin-bottom: 10px; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.fact {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 12px;
padding: 10px 12px;
min-width: 0;
}
.factK {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
}
.factV {
margin-top: 4px;
font-weight: 800;
color: var(--ant-colorTextHeading, #111827); color: var(--ant-colorTextHeading, #111827);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* CTA row */ /* CTA card */
.ctaRow { .ctaCard {
margin-top: 14px; border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: var(--ant-colorFillAlter, #fafafa);
border-radius: 14px;
padding: 14px;
height: 100%;
display: flex; display: flex;
flex-direction: column;
gap: 10px; gap: 10px;
align-items: center; }
flex-wrap: wrap;
.ctaTitle {
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
}
.ctaHint {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
line-height: 1.35;
} }
.ctaBtn { .ctaBtn {
height: 40px; height: 44px;
border-radius: 10px; /* un poco más friendly */ border-radius: 12px;
font-weight: 600; font-weight: 900;
} }
/* Hint */ .ctaLink {
.hint { padding: 0;
margin-top: 10px; height: auto;
text-align: left;
}
.ctaDivider {
margin: 10px 0 0;
}
.miniGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mini {
border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
background: #fff;
border-radius: 12px;
padding: 10px 12px;
min-width: 0;
}
.miniK {
font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280); color: var(--ant-colorTextSecondary, #6b7280);
}
.miniV {
margin-top: 4px;
font-weight: 800;
color: var(--ant-colorTextHeading, #111827);
}
/* Sections */
.sectionTitle {
font-weight: 900;
color: var(--ant-colorTextHeading, #111827);
}
.sectionSub {
margin-top: 4px;
font-size: 12px; font-size: 12px;
color: var(--ant-colorTextSecondary, #6b7280);
} }
/* Lists */ .hint {
.bullets { font-size: 12px;
margin: 0 0 0 18px; color: var(--ant-colorTextSecondary, #6b7280);
line-height: 1.7;
} }
.ordered {
.bullets, .ordered {
margin: 0 0 0 18px; margin: 0 0 0 18px;
line-height: 1.7; line-height: 1.7;
} }
@ -557,9 +803,9 @@ watch(showModal, (newVal) => {
.voucher-img-wrap { .voucher-img-wrap {
background: var(--ant-colorFillAlter, #fafafa); background: var(--ant-colorFillAlter, #fafafa);
border: 1px solid var(--ant-colorBorderSecondary, rgba(0, 0, 0, 0.06)); border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 12px;
} }
.modal-actions { .modal-actions {
@ -573,24 +819,38 @@ watch(showModal, (newVal) => {
.pay-block { .pay-block {
margin-top: 8px; margin-top: 8px;
padding: 12px; padding: 12px;
border: 1px solid var(--ant-colorBorderSecondary, rgba(0, 0, 0, 0.06)); border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
border-radius: 10px; border-radius: 12px;
background: var(--ant-colorFillAlter, #fafafa); background: var(--ant-colorFillAlter, #fafafa);
} }
.mb12 { /* Responsive */
margin-bottom: 12px; @media (max-width: 992px) {
} .hero {
.mt12 { grid-template-columns: 1fr;
margin-top: 12px; }
.heroFacts {
grid-template-columns: 1fr;
}
.miniGrid {
grid-template-columns: 1fr;
}
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.page-card { .pageCard { margin: 0; }
margin: 0; .topbarRight { width: 100%; min-width: 0; }
} .btnTop { width: 100%; }
.ctaBtn { }
width: 100%;
} /* Modales no se salen en móvil */
:deep(.voucher-modal .ant-modal),
:deep(.select-modal .ant-modal) {
max-width: 92vw;
}
:deep(.voucher-modal .ant-modal-content),
:deep(.select-modal .ant-modal-content) {
border-radius: 14px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save