API tools faq
paste
Advertisement
Guest User

ShipX Sample Invoice

a guest
Apr 13th, 2021
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.15 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.   <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
  4.   <style>
  5.     @page {
  6.       margin: 9cm 1.5cm 3cm 1.5cm;
  7.       size: A4;
  8.       font-size: 9pt;
  9.       font-family: Arial;
  10.       @top-center {
  11.         content: element(header);
  12.         vertical-align: bottom;
  13.       }
  14.       @bottom-left {
  15.         content: element(footer);
  16.       }
  17.       @bottom-right {
  18.         content: "Page "counter(page) " of "counter(pages);
  19.         width: 3cm;
  20.         font-size: 8pt;
  21.       }
  22.     }
  23.     #page_header {
  24.       position: running(header);
  25.     }
  26.     body {}
  27.     table {
  28.       border-collapse: collapse;
  29.     }
  30.     table * {
  31.       font-weight: normal;
  32.       font-size: 9pt;
  33.       vertical-align: top;
  34.     }
  35.     #paper {
  36.       font-size: 9pt;
  37.     }
  38.     #company_header {
  39.       text-align: center;
  40.       margin-bottom: 1em;
  41.     }
  42.     #company_header h1 {
  43.       margin-bottom: 0.2em;
  44.     }
  45.     #document_title {
  46.       text-align: center;
  47.       font-weight: bold;
  48.       font-size: 12pt;
  49.       margin-bottom: 1em;
  50.     }
  51.     #page_header_invoice_info,
  52.     #invoice_info {
  53.       margin-bottom: 1em;
  54.     }
  55.     #account-info {
  56.       text-align: left;
  57.     }
  58.     pre.pre-no-padding {
  59.       margin-top: 0px;
  60.       margin-bottom: 5px;
  61.     }
  62.     div.two-column {
  63.       display: grid;
  64.       grid-template:
  65.         "left   right"1fr / 50% 50%;
  66.       align-items: stretch;
  67.     }
  68.     div.two-column-1 {
  69.       grid-area: left;
  70.     }
  71.     div.two-column-2 {
  72.       grid-area: right;
  73.     }
  74.     div.field {
  75.       display: grid;
  76.       grid-template:
  77.         "name   value"1fr / 3.2cm auto;
  78.       text-align: left;
  79.     }
  80.     div.field_name {
  81.       margin-right: 8px;
  82.     }
  83.     div.field_name::after {
  84.       content: ':';
  85.       float: right;
  86.     }
  87.     div#voucher-items table {
  88.       margin-bottom: 1em;
  89.     }
  90.     div#voucher-items table thead tr {
  91.       --pagedjs-repeat-header: all;
  92.     }
  93.     div#voucher-items table thead tr th {
  94.       border-top: solid 1px black;
  95.       border-bottom: solid 1px black;
  96.     }
  97.     div#voucher-items table tbody tr,
  98.     div#voucher-items table tbody tr td {
  99.       break-inside: avoid;
  100.     }
  101.     div#voucher-items table .table-col-index,
  102.     div#voucher-items table .table-col-description {
  103.       text-align: left;
  104.       vertical-align: top;
  105.     }
  106.     div#voucher-items table .table-col-quantity,
  107.     div#voucher-items table .table-col-unitprice,
  108.     div#voucher-items table .table-col-excltax,
  109.     div#voucher-items table .table-col-sst,
  110.     div#voucher-items table .table-col-amount {
  111.       text-align: right;
  112.       vertical-align: top;
  113.       padding-left: 0.2cm;
  114.     }
  115.     div#voucher-items table .table-last-row .table-col-excltax,
  116.     div#voucher-items table .table-last-row .table-col-sst,
  117.     div#voucher-items table .table-last-row .table-col-amount {
  118.       font-weight: bold;
  119.     }
  120.     div#voucher-items table .table-last-row td {
  121.       border-top: solid 1px black;
  122.       border-bottom: solid 1px black;
  123.     }
  124.     div#toucher-table-footer table {
  125.       font-weight: bold;
  126.       width: 100%;
  127.       border-top: solid 1px black;
  128.       border-bottom: solid 1px black;
  129.     }
  130.     div#tax table {
  131.       border-top: solid 1px black;
  132.       border-bottom: solid 1px black;
  133.     }
  134.     div#tax table thead tr th {
  135.       font-weight: bold;
  136.       border-bottom: solid 1px black;
  137.     }
  138.     div#tax table .cell-summary {
  139.       text-align: left;
  140.     }
  141.     div#tax table .cell-amount,
  142.     div#tax table .cell-tax {
  143.       text-align: right;
  144.       padding-left: 0.2cm;
  145.     }
  146.     div.bank {
  147.       margin-bottom: 1em;
  148.     }
  149.     div.invoice_footer {
  150.       height: 100%;
  151.     }
  152.     div#page_footer {
  153.       position: running(footer);
  154.       font-size: 6pt;
  155.       text-align: left;
  156.       margin-bottom: 1cm;
  157.     }
  158.     div#page_foooter_first {
  159.       font-size: 8pt;
  160.       width: 50%
  161.     }
  162.     @media print {
  163.       .last_page_footer {
  164.         position: static; /* <-- Key line */
  165.        bottom: 0px;
  166.        left: 0px;
  167.        width: 50%;
  168.        vertical-align: bottom;
  169.      }
  170.    }
  171.  </style>
  172. </head>
  173. <body>
  174.   <div id="paper">
  175.     <div id="page_header">
  176.       <div id="company_header">
  177.         <h1>{{ companyName }}</h1>
  178.         <span>({{ companyRegistrationNumber }})</span><br />
  179.         <span>{{ companyAddressLine1 }}</span><br />
  180.         <span>{{ companyAddressLine2 }}</span><br />
  181.         <span>{{ companyAddressLine3 }}</span><br />
  182.         <span>Tel: {{ companyPhone }}</span>&nbsp;&nbsp;<span>Fax: {{ companyFax }}</span><br />
  183.  
  184.       </div>
  185.       <div id="document_title">
  186.         {{ title }}
  187.       </div>
  188.       <div id="page_header_invoice_info">
  189.         <div class="two-column">
  190.           <div class="two-column-1">
  191.             <div id="account-info">
  192.               A/C No: <b>{{ accToDebtorCode }}</b><br />
  193.               <b>{{ accToName }}</b><br />
  194.               {{ accToAddress }}<br />
  195.             </div>
  196.           </div>
  197.           <div class="two-column-2">
  198.             <div class="field">
  199.               <div class="field_name">
  200.                 {{ invoiceNumberTitle }}
  201.               </div>
  202.               <div class="field_value">
  203.                 {{ invoiceNumber }}<br />
  204.               </div>
  205.             </div>
  206.             <div class="field">
  207.               <div class="field_name">
  208.                 DATE
  209.               </div>
  210.               <div class="field_value">
  211.                 {{ issueDate }}<br />
  212.               </div>
  213.             </div>
  214.             <div class="field">
  215.               <div class="field_name">
  216.                 TERM
  217.               </div>
  218.               <div class="field_value">
  219.                 {{ term }}<br />
  220.               </div>
  221.             </div>
  222.             <div class="field">
  223.               <div class="field_name">
  224.                 JOB NO.
  225.               </div>
  226.               <div class="field_value">
  227.                 {{ jobNumber }}<br />
  228.               </div>
  229.             </div>
  230.           </div>
  231.         </div>
  232.       </div>
  233.     </div>
  234.     <div id="voucher-items">
  235.       <table width="100%">
  236.         <thead>
  237.           <tr>
  238.             <th class="table-col-index">NO.</th>
  239.             <th class="table-col-description">DESCRIPTION</th>
  240.             <th class="table-col-quantity">QTY</th>
  241.             <th class="table-col-unitprice">UNIT PRICE</th>
  242.             <th class="table-col-amount">AMOUNT ({{ currency }})</th>
  243.           </tr>
  244.         </thead>
  245.         <tbody>
  246.           {{#each voucherItems}}
  247.           <tr>
  248.             <td class="table-col-index">
  249.               {{ math @index "+" 1 }}
  250.             </td>
  251.             <td class="table-col-description">
  252.               {{ chargeItemDescription }}<br />
  253.               <pre class='pre-no-padding'>{{ bookingNo }}{{ reference1 }}{{ description }}</pre>
  254.             </td>
  255.             <td class="table-col-quantity">
  256.               {{ quantity }}
  257.             </td>
  258.             <td class="table-col-unitprice">
  259.               {{ unit }}
  260.             </td>
  261.             <td class="table-col-amount">
  262.               {{ total }}
  263.             </td>
  264.           </tr>
  265.           {{/each }}
  266.         </tbody>
  267.       </table>
  268.     </div>
  269.     <div id="invoice_footer">
  270.       <div id="toucher-table-footer">
  271.         <table>
  272.           <tr class="table-last-row">
  273.             <td class="table-col-description" colspan="2">
  274.               {{ currency }}: {{ totalText }} ONLY
  275.             </td>
  276.             <td class="table-col-amount" colspan="2">
  277.               TOTAL: ({{ currency }})
  278.             </td>
  279.             <td class="table-col-amount">
  280.               {{ total }}
  281.             </td>
  282.           </tr>
  283.         </table>
  284.       </div>
  285.       <div class="two-column">
  286.         <div class="two-column-1">
  287.           NOTE:<br />
  288.           Punter we have to leverage up the messaging for tbrand terrorists. I just wanted to give you a heads-up get six alpha pups in here for a focus group high touch client so we've got to manage that low hanging fruit yet (let's not try to) boil the ocean (here/there/everywhere). Meeting assassin throughput. We’re all in this together, even if our businesses function differently accountable talk or deploy, so drill down pushback, nor let's unpack that later. High
  289.         </div>
  290.         <div class="two-column-2">
  291.           <div id="tax">
  292.             {{ companyName }}<br />
  293.             <br />
  294.             <br />
  295.             <br />
  296.             <br />
  297.             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br />
  298.             AUTHORIZED SIGNATURE
  299.           </div>
  300.         </div>
  301.       </div>
  302.       <div id="page_footer">
  303.         E. & O. E.<br />
  304.        TERMS & CONDITIONS:<br />
  305.        1) Punter we have to leverage up the messaging for tbrand terrorists. I just wanted to give you a heads-up get six alpha pups in here for a focus group high touch client so we've got to manage that low hanging fruit yet (let's not try to) boil the ocean (here/there/everywhere). Meeting assassin throughput. We’re all in this together, even if our businesses function differently accountable talk or deploy, so drill down pushback, nor let's unpack that later. High
  306.      </div>
  307.    </div>
  308.  </div>
  309.  <script>
  310.    class RepeatingTableHeaders extends Paged.Handler {
  311.      constructor(chunker, polisher, caller) {
  312.        super(chunker, polisher, caller);
  313.       }
  314.       afterPageLayout(pageElement, page, breakToken, chunker) {
  315.         // Find all split table elements
  316.         let tables = pageElement.querySelectorAll("table[data-split-from]");
  317.         tables.forEach((table) => {
  318.           // Get the reference UUID of the node
  319.           let ref = table.dataset.ref;
  320.           // Find the node in the original source
  321.           let sourceTable = chunker.source.querySelector("[data-ref='" + ref + "']");
  322.           // Find if there is a header
  323.           let header = sourceTable.querySelector("thead");
  324.           if (header) {
  325.             // Clone the header element
  326.             let clonedHeader = header.cloneNode(true);
  327.             // Insert the header at the start of the split table
  328.             table.insertBefore(clonedHeader, table.firstChild);
  329.           }
  330.         });
  331.       }
  332.     }
  333.     Paged.registerHandlers(RepeatingTableHeaders);
  334.   </script>
  335. </body>
  336. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!