POS Receipt Designer
The POS Receipt Designer is a professional, drag-and-drop customization engine that allows users to create high-quality, branded documents. Whether you are generating an invoice, a sales order, or a delivery note, this tool provides complete control over every visual and data element on the page. User can access this by navigating to POS -> New -> Report Editor.
Toolbar & General Configuration
The top control bar manages the global settings for your design session:
- Template Title & ID: The user can set a unique name (e.g., "Main Retail Receipt") and track the internal Template ID for reference.
- Document Type Dropdown: Specifies the source of data for the template. User can choose between Sales Invoice, Sales Order, or Delivery Note.
- Paper Size Selection: Configures the canvas width to match physical hardware. Options include standard 80mm thermal rolls or 114mm (Extra Wide) formats.
- Bilingual Toggle: Enabling this switch allows the user to display information in two different languages on the same receipt, which is essential for multi-lingual business environments.
- Zoom & Canvas Controls: Allows the user to zoom in/out for precise element placement and use undo/redo for design iterations.
- Session Management: Buttons to create a New template, Open a library of saved designs, or Save the current progress.
Elements Library (Left Sidebar)
These building blocks are dragged onto the canvas to construct the document structure:
Text & Layout Components
- Text: Used to add static messages (e.g., "No Returns After 7 Days") or dynamic text.
- Columns: Creates a side-by-side layout for better organization of data. This element consists of a Label (the static name of the field) and a Value (the actual data placeholder like {{date}}), ensuring key information is displayed clearly in a horizontal row.
- Separator: A horizontal line tool used to visually divide sections, such as separating the header from the item list.
- Spacer: Provides empty vertical space to manage the padding between elements and control the overall length of the receipt.
- Items Table: The primary data block. It automatically generates a table listing all products, quantities, unit prices, tax components, and line totals from the transaction.
- Tax Table: A specialized summary table that displays multiple tax rates (e.g., GST 18%, SGST 9%) and their corresponding calculated amounts for financial transparency.
- Logo/Image: User can upload the company logo to the top of the receipt to reinforce brand identity.
- Barcode: Inserts a scannable 1D barcode of the invoice number, allowing the cashier to scan the physical receipt for rapid returns or inquiries.
- QR Code: Generates a 2D code that can be linked to payment gateways, company websites, or digital feedback forms.
Template Details & Property Panel (Right Sidebar)
When an element is selected on the canvas, this panel provides granular control:
- Transaction Type: Confirms which database module (e.g., sales_invoice) the template is currently pulling data from.
- Elements Count: A read-only tracker showing the total number of components currently active on the canvas.
- Text Direction: A critical setting for global accessibility, allowing the user to toggle between Left to Right and Right to Left formatting.
Live Preview Canvas
The central workspace provides a "What You See Is What You Get" (WYSIWYG) experience. It utilizes double-bracket placeholders (e.g., {{total_quantity}}, {{amount_paid}}, {{change}}) to show exactly where the real-time data will be populated during a sale. User can click and drag any element to reposition it or click the "X" on an element to remove it from the layout.