feat(financial-reports): add charts, trends and forecasts overview tab

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.
2026-08-23 18:24:35 +03:30
parent 7cb2b957a7
commit 39921b548e
12 changed files with 893 additions and 8 deletions
@@ -0,0 +1,86 @@
+<!-- /src/components/financialReports/charts/IncomeByClassChart.vue -->
+<!-- Horizontal bar chart ranking classes by received revenue vs. outstanding receivables. -->
+<template>
+  <div class="chart-wrap" dir="ltr" :style="{ height: computedHeight + 'px' }">
+    <Bar v-if="rows.length" :data="chartData" :options="options" />
+    <div v-else class="flex align-items-center justify-content-center h-full text-muted text-sm">
+      داده‌ای برای نمایش وجود ندارد
+    </div>
+  </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({
+  rows: { type: Array, default: () => [] }, // [{ className, actualReceivedRevenue, pendingReceivables }]
+  limit: { type: Number, default: 8 }
+});
+
+const { toPersianDigits } = usePersianDate();
+const formatToman = (v) => `${toPersianDigits(Math.round(v || 0).toLocaleString())} تومان`;
+
+const topRows = computed(() => props.rows.slice(0, props.limit));
+const computedHeight = computed(() => Math.max(220, topRows.value.length * 46));
+
+const chartData = computed(() => ({
+  labels: topRows.value.map((r) => r.className),
+  datasets: [
+    {
+      label: 'وصول‌شده',
+      data: topRows.value.map((r) => r.actualReceivedRevenue),
+      backgroundColor: CHART_COLORS.received,
+      borderRadius: 5,
+      maxBarThickness: 18
+    },
+    {
+      label: 'مطالبات معوق',
+      data: topRows.value.map((r) => r.pendingReceivables),
+      backgroundColor: CHART_COLORS.outstanding,
+      borderRadius: 5,
+      maxBarThickness: 18
+    }
+  ]
+}));
+
+const options = computed(() => ({
+  indexAxis: 'y',
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: 'top',
+      align: 'end',
+      labels: { usePointStyle: true, pointStyle: 'circle', boxWidth: 8, boxHeight: 8 }
+    },
+    tooltip: {
+      rtl: true,
+      textDirection: 'rtl',
+      callbacks: {
+        label: (ctx) => `${ctx.dataset.label}: ${formatToman(ctx.parsed.x)}`
+      }
+    }
+  },
+  scales: {
+    x: {
+      stacked: false,
+      grid: { color: CHART_COLORS.gridLine, drawBorder: false },
+      ticks: { color: CHART_COLORS.muted, callback: (v) => toPersianDigits(Number(v).toLocaleString()) }
+    },
+    y: {
+      grid: { display: false },
+      ticks: { color: CHART_COLORS.muted }
+    }
+  }
+}));
+</script>
+
+<style scoped>
+.chart-wrap {
+  width: 100%;
+  position: relative;
+}
+</style>