style(ui): polish admin overview + close-rate progress bar; rebuild dist

frontend/src/i18n/index.js

@@ -35,6 +35,7 @@ const messages = {
     apply: 'Apply',
     clear: 'Clear',
     hardestPersonas: 'Hardest personas',
+    closeRate: 'Close rate',
     managePersonas: 'Manage personas',
     difficulty: 'Difficulty',
     trained: 'Trained',
@@ -117,6 +118,7 @@ const messages = {
     apply: 'กรอง',
     clear: 'ล้าง',
     hardestPersonas: 'Persona ที่ยากสุด',
+    closeRate: 'อัตราปิดการขาย',
     managePersonas: 'จัดการ Persona',
     difficulty: 'ความยาก',
     trained: 'ฝึกแล้ว',

frontend/src/views/Analytics.vue

@@ -23,13 +23,24 @@
       <div class="card stat"><div>Sessions</div><strong>{{ a.overall.total_sessions }}</strong></div>
       <div class="card stat"><div>Wins</div><strong style="color:var(--green)">{{ a.overall.wins }}</strong></div>
       <div class="card stat"><div>Losses</div><strong style="color:var(--red)">{{ a.overall.losses }}</strong></div>
-      <div class="card stat"><div>Close rate</div><strong>{{ a.overall.close_rate }}%</strong></div>
       <div class="card stat"><div>Avg score</div><strong>{{ a.overall.avg_score }}</strong></div>
       <div class="card stat"><div>Trainees</div><strong>{{ a.trainee_count }}</strong></div>
     </div>
 
+    <!-- Close rate with progress bar -->
+    <div class="card">
+      <div class="row" style="justify-content:space-between;align-items:center">
+        <strong>{{ i18n.t('closeRate') }}</strong>
+        <strong>{{ a.overall.close_rate }}%</strong>
+      </div>
+      <div class="bar"><div class="bar-fill" :style="{ width: (a.overall.close_rate || 0) + '%' }"></div></div>
+      <div class="muted" style="font-size:12px;margin-top:6px">
+        {{ a.overall.wins }} {{ i18n.t('won').toLowerCase() }} / {{ a.overall.total_sessions }} sessions
+      </div>
+    </div>
+
     <!-- Hardest personas -->
-    <h3>{{ i18n.t('hardestPersonas') }}</h3>
+    <h3 style="margin-top:20px">{{ i18n.t('hardestPersonas') }}</h3>
     <div v-if="a.hardest_personas.length === 0" class="card empty-state">
       <strong>No data</strong><span>No sessions in this date range.</span>
     </div>
@@ -84,4 +95,6 @@ onMounted(load)
 .badge.won { background: #dcfce7; color: #166534; }
 .badge.lost { background: #fee2e2; color: #991b1b; }
 .badge.not_tried { background: #eef2ff; color: #4338ca; }
+.bar { background: #eef0f5; border-radius: 999px; height: 10px; overflow: hidden; margin-top: 10px; }
+.bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); height: 100%; border-radius: 999px; transition: width .4s ease; }
 </style>