1 00:00:01,170 --> 00:00:05,340 ‫All right, so as the first part of our dashboard, 2 00:00:05,340 --> 00:00:08,550 ‫let's now calculate and display statistics 3 00:00:08,550 --> 00:00:12,540 ‫on recent bookings, recent sales, check-ins 4 00:00:12,540 --> 00:00:15,273 ‫and the total occupancy rate. 5 00:00:17,160 --> 00:00:22,133 ‫So let's create a new component that we're gonna call stats. 6 00:00:25,140 --> 00:00:28,710 ‫And so all this will do is to calculate those statistics 7 00:00:28,710 --> 00:00:32,730 ‫and then display one of these stat components 8 00:00:32,730 --> 00:00:34,173 ‫for each of them. 9 00:00:35,340 --> 00:00:39,180 ‫So this year we'll simply receive an icon, a title, a value 10 00:00:39,180 --> 00:00:40,260 ‫and a color. 11 00:00:40,260 --> 00:00:44,790 ‫And we'll then basically render these different components. 12 00:00:44,790 --> 00:00:47,793 ‫So it's just a purely presentational component. 13 00:00:48,690 --> 00:00:53,163 ‫So first off, here we will need to receive some data, 14 00:00:54,120 --> 00:00:59,003 ‫for example, the bookings and also the confirmed stays. 15 00:01:00,630 --> 00:01:02,883 ‫So let's pass those in. 16 00:01:10,170 --> 00:01:14,070 ‫So the bookings will be bookings 17 00:01:14,070 --> 00:01:17,823 ‫and of course the confirmed stays. 18 00:01:21,150 --> 00:01:26,150 ‫All right and so here, let's start calculating. 19 00:01:26,160 --> 00:01:30,703 ‫So number one are the number of bookings. 20 00:01:30,703 --> 00:01:32,973 ‫So we don't need to write that there. 21 00:01:35,130 --> 00:01:40,130 ‫So number of bookings is simply bookings dot length. 22 00:01:44,670 --> 00:01:46,500 ‫So this one is very easy. 23 00:01:46,500 --> 00:01:51,030 ‫And so let's now start to returning or stats. 24 00:01:51,030 --> 00:01:54,900 ‫Now here we will want, again, a fragment so that 25 00:01:54,900 --> 00:01:59,900 ‫we can then return these four stat components separately. 26 00:02:01,590 --> 00:02:04,803 ‫So here we need to bring that in manually. 27 00:02:05,640 --> 00:02:10,160 ‫So import stat from, like this. 28 00:02:14,070 --> 00:02:19,070 ‫And so yeah, so we will want to occupy these four columns 29 00:02:19,170 --> 00:02:21,870 ‫with four different set components 30 00:02:21,870 --> 00:02:25,230 ‫and therefore we need to return them here separately 31 00:02:25,230 --> 00:02:27,390 ‫and not one big component. 32 00:02:27,390 --> 00:02:29,420 ‫'Cause if it was just one component, 33 00:02:29,420 --> 00:02:34,420 ‫then that would only occupy this first column, right? 34 00:02:35,220 --> 00:02:38,760 ‫So we can actually already return the four 35 00:02:38,760 --> 00:02:42,363 ‫and then we can nicely see that, while if it was a div, 36 00:02:44,520 --> 00:02:46,443 ‫then this is what we would get. 37 00:02:50,790 --> 00:02:52,530 ‫But anyway, here, 38 00:02:52,530 --> 00:02:56,163 ‫let's now pass in the title, which should be bookings. 39 00:02:58,380 --> 00:03:02,910 ‫Then the color here will be blue. 40 00:03:02,910 --> 00:03:04,800 ‫And so these colors will then be taken 41 00:03:04,800 --> 00:03:06,543 ‫from our CSS variables. 42 00:03:07,380 --> 00:03:12,380 ‫The icon is gonna be HI outline briefcase. 43 00:03:16,530 --> 00:03:19,931 ‫And finally we need of course, our value. 44 00:03:19,931 --> 00:03:24,931 ‫So that's the number of bookings and there we are. 45 00:03:25,350 --> 00:03:30,350 ‫Nice, so looking really great with, again, this nice design. 46 00:03:31,620 --> 00:03:36,033 ‫And actually let's duplicate this one a few times. 47 00:03:37,551 --> 00:03:40,743 ‫And so with this, it is starting to look like something. 48 00:03:41,640 --> 00:03:45,420 ‫So here, let's already replace the titles 49 00:03:45,420 --> 00:03:47,320 ‫so that we know what we actually want. 50 00:03:48,330 --> 00:03:50,820 ‫And here we want the check ins. 51 00:03:50,820 --> 00:03:55,080 ‫And finally we want the occupancy rate. 52 00:03:57,120 --> 00:04:01,800 ‫Then here the color will be green 53 00:04:01,800 --> 00:04:04,713 ‫and here we will have some dollar notes. 54 00:04:06,000 --> 00:04:09,003 ‫So outline, bank notes. 55 00:04:10,050 --> 00:04:15,050 ‫Then next up the check-ins are this indigo blue. 56 00:04:17,250 --> 00:04:22,250 ‫And here we will have outline calendar days. 57 00:04:26,100 --> 00:04:28,530 ‫Yep, looking better and better. 58 00:04:28,530 --> 00:04:32,530 ‫And then finally, this color is gonna be yellow 59 00:04:34,440 --> 00:04:39,397 ‫with high outline charge bar. 60 00:04:40,470 --> 00:04:41,550 ‫So a nice example 61 00:04:41,550 --> 00:04:45,663 ‫of a small, reusable and presentational component. 62 00:04:47,100 --> 00:04:50,370 ‫But anyway, our next statistic is going to be 63 00:04:50,370 --> 00:04:55,370 ‫the total sales and so those we will get 64 00:04:55,410 --> 00:05:00,093 ‫from adding together all the total prices from all bookings. 65 00:05:02,190 --> 00:05:05,523 ‫So it could have pre-written all this code here as well. 66 00:05:06,870 --> 00:05:11,070 ‫But yeah, it's also nice to write some 67 00:05:11,070 --> 00:05:13,680 ‫of the JavaScript ourselves. 68 00:05:13,680 --> 00:05:15,630 ‫So here we will have an accumulator 69 00:05:15,630 --> 00:05:17,430 ‫which is gonna start at zero. 70 00:05:17,430 --> 00:05:19,620 ‫And then in each iteration we will just 71 00:05:19,620 --> 00:05:24,033 ‫add the current total price of each booking. 72 00:05:25,200 --> 00:05:26,793 ‫And again, starting at zero. 73 00:05:27,930 --> 00:05:29,523 ‫So let's use that here. 74 00:05:32,400 --> 00:05:34,650 ‫And that's looking great. 75 00:05:34,650 --> 00:05:39,650 ‫But actually here, let's then also format this. 76 00:05:42,330 --> 00:05:47,330 ‫So format currency, this function that we have been using. 77 00:05:48,180 --> 00:05:50,943 ‫And so that's looking a lot nicer. 78 00:05:52,260 --> 00:05:55,863 ‫Next up, we need the total check-ins. 79 00:05:56,940 --> 00:05:58,833 ‫So that's statistic number three. 80 00:06:01,140 --> 00:06:02,550 ‫So check-ins. 81 00:06:02,550 --> 00:06:07,550 ‫And so these are basically the confirmed stays dot length. 82 00:06:08,790 --> 00:06:11,070 ‫And so that's why we needed to compute 83 00:06:11,070 --> 00:06:13,590 ‫these actual confirmed stays. 84 00:06:13,590 --> 00:06:15,540 ‫So if it was just stays, 85 00:06:15,540 --> 00:06:18,060 ‫then those might include some that were actually 86 00:06:18,060 --> 00:06:21,030 ‫never checked in and then never checked out. 87 00:06:21,030 --> 00:06:25,500 ‫But like this, we really only have the ones where the users 88 00:06:25,500 --> 00:06:28,083 ‫or where the guest actually showed. 89 00:06:29,640 --> 00:06:33,540 ‫So check-ins, and those are 11 right now. 90 00:06:33,540 --> 00:06:37,830 ‫And then finally, we need the occupancy rate. 91 00:06:37,830 --> 00:06:40,890 ‫So this one is gonna be a bit more difficult 92 00:06:40,890 --> 00:06:43,470 ‫but we're just gonna use a nice trick here 93 00:06:43,470 --> 00:06:46,740 ‫that's not gonna be 100% accurate 94 00:06:46,740 --> 00:06:49,803 ‫but we just want to keep it simple here. 95 00:06:52,710 --> 00:06:55,020 ‫So let's think about this. 96 00:06:55,020 --> 00:07:00,020 ‫So this occupation is basically gonna be the number 97 00:07:00,690 --> 00:07:05,690 ‫of checked in nights divided by all available nights. 98 00:07:12,570 --> 00:07:15,030 ‫So that's what the occupation of the hotel 99 00:07:15,030 --> 00:07:20,030 ‫during the last 90 days or whatever days actually means. 100 00:07:20,250 --> 00:07:24,153 ‫And so all we need to do is to compute these two values. 101 00:07:25,710 --> 00:07:29,160 ‫So the number of checked in nights we can easily get 102 00:07:29,160 --> 00:07:33,993 ‫from the confirmed stays, and then just reduce that. 103 00:07:40,020 --> 00:07:43,830 ‫So accumulator, which again is gonna start at zero 104 00:07:43,830 --> 00:07:48,830 ‫plus always in each iteration the number of nights. 105 00:07:50,250 --> 00:07:54,540 ‫So that's a value that we have available in all bookings, 106 00:07:54,540 --> 00:07:58,440 ‫right and so we can use that to add together 107 00:07:58,440 --> 00:08:01,263 ‫how many nights guests have stayed. 108 00:08:02,310 --> 00:08:04,470 ‫So that's not the final value yet 109 00:08:04,470 --> 00:08:06,063 ‫but let's check it out here. 110 00:08:08,880 --> 00:08:10,950 ‫And so guests have stayed 111 00:08:10,950 --> 00:08:15,270 ‫in our hotel for a total of 68 nights. 112 00:08:15,270 --> 00:08:20,270 ‫Now the number of available nights are not these 90 nights 113 00:08:20,550 --> 00:08:24,030 ‫but really 90 times the number of cabins. 114 00:08:24,030 --> 00:08:26,700 ‫So that's the number of nights, so, 115 00:08:26,700 --> 00:08:29,970 ‫of stays that we could have sold, right? 116 00:08:29,970 --> 00:08:34,470 ‫And only if all of those 90 times eight cabins 117 00:08:34,470 --> 00:08:35,790 ‫would've been sold, 118 00:08:35,790 --> 00:08:40,230 ‫then we would have an occupancy rate of 100%. 119 00:08:40,230 --> 00:08:45,230 ‫So this part here, again, it's basically the number of days 120 00:08:46,890 --> 00:08:50,490 ‫times the number of cabins. 121 00:08:50,490 --> 00:08:54,363 ‫And so we need to get both these values in here. 122 00:08:55,290 --> 00:09:00,290 ‫So number of days, and let's call this the cabin count 123 00:09:00,360 --> 00:09:02,343 ‫as we have called it earlier. 124 00:09:04,290 --> 00:09:07,890 ‫So the number of days we can actually get 125 00:09:07,890 --> 00:09:11,010 ‫from any of these two hooks here. 126 00:09:11,010 --> 00:09:14,100 ‫So we could also compute it again in this component 127 00:09:14,100 --> 00:09:17,880 ‫but we already did that here, so this num days. 128 00:09:17,880 --> 00:09:20,763 ‫And so we can just return that here. 129 00:09:21,960 --> 00:09:24,360 ‫So from the recent days 130 00:09:24,360 --> 00:09:29,360 ‫we get num days and the number of cabins. 131 00:09:29,970 --> 00:09:34,970 ‫Well, for that we need to use the use cabins hook, 132 00:09:35,040 --> 00:09:36,660 ‫so that's no problem at all. 133 00:09:36,660 --> 00:09:39,393 ‫That's why we have that reusable hook. 134 00:09:40,650 --> 00:09:43,090 ‫So cabins and is loading 135 00:09:46,410 --> 00:09:51,410 ‫let's rename it to is loading three, and then use cabins. 136 00:09:51,870 --> 00:09:54,060 ‫And so here we have another use case, 137 00:09:54,060 --> 00:09:58,800 ‫why it is so great to have this kind of data encapsulated 138 00:09:58,800 --> 00:10:00,603 ‫into these reusable hooks. 139 00:10:03,150 --> 00:10:08,150 ‫So here we need to account for is loading three as well. 140 00:10:08,790 --> 00:10:10,770 ‫And then here now we want to pass 141 00:10:10,770 --> 00:10:15,770 ‫in the number of days and then also the cabin count. 142 00:10:21,900 --> 00:10:24,210 ‫So let's compute that here immediately. 143 00:10:24,210 --> 00:10:27,243 ‫So cabins dot length. 144 00:10:29,670 --> 00:10:31,890 ‫All right and so here, 145 00:10:31,890 --> 00:10:35,710 ‫all we need to do is to now divide this entire thing 146 00:10:37,980 --> 00:10:42,980 ‫by number of days, times the cabin count. 147 00:10:43,320 --> 00:10:46,860 ‫And so with this we get 0.09, 148 00:10:46,860 --> 00:10:50,730 ‫so that's just 9% of occupation. 149 00:10:50,730 --> 00:10:55,730 ‫Now here, let's then round this and also multiply it 150 00:10:56,550 --> 00:11:01,467 ‫by 100 so that we get an actual percentage, so round. 151 00:11:04,260 --> 00:11:09,260 ‫And then let's just add a percentage sign. 152 00:11:09,390 --> 00:11:10,860 ‫And there we go. 153 00:11:10,860 --> 00:11:13,020 ‫And of course, now we can calculate these 154 00:11:13,020 --> 00:11:15,573 ‫for all these different days very easily. 155 00:11:17,520 --> 00:11:19,980 ‫So if we look just at the last seven days 156 00:11:19,980 --> 00:11:24,120 ‫then our occupancy rate is 36%. 157 00:11:24,120 --> 00:11:25,623 ‫So that looks pretty good. 158 00:11:27,330 --> 00:11:31,500 ‫And usually our app should be a bit bigger here. 159 00:11:31,500 --> 00:11:32,520 ‫And so then of course, 160 00:11:32,520 --> 00:11:37,110 ‫these four columns would all have the same size 161 00:11:37,110 --> 00:11:40,020 ‫so then this layout would look even better. 162 00:11:40,020 --> 00:11:42,190 ‫But even while we're developing here 163 00:11:43,320 --> 00:11:45,870 ‫it looks pretty decent as well. 164 00:11:45,870 --> 00:11:49,320 ‫And so then we can easily switch between windows. 165 00:11:49,320 --> 00:11:50,460 ‫But anyway, 166 00:11:50,460 --> 00:11:54,870 ‫I hope you had fun building this really cool looking part. 167 00:11:54,870 --> 00:11:59,163 ‫And so let's now move on to building these charts.