In this episode, we focus on building out the section of our dashboard that lists all the sales that have been made. We start by adding a new "All Sales" header and set up the structure for displaying our sales in a nice, styled table. Along the way, we handle some necessary UI styling tweaks to make the information visually clear and easy to interpret.
We walk through how to build a table with the right columns: the product that's been sold (and make this a clickable link to view more details), the customer's email address, the sale price (using a handy money helper), and the exact date and time the sale happened (properly formatted for clarity). There's also some discussion on accessibility, by hiding the table header visually but keeping it available for screen readers.
On the backend side, we make sure to pass the latest sales from the controller to our view, making sure the most recent sales show up first. We also implement a check—if there are no sales yet, we display a friendly message instead of an empty table.
Finally, we polish things up with some small tweaks to padding, fonts, and colors to keep everything consistent. By the end of this episode, you'll have a clear, functional table on your dashboard that lets you (or your users) see all sales at a glance, complete with links and nicely formatted data.