Refactor API usage analytics and playground components

- Added conditional rendering for production environment in ApiUsage.vue.
- Enhanced status badge styles in Business.vue for better UI consistency.
- Simplified approval and rejection logic in BusinessDetails.vue, improving error handling and user notifications.
- Corrected description text in KybWidgetConfig/Index.vue for clarity.
- Integrated loading component in ApproveCustomerOnboarding.vue and CreditRecharge.vue, improving user experience during async operations.
- Removed redundant feedback message handling in ComplianceCheck.vue, replacing it with direct notifications.

Author: Pratap2018

src/App.vue

@@ -248,6 +248,40 @@
   background-color: transparent !important;
   color: #66666a !important;
 }
+
+/* Environment Banner */
+.env-banner {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border-radius: 20px;
+}
+
+.env-banner--dev {
+  background-color: #fef3c7;
+  color: #92400e;
+  border: 1px solid #fde68a;
+}
+
+.env-banner__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background-color: #d97706;
+}
+
+.env-banner__app {
+  font-weight: 400;
+  opacity: 0.75;
+  text-transform: none;
+  letter-spacing: 0;
+}
 </style>
 <template>
   <div id="app" data-app>
@@ -262,6 +296,14 @@
         <img src="./assets/Entity_full.png" alt="Logo" class="nav-logo-img" />
       </b-navbar-brand>
 
+      <div
+        v-if="getSelectedService && getSelectedService.env !== 'prod'"
+        class="env-banner env-banner--dev "
+      >
+        <span class="env-banner__dot"></span>
+        <span class="env-banner__label">Development Mode</span>
+      </div>
+
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
       <b-collapse id="nav-collapse" is-nav v-if="userDetails">

src/components/business-details/BusinessInformation.vue

@@ -335,30 +335,30 @@ export default {
 }
 
 .status-submitted {
-  background: #dbeafe;
-  color: #1e40af;
+  background-color: #f3f4f6;
+  color: #374151;
 }
 
 .status-inprogress {
-  background: #fef3c7;
+  background-color: #fef3c7;
   color: #92400e;
 }
 
+.status-completed {
+  background-color: #dbeafe;
+  color: #1e40af;
+}
+
 .status-approved {
-  background: #d1fae5;
-  color: #065f46;
+  background-color: #f0fdf4;
+  color: #166534;
 }
 
 .status-rejected {
-  background: #fee2e2;
+  background-color: #fef2f2;
   color: #991b1b;
 }
 
-.status-completed {
-  background: #dcfce7;
-  color: #166534;
-}
-
 /* Verification Progress */
 .verification-progress {
   display: grid;

src/components/login/mfa/VerifyMfa.vue

@@ -7,7 +7,7 @@
                 <div class="row">
                     <div class="col">
                         <div class="form-group">
-                            <tool-tip infoMessage="Select issuer DID for this app"></tool-tip>
+                            <tool-tip infoMessage="Select An Authentication App"></tool-tip>
                             <label for="selectService"><strong>Select An Authentication App<span
                                         style="color: red">*</span>:
                                 </strong></label>
@@ -24,7 +24,7 @@
                 <div class="row" v-if="authenticationMethod">
                     <div class="col">
                         <div class="form-group">
-                            <tool-tip infoMessage="Select issuer DID for this app"></tool-tip>
+                            <tool-tip infoMessage="Enter the 6-digit code from your authentication app"></tool-tip>
                             <label for="selectService"><strong>A 6-digit authentication code has been sent to your
                                     device.
                                     Enter the code to