{{ include('partials/main.html.twig') }}
<head>
{{ include('partials/title-meta.html.twig', {title: 'Invoice List'}) }}
<!-- flatpickr css -->
<link href="/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet" type="text/css">
<!-- DataTables -->
<link href="/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
<!-- Responsive datatable examples -->
<link href="/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
{{ include('partials/head-css.html.twig') }}
</head>
{{ include('partials/body.html.twig') }}
<!-- Begin page -->
<div id="layout-wrapper">
{{ include('partials/menu.html.twig') }}
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
{{ include('partials/page-title.html.twig', {pagetitle: 'Invoices', title: 'Invoice List'}) }}
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm">
<div class="mb-4">
<button type="button" class="btn btn-light waves-effect waves-light"><i class="bx bx-plus me-1"></i> Add Invoice</button>
</div>
</div>
<div class="col-sm-auto">
<div class="d-flex align-items-center gap-1 mb-4">
<div class="input-group datepicker-range">
<input type="text" class="form-control flatpickr-input" data-input aria-describedby="date1">
<button class="input-group-text" id="date1" data-toggle><i class="bx bx-calendar-event"></i></button>
</div>
<div class="dropdown">
<a class="btn btn-link text-muted py-1 font-size-16 shadow-none dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="table-responsive">
<table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
<thead>
<tr class="bg-transparent">
<th style="width: 30px;">
<div class="form-check font-size-16">
<input type="checkbox" name="check" class="form-check-input" id="checkAll">
<label class="form-check-label" for="checkAll"></label>
</div>
</th>
<th style="width: 120px;">Invoice ID</th>
<th>Date</th>
<th>Billing Name</th>
<th>Amount</th>
<th>Status</th>
<th style="width: 150px;">Download Pdf</th>
<th style="width: 90px;">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0215</a> </td>
<td>
12 Oct, 2020
</td>
<td>Connie Franco</td>
<td>
$26.30
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0214</a> </td>
<td>
11 Oct, 2020
</td>
<td>Paul Reynolds</td>
<td>
$24.20
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0213</a> </td>
<td>
10 Oct, 2020
</td>
<td>Ronald Patterson</td>
<td>
$20.20
</td>
<td>
<div class="badge badge-soft-warning font-size-12">Pending</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0212</a> </td>
<td>
09 Oct, 2020
</td>
<td>Adella Perez</td>
<td>
$16.80
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0211</a> </td>
<td>
08 Oct, 2020
</td>
<td>Theresa Mayers</td>
<td>
$22.00
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0210</a> </td>
<td>
07 Oct, 2020
</td>
<td>Michael Wallace</td>
<td>
$15.60
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0209</a> </td>
<td>
06 Oct, 2020
</td>
<td>Oliver Gonzales</td>
<td>
$26.50
</td>
<td>
<div class="badge badge-soft-warning font-size-12">Pending</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0208</a> </td>
<td>
05 Oct, 2020
</td>
<td>David Burke</td>
<td>
$24.20
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-label"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0207</a> </td>
<td>
04 Oct, 2020
</td>
<td>Willie Verner</td>
<td>
$21.30
</td>
<td>
<div class="badge badge-soft-warning font-size-12">Pending</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-labe10"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0206</a> </td>
<td>
03 Oct, 2020
</td>
<td>Felix Perry</td>
<td>
$22.60
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-labe11"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0205</a> </td>
<td>
02 Oct, 2020
</td>
<td>Virgil Kelley</td>
<td>
$18.20
</td>
<td>
<div class="badge badge-soft-success font-size-12">Paid</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check font-size-16">
<input type="checkbox" class="form-check-input">
<label class="form-check-labe12"></label>
</div>
</td>
<td><a href="javascript: void(0);" class="text-dark fw-medium">#MN0204</a> </td>
<td>
01 Oct, 2020
</td>
<td>Matthew Lawler</td>
<td>
$15.80
</td>
<td>
<div class="badge badge-soft-warning font-size-12">Pending</div>
</td>
<td>
<div>
<button type="button" class="btn btn-soft-light btn-sm w-xs waves-effect btn-label waves-light"><i class="bx bx-download label-icon"></i> Pdf</button>
</div>
</td>
<td>
<div class="dropdown">
<button class="btn btn-link font-size-16 shadow-none py-0 text-muted dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bx bx-dots-horizontal-rounded"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Print</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- end table responsive -->
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div> <!-- container-fluid -->
</div>
<!-- End Page-content -->
{{ include('partials/footer.html.twig') }}
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
{{ include('partials/right-sidebar.html.twig') }}
{{ include('partials/vendor-scripts.html.twig') }}
<!-- flatpickr js -->
<script src="/libs/flatpickr/dist/flatpickr.min.js"></script>
<!-- Required datatable js -->
<script src="/libs/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<!-- Responsive examples -->
<script src="/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
<!-- init js -->
<script src="/js/pages/invoices-list.init.js"></script>
<script src="/js/app.js"></script>
</body>
</html>