1 00:00:01,170 --> 00:00:03,660 ‫So before we can start building 2 00:00:03,660 --> 00:00:06,210 ‫our statistics and charts 3 00:00:06,210 --> 00:00:09,420 ‫we first need to compute the latest bookings 4 00:00:09,420 --> 00:00:13,623 ‫and stays from our super base bookings table. 5 00:00:15,540 --> 00:00:18,960 ‫Now here it's really, really important to distinguish 6 00:00:18,960 --> 00:00:21,570 ‫between these two types of data. 7 00:00:21,570 --> 00:00:24,720 ‫So between bookings and stays. 8 00:00:24,720 --> 00:00:28,230 ‫So the bookings are the actual sales. 9 00:00:28,230 --> 00:00:31,380 ‫So for example, in the last 30 days 10 00:00:31,380 --> 00:00:35,100 ‫the hotel might have sold 50 bookings online, 11 00:00:35,100 --> 00:00:39,030 ‫but maybe 30 of these guests will only arrive 12 00:00:39,030 --> 00:00:43,980 ‫and check into the hotel in the far future like month 13 00:00:43,980 --> 00:00:48,980 ‫or even a year after they have booked the booking. 14 00:00:49,080 --> 00:00:52,230 ‫Now, on the other hand, we have the stays. 15 00:00:52,230 --> 00:00:55,320 ‫So stays are the actual check-ins 16 00:00:55,320 --> 00:00:58,650 ‫of guests as they arrive for their bookings 17 00:00:58,650 --> 00:01:02,970 ‫in our hotel that we can identify stays simply 18 00:01:02,970 --> 00:01:05,100 ‫by their start date together 19 00:01:05,100 --> 00:01:10,080 ‫with the status of either checked in or checked out. 20 00:01:10,080 --> 00:01:14,550 ‫So again, as a summary, a booking is an actual sale 21 00:01:14,550 --> 00:01:19,050 ‫while a stay is a guest actually staying in the hotel. 22 00:01:19,050 --> 00:01:21,510 ‫And these things are very different 23 00:01:21,510 --> 00:01:23,970 ‫and we need them for different parts 24 00:01:23,970 --> 00:01:27,360 ‫of our statistics and also these charts, 25 00:01:27,360 --> 00:01:31,050 ‫for example this chart here will be about stays, 26 00:01:31,050 --> 00:01:33,540 ‫so stay durations, and these sales 27 00:01:33,540 --> 00:01:35,517 ‫will really be about the bookings. 28 00:01:35,517 --> 00:01:39,750 ‫And so now we need to compute these two separately. 29 00:01:39,750 --> 00:01:44,750 ‫Now, I did already write the functions for doing that. 30 00:01:44,820 --> 00:01:49,820 ‫So in our services we will now go back to our bookings API. 31 00:01:50,850 --> 00:01:54,360 ‫And so somewhere here, yeah, 32 00:01:54,360 --> 00:01:57,603 ‫so here we have get bookings after date. 33 00:01:58,620 --> 00:02:01,410 ‫So what this does is to return to us 34 00:02:01,410 --> 00:02:03,690 ‫all the bookings that were created 35 00:02:03,690 --> 00:02:07,140 ‫after the given date and that date is important 36 00:02:07,140 --> 00:02:12,140 ‫so that we can factor in these last 7, 30, or 90 days. 37 00:02:13,110 --> 00:02:16,170 ‫And so the way that this works is that 38 00:02:16,170 --> 00:02:21,170 ‫as we already know how to do, it'll query all the bookings, 39 00:02:21,390 --> 00:02:24,480 ‫then it will select these three columns here, 40 00:02:24,480 --> 00:02:26,910 ‫and then here we have some filters. 41 00:02:26,910 --> 00:02:30,120 ‫So we're gonna get all the bookings that were created 42 00:02:30,120 --> 00:02:34,050 ‫after this date and before today. 43 00:02:34,050 --> 00:02:36,180 ‫So basically between today 44 00:02:36,180 --> 00:02:39,033 ‫and for example the last 30 days. 45 00:02:40,200 --> 00:02:42,900 ‫Now here, this date, 46 00:02:42,900 --> 00:02:45,390 ‫which is the date that this function receives 47 00:02:45,390 --> 00:02:49,260 ‫needs to be an ISO string or an ISO string. 48 00:02:49,260 --> 00:02:52,143 ‫Not sure how we say that. 49 00:02:52,980 --> 00:02:57,600 ‫So the date needs to be an ISO string. 50 00:02:57,600 --> 00:03:00,570 ‫So that's what super base expects here. 51 00:03:00,570 --> 00:03:03,450 ‫Now for the current date, so for today 52 00:03:03,450 --> 00:03:07,230 ‫we have this helper function here in our helpers file, 53 00:03:07,230 --> 00:03:10,620 ‫and so this will then get the current date 54 00:03:10,620 --> 00:03:13,653 ‫and return it as an ISO string. 55 00:03:14,520 --> 00:03:17,490 ‫Now what's important here is that we have passed 56 00:03:17,490 --> 00:03:20,370 ‫in this option of end to true, and the reason 57 00:03:20,370 --> 00:03:23,880 ‫for that is that if we just compute the current day 58 00:03:23,880 --> 00:03:26,850 ‫that date will change every second 59 00:03:26,850 --> 00:03:30,840 ‫because that date will also include the current time. 60 00:03:30,840 --> 00:03:33,360 ‫And so then here we use that trick where 61 00:03:33,360 --> 00:03:38,360 ‫if options is equal to end, then we set, 62 00:03:38,520 --> 00:03:42,630 ‫so we fix this date here to the last basically millisecond 63 00:03:42,630 --> 00:03:45,360 ‫of the day, and otherwise we fix it 64 00:03:45,360 --> 00:03:49,980 ‫to the very first millisecond of the day now, right? 65 00:03:49,980 --> 00:03:54,030 ‫So basically just fixing the date to the current day 66 00:03:54,030 --> 00:03:57,303 ‫so that it doesn't change after every millisecond. 67 00:03:58,530 --> 00:04:00,063 ‫So that's important here. 68 00:04:01,290 --> 00:04:03,150 ‫And then the rest is the same. 69 00:04:03,150 --> 00:04:06,210 ‫So this will just return then all those bookings 70 00:04:06,210 --> 00:04:10,500 ‫which were again created between these two dates. 71 00:04:10,500 --> 00:04:13,501 ‫So between today and the date that was passed in, 72 00:04:13,501 --> 00:04:15,370 ‫which is gonna be some date 73 00:04:16,260 --> 00:04:19,503 ‫either the last 7, 30, or 90 days. 74 00:04:20,490 --> 00:04:24,360 ‫Now if all this seems a bit too magical 75 00:04:24,360 --> 00:04:27,510 ‫like it appeared out of nowhere, then the reason 76 00:04:27,510 --> 00:04:32,130 ‫for that is that here, my main concern is not really 77 00:04:32,130 --> 00:04:35,670 ‫on how to get all this data and how to manipulate it 78 00:04:35,670 --> 00:04:38,730 ‫but what I really want is for you to learn how 79 00:04:38,730 --> 00:04:42,540 ‫to then use the data and display some charts with it. 80 00:04:42,540 --> 00:04:44,441 ‫So that's what we will do later. 81 00:04:44,441 --> 00:04:46,800 ‫And again, that's my main focus 82 00:04:46,800 --> 00:04:50,103 ‫of building this dashboard here in the first place. 83 00:04:51,510 --> 00:04:53,730 ‫But for that, of course, we need data. 84 00:04:53,730 --> 00:04:56,100 ‫And so here we have that other function 85 00:04:56,100 --> 00:04:58,140 ‫for getting the stays. 86 00:04:58,140 --> 00:04:59,430 ‫So that's very similar. 87 00:04:59,430 --> 00:05:02,163 ‫We again, get this data from the bookings. 88 00:05:03,420 --> 00:05:05,070 ‫So here we don't need this. 89 00:05:05,070 --> 00:05:09,930 ‫Then we will take everything and also the guest's name. 90 00:05:09,930 --> 00:05:14,280 ‫And then here we do exactly what we did earlier here, 91 00:05:14,280 --> 00:05:16,410 ‫but with the difference that we don't use 92 00:05:16,410 --> 00:05:20,610 ‫the created at date, which is when the booking was made, 93 00:05:20,610 --> 00:05:23,790 ‫but really when the booking actually starts. 94 00:05:23,790 --> 00:05:28,050 ‫So when the user basically is gonna check in at the hotel. 95 00:05:28,050 --> 00:05:31,023 ‫And so that's why here we use that start date. 96 00:05:32,370 --> 00:05:35,790 ‫All right, so these are the two functions 97 00:05:35,790 --> 00:05:37,230 ‫that we're going to use. 98 00:05:37,230 --> 00:05:39,180 ‫And then as always, we need to get them 99 00:05:39,180 --> 00:05:44,180 ‫into our application by using React Query. 100 00:05:44,430 --> 00:05:48,330 ‫So then we create a custom hook for that. 101 00:05:48,330 --> 00:05:52,353 ‫So let's call this one use recent bookings. 102 00:05:57,420 --> 00:06:02,420 ‫So export function, use recent bookings. 103 00:06:05,910 --> 00:06:10,910 ‫And so this is where we will then get these last days here. 104 00:06:11,340 --> 00:06:13,890 ‫So basically for how many days in the past 105 00:06:13,890 --> 00:06:15,483 ‫we want to get our data. 106 00:06:16,440 --> 00:06:20,190 ‫And so that's as always gonna come forward 107 00:06:20,190 --> 00:06:23,193 ‫or from the search params. 108 00:06:24,420 --> 00:06:27,810 ‫So use search params. 109 00:06:27,810 --> 00:06:32,810 ‫And then here, let's say numb days. 110 00:06:35,640 --> 00:06:39,963 ‫So let's say we don't have any search params yet. 111 00:06:44,100 --> 00:06:47,103 ‫Then in that case the default is just seven. 112 00:06:48,300 --> 00:06:51,780 ‫So basically this one here is gonna be our default 113 00:06:51,780 --> 00:06:56,780 ‫and otherwise we just convert this part here to a number. 114 00:06:59,160 --> 00:07:01,890 ‫So if that doesn't exist, it'll just be null, 115 00:07:01,890 --> 00:07:04,863 ‫and so then or number of days will become seven. 116 00:07:05,730 --> 00:07:08,100 ‫But now what do we actually do 117 00:07:08,100 --> 00:07:12,690 ‫with these seven days, or these 30, or these 90 days? 118 00:07:12,690 --> 00:07:15,240 ‫Because that's not what we need to pass 119 00:07:15,240 --> 00:07:18,270 ‫in here into these functions. 120 00:07:18,270 --> 00:07:22,170 ‫So here we need actually a date that is already seven, 121 00:07:22,170 --> 00:07:26,310 ‫or 30, or 90 days ago, right? 122 00:07:26,310 --> 00:07:28,383 ‫And so we need to calculate that here. 123 00:07:30,960 --> 00:07:33,720 ‫So let's call that query date. 124 00:07:33,720 --> 00:07:36,480 ‫And for that we have a very handy function 125 00:07:36,480 --> 00:07:41,480 ‫in the functions FNS package that we included earlier. 126 00:07:41,790 --> 00:07:45,273 ‫So we can just do sub days. 127 00:07:47,400 --> 00:07:50,283 ‫So make sure to import that from this library. 128 00:07:51,630 --> 00:07:54,960 ‫And so this function takes as the first argument, 129 00:07:54,960 --> 00:07:58,500 ‫the current date, so right now basically, 130 00:07:58,500 --> 00:08:01,560 ‫and then the number of days that we want to subtract. 131 00:08:01,560 --> 00:08:04,620 ‫So that's gonna be the number of days. 132 00:08:04,620 --> 00:08:09,620 ‫And then remember that that function needs an ISO string. 133 00:08:09,630 --> 00:08:12,810 ‫So we just convert that like this. 134 00:08:12,810 --> 00:08:15,840 ‫And so then we are ready to use our function. 135 00:08:15,840 --> 00:08:19,530 ‫And so for that we will use React Query. 136 00:08:19,530 --> 00:08:24,450 ‫And so then we will get is loading the data 137 00:08:24,450 --> 00:08:27,100 ‫which will be the bookings 138 00:08:28,890 --> 00:08:31,310 ‫and also an error which we can use 139 00:08:31,310 --> 00:08:33,333 ‫or can just ignore it as well. 140 00:08:34,620 --> 00:08:39,620 ‫So then use query, anterior d query function 141 00:08:40,860 --> 00:08:45,860 ‫is going to be a callback with, get bookings after date, 142 00:08:50,760 --> 00:08:54,453 ‫where we then pass in our query date. 143 00:08:56,040 --> 00:08:57,030 ‫All right? 144 00:08:57,030 --> 00:08:58,623 ‫And then we need to query key. 145 00:08:59,670 --> 00:09:01,443 ‫So let's call this one here, 146 00:09:04,110 --> 00:09:07,383 ‫bookings, but we already have a bookings key. 147 00:09:08,520 --> 00:09:13,520 ‫So basically this one here also has the bookings key, right? 148 00:09:14,580 --> 00:09:17,430 ‫And so here, let's change that 149 00:09:17,430 --> 00:09:20,100 ‫and let's actually add then the number 150 00:09:20,100 --> 00:09:24,960 ‫of days here because just like with the bookings or data 151 00:09:24,960 --> 00:09:26,490 ‫can actually change. 152 00:09:26,490 --> 00:09:28,590 ‫And whenever we change this year 153 00:09:28,590 --> 00:09:31,683 ‫we want the data to be re-fetched automatically. 154 00:09:32,700 --> 00:09:36,990 ‫And so we can just add that value that changes here 155 00:09:36,990 --> 00:09:41,283 ‫in this array, which is again a bit like a dependency array. 156 00:09:42,150 --> 00:09:47,103 ‫So let's say last and then here, just the number of days. 157 00:09:49,650 --> 00:09:50,483 ‫Okay. 158 00:09:51,625 --> 00:09:54,870 ‫And so as always, let's now return all this stuff. 159 00:09:54,870 --> 00:09:58,770 ‫So it's loading and bookings. 160 00:09:58,770 --> 00:10:02,523 ‫And then here in our dashboard, let's use that. 161 00:10:07,830 --> 00:10:12,830 ‫So bookings and is loading from use recent bookings. 162 00:10:16,920 --> 00:10:21,920 ‫Then if is loading return as always or loading spinner. 163 00:10:25,800 --> 00:10:28,980 ‫And then after that, let's just take a look 164 00:10:28,980 --> 00:10:31,533 ‫at our bookings to see if everything worked. 165 00:10:34,800 --> 00:10:37,290 ‫And apparently it did. 166 00:10:37,290 --> 00:10:39,930 ‫So it seems like we have 15 bookings 167 00:10:39,930 --> 00:10:42,633 ‫that were made in the last 30 days. 168 00:10:43,920 --> 00:10:48,210 ‫Let's change to seven, but then we only have seven bookings 169 00:10:48,210 --> 00:10:50,910 ‫and we can of course also check them out here 170 00:10:50,910 --> 00:10:53,553 ‫without logging everything to the console. 171 00:10:55,560 --> 00:10:58,020 ‫So seven or 30 days. 172 00:10:58,020 --> 00:11:02,790 ‫And finally for 90 days, we should get some more. 173 00:11:02,790 --> 00:11:05,070 ‫Yeah, then we have 19 bookings. 174 00:11:05,070 --> 00:11:07,020 ‫So that makes sense because 175 00:11:07,020 --> 00:11:08,910 ‫of course the longer the time span 176 00:11:08,910 --> 00:11:11,433 ‫the more bookings will have happened. 177 00:11:12,630 --> 00:11:14,280 ‫All these bookings are of course 178 00:11:14,280 --> 00:11:17,133 ‫also stored here inside the cache. 179 00:11:18,060 --> 00:11:22,290 ‫So as we move here, then there's no loading spinner again 180 00:11:22,290 --> 00:11:24,510 ‫and data is just retrieved 181 00:11:24,510 --> 00:11:27,453 ‫from the query or from the cache. 182 00:11:28,440 --> 00:11:32,610 ‫Now, okay, and now let's do just the exact same thing here 183 00:11:32,610 --> 00:11:35,160 ‫for the recent stays. 184 00:11:35,160 --> 00:11:38,733 ‫So let's simply duplicate this. 185 00:11:43,230 --> 00:11:45,150 ‫Let's close this one. 186 00:11:45,150 --> 00:11:48,360 ‫And all this logic here needs to be the same 187 00:11:48,360 --> 00:11:50,370 ‫but what changes is then here 188 00:11:50,370 --> 00:11:54,423 ‫that we want get stays after date. 189 00:11:59,250 --> 00:12:01,530 ‫Then here we remove that. 190 00:12:01,530 --> 00:12:06,530 ‫Here, let's call this stays in all these occurrences. 191 00:12:06,900 --> 00:12:10,770 ‫So the data and here also the query key. 192 00:12:10,770 --> 00:12:14,280 ‫Now here we will also need some additional computing 193 00:12:14,280 --> 00:12:18,900 ‫which is to calculate only the confirmed stays. 194 00:12:18,900 --> 00:12:22,560 ‫So the ones that are not unconfirmed, 195 00:12:22,560 --> 00:12:27,390 ‫so confirmed stays. 196 00:12:27,390 --> 00:12:31,143 ‫And so here we can simply do stays, if they exist, 197 00:12:32,160 --> 00:12:34,560 ‫and then dot filter. 198 00:12:34,560 --> 00:12:39,560 ‫So here for each day, we only want to keep this day 199 00:12:39,660 --> 00:12:44,660 ‫if the status like this is basically 200 00:12:45,810 --> 00:12:48,213 ‫either checked in or checked out, 201 00:12:49,170 --> 00:12:54,170 ‫so checked in, or let's grab this, 202 00:12:59,460 --> 00:13:02,670 ‫checked out. 203 00:13:02,670 --> 00:13:04,860 ‫And we need to know about this 204 00:13:04,860 --> 00:13:09,150 ‫because the guest might actually never show up at our hotel. 205 00:13:09,150 --> 00:13:13,290 ‫And so then that booking stays unconfirmed forever. 206 00:13:13,290 --> 00:13:16,440 ‫And in some situations here in our dashboard 207 00:13:16,440 --> 00:13:20,310 ‫we are interested only in these confirmed stays. 208 00:13:20,310 --> 00:13:23,283 ‫So let's return them here as well. 209 00:13:24,960 --> 00:13:25,893 ‫All right. 210 00:13:26,820 --> 00:13:31,820 ‫And with this, let's also get them in here. 211 00:13:32,700 --> 00:13:37,700 ‫So stays, confirmed stays, and is loading. 212 00:13:40,380 --> 00:13:45,380 ‫So let's rename that to like is loading one and then here 213 00:13:48,660 --> 00:13:52,560 ‫maybe this one here should actually be reloading two 214 00:13:52,560 --> 00:13:57,560 ‫and then use resend, and probably we didn't, yeah, 215 00:13:58,770 --> 00:14:00,693 ‫we didn't change the name here. 216 00:14:02,130 --> 00:14:04,890 ‫So that happens to me all the time. 217 00:14:04,890 --> 00:14:08,520 ‫But well now it doesn't show up anymore. 218 00:14:08,520 --> 00:14:11,733 ‫So use recent stays. 219 00:14:13,350 --> 00:14:14,913 ‫Let's bring that in. 220 00:14:25,110 --> 00:14:27,540 ‫And then we get some other, ah, 221 00:14:27,540 --> 00:14:32,540 ‫is loading one or is loading two. 222 00:14:35,880 --> 00:14:40,470 ‫Okay, let's then log the confirmed. 223 00:14:40,470 --> 00:14:43,230 ‫Or actually we don't need to log anything 224 00:14:43,230 --> 00:14:47,820 ‫so we can just check them out if we want right here. 225 00:14:47,820 --> 00:14:52,820 ‫And so here we get seven stays and seven bookings, actually. 226 00:14:54,330 --> 00:14:56,160 ‫Let's see, for 90. 227 00:14:56,160 --> 00:15:01,160 ‫So here we get 14 stays and 19 bookings. 228 00:15:02,730 --> 00:15:04,020 ‫So just to make sure 229 00:15:04,020 --> 00:15:06,393 ‫that this data is actually different. 230 00:15:09,060 --> 00:15:11,850 ‫Now, okay, and now in the next lecture 231 00:15:11,850 --> 00:15:15,240 ‫let's start to use this data to build out 232 00:15:15,240 --> 00:15:18,093 ‫our statistics for our dashboard.