‫We are almost done building our application.
‫All that is left to build
‫and to implement now is the dashboard.
‫So according to our list of requirements,
‫the dashboard should render a list
‫of check-ins and checkouts for the current day,
‫some statistics about recent bookings,
‫and also two charts on sales and on stay durations.
‫And you can read this entire list
‫with more detail if you want.
‫But let's now start by building the layout
‫of this dashboard.
‫And since this is such an important feature,
‫it even has its own folder here in the features folder.
‫So here, we already have the dashboard layout,
‫and for now all it has is the styled component.
‫So let's create the dashboard layout itself.
‫And then here, we will of course use
‫that styled dashboard layout
‫and then I will just temporarily create some divs here,
‫just so we know what we will actually place here.
‫So we will have those statistics,
‫then we will have the list of activity,
‫so for the current day.
‫So today's activity, which are gonna contain
‫the check-ins and outs,
‫and then one chart for the stay durations.
‫And you don't need to write this here if you want.
‫These are just placeholders that we will delete later.
‫So the last one is then a chart of sales.
‫All right.
‫And then let's come to our dashboard page
‫and actually include that after this first row.
‫So DashboardLayout, and then once again,
‫we need to make sure to return these components here
‫as individual components.
‫Now, all right. So let's go check this out.
‫And I will actually check
‫or go back to our light mode, which I prefer.
‫And so here are these four items laid out in the grid
‫that we have here.
‫So we're gonna have these four columns,
‫even though they will then not be displayed like this.
‫So we will have all four statistics here,
‫then down here, we're gonna have the activity
‫and then the charts here.
‫Now, what we also need to do for this layout
‫is to replace this test with the actual filter,
‫because remember that we need this data
‫for different intervals.
‫So for seven, 30 and 90 days.
‫And so here, we actually already have that component built.
‫So let me show that to you first.
‫So this simply uses the filter
‫that we have already built before
‫and that we used for the bookings
‫and for the cabins table.
‫And here we actually need to correct the path like this.
‫So very important to do this.
‫And so this will then basically set
‫a field called List in the URL.
‫So just like before when we used the filter.
‫And so, let's now place that here.
‫So that's actually called DashboardFilter.
‫And then this one, we need to bring it in manually.
‫So DashboardFilter.
‫There we go. And there it is.
‫Great.
‫And so, as I was saying, as we click here,
‫then we get these last values here
‫so that we can then filter all the relevant data
‫for only this number of days.
‫And speaking of the data,
‫now it's actually time to compute these data
‫that we need for these four parts
‫of the dashboard right in the next lecture.