---
# System prepended metadata

title: 1. Shipments View Styling

---

# 1. Shipments View Styling

The `/shipments` page in Cavendish shows a bare-bones table view of shipments. 

This story is about 2 things:
1. Separating the table into a separate ShipmentTable component,
2. Adding minimum styling to the table/rows

This includes:
- The type of shipment should show icon
- The header font
- Status column. Note that we don't have the status as part of the object from the API yet, so static data should be used for now until we have the details.
- Formatting of the date fields
- Adding tests

This is based on https://www.figma.com/file/7Shg2902kRcTZekTZyyw41/Logixboard_v2.0?node-id=0%3A1737

# 2. Shipment Details View

We would like to start building the foundation for the Shipment Details view. The API doesn't yet have the data for it, but the goal is to wire up the page and start creating all components, even if we display static data.

This is based on this design: https://www.figma.com/file/7Shg2902kRcTZekTZyyw41/Logixboard_v2.0?node-id=0%3A1737

We will need to:
- decompose the page in all subcomponents, and lay them out on the page
- enable navigation to the `shipments/:id` page with a click on the list view.
- Enable a back-link (from the breadcrumbs) back to the list view.
- Add tests accordingly

The route for `/shipments/:id` exists on this branch in Gitlab: https://gitlab.com/logixboard/cavendish/tree/eric/shipment-details-route

