Order Details
Single order view with status, documents, notes, and delivery performance
Order Details
The order detail page provides a comprehensive view of a single order, including its status, documents, notes, and delivery metrics.
Accessing Order Details
Route: GET /order/{id}
Navigate to an order by:
- Clicking "View Order" on any order card or table row
- Clicking "View All Orders" on a grouped order card (opens multi-order view)
- Direct URL navigation
Page Layout
Two-column layout:
Main Content (left, wider)
- Order header with status and dates
- Embedded document management section
- Order notes section
Sidebar (right, 380px)
- Order information card
- Notes list (scrollable)
Order Header
The header displays:
- "Back to Project" button (top-left)
- Order number — "Order #1234"
- Service title — e.g., "Engineering Order"
- Project address — full property address
- Status badge — colour-coded current status
- Date row — Created, Ordered, Expected dates displayed inline
Order Information Card (Sidebar)
| Field | Description |
|---|---|
| Status | Current order status with badge |
| Service | Service type name |
| Project | Project number and address |
| Created | When the order was created |
| Ordered | When the order was sent to vendor |
| Expected | Calculated delivery date from SLA |
| Received | When the vendor delivered (if completed) |
| Price | Order cost |
| SLA | Agreed turnaround time |
| Documents | Count of attached documents |
Delivery Performance
When an order has been received, the system calculates delivery performance:
| Indicator | Badge Colour | Meaning |
|---|---|---|
| +Xd (Ahead) | Green (#d4edda) | Delivered X days before expected |
| On Time | Blue (#d1ecf1) | Delivered on the expected date |
| -Xd (Delayed) | Red (#f8d7da) | Delivered X days after expected |
Calculation: Expected Days - Actual Days from the ordered date.
Documents Section
The order detail page embeds the multi-document management UI in a compact "embedded" mode:
- Upload area (drag-and-drop or browse) — hidden for completed/received orders
- Documents table showing: filename, type/category badges, upload date, uploaded by, actions
- Preview, download, and delete actions per document
- Document type/subcategory assignment
See Documents & Uploads for full details.
Notes Section
The sidebar shows a scrollable notes list. The main content area provides a form to add new notes.
See Notes & Communication for full details.
Conditional Actions
Action buttons change based on order status:
| Order Status | Available Actions |
|---|---|
| Pending | Cancel order |
| On Hold | Upload documents, Resubmit |
| Rejected | Upload documents, Resubmit |
| Received / Complete | Download documents (upload disabled) |
| Cancelled | View only (no actions) |
Responsive Behaviour
On mobile:
- The two-column layout collapses to a single column
- The sidebar information card moves below the main content
- Documents table converts to a card layout
- Table headers are hidden, replaced by inline labels