frontend/cashier/customer.html
<!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" /> <link rel="shortcut icon" type="image/png" href="../img/banka-blue-logo.png" /> <link rel="stylesheet" type="text/css" href="../css/customer.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Banka</title> </head> <body> <div class="wrapper"> <header> <div class="top"> <a href="../index.html"><img src="../img/banka-blue-logo.svg"/></a> <div class="current-user web-user dropdown"> <img class="avatar" src="../img/emeka copy@3x.png" /> <h4 id="current-user">Tejumola Peter</h4> <span>(cashier)</span> <img class="arrow-down" src="../img/arrow-drop-down.svg" /> <div class="dropdown-content"> <a href="#" id="profile-button">Profile</a> <a href="../index.html">Logout</a> </div> </div> </div> </header> <div class="banner"> <div class="customer"> <a href="./dashboard.html"> <img class="back-arrow" src="../img/back-arrow.svg" /> </a> <img class="customer-avatar" src="../img/emeka copy@3x.png" /> <h4 id="owner">Timi Tejumola</h4> </div> <div class="balance"> <p>CURRENT BALANCE</p> <h3 id="current-balance"></h3> </div> </div> <div class="content"> <button class="credit-button" id="credit-button"> Perform a Transaction </button> <div id="loadingText"><div id="loader"></div>Loading</div> <div id="accountText">No account has been created</div> <div class="tableDiv"> <table id="account-table"> <tr> <th class="table-title" colspan="7">Accounts</th> </tr> <tr> <th class="table-header"></th> <th class="table-header">Type</th> <th class="table-header">Account Number</th> <th class="table-header">Status</th> <th class="table-header">Created On</th> <th class="table-header">Balance</th> <th class="action-header">Actions</th> </tr> </table> </div> <div class="tableDiv"> <table id="transaction-table"> <tr> <th class="table-title" colspan="5">Transaction History</th> <th class="account-filter" colspan="1"> <div class="ct-select-group ct-js-select-group"> <select class="ct-select ct-js-select" id="filter-trans" onchange="filter()"> <option value="all" selected>All</option> </select> </div> </th> </tr> <tr> <th class="table-header">Type</th> <th class="table-header">Account Number</th> <th class="table-header">Created On</th> <th class="table-header">Amount</th> <th class="table-header">Old Balance</th> <th class="table-header">New Balance</th> </tr> </table> </div> <div id="accountModal" class="modal"> <div class="onboarding-modal"> <h3>Perform a transaction</h3> <div class="ct-select-group ct-js-select-group"> <select class="ct-select ct-js-select" id="acc-type"> <option value="default" selected disabled>Select an account</option> </select> </div> <div class="ct-select-group ct-js-select-group"> <select class="ct-select ct-js-select" id="trans-type"> <option value="default" selected disabled>Select a transaction type</option> <option value="credit">Credit</option> <option value="debit">Debit</option> </select> </div> <label for="amount">Amount</label> <input type="text" id="amount" name="amount" placeholder="Amount" /> <label for="account-bal">Account Balance</label> <input type="text" id="account-bal" name="account-bal" placeholder="Account Balance" value="100,0000" disabled /> <button id="performTrans" class="submit"><i class="fa fa-circle-o-notch fa-spin"></i>Submit</button> <p class="error"></p> </div> </div> <div id="profileModal" class="modal"> <div class="onboarding-modal"> <img class="avatar" src="../img/emeka copy@3x.png" /> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="Timi" placeholder="First Name" disabled /> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Tejumola" placeholder="Last Name" disabled /> <label for="email">Email Address</label> <input type="text" id="email" name="email" value="tejumolatimi@gmail.com" placeholder="Email Address" disabled /> <label for="password">Password</label> <input type="password" id="cpassword" name="password" placeholder="Password" /> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Confirm Password" /> <button class="update">Update</button> </div> </div> <div class="alert" id="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> successful </div> </div> </body> <script src="../js/customer.js"></script></html>