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

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;