style: increase font sizes and spacing for POS closing receipt layout

This commit is contained in:
Suherdy Yacob 2026-06-01 16:32:01 +07:00
parent 33a69b76ce
commit f31936291f
4 changed files with 59 additions and 59 deletions

View File

@ -1,7 +1,7 @@
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
{ {
'name': 'POS Closing Receipt Printer', 'name': 'POS Closing Receipt Printer',
'version': '19.0.1.3.1', 'version': '19.0.1.3.2',
'category': 'Point of Sale', 'category': 'Point of Sale',
'summary': 'Print payment summary receipt when closing a POS session, with reprint from backend', 'summary': 'Print payment summary receipt when closing a POS session, with reprint from backend',
'description': """ 'description': """

View File

@ -45,7 +45,7 @@
<t t-foreach="docs" t-as="session"> <t t-foreach="docs" t-as="session">
<t t-set="data" t-value="session.get_closing_summary_data()"/> <t t-set="data" t-value="session.get_closing_summary_data()"/>
<div style="font-family: 'Courier New', Courier, monospace; <div style="font-family: 'Courier New', Courier, monospace;
font-size: 13px; font-size: 18px;
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
margin: 0 auto; margin: 0 auto;
@ -54,47 +54,47 @@
<!-- ===== HEADER ===== --> <!-- ===== HEADER ===== -->
<div style="text-align: center; margin-bottom: 10px;"> <div style="text-align: center; margin-bottom: 10px;">
<div style="font-size: 16px; font-weight: bold; <div style="font-size: 24px; font-weight: bold;
letter-spacing: 1px; text-transform: uppercase;"> letter-spacing: 1px; text-transform: uppercase;">
<t t-esc="data['session_name']"/> <t t-esc="data['session_name']"/>
</div> </div>
<div style="margin-top: 4px; font-size: 11px; letter-spacing: 2px;"> <div style="margin-top: 4px; font-size: 15px; letter-spacing: 2px;">
SESSION CLOSING SUMMARY SESSION CLOSING SUMMARY
</div> </div>
<div style="margin-top: 2px; font-size: 10px; color: #666;"> <div style="margin-top: 2px; font-size: 13px; color: #666;">
(REPRINT) (REPRINT)
</div> </div>
</div> </div>
<div style="border-top: 1px dashed #000; margin: 6px 0;"/> <div style="border-top: 1px dashed #000; margin: 8px 0;"/>
<!-- ===== CASHIER &amp; DATETIME ===== --> <!-- ===== CASHIER &amp; DATETIME ===== -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
<tr> <tr>
<td style="font-weight: bold; padding: 2px 0;">Cashier</td> <td style="font-weight: bold; padding: 5px 0;">Cashier</td>
<td style="text-align: right; padding: 2px 0;"> <td style="text-align: right; padding: 5px 0;">
<t t-esc="data['cashier_name']"/> <t t-esc="data['cashier_name']"/>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="font-weight: bold; padding: 2px 0;">Date/Time</td> <td style="font-weight: bold; padding: 5px 0;">Date/Time</td>
<td style="text-align: right; padding: 2px 0; font-size: 11px;"> <td style="text-align: right; padding: 5px 0; font-size: 15px;">
<t t-esc="data['closing_time']"/> <t t-esc="data['closing_time']"/>
</td> </td>
</tr> </tr>
</table> </table>
<div style="border-top: 1px dashed #000; margin: 6px 0;"/> <div style="border-top: 1px dashed #000; margin: 8px 0;"/>
<!-- ===== PAYMENT METHODS ===== --> <!-- ===== PAYMENT METHODS ===== -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
<!-- Cash --> <!-- Cash -->
<t t-if="data['cash_payment']"> <t t-if="data['cash_payment']">
<tr> <tr>
<td style="padding: 3px 0;"> <td style="padding: 5px 0;">
<t t-esc="data['cash_payment']['name']"/> <t t-esc="data['cash_payment']['name']"/>
</td> </td>
<td style="text-align: right; padding: 3px 0;"> <td style="text-align: right; padding: 5px 0;">
<t t-esc="data['cash_payment']['amount']" <t t-esc="data['cash_payment']['amount']"
t-options="{'widget': 'monetary', 'display_currency': session.currency_id}"/> t-options="{'widget': 'monetary', 'display_currency': session.currency_id}"/>
</td> </td>
@ -103,10 +103,10 @@
<!-- Non-cash methods --> <!-- Non-cash methods -->
<t t-foreach="data['non_cash_payments']" t-as="pm"> <t t-foreach="data['non_cash_payments']" t-as="pm">
<tr> <tr>
<td style="padding: 3px 0;"> <td style="padding: 5px 0;">
<t t-esc="pm['name']"/> <t t-esc="pm['name']"/>
</td> </td>
<td style="text-align: right; padding: 3px 0;"> <td style="text-align: right; padding: 5px 0;">
<t t-esc="pm['amount']" <t t-esc="pm['amount']"
t-options="{'widget': 'monetary', 'display_currency': session.currency_id}"/> t-options="{'widget': 'monetary', 'display_currency': session.currency_id}"/>
</td> </td>
@ -114,29 +114,29 @@
</t> </t>
</table> </table>
<div style="border-top: 1px solid #000; margin: 6px 0;"/> <div style="border-top: 1px solid #000; margin: 8px 0;"/>
<!-- ===== GRAND TOTAL ===== --> <!-- ===== GRAND TOTAL ===== -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
<tr> <tr>
<td style="font-weight: bold; font-size: 14px; padding: 4px 0;">TOTAL</td> <td style="font-weight: bold; font-size: 20px; padding: 6px 0;">TOTAL</td>
<td style="text-align: right; font-weight: bold; font-size: 14px; padding: 4px 0;"> <td style="text-align: right; font-weight: bold; font-size: 20px; padding: 6px 0;">
<t t-esc="data['grand_total']" <t t-esc="data['grand_total']"
t-options="{'widget': 'monetary', 'display_currency': session.currency_id}"/> t-options="{'widget': 'monetary', 'display_currency': session.currency_id}"/>
</td> </td>
</tr> </tr>
</table> </table>
<div style="border-top: 1px dashed #000; margin: 6px 0;"/> <div style="border-top: 1px dashed #000; margin: 8px 0;"/>
<!-- ===== FOOTER ===== --> <!-- ===== FOOTER ===== -->
<div style="text-align: center; margin-top: 10px; <div style="text-align: center; margin-top: 12px;
font-size: 11px; letter-spacing: 1px;"> font-size: 15px; letter-spacing: 1px;">
*** Session Closed *** *** Session Closed ***
</div> </div>
<!-- Margin for paper feed --> <!-- Margin for paper feed -->
<div style="margin-top: 24px;">&#160;</div> <div style="margin-top: 28px;">&#160;</div>
</div> </div>
</t> </t>
</t> </t>

View File

@ -8,47 +8,47 @@
--> -->
<t t-name="pos_closing_receipt.ClosingReceipt"> <t t-name="pos_closing_receipt.ClosingReceipt">
<div class="pos-receipt-print"> <div class="pos-receipt-print">
<div class="pos-receipt" style="font-family: 'Courier New', Courier, monospace; font-size: 13px; width: 100%; max-width: 320px; margin: 0 auto; padding: 12px;"> <div class="pos-receipt" style="font-family: 'Courier New', Courier, monospace; font-size: 18px; width: 100%; max-width: 320px; margin: 0 auto; padding: 12px;">
<!-- ===== HEADER ===== --> <!-- ===== HEADER ===== -->
<div style="text-align: center; margin-bottom: 10px;"> <div style="text-align: center; margin-bottom: 10px;">
<div style="font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;"> <div style="font-size: 24px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;">
<t t-esc="props.sessionName"/> <t t-esc="props.sessionName"/>
</div> </div>
<div style="margin-top: 4px; font-size: 11px; letter-spacing: 2px;"> <div style="margin-top: 4px; font-size: 15px; letter-spacing: 2px;">
SESSION CLOSING SUMMARY SESSION CLOSING SUMMARY
</div> </div>
</div> </div>
<div style="border-top: 1px dashed #000; margin: 6px 0;"/> <div style="border-top: 1px dashed #000; margin: 8px 0;"/>
<!-- ===== CASHIER & DATETIME ===== --> <!-- ===== CASHIER & DATETIME ===== -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
<tr> <tr>
<td style="font-weight: bold; padding: 2px 0;">Cashier</td> <td style="font-weight: bold; padding: 5px 0;">Cashier</td>
<td style="text-align: right; padding: 2px 0;"> <td style="text-align: right; padding: 5px 0;">
<t t-esc="props.cashierName"/> <t t-esc="props.cashierName"/>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="font-weight: bold; padding: 2px 0;">Date/Time</td> <td style="font-weight: bold; padding: 5px 0;">Date/Time</td>
<td style="text-align: right; padding: 2px 0; font-size: 11px;"> <td style="text-align: right; padding: 5px 0; font-size: 15px;">
<t t-esc="props.closingTime"/> <t t-esc="props.closingTime"/>
</td> </td>
</tr> </tr>
</table> </table>
<div style="border-top: 1px dashed #000; margin: 6px 0;"/> <div style="border-top: 1px dashed #000; margin: 8px 0;"/>
<!-- ===== PAYMENT METHODS ===== --> <!-- ===== PAYMENT METHODS ===== -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
<!-- Cash --> <!-- Cash -->
<t t-if="props.cashPayment"> <t t-if="props.cashPayment">
<tr> <tr>
<td style="padding: 3px 0;"> <td style="padding: 5px 0;">
<t t-esc="props.cashPayment.name"/> <t t-esc="props.cashPayment.name"/>
</td> </td>
<td style="text-align: right; padding: 3px 0;"> <td style="text-align: right; padding: 5px 0;">
<t t-esc="props.cashPayment.formattedAmount"/> <t t-esc="props.cashPayment.formattedAmount"/>
</td> </td>
</tr> </tr>
@ -57,37 +57,37 @@
<!-- Non-cash methods --> <!-- Non-cash methods -->
<t t-foreach="props.nonCashPayments" t-as="pm" t-key="pm.id"> <t t-foreach="props.nonCashPayments" t-as="pm" t-key="pm.id">
<tr> <tr>
<td style="padding: 3px 0;"> <td style="padding: 5px 0;">
<t t-esc="pm.name"/> <t t-esc="pm.name"/>
</td> </td>
<td style="text-align: right; padding: 3px 0;"> <td style="text-align: right; padding: 5px 0;">
<t t-esc="pm.formattedAmount"/> <t t-esc="pm.formattedAmount"/>
</td> </td>
</tr> </tr>
</t> </t>
</table> </table>
<div style="border-top: 1px solid #000; margin: 6px 0;"/> <div style="border-top: 1px solid #000; margin: 8px 0;"/>
<!-- ===== GRAND TOTAL ===== --> <!-- ===== GRAND TOTAL ===== -->
<table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;"> <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
<tr> <tr>
<td style="font-weight: bold; font-size: 14px; padding: 4px 0;">TOTAL</td> <td style="font-weight: bold; font-size: 20px; padding: 6px 0;">TOTAL</td>
<td style="text-align: right; font-weight: bold; font-size: 14px; padding: 4px 0;"> <td style="text-align: right; font-weight: bold; font-size: 20px; padding: 6px 0;">
<t t-esc="props.grandTotal"/> <t t-esc="props.grandTotal"/>
</td> </td>
</tr> </tr>
</table> </table>
<div style="border-top: 1px dashed #000; margin: 6px 0;"/> <div style="border-top: 1px dashed #000; margin: 8px 0;"/>
<!-- ===== FOOTER ===== --> <!-- ===== FOOTER ===== -->
<div style="text-align: center; margin-top: 10px; font-size: 11px; letter-spacing: 1px;"> <div style="text-align: center; margin-top: 12px; font-size: 15px; letter-spacing: 1px;">
*** Session Closed *** *** Session Closed ***
</div> </div>
<!-- Margin for paper feed --> <!-- Margin for paper feed -->
<div style="margin-top: 24px;">&#160;</div> <div style="margin-top: 28px;">&#160;</div>
</div> </div>
</div> </div>
</t> </t>

View File

@ -256,7 +256,7 @@ patch(Navbar.prototype, {
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
body { body {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
font-size: 13px; font-size: 18px;
background: #fff; background: #fff;
color: #000; color: #000;
} }
@ -268,37 +268,37 @@ patch(Navbar.prototype, {
} }
.center { text-align: center; } .center { text-align: center; }
.header-title { .header-title {
font-size: 16px; font-size: 24px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }
.header-sub { .header-sub {
margin-top: 4px; margin-top: 4px;
font-size: 11px; font-size: 15px;
letter-spacing: 2px; letter-spacing: 2px;
} }
.reprint-label { .reprint-label {
margin-top: 2px; margin-top: 2px;
font-size: 10px; font-size: 13px;
color: #666; color: #666;
} }
.dashed { border-top: 1px dashed #000; margin: 6px 0; } .dashed { border-top: 1px dashed #000; margin: 8px 0; }
.solid { border-top: 1px solid #000; margin: 6px 0; } .solid { border-top: 1px solid #000; margin: 8px 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 6px; } table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
td { padding: 3px 0; } td { padding: 5px 0; }
.right { text-align: right; } .right { text-align: right; }
.bold { font-weight: bold; } .bold { font-weight: bold; }
.total-row td { font-weight: bold; font-size: 14px; padding: 4px 0; } .total-row td { font-weight: bold; font-size: 20px; padding: 6px 0; }
.footer { .footer {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 12px;
font-size: 11px; font-size: 15px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.feed { margin-top: 24px; } .feed { margin-top: 28px; }
@media print { @media print {
@page { margin: 3mm; } @page { size: 80mm auto; margin: 3mm; }
} }
</style> </style>
</head> </head>
@ -317,7 +317,7 @@ patch(Navbar.prototype, {
</tr> </tr>
<tr> <tr>
<td class="bold">Date/Time</td> <td class="bold">Date/Time</td>
<td class="right" style="font-size:11px;">${sessionData.closing_time}</td> <td class="right" style="font-size:15px;">${sessionData.closing_time}</td>
</tr> </tr>
</table> </table>
<div class="dashed"></div> <div class="dashed"></div>