‫Next up, let's also allow employees
‫to check out a guest once they leave the hotel.
‫And this one is actually gonna be a lot simpler
‫than checking in.
‫So here we don't even need a separate page.
‫All we need is a checkout button here in this menu,
‫and also on the details page.
‫Now first of all, only the guests
‫that are currently checked in can actually be checked out.
‫And so let's start with that part.
‫So by adding a button here,
‫if the user or if the guest is actually checked in.
‫So let's come to our BookingRow and then here,
‫well, since this is already selected,
‫let's just duplicate it.
‫So basically, adding a new button here to this Menus list.
‫And so here, we want to render this one
‫if the status is currently checked in.
‫Then here the icon,
‫let's make it Arrow
‫and then UpOnSquare.
‫And then here, we will not want, of course, this action.
‫So let's just do something empty here for now,
‫just so we see if the button actually shows up.
‫And so, indeed,
‫here, we can now well actually we want Check out.
‫And there we go.
‫So this one we can check out.
‫And this one we can check in.
‫So the arrow here with the opposite direction.
‫Nice, but now next up,
‫we need to actually implement the functionality itself.
‫So the logic for checking out a guest.
‫And that logic is actually pretty similar
‫to the check in logic, because checking out
‫will also be to basically edit or update a booking.
‫So let's just duplicate this file,
‫use Checkout.
‫And then all we need to do is to change some names here.
‫So useCheckout.
‫Then here,
‫let's call this one checkout.
‫And here is CheckingOut.
‫And then of course, also here as well.
‫So here, successfully checked out and here.
‫And then the most important part is of course, again,
‫this mutation function.
‫Now, here we do not need to receive
‫any data about breakfast,
‫so all we need really is the booking ID.
‫And then what we want to update, really, is only the status.
‫So let's get rid of this part here.
‫And then we want to set this to checked-out.
‫And this should actually be it.
‫So in here, let's then grab that function.
‫So checkout
‫and isCheckingOut
‫from useCheckout.
‫All right, and yeah, right here.
‫So here, all we need to do now is to call checkout
‫with the current bookingId.
‫Then let's make this disabled
‫while isCheckingOut.
‫Now, okay, that should be it.
‫So let's only select or Checked In guests here.
‫So let's check out myself here.
‫But now I cannot see the bottom part, but now we can.
‫So let's Check out.
‫And then this should disappear here from this row.
‫And indeed, the booking has successfully checked out.
‫And since that always brings us back to the dashboard,
‫let's then again check.
‫And indeed, now my name here is gone from the list
‫and it should be in the Checked out list.
‫And indeed, here is that booking that we just checked out.
‫Now maybe in this case, it doesn't even make sense
‫to then redirect the user to the dashboard.
‫So let's remove that part here.
‫And then also all of this.
‫Now, well there's some problem here, but not really.
‫Now, okay, so we have this part here working.
‫Let me actually just copy, well, all of this.
‫And so then we can place the exact same thing
‫also on the BookingDetail.
‫So here, we already had this button here to check in.
‫And so let's also add one to check out.
‫So getting rid, of course, of the menu's part
‫because this is here just a regular button.
‫But then, of course, we need to import all of this here.
‫So just like this.
‫And let's see if this actually imported correctly.
‫And it looks like it did.
‫So let's just grab those values.
‫So checkout and isCheckingOut
‫from useCheckout like this.
‫Well, here, for some reason, we are not using,
‫ah, here, it needs to be checkout like this again.
‫And well, I think this should work now.
‫So let's go again to all our Checked in bookings.
‫This time, let's see the details
‫and there is our button to check out.
‫So let's click, and indeed,
‫now the status here has also been updated to checked out,
‫because with React Query,
‫as soon as the mutation has been successful,
‫we invalidated the query.
‫And so then this data was re fetched.
‫Nice, so we are almost done
‫with working here on these individual bookings.
‫All we have left to do is to add a feature
‫for also deleting a booking by adding a button down here.
‫But actually before we go do that, in the next lecture,
‫there is one very important bug that we need to fix.
‫So let me show you what I mean by that.
‫So let's come here to the Bookings table.
‫And then let's go here to the last page.
‫So we're at the last page.
‫And now, let's say that I want to filter by Unconfirmed.
‫So let's see what's gonna happen.
‫And what does happen is some kind of problem here.
‫So let's see what we have here.
‫And so here, indeed, an offset of 20 was requested,
‫but there are only 10 rows.
‫And so the problem is that we are here still
‫trying to request data for page number three.
‫Even though with the status of unconfirmed,
‫there are no three pages of data.
‫So basically what we need to do,
‫is whenever we set a new filter,
‫we also need to reset the page to one.
‫And so let's just quickly come here to our filter component
‫and do that right here.
‫So let's check if the page has actually been set.
‫So if searchParams.get page,
‫then let's do searchParam.set
‫the page to one again.
‫And so this will then solve this problem.
‫So let's just do a hard reload here.
‫Then coming back to some other page.
‫So again, page number three.
‫And then now, see how this actually changed back
‫to page number one?
‫And so now this works
‫because indeed we have less than even 10 results.
‫So we really only have this one page.
‫And so the pagination doesn't even show up.
‫So very important bug,
‫but this kind of things can always happen.
‫And so I detected it and now we fixed it.