22d3e51980
- Chat: add 'How to practice' guide card; render revealed persona as readable label:value grid instead of JSON. - AdminUsers: switch create form to username (matches username login), add step guide, role explanation (user=ฝึก, admin=ดูแลระบบ). - Analytics (admin overview) + MyBoard (personal): add plain-Thai explainer subtitle. - Rebuild dist. Verified user create with username -> 201.
65 lines
2.6 KiB
Vue
65 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<h2 style="margin:0">📈 {{ i18n.t('myDashboard') }}</h2>
|
|
<div class="muted" style="margin-top:4px;margin-bottom:16px">สรุปผลการฝึกของตัวคุณเอง — ดูว่าปิดการขายได้กี่ครั้ง ยังฝึกกับใครบ้าง</div>
|
|
</div>
|
|
|
|
<!-- Win/Lose summary -->
|
|
<div class="row stat-row" v-if="!loading">
|
|
<div class="card stat"><span>{{ i18n.t('total') }}</span><strong>{{ total }}</strong></div>
|
|
<div class="card stat won"><span>{{ i18n.t('won') }}</span><strong>{{ won }}</strong></div>
|
|
<div class="card stat lost"><span>{{ i18n.t('lost') }}</span><strong>{{ lost }}</strong></div>
|
|
<div class="card stat"><span>{{ i18n.t('notTried') }}</span><strong>{{ notTried }}</strong></div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="card"><div class="skeleton" style="height:50px"></div></div>
|
|
<div v-else-if="items.length === 0" class="card empty-state">
|
|
<strong>No practice yet</strong>
|
|
<span>Go to Training and try closing a sale with a persona.</span>
|
|
</div>
|
|
|
|
<!-- Recent sessions -->
|
|
<div v-show="sessions.length" class="card" style="margin-top:20px">
|
|
<h3 style="margin-top:0">{{ i18n.t('mySessions') }}</h3>
|
|
<div v-for="s in sessions" :key="s.id" style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)">
|
|
<span>{{ s.persona_name }}</span>
|
|
<span class="badge" :class="s.outcome">{{ s.outcome === 'won' ? i18n.t('won') : i18n.t('lost') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { api } from '../api'
|
|
import { i18n } from '../i18n'
|
|
|
|
const items = ref([])
|
|
const sessions = ref([])
|
|
const loading = ref(true)
|
|
|
|
const total = computed(() => items.value.length)
|
|
const won = computed(() => items.value.filter((i) => i.my_outcome === 'won').length)
|
|
const lost = computed(() => items.value.filter((i) => i.my_outcome === 'lost').length)
|
|
const notTried = computed(() => items.value.filter((i) => i.my_outcome === 'not_tried').length)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
items.value = (await api.myBoard()).board || []
|
|
sessions.value = (await api.mySessions()).sessions || []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stat-row { gap: 16px; }
|
|
.stat { text-align: center; min-width: 100px; }
|
|
.stat span { display: block; font-size: 12px; color: var(--muted); }
|
|
.stat strong { font-size: 26px; }
|
|
.stat.won strong { color: var(--green); }
|
|
.stat.lost strong { color: var(--red); }
|
|
</style>
|