kavehhn
39921b548e
Adds a new "نمای کلی و نمودارها" tab to the financial reports page with KPI cards, daily/weekly income-trend and monthly breakdown charts, a payment-status doughnut, a due-date cash-flow forecast chart, and full per-class income and upcoming-payments tables — backed by chart.js / vue-chartjs and the new /financial-reports/admin/analytics endpoint.
71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<!-- /src/components/financialReports/charts/ForecastChart.vue -->
|
|
<!-- Bar chart of expected future cash inflow, bucketed by the upcoming due-date week. -->
|
|
<template>
|
|
<div class="chart-wrap" dir="ltr" :style="{ height: height + 'px' }">
|
|
<Bar :data="chartData" :options="options" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { Bar } from 'vue-chartjs';
|
|
import { usePersianDate } from '@/composables/usePersianDate';
|
|
import { CHART_COLORS } from '@/utils/chartTheme';
|
|
|
|
const props = defineProps({
|
|
labels: { type: Array, default: () => [] },
|
|
amounts: { type: Array, default: () => [] },
|
|
counts: { type: Array, default: () => [] },
|
|
height: { type: Number, default: 240 }
|
|
});
|
|
|
|
const { toPersianDigits } = usePersianDate();
|
|
const formatToman = (v) => `${toPersianDigits(Math.round(v || 0).toLocaleString())} تومان`;
|
|
|
|
const chartData = computed(() => ({
|
|
labels: props.labels,
|
|
datasets: [
|
|
{
|
|
label: 'دریافتی پیشبینیشده',
|
|
data: props.amounts,
|
|
backgroundColor: CHART_COLORS.sessionIncome,
|
|
borderRadius: 6,
|
|
maxBarThickness: 40
|
|
}
|
|
]
|
|
}));
|
|
|
|
const options = computed(() => ({
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
rtl: true,
|
|
textDirection: 'rtl',
|
|
callbacks: {
|
|
label: (ctx) => `${formatToman(ctx.parsed.y)}`,
|
|
afterLabel: (ctx) => {
|
|
const count = props.counts[ctx.dataIndex];
|
|
return count ? `${toPersianDigits(count)} قسط در انتظار` : '';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: { grid: { display: false }, ticks: { color: CHART_COLORS.muted } },
|
|
y: {
|
|
grid: { color: CHART_COLORS.gridLine, drawBorder: false },
|
|
ticks: { color: CHART_COLORS.muted, callback: (v) => toPersianDigits(Number(v).toLocaleString()) }
|
|
}
|
|
}
|
|
}));
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-wrap {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
</style>
|