feat(ai): optimize candidate analysis and implement batch processing

This commit is contained in:
jeremy bayse
2026-04-19 08:28:28 +02:00
parent b728686605
commit 4017e3d9c5
3 changed files with 334 additions and 102 deletions

View File

@@ -2,6 +2,7 @@
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, useForm, Link, usePage, router } from '@inertiajs/vue3';
import { ref, computed } from 'vue';
import axios from 'axios';
const page = usePage();
const flashSuccess = computed(() => page.props.flash?.success);
@@ -56,8 +57,8 @@ const openPreview = (doc) => {
};
// Sorting Logic
const sortKey = ref('user.name');
const sortOrder = ref(1); // 1 = asc, -1 = desc
const sortKey = ref('ai_analysis.match_score');
const sortOrder = ref(-1); // 1 = asc, -1 = desc
const sortBy = (key) => {
if (sortKey.value === key) {
@@ -106,6 +107,61 @@ const sortedCandidates = computed(() => {
return 0;
});
});
const selectedIds = ref([]);
const isBatchAnalyzing = ref(false);
const analysisProgress = ref({ current: 0, total: 0 });
const toggleSelectAll = (e) => {
if (e.target.checked) {
selectedIds.value = sortedCandidates.value.map(c => c.id);
} else {
selectedIds.value = [];
}
};
const batchAnalyze = async () => {
if (selectedIds.value.length === 0) return;
if (!confirm(`Voulez-vous lancer l'analyse IA pour les ${selectedIds.value.length} candidats sélectionnés ?`)) {
return;
}
isBatchAnalyzing.value = true;
analysisProgress.value = { current: 0, total: selectedIds.value.length };
const results = { success: 0, errors: 0, details: [] };
// Copy the IDs to avoid issues if selection changes during process
const idsToProcess = [...selectedIds.value];
for (const id of idsToProcess) {
analysisProgress.value.current++;
try {
await axios.post(route('admin.candidates.analyze', id));
results.success++;
} catch (error) {
results.errors++;
const candidate = props.candidates.find(c => c.id === id);
results.details.push({
candidate: candidate?.user?.name || `ID #${id}`,
error: error.response?.data?.error || error.message
});
}
}
// Finished processing all
router.reload({
onSuccess: () => {
isBatchAnalyzing.value = false;
selectedIds.value = [];
alert(`Analyse terminée : ${results.success} succès, ${results.errors} erreurs.`);
if (results.details.length > 0) {
console.table(results.details);
}
}
});
};
</script>
<template>
@@ -141,9 +197,29 @@ const sortedCandidates = computed(() => {
</div>
</div>
</div>
<PrimaryButton @click="isModalOpen = true">
Ajouter un Candidat
</PrimaryButton>
<div class="flex items-center gap-4">
<div v-if="selectedIds.length > 0" class="flex items-center gap-3 animate-in fade-in slide-in-from-right-4 duration-300">
<span class="text-sm font-bold text-slate-500">{{ selectedIds.length }} sélectionné(s)</span>
<PrimaryButton
@click="batchAnalyze"
:disabled="isBatchAnalyzing"
class="!bg-purple-600 hover:!bg-purple-500 !border-none flex items-center gap-2"
>
<svg v-if="isBatchAnalyzing" class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 21v-1m4.243-4.243l-.707-.707m2.828-9.9l-.707.707" />
</svg>
{{ isBatchAnalyzing ? `Analyse ${analysisProgress.current}/${analysisProgress.total}...` : 'Analyse IA groupée' }}
</PrimaryButton>
<div class="h-8 w-px bg-slate-200 dark:bg-slate-700 mx-2"></div>
</div>
<PrimaryButton @click="isModalOpen = true">
Ajouter un Candidat
</PrimaryButton>
</div>
</div>
<!-- Flash Messages -->
@@ -164,6 +240,14 @@ const sortedCandidates = computed(() => {
<table class="w-full text-left">
<thead class="bg-slate-50 dark:bg-slate-700/50 border-b border-slate-200 dark:border-slate-700">
<tr>
<th class="w-12 px-6 py-4">
<input
type="checkbox"
:checked="selectedIds.length === sortedCandidates.length && sortedCandidates.length > 0"
@change="toggleSelectAll"
class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 cursor-pointer"
>
</th>
<th class="w-12 px-6 py-4"></th>
<th @click="sortBy('user.name')" class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors">
<div class="flex items-center gap-2">
@@ -226,7 +310,15 @@ const sortedCandidates = computed(() => {
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
<tr v-for="candidate in sortedCandidates" :key="candidate.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-700/30 transition-colors">
<tr v-for="candidate in sortedCandidates" :key="candidate.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-700/30 transition-colors" :class="{ 'bg-indigo-50/30 dark:bg-indigo-900/10': selectedIds.includes(candidate.id) }">
<td class="px-6 py-4">
<input
type="checkbox"
:value="candidate.id"
v-model="selectedIds"
class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 cursor-pointer"
>
</td>
<td class="px-6 py-4">
<button @click="toggleSelection(candidate.id)" class="text-amber-400 hover:text-amber-500 hover:scale-110 transition-transform focus:outline-none" :title="candidate.is_selected ? 'Retirer des retenus' : 'Marquer comme retenu'">
<svg v-if="candidate.is_selected" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">