templates/fos/parcels/receipt/receipt_g03_pdf_mobile.html.twig line 1

Open in your IDE?
  1. {% block stylesheets %}
  4. <style>
  7. h6 {
  8. font-weight: bold;
  9. }
  11. h3 {
  12. /*font-size: 20px;*/
  13. }
  15. h5, h3, h4, p {
  16. padding: 0px;
  17. font-family: "Amaranth", sans-serif;
  18. background: #ffffff;
  19. }
  21. legend {
  22. border: none;
  23. padding: 5px;
  24. }
  26. .print-area h5, .print-area h3, .print-area h4 {
  27. padding: 0px;
  28. font-family: "Nova Flat", sans-serif;
  29. background: #ffffff;
  30. border: none;
  31. margin: 0;
  32. }
  34. .print-area p {
  35. font-size: 12px;
  36. padding: 4px;
  37. margin: 0px;
  38. line-height: 10px;
  39. border: none;
  40. }
  42. hr {
  43. margin-top: 1px;
  44. margin-bottom: 1px;
  45. border-top: 2px dashed rgba(0, 0, 0, 0.99);
  46. }
  48. .print-area hr {
  49. border-top: 1px dashed rgba(0, 0, 0, 0.99);
  50. }
  52. .print-area {
  53. width: 28%;
  54. background: white;
  55. /*border: 1px dotted;*/
  56. padding: 2%;
  57. display: block;
  58. /*background-color: firebrick;*/
  59. }
  61. .print-area table {
  62. font-family: 'Fjord One', serif;
  64. }
  67. element.style {
  68. }
  70. fieldset {
  71. display: block;
  72. margin-left: 0px;
  73. margin-right: 2px;
  74. border-top: 1px dotted black;
  76. }
  78. .kkk fieldset {
  79. float: right;
  80. width: 40%;
  81. }
  83. .detail {
  84. padding: 0px;
  85. font-size: 11px;
  86. border: none;
  87. }
  89. @media print {
  91. .sf-toolbar, .sf-display-none, .sf-minitoolbar {
  92. display: none;
  93. }
  95. .print-area {
  96. display: block;
  97. }
  99. @page {
  100. margin: 0 !important;
  101. }
  103. html {
  104. margin: 0 !important;
  105. }
  107. body {
  108. margin: 0 !important;
  109. }
  111. .print-area {
  112. width: 100%;
  113. }
  115. .pro {
  116. display: none;
  117. }
  119. .sf-toolbar, .sf-toolbarreset, .sf-minitoolbar {
  120. display: none;
  121. }
  123. /*.page-break {display: block; page-break-before: always }*/
  124. .page-break {
  125. page-break-before: avoid;
  126. }
  128. .page-break {
  129. page-break-after: always;
  130. }
  132. pre, blockquote {
  133. page-break-inside: avoid;
  134. }
  137. }
  139. .parcel {
  140. /*font-family: 'Big Shoulders Text', cursive;*/
  141. margin-bottom: 10px;
  142. /*margin-left: 10px;*/
  143. }
  146. .parcel h3, .parcel span {
  147. font-family: 'Merriweather', serif;
  148. margin-top: 15px;
  149. }
  151. .sender_receiver {
  153. }
  155. .destinations {
  156. float: left;
  157. width: auto;
  158. padding: 0px;
  159. font-family: 'Open Sans', sans-serif;
  160. margin-bottom: 15px;
  161. }
  163. .destinations h4, .destinations b {
  164. font-family: 'Merriweather', serif;
  165. }
  167. .destinations h3 {
  168. margin-bottom: 10px;
  169. }
  171. .description {
  172. font-size: 30px;
  173. /*margin-left: 10px;*/
  174. }
  176. .all_parcels {
  177. text-transform: uppercase;
  179. /*-ms-transform: rotate(90deg);*/
  180. /*-moz-transform: rotate(90deg);*/
  181. /*-webkit-transform: rotate(90deg);*/
  182. /*-o-transform: rotate(90deg);*/
  183. margin-top: 115px;
  184. width: 430px;
  185. margin-left: -60px;
  186. }
  188. .payment button, .print, .payment a {
  189. width: 150px;
  190. border-radius: 30px;
  191. }
  193. .payment .cash {
  194. float: right;
  195. }
  197. .payment .cash img {
  198. height: 20px;
  199. }
  202. .dropdown-menu > li.kopie > a {
  203. padding-left: 5px;
  204. }
  206. .dropdown-submenu {
  207. position: relative;
  208. }
  210. .dropdown-submenu > .dropdown-menu {
  211. top: 0;
  212. left: 100%;
  213. margin-top: -6px;
  214. margin-left: -1px;
  215. -webkit-border-radius: 0 6px 6px 6px;
  216. -moz-border-radius: 0 6px 6px 6px;
  217. border-radius: 0 6px 6px 6px;
  218. }
  220. .dropdown-submenu > a:after {
  221. border-color: transparent transparent transparent #333;
  222. border-style: solid;
  223. border-width: 5px 0 5px 5px;
  224. content: " ";
  225. display: block;
  226. float: right;
  227. height: 0;
  228. margin-right: -10px;
  229. margin-top: 5px;
  230. width: 0;
  231. }
  233. .dropdown-submenu:hover > a:after {
  234. border-left-color: #555;
  235. }
  237. .dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  238. text-decoration: underline;
  239. }
  241. @media (max-width: 767px) {
  243. .navbar-nav {
  244. display: inline;
  245. }
  247. .navbar-default .navbar-brand {
  248. display: inline;
  249. }
  251. .navbar-default .navbar-toggle .icon-bar {
  252. background-color: #fff;
  253. }
  255. .navbar-default .navbar-nav .dropdown-menu > li > a {
  256. color: red;
  257. background-color: #ccc;
  258. border-radius: 4px;
  259. margin-top: 2px;
  260. }
  262. .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  263. color: #333;
  264. }
  266. .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  267. .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  268. background-color: #ccc;
  269. }
  271. .navbar-nav .open .dropdown-menu {
  272. border-bottom: 1px solid white;
  273. border-radius: 0;
  274. }
  276. .dropdown-menu {
  277. padding-left: 10px;
  278. }
  280. .dropdown-menu .dropdown-menu {
  281. padding-left: 20px;
  282. }
  284. .dropdown-menu .dropdown-menu .dropdown-menu {
  285. padding-left: 30px;
  286. }
  288. li.dropdown.open {
  289. border: 0px solid red;
  290. }
  292. }
  294. @media (min-width: 768px) {
  295. ul.nav li:hover > ul.dropdown-menu {
  296. display: block;
  297. }
  299. #navbar {
  300. text-align: center;
  301. }
  302. }
  305. .dropdown-submenu .dropdown-menu li {
  306. font-size: 12px;
  307. }
  309. .invalid-feedback {
  310. color: orangered;
  311. font-size: 12px;
  312. }
  314. legend {
  315. display: block;
  316. max-width: 100%;
  317. width: auto;
  318. padding: 10px;
  319. margin-bottom: 5px;
  320. font-size: 12px;
  321. line-height: 1px;
  322. color: inherit;
  323. white-space: normal;
  324. border: 1px solid;
  325. /*font-family: "Nova Flat", Helvetica, Arial, sans-serif;*/
  326. font-family: "Amaranth", Monaco, Consolas, "Courier New", monospace;
  327. font-weight: bolder;
  328. }
  330. fieldset {
  331. display: block;
  332. margin-left: 0px;
  333. margin-right: 2px;
  334. margin-top: 10px;
  335. padding-left: 10px;
  336. /*padding-top: 0.35em;
  337. padding-bottom: 0.625em;
  338. padding-left: 0.75em;
  339. padding-right: 0.75em;*/
  340. border-top: 1px dotted black;
  341. }
  343. .datagrid-cell {
  344. text-transform: uppercase;
  345. }
  347. .datagrid-footer-inner {
  348. font-weight: bolder;
  349. }
  351. .datagrid-footer-inner .datagrid-cell {
  352. font-size: 20px;
  353. }
  355. .panel-footer {
  356. text-align: center;
  357. }
  360. h6 {
  361. font-weight: bold;
  362. }
  364. h3 {
  365. /*font-size: 20px;*/
  366. }
  368. h5, h3, h4, p {
  369. padding: 0px;
  370. font-family: "Amaranth", sans-serif;
  371. background: #ffffff;
  372. border: 1px dotted #cccccc;
  373. }
  375. legend {
  376. border: none;
  377. padding: 5px;
  378. }
  380. .print-area h5, .print-area h3, .print-area h4 {
  381. padding: 0px;
  382. font-family: "Nova Flat", sans-serif;
  383. background: #ffffff;
  384. border: none;
  385. margin: 0;
  386. }
  388. .print-area p {
  389. font-size: 12px;
  390. padding: 0px;
  391. margin: 0px;
  392. line-height: 10px;
  393. border: none;
  394. }
  396. hr {
  397. margin-top: 1px;
  398. margin-bottom: 1px;
  399. border-top: 2px dashed rgba(0, 0, 0, 0.99);
  400. }
  402. .print-area hr {
  403. border-top: 1px dashed rgba(0, 0, 0, 0.99);
  404. }
  406. .print-area {
  407. width: 28%;
  408. background: white;
  409. /*border: 1px dotted;*/
  410. padding: 2%;
  411. display: block;
  412. }
  414. .print-area table {
  415. font-family: monospace, monospace;
  417. }
  420. element.style {
  421. }
  423. fieldset {
  424. display: block;
  425. margin-left: 0px;
  426. margin-right: 2px;
  427. /*border: 1px dashed black;*/
  428. padding: 0px;
  429. }
  431. .detail {
  432. padding: 0px;
  433. font-size: 11px;
  434. border: none;
  435. }
  437. @media print {
  439. .print-area {
  440. display: block;
  441. }
  443. @page {
  444. margin: 0 !important;
  445. }
  447. html {
  448. margin: 0 !important;
  449. }
  451. body {
  452. margin: 0 !important;
  453. }
  455. .print-area {
  456. width: 100%;
  457. }
  459. .pro {
  460. display: none;
  461. }
  463. .sf-toolbar, .sf-toolbarreset, .sf-minitoolbar {
  464. display: none;
  465. }
  466. }
  468. table {
  469. border-collapse: collapse;
  470. }
  471. </style>
  472. {% endblock %}
  474. {% block body %}
  476. <div class="print-area" id="print-area">
  477. <div class="receipt-print" style="border: 1px solid black;">
  478. <div align="center">
  479. <img id="img.base-64" style="height: 80px;" src="{{ 'data:image/jpg;base64,'~logoBase64 }}" alt=""/>
  480. </div>
  481. <h5 style="text-align: center; align-content: center">NENO COURIER SERVICES LTD</h5>
  483. <p style="text-align: center; align-content: center; font-size: 10px">
  484. P.O BOX 660-60100 - EMBU <br/>
  485. TEL:{{ waybill.fromStation.stationName }}:{{ waybill.fromStation.phoneNumbers }}<br>
  486. {{ waybill.toStation.stationName }}: {{ waybill.toStation.phoneNumbers }} </p>
  487. <p style="text-align: center;">----------------------------------------------</p>
  488. <table style="width: 100%; font-size: 10px">
  489. <tr>
  490. <td align="right" style="width: 40%;">PIN:</td>
  491. <td>P051185384I</td>
  492. </tr>
  494. <tr>
  495. {% if transaction.pinNumber %}
  496. <td align="right">BUYERS PIN:</td>
  497. <td>{{ transaction.pinNumber | upper }}</td>
  498. {% endif %}
  499. </tr>
  500. </table>
  501. <div style="align-content: center; text-align: center; ">
  502. <p style="font-weight: bold; font-size: 10px; margin-bottom: 5px;">{{ receiptType }}</p>
  503. </div>
  505. <table style="width: 100%; border: 1px solid black; border-top: 1px dashed black; padding: 5px;">
  506. <thead>
  507. <tr>
  508. <td colspan="2" style="text-align: center; padding: 0px;">
  509. <p style="text-align: center; font-size: 10px;">{{ transaction.createdAt | date }}</p>
  510. <p style="font-size: 10px;"> WAYBILL/RCP#{{ waybill.id }}</p>
  511. </td>
  512. </tr>
  513. <tr>
  514. <td colspan="2" style="text-align: center; padding: 0px;">
  516. {# <barcode code="{{ waybill.id }}" height="0.66" type="EAN128C" text="1"/>#}
  517. {# <br>#}
  518. <p style='font-weight:bolder; font-size: 20px; font-family: "Amaranth", sans-serif'>{{ waybill.id }}</p>
  519. </td>
  520. </tr>
  521. </thead>
  522. </table>
  523. <table style="width: 100%; border: 1px solid black; padding: 5px;">
  524. <thead>
  526. <tr>
  527. <th style="text-align: left;">
  528. <h6>Parcel Value</h6>
  529. </th>
  530. <th style="text-align: right;">
  531. <h6>{{ waybill.parcelValue | number_format }}</h6>
  532. </th>
  533. </tr>
  534. </thead>
  535. </table>
  536. <table style="width: 100%; border: 1px solid black; padding: 5px;">
  537. <thead>
  539. <tr>
  540. <th style="text-align: left;">
  541. <h6>FROM</h6>
  542. </th>
  543. <th style="text-align: right;">
  544. <h6>TO</h6>
  545. </th>
  546. </tr>
  547. </thead>
  548. <tbody>
  549. <tr>
  550. <td style="font-size: 10px;">
  551. <div style="">
  552. <p style="font-weight: normal;">{{ waybill.senderName | upper }}</p>
  553. <p>{{ waybill.senderPhoneNumber }}</p>
  554. <p>{{ waybill.fromStation.stationName | upper }}</p>
  555. </div>
  557. </td>
  558. <td style="text-align: right; font-size: 10px;">
  559. <div style="">
  560. <p style="font-weight: normal; ">{{ waybill.receiverName | upper }}</p>
  561. <p>{{ waybill.receiverPhoneNumber }}</p>
  562. <p>{{ waybill.toStation.stationName | upper }}</p><br>
  563. </div>
  564. </td>
  565. </tr>
  566. </tbody>
  567. </table>
  570. {# <div style="text-align: center; margin-bottom: 0px;">- - - - - - - - - - - - - - - - - - - - - - - - -</div>#}
  572. <table style="margin-top: 1px; width:100%; margin-bottom: 0px; font-size: 10px;">
  573. {% for index, parcel in parcels %}
  574. <tr>
  575. <td><b style="font-size: 18px;">◾</b></td>
  576. <td colspan="2" style="font-size: 12px;">{{ parcel.description | slice(0,25) }} </td>
  577. <td align="right" style="font-size: 12px; padding-left: 5px; padding-right:5px;">1 x</td>
  578. <td align="right"
  579. style="font-size: 12px;">{{ (transaction.amount/waybill.percelCount) | number_format(2, '.', ',') }}</td>
  580. </tr>
  581. {% endfor %}
  582. </table>
  583. <div style="text-align: center; margin-bottom: 0px;">- - - - - - - - - - - - - - - - - - - - - - - - -</div>
  585. <table style="text-align: center; width: 100%; align-content: center;">
  586. <tr style="border-bottom: 1px solid black;">
  587. <td align="left" style="font-size: 10px;">TOTAL TAX EXCL</td>
  588. <td align="right"
  589. style="font-weight: bolder;font-size: 10px;">{{ (transaction.grossAmount - transaction.taxAmount) | number_format(2, '.', ',') }}</td>
  590. </tr>
  591. <tr>
  592. <td align="left" style="font-size: 10px;">TAXES 16%</td>
  593. <td align="right"
  594. style="font-weight: bolder;font-size: 10px;">{{ transaction.taxAmount | number_format(2, '.', ',') }}</td>
  595. </tr>
  597. </table>
  598. <div style="text-align: center; margin-bottom: -2px;"></div>
  600. <table style="text-align: center; width:100%; align-content: center;">
  601. <tr style="">
  602. <td align="left" style="font-weight: bold; font-size: 10px;">TOTAL AMOUNT</td>
  603. <td align="right"
  604. style="font-weight: bold; font-size: 10px;">{{ transaction.amount | number_format(2, '.', ',') }}</td>
  605. </tr>
  606. </table>
  607. {# <b style="text-align: center; margin-bottom: 0px;">- - - - - - - - - - - - - - - - - - - - - - - - -</b>#}
  609. <div style="border: 1px dotted; margin: 3px; padding: 2px;">
  610. <table style="width: 100%;">
  611. {% if transaction.paymentMethod == 'MPESA' %}
  612. <tr>
  613. <td style="text-align: left; font-size: 10px;">PAID IN</td>
  614. <td style="text-align: right; font-size: 10px;"> {{ transaction.paymentMethod }} [{{ mpesa.mpesa.transactionId }}]
  615. by {{ mpesa.mpesa.firstName | capitalize }}</td>
  616. </tr>
  617. {% elseif transaction.paymentMethod == 'MPESA_CASH' %}
  618. <tr>
  619. <td style="text-align: left;font-size: 10px;">PAID IN</td>
  620. <td style="text-align: right;font-size: 10px;"> {{ transaction.paymentMethod }} [{{ mpesa.mpesa.transactionId }}]
  621. by {{ mpesa.mpesa.firstName | capitalize }}</td>
  622. </tr>
  623. {% else %}
  624. <tr>
  625. <td style="text-align: left; font-size: 10px;">PAID IN</td>
  626. <td style="text-align: right; font-size: 10px;">CASH</td>
  627. </tr>
  629. {% endif %}
  631. </table>
  632. <table style="width: 100%;">
  633. <tr>
  634. <td style="text-align: left;font-size: 10px;">SERVED BY</td>
  635. <td style="text-align: right;font-size: 10px;">{{ by.preferredName | capitalize }}</td>
  636. </tr>
  637. </table>
  638. </div>
  641. <p>
  643. {# <b style="text-align: center;">- - - - - - - - - - - - - - - - - - - - - - - - -</b>#}
  644. {% if qrcode is defined %}
  646. <table>
  647. <tr>
  648. <td>
  649. <img id="img.base-64" style="width: 100px; height: 100px;" src="{{ 'data:image/png;base64,'~qrcode }}" alt=""/>
  650. </td>
  651. <td>
  652. <p style="width: 100%; font-weight: bold; font-size: 10px;">CONTROL UNIT </p>
  653. <p>-------------------------</p>
  654. <p style="font-size: 10px;"><b>SERIAL NUMBER</b></p>
  655. {# <p style="font-size: 10px; font-weight: normal;">KRAMW011202207060805</p>#}
  656. <p style="font-size: 10px; font-weight: normal;">KRAMW011202207061147</p>
  657. <p style="font-size: 10px;"><b>INVOICE NUMBER</b></p>
  658. <p style="font-size: 10px;font-weight: normal;">{{ timsInvoiceNumber }}</p>
  659. </td>
  660. </tr>
  661. </table>
  664. {% endif %}
  666. <div style="text-align: center;">
  667. <p>
  668. <i>"<b>Thank you</b> for choosing <br> Neno Courier Services."</i>
  669. </p>
  670. <p><i>Have an awesome
  671. {% set currentHour = (waybill.createdAt | date('H')) %}
  674. {% if currentHour > 0 and currentHour < 12 %}
  675. day
  676. {% elseif currentHour >= 12 and currentHour < 15 %}
  677. afternoon
  678. {% elseif currentHour >= 16 and currentHour < 23 %}
  679. evening
  680. {% endif %}
  682. </i></p>
  683. </div>
  685. </div>
  690. {% for parcel in parcels %}
  691. <div class="page-break" style="margin-top:0px;"></div>
  693. <div style="border: 1px solid black;">
  695. <div style="text-align: center; margin-bottom: 1px; margin-top:1px; border: 1px solid black;">
  696. <h3>NENO COURIER SERVICES</h3>
  697. <p style="text-align: center; align-content: center; ">P.O BOX 660-60100,
  698. Tel:{{ waybill.fromStation.stationName }}:
  699. <b style="font-family: 'Merriweather', serif;"> {{ waybill.fromStation.phoneNumbers }}</b>
  700. {{ waybill.toStation.stationName }}:
  701. <b>{{ waybill.toStation.phoneNumbers }}</b>
  702. </p>
  703. <h1 style="margin: 1px; padding: 0px;"><b style="font-weight: bold; font-family: serif;">{{ waybill.id }}</b></h1>
  705. <div style="text-align: center; margin-bottom: 1px;">
  706. <barcode code="{{ waybill.id }}" size="2" type="I25" text="1"/>
  707. <h4><b>{{ waybill.id }}</b></h4>
  708. </div>
  709. <p align="center">{{ transaction.createdAt | date }}</p>
  710. <h5>by:{{ waybill.createdBy.person.preferredName }}</h5>
  711. <hr>
  712. </div>
  714. <table rotate="90" style="padding-top:50px; border-collapse: collapse;">
  715. <thead>
  716. <tr>
  717. <th colspan="2">
  718. <div style="font-size: 45px;">
  719. {{ waybill.toStation }} -
  720. {% if waybill.fromStation.id < 10 %}
  721. 00{{ waybill.fromStation.id }}
  722. {% elseif waybill.fromStation.id > 9 and waybill.fromStation.id < 100 %}
  723. 0{{ waybill.fromStation.id }}
  724. {% else %}
  725. {{ waybill.fromStation.id }}
  726. {% endif %}
  727. </div>
  728. </th>
  729. </tr>
  730. <tr>
  731. <th colspan="2">
  732. <h3 style="width: 400px; font-weight: normal; ">
  733. {# {% set receiverP = waybill.receiverPhoneNumber | split(' ') %}#}
  734. {# {{ receiverP[0] ~ ' *** '~receiverP[2] }}#}
  735. {{ waybill.receiverPhoneNumber }}
  736. <span>KES{{ transaction.amount }}</span>
  737. </h3>
  738. </th>
  739. </tr>
  740. </thead>
  741. <tbody>
  742. <tr style="border-bottom: 1px solid black;">
  743. <th style="border-bottom: 1px solid black;">
  744. <h6 style="text-align: left">FROM</h6>
  745. </th>
  746. <th style="border-bottom: 1px solid black;">
  747. <h6 style="text-align: left">TO</h6>
  748. </th>
  749. </tr>
  750. <tr>
  751. <td style="border-bottom: 1px solid black;">
  752. <div class="destinations">
  753. <h4 style="font-weight: bold;">{{ waybill.senderName | upper }}</h4>
  754. <h5>
  756. {{ waybill.senderPhoneNumber }}
  757. {# {% set senderP = waybill.senderPhoneNumber | split(' ') %}#}
  759. {# {{ senderP[0] ~ ' *** '~senderP[2] }}#}
  760. </h5>
  761. <h5>{{ waybill.fromStation.stationName }}</h5>
  762. </div>
  763. </td>
  764. <td style="border-bottom: 1px solid black;">
  765. <div class="destinations">
  766. <h4 style="font-weight: bold;">{{ waybill.receiverName | upper }}</h4>
  767. <h5>
  768. {{ waybill.receiverPhoneNumber }}
  769. {# {% set receiverP = waybill.receiverPhoneNumber | split(' ') %}#}
  771. {# {{ receiverP[0] ~ ' *** '~receiverP[2] }}#}
  772. </h5>
  773. <h5>{{ waybill.toStation.stationName }}</h5>
  774. </div>
  775. </td>
  776. </tr>
  777. <tr>
  778. <td colspan="2">
  779. <div class="description">
  780. <div style="font-size: 25px;">
  782. {{ parcel.description | slice(0, 70) }}
  783. {% if parcel.description|length > 70 %}
  784. ...
  785. {% endif %}
  787. </div>
  788. <br>
  789. </div>
  790. </td>
  791. </tr>
  792. </tbody>
  793. </table>
  794. </div>
  795. {% endfor %}
  797. </div>
  798. {% endblock %}