# Time Slot

**File Name:** TimeSlot.tsx

**Example:** Time Slot Rows

**Description:** 
- Time Slot element is used in the following pages:
    - Daily Roster page
    - Select Time Slot page
    - User Profile page
    - Create Schedule page
    - Edit Schedules page

- The details of each Time Slot element changes depending on the page.

- In the Daily Roster page, the Time Slot element will contain the following information:
    - Name
    - Unit #
    - Vehicle #
    - Radio #
    - Hours
    - Skills
    - Notes

- In the Select Time Slot page, the Time Slot element will contain the following information:
    - Days
    - Hours
    - Overtime
    - Asssigned To
    - Notes

- In the User Profile page, the Time Slot element will contain the following information: 
    - Period
    - Hours
    - Days

- In the Create Schedule page, the Time Slot element will contain the following information: 
    - Hours
    - Days
    - Notes

- In the Edit Schedule page, the Time Slot element will contain the following information: 
    - Name
    - Unit #
    - Vehicle #
    - Radio #
    - Hours
    - Days
    - Notes

**I/O:** 
- For admins and  users in the Daily Roster page, clicking a Time Slot element will bring up the Time Slot Details page.
- For admins and users in the Select Time Slot page, clicking a Time Slot element will bring up the Confirm Time Slot page.
- For users in the User Profile page, clicking the Time Slot element will bring up the Time Slot Details page.
- For admins in the Create Schedule page and Edit Schedule page, clicking a Time Slot element will bring up the Edit Time Slot page.

**Daily Roster Page**

<img src="../../images/components/TimeSlot-DailyRoster.png" width="500"/>

**Select Time Slot Page**

<img src="../../images/components/TimeSlot-SelectTimeSlot.png" width="500"/>

**User Profile Page**

<img src="../../images/components/TimeSlot-UserProfile.png" width="500"/>

**Create Schedule Page**

<img src="../../images/components/TimeSlot-CreateSchedule.png" width="500"/>

**Edit Schedule Page**

<img src="../../images/components/TimeSlot-EditSchedule.png" width="500"/>