Templates
Real-world Django + HTMX template patterns using UX components. These examples come from ERPlora, an ERP system with 302 templates across 17 modules — all built with UX CSS.
Modules using UX
| Module | Templates | Module | Templates |
|---|---|---|---|
| Loyalty | 26 | Appointments | 24 |
| Staff | 22 | Orders | 21 |
| Inventory | 21 | Services | 21 |
| Commissions | 20 | Returns | 20 |
| Invoicing | 17 | Reservations | 17 |
| Discounts | 16 | Sales | 16 |
| VeriFACTU | 16 | Kitchen | 14 |
| Cash Register | 11 | Customers | 11 |
| Total | 302 | ||
Template Architecture
Every view has two templates: a page (extends layout, includes partial) and a partial (the actual content). Full requests get the page; HTMX requests get just the partial — zero duplication.
Page Template (extends layout)
Dashboard Pattern
Stats grid + recent activity + quick actions. Used in every module's index page.
Sales Dashboard (real template)
Sales
Sales management and point of sale
Recent Sales
Payment Methods (Today)
| Method | Count | Total |
|---|---|---|
Cash | 12 | $623.50 |
Card | 10 | $1,024.00 |
Transfer | 2 | $200.00 |
List Pattern
Searchable, filterable list with HTMX navigation. Every module has at least one list view.
Loyalty Members List
Settings Pattern
Toggle and input settings that save immediately via HTMX POST, no form submission needed.
Orders Settings (instant save)
Kitchen Display
Empty State Pattern
Friendly empty states with icon, message, and call-to-action button.
Empty States (3 variants)
No sales yet
No results for "pizza"
No members yet
Enroll customers in the loyalty program to start earning points
Django Template Reference
All internal links use HTMX to swap content without full page reload:
<a hx-get="{% url 'sales:detail' sale.id %}"
hx-target="#main-content-area"
hx-push-url="true"
class="list-item list-item-clickable">
...
</a>Ionicons via Django template tag:
{% load djicons %}
{% icon "receipt-outline" class="text-2xl text-primary" %}
{% icon "cash-outline" class="text-xl text-success" %}
{% icon "alert-circle-outline" class="text-warning" %}All user-visible text uses Django i18n:
{% load i18n %}
{% trans "Recent Sales" %}
{% trans "No results found" %}JavaScript confirm + fetch + HTMX redirect:
<button onclick="deleteItem()" class="btn color-danger btn-sm">Delete</button>
<script>
function deleteItem() {
if (confirm('Delete this item?')) {
fetch('{% url "orders:delete" order.id %}', {
method: 'POST',
headers: {'X-CSRFToken': '{{ csrf_token }}'},
}).then(r => {
if (r.ok) htmx.ajax('GET', '{% url "orders:active_orders" %}', '#main-content-area');
});
}
}
</script>Map model status to badge colors in templates:
{% if order.status == 'pending' %}
<span class="badge color-warning badge-soft">Pending</span>
{% elif order.status == 'preparing' %}
<span class="badge color-primary badge-soft">Preparing</span>
{% elif order.status == 'ready' %}
<span class="badge color-success">Ready</span>
{% elif order.status == 'cancelled' %}
<span class="badge color-danger badge-soft">Cancelled</span>
{% endif %}