1
00:00:01,260 --> 00:00:04,740
‫We are almost done building our application.

2
00:00:04,740 --> 00:00:06,510
‫All that is left to build

3
00:00:06,510 --> 00:00:10,410
‫and to implement now is the dashboard.

4
00:00:10,410 --> 00:00:14,070
‫So according to our list of requirements,

5
00:00:14,070 --> 00:00:16,260
‫the dashboard should render a list

6
00:00:16,260 --> 00:00:19,800
‫of check-ins and checkouts for the current day,

7
00:00:19,800 --> 00:00:22,860
‫some statistics about recent bookings,

8
00:00:22,860 --> 00:00:27,750
‫and also two charts on sales and on stay durations.

9
00:00:27,750 --> 00:00:29,700
‫And you can read this entire list

10
00:00:29,700 --> 00:00:31,980
‫with more detail if you want.

11
00:00:31,980 --> 00:00:34,860
‫But let's now start by building the layout

12
00:00:34,860 --> 00:00:36,213
‫of this dashboard.

13
00:00:37,530 --> 00:00:40,320
‫And since this is such an important feature,

14
00:00:40,320 --> 00:00:44,973
‫it even has its own folder here in the features folder.

15
00:00:46,170 --> 00:00:50,370
‫So here, we already have the dashboard layout,

16
00:00:50,370 --> 00:00:53,733
‫and for now all it has is the styled component.

17
00:00:55,590 --> 00:00:59,580
‫So let's create the dashboard layout itself.

18
00:00:59,580 --> 00:01:02,850
‫And then here, we will of course use

19
00:01:02,850 --> 00:01:05,730
‫that styled dashboard layout

20
00:01:05,730 --> 00:01:09,450
‫and then I will just temporarily create some divs here,

21
00:01:09,450 --> 00:01:12,930
‫just so we know what we will actually place here.

22
00:01:12,930 --> 00:01:15,633
‫So we will have those statistics,

23
00:01:18,030 --> 00:01:21,540
‫then we will have the list of activity,

24
00:01:21,540 --> 00:01:23,460
‫so for the current day.

25
00:01:23,460 --> 00:01:27,210
‫So today's activity, which are gonna contain

26
00:01:27,210 --> 00:01:29,670
‫the check-ins and outs,

27
00:01:29,670 --> 00:01:34,670
‫and then one chart for the stay durations.

28
00:01:37,800 --> 00:01:40,200
‫And you don't need to write this here if you want.

29
00:01:40,200 --> 00:01:45,183
‫These are just placeholders that we will delete later.

30
00:01:46,110 --> 00:01:50,523
‫So the last one is then a chart of sales.

31
00:01:52,440 --> 00:01:53,610
‫All right.

32
00:01:53,610 --> 00:01:58,610
‫And then let's come to our dashboard page

33
00:01:59,160 --> 00:02:02,613
‫and actually include that after this first row.

34
00:02:04,500 --> 00:02:09,180
‫So DashboardLayout, and then once again,

35
00:02:09,180 --> 00:02:14,180
‫we need to make sure to return these components here

36
00:02:14,430 --> 00:02:16,203
‫as individual components.

37
00:02:17,280 --> 00:02:19,743
‫Now, all right. So let's go check this out.

38
00:02:20,580 --> 00:02:22,740
‫And I will actually check

39
00:02:22,740 --> 00:02:27,480
‫or go back to our light mode, which I prefer.

40
00:02:27,480 --> 00:02:32,430
‫And so here are these four items laid out in the grid

41
00:02:32,430 --> 00:02:33,810
‫that we have here.

42
00:02:33,810 --> 00:02:36,120
‫So we're gonna have these four columns,

43
00:02:36,120 --> 00:02:39,570
‫even though they will then not be displayed like this.

44
00:02:39,570 --> 00:02:41,940
‫So we will have all four statistics here,

45
00:02:41,940 --> 00:02:44,280
‫then down here, we're gonna have the activity

46
00:02:44,280 --> 00:02:46,083
‫and then the charts here.

47
00:02:47,130 --> 00:02:50,100
‫Now, what we also need to do for this layout

48
00:02:50,100 --> 00:02:54,990
‫is to replace this test with the actual filter,

49
00:02:54,990 --> 00:02:57,330
‫because remember that we need this data

50
00:02:57,330 --> 00:02:59,310
‫for different intervals.

51
00:02:59,310 --> 00:03:02,940
‫So for seven, 30 and 90 days.

52
00:03:02,940 --> 00:03:07,740
‫And so here, we actually already have that component built.

53
00:03:07,740 --> 00:03:09,543
‫So let me show that to you first.

54
00:03:10,620 --> 00:03:12,720
‫So this simply uses the filter

55
00:03:12,720 --> 00:03:14,820
‫that we have already built before

56
00:03:14,820 --> 00:03:16,710
‫and that we used for the bookings

57
00:03:16,710 --> 00:03:19,410
‫and for the cabins table.

58
00:03:19,410 --> 00:03:23,790
‫And here we actually need to correct the path like this.

59
00:03:23,790 --> 00:03:26,130
‫So very important to do this.

60
00:03:26,130 --> 00:03:28,050
‫And so this will then basically set

61
00:03:28,050 --> 00:03:31,680
‫a field called List in the URL.

62
00:03:31,680 --> 00:03:35,250
‫So just like before when we used the filter.

63
00:03:35,250 --> 00:03:38,490
‫And so, let's now place that here.

64
00:03:38,490 --> 00:03:41,493
‫So that's actually called DashboardFilter.

65
00:03:45,660 --> 00:03:49,953
‫And then this one, we need to bring it in manually.

66
00:03:51,690 --> 00:03:53,507
‫So DashboardFilter.

67
00:03:55,860 --> 00:03:59,120
‫There we go. And there it is.

68
00:03:59,120 --> 00:04:00,360
‫Great.

69
00:04:00,360 --> 00:04:03,090
‫And so, as I was saying, as we click here,

70
00:04:03,090 --> 00:04:06,180
‫then we get these last values here

71
00:04:06,180 --> 00:04:09,240
‫so that we can then filter all the relevant data

72
00:04:09,240 --> 00:04:12,360
‫for only this number of days.

73
00:04:12,360 --> 00:04:14,310
‫And speaking of the data,

74
00:04:14,310 --> 00:04:17,490
‫now it's actually time to compute these data

75
00:04:17,490 --> 00:04:20,130
‫that we need for these four parts

76
00:04:20,130 --> 00:04:23,073
‫of the dashboard right in the next lecture.