Fixed up UI Invoice PDF and No Records

This commit is contained in:
johnnyq
2021-04-06 17:41:41 -04:00
parent 9318f40fcd
commit 72d379504b
3 changed files with 321 additions and 339 deletions

View File

@@ -1,14 +1,9 @@
<div class="modal" id="deleteClientModal<?php echo $client_id; ?>" tabindex="-1"> <div class="modal" id="deleteClientModal<?php echo $client_id; ?>" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header bg-danger">
<button type="button" class="close text-white" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body"> <div class="modal-body">
<center class="mb-4"> <center class="mb-4">
<i class="far fa-8x fa-times-circle text-danger mb-3 mt-3"></i> <i class="far fa-10x fa-times-circle text-danger mb-3 mt-3"></i>
<h2>Are you sure?</h2> <h2>Are you sure?</h2>
<h6 class="mb-4 text-secondary">Do you really want to delete <?php echo $client_name; ?>? This process cannot be undone.</h6> <h6 class="mb-4 text-secondary">Do you really want to delete <?php echo $client_name; ?>? This process cannot be undone.</h6>
<button type="button" class="btn btn-outline-secondary btn-lg px-5 mr-4" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-outline-secondary btn-lg px-5 mr-4" data-dismiss="modal">Cancel</button>

View File

@@ -487,298 +487,287 @@ include("footer.php");
?> ?>
<script src='plugins/pdfmake/pdfmake.js'></script> <script src='plugins/pdfmake/pdfmake.js'></script>
<script src='plugins/pdfmake/vfs_fonts.js'></script> <script src='plugins/pdfmake/vfs_fonts.js'></script>
<script>
<script> // Invoice markup
// Author: Max Kostinevich
// BETA (no styles)
// http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
// Invoice markup // CodeSandbox Example: https://codesandbox.io/s/pdfmake-invoice-oj81y
// Author: Max Kostinevich
// BETA (no styles)
// http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
// CodeSandbox Example: https://codesandbox.io/s/pdfmake-invoice-oj81y
var docDefinition = { var docDefinition = {
info: { info: {
title: '<?php echo "$company_name - Invoice"; ?>', title: '<?php echo "$company_name - Invoice"; ?>',
author: '<?php echo $company_name; ?>' author: '<?php echo $company_name; ?>'
}, },
footer: {
columns: [
{ text: '<?php echo $config_invoice_footer; ?>', style: 'documentFooterCenter' },
]
},
//watermark: {text: '<?php echo $invoice_status; ?>', color: 'lightgrey', opacity: 0.3, bold: true, italics: false},
footer: { content: [
columns: [ // Header
{
columns: [
<?php if(!empty($company_logo_base64)){ ?>
{
image: '<?php echo "data:image;base64,$company_logo_base64"; ?>',
width: 120
},
<?php } ?>
{ text: '<?php echo $config_invoice_footer; ?>', style: 'documentFooterCenter' }, [
{
text: 'Invoice',
style: 'invoiceTitle',
width: '*'
},
{
text: '<?php echo "$invoice_prefix$invoice_number"; ?>',
style: 'invoiceNumber',
width: '*'
},
],
],
},
// Billing Headers
{
columns: [
{
text: '<?php echo $company_name; ?>',
style:'invoiceBillingTitle',
},
{
text: '<?php echo $client_name; ?>',
style:'invoiceBillingTitleClient',
},
]
},
// Billing Address
{
columns: [
{
text: '<?php echo $company_address; ?> \n <?php echo "$company_city $company_state $company_zip"; ?> \n <?php echo $company_phone; ?> \n <?php echo $company_website; ?>',
style: 'invoiceBillingAddress'
},
{
text: '<?php echo $client_address; ?> \n <?php echo "$client_city $client_state $client_zip"; ?> \n <?php echo $client_email; ?> \n <?php echo $client_phone; ?>',
style: 'invoiceBillingAddressClient'
},
]
},
// Invoice Dates
{
columns: [
{
text:'Invoice Date',
style:'invoiceDateTitle',
width: '*'
},
{
text:'<?php echo $invoice_date ?>',
style:'invoiceDateValue',
width: 80
},
]
},
{
columns: [
{
text:'Due Date',
style:'invoiceDateTitle',
width: '*'
},
{
text:'<?php echo $invoice_due ?>',
style:'invoiceDateValue',
width: 80
},
]
},
] // Line breaks
}, '\n\n',
// Items
{
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
headerRows: 1,
widths: [ '*', 40, 'auto', 'auto', 80 ],
//watermark: {text: '<?php echo $invoice_status; ?>', color: 'lightgrey', opacity: 0.3, bold: true, italics: false}, body: [
// Table Header
[
{
text: 'Product',
style: 'itemsHeader'
},
{
text: 'Qty',
style: [ 'itemsHeader', 'center']
},
{
text: 'Price',
style: [ 'itemsHeader', 'center']
},
{
text: 'Tax',
style: [ 'itemsHeader', 'center']
},
{
text: 'Total',
style: [ 'itemsHeader', 'center']
}
],
// Items
<?php
$total_tax = 0;
$sub_total = 0;
content: [ $sql_invoice_items = mysqli_query($mysqli,"SELECT * FROM invoice_items WHERE invoice_id = $invoice_id ORDER BY item_id ASC");
// Header
{
columns: [
<?php if(!empty($company_logo_base64)){ ?>
{
image: '<?php echo "data:image;base64,$company_logo_base64"; ?>',
width: 120
},
<?php } ?>
[ while($row = mysqli_fetch_array($sql_invoice_items)){
{ $item_name = $row['item_name'];
text: 'Invoice', $item_description = $row['item_description'];
style: 'invoiceTitle', $item_quantity = $row['item_quantity'];
width: '*' $item_price = $row['item_price'];
}, $item_subtotal = $row['item_price'];
{ $item_tax = $row['item_tax'];
text: '<?php echo "$invoice_prefix$invoice_number"; ?>', $item_total = $row['item_total'];
style: 'invoiceNumber', $tax_id = $row['tax_id'];
width: '*' $total_tax = $item_tax + $total_tax;
}, $total_tax = number_format($total_tax,2);
], $sub_total = $item_price * $item_quantity + $sub_total;
], $sub_total = number_format($sub_total, 2);
}, ?>
// Billing Headers
{
columns: [
{
text: '<?php echo $company_name; ?>',
style:'invoiceBillingTitle',
}, // Item
{ [
text: '<?php echo $client_name; ?>', [
style:'invoiceBillingTitleClient', {
text: '<?php echo $item_name; ?>',
style:'itemTitle'
},
{
text: '<?php echo $item_description; ?>',
style:'itemDescription'
}
],
{
text:'<?php echo $item_quantity; ?>',
style:'itemQty'
},
{
text:'$<?php echo $item_price; ?>',
style:'itemNumber'
},
{
text:'$<?php echo $item_tax; ?>',
style:'itemNumber'
},
{
text: '$<?php echo $item_total; ?>',
style:'itemTotal'
}
],
}, <?php
] }
}, ?>
// Billing Address // END Items
{ ]
columns: [ }, // table
{ layout: 'lightHorizontalLines'
text: '<?php echo $company_address; ?> \n <?php echo "$company_city $company_state $company_zip"; ?> \n <?php echo $company_phone; ?> \n <?php echo $company_website; ?>', },
style: 'invoiceBillingAddress' // TOTAL
}, {
{ table: {
text: '<?php echo $client_address; ?> \n <?php echo "$client_city $client_state $client_zip"; ?> \n <?php echo $client_email; ?> \n <?php echo $client_phone; ?>', // headers are automatically repeated if the table spans over multiple pages
style: 'invoiceBillingAddressClient' // you can declare how many rows should be treated as headers
}, headerRows: 0,
] widths: [ '*', 80 ],
},
// Invoice Dates
{
columns: [
{
text:'Invoice Date',
style:'invoiceDateTitle',
width: '*'
},
{
text:'<?php echo $invoice_date ?>',
style:'invoiceDateValue',
width: 80
}
]
},
{
columns: [
{
text:'Due Date',
style:'invoiceDateTitle',
width: '*'
},
{
text:'<?php echo $invoice_due ?>',
style:'invoiceDateValue',
width: 80
}
]
},
// Line breaks body: [
'\n\n', // Total
// Items [
{ {
table: { text:'Subtotal',
// headers are automatically repeated if the table spans over multiple pages style:'itemsFooterSubTitle'
// you can declare how many rows should be treated as headers },
headerRows: 1, {
widths: [ '*', 40, 'auto', 'auto', 80 ], text:'$<?php echo $sub_total; ?>',
style:'itemsFooterSubValue'
body: [ }
// Table Header ],
[ [
{ {
text: 'Product', text:'Tax',
style: 'itemsHeader' style:'itemsFooterSubTitle'
}, },
{ {
text: 'Qty', text: '$<?php echo number_format($total_tax,2); ?>',
style: [ 'itemsHeader', 'center'] style:'itemsFooterSubValue'
}, }
{ ],
text: 'Price', [
style: [ 'itemsHeader', 'center'] {
}, text:'Total',
{ style:'itemsFooterTotalTitle'
text: 'Tax', },
style: [ 'itemsHeader', 'center'] {
}, text: '$<?php echo number_format($invoice_amount,2); ?>',
{ style:'itemsFooterTotalValue'
text: 'Total', }
style: [ 'itemsHeader', 'center'] ],
} [
], {
// Items text:'Paid',
<?php style:'itemsFooterSubTitle'
$total_tax = 0; },
$sub_total = 0; {
text: '$<?php echo number_format($amount_paid,2); ?>',
$sql_invoice_items = mysqli_query($mysqli,"SELECT * FROM invoice_items WHERE invoice_id = $invoice_id ORDER BY item_id ASC"); style:'itemsFooterSubValue'
}
while($row = mysqli_fetch_array($sql_invoice_items)){ ],
$item_name = $row['item_name']; [
$item_description = $row['item_description']; {
$item_quantity = $row['item_quantity']; text:'Balance',
$item_price = $row['item_price']; style:'itemsFooterSubTitle'
$item_subtotal = $row['item_price']; },
$item_tax = $row['item_tax']; {
$item_total = $row['item_total']; text: '$<?php echo number_format($balance,2); ?>',
$tax_id = $row['tax_id']; style:'itemsFooterSubValue'
$total_tax = $item_tax + $total_tax; }
$total_tax = number_format($total_tax,2); ],
$sub_total = $item_price * $item_quantity + $sub_total; ]
$sub_total = number_format($sub_total, 2); }, // table
echo " layout: 'lightHorizontalLines'
},
// Item 1 {
[ text: 'Notes',
[ style:'notesTitle'
{ },
text: '$item_name', {
style:'itemTitle' text: '<?php //echo $invoice_note; ?>',
}, style:'notesText'
{ }
text: '$item_description', ], //End Content,
style:'itemDescription' styles: {
// Document Footer
} documentFooterCenter: {
], fontSize: 10,
{ margin: [5,5,5,5],
text:'$item_quantity', alignment:'center'
style:'itemQty' },
}, // Invoice Title
{
text:'$$item_price',
style:'itemNumber'
},
{
text:'$$item_tax',
style:'itemNumber'
},
{
text: '$$item_total',
style:'itemTotal'
}
],
";
}
?>
// END Items
]
}, // table
layout: 'lightHorizontalLines'
},
// TOTAL
{
table: {
// headers are automatically repeated if the table spans over multiple pages
// you can declare how many rows should be treated as headers
headerRows: 0,
widths: [ '*', 80 ],
body: [
// Total
[
{
text:'Subtotal',
style:'itemsFooterSubTitle'
},
{
text:'$<?php echo $sub_total; ?>',
style:'itemsFooterSubValue'
}
],
[
{
text:'Tax',
style:'itemsFooterSubTitle'
},
{
text: '$<?php echo number_format($total_tax,2); ?>',
style:'itemsFooterSubValue'
}
],
[
{
text:'Total',
style:'itemsFooterTotalTitle'
},
{
text: '$<?php echo number_format($invoice_amount,2); ?>',
style:'itemsFooterTotalValue'
}
],
[
{
text:'Paid',
style:'itemsFooterSubTitle'
},
{
text: '$<?php echo number_format($amount_paid,2); ?>',
style:'itemsFooterSubValue'
}
],
[
{
text:'Balance',
style:'itemsFooterSubTitle'
},
{
text: '$<?php echo number_format($balance,2); ?>',
style:'itemsFooterSubValue'
}
],
]
}, // table
layout: 'lightHorizontalLines'
},
{
text: 'Notes',
style:'notesTitle'
},
{
text: '<?php ?>',
style:'notesText'
}
],
styles: {
// Document Footer
documentFooterCenter: {
fontSize: 10,
margin: [5,5,5,5],
alignment:'center'
},
// Invoice Title
invoiceTitle: { invoiceTitle: {
fontSize: 18, fontSize: 18,
bold: true, bold: true,
@@ -790,7 +779,6 @@ include("footer.php");
fontSize: 14, fontSize: 14,
alignment:'right' alignment:'right'
}, },
// Billing Headers // Billing Headers
invoiceBillingTitle: { invoiceBillingTitle: {
fontSize: 14, fontSize: 14,
@@ -806,14 +794,14 @@ include("footer.php");
}, },
// Billing Details // Billing Details
invoiceBillingAddress: { invoiceBillingAddress: {
fontSize: 10, fontSize: 10,
lineHeight: 1.2 lineHeight: 1.2
}, },
invoiceBillingAddressClient: { invoiceBillingAddressClient: {
fontSize: 10, fontSize: 10,
lineHeight: 1.2, lineHeight: 1.2,
alignment:'right', alignment:'right',
margin:[0,0,0,30] margin:[0,0,0,30]
}, },
// Invoice Dates // Invoice Dates
invoiceDateTitle: { invoiceDateTitle: {
@@ -827,77 +815,76 @@ include("footer.php");
}, },
// Items Header // Items Header
itemsHeader: { itemsHeader: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
bold: true bold: true
}, },
// Item Title // Item Title
itemTitle: { itemTitle: {
fontSize: 10, fontSize: 10,
bold: true, bold: true,
margin: [0,5,0,3] margin: [0,5,0,3]
}, },
itemDescription: { itemDescription: {
italics: true, italics: true,
fontSize: 9, fontSize: 9,
lineHeight: 1.1, lineHeight: 1.1,
margin: [0,3,0,5] margin: [0,3,0,5]
}, },
itemQty: { itemQty: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
alignment: 'center', alignment: 'center',
}, },
itemNumber: { itemNumber: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
alignment: 'center', alignment: 'center',
}, },
itemTotal: { itemTotal: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
bold: true, bold: true,
alignment: 'center', alignment: 'center',
}, },
// Items Footer (Subtotal, Total, Tax, etc) // Items Footer (Subtotal, Total, Tax, etc)
itemsFooterSubTitle: { itemsFooterSubTitle: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
alignment:'right', alignment:'right',
}, },
itemsFooterSubValue: { itemsFooterSubValue: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
bold: true, bold: true,
alignment:'center', alignment:'center',
}, },
itemsFooterTotalTitle: { itemsFooterTotalTitle: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
bold: true, bold: true,
alignment:'right', alignment:'right',
}, },
itemsFooterTotalValue: { itemsFooterTotalValue: {
fontSize: 10, fontSize: 10,
margin: [0,5,0,5], margin: [0,5,0,5],
bold: true, bold: true,
alignment:'center', alignment:'center',
}, },
notesTitle: { notesTitle: {
fontSize: 10, fontSize: 10,
bold: true, bold: true,
margin: [0,50,0,3], margin: [0,50,0,3],
}, },
notesText: { notesText: {
fontSize: 10 fontSize: 10
}, },
center: { center: {
alignment:'center', alignment:'center',
}, },
}, },
defaultStyle: { defaultStyle: {
columnGap: 20, columnGap: 20,
} }
}; }
</script> </script>

View File

@@ -86,7 +86,7 @@ if ($total_found_rows > 10) {
} }
if($total_found_rows == 0){ if($total_found_rows == 0){
echo "<center><h3 class='text-secondary'><i class='fa fa-fw fa-2x fa-meh-rolling-eyes'></i><br>Records? What..</h3></center>"; echo "<center><i class='far fa-fw fa-6x fa-meh-rolling-eyes text-secondary'></i><h3 class='text-secondary mt-2'>Records? whattt</h3></center>";
} }
?> ?>