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,70 @@
+// /src/utils/chartTheme.js
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement,
+  Tooltip,
+  Legend,
+  Filler
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  ArcElement,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+ChartJS.defaults.font.family = "'Vazirmatn', sans-serif";
+ChartJS.defaults.font.size = 12;
+ChartJS.defaults.color = '#94a3b8';
+
+/** Shared semantic palette — kept consistent with the stat-card icon colors used across the dashboard. */
+export const CHART_COLORS = {
+  received: '#10b981',
+  receivedSoft: 'rgba(16, 185, 129, 0.15)',
+  sessionIncome: '#3b82f6',
+  sessionIncomeSoft: 'rgba(59, 130, 246, 0.15)',
+  outstanding: '#f59e0b',
+  outstandingSoft: 'rgba(245, 158, 11, 0.15)',
+  overdue: '#ef4444',
+  overdueSoft: 'rgba(239, 68, 68, 0.15)',
+  payout: '#8b5cf6',
+  payoutSoft: 'rgba(139, 92, 246, 0.15)',
+  expense: '#f43f5e',
+  expenseSoft: 'rgba(244, 63, 94, 0.15)',
+  netProfit: '#14b8a6',
+  netProfitSoft: 'rgba(20, 184, 166, 0.15)',
+  gridLine: 'rgba(148, 163, 184, 0.15)',
+  muted: '#94a3b8'
+};
+
+export const STATUS_COLORS = {
+  paid: '#10b981',
+  partial: '#3b82f6',
+  pending: '#f59e0b',
+  overdue: '#ef4444'
+};
+
+export const STATUS_LABELS_FA = {
+  paid: 'تسویه‌شده',
+  partial: 'پرداخت جزئی',
+  pending: 'در انتظار پرداخت',
+  overdue: 'معوق'
+};
+
+export const baseGridOptions = () => ({
+  grid: { color: CHART_COLORS.gridLine, drawBorder: false },
+  ticks: { color: CHART_COLORS.muted, font: { family: "'Vazirmatn', sans-serif" } }
+});
+
+export default ChartJS;