On the booking details page of SS, set up a card to display the student's booking ID, booking status and portal showing both students' booking details:



 In order to explain the logic clearly, for tenancy length: 

  • Student A’s=student B’s: name student A’s booking as Original Booking, student B’s booking as Replacement Booking
  • Student A & B have same start date, but student B early check-out: name student A’s booking as Original Booking, student B’s booking as Replacement Booking
  • Student A & B have same end date, but student B late check-in: name student A’s first booking as Original Booking, student A’s second booking as Engaged Booking, student B’s booking as Replacement Booking


  •  Set up a new card on the booking details page of the SS
    • Set up a tag on the right of the title to display the status of the booking
      • When we just finish the takeover and no student accepts the takeover request, the status is pending
      • When we have finished the takeover for a while, and only one student accepts the takeover request, the status is pending
      • When we have finished the takeover for a while, and both students accept the takeover request, the status is confirmed
    • Add a portal called” View Details” with a right arrow
    • When staff log in to SS through Student A, the Replacement Booking ID will be shown on this card and vice versa
      • The Engaged ID is always not displayed on this light yellow card, if staff is in the Engaged booking details page of the SS, the Replacement Booking ID will be displayed on this light yellow card


When we hover the icon of the yellow card, we could see the modal below coming up

  • Student A’s tenancy length=student B’s tenancy length/Student A & B have the same start date, but student B early check-out

  • Student A & B have same end date, but student B late check-in


Student A’s tenancy length=student B’s tenancy length/Student A & B have the same start date, but student B early check-out

Log in through Student A, when the ”View Details” button on the yellow card is clicked, student A’s and the replacement student’s (=studnet B) booking details will be displayed in the coming up modal

  • Log in through student A, in this modal, the label for the original booking details should be” Current”
  • For replacement booking details, the label should be “Replacement”
  • Add a “Replacement Booking” button below the replacement booking details
    • When this button is clicked, it will go to the booking details page of the SS to display the replacement booking details

  • Log in through student B
    • The label for the original booking details should be “Original”
    • The label for the replacement booking details should be “Current”
    • Add an “Original Booking” button below the original booking details
      • When this button is clicked, it will go to the booking details page of the SS to display the original booking details


Student A & B have same end date, but student B late check-in

Log in through Student A, when the ”View Details” button on the yellow card is clicked, student A’s engaged booking details and the replacement student’s (=studnet B) booking details will be displayed in the coming up modal

  • Log in through student A
    • The label for the engaged booking details should be “ Engaged”
    • The label for the replacement booking details should be “Replacement”
    • Add “Engaged Booking” and “Replacement Booking” buttons below the engaged booking details and replacement booking details respectively
      • No matter which button is clicked, it will go to the booking details page of the SS to display the clicked booking’s booking details

  • Log in through student B
    • The label for the engaged booking details should be “ Engaged”
    • The label for the replacement booking details should be “Current”
    • Add an “Engaged Booking” button below the engaged booking details
      • When this button is clicked, it will go to the booking details page of the SS to display the engaged booking details
    • Add a left arrow on the left of the engaged booking details
      • When this arrow is clicked, the modal will display the original booking details( =student A’s first booking details). See the modal below


  • The label for the original booking details should be “Original”
  • Add an “Original Booking” button below the original booking details
    • When this button is clicked, it will go to the booking details page of the SS to display the original booking details
  • Add a right arrow on the right of the original booking details
    • When this arrow is clicked, the modal will go back to display the engaged and current booking details

If the staff is on the engaged booking details page of the SS, when s/he click the “View Details” button of yellow card, this modal above will be shown

  • The label for the engaged booking details should be “ Current”
  • The label for the replacement booking details should be “Replacement”
  • Add a “Replacement Booking” button below the replacement booking details
    • When this button is clicked, it will go to the booking details page of the SS to display the replacement booking details
  • Add a left arrow on the left of the current booking details
    • When this arrow is clicked, the modal will go to display the original booking details