From 74c26a8e48cadc40f3b38da8a2b9666840633816 Mon Sep 17 00:00:00 2001
From: Kavehhn174 <Kavehhn174@gmail.com>
Date: Sun, 16 Aug 2026 07:04:16 +0330
Subject: [PATCH] fix: show payable amount after discount on payment views

Hide the payable row when there is no discount, clamp create-form discounts, and cap notes length.
---
 src/views/payments/PaymentDetailView.vue | 3 ++-
 src/views/payments/PaymentListView.vue   | 5 +++++
 src/views/users/UserDetailView.vue       | 6 +++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/views/payments/PaymentDetailView.vue b/src/views/payments/PaymentDetailView.vue
index 8895406..1c6b007 100644
--- a/src/views/payments/PaymentDetailView.vue
+++ b/src/views/payments/PaymentDetailView.vue
@@ -33,7 +33,7 @@
               <span class="text-muted text-xs block mb-1">تخفیف</span>
               <span class="font-semibold text-orange-500 text-lg">{{ toPersianDigits((payment.discount || 0).toLocaleString()) }} تومان</span>
             </div>
-            <div>
+            <div v-if="payment.discount">
               <span class="text-muted text-xs block mb-1">مبلغ قابل پرداخت</span>
               <span class="font-bold text-color text-xl">{{ toPersianDigits(payableAmount.toLocaleString()) }} تومان</span>
             </div>
@@ -120,6 +120,7 @@
             v-model="trxForm.notes"
             rows="3"
             class="w-full text-sm"
+            maxlength="5000"
             placeholder="یادداشت داخلی درباره این تراکنش…"
           />
         </div>
diff --git a/src/views/payments/PaymentListView.vue b/src/views/payments/PaymentListView.vue
index dae9402..dac5efe 100644
--- a/src/views/payments/PaymentListView.vue
+++ b/src/views/payments/PaymentListView.vue
@@ -151,6 +151,7 @@
             v-model="createForm.notes"
             rows="3"
             class="w-full text-sm"
+            maxlength="5000"
             placeholder="یادداشت داخلی درباره این صورتحساب…"
           />
         </div>
@@ -267,6 +268,7 @@ const onClassesSelected = () => {
 
   if (!createForm.classes || createForm.classes.length === 0) {
     createForm.amount = 0;
+    createForm.discount = 0;
     return;
   }
   let totalFee = 0;
@@ -279,6 +281,9 @@ const onClassesSelected = () => {
   if (totalFee > 0) {
     createForm.amount = totalFee;
   }
+  if ((createForm.discount || 0) > (createForm.amount || 0)) {
+    createForm.discount = createForm.amount || 0;
+  }
 };
 
 const resetCreateForm = () => {
diff --git a/src/views/users/UserDetailView.vue b/src/views/users/UserDetailView.vue
index 3553af7..6d5d362 100644
--- a/src/views/users/UserDetailView.vue
+++ b/src/views/users/UserDetailView.vue
@@ -158,7 +158,10 @@
             <DataTable :value="payments" class="p-datatable-sm text-sm">
               <Column field="amount" header="مبلغ کل">
                 <template #body="{ data }">
-                  {{ toPersianDigits(data.amount?.toLocaleString()) }} تومان
+                  <div>{{ toPersianDigits(getPayableAmount(data).toLocaleString()) }} تومان</div>
+                  <small v-if="data.discount" class="text-muted text-xs">
+                    تخفیف {{ toPersianDigits((data.discount || 0).toLocaleString()) }} تومان
+                  </small>
                 </template>
               </Column>
               <Column field="paidAmount" header="پرداختی">
@@ -217,6 +220,7 @@ import { userApi } from '@/api/userApi';
 import { courseApi } from '@/api/courseApi';
 import { usePersianDate } from '@/composables/usePersianDate';
 import { useToast } from '@/composables/useToast';
+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';