QUick Transaction

GoldenThrust · Feb 24, 2024 · 0051184 · 0051184
1 parent 7ccc2c0
commit 0051184
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 40 deletions.
diff --git a/clients/users/static/users/scripts/dashboard.js b/clients/users/static/users/scripts/dashboard.js
@@ -63,7 +63,7 @@ function drawChart(data) {
             categories: longestArrayofDate()
         },
         stroke: {
-            curve: 'smooth',
+            // curve: 'smooth',
         },
         colors:['#F44336', '#E91E63', '#c1311e'],
         fill: {
@@ -96,4 +96,9 @@ function drawChart(data) {
 
     let chart = new ApexCharts(lineChart, options);
     chart.render();
-}
+}
+
+
+
+const quickTransfer = document.querySelector('.quick-transfer');
+const quickDeposit = document.querySelector('.quick-deposit');
diff --git a/clients/users/static/users/scripts/headers.js b/clients/users/static/users/scripts/headers.js
@@ -7,10 +7,15 @@ const accountForm = document.querySelector('.account-form');
 const accountType = document.querySelector('#account_type');
 const currency = document.querySelector('#currency');
 const CreateAccountBtn = document.querySelector('#create-account-btn');
+const CancelAccountBtn = document.querySelector('#cancel-account-btn');
 const unreadNotification = document.querySelectorAll('.unread-notification')
 const unreadNotifications = document.querySelector('.unread-notifications')
 const notificationCount = document.querySelector('.notification-count');
 
+CancelAccountBtn.addEventListener('click', () => {
+    accountForm.classList.add('d-none');
+});
+
 if (addAccount.length) {
     addAccount.forEach(element => {
         element.addEventListener('change', () => {

diff --git a/clients/users/static/users/styles/body.css b/clients/users/static/users/styles/body.css
@@ -31,13 +31,13 @@ main {
     box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.501);
 }
 
-.quick-transaction .transfer {
+.quick-transfer {
     background-color: #5E3FBE;
     color: #F4F4FE;
     margin-right: 80px;
 }
 
-.quick-transaction .deposit {
+.quick-deposit {
     background-color: #F4F0FD;
 }
 

diff --git a/clients/users/static/users/styles/headers.css b/clients/users/static/users/styles/headers.css
@@ -74,22 +74,6 @@ aside.main-nav:hover {
     box-shadow: none;
 }
 
-
-aside.account-form {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.1);
-    z-index: 1;
-}
-
-aside.account-form form {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
 header .searchbar {
     height: 65%;
     border: 1px solid #5E3FBE;

diff --git a/clients/users/static/users/styles/main.css b/clients/users/static/users/styles/main.css
@@ -38,4 +38,22 @@
 .profile-glow:hover {
     border: 1px solid #b70202;
     box-shadow: 0 0 5px #b70202;
-}
+}
+
+aside.account-form {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: 20;
+    overflow: hidden;
+}
+
+aside.account-form form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
diff --git a/clients/users/templates/users/dashboard.html b/clients/users/templates/users/dashboard.html
@@ -4,30 +4,40 @@
 {% block content %}
   {% include 'users/includes/header.html' %}
   <main class="float-end">
-
     <aside class="account-form d-none">
       <form method="POST" class="border border-primary px-5 py-2 shadow p-3 mb-5 bg-body-tertiary rounded">
-        {% csrf_token %}
+        {% comment %} {% csrf_token %} {% endcomment %}
         <fieldset class="form-group">
-          <legend class="border-bottom mb-4">Send Account</legend>
+          <legend class="border-bottom mb-4">Make Transfer</legend>
           <div id="div_account_type" class="mb-3">
-            <label for="account_type" class="form-label">Account type</label> <select name="account_type" class="select form-select" id="account_type">
-              <option value="SAVINGS" selected>Savings</option>
-              <option value="CURRENT">Current</option>
-            </select>
+            <label for="quick-account_number" class="form-label">Account Number</label>
+            <input type="number" name="quick-account_number" id="quick-account_number" />
           </div>
           <div id="div_currency" class="mb-3">
-            <label for="currency" class="form-label">Currency</label> <select name="currency" class="select form-select" id="currency">
-              <option value="USD">USD</option>
-              <option value="EUR">EUR</option>
-              <option value="GBP">GBP</option>
-              <option value="NGN" selected>NGN</option>
-            </select>
+            <label for="quick-amount" class="form-label">Amount</label>
+            <input type="number" name="quick-amount" id="amount" />
           </div>
 
           <div class="form-group mb-3">
-            <button class="btn btn-outline-info w-100" id="create-account-btn" type="button">Transfer</button>
-            <button class="btn btn-outline-info w-100" id="create-account-btn" type="button">Deposit</button>
+            <button class="btn btn-outline-info w-100" id="cancel-account-btn" type="button">Cancel</button>
+            <button class="btn btn-outline-info w-100" id="create-account-btn" type="button">Send</button>
+          </div>
+        </fieldset>
+      </form>
+    </aside>
+    <aside class="account-form d-none">
+      <form method="POST" class="border border-primary px-5 py-2 shadow p-3 mb-5 bg-body-tertiary rounded">
+        {% comment %} {% csrf_token %} {% endcomment %}
+        <fieldset class="form-group">
+          <legend class="border-bottom mb-4">Make Deposit</legend>
+          <div id="div_currency" class="mb-3">
+            <label for="quick-deposit-amount" class="form-label">Amount</label>
+            <input type="number" name="quick-deposit-amount" id="amount" />
+          </div>
+
+          <div class="form-group mb-3">
+            <button class="btn btn-outline-info w-100" id="cancel-account-btn" type="button">Cancel</button>
+            <button class="btn btn-outline-info w-100" id="create-account-btn" type="button">Send</button>
           </div>
         </fieldset>
       </form>
@@ -39,8 +49,8 @@
           <div>
             <!-- Quick Transactions -->
             <div class="quick-transaction">
-              <button class="transfer rounded-1 p-2 fw-semibold shadow-sm">Quick Transfer</button>
-              <button class="deposit rounded-1 p-2 fw-semibold shadow-sm">Quick deposit</button>
+              <button class="quick-transfer rounded-1 p-2 fw-semibold shadow-sm">Quick Transfer</button>
+              <button class="quick-deposit rounded-1 p-2 fw-semibold shadow-sm">Quick deposit</button>
             </div>
 
             <!-- account status card -->
@@ -70,6 +80,7 @@
               </span>
             </div>
 
+            {% comment %} Warning: Don't do this {% if (top_partners.all|length) > 0 %} avoid adding bracket {% endcomment %}
             {% if top_partners.all|length > 0 %}
               <div class="transaction-partners mt-4">
                 <h2>Send money to</h2>
@@ -88,7 +99,8 @@ <h2>Send money to</h2>
                 </div>
               </div>
             {% endif %}
-
+
+            {% comment %} Warning: Don't do this {% if (recent_transactions.all|length) > 0 %}  avoid adding bracket {% endcomment %}
             {% if recent_transactions.all|length > 0 %}
               <div class="recent-transactions mt-3">
                 <h2>Recent Transactions</h2>

diff --git a/clients/users/templates/users/includes/header.html b/clients/users/templates/users/includes/header.html
@@ -25,7 +25,7 @@
       </div>
 
       <div class="form-group mb-3">
-        <button class="btn btn-outline-info w-100" id="create-account-btn" type="button">Cancel</button>
+        <button class="btn btn-outline-info w-100" id="cancel-account-btn" type="button">Cancel</button>
         <button class="btn btn-outline-info w-100" id="create-account-btn" type="button">Create</button>
       </div>
     </fieldset>