Confirm Invoice

mail@pastecode.io avatar
unknown
css
2 years ago
17 kB
2
Indexable
Never
<!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">
    <title>Dashboard - DOI RJI</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 active mb-3" aria-current="true"><a href=""><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=""><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=""><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" aria-current="true"><a href=""><span class="ic-wrap"><span class="material-icons">request_quote</span> <span class="txt">Invoice</span></span></a></li>

                        <li class="list-group-item mb-3" aria-current="true"><a href=""><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=""><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" aria-current="true"><a href=""><span class="ic-wrap"><span class="material-icons">support_agent</span> <span class="txt">Support</span></span></a></li>
                        <li class="list-group-item mb-3" aria-current="true"><a href=""><span class="ic-wrap"><span class="material-icons">logout</span> <span class="txt">Logout</span></span></a></li>
                    </ul>
                </div>

            </div>
        </section>

        <!-- MAIN CONTENT -->
        <main id="main-content" class="flex-grow-1">
            
            <!-- MENU 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">&nbsp;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="confirm-invoice d-flex flex-column">

                    <div class="confrm-inv-item card flex-grow-1 flex-shrink-0 pb-2">
                        <div class="card-header">
                            <h5 class="mb-0 text-white">confirm payment</h5>
                        </div>
                        <div class="card-body pb-3">
                            <p class="my-2">
                                <small class="text-muted" style="font-size: .8rem;">*Max size 1 MB. File type jpeg / jpg / png</small></p>
                            </p>
                            <form action="">
                                <div class="form-group mb-3">
                                    <label for="select-file">select file</label>
                                    <input type="file" name="select-file" id="select-file" class="form-control">
                                </div>
                                <div class="payment-method form-group mb-3">
                                    <select value="" class="form-select">
                                        <option value="" selected disabled>-Choose payment method-</option>
                                    </sele>
                                    <input type="text" name="" placeholder="Date payment" id="" class="form-control">
                                    <input type="text" name="" placeholder="Time payment" id="" class="form-control">
                                </div>

                                <a href="" class="btn-custom">
                                    <span class="ic-wrap">
                                        <span class="material-icons">folder</span>
                                        select file
                                    </span>
                                </a>
                            </form>
                        </div>
                    </div>

                    <div class="panel-features d-flex justify-content-end gap-2 my-3">
                        <a href="" class="btn-custom">
                            <span class="ic-wrap">
                                <span class="material-icons">print</span>
                                print
                            </span>
                        </a>

                        <a href="" class="btn-custom">
                            <span class="ic-wrap">
                                <span class="material-icons">upload_file</span>
                                print as PDF
                            </span>
                        </a>
                    </div>

                    <div class="confrm-inv-item card">

                        <div class="card-header">
                            <h5 class="mb-0 text-white">invoice detail</h5>
                        </div>
                        <div class="card-body pb-3" style=" color: var(--cc-primary);">
                            <div class="d-flex justify-content-between">
                                <div class="wrap-img mx-1 my-2">
                                    <img src="./assets/images/RJI.png" style="width: 100px" alt="">
                                </div>
                                
                                <div class="d-flex flex-column align-items-center mx-3 mt-2">
                                    <h5 class="text-uppercase" style="color: var(--cc-darkpurple);">invoice</h5>
                                    <span class="d-flex gap-1 flex-wrap">
                                        <a href="" class="bg-danger">unpaid</a>
                                        <a href="" class="bg-warning">canceled</a>
                                    </span>
                                </div>
                            </div>
                            <strong class="text-capitalize">invoice to:</strong>
                            <div class="short-info row gap-4 justify-content-between" style="font-size: .9rem;">
                                <div class="left-shrti col-md-8">
                                    <small>
                                        <p class="mb-0">[10.48078] RJI Publisher</p>
                                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo consequatur tempora fugiat deleniti tenetur soluta repellendus voluptatem. Id, rem nobis?</p>
                                    </small>
                                </div>

                                <div class="right-shrti col-md-3">
                                    <table style="font-size: .8rem;">
                                        <tr>
                                            <td class="text-capitalize">invoice number</td>
                                            <td> : 009178</td>
                                        </tr>
                                        <tr>
                                            <td class="text-capitalize">invoice date</td>
                                            <td> : 2021-05-12 21:39:53</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="table-wrap flex-shrink-0 my-3">
                                <table class="table table-bordered mb-0">
                                    <thead>
                                        <tr>
                                            <th>no</th>
                                            <th>item description</th>
                                            <th>price</th>
                                            <th>type</th>
                                            <th>quantity</th>
                                            <th>price total</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Deposit Register Konten/ Artikel Penggunaan Tahun 2021</td>
                                            <td>IDR 1,500,000.00</td>
                                            <td class="text-capitalize">deposit</td>
                                            <td class="text-center">1</td>
                                            <td class="text-end" style="min-width: 200px">IDR 1,500,000.00</td>
                                        </tr>
                                    </tbody>

                                    <tfoot class="text-capitalize text-end">
                                        <tr>
                                            <td colspan="5" class="text-uppercase" style="color: var(--cc-grey); font-size: .8rem; font-weight: 500;">amount total</td>
                                            <td>IDR 1,500,000.00</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="tag-info">
                                <small class="text-muted" style="font-size: .7rem;">*I Include Tax [Pph 23 2%]</small>
                            </div>
                            <div class="payment-to my-3 row justify-content-between">
                                <div class="col-md-6 px-1 mb-5">
                                    <h6 class="text-capitalize"><strong>payment to:</strong></h6>
                                    <table class="text-capitalize" style="font-size: .9rem;">
                                        <tr>
                                            <td>bank name</td>
                                            <td> : BANK RAKYAT INDONESIA (BRI)</td>
                                        </tr>
                                        <tr>
                                            <td>account number</td>
                                            <td> : 3949385353857877</td>
                                        </tr>
                                        <tr>
                                            <td>payee name</td>
                                            <td> : PERKUMPULAN RELAWAN JURNAL INDONESIA</td>
                                        </tr>
                                        <tr>
                                            <td>bank name</td>
                                            <td> : BANK RAKYAT INDONESIA (BRI)</td>
                                        </tr>
                                        <tr>
                                            <td>virtual account number</td>
                                            <td> : 3949385353857877</td>
                                        </tr>
                                        <tr>
                                            <td>Gopay, DANA, OVO</td>
                                            <td> : +6283459320342</td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="col-md-3 amount-total text-center">
                                    <h5 class="mb-0" style="font-weight: 200;">Amount Total :</h5>
                                    <h4>IDR 2,000,000.00</h4>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                
            </div>

            <a href="" class="btn btn-custom mt-4"><span class="ic-wrap"><span class="material-icons">arrow_back</span>Back</span></a>

        </main>


    </section>

<script src="./assets/js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./assets/js/mainFunctions.js"></script>
</body>
</html>