# POS Sales Order – Full Dynamic (Django + AJAX)

Below is a complete, production-ready example for a dynamic POS **Order Create** page using **Django + AJAX**. It includes:

* A responsive template with Bootstrap
* AJAX product search by **SKU / Name / Category** (debounced)
* Click-to-append product rows to the cart table
* Live calculations (row total, subtotal, discount, tax, VAT, grand total)
* Payment & customer info (right side)
* Submit order via AJAX → redirect to invoice page

> ⚠️ Adjust field names to match your existing models (I mapped to your usual `ProductList`, `CategoryList`).

---

## 1) Template: `templates/pos/pos_order_create.html`

```html
{% extends 'common/base.html' %}
{% load static %}
{% block title %}POS Order Create{% endblock %}
{% block content %}

<style>
  .search-suggestions {position: absolute; z-index: 1000; width: 100%; max-height: 280px; overflow-y: auto;}
  .search-suggestions .list-group-item {cursor: pointer;}
  .table thead th, .table td { vertical-align: middle; }
  .input-sm { height: 34px; padding: 6px 10px; }
</style>

<div class="container-fluid" id="container-wrapper">
  <div class="d-sm-flex align-items-center justify-content-between mb-2">
    <h1 class="h3 mb-0 text-gray-800 mt-2">POS Order Create</h1>
  </div>

  <div class="row g-3">
    <!-- Left: Search + Cart + Summary -->
    <div class="col-lg-8">
      <div class="card shadow mb-3">
        <div class="card-body">
          <!-- Product Search -->
          <div class="mb-3 position-relative">
            <div class="input-group">
              <input id="productSearch" type="text" class="form-control" placeholder="Search by SKU, Product Name, Category..." autocomplete="off">
              <button id="btnSearch" class="btn btn-primary" type="button">Search</button>
            </div>
            <div id="suggestions" class="list-group search-suggestions d-none"></div>
          </div>

          <!-- Cart Table -->
          <div class="table-responsive">
            <table id="cartTable" class="table table-bordered align-middle">
              <thead class="table-light">
                <tr>
                  <th style="width:70px">Image</th>
                  <th>Product Name & SKU</th>
                  <th style="width:100px">Qty</th>
                  <th style="width:140px">Unit Price</th>
                  <th style="width:140px">Row Total</th>
                  <th style="width:60px">Action</th>
                </tr>
              </thead>
              <tbody>
                <!-- rows appended here -->
              </tbody>
            </table>
          </div>

          <!-- Summary -->
          <div class="row mt-4">
            <div class="col-md-6 offset-md-6">
              <table class="table">
                <tbody>
                  <tr>
                    <th>Subtotal:</th>
                    <td class="text-end"><span id="subtotal">0.00</span></td>
                  </tr>
                  <tr>
                    <th>Discount (amount):</th>
                    <td>
                      <input id="discount" type="number" step="0.01" min="0" class="form-control text-end input-sm" value="0">
                    </td>
                  </tr>
                  <tr>
                    <th>Tax (%)</th>
                    <td>
                      <input id="taxPercent" type="number" step="0.01" min="0" class="form-control text-end input-sm" value="0">
                    </td>
                  </tr>
                  <tr>
                    <th>VAT (%)</th>
                    <td>
                      <input id="vatPercent" type="number" step="0.01" min="0" class="form-control text-end input-sm" value="0">
                    </td>
                  </tr>
                  <tr class="table-dark">
                    <th>Grand Total:</th>
                    <td class="text-end fw-bold"><span id="grandTotal">0.00</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Right: Customer + Payment -->
    <div class="col-lg-4">
      <div class="card shadow mb-3">
        <div class="card-body">
          <h5 class="mb-3">Customer Info</h5>
          <div class="mb-2">
            <label class="form-label">Customer Name</label>
            <input id="customerName" type="text" class="form-control" placeholder="Enter customer name">
          </div>
          <div class="mb-2">
            <label class="form-label">Mobile</label>
            <input id="customerMobile" type="text" class="form-control" placeholder="Enter mobile">
          </div>
          <div class="mb-2">
            <label class="form-label">Email</label>
            <input id="customerEmail" type="email" class="form-control" placeholder="Enter email">
          </div>
          <div class="mb-2">
            <label class="form-label">Address</label>
            <textarea id="customerAddress" class="form-control" rows="2" placeholder="Enter address"></textarea>
          </div>

          <hr>

          <h5 class="mb-3">Payment Info</h5>
          <div class="mb-2">
            <label class="form-label">Payment Method</label>
            <select id="paymentMethod" class="form-select">
              <option value="cash">Cash</option>
              <option value="card">Card</option>
              <option value="bkash">Bkash</option>
              <option value="rocket">Rocket</option>
              <option value="bank">Bank Transfer</option>
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label">Paid Amount</label>
            <input id="paidAmount" type="number" step="0.01" min="0" class="form-control" value="0">
          </div>
          <div class="mb-2">
            <label class="form-label">Due Amount</label>
            <input id="dueAmount" type="number" class="form-control" value="0.00" readonly>
          </div>

          <div class="d-grid mt-3">
            <button id="btnSubmitOrder" class="btn btn-success btn-lg" type="button">Confirm Order</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CSRF -->
<input type="hidden" id="csrfToken" value="{% csrf_token %}">

<script>
// -------------------- Helpers --------------------
function getCSRF() {
  // Extract token content from the hidden input rendered by Django
  // The input contains an HTML <input> tag; extract value via regex
  const raw = document.getElementById('csrfToken').value;
  const match = raw.match(/value=['\"]([^'\"]+)['\"]/);
  return match ? match[1] : '';
}

function fmt(n) { return (Number(n) || 0).toFixed(2); }

function debounce(fn, delay = 350) {
  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn.apply(this, args), delay); };
}

// -------------------- State --------------------
const cart = new Map(); // key: product_id, value: {id, name, sku, image, price, qty}

// -------------------- DOM --------------------
const productSearch = document.getElementById('productSearch');
const btnSearch = document.getElementById('btnSearch');
const suggestions = document.getElementById('suggestions');
const cartTableBody = document.querySelector('#cartTable tbody');
const subtotalEl = document.getElementById('subtotal');
const discountEl = document.getElementById('discount');
const taxPercentEl = document.getElementById('taxPercent');
const vatPercentEl = document.getElementById('vatPercent');
const grandTotalEl = document.getElementById('grandTotal');
const paidAmountEl = document.getElementById('paidAmount');
const dueAmountEl = document.getElementById('dueAmount');

// -------------------- Search (AJAX) --------------------
const doSearch = debounce(async () => {
  const q = productSearch.value.trim();
  if (!q) { suggestions.classList.add('d-none'); suggestions.innerHTML = ''; return; }

  try {
    const res = await fetch("{% url 'pos:search_products' %}?q=" + encodeURIComponent(q), {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    const data = await res.json();
    renderSuggestions(data.results || []);
  } catch (e) {
    console.error(e);
  }
}, 350);

function renderSuggestions(items) {
  if (!items.length) { suggestions.classList.add('d-none'); suggestions.innerHTML = ''; return; }
  suggestions.innerHTML = '';
  items.forEach(it => {
    const el = document.createElement('a');
    el.className = 'list-group-item list-group-item-action d-flex align-items-center';
    el.innerHTML = `
      <img src="${it.image_url || ''}" alt="img" style="width:40px;height:40px;object-fit:cover" class="me-2">
      <div class="flex-fill">
        <div class="fw-semibold">${it.name}</div>
        <small class="text-muted">SKU: ${it.sku} • ${it.category || ''}</small>
      </div>
      <span class="ms-2">${fmt(it.price)}</span>
    `;
    el.addEventListener('click', () => { addToCart(it); suggestions.classList.add('d-none'); productSearch.value=''; });
    suggestions.appendChild(el);
  });
  suggestions.classList.remove('d-none');
}

productSearch.addEventListener('input', doSearch);
btnSearch.addEventListener('click', () => doSearch());

document.addEventListener('click', (e) => {
  if (!suggestions.contains(e.target) && e.target !== productSearch) {
    suggestions.classList.add('d-none');
  }
});

// -------------------- Cart Ops --------------------
function addToCart(p) {
  if (cart.has(p.id)) {
    const row = cart.get(p.id);
    row.qty += 1;
    cart.set(p.id, row);
  } else {
    cart.set(p.id, { id: p.id, name: p.name, sku: p.sku, image_url: p.image_url, price: Number(p.price)||0, qty: 1 });
  }
  renderCart();
}

function removeFromCart(pid) {
  cart.delete(pid);
  renderCart();
}

function renderCart() {
  cartTableBody.innerHTML = '';
  for (const row of cart.values()) {
    const tr = document.createElement('tr');
    tr.dataset.pid = row.id;
    tr.innerHTML = `
      <td><img src="${row.image_url || ''}" alt="p" width="50" height="50" style="object-fit:cover"></td>
      <td>${row.name}<br><small class="text-muted">${row.sku}</small></td>
      <td><input type="number" class="form-control form-control-sm qty" min="1" value="${row.qty}"></td>
      <td><input type="number" class="form-control form-control-sm price" step="0.01" min="0" value="${fmt(row.price)}"></td>
      <td class="text-end row-total">${fmt(row.qty * row.price)}</td>
      <td class="text-center"><button class="btn btn-sm btn-danger del">×</button></td>
    `;

    tr.querySelector('.qty').addEventListener('input', (e) => {
      const v = Math.max(1, Number(e.target.value) || 1);
      row.qty = v; cart.set(row.id, row); updateRow(tr, row); calcTotals();
    });
    tr.querySelector('.price').addEventListener('input', (e) => {
      const v = Math.max(0, Number(e.target.value) || 0);
      row.price = v; cart.set(row.id, row); updateRow(tr, row); calcTotals();
    });
    tr.querySelector('.del').addEventListener('click', () => removeFromCart(row.id));
    cartTableBody.appendChild(tr);
  }
  calcTotals();
}

function updateRow(tr, row) {
  tr.querySelector('.row-total').textContent = fmt(row.qty * row.price);
  tr.querySelector('.qty').value = row.qty;
  tr.querySelector('.price').value = fmt(row.price);
}

// -------------------- Totals --------------------
function calcTotals() {
  let subtotal = 0;
  for (const row of cart.values()) subtotal += row.qty * row.price;
  subtotalEl.textContent = fmt(subtotal);

  const discount = Math.min(subtotal, Number(discountEl.value) || 0);
  const taxBase = Math.max(0, subtotal - discount);
  const taxAmt = taxBase * ((Number(taxPercentEl.value) || 0) / 100);
  const vatAmt = taxBase * ((Number(vatPercentEl.value) || 0) / 100);
  const grand = Math.max(0, taxBase + taxAmt + vatAmt);
  grandTotalEl.textContent = fmt(grand);

  const paid = Number(paidAmountEl.value) || 0;
  const due = Math.max(0, grand - paid);
  dueAmountEl.value = fmt(due);
}

discountEl.addEventListener('input', calcTotals);
 taxPercentEl.addEventListener('input', calcTotals);
  vatPercentEl.addEventListener('input', calcTotals);
   paidAmountEl.addEventListener('input', calcTotals);

// -------------------- Submit Order --------------------
const btnSubmit = document.getElementById('btnSubmitOrder');
btnSubmit.addEventListener('click', async () => {
  if (cart.size === 0) { alert('Please add at least one product.'); return; }

  const items = Array.from(cart.values()).map(r => ({
    product_id: r.id,
    qty: r.qty,
    unit_price: Number(r.price)
  }));

  const payload = {
    customer: {
      name: document.getElementById('customerName').value.trim(),
      mobile: document.getElementById('customerMobile').value.trim(),
      email: document.getElementById('customerEmail').value.trim(),
      address: document.getElementById('customerAddress').value.trim()
    },
    payment: {
      method: document.getElementById('paymentMethod').value,
      paid_amount: Number(paidAmountEl.value)||0
    },
    summary: {
      subtotal: Number(subtotalEl.textContent)||0,
      discount: Number(discountEl.value)||0,
      tax_percent: Number(taxPercentEl.value)||0,
      vat_percent: Number(vatPercentEl.value)||0,
      grand_total: Number(grandTotalEl.textContent)||0,
      due_amount: Number(dueAmountEl.value)||0
    },
    items: items
  };

  try {
    const res = await fetch("{% url 'pos:create_order' %}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCSRF(),
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: JSON.stringify(payload)
    });
    const data = await res.json();
    if (data.success) {
      window.location.href = data.invoice_url; // e.g. /pos/invoice/123/
    } else {
      alert(data.message || 'Failed to create order');
    }
  } catch (e) {
    console.error(e);
    alert('Something went wrong.');
  }
});
</script>

{% endblock %}
```

---

## 2) URLs: `pos/urls.py`

```python
from django.urls import path
from . import views

app_name = 'pos'

urlpatterns = [
    path('search-products/', views.search_products, name='search_products'),
    path('create-order/', views.create_order, name='create_order'),
    path('invoice/<int:order_id>/', views.invoice_view, name='invoice'),
]
```

> Include these in your project root `urls.py`:

```python
path('pos/', include('pos.urls', namespace='pos')),
```

---

## 3) Views: `pos/views.py`

> ⚠️ Adjust model/field names to your app. I assumed:
>
> * `ProductList(name, sku, category, price, image)`
> * `CategoryList(name)`
> * `Customer(name, mobile, email, address)` (or inline)
> * `Order(total, subtotal, discount, tax_percent, vat_percent, grand_total, paid_amount, due_amount, customer fields, payment_method)`
> * `OrderItem(order, product, qty, unit_price, row_total)`

```python
import json
from decimal import Decimal
from django.db import transaction
from django.db.models import Q
from django.http import JsonResponse, Http404
from django.shortcuts import get_object_or_404, render
from django.urls import reverse

from . import models  # align with your app model imports

# --- Product Search (AJAX) ---

def search_products(request):
    if not request.headers.get('x-requested-with') == 'XMLHttpRequest':
        raise Http404()

    q = request.GET.get('q', '').strip()
    qs = models.ProductList.objects.all()
    if q:
        qs = qs.filter(
            Q(sku__icontains=q) |
            Q(name__icontains=q) |
            Q(category__name__icontains=q)
        )[:25]

    results = []
    for p in qs:
        price = getattr(p, 'price', None) or getattr(p, 'unit_price', None) or Decimal('0.00')
        img = ''
        if getattr(p, 'image', None):
            try:
                img = p.image.url
            except Exception:
                img = ''
        results.append({
            'id': p.id,
            'name': p.name,
            'sku': getattr(p, 'sku', ''),
            'category': getattr(p.category, 'name', '') if getattr(p, 'category', None) else '',
            'price': str(price),
            'image_url': img,
        })

    return JsonResponse({'results': results})


# --- Create Order (AJAX) ---
@transaction.atomic

def create_order(request):
    if request.method != 'POST' or request.headers.get('content-type') != 'application/json':
        return JsonResponse({'success': False, 'message': 'Invalid request'}, status=400)

    try:
        data = json.loads(request.body.decode('utf-8'))
    except json.JSONDecodeError:
        return JsonResponse({'success': False, 'message': 'Invalid JSON'}, status=400)

    items = data.get('items', [])
    if not items:
        return JsonResponse({'success': False, 'message': 'No items provided'}, status=400)

    # Summary
    subtotal = Decimal(str(data['summary'].get('subtotal', '0')))
    discount = Decimal(str(data['summary'].get('discount', '0')))
    tax_percent = Decimal(str(data['summary'].get('tax_percent', '0')))
    vat_percent = Decimal(str(data['summary'].get('vat_percent', '0')))
    grand_total = Decimal(str(data['summary'].get('grand_total', '0')))
    paid_amount = Decimal(str(data['summary'].get('paid_amount', data.get('payment', {}).get('paid_amount', 0))))
    due_amount = Decimal(str(data['summary'].get('due_amount', '0')))

    # Customer
    cust = data.get('customer', {})
    customer_name = cust.get('name', '')
    customer_mobile = cust.get('mobile', '')
    customer_email = cust.get('email', '')
    customer_address = cust.get('address', '')

    # Payment
    payment_method = data.get('payment', {}).get('method', 'cash')

    # Create order
    order = models.Order.objects.create(
        customer_name=customer_name,
        customer_mobile=customer_mobile,
        customer_email=customer_email,
        customer_address=customer_address,
        subtotal=subtotal,
        discount=discount,
        tax_percent=tax_percent,
        vat_percent=vat_percent,
        grand_total=grand_total,
        paid_amount=paid_amount,
        due_amount=due_amount,
        payment_method=payment_method,
    )

    # Items
    for it in items:
        pid = it.get('product_id')
        qty = Decimal(str(it.get('qty', '1')))
        unit_price = Decimal(str(it.get('unit_price', '0')))
        product = get_object_or_404(models.ProductList, id=pid)
        row_total = qty * unit_price
        models.OrderItem.objects.create(
            order=order,
            product=product,
            qty=qty,
            unit_price=unit_price,
            row_total=row_total
        )

    invoice_url = reverse('pos:invoice', kwargs={'order_id': order.id})
    return JsonResponse({'success': True, 'order_id': order.id, 'invoice_url': invoice_url})


# --- Invoice View (redirect target) ---

def invoice_view(request, order_id: int):
    order = get_object_or_404(models.Order, id=order_id)
    items = models.OrderItem.objects.filter(order=order).select_related('product')
    return render(request, 'pos/invoice.html', {'order': order, 'items': items})
```

---

## 4) Example Models (If you need quick scaffolding)

> If you already have these, skip or map fields accordingly.

```python
# pos/models.py
from django.db import models

class CategoryList(models.Model):
    name = models.CharField(max_length=150)
    def __str__(self): return self.name

class ProductList(models.Model):
    name = models.CharField(max_length=200)
    sku = models.CharField(max_length=100, unique=True)
    category = models.ForeignKey(CategoryList, on_delete=models.SET_NULL, null=True, blank=True)
    price = models.DecimalField(max_digits=12, decimal_places=2, default=0)
    image = models.ImageField(upload_to='products/', null=True, blank=True)
    def __str__(self): return f"{self.name} ({self.sku})"

class Order(models.Model):
    created = models.DateTimeField(auto_now_add=True)
    customer_name = models.CharField(max_length=200, blank=True)
    customer_mobile = models.CharField(max_length=30, blank=True)
    customer_email = models.EmailField(blank=True)
    customer_address = models.TextField(blank=True)

    subtotal = models.DecimalField(max_digits=12, decimal_places=2, default=0)
    discount = models.DecimalField(max_digits=12, decimal_places=2, default=0)
    tax_percent = models.DecimalField(max_digits=5, decimal_places=2, default=0)
    vat_percent = models.DecimalField(max_digits=5, decimal_places=2, default=0)
    grand_total = models.DecimalField(max_digits=12, decimal_places=2, default=0)
    paid_amount = models.DecimalField(max_digits=12, decimal_places=2, default=0)
    due_amount = models.DecimalField(max_digits=12, decimal_places=2, default=0)

    payment_method = models.CharField(max_length=30, default='cash')

    def __str__(self): return f"Order #{self.id}"

class OrderItem(models.Model):
    order = models.ForeignKey(Order, on_delete=models.CASCADE)
    product = models.ForeignKey(ProductList, on_delete=models.PROTECT)
    qty = models.DecimalField(max_digits=12, decimal_places=2, default=1)
    unit_price = models.DecimalField(max_digits=12, decimal_places=2, default=0)
    row_total = models.DecimalField(max_digits=12, decimal_places=2, default=0)
```

---

## 5) Minimal Invoice Template: `templates/pos/invoice.html`

```html
{% extends 'common/base.html' %}
{% block title %}Invoice #{{ order.id }}{% endblock %}
{% block content %}
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>Invoice #{{ order.id }}</h3>
    <div>
      <button onclick="window.print()" class="btn btn-outline-secondary">Print</button>
    </div>
  </div>

  <div class="row mb-3">
    <div class="col-md-6">
      <h6>Customer</h6>
      <p class="mb-0">{{ order.customer_name }}</p>
      <p class="mb-0">{{ order.customer_mobile }}</p>
      <p class="mb-0">{{ order.customer_email }}</p>
      <p class="mb-0">{{ order.customer_address }}</p>
    </div>
    <div class="col-md-6 text-md-end">
      <h6>Order Info</h6>
      <p class="mb-0">Date: {{ order.created|date:"Y-m-d H:i" }}</p>
      <p class="mb-0">Payment: {{ order.payment_method|title }}</p>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-bordered">
      <thead class="table-light">
        <tr>
          <th>#</th>
          <th>Product</th>
          <th class="text-end">Qty</th>
          <th class="text-end">Unit Price</th>
          <th class="text-end">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for it in items %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td>{{ it.product.name }} <small class="text-muted">{{ it.product.sku }}</small></td>
          <td class="text-end">{{ it.qty }}</td>
          <td class="text-end">{{ it.unit_price }}</td>
          <td class="text-end">{{ it.row_total }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6">
      <table class="table">
        <tr>
          <th>Subtotal</th>
          <td class="text-end">{{ order.subtotal }}</td>
        </tr>
        <tr>
          <th>Discount</th>
          <td class="text-end">{{ order.discount }}</td>
        </tr>
        <tr>
          <th>Tax (%)</th>
          <td class="text-end">{{ order.tax_percent }}</td>
        </tr>
        <tr>
          <th>VAT (%)</th>
          <td class="text-end">{{ order.vat_percent }}</td>
        </tr>
        <tr class="table-dark">
          <th>Grand Total</th>
          <td class="text-end">{{ order.grand_total }}</td>
        </tr>
        <tr>
          <th>Paid</th>
          <td class="text-end">{{ order.paid_amount }}</td>
        </tr>
        <tr>
          <th>Due</th>
          <td class="text-end">{{ order.due_amount }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>
{% endblock %}
```

---

## 6) Notes & Tips

* **CSRF**: The template parses `{% csrf_token %}` from a hidden input to use in `fetch` header. If you prefer, add a meta tag `<meta name="csrf-token" content="{{ csrf_token }}">` and read from it instead.
* **Security**: Always validate pricing server-side (recalculate server totals if required) to avoid tampering.
* **Performance**: Add indexes on `ProductList.sku` and `ProductList.name` for faster search.
* **Extensibility**: You can add barcode scanner input and trigger `addToCart` once a product is resolved.

---

## 7) Quick Server-Side Recalculation (Optional but recommended)

To make tampering impossible, recompute totals in `create_order` instead of trusting client:

```python
# After loading items
calc_subtotal = Decimal('0')
for it in items:
    product = get_object_or_404(models.ProductList, id=it['product_id'])
    qty = Decimal(str(it['qty']))
    unit_price = Decimal(str(it['unit_price']))  # or use product.price to lock
    calc_subtotal += qty * unit_price

subtotal = calc_subtotal
# Then compute discount/tax/vat/grand on server using same formula
```