fix(ui): payment due date calculation, datepicker colors, scrollable tabs, optional receipt, default today date

src/assets/styles/main.scss

@@ -119,25 +119,84 @@ a {
 
   .vpd-controls {
     color: var(--text-primary) !important;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 10px;
 
-    button, span, i, svg, .vpd-month-label {
+    .vpd-next,
+    .vpd-prev,
+    button {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      width: 32px !important;
+      height: 32px !important;
+      border-radius: 8px !important;
+      background-color: var(--surface-ground) !important;
+      border: 1px solid var(--border-color) !important;
       color: var(--text-primary) !important;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      svg {
+        width: 14px !important;
+        height: 14px !important;
+        fill: var(--text-primary) !important;
+
+        path {
           fill: var(--text-primary) !important;
         }
-
-    button:hover {
-      background-color: var(--surface-hover) !important;
-      border-radius: 50%;
       }
 
-    .vpd-month-label span {
+      &:hover:not([disabled="true"]) {
-      border-color: var(--border-color) !important;
+        background-color: var(--primary-color) !important;
+        border-color: var(--primary-color) !important;
+        color: #ffffff !important;
+
+        svg,
+        svg path {
+          fill: #ffffff !important;
+        }
+      }
+
+      &[disabled="true"] {
+        opacity: 0.3 !important;
+        cursor: not-allowed !important;
+      }
+    }
+
+    .vpd-month-label {
+      span {
+        color: var(--text-primary) !important;
+        font-weight: 600 !important;
+        padding: 4px 10px !important;
+        border-radius: 6px !important;
+        border: 1px solid var(--border-color) !important;
+        background-color: var(--surface-ground) !important;
 
         &:hover {
           background-color: var(--surface-hover) !important;
+          border-color: var(--primary-color) !important;
         }
       }
     }
+  }
+
+  .vpd-up-arrow-btn,
+  .vpd-down-arrow-btn {
+    svg,
+    svg path {
+      fill: var(--text-primary) !important;
+    }
+    &:hover {
+      svg,
+      svg path {
+        fill: var(--primary-color) !important;
+      }
+    }
+  }
+
 
   .vpd-week {
     .vpd-weekday {
@@ -272,3 +331,20 @@ a {
   }
 }
 
+/* ==========================================
+   Responsive Tabs & TabList Horizontal Scroll
+   ========================================== */
+.p-tablist {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  -webkit-overflow-scrolling: touch !important;
+  scrollbar-width: thin;
+}
+
+.p-tablist-tab-list {
+  flex-wrap: nowrap !important;
+  white-space: nowrap !important;
+  min-width: max-content !important;
+}
+
+

src/components/classes/ClassSessionsSection.vue

@@ -130,7 +130,7 @@
         </div>
         <div class="col-12 sm:col-6 md:col-3 flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ شروع</label>
-          <DatePicker v-model="autoForm.startDate" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="autoForm.startDate" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
         <div class="col-12 sm:col-6 md:col-3 flex flex-column gap-2">
           <label class="font-semibold text-sm">ساعت شروع</label>
@@ -194,7 +194,7 @@
       <div v-for="(session, index) in manualSessions" :key="index" class="grid align-items-center mb-2 p-2 border-round surface-ground">
         <div class="col-12 sm:col-1 text-center font-bold">#{{ toPersianDigits(index + 1) }}</div>
         <div class="col-12 sm:col-3">
-          <InputText v-model="session.date" placeholder="تاریخ (1403/01/01)" class="w-full text-sm" />
+          <InputText v-model="session.date" :placeholder="`تاریخ (${todayJalali()})`" class="w-full text-sm" />
         </div>
         <div class="col-6 sm:col-2">
           <InputText v-model="session.startTime" placeholder="ساعت شروع" class="w-full text-sm" dir="ltr" />

src/composables/usePersianDate.js

@@ -55,6 +55,10 @@ export function usePersianDate() {
 
   const jalaliToIso = (jalaliStr) => toGregorianIso(jalaliStr) || null;
 
+  const getTodayJalali = (formatStr = 'jYYYY/jMM/jDD') => {
+    return moment().locale('fa').format(formatStr);
+  };
+
   return {
     toPersianDigits,
     toLatinDigits,
@@ -62,6 +66,8 @@ export function usePersianDate() {
     formatJalaliWithTime,
     toJalaliPickerValue,
     toGregorianIso,
-    jalaliToIso
+    jalaliToIso,
+    getTodayJalali
   };
 }
+

src/utils/classSchedule.js

@@ -82,3 +82,38 @@ export function calculateClassEndDate(startDate, days = [], numberOfSessions = 0
 
   return lastMatchingDate ? lastMatchingDate.locale('fa').format('jYYYY/jMM/jDD') : '';
 }
+
+/**
+ * Calculates the halfway due date for a class in Jalali (jYYYY/jMM/jDD).
+ * If class has 10 sessions, due date is calculated until the 5th session.
+ * @param {Object} cls - Class object
+ * @returns {string} Jalali formatted date string, or today's date if not calculable
+ */
+export function calculateClassMidDate(cls) {
+  if (!cls) return moment().locale('fa').format('jYYYY/jMM/jDD');
+
+  const totalSessions = parseInt(cls.numberOfSessions || cls.course?.sectionCount || 0, 10);
+  const midSessions = totalSessions > 0 ? Math.ceil(totalSessions / 2) : 0;
+
+  if (cls.startDate && Array.isArray(cls.days) && cls.days.length > 0 && midSessions >= 1) {
+    const computed = calculateClassEndDate(cls.startDate, cls.days, midSessions);
+    if (computed) return computed;
+  }
+
+  if (cls.startDate && cls.endDate) {
+    const startM = moment(cls.startDate);
+    const endM = moment(cls.endDate);
+    if (startM.isValid() && endM.isValid()) {
+      const midTime = startM.valueOf() + (endM.valueOf() - startM.valueOf()) / 2;
+      return moment(midTime).locale('fa').format('jYYYY/jMM/jDD');
+    }
+  }
+
+  if (cls.startDate) {
+    const startM = moment(cls.startDate);
+    if (startM.isValid()) return startM.locale('fa').format('jYYYY/jMM/jDD');
+  }
+
+  return moment().locale('fa').format('jYYYY/jMM/jDD');
+}
+

src/utils/classSchedule.test.js

@@ -1,6 +1,6 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
-import { formatClassDays, formatClassTime, formatClassSchedule, calculateClassEndDate } from './classSchedule.js';
+import { formatClassDays, formatClassTime, formatClassSchedule, calculateClassEndDate, calculateClassMidDate } from './classSchedule.js';
 
 describe('class schedule display', () => {
   it('formats weekdays in Iran week order', () => {
@@ -28,4 +28,21 @@ describe('class schedule display', () => {
     const endDate = calculateClassEndDate('1403/01/01', [6, 2], 2);
     assert.equal(endDate, '1403/01/07');
   });
+
+  it('calculates class mid date (halfway through class sessions)', () => {
+    // For 10 sessions on [6, 2] starting 1403/01/01:
+    // Half is 5th session
+    const midDate = calculateClassMidDate({
+      startDate: '1403/01/01',
+      days: [6, 2],
+      numberOfSessions: 10
+    });
+    // Session 1: 1403/01/04 (Sat)
+    // Session 2: 1403/01/07 (Tue)
+    // Session 3: 1403/01/11 (Sat)
+    // Session 4: 1403/01/14 (Tue)
+    // Session 5: 1403/01/18 (Sat)
+    assert.equal(midDate, '1403/01/18');
+  });
 });
+

src/views/classes/ClassFormView.vue

@@ -117,7 +117,7 @@
 
         <div class="col-12 md:col-4 flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ شروع *</label>
-          <DatePicker v-model="form.startDate" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="form.startDate" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
 
         <div class="col-12 md:col-4 flex flex-column gap-2">
@@ -324,7 +324,7 @@ const route = useRoute();
 const router = useRouter();
 const { showSuccess, showError } = useToast();
 const { hasPermission } = usePermission();
-const { toPersianDigits, toLatinDigits } = usePersianDate();
+const { toPersianDigits, toLatinDigits, getTodayJalali } = usePersianDate();
 
 const classId = route.params.id;
 const queryCourseId = route.query.courseId ? String(route.query.courseId) : null;
@@ -354,9 +354,10 @@ const form = reactive({
   discount: 0,
   freeSpots: null,
   showOnFrontend: true,
-  startDate: '',
+  startDate: isEditMode.value ? '' : getTodayJalali(),
   endDate: '',
   days: [],
+
   startTime: '',
   endTime: '',
   numberOfSessions: null,

src/views/expenses/ExpenseListView.vue

@@ -84,7 +84,7 @@
         </div>
         <div class="flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ *</label>
-          <DatePicker v-model="form.date" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="form.date" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
         <div class="flex flex-column gap-2">
           <label class="font-semibold text-sm">یادداشت</label>
@@ -126,7 +126,8 @@ import InputNumber from 'primevue/inputnumber';
 import Textarea from 'primevue/textarea';
 import DatePicker from 'vue3-persian-datetime-picker';
 
-const { toPersianDigits, formatJalali, toGregorianIso, toJalaliPickerValue } = usePersianDate();
+const { toPersianDigits, formatJalali, toGregorianIso, toJalaliPickerValue, getTodayJalali } = usePersianDate();
+
 const { showSuccess, showError } = useToast();
 
 const {

src/views/financialReports/FinancialReportsView.vue

@@ -171,11 +171,11 @@
             <div class="flex flex-column md:flex-row gap-3 mb-4 align-items-end">
               <div class="flex flex-column gap-2">
                 <label class="font-semibold text-sm">از تاریخ</label>
-                <DatePicker v-model="rangeForm.startDate" class="w-full text-sm" placeholder="1403/01/01" />
+                <DatePicker v-model="rangeForm.startDate" class="w-full text-sm" :placeholder="rangeForm.startDate || getTodayJalali()" />
               </div>
               <div class="flex flex-column gap-2">
                 <label class="font-semibold text-sm">تا تاریخ</label>
-                <DatePicker v-model="rangeForm.endDate" class="w-full text-sm" placeholder="1403/01/30" />
+                <DatePicker v-model="rangeForm.endDate" class="w-full text-sm" :placeholder="rangeForm.endDate || getTodayJalali()" />
               </div>
               <Button label="این ماه" text size="small" @click="setThisMonth" />
               <Button label="نمایش گزارش" icon="pi pi-search" :loading="isRangeReportLoading" @click="loadRangeReport" />
@@ -340,7 +340,7 @@ import TabPanel from 'primevue/tabpanel';
 import DatePicker from 'vue3-persian-datetime-picker';
 
 const route = useRoute();
-const { toPersianDigits, formatJalali, toGregorianIso, toJalaliPickerValue } = usePersianDate();
+const { toPersianDigits, formatJalali, toGregorianIso, toJalaliPickerValue, getTodayJalali } = usePersianDate();
 const { showError } = useToast();
 
 const formatToman = (value) => `${toPersianDigits(Math.round(value || 0).toLocaleString())} تومان`;

src/views/payments/PaymentDetailView.vue

@@ -164,11 +164,11 @@
         </div>
         <div class="flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ سررسید *</label>
-          <DatePicker v-model="trxForm.dueDate" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="trxForm.dueDate" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
         <div v-if="trxForm.status === 'paid'" class="flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ پرداخت</label>
-          <DatePicker v-model="trxForm.date" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="trxForm.date" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
         <div v-if="trxForm.status === 'paid'" class="flex flex-column gap-2">
           <label class="font-semibold text-sm">شماره فیش / پیگیری</label>
@@ -185,6 +185,7 @@
             placeholder="یادداشت داخلی درباره این تراکنش…"
           />
         </div>
+        <NotifyChannelsField :notify="trxNotify" />
       </div>
       <template #footer>
         <Button label="انصراف" text severity="secondary" @click="showTransactionModal = false" />
@@ -209,11 +210,11 @@
         </div>
         <div class="flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ سررسید *</label>
-          <DatePicker v-model="editForm.dueDate" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="editForm.dueDate" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
         <div v-if="editForm.status === 'paid'" class="flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ پرداخت</label>
-          <DatePicker v-model="editForm.date" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="editForm.date" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
         <div v-if="editForm.status === 'paid'" class="flex flex-column gap-2">
           <label class="font-semibold text-sm">شماره فیش / پیگیری</label>
@@ -231,6 +232,7 @@
           />
         </div>
       </div>
+
       <template #footer>
         <Button label="انصراف" text severity="secondary" @click="showEditModal = false" />
         <Button label="ذخیره تغییرات" icon="pi pi-check" severity="success" :loading="isSubmittingEdit" @click="handleUpdateTransaction" />
@@ -263,6 +265,7 @@ import { getPayableAmount } from '@/utils/paymentAmount';
 import PageHeader from '@/components/common/PageHeader.vue';
 import PermissionGate from '@/components/common/PermissionGate.vue';
 import StatusTag from '@/components/common/StatusTag.vue';
+import NotifyChannelsField from '@/components/common/NotifyChannelsField.vue';
 import Button from 'primevue/button';
 import Tag from 'primevue/tag';
 import DataTable from 'primevue/datatable';
@@ -276,7 +279,7 @@ import DatePicker from 'vue3-persian-datetime-picker';
 
 const route = useRoute();
 const paymentId = route.params.id;
-const { toPersianDigits, formatJalali, toJalaliPickerValue, toGregorianIso } = usePersianDate();
+const { toPersianDigits, formatJalali, toJalaliPickerValue, toGregorianIso, getTodayJalali } = usePersianDate();
 const { showSuccess, showError } = useToast();
 
 const payment = ref(null);
@@ -288,6 +291,7 @@ const isSubmittingEdit = ref(false);
 const isSubmittingCancel = ref(false);
 const editingTransactionId = ref(null);
 const cancellingTransactionId = ref(null);
+const trxNotify = reactive({ sms: true, email: true, bot: true });
 
 const methodOptions = [
   { label: 'کارت به کارت', value: 'card' },
@@ -305,8 +309,8 @@ const defaultTrxForm = () => ({
   status: 'paid',
   method: 'card',
   receiptNumber: '',
-  dueDate: '',
+  dueDate: getTodayJalali(),
-  date: '',
+  date: getTodayJalali(),
   notes: ''
 });
 
@@ -348,10 +352,6 @@ const handleRecordTransaction = async () => {
   if (!trxForm.dueDate) { showError('لطفا تاریخ سررسید را وارد کنید'); return; }
   const dueDate = toGregorianIso(trxForm.dueDate);
   if (!dueDate) { showError('تاریخ سررسید نامعتبر است'); return; }
-  if (trxForm.status === 'paid' && !trxForm.receiptNumber) {
-    showError('لطفا شماره فیش یا پیگیری را وارد کنید');
-    return;
-  }
 
   isSubmittingTrx.value = true;
   try {
@@ -359,11 +359,12 @@ const handleRecordTransaction = async () => {
       amount: trxForm.amount,
       status: trxForm.status,
       dueDate,
-      notes: trxForm.notes || undefined
+      notes: trxForm.notes || undefined,
+      notify: { ...trxNotify }
     };
     if (trxForm.status === 'paid') {
       payload.method = trxForm.method;
-      payload.receiptNumber = trxForm.receiptNumber;
+      payload.receiptNumber = trxForm.receiptNumber || '';
       const paymentDate = toGregorianIso(trxForm.date);
       if (paymentDate) payload.date = paymentDate;
     }
@@ -373,6 +374,9 @@ const handleRecordTransaction = async () => {
     showSuccess('تراکنش جدید با موفقیت ثبت شد');
     showTransactionModal.value = false;
     Object.assign(trxForm, defaultTrxForm());
+    trxNotify.sms = true;
+    trxNotify.email = true;
+    trxNotify.bot = true;
   } catch (err) {
     showError(err);
   } finally {
@@ -380,6 +384,7 @@ const handleRecordTransaction = async () => {
   }
 };
 
+
 const openEditTransaction = (trx) => {
   if (isTransactionCancelled(trx)) return;
   editingTransactionId.value = trx._id || trx.id;

src/views/payments/PaymentListView.vue

@@ -141,7 +141,7 @@
 
         <div class="flex flex-column gap-2">
           <label class="font-semibold text-sm">تاریخ سررسید *</label>
-          <DatePicker v-model="createForm.dueDate" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="createForm.dueDate" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
 
         <div class="flex flex-column gap-2">
@@ -187,6 +187,7 @@ import PermissionGate from '@/components/common/PermissionGate.vue';
 import StatusTag from '@/components/common/StatusTag.vue';
 import NotifyChannelsField from '@/components/common/NotifyChannelsField.vue';
 import { getPayableAmount } from '@/utils/paymentAmount';
+import { calculateClassMidDate } from '@/utils/classSchedule';
 import Button from 'primevue/button';
 import Column from 'primevue/column';
 import Tag from 'primevue/tag';
@@ -198,7 +199,8 @@ import Checkbox from 'primevue/checkbox';
 import Textarea from 'primevue/textarea';
 import DatePicker from 'vue3-persian-datetime-picker';
 
-const { toPersianDigits, formatJalali, toGregorianIso } = usePersianDate();
+const { toPersianDigits, formatJalali, toGregorianIso, getTodayJalali } = usePersianDate();
+
 const { showSuccess, showError } = useToast();
 
 const {
@@ -269,11 +271,12 @@ const onClassesSelected = () => {
   if (!createForm.classes || createForm.classes.length === 0) {
     createForm.amount = 0;
     createForm.discount = 0;
+    createForm.dueDate = getTodayJalali();
     return;
   }
   let totalFee = 0;
   createForm.classes.forEach((classId) => {
-    const c = classesList.value.find((item) => (item._id || item.id) === classId);
+    const c = classesList.value.find((item) => String(item._id || item.id) === String(classId));
     if (c) {
       totalFee += (c.tuitionFee || c.course?.price || 0);
     }
@@ -284,6 +287,11 @@ const onClassesSelected = () => {
   if ((createForm.discount || 0) > (createForm.amount || 0)) {
     createForm.discount = createForm.amount || 0;
   }
+
+  const firstSelectedClass = classesList.value.find((item) => String(item._id || item.id) === String(createForm.classes[0]));
+  if (firstSelectedClass) {
+    createForm.dueDate = calculateClassMidDate(firstSelectedClass);
+  }
 };
 
 const resetCreateForm = () => {
@@ -292,13 +300,14 @@ const resetCreateForm = () => {
   createForm.amount = 0;
   createForm.discount = 0;
   createForm.notes = '';
-  createForm.dueDate = '';
+  createForm.dueDate = getTodayJalali();
   hasDiscount.value = false;
   createNotify.sms = true;
   createNotify.email = true;
   createNotify.bot = true;
 };
 
+
 const openCreateModal = () => {
   resetCreateForm();
   showCreateModal.value = true;

src/views/sessions/SessionFormView.vue

@@ -45,7 +45,7 @@
 
         <div class="col-12 md:col-6 flex flex-column gap-2">
           <label class="font-semibold text-sm">{{ $t('sessions.date') }} *</label>
-          <DatePicker v-model="form.day" class="w-full text-sm" placeholder="1403/01/01" />
+          <DatePicker v-model="form.day" class="w-full text-sm" :placeholder="getTodayJalali()" />
         </div>
 
         <div class="col-12 md:col-3 flex flex-column gap-2">

src/views/settings/SettingsView.vue

@@ -7,7 +7,7 @@
     />
 
     <Tabs value="0" class="surface-card border-round-xl border-1 border-color shadow-sm">
-      <TabList>
+      <TabList :scrollable="true">
         <Tab value="0">کانال‌ها</Tab>
         <Tab value="1">اطلاع‌رسانی</Tab>
         <Tab value="2">قالب‌های پیامک</Tab>