%PDF-
%PDF-
Mini Shell
Mini Shell
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<link src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
margin: 0;
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.45;
color: #6B6F82;
text-align: left;
background-color: #F9FAFD;
display: block;
padding: 50px;
}
</style>
<body class="vertical-layout vertical-menu 2-columns menu-expanded fixed-navbar" data-open="click" data-menu="vertical-menu"
data-col="2-columns" >
<div class="app-content container">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header row">
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title mb-0">Invoice <%= invoice.referenceNumber %></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"><a href="/accounts/invoices">Invoices</a>
</li>
<li class="breadcrumb-item active">Invoice #<%= invoice.referenceNumber %>
</li>
</ol>
</div>
</div>
</div>
<div class="content-header-right text-md-right col-md-6 col-12">
<span class="dropdown">
<button id="invoiceStatus" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-warning btn-sm dropdown-toggle dropdown-menu-right"><%= invoice.invoiceStatus.title %></button>
<span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right">
<% invoiceStatus.forEach(status =>{ %>
<a href="#" class="dropdown-item"><i class="la la-random"></i> <%= status.title %> </a>
<% }) %>
</span>
</div>
</div>
<!-- Breadcrumb ends-->
<!-- <div class="text-center">
<a class="quick-btn text-red" href="/accounts/invoices/create" >
<i class="la la-plus fa-2x"></i>
<span>New Invoice</span>
</a>
</div> -->
<section class="card">
<div id="invoice-template" class="card-body">
<!-- Invoice Company Details -->
<div id="invoice-company-details" class="row">
<div class="col-md-6 col-sm-12 text-center text-md-left">
<div class="media">
<img src="../../../app-assets/images/logo/logo-80x80.png" alt="company logo" class=""
/>
<div class="media-body">
<ul class="ml-2 px-0 list-unstyled">
<li class="text-bold-800"><%= organization.name %></li>
<li><%= organization.address %></li>
<li><%= organization.city +", "+organization.state %>,</li>
<li><%= organization.country %></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center text-md-right">
<h2>INVOICE</h2>
<p class="pb-3"># <%= invoice.referenceNumber %></p>
<ul class="px-0 list-unstyled">
<li>Amount</li>
<li class="lead text-bold-800">$ <%= invoice.amount %></li>
<li>Balance Due</li>
<li class="lead text-bold-800">$ <%= invoice.balanceDue %></li>
</ul>
</div>
</div>
<!--/ Invoice Company Details -->
<!-- Invoice Customer Details -->
<div id="invoice-customer-details" class="row pt-2">
<% if(invoice.invoiceCategoryId == 2){ //its purchase %>
<div class="col-sm-12 text-center text-md-left">
<p class="text-muted">Bill From</p>
</div>
<% if(invoice.contactTo.contactType == 1){//its person %>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800"><span id="party1"><%= invoice.contactTo.person.firstName +" "+invoice.contactTo.person.lastName %></span></li>
<li><%= invoice.contactTo.person.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } else { %>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800"><span id="party1"><%= invoice.contactTo.group.name %></span></li>
<li><%= invoice.contactTo.group.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } %>
<% } else { %>
<div class="col-sm-12 text-center text-md-left">
<p class="text-muted">Bill To</p>
</div>
<% if(invoice.contactFrom.contactType == 1){ //its person%>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800 "><span id="party1"><%= invoice.contactFrom.person.firstName +" "+invoice.contactFrom.person.lastName %></span></li>
<li><%= invoice.contactFrom.person.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } else { %>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800 "><span id="party1"><%= invoice.contactFrom.group.name %></span></li>
<li><%= invoice.contactFrom.group.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } %>
<% } %>
<div class="col-md-6 col-sm-12 text-center text-md-right">
<p>
<span class="text-muted">Invoice Date :</span><%= invoice.invoiceDate%></p>
<p>
<span class="text-muted">Terms :</span> Due on Receipt</p>
<p>
<span class="text-muted">Due Date :</span> <%= invoice.dueDate%></p>
</div>
</div>
<!--/ Invoice Customer Details -->
<!-- Invoice Items Details -->
<div id="invoice-items-details" class="pt-2">
<div class="row">
<div class="table-responsive col-sm-12">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Item & Description</th>
<th class="text-right">Price/Rate</th>
<th class="text-right">Quantiy/Hours</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<% invoice.invoiceItems.forEach((item, index)=>{ %>
<tr>
<th scope="row"><%= index + 1 %></th>
<td>
<p><strong><%= item.name %></strong></p>
<p class="text-muted"><%= item.description %>.</p>
</td>
<td class="text-right">$ <%= item.price %></td>
<td class="text-right"><%= item.quantity %></td>
<td class="text-right">$ <%= item.price * item.quantity %></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-12 text-center text-md-left">
<!-- <p class="lead">Payment Methods:</p>
<div class="row">
<div class="col-md-8">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td>Bank name:</td>
<td class="text-right">ABC Bank, USA</td>
</tr>
<tr>
<td>Acc name:</td>
<td class="text-right">Amanda Orton</td>
</tr>
<tr>
<td>IBAN:</td>
<td class="text-right">FGS165461646546AA</td>
</tr>
<tr>
<td>SWIFT code:</td>
<td class="text-right">BTNPP34</td>
</tr>
</tbody>
</table>
</div>
</div> -->
</div>
<div class="col-md-5 col-sm-12">
<p class="lead">Total due</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Sub Total</td>
<td class="text-right">$ <%= parseFloat(invoice.amount).toFixed(2) %></td>
</tr>
<tr>
<td>TAX (0%)</td>
<td class="text-right">$ 0.00</td>
</tr>
<!-- <tr>
<td class="text-bold-800">Total</td>
<td class="text-bold-800 text-right"> $ <%= invoice.amount %></td>
</tr> -->
<tr>
<td>Payment Made</td>
<td class=" text-right">(-) $ <span id="paymentMade"><%= parseFloat(invoice.amount - invoice.balanceDue).toFixed(2) %></span></td>
</tr>
<tr class="bg-grey bg-lighten-4">
<td class="text-bold-800">Balance Due</td>
<td class="text-bold-800 text-right pink">$ <span class="balanceDue"><%= parseFloat(invoice.balanceDue).toFixed(2) %></span></td>
</tr>
</tbody>
</table>
</div>
<!-- <div class="text-center">
<p>Authorized person</p>
<img src="../../../app-assets/images/pages/signature-scan.png" alt="signature" class="height-100"
/>
<h6>Amanda Orton</h6>
<p class="text-muted">Managing Director</p>
</div> -->
</div>
</div>
</div>
<!-- Invoice Footer -->
<div id="invoice-footer">
<div class="row">
<div class="col-md-7 col-sm-12">
<!-- <h6>Terms & Condition</h6> -->
<h6>Invoice Message</h6>
<p><%= invoice.invoiceMessage %></p>
</div>
<% if(invoice.invoiceStatus.id < 3) {//draft or approved %>
<div class="col-md-5 col-sm-12 text-center" id="sendInvoiceDiv">
<button type="button" class="btn btn-info btn-lg my-1" onclick="sendInvoice('<%= invoice.uuid %>')"><i class="la la-paper-plane-o" ></i> Send Invoice</button>
</div>
<% } else if(invoice.invoiceStatus.id == 3 || invoice.invoiceStatus.id == 9){//sent or partial %>
<div class="col-md-5 col-sm-12 text-center" id="makePaymentBtnDiv">
<button type="button" class="btn btn-info btn-lg my-1" title="Make Payment for #<%= invoice.referenceNumber %> " data-toggle="modal" data-target="#makePayment" ><i class="la la-check" ></i> Make Payment </button>
</div>
<% } %>
</div>
</div>
<!--/ Invoice Footer -->
</div>
</section>
</div>
</div>
</div>
<% include ../partials/pdf_footer %>
Zerion Mini Shell 1.0