Order List Views

The Ordering Portal provides 9 separate views for orders, each filtered by status. All are accessible from the sidebar "Orders" submenu.

Available Views

Page Structure

All order list pages share a common structure:

1. Page header with title and subtitle showing the count
2. Search input for filtering
3. Order cards or table displaying the orders
4. Pagination controls

All Orders View (Current Orders)

This is the primary orders view. It differs from the others by using card-based layout instead of a table.

Order Grouping

Orders created together (within a 5-minute window for the same project) are grouped into a single card:

Group Card shows:

• "Multiple Orders (X)" badge with green accent border
• Combined service titles
• Project address
• Multiple status badges (one per order in the group)
• Created date, combined Order IDs, total amount, document count
• "View All Orders" button — links to multi-order confirmation page

Single Order Card shows:

• Order number
• Service title
• Project address
• Status badge
• Created date, Ordered date (if set), Expected date (if set), Document count, SLA
• "View Order" button

Empty State

When no current orders exist, a centered message with a "Create New Order" button is shown.

Status-Filtered Views (Table Format)

The remaining views use a shared responsive table component (_orders_table.html.twig).

Table Columns

On mobile, hidden columns are shown in an expandable detail row when the user taps the expander.

Search

• Real-time client-side filtering with 300ms debounce
• Searches across: Order ID, service name, job number, project address
• Updates the subtitle count dynamically
• Clear button to reset search

Pagination

• 20 items per page (client-side)
• Previous / page numbers / Next controls
• Page count updates with search results

In Progress View — Special Features

The In Progress view has additional capabilities:

Cancel Buttons

• Single order: "Cancel" button appears on each order card (only when status is "pending")
• Order group: "Cancel All" button cancels all orders in the group
• Cancel triggers POST /order/{id}/cancel or POST /orders/cancel-multiple
• Cancellation requires confirmation dialog

Clickable Cards

• The entire card is clickable (not just the "View" button)
• Clicking navigates to the order detail page

Status Badge Colours

AJAX Loading

Order data is loaded via AJAX:

1. The page renders a shell with search and pagination UI
2. A search request fires to /orders/status/{statusTag}/search
3. The server returns rendered HTML table rows + count
4. The frontend injects the rows and updates the count

This keeps initial page load fast and allows real-time search without full page reload.