Allow user pay only more than their debt

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">