From f71ac7df2a687598d51b56066b0a9e6e231c4ccf Mon Sep 17 00:00:00 2001
From: cavdy <cavdyofficials@gmail.com>
Date: Sun, 28 Apr 2019 22:24:16 +0100
Subject: [PATCH] feature(admin and staff can view all accounts in account
 page):Admin and staff can view all account in accounts page Admin and staff
 can view all accounts in view accounts page [Deliver #165663799]

---
 frontend-app/accounts.html     |  10 +-
 frontend-app/activate.html     |  11 +-
 frontend-app/adduser.html      |  10 +-
 frontend-app/css/style.css     |  29 ++++-
 frontend-app/dashboard.html    |  10 +-
 frontend-app/js/allaccounts.js | 228 +++++++++++++++++++++++++++++++++
 frontend-app/staffs.html       |  10 +-
 frontend-app/transactions.html |  10 +-
 frontend-app/users.html        |  10 +-
 frontend-app/viewaccounts.html | 169 ++++++++++++++++++++++++
 package-lock.json              |  28 +++-
 server/v1/services/users.js    |   4 +-
 12 files changed, 469 insertions(+), 60 deletions(-)
 create mode 100644 frontend-app/js/allaccounts.js
 create mode 100644 frontend-app/viewaccounts.html

diff --git a/frontend-app/accounts.html b/frontend-app/accounts.html
index fccd7b6..2e5e2ae 100644
--- a/frontend-app/accounts.html
+++ b/frontend-app/accounts.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item sidebar-item-active">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -84,13 +87,6 @@ <h1 class="logo">Banka</h1>
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
                       elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
-                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/activate.html b/frontend-app/activate.html
index b89ee53..57ef907 100644
--- a/frontend-app/activate.html
+++ b/frontend-app/activate.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -84,14 +87,6 @@ <h1 class="logo">Banka</h1>
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
                       elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur
-                      adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
-                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/adduser.html b/frontend-app/adduser.html
index 5570aab..7b205d5 100644
--- a/frontend-app/adduser.html
+++ b/frontend-app/adduser.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -84,13 +87,6 @@ <h1 class="logo">Banka</h1>
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
                       elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
-                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/css/style.css b/frontend-app/css/style.css
index d866683..826ef6d 100644
--- a/frontend-app/css/style.css
+++ b/frontend-app/css/style.css
@@ -52,6 +52,7 @@ body,
 
 .wrapper {
   width: 100%;
+  height: 100vh;
   display: flex;
 }
 
@@ -63,7 +64,7 @@ body,
 */
 .sidebar {
   flex: 0 0 16rem;
-  min-height: 100vh;
+  height: 100%;
   background-image: linear-gradient(to bottom, var(--sidebar-color-2), var(--sidebar-color-1));
   transition: margin-left .3s;
   display: flex;
@@ -92,6 +93,10 @@ body,
   margin-bottom: auto;
 }
 
+.sidebar-list {
+  list-style: none;
+}
+
 .sidebar-item {
   position: relative;
 }
@@ -1115,6 +1120,28 @@ body,
     =======================
 */
 
+@media (min-width: 1600px) {
+  .container {
+    width: 100vw;
+    height: 100vh;
+    background-color: #006eb4;
+    background-image: url(../svg/rose.svg);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .wrapper {
+    height: 900px;
+    max-width: 1800px;
+  }
+}
+
 @media (max-width: 1140px) {
   .showcase-content {
     width: 90%;
diff --git a/frontend-app/dashboard.html b/frontend-app/dashboard.html
index e16c9b4..079761b 100644
--- a/frontend-app/dashboard.html
+++ b/frontend-app/dashboard.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -83,13 +86,6 @@ <h1 class="logo">Banka</h1>
                   <li class="item">
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis similique
-                      soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/js/allaccounts.js b/frontend-app/js/allaccounts.js
new file mode 100644
index 0000000..860610e
--- /dev/null
+++ b/frontend-app/js/allaccounts.js
@@ -0,0 +1,228 @@
+const token = sessionStorage.getItem('token');
+const api = 'https://bankaapp-api.herokuapp.com/api';
+const go = document.querySelector('#go');
+const limitSelect = document.querySelector('#limit');
+const successMsg = document.querySelector('.successMsg');
+const errMsg = document.querySelector('.errMsg');
+const userTable = document.querySelector('.user-table');
+const queryForm = document.querySelector('.queryForm');
+const search = document.querySelector('#search');
+
+// DELETE FETCH REQUEST FOR ACCOUNTS
+const deleteApi = (url) => {
+  fetch(url, {
+    method: 'DELETE',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then(response => response.json());
+};
+
+// GET FETCH API REQUEST TO GET ALL ACCOUNTS OF A USER
+const getAccountsApi = (url) => {
+  fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then((response) => {
+      if (response.status === 403) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'you must be logged in to view accounts';
+      } else {
+        userTable.style.display = 'block';
+        queryForm.style.display = 'flex';
+        errMsg.parentElement.style.display = 'none';
+        errMsg.innerHTML = '';
+        return response.json();
+      }
+    })
+    .then((data1) => {
+      if (data1.status === 401) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'you must be an admin or staff to view accounts';
+      } else {
+        userTable.style.display = 'block';
+        queryForm.style.display = 'flex';
+        errMsg.parentElement.style.display = 'none';
+        data1.data.map((i) => {
+          const table = document.querySelector('.table');
+          const tableRow = document.createElement('div');
+          tableRow.classList = 'table-row table-body';
+          const accountNumber = document.createElement('div');
+          accountNumber.className = 'account-index';
+          accountNumber.innerHTML = i.accountnumber;
+          const accountName = document.createElement('div');
+          accountName.className = 'account-name';
+          accountName.innerHTML = `${i.firstname} ${i.lastname}`;
+          const status = document.createElement('div');
+          status.className = 'account-status';
+          status.innerHTML = i.status;
+          const type = document.createElement('div');
+          type.className = 'activate';
+          type.innerHTML = i.type;
+          const deleteAccount = document.createElement('div');
+          deleteAccount.className = 'deactivate';
+          const aDeleteAccount = document.createElement('a');
+          aDeleteAccount.href = '#';
+          aDeleteAccount.className = 'deactivate-btn';
+          aDeleteAccount.innerHTML = 'Delete';
+          deleteAccount.appendChild(aDeleteAccount);
+          tableRow.appendChild(accountNumber);
+          tableRow.appendChild(accountName);
+          tableRow.appendChild(status);
+          tableRow.appendChild(type);
+          tableRow.appendChild(deleteAccount);
+          table.appendChild(tableRow);
+        });
+
+        // DELETE
+        const dels = document.querySelectorAll('.deactivate-btn');
+        dels.forEach((del) => {
+          del.addEventListener('click', (e) => {
+            const acnumber = e.target.parentElement.parentElement.children[0].innerHTML;
+            deleteApi(`${api}/v1/accounts/${acnumber}`);
+            e.target.parentElement.parentElement.remove();
+            successMsg.parentElement.style.display = 'flex';
+            successMsg.innerHTML = 'Account successfully deleted';
+            setInterval(() => {
+              location.reload(true);
+            }, 3000);
+          });
+        });
+      }
+      return data1;
+    });
+};
+getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
+
+// GET FETCH API REQUEST TO GET A SPECIFIC ACCOUNT OF A USER
+const getSpecficAccountApi = (url) => {
+  fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then((response) => {
+      if (response.status === 403) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'you must be logged in to view accounts';
+      } else {
+        userTable.style.display = 'block';
+        queryForm.style.display = 'flex';
+        errMsg.parentElement.style.display = 'none';
+        errMsg.innerHTML = '';
+        return response.json();
+      }
+    })
+    .then((data1) => {
+      if (data1.status === 401) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'you must be an admin or staff to view accounts';
+      } else if (data1.status === 404) {
+        errMsg.parentElement.style.display = 'flex';
+        userTable.style.display = 'none';
+        queryForm.style.display = 'none';
+        errMsg.innerHTML = 'no account found';
+      } else {
+        userTable.style.display = 'block';
+        queryForm.style.display = 'flex';
+        errMsg.parentElement.style.display = 'none';
+        const i = data1.data;
+        const table = document.querySelector('.table');
+        const tableRow = document.createElement('div');
+        tableRow.classList = 'table-row table-body';
+        const accountNumber = document.createElement('div');
+        accountNumber.className = 'account-index';
+        accountNumber.innerHTML = i.accountnumber;
+        const accountName = document.createElement('div');
+        accountName.className = 'account-name';
+        accountName.innerHTML = `${i.firstname} ${i.lastname}`;
+        const status = document.createElement('div');
+        status.className = 'account-status';
+        status.innerHTML = i.status;
+        const type = document.createElement('div');
+        type.className = 'activate';
+        type.innerHTML = i.type;
+        const deleteAccount = document.createElement('div');
+        deleteAccount.className = 'deactivate';
+        const aDeleteAccount = document.createElement('a');
+        aDeleteAccount.href = '#';
+        aDeleteAccount.className = 'deactivate-btn';
+        aDeleteAccount.innerHTML = 'Delete';
+        deleteAccount.appendChild(aDeleteAccount);
+        tableRow.appendChild(accountNumber);
+        tableRow.appendChild(accountName);
+        tableRow.appendChild(status);
+        tableRow.appendChild(type);
+        tableRow.appendChild(deleteAccount);
+        table.appendChild(tableRow);
+
+        // DELETE
+        const dels = document.querySelectorAll('.deactivate-btn');
+        dels.forEach((del) => {
+          del.addEventListener('click', (e) => {
+            const acnumber = e.target.parentElement.parentElement.children[0].innerHTML;
+            deleteApi(`${api}/v1/accounts/${acnumber}`);
+            e.target.parentElement.parentElement.remove();
+            successMsg.parentElement.style.display = 'flex';
+            successMsg.innerHTML = 'Account successfully deleted';
+            setInterval(() => {
+              location.reload(true);
+            }, 3000);
+          });
+        });
+
+        return data1;
+      }
+    });
+};
+
+go.addEventListener('click', (e) => {
+  e.preventDefault();
+  const tableBodies = document.querySelectorAll('.table-body');
+  tableBodies.forEach((tableBody) => {
+    tableBody.remove();
+  });
+
+  getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
+});
+
+search.addEventListener('keyup', (e) => {
+  e.preventDefault();
+  const tableBodies = document.querySelectorAll('.table-body');
+  tableBodies.forEach((tableBody) => {
+    tableBody.remove();
+  });
+
+  getSpecficAccountApi(`${api}/v1/accounts/${search.value}`);
+});
diff --git a/frontend-app/staffs.html b/frontend-app/staffs.html
index cb5833e..5c1ef26 100644
--- a/frontend-app/staffs.html
+++ b/frontend-app/staffs.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -84,13 +87,6 @@ <h1 class="logo">Banka</h1>
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
                       elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
-                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/transactions.html b/frontend-app/transactions.html
index 1800c93..4ee951c 100644
--- a/frontend-app/transactions.html
+++ b/frontend-app/transactions.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item sidebar-item-active">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -84,13 +87,6 @@ <h1 class="logo">Banka</h1>
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
                       elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
-                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/users.html b/frontend-app/users.html
index b0cc892..2aefd6a 100644
--- a/frontend-app/users.html
+++ b/frontend-app/users.html
@@ -31,6 +31,9 @@ <h1 class="logo">Banka</h1>
             <li class="sidebar-item">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
+            <li class="sidebar-item">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
             <li class="sidebar-item">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
@@ -84,13 +87,6 @@ <h1 class="logo">Banka</h1>
                     <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
                       elit. Quae, optio?</a>
                   </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing.</a>
-                  </li>
-                  <li class="item">
-                    <a href="#" class="link">Lorem ipsum dolor sit amet consectetur adipisicing
-                      elit. Nobis similique soluta sit impedit, provident laborum?</a>
-                  </li>
                 </ul>
               </div>
             </div>
diff --git a/frontend-app/viewaccounts.html b/frontend-app/viewaccounts.html
new file mode 100644
index 0000000..81cb1f5
--- /dev/null
+++ b/frontend-app/viewaccounts.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Activate/Deactivate - Banka Dashboard</title>
+  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+  <div class="container">
+
+    <!--Wrapper-->
+    <div class="wrapper">
+      <!--Sidebar-->
+      <div class="sidebar">
+        <div class="sidebar-header">
+          <h1 class="logo">Banka</h1>
+        </div>
+        <div class="sidebar-menu">
+          <ul class="sidebar-list">
+            <li class="sidebar-item">
+              <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./createaccount.html" class="sidebar-link">Create an account</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
+            </li>
+            <li class="sidebar-item  sidebar-item-active">
+              <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./transactions.html" class="sidebar-link">Transactions</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./users.html" class="sidebar-link">Users</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="staffs.html" class="sidebar-link">Staffs</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
+            </li>
+            <li class="sidebar-item">
+              <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
+            </li>
+          </ul>
+        </div>
+        <div class="sidebar-legal">
+          &copy; 2019 Banka. All Rights Reserved.
+        </div>
+      </div>
+
+      <!--Main Content-->
+      <div class="main-content">
+        <!--Header-->
+        <header class="header">
+          <button class="toggle-sidebar" id="toggle-sidebar">
+            <svg class="toggle-sidebar-button">
+              <use xlink:href="./svg/sprite.svg#icon-list"></use>
+            </svg>
+          </button>
+          <form class="search-form">
+            <input type="text" id="search" class="search-input" placeholder="Search...">
+            <button class="search-form-button">
+              <svg class="search-form-icon">
+                <use xlink:href="./svg/sprite.svg#icon-magnifying-glass"></use>
+              </svg>
+            </button>
+          </form>
+
+          <nav class="user-nav">
+            <div class="user-nav-icon-box">
+              <svg class="user-nav-icon">
+                <use xlink:href="./svg/sprite.svg#icon-bell"></use>
+              </svg>
+              <span class="user-nav-notification"></span>
+
+              <div class="user-nav-notification-pop">
+                <ul class="list">
+                  <li class="item">
+                    <a href="#" class="link">Lorem ipsum dolor, sit amet consectetur adipisicing
+                      elit. Quae, optio?</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="user-nav-user">
+              <img class="user-nav-user-photo" src="./img/js2.png" alt="">
+              <span class="user-nav-username">Franklin</span>
+              <svg class="user-nav-user-icon">
+                <use xlink:href="./svg/sprite.svg#icon-chevron-down"></use>
+              </svg>
+
+              <div class="user-nav-user-pop">
+                <ul class="list">
+                  <li class="item"><a href="./profile.html" class="link">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-user"></use>
+                      </svg>Profile</a>
+                  </li>
+                  <li class="item"><a href="#" class="link">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-help-with-circle"></use>
+                      </svg>Help</a>
+                  </li>
+                  <li class="item"><a href="#" class="link" id="logout">
+                      <svg class="user-nav-link-icon">
+                        <use xlink:href="./svg/sprite.svg#icon-log-out"></use>
+                      </svg>Logout</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </header>
+
+        <!--Main Body-->
+        <main class="main-body">
+          <div class="alert alert-success"><span class="successMsg">Success </span><span id="close">X</span></div>
+          <div class="alert alert-danger"><span class="errMsg">Something went wrong. Try again </span><span
+              id="close">X</span></div>
+          <!--Accounts Limit-->
+          <div class="accountsQuery">
+            <div class="queryForm">
+              <div class="card">
+                <form action="" class="accounts-form">
+                  <div class="form-group">
+                    <select class="accounts-select" id="limit">
+                      <option value="5">5</option>
+                      <option value="10">10</option>
+                      <option value="20">20</option>
+                      <option value="30">30</option>
+                    </select>
+                  </div>
+
+                  <input type="submit" id="go" class="btn-go" value="Go">
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="card user-table">
+            <h1 class="content-title">Activate / Deactivate Accounts</h1>
+            <div class="table">
+              <div class="table-row">
+                <div class="account-index">AC Number</div>
+                <div class="account-name">AC Name</div>
+                <div class="account-status">AC Status</div>
+                <div class="activate">Ac Type</div>
+                <div class="deactivate">Delete</div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+
+  <!--Js-->
+  <script src="./js/app.js"></script>
+  <script src="./js/allaccounts.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2ada639..ea07162 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2765,12 +2765,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2785,17 +2787,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2912,7 +2917,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2924,6 +2930,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2938,6 +2945,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2945,12 +2953,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -2969,6 +2979,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3049,7 +3060,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3061,6 +3073,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3182,6 +3195,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/server/v1/services/users.js b/server/v1/services/users.js
index fe3fdea..7a4c776 100644
--- a/server/v1/services/users.js
+++ b/server/v1/services/users.js
@@ -97,13 +97,13 @@ const UsersServices = {
     if (type === 'staff' || isadmin === true) {
       if (typeof queryLimit !== 'undefined') {
         const allAccounts = await dbConnection
-          .dbConnect('SELECT * from users WHERE type=$1, isadmin=$2 LIMIT $3',
+          .dbConnect('SELECT * from users WHERE type=$1 AND isadmin=$2 LIMIT $3',
             ['client', false, queryLimit]);
         returnStatus = 200;
         returnSuccess = allAccounts.rows;
       } else {
         const allAccounts = await dbConnection
-          .dbConnect('SELECT * from users WHERE type=$1, isadmin=$2 LIMIT $3',
+          .dbConnect('SELECT * from users WHERE type=$1 AND isadmin=$2 LIMIT $3',
             ['client', false, 10]);
         returnStatus = 200;
         returnSuccess = allAccounts.rows;