In this episode, we're focusing on the home template and getting it to display all employees and all services for our app. We start by setting up the markup (which you can grab from the GitHub repo) and getting it into the project. Once that's done, we check how it looks in the browser—a quick sanity check!
Next, we pass the list of employees from our Home Livewire component to the template and use a loop to display each employee. For each one, we show their name and profile picture, and each entry links to their individual services page.
We then shift our attention to services. Since we'll display services in multiple places, we make a simple Blade component (x-service) to handle the markup for a single service. We loop over all services, passing each one into the component as a prop, and fill in the details like the title, duration, and price.
For the price formatting, we integrate the Laravel Money package, which neatly formats prices directly in Blade. There's a quick detour into adding the price cast to the Service model so values are displayed as actual monetary amounts, not raw integers. You also get some tips on customizing how the money is formatted via the package.
By the end, all employees and services are showing up nicely, and everything is connected up so the user can click through to see details or start booking right from the homepage.