web_Admision/front/src/views/postulante/MisProcesos.vue

<template>
  <a-card class="procesos-card" :bordered="false">
    <template #title>
      <div class="card-title">
        <div class="title-left">
          <div class="title-main">Mis procesos de admisión</div>
          <div class="title-sub">Resultados registrados por DNI</div>
        </div>

        <div class="title-right">
          <a-space>
            <a-button @click="obtenerProcesos" :loading="loading">Actualizar</a-button>
          </a-space>
        </div>
      </div>
    </template>

    <a-spin :spinning="loading">
      <div class="top-summary">
        <a-alert v-if="!loading" type="info" show-icon class="summary-alert">
          Total de procesos: <strong>{{ procesos.length }}</strong>
        </a-alert>

        <a-input
          v-model:value="search"
          allow-clear
          placeholder="Buscar por nombre de proceso..."
          class="search-input"
        />
      </div>

      <a-table
        class="procesos-table"
        :dataSource="procesosFiltrados"
        :columns="columns"
        rowKey="id"
        :pagination="{ pageSize: 7, showSizeChanger: false }"
        :scroll="{ x: 900 }"
      >
        <template #bodyCell="{ column, record }">
          <!-- Nombre -->
          <template v-if="column.key === 'nombre'">
            <div class="nombre">
              {{ record.nombre || '-' }}
            </div>
          </template>

          <!-- Puntaje -->
          <template v-else-if="column.key === 'puntaje'">
            <span class="puntaje">
              {{ record.puntaje ?? '-' }}
            </span>
          </template>

          <!-- Apto -->
          <template v-else-if="column.key === 'apto'">
            <a-tag :color="aptoColor(record.apto)" class="tag-pill">
              {{ aptoTexto(record.apto) }}
            </a-tag>
          </template>

          <!-- Acciones -->
          <template v-else-if="column.key === 'acciones'">
            <a-space>
              <a-button size="small" @click="verDetalle(record)">Ver detalle</a-button>
            </a-space>
          </template>
        </template>

        <template #emptyText>
          <a-empty description="No se encontraron procesos" />
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import api from '../../axiosPostulante' // ✅ ajusta la ruta a tu axios

const procesos = ref([])
const loading = ref(false)
const search = ref('')

const columns = [
  { title: 'Proceso', dataIndex: 'nombre', key: 'nombre', width: 420 },
  { title: 'Puntaje', dataIndex: 'puntaje', key: 'puntaje', width: 140 },
  { title: 'Estado', dataIndex: 'apto', key: 'apto', width: 160 },
  { title: 'Acciones', key: 'acciones', width: 160 }
]

const obtenerProcesos = async () => {
  loading.value = true
  try {
    // ✅ Ruta: crea una ruta GET que apunte a misProcesos()
    // Ejemplo: Route::get('/postulante/mis-procesos', ...)
    const { data } = await api.get('/postulante/mis-procesos')

    if (data?.success) {
      procesos.value = Array.isArray(data.data) ? data.data : []
    } else {
      message.error('No se pudieron obtener los procesos')
    }
  } catch (e) {
    console.error(e)
    message.error(e.response?.data?.message || 'Error al cargar procesos')
  } finally {
    loading.value = false
  }
}

const aptoTexto = (apto) => {
  // en DB puede venir 1/0, true/false, "1"/"0"
  if (apto === 1 || apto === true || apto === '1') return 'APTO'
  if (apto === 0 || apto === false || apto === '0') return 'NO APTO'
  return String(apto ?? '-').toUpperCase()
}

const aptoColor = (apto) => {
  if (apto === 1 || apto === true || apto === '1') return 'green'
  if (apto === 0 || apto === false || apto === '0') return 'red'
  return 'default'
}

const procesosFiltrados = computed(() => {
  const q = search.value.trim().toLowerCase()
  if (!q) return procesos.value
  return procesos.value.filter(p =>
    String(p.nombre || '').toLowerCase().includes(q)
  )
})

const verDetalle = (record) => {
  // ✅ Aquí puedes navegar a otra vista si tienes ruta
  // router.push({ name: 'DetalleProceso', params: { procesoId: record.id } })
  message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? '-'}`)
}

onMounted(() => {
  obtenerProcesos()
})
</script>

<style scoped>
.procesos-card {
  max-width: 1100px;
  margin: 20px auto;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
  background: #fff;
}

.card-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.title-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-main {
  font-weight: 900;
  font-size: 18px;
  color: #111827;
}

.title-sub {
  font-weight: 650;
  color: #6b7280;
  font-size: 13px;
}

.top-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.summary-alert {
  border-radius: 14px;
  margin: 0;
  flex: 1;
  min-width: 280px;
}

.search-input {
  max-width: 360px;
  border-radius: 12px;
}

.nombre {
  font-weight: 850;
  color: #111827;
}

.puntaje {
  font-weight: 900;
  color: #1677ff;
}

.tag-pill {
  border-radius: 999px;
  font-weight: 800;
  padding: 2px 10px;
}

.procesos-table :deep(.ant-table) {
  border-radius: 14px;
  overflow: hidden;
}
</style>