Staff Dashboard

The Staff Dashboard is your central hub for daily work activities, providing quick access to time clock, schedule overview, and important notifications.

---

Overview

Dashboard Purpose

The Staff Dashboard provides:

1. Time Clock - Clock in/out for your shifts
2. Today's Schedule - View your shifts for today
3. Quick Stats - Hours worked this week/month
4. Notifications - Important updates and alerts
5. Quick Actions - Common tasks at your fingertips

Accessing the Dashboard

1. Log in to Shyfts with your credentials
2. The Staff Dashboard loads as your default home page
3. Use the sidebar to navigate to other sections

---

Time Clock Widget

Clock In

To start your shift:

1. Click Clock In on the time clock widget
2. Confirm the current time is correct
3. Your shift timer begins automatically

// Time entry created on clock in
{
  staff_id: "your-uuid",
  clock_in_time: "2025-01-14T09:00:00Z",
  status: "draft"
}

Clock Out

To end your shift:

1. Click Clock Out when your shift ends
2. Review your total hours for the day
3. Add any break time if applicable
4. Confirm to save your time entry

Break Recording

Breaks can be recorded during your shift:

1. Click Start Break when taking a break
2. Click End Break when returning
3. Break duration is automatically calculated

---

Today's Schedule

Viewing Your Shifts

The dashboard displays your shifts for today:

Element	Description
Shift Time	Start and end times (24-hour format)
Room	Assigned room or location
Shift Type	Type of shift (Standard, Night, etc.)
Status	Confirmed, Pending, or Cancelled

Schedule Card

// Shift display structure
{
  start_time: "09:00",
  end_time: "17:30",
  room: "Consultation Room 1",
  shift_type: "Standard",
  status: "confirmed"
}

No Shifts Today

If you have no shifts scheduled:

• The schedule section shows "No shifts scheduled for today"
• Check your weekly schedule for upcoming shifts
• Contact your manager if you believe this is incorrect

---

Quick Statistics

Weekly Summary

Metric	Description
Hours This Week	Total hours worked Monday-Sunday
Scheduled Hours	Hours scheduled for the week
Overtime	Hours above weekly threshold

Monthly Overview

Metric	Description
Hours This Month	Total hours worked this month
Leave Days	Leave days taken this month
Pending Requests	Unapproved time or leave requests

Statistics Calculation

// Weekly hours calculation
const weeklyStats = {
  total_hours: entries.reduce((sum, e) => sum + e.total_hours, 0),
  regular_hours: Math.min(total_hours, 40),
  overtime_hours: Math.max(total_hours - 40, 0)
}

---

Notifications

Notification Types

Type	Icon	Description
Schedule Update	Calendar	Shift changes or additions
Leave Response	Check/X	Leave request approved/rejected
Swap Request	Swap	Colleague wants to swap shifts
Reminder	Clock	Upcoming shift or deadline
System	Info	General announcements

Managing Notifications

• Click a notification to view details
• Mark as Read to dismiss
• Mark All Read to clear all notifications
• Unread count shown in sidebar badge

Notification Settings

Control which notifications you receive:

1. Go to Profile → Preferences
2. Toggle notification types on/off
3. Set email notification preferences

---

Quick Actions

Available Actions

Action	Description
Clock In/Out	Start or end your shift
Request Leave	Submit a new leave request
View Schedule	Open full weekly schedule
Submit Timesheet	Submit hours for approval
View Timesheet	Check your timesheet entries

Action Shortcuts

Quick actions are available from:

• Dashboard cards (click to expand)
• Sidebar navigation
• Keyboard shortcuts (where supported)

---

Dashboard Widgets

Time Clock Widget

Displays:

• Current clock status (In/Out)
• Current time (UK timezone)
• Today's accumulated hours
• Clock in/out button

Schedule Widget

Shows:

• Today's shifts (if any)
• Next upcoming shift
• Quick link to full schedule

Leave Balance Widget

Displays:

• Annual leave remaining
• Sick leave balance
• Quick request button

Recent Activity Widget

Shows:

• Recent timesheet entries
• Recent leave requests
• Status of pending items

---

Mobile Dashboard

Responsive Layout

On mobile devices:

• Widgets stack vertically
• Time clock is prominent at top
• Swipe to navigate between sections
• Touch-friendly 44px+ buttons

Mobile-Specific Features

• GPS confirmation for clock in (if enabled)
• Push notifications for schedule changes
• Simplified navigation menu

---

Dashboard API

Fetch Dashboard Data

Endpoint: GET /api/staff/stats

// Dashboard statistics response
{
  success: true,
  data: {
    today: {
      shifts: [...],
      hours_worked: 4.5,
      is_clocked_in: true
    },
    this_week: {
      total_hours: 24.5,
      scheduled_hours: 40,
      overtime_hours: 0
    },
    notifications: {
      unread_count: 3,
      recent: [...]
    },
    leave_balance: {
      annual_remaining: 18,
      sick_remaining: 5
    }
  }
}

---

Troubleshooting

Common Issues

Issue	Cause	Solution
Cannot clock in	Already clocked in	Check current status
Time incorrect	Timezone issue	Verify UK timezone setting
No shifts showing	None scheduled	Check full schedule
Stats not updating	Cache delay	Refresh the page

Error Messages

Error	Meaning	Action
"Already clocked in"	Active time entry exists	Clock out first
"No scheduled shift"	No shift for current time	Contact manager
"Session expired"	Login timeout	Log in again

---

Best Practices

Daily Workflow

1. Start of Day

   • Check dashboard for today's schedule
   • Clock in at shift start time
   • Review any notifications

2. During Shift

   • Record breaks accurately
   • Check for schedule updates
   • Respond to swap requests

3. End of Day

   • Clock out when shift ends
   • Review hours worked
   • Submit timesheet if end of period

Time Accuracy

• Clock in within 5 minutes of shift start
• Clock out when actually leaving
• Record all breaks honestly
• Report any time discrepancies promptly

---

Related Documentation

• Clock In/Out - Detailed time clock guide
• Viewing Shifts - Full schedule access
• Requesting Leave - Leave request process
• Viewing Timesheet - Timesheet review

---

Source Files:

• src/app/api/staff/stats/route.ts - Dashboard statistics API
• src/app/api/staff/timesheet/route.ts - Time entries API
• src/app/api/staff/shifts/route.ts - Staff shifts API
• src/components/staff/StaffScheduleCalendar.tsx - Schedule component