Application design

The single-page application that we develop will look similar to the following:

For this design model, you will create the following components:

1. Logo and menu component – This contains the Sage logo and an Order drop-down for displaying a history of orders.
2. Menu title – Displays the title.
3. Customer filter component – Allows you to select the customer to filter as well as ability to show or hide closed orders for the customer.
4. Order detail component – This has a table for displaying all orders and a Detail link for displaying the product details.
5. When you click Detail in the table, a sidebar appears with the product details of the sales order will look like this:

---

Steps

• Overview
• Step 1 - Application design
• Step 2 - React components and data to retrieve from the endpoint
• Step 3 - App component and GraphQL client
• Step 4 - Menu component and Order component
• Step 5 - Order history component
• Step 6 - Order detail component