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.

Data Visualization Components

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.

Media & Scannable Codes

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.

Previous Standalone Retail and Grid POS Next New Purchases Order