‫Welcome to the last feature
‫that we're gonna build in this application.
‫So in this one, we will list all the guests
‫that arrive at the hotel for check-in at the current day
‫or that leave the hotel and need to check-out.
‫And for that, we already have
‫this TodayActivity component here.
‫Just notice how this one is actually located
‫in the check-in-out folder
‫because this one here will really allow us
‫to, well, as the name says, check users in and out.
‫So it's really more about check-in and check-out.
‫And so therefore it is in this folder,
‫even though technically in the application layout,
‫it will appear in the dashboard.
‫But these folders here are about the features
‫and not about where the components appear in the UI.
‫But anyway, here, let's then fill out
‫our final piece of the layout with the TodayActivity.
‫So for some reason... Let's see.
‫So this is exporting a component called just Today.
‫So let's change that here and here.
‫And so then, yeah, then we can import that.
‫Nice, and this one actually doesn't need any props.
‫And so that means that the stays that we export it here
‫are actually not even necessary.
‫So here in useRecentStays, we computed the stays right here.
‫And then based on those stays,
‫we calculated the confirmedStays.
‫So since we do not really need the stays themselves,
‫we could probably have built a better query
‫where we also only select actually these stays
‫that fit this condition here.
‫But now I'm not gonna go back and change that.
‫So let's just leave it like this.
‫Okay, then we actually no longer need this.
‫And so all we need to do now is to fill up
‫this list of activities right here.
‫Now in our application, an activity basically means
‫that there is a guest arriving or leaving at that day.
‫So we need to get that data from our API.
‫And so let's check out the function that I already wrote.
‫So basically what I just said about an activity
‫is either this or this.
‫So basically a guest arriving
‫with a booking that isn't checked-in yet
‫is one where the status is unconfirmed
‫and the start date is today.
‫So it's the current day right now.
‫And so this here means a guest ready to arrive
‫and check-in at the current day.
‫So that's one of the possible activities.
‫And the other one is the check-out,
‫which is a booking that is currently checked-in,
‫but the end date is today.
‫So this guest here is ready to leave.
‫Now, we could get all our bookings from the API
‫and then compute this right here,
‫so using this JavaScript condition.
‫But to do this, we would first have to download
‫every single booking that has ever been created.
‫And so that would be pretty inefficient of course.
‫And so instead, we can do this,
‫which is the exact same thing.
‫So the superbase client first, again,
‫allows us to select everything here from the bookings,
‫and then onto that, we can add an or query.
‫And so that receives a string
‫which has two parts separated by a comma.
‫So this part or this part.
‫And then in there, we can even write an and,
‫where then again needs to be this and this.
‫So this is quite confusing
‫and probably you won't need this many times,
‫but you can go check out the documentation of superbase
‫where you will find all the details about this,
‫so this bit strange kind of syntax here.
‫But just by reading, you'll understand what this does
‫and how it works.
‫But now let's then again manage the state
‫that we're gonna receive here using React Query.
‫So let's call this one useTodayActivity.
‫So function useTodayActivity.
‫And here we will have
‫the simplest possible use of useQuery.
‫So we just specify the query function,
‫which is that function that we just saw.
‫So that's getStaysTodayActivity.
‫And then here the query function,
‫or actually, that we already have.
‫So the queryKey, let's then, here we need an array,
‫so let's call it today-activity.
‫And these activities of today will of course not be affected
‫by this filter here of the last days.
‫And so here, we really only need this.
‫And then here we just receive or get isLoading state
‫and the data, which is here called stays.
‫So let's return that.
‫And well, here we should have the equal, and there we go.
‫So this should work, this should also work.
‫And so let's grab that data in here.
‫UseTodayActivity. So let's grab that.
‫All right, nice.
‫And so now here below this row,
‫let's then actually render that list.
‫Now here, actually while the data is loading,
‫we still want to show this part.
‫So we will not as usual here return the spinner
‫if we are still loading, but instead do that here.
‫So if we are not loading, then we do something and else,
‫we just return or we render here this Spinner.
‫Then here we actually need another condition
‫because there might not be any activities for the day.
‫So we might have the situation where stays?.length
‫are greater than zero.
‫And so then we do something.
‫So then we render this TodayList that we have here
‫and otherwise we render that no activity.
‫So TodayList and else,
‫let's just say No activity today.
‫And this here indeed looks a bit confusing.
‫So we could have exported this entire thing here also
‫into its own component.
‫So something called a TodayList separate from here,
‫but at this point, I just want to keep it simple.
‫So here inside the TodayList for each of the stays,
‫so each of the activities, so they should I guess
‫actually be called activities like this.
‫And then in here, let's also call them that.
‫So these are the activities
‫or we could call them active bookings
‫or something like that.
‫But in any case, here we now want to render one TodayItem
‫for each of the activities.
‫So here we are going to use that StyledTodayItem.
‫And so let's take the activities.map over them.
‫And for each of them, as I just said,
‫we render one TodayItem,
‫then we pass in the current activity.
‫And the key should just be activity.id.
‫So that's looking quite correct.
‫And so let's receive that prop here.
‫And then let's take all the data that we need out of it.
‫So we need the id, we're gonna need the status,
‫the guests, and the number of nights.
‫'Cause remember that in the end, this is still a booking,
‫so that's why it has all of this data.
‫Okay, and so now let's get to work here.
‫And first of all, we're going to render a tag here
‫saying whether the user is arriving or departing.
‫And so that tag is going to depend
‫on whether the status is unconfirmed or checked-in.
‫So let's test that here.
‫So if the status is unconfirmed,
‫then here we will have a Tag of the type green
‫because this user is arriving,
‫and then the text in there is going to say,
‫well, actually just Arriving, okay.
‫And otherwise, so if this is already checked-in,
‫then it means that the user is departing.
‫So Departing, and then here we have a blue tag.
‫So let's check that, and nice.
‫So we can already see
‫that apparently we have five activities on this current day.
‫And so that's because here earlier I uploaded the bookings.
‫And so if you want to see these exact five activities
‫on your current day,
‫then please make sure to upload here the bookings only.
‫And so that will then update everything to the current day.
‫Okay, but anyway, next up, let's use the Flag component,
‫which is basically an image
‫which is going to receive the country flag from the guest.
‫So that's why we have the country flag there
‫in the first place.
‫So countryFlag, so that's one of the columns in the guest,
‫and then also the alt tag, so Flag of,
‫and then just the name of the country, so guests.country.
‫So this one should be self-closing, I think.
‫And nice. So it's starting to come together here.
‫Next we have the Guest component
‫which is a styled component from here.
‫And so then that's guests.fullName.
‫And finally, we're just gonna have a div
‫that's gonna tell us the number of nights.
‫Beautiful. So here we can scroll also.
‫And so all that is left to do now
‫is to add a button for the users
‫or for the guests that are arriving to check-in
‫and for the ones that are departing to check-out.
‫And so that's why I said way back
‫that actually most of the check-ins
‫and check-outs will happen right here in the dashboard.
‫So probably not so much right here in this table,
‫but it's still good to have this here.
‫But again, most of check-in and check-out
‫is gonna happen right here.
‫And so let's now add those buttons.
‫So let's grab this here
‫because this will again depend on the status.
‫So for the unconfirmed guests,
‫here we will have a button of the type small
‫and the variation that we want is a primary button,
‫just like this.
‫Then it's gonna say Check in.
‫And as we click on the button, what we want to happen
‫is to basically take the user to the Check in page.
‫And so basically what we want here
‫is for this button to actually be a link,
‫so a link coming from React Router.
‫And so that's where the as prop here comes again into play.
‫Because remember how this allows us to pass in
‫basically another HTML element,
‫which will then replace the original one
‫that we specified initially.
‫So this is right now an HTML button,
‫but here if we specify that this should be a link,
‫so exactly this one, then this will become an anchor element
‫because that's what the link is behind the scenes.
‫And so now since this is a link,
‫we can use the to prop that is available
‫on the link element.
‫And so here we can then take the user
‫to checkin and then the id.
‫All right, so let's inspect this here.
‫And so indeed, this is now an anchor element.
‫Let's just reload to get rid of our errors.
‫Nice, and so if we click here,
‫then indeed we go to that Check in page.
‫So we have the same guest here,
‫and then we can check them in
‫exactly as we have learned before.
‫So let's do that actually.
‫First, let's go back just to see something.
‫So right now we have six check-ins
‫and also we have no stay duration of seven nights.
‫And so let's see if that updates once we check this user in.
‫So let's do that. That brings us back here.
‫And notice this smooth animation here
‫that just happened on this graph,
‫because now we do have one stay with seven nights,
‫and also here we went from six to seven.
‫Nice, and also that guest is gone here,
‫because at this point they are no longer unconfirmed,
‫they are checked in.
‫Nice. So that part is done.
‫And again, ideally we would have a bit more space here.
‫And so, well for some reason,
‫it's always breaking into another line,
‫but let's just fix that later.
‫So now let's take care of the Check out button.
‫So here for the checked-in status, we now want to render,
‫and actually we already have a component for that,
‫because for this, we will require some more logic,
‫and so I believe that it makes sense to extract this
‫into its own component.
‫So CheckoutButton, and then here,
‫let's actually pass in the id.
‫So the bookingId is equal to id.
‫So let's bring this in.
‫And there we go.
‫So there are our buttons,
‫but of course for now they will not do anything,
‫and so let's come here.
‫And so under the hood, this is again just a button
‫with the primary variation and a small size.
‫And so here, let's know once again
‫bring in that custom hook that we created earlier.
‫So that will give us the checkout function
‫and an isLoading state I believe,
‫maybe it has some other name, but let's see, so useCheckout.
‫So let's see what we're actually returning.
‫So it's called isCheckingOut.
‫Nice, and so now all we need to do
‫is to hook everything up here.
‫So checkout and then disable it while we are checking out.
‫And actually here for the checkout,
‫we require the bookingId.
‫Otherwise, there is no way of knowing
‫what to actually check-out.
‫And so then here we need to make this a callback function.
‫All right, now here I'm not sure again
‫why it's looking that way
‫because it's still exactly the same thing.
‫So it's still a button with type small
‫and variation primary, or actually here, it should be size.
‫Ah, beautiful. So that's what I'm talking about.
‫And so now let's try this out.
‫So let's check out, and great.
‫So that works now from our dashboard as well.
‫And so now all that is left to do today in this hotel
‫is to check-in these two guests
‫as they will hopefully arrive.
‫All right, and that's it, that's our beautiful dashboard,
‫which is also pretty user friendly
‫because of this today activity list.
‫And so with this,
‫we are now basically almost done with this application.
‫Let's just fix one or two small things
‫in the next couple of lectures.