700 lines
48 KiB
Vue
700 lines
48 KiB
Vue
<script setup>
|
|
import AdminLayout from '@/Layouts/AdminLayout.vue';
|
|
import axios from 'axios';
|
|
import { Head, Link, router, useForm, usePage } from '@inertiajs/vue3';
|
|
import { ref, computed } from 'vue';
|
|
import { marked } from 'marked';
|
|
import Modal from '@/Components/Modal.vue';
|
|
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import DangerButton from '@/Components/DangerButton.vue';
|
|
import InputError from '@/Components/InputError.vue';
|
|
|
|
const props = defineProps({
|
|
candidate: Object,
|
|
jobPositions: Array,
|
|
ai_config: Object
|
|
});
|
|
|
|
const page = usePage();
|
|
const flashSuccess = computed(() => page.props.flash?.success);
|
|
|
|
const positionForm = useForm({
|
|
job_position_id: props.candidate.job_position_id || ''
|
|
});
|
|
|
|
const updatePosition = () => {
|
|
positionForm.patch(route('admin.candidates.update-position', props.candidate.id), {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const selectedDocument = ref(null);
|
|
|
|
const docForm = useForm({
|
|
cv: null,
|
|
cover_letter: null,
|
|
_method: 'PUT' // For file upload via PUT in Laravel
|
|
});
|
|
|
|
const notesForm = useForm({
|
|
notes: props.candidate.notes || ''
|
|
});
|
|
|
|
const scoreForm = useForm({
|
|
cv_score: props.candidate.cv_score || 0,
|
|
motivation_score: props.candidate.motivation_score || 0,
|
|
interview_score: props.candidate.interview_score || 0,
|
|
});
|
|
|
|
const isPreview = ref(true);
|
|
const renderedNotes = computed(() => marked.parse(notesForm.notes || ''));
|
|
|
|
const openAttempts = ref([]);
|
|
|
|
const toggleAttempt = (id) => {
|
|
if (openAttempts.value.includes(id)) {
|
|
openAttempts.value = openAttempts.value.filter(item => item !== id);
|
|
} else {
|
|
openAttempts.value.push(id);
|
|
}
|
|
};
|
|
|
|
const formatDateTime = (date) => {
|
|
return new Date(date).toLocaleString('fr-FR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
};
|
|
|
|
const deleteCandidate = () => {
|
|
if (confirm('Voulez-vous vraiment supprimer ce candidat ? Toutes ses données seront DEFINITIVEMENT perdues.')) {
|
|
router.delete(route('admin.candidates.destroy', props.candidate.id));
|
|
}
|
|
};
|
|
|
|
const deleteAttempt = (id) => {
|
|
if (confirm('Voulez-vous vraiment supprimer cette tentative de test ? Cette action sera enregistrée dans les logs.')) {
|
|
router.delete(route('admin.attempts.destroy', id), {
|
|
preserveScroll: true
|
|
});
|
|
}
|
|
};
|
|
|
|
const resetPassword = () => {
|
|
if (confirm('Générer un nouveau mot de passe pour ce candidat ?')) {
|
|
router.post(route('admin.candidates.reset-password', props.candidate.id));
|
|
}
|
|
};
|
|
|
|
const updateDocuments = () => {
|
|
docForm.post(route('admin.candidates.update', props.candidate.id), {
|
|
onSuccess: () => {
|
|
docForm.reset();
|
|
},
|
|
});
|
|
};
|
|
|
|
const saveNotes = () => {
|
|
notesForm.patch(route('admin.candidates.update-notes', props.candidate.id), {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const saveScores = () => {
|
|
scoreForm.patch(route('admin.candidates.update-scores', props.candidate.id), {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const openPreview = (doc) => {
|
|
selectedDocument.value = doc;
|
|
};
|
|
|
|
const updateAnswerScore = (answerId, score) => {
|
|
router.patch(route('admin.answers.update-score', answerId), {
|
|
score: score
|
|
}, {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
|
|
const aiAnalysis = ref(props.candidate.ai_analysis || null);
|
|
const isAnalyzing = ref(false);
|
|
const selectedProvider = ref(props.ai_config?.default || 'ollama');
|
|
|
|
const runAI = async () => {
|
|
if (!props.candidate.job_position_id) {
|
|
alert("Veuillez d'abord associer une fiche de poste à ce candidat.");
|
|
return;
|
|
}
|
|
|
|
isAnalyzing.value = true;
|
|
try {
|
|
const response = await axios.post(route('admin.candidates.analyze', props.candidate.id), {
|
|
provider: selectedProvider.value
|
|
});
|
|
aiAnalysis.value = response.data;
|
|
} catch (error) {
|
|
console.error('AI Analysis Error:', error);
|
|
alert(error.response?.data?.error || "Une erreur est survenue lors de l'analyse.");
|
|
} finally {
|
|
isAnalyzing.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="'Candidat - ' + candidate.user.name" />
|
|
|
|
<AdminLayout>
|
|
<template #header>
|
|
<div class="flex items-center gap-4">
|
|
<Link :href="route('admin.candidates.index')" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
</Link>
|
|
<span>Détails Candidat</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Flash Messages -->
|
|
<div v-if="flashSuccess" class="mb-8 p-6 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-2xl flex items-center gap-4 animate-in fade-in slide-in-from-top-4 duration-500">
|
|
<div class="p-2 bg-emerald-500 rounded-lg text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-bold text-emerald-800 dark:text-emerald-400">Action réussie !</p>
|
|
<p class="text-emerald-700 dark:text-emerald-500 text-sm">{{ flashSuccess }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
|
|
<!-- Sidebar: Profile & Docs -->
|
|
<div class="space-y-8">
|
|
<!-- Profile Card -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
|
|
<div class="h-24 bg-gradient-to-r from-indigo-500 to-purple-600"></div>
|
|
<div class="px-6 pb-6 text-center -mt-12">
|
|
<div class="w-24 h-24 bg-white dark:bg-slate-900 rounded-2xl shadow-xl border-4 border-white dark:border-slate-800 flex items-center justify-center text-4xl font-black text-indigo-600 mx-auto mb-4">
|
|
{{ candidate.user.name.charAt(0) }}
|
|
</div>
|
|
<h3 class="text-xl font-bold">{{ candidate.user.name }}</h3>
|
|
<p class="text-slate-500 text-sm mb-4">{{ candidate.user.email }}</p>
|
|
|
|
<div class="mb-6">
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 block text-left">Poste Cible</label>
|
|
<select
|
|
v-model="positionForm.job_position_id"
|
|
@change="updatePosition"
|
|
class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-xl py-2 px-3 text-xs font-bold text-indigo-600 focus:ring-2 focus:ring-indigo-500/20 transition-all cursor-pointer"
|
|
>
|
|
<option value="">Non assigné</option>
|
|
<option v-for="pos in jobPositions" :key="pos.id" :value="pos.id">
|
|
{{ pos.title }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3 text-left">
|
|
<div class="flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-900 rounded-xl">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
<span class="text-sm font-medium">{{ candidate.phone || 'Non renseigné' }}</span>
|
|
</div>
|
|
<a v-if="candidate.linkedin_url" :href="candidate.linkedin_url" target="_blank" class="flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-900 rounded-xl hover:text-indigo-600 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
|
</svg>
|
|
<span class="text-sm font-medium">LinkedIn Profile</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-4 bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700 flex justify-between items-center gap-2">
|
|
<SecondaryButton @click="resetPassword" class="!px-3 !py-1 text-[10px] uppercase font-bold tracking-widest">Réinitialiser MDP</SecondaryButton>
|
|
<DangerButton @click="deleteCandidate" class="!px-3 !py-1 text-[10px] uppercase font-bold tracking-widest">Supprimer Compte</DangerButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documents Card -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
|
|
<h4 class="font-bold mb-4 flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
|
|
</svg>
|
|
Documents joints
|
|
</h4>
|
|
<div class="space-y-3">
|
|
<button
|
|
v-for="doc in candidate.documents"
|
|
:key="doc.id"
|
|
@click="openPreview(doc)"
|
|
class="w-full flex items-center justify-between p-4 bg-slate-100 dark:bg-slate-900 rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors group"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 bg-white dark:bg-slate-800 rounded-lg group-hover:bg-indigo-500 group-hover:text-white transition-colors">
|
|
<svg v-if="doc.type === 'cv'" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<div class="text-left">
|
|
<div class="text-sm font-bold uppercase tracking-tight">{{ doc.type }}</div>
|
|
<div class="text-[10px] text-slate-500 truncate max-w-[150px]">{{ doc.original_name }}</div>
|
|
</div>
|
|
</div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="pt-6 mt-6 border-t border-slate-100 dark:border-slate-700">
|
|
<h5 class="text-xs font-black uppercase text-slate-400 tracking-widest mb-4">Ajouter / Remplacer</h5>
|
|
<form @submit.prevent="updateDocuments" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="relative group/file">
|
|
<label class="flex flex-col items-center justify-center p-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl cursor-pointer hover:border-indigo-500 transition-colors">
|
|
<span class="text-[10px] font-bold uppercase tracking-tight text-slate-500">CV (PDF)</span>
|
|
<span class="text-[9px] text-slate-400 truncate w-full text-center mt-1">{{ docForm.cv ? docForm.cv.name : 'Choisir...' }}</span>
|
|
<input type="file" class="hidden" @input="docForm.cv = $event.target.files[0]" accept="application/pdf" />
|
|
</label>
|
|
</div>
|
|
<div class="relative group/file">
|
|
<label class="flex flex-col items-center justify-center p-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl cursor-pointer hover:border-emerald-500 transition-colors">
|
|
<span class="text-[10px] font-bold uppercase tracking-tight text-slate-500">Lettre (PDF)</span>
|
|
<span class="text-[9px] text-slate-400 truncate w-full text-center mt-1">{{ docForm.cover_letter ? docForm.cover_letter.name : 'Choisir...' }}</span>
|
|
<input type="file" class="hidden" @input="docForm.cover_letter = $event.target.files[0]" accept="application/pdf" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<InputError :message="docForm.errors.cv" />
|
|
<InputError :message="docForm.errors.cover_letter" />
|
|
<PrimaryButton class="w-full !justify-center !py-2 text-xs" :disabled="docForm.processing || (!docForm.cv && !docForm.cover_letter)">
|
|
Mettre à jour les fichiers
|
|
</PrimaryButton>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main: Content -->
|
|
<div class="xl:col-span-2 space-y-8">
|
|
<!-- Scores Dashboard -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
|
|
<div class="p-8 bg-gradient-to-br from-slate-900 to-slate-800 text-white flex flex-col md:flex-row md:items-center justify-between gap-8">
|
|
<div class="flex items-center gap-6">
|
|
<div class="relative flex items-center justify-center">
|
|
<svg class="w-24 h-24 transform -rotate-90">
|
|
<circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="transparent" class="text-slate-700" />
|
|
<circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="transparent" class="text-indigo-500"
|
|
:stroke-dasharray="251.2"
|
|
:stroke-dashoffset="251.2 - (candidate.weighted_score / 20) * 251.2"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<span class="absolute text-2xl font-black">{{ candidate.weighted_score }}</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-black tracking-tight mb-1">Score Global</h3>
|
|
<p class="text-slate-400 text-sm font-medium">Note pondérée sur 20</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<PrimaryButton @click="saveScores" v-if="scoreForm.isDirty" class="!bg-indigo-500 hover:!bg-indigo-400 !border-none animate-bounce">
|
|
Enregistrer les modifications
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- CV Score -->
|
|
<div class="group">
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Analyse CV /20</label>
|
|
<div class="relative">
|
|
<input type="number" v-model="scoreForm.cv_score" min="0" max="20" step="0.5"
|
|
class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-xl text-indigo-600 focus:ring-2 focus:ring-indigo-500/20 transition-all" />
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold">/ 20</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Letter Score -->
|
|
<div class="group">
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Lettre Motiv. /10</label>
|
|
<div class="relative">
|
|
<input type="number" v-model="scoreForm.motivation_score" min="0" max="10" step="0.5"
|
|
class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-xl text-emerald-600 focus:ring-2 focus:ring-emerald-500/20 transition-all" />
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold">/ 10</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interview Score -->
|
|
<div class="group">
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Entretien /30</label>
|
|
<div class="relative">
|
|
<input type="number" v-model="scoreForm.interview_score" min="0" max="30" step="0.5"
|
|
class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-xl text-purple-600 focus:ring-2 focus:ring-purple-500/20 transition-all" />
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold">/ 30</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Score (Read Only) -->
|
|
<div class="group">
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Test Technique /20</label>
|
|
<div class="w-full bg-slate-100 dark:bg-slate-900/50 rounded-2xl p-4 flex items-center justify-between border-2 border-dashed border-slate-200 dark:border-slate-700">
|
|
<span class="font-black text-xl text-slate-500">
|
|
{{ candidate.attempts.length > 0 ? (Math.max(...candidate.attempts.map(a => a.max_score > 0 ? a.score/a.max_score : 0)) * 20).toFixed(2) : '0.00' }}
|
|
</span>
|
|
<div class="p-2 bg-white dark:bg-slate-800 rounded-lg shadow-sm font-bold text-[10px] text-slate-400">
|
|
/ 20
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Analysis Section -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8 overflow-hidden relative">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
|
|
<div>
|
|
<h3 class="font-bold text-lg mb-4 flex items-center gap-3 flex-wrap">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" 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>
|
|
Analyse IA complète
|
|
<div class="flex items-center gap-2">
|
|
<span v-if="aiAnalysis?.provider" class="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-500 uppercase font-bold border border-slate-200">
|
|
{{ aiAnalysis.provider }}
|
|
</span>
|
|
<span v-if="aiAnalysis?.analyzed_at" class="text-[10px] text-slate-400 italic font-normal">
|
|
Effectuée le {{ new Date(aiAnalysis.analyzed_at).toLocaleDateString('fr-FR') }}
|
|
</span>
|
|
</div>
|
|
</h3>
|
|
<p class="text-xs text-slate-400 mt-1 uppercase font-bold tracking-widest">Choisir l'IA pour l'analyse du matching</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<!-- Provider Selector -->
|
|
<div v-if="props.ai_config?.enabled_providers" class="flex items-center bg-slate-100 dark:bg-slate-900/50 p-1.5 rounded-2xl border border-slate-200 dark:border-slate-800">
|
|
<button
|
|
v-for="provider in Object.keys(props.ai_config.enabled_providers)"
|
|
:key="provider"
|
|
@click="selectedProvider = provider"
|
|
class="px-4 py-2 text-[10px] font-black uppercase tracking-widest rounded-xl transition-all"
|
|
:class="selectedProvider === provider ? 'bg-white dark:bg-slate-800 shadow-sm text-indigo-600' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'"
|
|
>
|
|
{{ provider }}
|
|
</button>
|
|
</div>
|
|
|
|
<PrimaryButton
|
|
@click="runAI"
|
|
:disabled="isAnalyzing"
|
|
class="!bg-indigo-600 hover:!bg-indigo-500 !border-none !rounded-xl group"
|
|
>
|
|
<span v-if="isAnalyzing" class="flex items-center gap-2">
|
|
<svg 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>
|
|
Analyse en cours...
|
|
</span>
|
|
<span v-else class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Lancer l'analyse intelligente
|
|
</span>
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Results -->
|
|
<div v-if="aiAnalysis" class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-slate-50 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-100 dark:border-slate-800 text-center flex flex-col items-center justify-center">
|
|
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-4">Score d'Adéquation</div>
|
|
<div class="text-5xl font-black text-indigo-600 mb-2">{{ aiAnalysis.match_score }}%</div>
|
|
<div
|
|
class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest"
|
|
:class="[
|
|
aiAnalysis.match_score >= 80 ? 'bg-emerald-100 text-emerald-700' :
|
|
aiAnalysis.match_score >= 60 ? 'bg-amber-100 text-amber-700' :
|
|
'bg-red-100 text-red-700'
|
|
]"
|
|
>
|
|
{{ aiAnalysis.verdict }}
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-2 bg-slate-50 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-100 dark:border-slate-800">
|
|
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-4">Synthèse du Profil</div>
|
|
<p class="text-sm leading-relaxed text-slate-600 dark:text-slate-400 italic">
|
|
" {{ aiAnalysis.summary }} "
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="space-y-4">
|
|
<h5 class="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-emerald-500">
|
|
<svg 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Points Forts Identifiés
|
|
</h5>
|
|
<ul class="space-y-3">
|
|
<li v-for="(strength, idx) in aiAnalysis.strengths" :key="idx" class="flex items-start gap-3 p-3 bg-emerald-50/50 dark:bg-emerald-900/10 rounded-2xl border border-emerald-100 dark:border-emerald-800/50 text-[13px]">
|
|
<span class="text-emerald-500 font-bold mt-0.5">•</span>
|
|
<span class="text-emerald-800 dark:text-emerald-400">{{ strength }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<h5 class="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-amber-500">
|
|
<svg 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
Points de Vigilance / Gaps
|
|
</h5>
|
|
<ul class="space-y-3">
|
|
<li v-for="(gap, idx) in aiAnalysis.gaps" :key="idx" class="flex items-start gap-3 p-3 bg-amber-50/50 dark:bg-amber-900/10 rounded-2xl border border-amber-100 dark:border-amber-800/50 text-[13px]">
|
|
<span class="text-amber-500 font-bold mt-0.5">•</span>
|
|
<span class="text-amber-800 dark:text-amber-400">{{ gap }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="!isAnalyzing" class="py-12 border-2 border-dashed border-slate-100 dark:border-slate-800 rounded-3xl text-center">
|
|
<p class="text-slate-400 text-sm font-medium">Aucune analyse effectuée pour le moment.</p>
|
|
</div>
|
|
<div v-if="isAnalyzing" class="absolute inset-0 bg-white/60 dark:bg-slate-800/60 backdrop-blur-[2px] z-10 flex flex-col items-center justify-center gap-4">
|
|
<div class="flex gap-1 animate-pulse"><div class="w-2 h-2 bg-indigo-500 rounded-full"></div><div class="w-2 h-2 bg-indigo-500 rounded-full"></div><div class="w-2 h-2 bg-indigo-500 rounded-full"></div></div>
|
|
<p class="text-sm font-black text-indigo-600 uppercase tracking-widest">Analyse en cours...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes Section -->
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h4 class="text-xl font-bold flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
Notes d'entretien & Préparation
|
|
</h4>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center bg-slate-100 dark:bg-slate-900 p-1 rounded-xl">
|
|
<button
|
|
@click="isPreview = false"
|
|
class="px-4 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
|
|
:class="!isPreview ? 'bg-white dark:bg-slate-800 shadow-sm text-indigo-600' : 'text-slate-500'"
|
|
>
|
|
Édition
|
|
</button>
|
|
<button
|
|
@click="isPreview = true"
|
|
class="px-4 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
|
|
:class="isPreview ? 'bg-white dark:bg-slate-800 shadow-sm text-indigo-600' : 'text-slate-500'"
|
|
>
|
|
Aperçu
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="notesForm.isDirty" class="flex items-center gap-2 animate-pulse">
|
|
<PrimaryButton @click="saveNotes" class="!px-4 !py-1 text-[10px]" :disabled="notesForm.processing">
|
|
Enregistrer
|
|
</PrimaryButton>
|
|
</div>
|
|
<div v-else class="flex items-center gap-2 text-emerald-500">
|
|
<svg 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="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span class="text-[10px] font-black uppercase tracking-widest">Enregistré</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Markdown Help Guide -->
|
|
<div v-if="!isPreview" class="mb-6 grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
<div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
|
|
<code class="text-indigo-500 font-bold"># Titre</code>, <code class="text-indigo-500 font-bold">## Sous-titre</code>
|
|
</div>
|
|
<div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
|
|
<code class="text-indigo-500 font-bold">**Gras**</code>, <code class="text-indigo-500 font-bold">*Italique*</code>
|
|
</div>
|
|
<div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
|
|
<code class="text-indigo-500 font-bold">* Liste</code>, <code class="text-indigo-500 font-bold">1. Liste num.</code>
|
|
</div>
|
|
<div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
|
|
<code class="text-indigo-500 font-bold">> Citation</code>, <code class="text-indigo-500 font-bold">--- (Ligne)</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<div v-if="isPreview"
|
|
class="prose dark:prose-invert prose-slate max-w-none w-full bg-slate-50 dark:bg-slate-900 rounded-2xl p-8 min-h-[300px] text-sm leading-relaxed"
|
|
v-html="renderedNotes">
|
|
</div>
|
|
<textarea
|
|
v-else
|
|
v-model="notesForm.notes"
|
|
rows="12"
|
|
class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-6 text-sm selection:bg-indigo-100 dark:selection:bg-indigo-900 focus:ring-2 focus:ring-indigo-500/20 transition-all placeholder:text-slate-300 dark:placeholder:text-slate-600 leading-relaxed font-mono"
|
|
placeholder="Rédigez ici vos questions (utilisez # pour les titres, * pour les listes...)"
|
|
></textarea>
|
|
|
|
<div v-if="!isPreview" class="absolute bottom-4 right-4 text-[9px] font-bold text-slate-400 opacity-60 flex items-center gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
Markdown Supporté
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
|
|
<h3 class="text-xl font-bold mb-8 flex items-center justify-between">
|
|
Historique des Tests
|
|
<span class="text-sm font-normal text-slate-400">{{ candidate.attempts.length }} tentative(s)</span>
|
|
</h3>
|
|
|
|
<div v-if="candidate.attempts.length > 0" class="space-y-6">
|
|
<div v-for="attempt in candidate.attempts" :key="attempt.id" class="bg-slate-50 dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-slate-800 overflow-hidden group">
|
|
<!-- Attempt Header -->
|
|
<div
|
|
@click="toggleAttempt(attempt.id)"
|
|
class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-6 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors"
|
|
>
|
|
<div class="flex items-center gap-6">
|
|
<div class="px-5 py-3 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm text-center min-w-[100px]">
|
|
<div class="text-[10px] uppercase font-black tracking-widest text-slate-400">Score</div>
|
|
<div class="text-xl font-black text-indigo-600 dark:text-indigo-400">
|
|
{{ attempt.score }}<span class="text-slate-300 dark:text-slate-600 mx-1">/</span>{{ attempt.max_score || '?' }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-black uppercase tracking-tight">{{ attempt.quiz.title }}</h4>
|
|
<div class="text-xs text-slate-400 mt-1 uppercase font-bold tracking-widest">
|
|
Fini le {{ formatDateTime(attempt.finished_at) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 self-end md:self-auto">
|
|
<button
|
|
@click.stop="deleteAttempt(attempt.id)"
|
|
class="p-3 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all"
|
|
title="Supprimer ce test"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
<div class="w-10 h-10 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-400 group-hover:text-indigo-600 group-hover:border-indigo-500 transition-all shadow-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" :class="{ 'rotate-180': openAttempts.includes(attempt.id) }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion Content -->
|
|
<div v-show="openAttempts.includes(attempt.id)" class="border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800/50 divide-y divide-slate-100 dark:divide-slate-800 animate-in slide-in-from-top-2 duration-300">
|
|
<div v-for="(answer, aIdx) in attempt.answers" :key="answer.id" class="p-8">
|
|
<div class="flex items-start gap-6">
|
|
<div class="w-10 h-10 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 flex items-center justify-center font-black text-xs shrink-0 text-slate-400">
|
|
{{ String(aIdx + 1).padStart(2, '0') }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<h5 class="text-sm font-bold text-slate-700 dark:text-slate-300 mb-4 leading-relaxed">{{ answer.question.label }}</h5>
|
|
|
|
<!-- QCM Answer -->
|
|
<div v-if="answer.question.type === 'qcm'" class="flex items-center">
|
|
<div
|
|
class="px-5 py-3 rounded-2xl text-[13px] font-bold border flex items-center gap-3 shadow-sm"
|
|
:class="[
|
|
answer.option.is_correct
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-400'
|
|
: 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400'
|
|
]"
|
|
>
|
|
<div class="p-1 rounded-full bg-white/50 dark:bg-black/20">
|
|
<svg v-if="answer.option.is_correct" 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="M5 13l4 4L19 7" />
|
|
</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="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
{{ answer.option.option_text }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open Answer -->
|
|
<div v-else class="space-y-4">
|
|
<div class="p-6 bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-3xl text-[13px] text-slate-600 dark:text-slate-400 leading-relaxed italic shadow-inner">
|
|
" {{ answer.text_content || 'Aucune réponse fournie.' }} "
|
|
</div>
|
|
|
|
<!-- Score Input for Open Question -->
|
|
<div class="flex items-center gap-4 bg-slate-50 dark:bg-slate-900/50 p-4 rounded-2xl border border-dashed border-slate-200 dark:border-slate-700">
|
|
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400">Note Attribuée :</div>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
v-model="answer.score"
|
|
min="0"
|
|
:max="answer.question.points"
|
|
step="0.5"
|
|
@change="updateAnswerScore(answer.id, answer.score)"
|
|
class="w-20 bg-white dark:bg-slate-800 border-none rounded-xl py-1 px-3 font-black text-indigo-600 focus:ring-2 focus:ring-indigo-500/20 transition-all text-center"
|
|
/>
|
|
<span class="text-xs font-bold text-slate-300">/ {{ answer.question.points }}</span>
|
|
</div>
|
|
<div class="text-[9px] text-slate-400 italic">Enregistré au clic/changement</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="py-12 text-center text-slate-400 italic">
|
|
Ce candidat n'a pas encore terminé de test.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Preview Modal -->
|
|
<Modal :show="!!selectedDocument" @close="selectedDocument = null" max-width="4xl">
|
|
<div class="p-6 h-[80vh] flex flex-col">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-bold">Aperçu : {{ selectedDocument.original_name }}</h3>
|
|
<SecondaryButton @click="selectedDocument = null">Fermer</SecondaryButton>
|
|
</div>
|
|
<div class="flex-1 bg-slate-100 dark:bg-slate-900 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
|
|
<iframe
|
|
v-if="selectedDocument"
|
|
:src="route('admin.documents.show', selectedDocument.id)"
|
|
class="w-full h-full"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</AdminLayout>
|
|
</template>
|