kunthawat/sales-trainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Macky
2026-08-07 22:53:58 +07:00
parent e5a59dbc5c
commit acba183dc1
18 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/views/Analytics.vue
View File

@@ -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>