Refactoring AI candidate analysis: UI improvements, data normalization, provider management and real-time score clamping

resources/js/Components/Rq/RqScoreBar.vue

@@ -0,0 +1,38 @@
+<script setup>
+/**
+ * RqScoreBar.vue — Barre de score pondéré
+ *
+ * @prop value   Number — score actuel
+ * @prop max     Number — score maximum (défaut 20)
+ * @prop showLabel Boolean — affiche "X/max" à droite
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
+    value:     { type: Number, required: true },
+    max:       { type: Number, default: 20 },
+    showLabel: { type: Boolean, default: true },
+});
+
+const pct = computed(() => Math.min(100, (props.value / props.max) * 100));
+
+const colorClass = computed(() => {
+    if (pct.value >= 80) return 'bg-success';
+    if (pct.value >= 60) return 'bg-highlight';
+    return 'bg-accent';
+});
+</script>
+
+<template>
+    <div class="flex items-center gap-2.5 w-full">
+        <div class="flex-1 h-[5px] bg-ink/[0.07] rounded-full overflow-hidden">
+            <div
+                :class="['h-full rounded-full transition-all duration-500', colorClass]"
+                :style="{ width: `${pct}%` }"
+            />
+        </div>
+        <span v-if="showLabel" class="text-xs font-black text-ink tabular-nums min-w-[44px] text-right">
+            {{ value }}<span class="text-[9px] text-ink/40 font-semibold">/{{ max }}</span>
+        </span>
+    </div>
+</template>