# Common Page Patterns

Ready-to-use recipes for the page types you'll build most often. Each pattern shows the recommended block arrangement and links to the relevant per-component docs.

## Dashboard page

A landing page with KPIs, charts, and quick-access tiles.

1. **Row** — Heading (*Dashboard*) on the left, **Text** with a personalised welcome on the right.
2. **Stats** — a 4-tile KPI strip across the top (e.g. *Today's Sales / Open Orders / Active Customers / Items Sold*).
3. **Grid** (2 columns) — two **Chart** blocks: a line chart for sales trend, a pie chart for category split.
4. **Heading** (*Quick Actions*) — visual divider before the action tiles.
5. **Grid** (4 columns) — four **Card Link** tiles pointing to the most common destinations (New Order, Catalog, Transaction Search, Reports).

Place **Stats** in a Row for a clean top bar. **Card Link** tiles work well in a 4-column Grid that collapses on smaller screens.

## Order form

A transaction-entry page.

1. **Row** — Heading (*New Order*) and an **Action Dropdown** with options like *Save Draft / Clear / Import*.
2. **Row** — **Customer/Vendor Selection** (wide), with **Customer Field** blocks for *Phone* and *Email* alongside.
3. **Row** — **Select Customer Address** for Billing and Shipping.
4. **Order Lines** (full width).
5. **Row** with two columns — left: **Discount Header** + **Shipping Method**; right: **Summary**.
6. **Row** aligned right — **Action Button** (*Save Draft*, secondary) + **Submit Button** (*Place Order*).

Place Customer/Vendor Selection first — Address, Order Lines, Customer Hold Status, and Customer Field all read from the selected customer. Order Lines should span the full width for comfortable editing. Put Summary next to Discount and Shipping so totals update in view.

## Product catalog page

A catalog browse page.

1. **Catalog Layout** as the outer shell with sidebar=Left.
2. In the sidebar slot — **Category Sidebar** (with product counts) and **Dynamic Filters** (one block per attribute: brand, size, colour, etc.).
3. In the main slot — **Catalog View Select** and **Catalog Display** (default view: grid, 24 items per page).

Catalog Layout handles the sidebar/canvas split and collapses sidebars to a slide-out drawer on mobile. Drop multiple Dynamic Filters blocks for a complete attribute panel.

## Product detail page

Inside the catalog, the page that opens when a product is clicked.

1. **Row** split 50/50 — **Product Image** on the left, on the right a **Column** with:
   * **Product Field** for the name (large)
   * **Product Field** for the price
   * **Product Variations** (if it's a matrix product)
   * **Product Locations** (stock per location)
   * **Add to Order Button**
2. **Tabs** below for *Description* (Product Field with description), *Specifications* (Grid of Product Fields), *Vendor* (Product Vendor block).

For non-matrix products, omit Product Variations — Add to Order Button has its own quantity controls.

## POS register page

An order-form page optimised for cashier work.

1. **Row** split 65/35:
   * **Left column (65%)** — Customer/Vendor Selection + Location at top, **Scan Items** for fast entry, **Order Lines** below.
   * **Right column (35%)** — **Summary** in a Card, **Payments** below, then a Row with *Hold Order* and *Complete Sale* buttons.

The two-column split mimics traditional POS systems. Submit Button hides itself when Payments is on the page — Payments drives submission. Add **Registers** at the top to enable cash-drawer flows.

## Reports page

A data-focused page with KPIs, charts, and a data table.

1. **Row** — Heading (*Sales Reports*) and Action Buttons (*Export*, *Print*).
2. **Stats** — 4-tile KPI strip across the top (Total Revenue, Transactions, Avg Order, Return Rate).
3. **Grid** (2 columns) — two **Chart** blocks (bar by department, line for monthly trend).
4. **Heading** (*Transaction Detail*).
5. **Report Widget** — sortable, paginated transaction table with export enabled.

Use **Chart** in [Content Components](/client-admin-guide/active-workflows/getting-started/content-components.md) for visual data; **Report Widget** for tabular data. For end-of-day register reconciliation, use **EOD Reports** instead.

## Detail-on-click pop-up

The pattern for showing detail without leaving the page.

1. On the main page — **Report Widget** (or Transactions Advanced) showing a list. Configure a row-click action that opens a Modal.
2. **Modal** (Modal ID = `transaction-detail`, size: large) containing:
   * **Transaction Record** with header fields, line items, related records.
   * A Row with **Action Button** (*Print*) + **Button** (Close Modal = `transaction-detail`).

Use a session variable to pass the picked record into the modal. Modal size *large* works for detail views; *small* for confirmations.

## Entity search page

Find a customer / vendor / partner.

1. **Row** — Heading (*Customer Search*) and an Action Button (*New Customer*) that opens a Create Entity modal.
2. **Entity Search** (Entity Type: Customer) with searchable fields and result columns configured.
3. **Modal** (Modal ID = `customer-detail`) containing **Entity 360 View**.

Pair Entity Search and Entity 360 — the row-click action opens the modal with full account detail.

## Tips that apply to all patterns

* **Layout first, content second.** Drop Row / Column / Grid before adding content.
* **Use gap settings** on layout blocks before reaching for **Space**.
* **Test with realistic data.** Editor placeholders aren't representative of real content lengths.
* **Test on mobile.** Layouts collapse predictably but cramped data can still look bad.
* **Keep pages focused.** If a page is doing two jobs, split into two modules.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Page Builder Overview</strong></td><td>Editor interface and core concepts.</td><td><a href="/pages/cFWHMzaWYEsdDtvHLkFK">/pages/cFWHMzaWYEsdDtvHLkFK</a></td></tr><tr><td><strong>Layout &#x26; Responsive</strong></td><td>How these patterns adapt to smaller screens.</td><td><a href="/pages/i16RUpMIJ1hqIym73t8h">/pages/i16RUpMIJ1hqIym73t8h</a></td></tr><tr><td><strong>Best Practices</strong></td><td>Production checklist before publishing any pattern.</td><td><a href="/pages/vAbsWdSLiwdLsG7BZSoq">/pages/vAbsWdSLiwdLsG7BZSoq</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/common-patterns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.