Add detail for purchase order displays

docs/app/connect.md

@@ -105,7 +105,7 @@ Select the *Stock* icon to open the [stock display](./stock.md). This initially
 
 ### Purchase Orders
 
-Select the *Purchase Orders* icon to open the purchase orders display. This shows a list of currently outstanding purchase orders, allowing line items to be received into stock.
+Select the *Purchase Orders* icon to open the [purchase orders display](./po.md). This shows a list of currently outstanding purchase orders, allowing line items to be received into stock.
 
 ### Suppliers
 

docs/app/po.md

@@ -0,0 +1,49 @@
+---
+title: Purchase Orders
+---
+
+## Purchase Order List
+
+The purchase order list display shows all current *outstanding* purchase orders. (Purchase orders which have been completed are not shown here).
+
+{% with id="po_list", url="app/po_list.png", maxheight="240px", description="Purchase order list" %}
+{% include "img.html" %}
+{% endwith %}
+
+Select an individual purchase order to display the detail view for that order.
+
+### Filtering
+
+Available purchase orders can be subsequently filtered using the search input at the top of the screen
+
+## Purchase Order Detail
+
+{% with id="po_detail", url="app/po_detail.png", maxheight="240px", description="Purchase order details" %}
+{% include "img.html" %}
+{% endwith %}
+
+### Edit Order Details
+
+From the detail view, select the *Edit* button in the top-right of the screen. This opens the purchase order editing display:
+
+{% with id="edit_po", url="app/po_edit.png", maxheight="240px", description="Edit purchase order" %}
+{% include "img.html" %}
+{% endwith %}
+
+### Line Items
+
+The *Line Items* tab shows the line items associated with this purchase order:
+
+{% with id="po_lines", url="app/po_lines.png", maxheight="240px", description="Purchase order line items" %}
+{% include "img.html" %}
+{% endwith %}
+
+Long press on a particular line item to receive the item into stock.
+
+### Stock Items
+
+Once items have been received into stock against a particular purchase order, they are displayed in the *Stock Items* tab:
+
+{% with id="po_stock", url="app/po_stock.png", maxheight="240px", description="Purchase order stock items" %}
+{% include "img.html" %}
+{% endwith %}

mkdocs.yml

@@ -115,6 +115,7 @@ nav:
     - Barcodes: app/barcode.md
     - Parts: app/part.md
     - Stock: app/stock.md
+    - Purchase Orders: app/po.md
     - Settings: app/settings.md
     - Privacy: app/privacy.md
     - Release Notes: app/release.md