Admin UI improvements

css/main.css

@@ -728,26 +728,58 @@ strip-option:last-of-type {
 }
 
 .activity-card--request,
-.activity-card--pending,
+.activity-card--pending {
-.activity-card--admin {
   grid-template-areas: "icon . amount" "icon time .";
 }
 .activity-card--request .activity-card__icon,
-.activity-card--pending .activity-card__icon,
+.activity-card--pending .activity-card__icon {
-.activity-card--admin .activity-card__icon {
   grid-area: icon;
 }
 .activity-card--request .activity-card__time,
-.activity-card--pending .activity-card__time,
+.activity-card--pending .activity-card__time {
-.activity-card--admin .activity-card__time {
   grid-area: time;
 }
 .activity-card--request .activity-card__amount,
-.activity-card--pending .activity-card__amount,
+.activity-card--pending .activity-card__amount {
-.activity-card--admin .activity-card__amount {
   grid-area: amount;
   text-align: end;
 }
+.activity-card--request sm-spinner,
+.activity-card--pending sm-spinner {
+  --height: 1rem;
+  --width: 1rem;
+}
+
+.activity-card--admin {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  grid-template-areas: "icon . button" "icon time button";
+}
+.activity-card--admin .activity-card__icon {
+  grid-area: icon;
+}
+.activity-card--admin .activity-card__time {
+  grid-area: time;
+}
+.activity-card--admin .activity-card__action {
+  grid-area: button;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background-color: var(--accent-color--light);
+  color: var(--accent-color);
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.activity-card--admin sm-spinner {
+  --height: 1rem;
+  --width: 1rem;
+}
 
 #pending_transaction:not(:empty) {
   margin-bottom: 2rem;
@@ -1255,12 +1287,8 @@ strip-option:last-of-type {
   grid-template-columns: minmax(0, 1fr);
 }
 
-#admin_request_selector {
-  margin: 1rem 0 1.5rem 0;
-  justify-self: flex-start;
-}
-
 #admin_requests_container {
+  margin-top: 1rem;
   padding-bottom: 3rem;
 }
 
@@ -1311,6 +1339,15 @@ strip-option:last-of-type {
   #user_section {
     left: 0;
   }
+
+  #admin__header {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr);
+    text-align: center;
+    justify-items: center;
+  }
 }
 @media screen and (min-width: 640px) {
   #confirmation_popup {
@@ -1381,6 +1418,18 @@ strip-option:last-of-type {
   #transaction_detail__icon {
     justify-self: flex-start;
   }
+
+  #admin__header {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
 }
 @media screen and (max-width: 1024px) {
   #user_section {

css/main.scss

@@ -632,8 +632,7 @@ strip-option {
   }
 }
 .activity-card--request,
-.activity-card--pending,
+.activity-card--pending {
-.activity-card--admin {
   grid-template-areas: "icon . amount" "icon time .";
   .activity-card__icon {
     grid-area: icon;
@@ -645,6 +644,34 @@ strip-option {
     grid-area: amount;
     text-align: end;
   }
+  sm-spinner {
+    --height: 1rem;
+    --width: 1rem;
+  }
+}
+.activity-card--admin {
+  align-items: center;
+  grid-template-areas: "icon . button" "icon time button";
+  .activity-card__icon {
+    grid-area: icon;
+  }
+  .activity-card__time {
+    grid-area: time;
+  }
+  .activity-card__action {
+    grid-area: button;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background-color: var(--accent-color--light);
+    color: var(--accent-color);
+    justify-content: flex-end;
+    align-items: center;
+  }
+  sm-spinner {
+    --height: 1rem;
+    --width: 1rem;
+  }
 }
 #pending_transaction:not(:empty) {
   margin-bottom: 2rem;
@@ -1044,11 +1071,8 @@ strip-option {
   padding: 0 1.5rem;
   grid-template-columns: minmax(0, 1fr);
 }
-#admin_request_selector {
-  margin: 1rem 0 1.5rem 0;
-  justify-self: flex-start;
-}
 #admin_requests_container {
+  margin-top: 1rem;
   padding-bottom: 3rem;
 }
 @media screen and (max-width: 640px) {
@@ -1085,6 +1109,14 @@ strip-option {
   #user_section {
     left: 0;
   }
+  #admin__header {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr);
+    text-align: center;
+    justify-items: center;
+  }
 }
 @media screen and (min-width: 640px) {
   #confirmation_popup {
@@ -1147,6 +1179,11 @@ strip-option {
   #transaction_detail__icon {
     justify-self: flex-start;
   }
+  #admin__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 @media screen and (max-width: 1024px) {
   #user_section {

index.html

@@ -350,14 +350,14 @@
                 <sm-button id="sign_out_button" onclick="signOut()">Sign out</sm-button>
             </div>
             <div id="admin" class="sub-page hide-completely">
-                <h4>Requests</h4>
+                <div id="admin__header">
-                <strip-select id="admin_request_selector">
+                    <h3 class="h3">Requests</h3>
-                    <strip-option value="all" selected>All</strip-option>
+                    <strip-select id="admin_request_selector">
-                    <strip-option value="openDeposit">Deposit</strip-option>
+                        <strip-option value="pending" selected>Pending</strip-option>
-                    <strip-option value="closeDeposit">Withdraw</strip-option>
+                        <strip-option value="completed">Completed</strip-option>
-                    <strip-option value="openLoan">Loan</strip-option>
+                        <strip-option value="failed">Failed</strip-option>
-                    <strip-option value="closeLoan">Repay</strip-option>
+                    </strip-select>
-                </strip-select>
+                </div>
                 <div id="admin_requests_container"></div>
             </div>
         </section>
@@ -379,9 +379,6 @@
                         <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
                     </svg>
                     Account summary
-                    <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
-                        Refresh
-                    </button>
                 </h4>
                 <div id="account_chart_container">
                     <div id="chart_legend">
@@ -418,7 +415,7 @@
                 </div>
             </div>
             <div>
-                <h4 class="flex align-center">
+                <h4 class="flex align-center space-between">
                     <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20"
                         fill="currentColor">
                         <path fill-rule="evenodd"
@@ -426,6 +423,9 @@
                             clip-rule="evenodd" />
                     </svg>
                     My balance
+                    <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
+                        Refresh
+                    </button>
                 </h4>
                 <div class="balance-card">
                     <div class="balance-card__icon">
@@ -573,9 +573,8 @@
         <li class="activity-card activity-card--admin">
             <div class="activity-card__icon"></div>
             <div class="activity-card__title"></div>
-            <h4 class="activity-card__amount"></h4>
             <time class="activity-card__time"></time>
-            <button class="activity-card__action">Process</button>
+            <button class="activity-card__action button">Process</button>
         </li>
     </template>
     <template id="request_template">
@@ -1155,6 +1154,10 @@
                 }
                 return icon
             },
+            isObjectEmpty(object) {
+                for (const key in object) return false;
+                return true;
+            },
             getLastTransaction() {
                 const allRequests = bank_app.viewAllRequests()
                 let key
@@ -1167,9 +1170,10 @@
         }
         const render = {
             adminRequestCard(activityDetails = {}) {
-                const { requestID, amount, rtype, timestamp, status } = activityDetails
+                const { rtype, id, status } = activityDetails
                 const card = getRef('admin_request_template').content.cloneNode(true).firstElementChild
                 const icon = utils.getRelatedIcon(rtype)
+                const selectedStatus = getRef('admin_request_selector').value
                 let action = ''
                 switch (rtype) {
                     case 'openDeposit':
@@ -1182,15 +1186,16 @@
                         action = 'Get loan'
                         break
                     case 'closeLoan':
-                        action = 'Repay loan'
+                        action = 'Loan repayment'
                         break
                 }
                 card.dataset.type = rtype
-                card.dataset.reqId = requestID
+                card.dataset.reqId = id
                 card.querySelector('.activity-card__icon').innerHTML = icon
                 card.querySelector('.activity-card__title').textContent = action
-                card.querySelector('.activity-card__time').textContent = getFormattedTime(timestamp)
+                card.querySelector('.activity-card__time').textContent = getFormattedTime(id.split('_')[0])
-                card.querySelector('.activity-card__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+                if (selectedStatus !== 'pending')
+                    card.querySelector('.activity-card__action').remove()
                 return card
             },
             requestCard(activityDetails = {}) {
@@ -1504,8 +1509,8 @@
         })
 
         function getAccounts() {
-            const currentStatus = getRef('accounts_status_selector').value
+            const statusFilter = getRef('accounts_status_selector').value
-            return bank_app.getUserDetails(myFloID).accounts.filter(({ status }) => status === currentStatus).reverse()
+            return bank_app.getUserDetails(myFloID).accounts.filter(({ status }) => status === statusFilter).reverse()
         }
 
         function showAccountDetails(params) {
@@ -1734,12 +1739,12 @@
         }
 
         function getAdminRequests() {
-            const allRequests = getRequests().filter(({ status }) => status !== 'completed')
+            const allRequests = utils.getArrayOfObj(bank_app.viewAllRequests()).reverse()
-            const typeOfRequest = getRef('admin_request_selector').value
+            const selectedStatus = getRef('admin_request_selector').value
-            if (typeOfRequest !== 'all') {
+            if (selectedStatus === 'failed') {
-                return allRequests.filter(({ rtype }) => rtype === typeOfRequest)
+                return allRequests.filter(({ status }) => status.includes(' '))
             } else {
-                return allRequests
+                return allRequests.filter(({ status }) => status === selectedStatus)
             }
         }
         getRef('admin_request_selector').addEventListener('change', e => {
@@ -1751,6 +1756,7 @@
                 const target = e.target.closest('button')
                 const request = e.target.closest('.activity-card')
                 const reqID = request.dataset.reqId
+                target.innerHTML = '<sm-spinner></sm-spinner>'
                 try {
                     switch (request.dataset.type) {
                         case 'openDeposit':
@@ -1771,10 +1777,11 @@
                             break
                     }
                     request.remove()
+                    refreshBalance()
                 }
                 catch (err) {
                     notify(err, 'error')
-
+                    target.textContent = 'Process'
                 }
             }
         })
@@ -1888,28 +1895,33 @@
 
         const reqCallback = (d, e) => {
             console.log(d)
-            if (isStartUpComplete) {
+            if (!utils.isObjectEmpty(d)) {
-                requestResponse.updateMap()
+                if (isStartUpComplete) {
-            }
+                    requestResponse.updateMap()
-            if (floGlobals.adminID === myFloID) {
+                }
-                if (adminRequestsLoader) {
+                if (floGlobals.adminID === myFloID) {
-                    adminRequestsLoader.reset()
+                    if (adminRequestsLoader) {
-                    notify('New request arrived')
+                        adminRequestsLoader.reset()
+                        notify('New request arrived')
+                    }
+                } else {
+                    // checkPendingTransaction()
                 }
-            } else {
-                // checkPendingTransaction()
             }
         }
 
-        const responseCallback = (d, e) => {
+        const responseCallback = async (d, e) => {
             if (e) console.error("DummyCallback", e);
             console.log("response", d);
-            if (floGlobals.adminID === myFloID) {
+            if (!utils.isObjectEmpty(d)) {
-            } else {
+                if (isStartUpComplete) {
-                checkPendingTransaction()
+                    requestResponse.updateMap()
-            }
+                }
-            if (isStartUpComplete) {
+                if (floGlobals.adminID === myFloID) {
-                requestResponse.updateMap()
+                } else {
+                    await bank_app.refreshData()
+                    checkPendingTransaction()
+                }
             }
         }
     </script>