Allow user pay only more than their debt

resources/js/components/Admin/AppInputText.vue

@@ -10,12 +10,12 @@
 		<slot></slot>
 
 		<!--Input Description-->
-		<small v-if="description" class="text-xs text-gray-500 pt-2 leading-4 block" v-html="description"></small>
-
-		<!--Input Description-->
-		<span v-if="error" class="text-red pt-2 text-xs">
+		<span v-if="error" class="text-red-800 pt-2 text-xs">
 			{{ error }}
 		</span>
+
+		<!--Input Description-->
+		<small v-if="description" class="text-xs text-gray-500 pt-2 leading-4 block" v-html="description"></small>
 	</div>
 </template>
 

resources/js/components/Subscription/UserBalance.vue

@@ -10,7 +10,7 @@
 
 		<!-- Make payment form -->
 		<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
-			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
+			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Amount" :rules="`required|min_value:${user.data.meta.totalDebt.amount}`">
 				<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
 					<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
 						<input v-model="chargeAmount"

resources/js/components/Subscription/UserFailedPayments.vue

@@ -5,7 +5,7 @@
 		</FormLabel>
 
 		<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
-			-{{ user.data.meta.totalDebt }}
+			-{{ user.data.meta.totalDebt.formatted }}
 		</b>
 
 		<b class="mb-3 block text-sm text-gray-400 mb-5">