iFlow

Complete Dashboard Example

This shows the recommended page structure for a typical list page.

Orders

All 24 Active 12 Completed 10 Pending 2

Name	Status	Stage	Owner	Created
ORD-2024-001	Active	Analysis	JD John Doe	Jan 15, 2024	View Edit Delete
ORD-2024-002	Pending	Review	AK Anna Kim	Jan 14, 2024	View Edit Delete
ORD-2024-003	Completed	Complete	MP Mike Park	Jan 10, 2024	View Edit Delete

Page 1 of 5

per page

Page Structure

{% extends "_layout.html" %} {% from "components/button.html" import button %} {% from "components/card.html" import section_card %} {% from "components/form.html" import search_input %} {% from "components/data_table.html" import data_table, data_table_empty, data_table_pagination %} {% set page_title = "Orders" %} {% set page_icon = "ti-clipboard-list" %} {% set active_nav = "Orders" %} {% block content %}

{# 1. Page Header with Search and Filters #} {% call section_card("Orders", actions=button("New", variant="primary", size="sm", icon="ti-plus", href="/orders/new")) %}

Page description here.

{{ search_input("table-body", "/orders/search", placeholder="Search...") }}

All 24 Active 12

{% endcall %} {# 2. Data Table #}

{% call data_table(["Name", "Status", "Created", ""], id="orders-table") %} {% for order in orders %} {{ order.name }} {{ tag(order.status, "green") }} {{ order.created_at|date }} {{ button("View", variant="ghost", size="sm") }} {% else %} {{ data_table_empty("No orders found", colspan=4, icon="ti-clipboard-off") }} {% endfor %} {% endcall %} {{ data_table_pagination(page, total_pages, "/orders", "orders-table-body") }}

{% endblock %}

Key Patterns

Element	Component	Notes
Page header	`section_card`	Title + "New" button + description + search/filters
Search bar	`search_input`	Inside header card, HTMX live search
Status filters	`.tabs`	Inside header card, `.tab.active` for selected
Table container	`.card`	Plain card with `padding: 0`, no header
Data table	`data_table`	Proper HTML table, column alignment
Empty state	`data_table_empty`	Icon + message when no data
Pagination	`data_table_pagination`	HTMX page navigation

Spacing Guidelines

Use margin-top: 16px between header card and table card
Use section_card for header (with title, description, search, filters)
Use plain .card with padding: 0 for table container
Put search bar and filters inside header card with mb-3 on description
Search bar and filters on same row with flex gap-3
Tabs for status filters: .tabs container, .tab.active for selected
Put "New" button in header section_card actions slot