Дмитрий
99 lines
3.3 KiB
Vue
99 lines
3.3 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* Дашборд — стартовая страница для авторизованных пользователей.
|
||
*
|
||
* Источник дизайна: liderra_v8_handoff/concepts/v8_dashboard.html.
|
||
* MVP: page-head + 4 KPI-cards (получено лидов / конверсия / активные проекты /
|
||
* баланс). Графики (Активность по дням, Воронка из 14 статусов).
|
||
*
|
||
* Все числа сейчас mock'и — TODO: GET /api/dashboard/summary с tenant-context'ом
|
||
* по middleware SetTenantContext (фаза backend).
|
||
*
|
||
* Sprint 4 Phase B/3 — split на DashboardPageHead + DashboardKpiRow +
|
||
* DashboardBalance (audit O-refactor-04 закрытие). State (range, kpis, balance)
|
||
* остаётся в parent ради единого mock-data flow и future API-fetch'а.
|
||
*
|
||
* Примечание: «recent deals list» в Phase B/3 plan'е — на текущем дашборде нет
|
||
* (есть только charts row); если будет добавлено в будущем — выносится в
|
||
* DashboardRecentDeals.vue по аналогии.
|
||
*/
|
||
import { ref } from 'vue';
|
||
import ActivityChart from '../components/charts/ActivityChart.vue';
|
||
import FunnelChart from '../components/charts/FunnelChart.vue';
|
||
import DashboardPageHead from '../components/dashboard/DashboardPageHead.vue';
|
||
import DashboardKpiRow, { type Kpi } from '../components/dashboard/DashboardKpiRow.vue';
|
||
import DashboardBalance, { type Balance } from '../components/dashboard/DashboardBalance.vue';
|
||
|
||
const range = ref<'today' | '7d' | '30d' | 'custom'>('7d');
|
||
|
||
const kpis: Kpi[] = [
|
||
{
|
||
label: 'Получено лидов',
|
||
value: '247',
|
||
delta: { dir: 'up', text: '12.3%' },
|
||
sub: 'vs предыдущие 7 дней',
|
||
},
|
||
{
|
||
label: 'Конверсия в оплату',
|
||
value: '18.4',
|
||
unit: '%',
|
||
delta: { dir: 'up', text: '2.1pp' },
|
||
sub: 'vs предыдущие 7 дней',
|
||
},
|
||
{
|
||
label: 'Активные проекты',
|
||
value: '8',
|
||
unit: '/ 10',
|
||
delta: { dir: 'neutral', text: '2 свободно' },
|
||
sub: 'тариф «Команда»',
|
||
},
|
||
];
|
||
|
||
const balance: Balance = {
|
||
amount: '14 250',
|
||
runwayDays: 4,
|
||
runwayMax: 7,
|
||
runwayLeads: 285,
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<v-container fluid class="dashboard pa-6">
|
||
<DashboardPageHead v-model="range" />
|
||
|
||
<div class="ld-meta mt-2">
|
||
<span class="ld-pulse" aria-hidden="true"></span>
|
||
<span>Live · обновлено только что</span>
|
||
</div>
|
||
|
||
<v-row dense class="kpi-row mt-4">
|
||
<DashboardKpiRow :kpis="kpis" />
|
||
<DashboardBalance :balance="balance" />
|
||
</v-row>
|
||
|
||
<v-row class="charts-row mt-4">
|
||
<v-col cols="12" md="7">
|
||
<ActivityChart />
|
||
</v-col>
|
||
<v-col cols="12" md="5">
|
||
<FunnelChart />
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.dashboard {
|
||
max-width: 1440px;
|
||
}
|
||
|
||
.ld-meta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
color: #66635c;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
</style>
|