135 lines
2.7 KiB
Vue
135 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { RouterLink } from 'vue-router';
|
||
import { toFaDigits } from '@/lib/jalali';
|
||
import type { HomeDashboardTopCustomerDto } from '@mento/shared';
|
||
import HomePanelEmpty from '@/components/dashboard/HomePanelEmpty.vue';
|
||
|
||
const props = defineProps<{
|
||
customers: HomeDashboardTopCustomerDto[];
|
||
}>();
|
||
|
||
const rows = computed(() => props.customers.slice(0, 3));
|
||
|
||
function trophy(rank: number) {
|
||
if (rank === 1) return '🥇';
|
||
if (rank === 2) return '🥈';
|
||
if (rank === 3) return '🥉';
|
||
return `#${toFaDigits(rank)}`;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<article class="panel">
|
||
<header class="panel-head">
|
||
<div>
|
||
<h2>مشتریان برتر</h2>
|
||
<p class="hint">بر اساس معاملات برندهٔ ۵ ماه اخیر</p>
|
||
</div>
|
||
<RouterLink :to="{ name: 'contacts' }">مشاهده همه</RouterLink>
|
||
</header>
|
||
|
||
<HomePanelEmpty
|
||
v-if="!rows.length"
|
||
title="هنوز مشتری برتری نیست"
|
||
description="با بستن معاملات، مشتریان برتر اینجا دیده میشوند."
|
||
action-label="مشتری جدید"
|
||
:action-to="{ name: 'person-new' }"
|
||
/>
|
||
<ul v-else class="top-list">
|
||
<li v-for="row in rows" :key="row.id">
|
||
<span class="cust-avatar">{{ row.name.slice(0, 1) }}</span>
|
||
<div>
|
||
<strong>{{ row.name }}</strong>
|
||
<span>{{ toFaDigits(row.dealCount) }} معامله</span>
|
||
</div>
|
||
<span class="rank">{{ trophy(row.rank) }}</span>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.panel {
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
padding: 1rem 1.05rem;
|
||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||
border: 1px solid #eef2f7;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.panel-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.85rem;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
h2 {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.hint {
|
||
margin: 0.15rem 0 0;
|
||
color: #94a3b8;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
a {
|
||
color: #14b8a6;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.top-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 0.7rem;
|
||
}
|
||
|
||
.top-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.65rem;
|
||
}
|
||
|
||
.cust-avatar {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: var(--radius);
|
||
background: linear-gradient(145deg, #ccfbf1, #99f6e4);
|
||
color: #0f766e;
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.top-list div {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 0.1rem;
|
||
}
|
||
|
||
.top-list strong {
|
||
font-size: 0.84rem;
|
||
}
|
||
|
||
.top-list span {
|
||
color: #94a3b8;
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
.rank {
|
||
font-size: 1.15rem;
|
||
}
|
||
</style>
|