Skip to main content

Common Tasks

Quick reference guide for the most frequently performed actions in Shyfts, organised by user role.

Quick Reference by Role​

TaskStaffCompany ManagerSystem Admin
Clock in/out✅✅❌
View schedule✅✅❌
Request leave✅✅❌
Submit timesheet✅✅❌
Create shifts❌✅❌
Approve leave❌✅❌
Add staff❌✅❌
Create company❌❌✅
Manage users❌❌✅

Staff Common Tasks​

Clocking In​

Location: Staff Portal → My Portal or Timesheet page

  1. Navigate to My Portal or Timesheet
  2. Click the Clock In button
  3. Your session begins and timer starts
// Source: src/components/time/TimeClock.tsx:26-35
export function TimeClock({ staffId, companyId, shiftId }: TimeClockProps) {
  const [currentEntry, setCurrentEntry] = useState<TimeEntry | null>(null)
  const [isOnBreak, setIsOnBreak] = useState(false)
  const [sessionTimer, setSessionTimer] = useState<string>('00:00:00')
  const [breakTimer, setBreakTimer] = useState<string>('00:00')
}
Timer Display

The time clock shows:

  • Session Timer: Total time since clock-in (HH:MM:SS)
  • Break Timer: Current break duration
  • Break Count: Number of breaks taken

Taking a Break​

Location: Staff Portal → Timesheet (while clocked in)

  1. While clocked in, click Start Break
  2. The break timer begins counting
  3. Click End Break to resume work
  4. Breaks are automatically tracked and deducted from working hours

Clocking Out​

Location: Staff Portal → Timesheet (while clocked in)

  1. Ensure all breaks have ended
  2. Click Clock Out
  3. Your time entry is saved automatically

Viewing Your Schedule​

Location: Staff Portal → My Schedule

  1. Navigate to My Schedule from the navigation
  2. View your upcoming shifts by date
  3. Click a shift for full details including:
    • Room/location assignment
    • Start and end times
    • Shift type and notes

Requesting Leave​

Location: Staff Portal → Leave Requests

  1. Navigate to Leave Requests
  2. Click Request Leave or New Request
  3. Fill in the form:
    • Leave Type: Select from available types (Annual, Sick, etc.)
    • Start Date: First day of leave
    • End Date: Last day of leave
    • Notes: Optional reason or details
  4. Click Submit Request
  5. Your manager will receive a notification

Submitting Your Timesheet​

Location: Staff Portal → Timesheet

  1. Navigate to Timesheet
  2. Review your time entries for the current period
  3. Verify all clock-in/out times are correct
  4. Click Submit Timesheet
  5. Your manager will review and approve

Viewing Leave Balance​

Location: Staff Portal → Leave Requests

Your leave balance shows:

  • Annual Leave: Days remaining this year
  • Sick Leave: Days taken and remaining
  • Other Leave Types: As configured by your company

Company Manager Common Tasks​

Creating a Shift​

Location: Dashboard → Calendar

  1. Navigate to Calendar
  2. Click on an empty time slot, or click + Add Shift
  3. Fill in the shift details:
// Source: src/components/calendar/ShiftCreateModal.tsx:45-52
const [formData, setFormData] = useState({
  staff_id: '',
  room_id: normalizedDefaultRoom,
  start_time: defaultTime || '09:00',
  end_time: '17:00',
  shift_type: 'REGULAR' as ShiftType,
  notes: ''
})
FieldDescription
Staff MemberSelect from active staff
RoomAssign to a room/location
DateShift date
Start TimeShift start (24-hour format)
End TimeShift end (24-hour format)
Shift TypeRegular, Overtime, Training, etc.
NotesOptional notes
  1. Click Create Shift
Conflict Detection

If a conflict is detected (double-booking, staff on leave), you'll see a warning. You can:

  • Choose a different staff member
  • Adjust the time
  • Proceed anyway (with warning)

Editing a Shift​

Location: Dashboard → Calendar

  1. Click on an existing shift in the calendar
  2. The shift details modal opens
  3. Modify the required fields
  4. Click Update Shift

Deleting a Shift​

Location: Dashboard → Calendar

  1. Click on the shift to open details
  2. Click the Delete (trash) icon
  3. Confirm deletion in the confirmation dialog

Dragging Shifts​

Location: Dashboard → Calendar (Room Grid View)

  1. Click and hold a shift block
  2. Drag to a new time slot or room row
  3. Release to move the shift
  4. The shift updates automatically

Adding a New Staff Member​

Location: Dashboard → Staff

  1. Navigate to Staff from navigation
  2. Click Add Staff or + New Staff Member
  3. Fill in the 6-tab form:
    • Personal: Name, email, phone
    • Employment: Role, employment type, start date
    • Contact: Address details
    • Documents: Upload required documents
    • Skills: Add skills and certifications
    • Preferences: Working preferences
  4. Click Save Staff Member

Approving Leave Requests​

Location: Dashboard → Leave or via Notifications

  1. Navigate to leave management or click the notification
  2. Review the request details:
    • Staff member name
    • Leave type and dates
    • Reason/notes
  3. Click Approve or Reject
  4. If rejecting, provide a reason
  5. The staff member is notified automatically

Viewing Staff Timesheets​

Location: Dashboard → Staff → [Staff Member] → Timesheet

  1. Navigate to Staff
  2. Click on a staff member's name
  3. Select the Timesheet tab
  4. Review entries and approve/reject as needed

Running Reports​

Location: Dashboard → Analytics

  1. Navigate to Analytics
  2. Select the report type:
    • Staff Performance
    • Scheduling Analytics
    • Attendance Summary
    • Hours Tracking
    • Leave Analysis
    • Skills Matrix
    • Cost Analysis
    • Compliance Report
  3. Set the date range
  4. Apply filters if needed
  5. Click Generate Report
  6. Export to PDF, Excel, CSV, or JSON

System Admin Common Tasks​

Creating a New Company​

Location: Admin Dashboard → Companies

  1. Navigate to Companies
  2. Click Create Company
  3. Complete the wizard:
    • Step 1: Company details (name, industry)
    • Step 2: Manager account (email, name)
    • Step 3: Room configuration
    • Step 4: Review and confirm
  4. The Company Manager receives login credentials

Managing Companies​

Location: Admin Dashboard → Companies

ActionHow To
View DetailsClick company name
Edit CompanyClick Edit icon
Toggle StatusClick Active/Inactive toggle
Delete CompanyClick Delete (with confirmation)

Viewing Platform Users​

Location: Admin Dashboard → Users

  1. Navigate to Users
  2. View all users across all companies
  3. Filter by:
    • Role (Staff, Manager, Admin)
    • Company
    • Status (Active/Inactive)

Viewing Platform Statistics​

Location: Admin Dashboard (Home)

The admin dashboard displays:

  • Total companies
  • Total users across platform
  • Active users right now
  • Pending items requiring attention

Common Actions (All Users)​

Changing Your Password​

Location: Profile → Security or Settings

  1. Click your user icon in the navigation
  2. Select Profile or Settings
  3. Navigate to Security section
  4. Enter current password
  5. Enter new password (and confirm)
  6. Click Update Password

Updating Your Profile​

Location: User Menu → Profile

  1. Click your user icon in the navigation
  2. Select Profile
  3. Update your details:
    • First name and last name
    • Phone number
    • Notification preferences
  4. Click Save Changes

Viewing Notifications​

Location: Navigation Bar → Notification Bell

  1. Click the notification bell icon
  2. View list of notifications
  3. Click a notification to view details or take action
  4. Notifications include:
    • Shift assignments
    • Leave request updates
    • Timesheet approvals
    • Swap requests

Using the Mobile Menu​

Location: Navigation Bar (on mobile devices)

  1. Tap the hamburger menu (☰)
  2. The slide-out menu appears
  3. Tap a navigation item
  4. Swipe left or tap outside to close

Refreshing Your Session​

Location: Navigation Bar → Refresh Icon

If you experience permission issues or stale data:

  1. Click the refresh (↻) icon in the navigation
  2. Wait for "Session refreshed" confirmation
  3. Your access tokens are renewed

Logging Out​

Location: User Menu → Logout

  1. Click your user icon
  2. Select Logout
  3. Confirm in the modal
  4. You are redirected to the login page

Task Completion Times​

TaskTypical Duration
Clock in/out< 5 seconds
Create a shift30-60 seconds
Submit leave request1-2 minutes
Add new staff member5-10 minutes
Generate report5-30 seconds
Create company3-5 minutes

Troubleshooting Common Issues​

"Session Expired" Message​

  1. Click the refresh icon (↻) in navigation
  2. If issue persists, log out and log back in

"Permission Denied" Error​

  1. Verify you're logged in with the correct account
  2. Check you have the required role for the action
  3. Contact your administrator if issue persists

Shift Not Saving​

  1. Check all required fields are filled
  2. Verify the time range is valid (end after start)
  3. Check for conflict warnings
  4. Ensure you have stable internet connection

Clock In Button Not Appearing​

  1. Verify you have a shift scheduled for today
  2. Check if clock-in is required for your role
  3. Contact your manager if the button should appear

Source Files:

  • src/components/time/TimeClock.tsx - Time clock widget
  • src/components/calendar/ShiftCreateModal.tsx - Shift creation
  • src/components/leave/LeaveManagement.tsx - Leave management
  • src/config/navigationConfig.ts - Role-based navigation