1 00:00:01,320 --> 00:00:03,690 ‫Welcome to the last feature 2 00:00:03,690 --> 00:00:06,810 ‫that we're gonna build in this application. 3 00:00:06,810 --> 00:00:10,230 ‫So in this one, we will list all the guests 4 00:00:10,230 --> 00:00:14,520 ‫that arrive at the hotel for check-in at the current day 5 00:00:14,520 --> 00:00:18,003 ‫or that leave the hotel and need to check-out. 6 00:00:20,304 --> 00:00:21,960 ‫And for that, we already have 7 00:00:21,960 --> 00:00:25,230 ‫this TodayActivity component here. 8 00:00:25,230 --> 00:00:28,560 ‫Just notice how this one is actually located 9 00:00:28,560 --> 00:00:30,870 ‫in the check-in-out folder 10 00:00:30,870 --> 00:00:33,540 ‫because this one here will really allow us 11 00:00:33,540 --> 00:00:38,220 ‫to, well, as the name says, check users in and out. 12 00:00:38,220 --> 00:00:41,580 ‫So it's really more about check-in and check-out. 13 00:00:41,580 --> 00:00:44,190 ‫And so therefore it is in this folder, 14 00:00:44,190 --> 00:00:47,580 ‫even though technically in the application layout, 15 00:00:47,580 --> 00:00:49,920 ‫it will appear in the dashboard. 16 00:00:49,920 --> 00:00:53,100 ‫But these folders here are about the features 17 00:00:53,100 --> 00:00:57,213 ‫and not about where the components appear in the UI. 18 00:00:58,920 --> 00:01:02,340 ‫But anyway, here, let's then fill out 19 00:01:02,340 --> 00:01:07,340 ‫our final piece of the layout with the TodayActivity. 20 00:01:09,210 --> 00:01:13,263 ‫So for some reason... Let's see. 21 00:01:14,370 --> 00:01:18,273 ‫So this is exporting a component called just Today. 22 00:01:20,559 --> 00:01:23,493 ‫So let's change that here and here. 23 00:01:27,690 --> 00:01:32,690 ‫And so then, yeah, then we can import that. 24 00:01:34,260 --> 00:01:38,100 ‫Nice, and this one actually doesn't need any props. 25 00:01:38,100 --> 00:01:42,570 ‫And so that means that the stays that we export it here 26 00:01:42,570 --> 00:01:44,523 ‫are actually not even necessary. 27 00:01:45,660 --> 00:01:50,660 ‫So here in useRecentStays, we computed the stays right here. 28 00:01:53,730 --> 00:01:55,740 ‫And then based on those stays, 29 00:01:55,740 --> 00:01:57,390 ‫we calculated the confirmedStays. 30 00:01:58,680 --> 00:02:02,400 ‫So since we do not really need the stays themselves, 31 00:02:02,400 --> 00:02:05,940 ‫we could probably have built a better query 32 00:02:05,940 --> 00:02:09,990 ‫where we also only select actually these stays 33 00:02:09,990 --> 00:02:13,050 ‫that fit this condition here. 34 00:02:13,050 --> 00:02:16,050 ‫But now I'm not gonna go back and change that. 35 00:02:16,050 --> 00:02:18,333 ‫So let's just leave it like this. 36 00:02:20,340 --> 00:02:23,910 ‫Okay, then we actually no longer need this. 37 00:02:23,910 --> 00:02:27,120 ‫And so all we need to do now is to fill up 38 00:02:27,120 --> 00:02:30,930 ‫this list of activities right here. 39 00:02:30,930 --> 00:02:34,770 ‫Now in our application, an activity basically means 40 00:02:34,770 --> 00:02:39,363 ‫that there is a guest arriving or leaving at that day. 41 00:02:40,650 --> 00:02:43,740 ‫So we need to get that data from our API. 42 00:02:43,740 --> 00:02:47,403 ‫And so let's check out the function that I already wrote. 43 00:02:48,600 --> 00:02:52,290 ‫So basically what I just said about an activity 44 00:02:52,290 --> 00:02:56,850 ‫is either this or this. 45 00:02:56,850 --> 00:02:59,250 ‫So basically a guest arriving 46 00:02:59,250 --> 00:03:02,520 ‫with a booking that isn't checked-in yet 47 00:03:02,520 --> 00:03:05,970 ‫is one where the status is unconfirmed 48 00:03:05,970 --> 00:03:09,390 ‫and the start date is today. 49 00:03:09,390 --> 00:03:11,103 ‫So it's the current day right now. 50 00:03:12,001 --> 00:03:15,090 ‫And so this here means a guest ready to arrive 51 00:03:15,090 --> 00:03:17,850 ‫and check-in at the current day. 52 00:03:17,850 --> 00:03:20,190 ‫So that's one of the possible activities. 53 00:03:20,190 --> 00:03:22,770 ‫And the other one is the check-out, 54 00:03:22,770 --> 00:03:26,190 ‫which is a booking that is currently checked-in, 55 00:03:26,190 --> 00:03:29,280 ‫but the end date is today. 56 00:03:29,280 --> 00:03:32,370 ‫So this guest here is ready to leave. 57 00:03:32,370 --> 00:03:36,040 ‫Now, we could get all our bookings from the API 58 00:03:37,019 --> 00:03:39,060 ‫and then compute this right here, 59 00:03:39,060 --> 00:03:41,250 ‫so using this JavaScript condition. 60 00:03:41,250 --> 00:03:44,640 ‫But to do this, we would first have to download 61 00:03:44,640 --> 00:03:48,180 ‫every single booking that has ever been created. 62 00:03:48,180 --> 00:03:51,510 ‫And so that would be pretty inefficient of course. 63 00:03:51,510 --> 00:03:55,320 ‫And so instead, we can do this, 64 00:03:55,320 --> 00:03:58,530 ‫which is the exact same thing. 65 00:03:58,530 --> 00:04:03,390 ‫So the superbase client first, again, 66 00:04:03,390 --> 00:04:07,110 ‫allows us to select everything here from the bookings, 67 00:04:07,110 --> 00:04:10,950 ‫and then onto that, we can add an or query. 68 00:04:10,950 --> 00:04:12,750 ‫And so that receives a string 69 00:04:12,750 --> 00:04:15,870 ‫which has two parts separated by a comma. 70 00:04:15,870 --> 00:04:18,570 ‫So this part or this part. 71 00:04:18,570 --> 00:04:21,363 ‫And then in there, we can even write an and, 72 00:04:22,260 --> 00:04:26,160 ‫where then again needs to be this and this. 73 00:04:26,160 --> 00:04:28,020 ‫So this is quite confusing 74 00:04:28,020 --> 00:04:30,570 ‫and probably you won't need this many times, 75 00:04:30,570 --> 00:04:34,230 ‫but you can go check out the documentation of superbase 76 00:04:34,230 --> 00:04:38,130 ‫where you will find all the details about this, 77 00:04:38,130 --> 00:04:41,730 ‫so this bit strange kind of syntax here. 78 00:04:41,730 --> 00:04:44,910 ‫But just by reading, you'll understand what this does 79 00:04:44,910 --> 00:04:46,740 ‫and how it works. 80 00:04:46,740 --> 00:04:50,430 ‫But now let's then again manage the state 81 00:04:50,430 --> 00:04:54,780 ‫that we're gonna receive here using React Query. 82 00:04:54,780 --> 00:04:57,520 ‫So let's call this one useTodayActivity. 83 00:05:03,586 --> 00:05:05,740 ‫So function useTodayActivity. 84 00:05:14,010 --> 00:05:15,612 ‫And here we will have 85 00:05:15,612 --> 00:05:19,380 ‫the simplest possible use of useQuery. 86 00:05:19,380 --> 00:05:23,430 ‫So we just specify the query function, 87 00:05:23,430 --> 00:05:27,000 ‫which is that function that we just saw. 88 00:05:27,000 --> 00:05:29,587 ‫So that's getStaysTodayActivity. 89 00:05:32,610 --> 00:05:36,090 ‫And then here the query function, 90 00:05:36,090 --> 00:05:39,330 ‫or actually, that we already have. 91 00:05:39,330 --> 00:05:44,330 ‫So the queryKey, let's then, here we need an array, 92 00:05:44,640 --> 00:05:49,023 ‫so let's call it today-activity. 93 00:05:49,950 --> 00:05:54,420 ‫And these activities of today will of course not be affected 94 00:05:54,420 --> 00:05:57,180 ‫by this filter here of the last days. 95 00:05:57,180 --> 00:05:59,943 ‫And so here, we really only need this. 96 00:06:01,452 --> 00:06:06,147 ‫And then here we just receive or get isLoading state 97 00:06:07,710 --> 00:06:12,303 ‫and the data, which is here called stays. 98 00:06:15,343 --> 00:06:17,093 ‫So let's return that. 99 00:06:20,166 --> 00:06:24,916 ‫And well, here we should have the equal, and there we go. 100 00:06:25,920 --> 00:06:29,670 ‫So this should work, this should also work. 101 00:06:29,670 --> 00:06:32,583 ‫And so let's grab that data in here. 102 00:06:40,428 --> 00:06:45,428 ‫UseTodayActivity. So let's grab that. 103 00:06:59,160 --> 00:07:00,873 ‫All right, nice. 104 00:07:02,494 --> 00:07:05,100 ‫And so now here below this row, 105 00:07:05,100 --> 00:07:08,040 ‫let's then actually render that list. 106 00:07:08,040 --> 00:07:11,160 ‫Now here, actually while the data is loading, 107 00:07:11,160 --> 00:07:14,070 ‫we still want to show this part. 108 00:07:14,070 --> 00:07:16,860 ‫So we will not as usual here return the spinner 109 00:07:16,860 --> 00:07:20,580 ‫if we are still loading, but instead do that here. 110 00:07:20,580 --> 00:07:25,580 ‫So if we are not loading, then we do something and else, 111 00:07:26,820 --> 00:07:31,820 ‫we just return or we render here this Spinner. 112 00:07:33,090 --> 00:07:36,390 ‫Then here we actually need another condition 113 00:07:36,390 --> 00:07:40,590 ‫because there might not be any activities for the day. 114 00:07:40,590 --> 00:07:44,927 ‫So we might have the situation where stays?.length 115 00:07:49,440 --> 00:07:50,823 ‫are greater than zero. 116 00:07:52,743 --> 00:07:54,060 ‫And so then we do something. 117 00:07:54,060 --> 00:07:58,200 ‫So then we render this TodayList that we have here 118 00:07:58,200 --> 00:08:01,143 ‫and otherwise we render that no activity. 119 00:08:03,362 --> 00:08:05,195 ‫So TodayList and else, 120 00:08:10,858 --> 00:08:14,153 ‫let's just say No activity today. 121 00:08:17,191 --> 00:08:19,863 ‫And this here indeed looks a bit confusing. 122 00:08:20,815 --> 00:08:24,135 ‫So we could have exported this entire thing here also 123 00:08:24,135 --> 00:08:25,193 ‫into its own component. 124 00:08:26,160 --> 00:08:29,010 ‫So something called a TodayList separate from here, 125 00:08:29,010 --> 00:08:32,163 ‫but at this point, I just want to keep it simple. 126 00:08:33,583 --> 00:08:37,593 ‫So here inside the TodayList for each of the stays, 127 00:08:38,637 --> 00:08:42,495 ‫so each of the activities, so they should I guess 128 00:08:42,495 --> 00:08:46,467 ‫actually be called activities like this. 129 00:08:49,093 --> 00:08:51,293 ‫And then in here, let's also call them that. 130 00:08:56,732 --> 00:08:58,270 ‫So these are the activities 131 00:09:00,676 --> 00:09:02,879 ‫or we could call them active bookings 132 00:09:02,879 --> 00:09:03,863 ‫or something like that. 133 00:09:05,100 --> 00:09:09,063 ‫But in any case, here we now want to render one TodayItem 134 00:09:10,276 --> 00:09:12,303 ‫for each of the activities. 135 00:09:16,305 --> 00:09:18,827 ‫So here we are going to use that StyledTodayItem. 136 00:09:25,539 --> 00:09:30,447 ‫And so let's take the activities.map over them. 137 00:09:33,636 --> 00:09:36,033 ‫And for each of them, as I just said, 138 00:09:36,952 --> 00:09:38,457 ‫we render one TodayItem, 139 00:09:41,408 --> 00:09:43,258 ‫then we pass in the current activity. 140 00:09:47,481 --> 00:09:50,823 ‫And the key should just be activity.id. 141 00:09:54,012 --> 00:09:55,612 ‫So that's looking quite correct. 142 00:09:56,798 --> 00:09:59,943 ‫And so let's receive that prop here. 143 00:10:03,908 --> 00:10:07,083 ‫And then let's take all the data that we need out of it. 144 00:10:08,336 --> 00:10:11,313 ‫So we need the id, we're gonna need the status, 145 00:10:12,769 --> 00:10:15,453 ‫the guests, and the number of nights. 146 00:10:16,512 --> 00:10:19,740 ‫'Cause remember that in the end, this is still a booking, 147 00:10:19,740 --> 00:10:23,763 ‫so that's why it has all of this data. 148 00:10:25,960 --> 00:10:29,523 ‫Okay, and so now let's get to work here. 149 00:10:30,714 --> 00:10:33,431 ‫And first of all, we're going to render a tag here 150 00:10:33,431 --> 00:10:36,273 ‫saying whether the user is arriving or departing. 151 00:10:37,491 --> 00:10:39,930 ‫And so that tag is going to depend 152 00:10:39,930 --> 00:10:44,253 ‫on whether the status is unconfirmed or checked-in. 153 00:10:46,311 --> 00:10:47,583 ‫So let's test that here. 154 00:10:50,210 --> 00:10:52,423 ‫So if the status is unconfirmed, 155 00:10:55,991 --> 00:10:59,920 ‫then here we will have a Tag of the type green 156 00:11:04,752 --> 00:11:06,252 ‫because this user is arriving, 157 00:11:07,795 --> 00:11:10,323 ‫and then the text in there is going to say, 158 00:11:12,536 --> 00:11:15,473 ‫well, actually just Arriving, okay. 159 00:11:19,763 --> 00:11:23,103 ‫And otherwise, so if this is already checked-in, 160 00:11:27,008 --> 00:11:29,058 ‫then it means that the user is departing. 161 00:11:31,267 --> 00:11:34,653 ‫So Departing, and then here we have a blue tag. 162 00:11:36,126 --> 00:11:38,133 ‫So let's check that, and nice. 163 00:11:39,936 --> 00:11:41,497 ‫So we can already see 164 00:11:41,497 --> 00:11:45,243 ‫that apparently we have five activities on this current day. 165 00:11:46,282 --> 00:11:49,533 ‫And so that's because here earlier I uploaded the bookings. 166 00:11:50,618 --> 00:11:54,480 ‫And so if you want to see these exact five activities 167 00:11:54,480 --> 00:11:55,953 ‫on your current day, 168 00:11:56,857 --> 00:12:00,003 ‫then please make sure to upload here the bookings only. 169 00:12:01,089 --> 00:12:04,803 ‫And so that will then update everything to the current day. 170 00:12:07,689 --> 00:12:12,477 ‫Okay, but anyway, next up, let's use the Flag component, 171 00:12:13,989 --> 00:12:15,535 ‫which is basically an image 172 00:12:15,535 --> 00:12:19,023 ‫which is going to receive the country flag from the guest. 173 00:12:21,018 --> 00:12:23,340 ‫So that's why we have the country flag there 174 00:12:23,340 --> 00:12:24,513 ‫in the first place. 175 00:12:26,661 --> 00:12:31,661 ‫So countryFlag, so that's one of the columns in the guest, 176 00:12:32,977 --> 00:12:37,393 ‫and then also the alt tag, so Flag of, 177 00:12:40,269 --> 00:12:43,119 ‫and then just the name of the country, so guests.country. 178 00:12:48,185 --> 00:12:50,673 ‫So this one should be self-closing, I think. 179 00:12:52,673 --> 00:12:56,433 ‫And nice. So it's starting to come together here. 180 00:12:58,812 --> 00:13:01,057 ‫Next we have the Guest component 181 00:13:01,057 --> 00:13:02,957 ‫which is a styled component from here. 182 00:13:04,481 --> 00:13:06,423 ‫And so then that's guests.fullName. 183 00:13:09,819 --> 00:13:12,340 ‫And finally, we're just gonna have a div 184 00:13:13,885 --> 00:13:16,263 ‫that's gonna tell us the number of nights. 185 00:13:20,289 --> 00:13:23,673 ‫Beautiful. So here we can scroll also. 186 00:13:24,817 --> 00:13:26,760 ‫And so all that is left to do now 187 00:13:26,760 --> 00:13:29,880 ‫is to add a button for the users 188 00:13:29,880 --> 00:13:33,270 ‫or for the guests that are arriving to check-in 189 00:13:33,270 --> 00:13:36,363 ‫and for the ones that are departing to check-out. 190 00:13:37,582 --> 00:13:39,937 ‫And so that's why I said way back 191 00:13:39,937 --> 00:13:42,421 ‫that actually most of the check-ins 192 00:13:42,421 --> 00:13:45,171 ‫and check-outs will happen right here in the dashboard. 193 00:13:46,414 --> 00:13:50,013 ‫So probably not so much right here in this table, 194 00:13:51,420 --> 00:13:53,674 ‫but it's still good to have this here. 195 00:13:53,674 --> 00:13:55,440 ‫But again, most of check-in and check-out 196 00:13:55,440 --> 00:13:57,363 ‫is gonna happen right here. 197 00:13:58,696 --> 00:14:01,113 ‫And so let's now add those buttons. 198 00:14:03,234 --> 00:14:04,384 ‫So let's grab this here 199 00:14:05,603 --> 00:14:07,853 ‫because this will again depend on the status. 200 00:14:08,755 --> 00:14:10,773 ‫So for the unconfirmed guests, 201 00:14:12,834 --> 00:14:17,427 ‫here we will have a button of the type small 202 00:14:19,950 --> 00:14:24,950 ‫and the variation that we want is a primary button, 203 00:14:27,276 --> 00:14:28,263 ‫just like this. 204 00:14:30,276 --> 00:14:31,743 ‫Then it's gonna say Check in. 205 00:14:33,338 --> 00:14:36,160 ‫And as we click on the button, what we want to happen 206 00:14:37,178 --> 00:14:40,443 ‫is to basically take the user to the Check in page. 207 00:14:41,867 --> 00:14:43,567 ‫And so basically what we want here 208 00:14:44,434 --> 00:14:47,670 ‫is for this button to actually be a link, 209 00:14:47,670 --> 00:14:50,133 ‫so a link coming from React Router. 210 00:14:51,197 --> 00:14:54,693 ‫And so that's where the as prop here comes again into play. 211 00:14:55,838 --> 00:14:58,740 ‫Because remember how this allows us to pass in 212 00:14:58,740 --> 00:15:01,563 ‫basically another HTML element, 213 00:15:02,634 --> 00:15:04,985 ‫which will then replace the original one 214 00:15:04,985 --> 00:15:06,385 ‫that we specified initially. 215 00:15:07,445 --> 00:15:09,780 ‫So this is right now an HTML button, 216 00:15:09,780 --> 00:15:13,983 ‫but here if we specify that this should be a link, 217 00:15:15,743 --> 00:15:19,680 ‫so exactly this one, then this will become an anchor element 218 00:15:19,680 --> 00:15:22,593 ‫because that's what the link is behind the scenes. 219 00:15:23,994 --> 00:15:26,004 ‫And so now since this is a link, 220 00:15:26,004 --> 00:15:29,310 ‫we can use the to prop that is available 221 00:15:29,310 --> 00:15:31,503 ‫on the link element. 222 00:15:34,086 --> 00:15:37,240 ‫And so here we can then take the user 223 00:15:38,109 --> 00:15:41,283 ‫to checkin and then the id. 224 00:15:44,739 --> 00:15:46,639 ‫All right, so let's inspect this here. 225 00:15:47,722 --> 00:15:49,972 ‫And so indeed, this is now an anchor element. 226 00:15:52,162 --> 00:15:54,312 ‫Let's just reload to get rid of our errors. 227 00:15:56,242 --> 00:15:58,320 ‫Nice, and so if we click here, 228 00:15:58,320 --> 00:16:02,253 ‫then indeed we go to that Check in page. 229 00:16:03,355 --> 00:16:05,195 ‫So we have the same guest here, 230 00:16:05,195 --> 00:16:06,450 ‫and then we can check them in 231 00:16:06,450 --> 00:16:08,583 ‫exactly as we have learned before. 232 00:16:10,374 --> 00:16:12,240 ‫So let's do that actually. 233 00:16:12,240 --> 00:16:14,943 ‫First, let's go back just to see something. 234 00:16:16,342 --> 00:16:18,130 ‫So right now we have six check-ins 235 00:16:19,359 --> 00:16:22,503 ‫and also we have no stay duration of seven nights. 236 00:16:23,422 --> 00:16:26,643 ‫And so let's see if that updates once we check this user in. 237 00:16:28,747 --> 00:16:31,923 ‫So let's do that. That brings us back here. 238 00:16:33,114 --> 00:16:35,020 ‫And notice this smooth animation here 239 00:16:35,905 --> 00:16:38,303 ‫that just happened on this graph, 240 00:16:38,303 --> 00:16:41,193 ‫because now we do have one stay with seven nights, 241 00:16:42,187 --> 00:16:44,313 ‫and also here we went from six to seven. 242 00:16:46,301 --> 00:16:48,933 ‫Nice, and also that guest is gone here, 243 00:16:49,802 --> 00:16:52,863 ‫because at this point they are no longer unconfirmed, 244 00:16:53,877 --> 00:16:54,773 ‫they are checked in. 245 00:16:56,228 --> 00:16:57,693 ‫Nice. So that part is done. 246 00:16:58,914 --> 00:17:01,664 ‫And again, ideally we would have a bit more space here. 247 00:17:03,007 --> 00:17:05,943 ‫And so, well for some reason, 248 00:17:07,016 --> 00:17:08,966 ‫it's always breaking into another line, 249 00:17:09,881 --> 00:17:11,123 ‫but let's just fix that later. 250 00:17:13,299 --> 00:17:16,293 ‫So now let's take care of the Check out button. 251 00:17:19,560 --> 00:17:24,560 ‫So here for the checked-in status, we now want to render, 252 00:17:26,922 --> 00:17:29,878 ‫and actually we already have a component for that, 253 00:17:29,878 --> 00:17:32,378 ‫because for this, we will require some more logic, 254 00:17:33,381 --> 00:17:35,730 ‫and so I believe that it makes sense to extract this 255 00:17:35,730 --> 00:17:37,683 ‫into its own component. 256 00:17:39,922 --> 00:17:44,922 ‫So CheckoutButton, and then here, 257 00:17:47,981 --> 00:17:50,283 ‫let's actually pass in the id. 258 00:17:51,720 --> 00:17:55,143 ‫So the bookingId is equal to id. 259 00:17:56,820 --> 00:17:58,473 ‫So let's bring this in. 260 00:18:11,671 --> 00:18:12,504 ‫And there we go. 261 00:18:13,865 --> 00:18:15,903 ‫So there are our buttons, 262 00:18:15,903 --> 00:18:18,764 ‫but of course for now they will not do anything, 263 00:18:18,764 --> 00:18:19,914 ‫and so let's come here. 264 00:18:21,092 --> 00:18:24,510 ‫And so under the hood, this is again just a button 265 00:18:24,510 --> 00:18:27,933 ‫with the primary variation and a small size. 266 00:18:29,121 --> 00:18:30,930 ‫And so here, let's know once again 267 00:18:30,930 --> 00:18:35,433 ‫bring in that custom hook that we created earlier. 268 00:18:36,827 --> 00:18:39,120 ‫So that will give us the checkout function 269 00:18:39,120 --> 00:18:42,753 ‫and an isLoading state I believe, 270 00:18:43,620 --> 00:18:47,893 ‫maybe it has some other name, but let's see, so useCheckout. 271 00:18:53,251 --> 00:18:54,893 ‫So let's see what we're actually returning. 272 00:18:55,950 --> 00:18:56,783 ‫So it's called isCheckingOut. 273 00:19:00,482 --> 00:19:04,144 ‫Nice, and so now all we need to do 274 00:19:04,144 --> 00:19:06,644 ‫is to hook everything up here. 275 00:19:07,588 --> 00:19:12,421 ‫So checkout and then disable it while we are checking out. 276 00:19:15,690 --> 00:19:18,346 ‫And actually here for the checkout, 277 00:19:18,346 --> 00:19:19,833 ‫we require the bookingId. 278 00:19:21,150 --> 00:19:23,850 ‫Otherwise, there is no way of knowing 279 00:19:23,850 --> 00:19:25,623 ‫what to actually check-out. 280 00:19:26,840 --> 00:19:29,693 ‫And so then here we need to make this a callback function. 281 00:19:31,576 --> 00:19:33,820 ‫All right, now here I'm not sure again 282 00:19:34,660 --> 00:19:36,357 ‫why it's looking that way 283 00:19:36,357 --> 00:19:39,663 ‫because it's still exactly the same thing. 284 00:19:41,490 --> 00:19:44,864 ‫So it's still a button with type small 285 00:19:44,864 --> 00:19:49,864 ‫and variation primary, or actually here, it should be size. 286 00:19:51,330 --> 00:19:54,333 ‫Ah, beautiful. So that's what I'm talking about. 287 00:19:55,856 --> 00:19:58,078 ‫And so now let's try this out. 288 00:19:58,078 --> 00:20:01,833 ‫So let's check out, and great. 289 00:20:03,537 --> 00:20:05,853 ‫So that works now from our dashboard as well. 290 00:20:08,849 --> 00:20:13,124 ‫And so now all that is left to do today in this hotel 291 00:20:13,124 --> 00:20:15,240 ‫is to check-in these two guests 292 00:20:15,240 --> 00:20:16,740 ‫as they will hopefully arrive. 293 00:20:17,970 --> 00:20:21,693 ‫All right, and that's it, that's our beautiful dashboard, 294 00:20:22,711 --> 00:20:24,510 ‫which is also pretty user friendly 295 00:20:24,510 --> 00:20:26,943 ‫because of this today activity list. 296 00:20:28,772 --> 00:20:29,760 ‫And so with this, 297 00:20:29,760 --> 00:20:33,093 ‫we are now basically almost done with this application. 298 00:20:34,136 --> 00:20:36,450 ‫Let's just fix one or two small things 299 00:20:36,450 --> 00:20:38,613 ‫in the next couple of lectures.