%PDF- %PDF-
Direktori : /home/opti/workflow/src/views/account/payment/ |
Current File : /home/opti/workflow/src/views/account/payment/index.ejs |
<% include ../../partials/header %> <!-- ////////////////////////////////////////////////////////////////////////////--> <% include ../../partials/sidebar %> <!-- <link rel="stylesheet" type="text/css" href="/app-assets/ekko-lightbox/dist/ekko-lightbox.css"> --> <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/icheck.css"> <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/custom.css"> <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/checkboxes-radios.css"> <style> .modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem; } .modal-header { background-color:#2196F3; } </style> <div class="app-content content"> <div class="content-wrapper"> <div class="content-header row"> </div> <div class="content-body"> <!-- Breadcrumb starts--> <div class="content-header-left col-md-6 col-12 mb-2"> <h3 class="content-header-title">Payments</h3> <div class="row breadcrumbs-top"> <div class="breadcrumb-wrapper col-12"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/">Dashboard</a> </li> <li class="breadcrumb-item active">Payments </li> </ol> </div> </div> </div> <!-- Breadcrumb ends--> <div class="text-center"> <a class="quick-btn text-red" href="/accounts/payments/create" > <i class="la la-plus fa-2x"></i> <span>New Payment</span> </a> </div> <section class="row"> <div class="col-12"> <%- format_messages(messages) %> <div class="card"> <div class="card-head"> <div class="card-header"> <h4 class="card-title">Payment</h4> <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a> <div class="heading-elements"> <!-- <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#createInvoice"><i class="ft-plus white"></i> Create Invoice</button> --> <span class="dropdown"> <button id="btnSearchDrop1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-warning btn-sm dropdown-toggle dropdown-menu-right"><i class="ft-download-cloud white"></i></button> <span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right"> <a href="#" class="dropdown-item"><i class="la la-calendar"></i> Due Date</a> <a href="#" class="dropdown-item"><i class="la la-random"></i> Priority </a> <a href="#" class="dropdown-item"><i class="la la-bar-chart"></i> Balance Due</a> <a href="#" class="dropdown-item"><i class="la la-user"></i> Assign to</a> </span> </span> <button class="btn btn-success btn-sm"><i class="ft-settings white"></i></button> </div> </div> </div> <div class="card-content"> <div class="card-body"> <!-- Invoices List table --> <div class="table-responsive"> <table class="table table-striped table-bordered zero-configuration"> <thead> <tr> <th>S/N</th> <th>payment Date</th> <!-- <th>Reference No.</th> --> <th>Invoice Date</th> <th>Invoice No.</th> <th>Customer Name</th> <th>Amount</th> <th>Payment Type</th> <!-- <th>Action</th> --> </tr> </thead> <tbody> <% payments.forEach(function(payment, index){ %> <tr> <td><%= (index + 1) %></td> <td><%= moment(payment.createdAt).format('MMMM Do YYYY') %></td> <!-- <td><a href="/accounts/payments/view/<%=payment.uuid%>"><%= payment.referenceNumber %></a></td> --> <td><%= moment(payment.invoice.createdAt).format('MMMM Do YYYY') %></td> <td><a href="/accounts/invoices/view/<%=payment.invoice.uuid%>"><%= payment.invoice.referenceNumber %></a></td> <td> <% if(payment.invoice.invoiceCategoryId == 2){//its purchase %> <% if(payment.contactTo && payment.contactTo.contactType == 1){ //its person %> <a href="/accounts/contacts/view/1/<%=payment.contactTo.person.uuid%>"><%= payment.contactTo.person.firstName + " " + payment.contactTo.person.lastName %></a> <% } else { //its group %> <a href="/accounts/contacts/view/2/<%=payment.contactTo.group.uuid%>"><%= payment.contactTo.group.name %></a> <% } %> <% } else { //its sales %> <% if(payment.contactFrom && payment.contactFrom.contactType == 1){ //its person %> <a href="/accounts/contacts/view/1/<%=payment.contactFrom.person.uuid%>"><%= payment.contactFrom.person.firstName + " " + payment.contactFrom.person.lastName %></a> <% } else { //its group %> <a href="/accounts/contacts/view/2/<%=payment.contactFrom.group.uuid%>"><%= payment.contactFrom.group.name %></a> <% } %> <% } %> </td> <td><%= payment.amount %></td> <td><%= payment.paymentMethod.title %></td> <!-- <td></td> --> </tr> <% }); %> </tbody> <tfoot> <tr> <th>S/N</th> <th>Payment Date</th> <th>Invoice Date</th> <th>Invoice No.</th> <th>Customer Name</th> <th>Amount</th> <th>Payment Type</th> <!-- <th>Action</th> --> </tr> </tfoot> </table> </div> <!--/ Invoices table --> </div> </div> </div> </div> </section> </div> </div> </div> <!-- ////////////////////////////////////////////////////////////////////////////--> <div class="modal fade text-left" id="viewHistory" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-blue"> <h3 class="modal-title" >#<span id="_modalLabel"></span> </h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-content collapse show"> <div class="card-body"> <div class="table-responsive"> <table class="table"> <tbody id="histories"> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade text-left" id="makePayment" tabindex="-1" role="dialog" aria-labelledby="makePayment" aria-hidden="true"> <form action="/accounts/invoices/make-payment" method="POST"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-blue"> <h3 class="modal-title" >#<span id="_makePaymentModalLabel"></span> </h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="col-12 row"> <div class="card col-md-6 col-sm-12 text-center text-md-right"> <div><br/></div> <h2>INVOICE</h2> <p class="" id=""># <span id="referenceNumber"></span> </p> <ul class="px-0 list-unstyled"> <!-- $ <li>Partial</li> --> <li>Client</li> <li class="lead text-bold-800" id="party"></li> <li>Amount</li> <li class="lead text-bold-800">$<span id="amount"></span> </li> <li>Balance Due</li> <li class="lead text-bold-800" >$<span id="balanceDue"></span> </li> <li>Due Date</li> <li class="lead text-bold-800" ><span id="dueDate"></span> </li> </ul> </div> <div class="col-md-6 col-sm-12"> <div><br/></div> <div class=" col-sm-12 text-center text-md-left"> <ul class="px-0 list-unstyled"> <li> <span class="form-group skin skin-flat"> <label class="" for="fullPayment"><input type="checkbox" name="fullPayment" value="" class="form-control" >Full Payment </label> </span> </li> <li>Amount</li> <li class="text-bold-800"><input type="number" name="amountPaid" id="amountPaid" min="0.00" max="" placeholder="0.00" class="form-control" required value=""></li> <li>Date</li> <li class="text-bold-800"><input type="date" name="paymentDate" id="paymentDate" class="form-control" required></li> <li>Payment Method</li> <li class="text-bold-800"> <div class="form-group"> <select class="selectBox form-control" required> <option value="" selected class="form-control">No Payment Method </select> </div> <div class="form-group"> <textarea name="description" placeholder="Note" title="Payment Note" class="form-control"></textarea> </div> </li> <input type="hidden" value="" id="invoiceUuid" name="invoiceUuid"/> <!-- <li>Albuquerque,</li> --> <!-- <li>New Mexico-87102.</li> --> </ul> </div> </div> <div class="col-md-7 col-sm-12"> </div> </div> <div class="modal-footer"> <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal" id="close">Close</button> <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Make Payment </button> </div> </div> </div> </form> </div> <% include ../../partials/footer %> <!-- <script src="/app-assets/ekko-lightbox/dist/ekko-lightbox.js"></script> --> <script src="/app-assets/vendors/js/forms/icheck/icheck.min.js" type="text/javascript"></script> <script src="/app-assets/js/scripts/forms/checkbox-radio.js" type="text/javascript"></script> <script> // Ekko lightbox Initialization $(document).on('click', '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox(); }); function getHistory(uuid) { $('#spinnerContainer').addClass('show'); // console.log(uuid) $.ajax({ type: "POST", // Post / Get method url: "/accounts/invoices/history", //Where form data is sent on submission dataType: "text", // Data type, HTML, json etc. data: { uuid: uuid }, //Form variables success: function (data) { $('#spinnerContainer').removeClass('show'); data = JSON.parse(data); // console.log(data) if(data.type == "success"){ $('#histories').html(''); $.each(data.histories, function (key, history) { var tr = ( '<tr>' + '<td>' + (key + 1) + '</td>' + '<td>' + history.message +'</td>' + '<td>' + moment(history.createdAt).format('MMMM Do YYYY') + '</td>' + '</tr>' ); $('#histories').append(tr); }); } $("#_modalLabel").html(`${data.invoice.referenceNumber} History`) }, error:function (error){ $('#spinnerContainer').removeClass('show'); alert(error.message) } }) } function showMakePaymentModal(invoice) { $('#spinnerContainer').addClass('show'); invoice = JSON.parse(invoice); document.getElementById('paymentDate').valueAsDate = new Date(); $.ajax({ type: 'POST', url: '/accounts/getInvoiceContact', dataType: 'json', data: { partyFromId: invoice.partyFromId , partyToId: invoice.partyToId }, success: function(data) { // console.log(data); $('#party').html(data.name) // fetchedContacts.push(data.name); // $('#partyId').val(data.id) $('#spinnerContainer').removeClass('show'); }, error: function(jqXHR, textStatus, errorThrow) { $('#spinnerContainer').removeClass('show'); // $.alert(errorThrow); } }); $("#amount").html(invoice.amount); $("#invoiceUuid").val(invoice.uuid); $("#referenceNumber").html(invoice.referenceNumber); $("#amountPaid").attr('max', invoice.balanceDue); $("#balanceDue").html(invoice.balanceDue); $("#dueDate").html(moment(invoice.dueDate).format("MMM Do YYYY")); $('#_makePaymentModalLabel').html(`${invoice.referenceNumber} Payment`) } $(document).ready(function() { var full = false $(".iCheck-helper").click(function() { full = !full; if(full) $("#amountPaid").val(parseFloat($("#balanceDue").html()).toFixed(2)) else $("#amountPaid").val('') }); }); </script>