Add professor share & financial reports UI, expense management page

Adds payout configuration fields (percentage/hourly + per-session
expense allowance) with a live payout preview to the class form,
a new Financial Reports page (per-class and date-range/monthly tabs,
per-session drill-down dialog) with reusable stat cards, and an
Institutional Expenses management page. Registers routes, sidebar
navigation, and permission constants for the new financial_reports
and expenses permissions.

src/components/financialReports/FinancialStatCard.vue

@@ -0,0 +1,29 @@
+<!-- /src/components/financialReports/FinancialStatCard.vue -->
+<template>
+  <div class="stat-card surface-card p-4 border-round-xl border-1 border-color shadow-sm flex align-items-center justify-content-between gap-3 h-full">
+    <div class="flex-grow-1">
+      <span class="text-muted text-xs block mb-1">{{ label }}</span>
+      <span class="text-xl font-bold text-color">{{ formattedValue }}</span>
+    </div>
+    <div class="stat-icon w-3rem h-3rem border-round-xl flex align-items-center justify-content-center flex-shrink-0" :class="bgClass">
+      <i :class="[icon, 'text-xl', iconClass]"></i>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { usePersianDate } from '@/composables/usePersianDate';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  value: { type: Number, default: 0 },
+  icon: { type: String, default: 'pi pi-wallet' },
+  bgClass: { type: String, default: 'bg-blue-100' },
+  iconClass: { type: String, default: 'text-blue-600' }
+});
+
+const { toPersianDigits } = usePersianDate();
+
+const formattedValue = computed(() => `${toPersianDigits(Math.round(props.value || 0).toLocaleString())} تومان`);
+</script>