Update Menu Bar & Table
unknown
html
4 years ago
19 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="./assets/css/bootstrap.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/newStyle.css">
<link href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
var BASE_URL = '#';
$.ajaxSetup({
converters: {
"text json": function(x) {
return (x == "") ? null : JSON.parse(x);
},
},
});
$(document).ready(function() {
$('#alertmodal').modal('show');
});
</script>
<title>Homepage</title>
</head>
<body>
<section id="dashboard-wrapper" class="d-flex">
<!-- SIDEBAR -->
<section id="left-sidebar">
<div class="wrap-menu d-flex flex-column justify-content-between">
<div class="main-menu">
<!-- LOGO BRAND -->
<span class="logo-brand mb-4">
<a href="#" class=""><img src="./assets/images/icons/logo_doi_rji.png" alt=""></a>
<span class="toggle-navbar">
<span class="material-icons">
menu
</span>
</span>
</span>
<!-- LIST MENU SIDEBAR -->
<ul id="sidebar-list-menu" class="list-group">
<li class="list-group-item mb-3" aria-current="true"><a href="#home"><span class="ic-wrap"><span class="material-icons">dashboard</span> <span class="txt">dashboard</span></span></a></li>
<li class="list-group-item mb-3" aria-current="true"><a href="#doi"><span class="ic-wrap"><span class="material-icons">inventory</span> <span class="txt">DOI
Prefik</span></span></a></li>
<li class="list-group-item mb-3" aria-current="true"><a href="#deposit"><span class="ic-wrap"><span class="material-icons">cloud_download</span> <span class="txt">Deposit</span></span></a></li>
<li class="list-group-item mb-3 position-relative" aria-current="true"><a href="#invoice"><span class="ic-wrap"><span class="material-icons">request_quote</span> <span class="txt">Invoice</span></span></a>
<span class="position-absolute top-50 start-100 translate-middle p-2 bg-info border border-light rounded-circle"></span>
</li>
<li class="list-group-item mb-3" aria-current="true"><a href="#historypay"><span class="ic-wrap"><span class="material-icons">request_page</span> <span class="txt">History
Payment</span></span></a></li>
<li class="list-group-item mb-3" aria-current="true"><a href="#doi/changeaccount"><span class="ic-wrap"><span class="material-icons">manage_accounts</span> <span class="txt">Change
Account</span></span></a></li>
</ul>
</div>
<!-- OTHER MENU SIDEBAR -->
<div class="support-menu">
<ul class="list-group">
<li class="list-group-item mb-3 position-relative" aria-current="true"><a href="#messages"><span class="ic-wrap"><span class="material-icons">support_agent</span> <span class="txt">Support</span></span></a>
<span class="position-absolute top-50 start-100 translate-middle p-2 bg-info border border-light rounded-circle"></span>
</li>
<!--<li class="list-group-item mb-3" aria-current="true"><a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"><span class="ic-wrap"><span class="material-icons">logout</span> <span class="txt">Logout</span></span></a>
</li>-->
</ul>
</div>
</div>
</section>
<!-- END NAVBAR -->
<div class="hint-sided"></div>
<!-- MAIN CONTENT -->
<main id="main-content" class="flex-grow-1">
<!-- MENU TOP BAR -->
<div id="menu-bar" class="d-flex align-items-center justify-content-between">
<div class="left-bar mb-2">
<div class="account-balance">
<span class="ic-wrap"><span class="material-icons">account_balance_wallet</span>Balance: IDR
<span class="total-balance"> 200,000</span></span>
</div>
</div>
<div class="right-bar d-flex align-items-center gap-3 flex-wrap flex-shrink-0">
<div class="menu-bar-item desk-info">
<a href="" class="desk-info-dropdown">
<span class="ic-wrap"><span class="material-icons">info</span><span class="sub-txt">desk information</span> <span class="material-icons rotate-arrow-down">expand_more</span></span>
</a>
<ul class="sub-menu d-flex flex-column">
<li><a target="_blank" href="https://forum.relawanjurnal.id/viewforum.php?f=22">Setting DOI</a></li>
<li><a target="_blank" href="https://t.me/joinchat/SBT0qeU0yemR28-d">Consultation</a></li>
<li><a target="_blank" href="https://www.crossref.org/education/similarity-check/participate/eligibility/">Similarity Check</a></li>
</ul>
</div>
<div class="menu-bar-item chat-notif position-relative">
<a href="#messages">
<span class="ic-wrap"><span class="material-icons">chat</span></span>
</a>
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-info border border-light rounded-circle"></span>
</div>
<div class="menu-bar-item invoice-notif position-relative">
<a href="#invoice">
<span class="ic-wrap"><span class="material-icons">request_quote</span></span>
</a>
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-info border border-light rounded-circle"></span>
</div>
<div class="menu-bar-item user-name">
<a href="" class="user-name-dropdown">
<span class="ic-wrap"><span class="sub-txt">USER PROFILE</span>
<div class="ic-profile">U</div>
<span class="material-icons rotate-arrow-down">expand_more</span>
</span>
</a>
<ul class="sub-menu d-flex flex-column">
<li><a href="#">Change Password</a></li>
<li style="border-bottom: 1px solid orange;"><a href="#">Change Account</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#logoutModal">Logout</a></li>
</ul>
</div>
</div>
</div>
<!-- CONTENT BASE -->
<div id="content-base">
<div class="wrap-title">
<h3 class="content-title mb-0">invoice</h3>
<p style="color: var(--cc-primary); margin-left: .5rem;">Setiap transaksi layanan DOI Prefix atau Deposit akan tertera pada Invoice dibawah ini:</p>
</div>
<div class="detail-history-invoice d-flex flex-column">
<div class="dhs-item card flex-grow-1 flex-shrink-5 pb-2">
<div class="card-header d-flex justify-content-center align-items-center">
<h5 class="mb-0"><strong>list invoice</strong></h5>
<!--<h5 class="mb-0" style="font-size: 1.15rem;"><a href="" class="fw-bold" style="color: var(--cc-primary);"><span class="ic-wrap"><span class="material-icons">print</span>print all</span></a></h5>-->
</div>
<div class="my-3 px-3" style="background: #fff;">
<!--<div class="table-wrap flex-shrink-0">-->
<table class="table table-bordered mb-0" id="data_table">
<thead>
<tr>
<th>No</th>
<th>No. Invoice</th>
<th>Type</th>
<th>Added</th>
<th>Total</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>110101</td>
<td>Payment</td>
<td>2021-10-05 08:10:00</td>
<td>IDR 200,000</td>
<td>
<div class="bg-danger text-capitalize">Unpaid</div>
</td>
<td>
<a href="#" title="Detail Invoice" class="btn-custom-rev"><span class="ic-wrap"><span class="material-icons">info</span>Detail</span></a>
<a href="#" title="Pay Now" class="btn-custom" data-bs-toggle="modal" data-bs-target="#confdp"><span class="ic-wrap"><span class="material-icons">credit_score</span>Pay Now</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form role="form">
<div class="modal-body">
<div class="row">
<div class="form-group col-md-6">
<label for="name">Balance</label>
<input type="text" value="500,000" class="form-control my-2" readonly>
</div>
<div class="form-group col-md-6">
<label for="name">Total Invoice</label>
<input type="text" class="form-control my-2" readonly>
</div>
</div>
<div id="war"></div>
<div class="form-group" id="ppp">
<label for="name">Password</label>
<input type="password" class="form-control my-2">
</div>
</div>
<div class="modal-footer" id="ftto">
<input type="hidden" value="" id="idi" name="idi">
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal"><span class="ic-wrap"><span class="material-icons">close</span>Close</span></button>
<button type="submit" id="submit" class="btn btn-primary btn-sm" data-bs-dismiss="modal"><span class="ic-wrap"><span class="material-icons">check</span>Confirm</span></button>
</div>
</form>
</div>
</div>
</div>
</div>
<a href="#" class="btn btn-custom mt-4" onclick="history.back();"><span class="ic-wrap"><span class="material-icons">arrow_back</span>Back</span></a>
</main>
</section>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary mt-3" type="button" data-bs-dismiss="modal"><span class="ic-wrap"><span class="material-icons">cancel</span>Close</span></button>
<a href="#" class="btn btn-icon-split btn-danger mt-3"><span class="ic-wrap"><span class="material-icons">logout</span>Logout</span></a>
</div>
</div>
</div>
</div>
<!-- Alert Modal Limit Deposit-->
<div class="modal show fade" id="alertmodal" tabindex="-1" role="dialog" aria-labelledby="alertmodalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Reminder Alert!</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">Your balance below the limit
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-icon-split btn-primary mt-3" type="button" data-bs-dismiss="modal"><span class="ic-wrap"><span class="material-icons">cancel</span>Close</span></button>
</div>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-4" style="z-index: 11">
<!--<div class="position-fixed bottom-0 end-0 p-4" style="z-index: 11">-->
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header" style="background-color: var(--cc-darkpurple);">
<strong class="me-auto text-white">New Invoice Added!</strong>
<span class="badge bg-secondary">2</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<strong>Please make action payment for your invoice.</strong>
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header" style="background-color: var(--cc-darkpurple);">
<strong class="me-auto text-white">New Message!</strong>
<span class="badge bg-secondary">1</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<strong>You got new messages, please read the message.</strong>
</div>
</div>
</div>
<script src="./assets/js/bootstrap.js"></script>
<script src="./assets/js/mainFunctions.js"></script>
<script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.2/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript">
$('body').on('click', '.btn-close', function() {
$(this).closest('.toast').toast('hide')
})
$('#data_table').DataTable();
</script>
</body>
</html>Editor is loading...