A modern, full-stack shift management application built with ASP.NET Core and React TypeScript, designed for efficient staff scheduling and rotation management.
The Live Dashboard provides real-time insights into your shift schedule with:
- Stats Overview: Quick metrics for shifts this month, YTD totals, and unassigned shifts
- Notifications Panel: Stay updated with important alerts and announcements
- Recent & Upcoming Shifts: Side-by-side view of past and future shifts organized by week
- Shift Details: Click any shift to view comprehensive information and request swaps
The My Shifts page offers multiple view modes for managing your personal schedule:
- Monthly Calendar View: Navigate through months with week-based shift grouping
- Timeline View: Gantt-style weekly visualization for better time management
- Shift Actions: Quick access to view details, request swaps, or edit shifts
- Date Navigation: Jump to current month or browse past/future schedules
The My Requests page helps you track and manage approval requests:
- Monthly Organization: View requests organized by month with easy navigation
- Request Types: Shift swaps, schedule changes, coverage requests, and more
- Status Tracking: Monitor pending, approved, and rejected requests with color-coded badges
- Request Details: Comprehensive view of shift information, approval comments, and decision history
- New Requests: Submit new approval requests with pre-populated shift data
The Team Management interface provides role-based user administration:
- Role-Based Access: Team Leads manage their team, Admins manage all teams
- Accordion UI: Expandable team sections with collapse/expand all functionality
- User Creation: Add new team members with appropriate roles and team assignments
- Team Overview: View member counts, team leads, and assigned locations at a glance
- Role-based access control (Admin, Team Lead, Team Member)
- User authentication with JWT tokens
- Profile management with customizable settings
- Team Management interface for TeamLeads and Admins
- TeamLeads can manage only their team members
- Admins can manage all teams with multi-team view
- Accordion UI with expand/collapse all functionality
- Team/role assignment with full control
- Create and manage shifts with detailed scheduling
- Recurring shift patterns with flexible recurrence rules
- Team assignment with location-based organization
- Shift status tracking (Scheduled, In Progress, Completed, Cancelled)
- Notes and descriptions for detailed shift information
- All Shifts View: Compact 2-column layout for efficient browsing
- Weekly View: Calendar-style weekly shift visualization
- Monthly Calendar: Full month views with compact day cells
- Filter tabs: Quick access to different time periods
- Approval workflow system with shift-focused UI
- Shift swapping requests between team members
- Self-approval prevention for managers and team leads
- Coverage impact warnings for shift changes
- Recurring shift editing with scope options (This Occurrence, All Occurrences)
- Real-time updates and notifications
- Email notification system with customizable templates
- Responsive design for desktop and mobile
- Material-UI components for consistent design
- Corporate branding with professional color scheme
- Primary Navy (#1D1F48)
- Secondary Raspberry (#B21A53)
- Accent Core Green (#9bcd4e)
- Eggplant/Teal info color (#43C5B8)
- Optimized layouts for better space utilization
- Dark/light theme support
- Configurable color schemes with admin control
- Customizable title colors across all pages
- Dynamic theme-based gradients
- Real-time theme preview
- Persistent color settings
- Consistent UI formatting across all pages
- Standardized page headers with bold h4 titles
- Uniform spacing and padding
- Right-aligned action buttons
- Alternating row gradients using theme colors
- ASP.NET Core 9.0 Web API
- Entity Framework Core with SQLite database
- Clean Architecture with separate layers:
StaffRota.Core- Domain entities and interfacesStaffRota.Business- Business logic and services (ApprovalWorkflowService, EmailService)StaffRota.Data- Repositories with enhanced navigation propertiesStaffRota.Web- API controllers and web layer
- JWT Authentication for secure API access
- Approval workflow engine with self-approval prevention
- Email notification system with template-based messaging
- React 18 with TypeScript
- Material-UI (MUI) component library
- Date-fns for date manipulation
- Context API for state management
- Responsive design with CSS Grid and Flexbox
- SQLite for development and lightweight deployment
- Entity Framework migrations for schema management
- Seeded data for testing and development
- Node.js (v16+ recommended)
- .NET 9.0 SDK
- Git
git clone https://github.com/Kariko762/ShiftIQ.git
cd ShiftIQ# Navigate to the backend project
cd src/StaffRota.Web
# Restore NuGet packages
dotnet restore
# Run database migrations
dotnet ef database update
# Start the backend server
dotnet runThe API will be available at https://localhost:5001
Default Login Credentials:
- Username: Any user email from the database (e.g.,
test@admin.com,john.smith@hospital.com) - Password:
password123(all users)
# Navigate to the frontend project
cd frontend/staff-rota-ui
# Install npm dependencies
npm install
# Start the development server
npm startThe frontend will be available at http://localhost:3000
- Login with your credentials (admin account available in seeded data)
- Navigate using the sidebar menu
- Create shifts in Shift Management
- Assign staff to shifts
- View schedules in My Shifts with multiple view options
- Go to Shift Management
- Click Create Shift
- Fill in shift details (title, time, location, team)
- Set recurrence pattern if needed
- Assign team members
- Go to My Shifts
- Use tabs to switch between views:
- All Shifts: Complete list view
- Weekly View: Calendar-style weekly layout
- This/Next/Last Month: Monthly calendar views
- Request swaps or edit shifts as needed
- Go to Approval Dashboard
- For Managers/Team Leads:
- Pending Approvals: Review and approve/reject shift swap requests
- History: View previously processed requests
- My Requests: Track your own submitted requests
- For Team Members:
- Submit approval requests for shift swaps
- Track request status with real-time updates
- View decision comments from approvers
- Key Features:
- Shift details panel with comprehensive information
- Coverage impact warnings for uncovered shifts
- Self-approval prevention for managers
- Badge notifications for pending requests
- Go to User Management (Admin only)
- Create new users with appropriate roles
- Manage teams and locations
- Configure system settings
- Go to Team Management (TeamLead/Admin)
- For TeamLeads: Manage members of your assigned team
- For Admins: View and manage all teams
- Use expand/collapse all buttons for easy navigation
- Create users with team-specific or cross-team assignments
- Configure Color Schemes (Admin only)
- Customize brand colors including title color
- Preview changes before applying
- Reset to default theme anytime
- Connection strings in
appsettings.json - JWT settings for authentication
- CORS configuration for frontend communication
The application uses SQLite by default. To change to SQL Server:
- Update connection string in
appsettings.json - Change provider in
Program.cs - Run new migrations
A comprehensive test data script is available in database-scripts/reset_and_populate_db.sql:
- 6 fictional locations (hospitals, clinics, health centers)
- 13 teams with specialized departments
- 44 users including team leads and staff members
- 47 shifts (mix of recurring and one-time)
- Default password for all users:
password123
To populate the database:
cd src/StaffRota.Web
Get-Content ..\..\database-scripts\reset_and_populate_db.sql | sqlite3 StaffRotaDb.sqliteNote: This script preserves the test@admin.com account and removes all other existing data.
See database-scripts/README.md for full documentation.
ShiftIQ is fully responsive and optimized for:
- Desktop: Full-featured experience with 2-column layouts
- Tablet: Adaptive layouts with optimized spacing
- Mobile: Single-column layouts with touch-friendly interfaces
cd src/StaffRota.Tests
dotnet testcd frontend/staff-rota-ui
npm run build# Frontend production build
cd frontend/staff-rota-ui
npm run build
# Backend publish
cd src/StaffRota.Web
dotnet publish -c ReleaseDocker configuration available for containerized deployment.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- β
In-app notification system fully implemented
- Real-time notifications for approval decisions
- Notification badge with unread count
- Clickable notifications with action URLs
- Auto-navigation to request details from notifications
- β
Fixed notification database schema
- Removed conflicting foreign key constraints
- Proper handling of polymorphic RelatedEntityId
- Support for multiple entity types (Shifts, Approvals, etc.)
- β
Request creation notifications
- Team Leads receive notifications when requests submitted
- Admins notified of all pending approvals
- High-priority badges for approval-required notifications
- β
Compact form styling across all dialogs
- Shrank all Request Approval form fields
- Optimized Shift Management Edit dialog
- Consistent size="small" and reduced font sizes (0.85rem)
- Better space utilization with reduced margins
- β
Location assignment fixes
- Auto-populate Location field when creating shifts from approval requests
- Proper Team.Location navigation property handling
- Fallback loading from repository when nav properties not loaded
- β
Corporate color scheme implementation
- Updated theme with official brand colors (Navy, Raspberry, Core Green)
- Dynamic theme-based gradients in LiveDashboard
- Alternating row backgrounds using primary/secondary colors
- Teal/Eggplant info color for better visibility
- β
Comprehensive test data population
- 6 fictional healthcare locations
- 13 specialized teams with managers
- 44 users (13 team leads + 30 staff members + 1 admin)
- 47 shifts spanning November-December 2025
- Mix of recurring and one-time shifts
- Realistic healthcare scenarios and departments
- β
Database reset script (
reset_and_populate_db.sql)- Preserves admin account
- Clears all existing test data
- Populates with comprehensive fictional dataset
- Fixed user role enum values (TeamMember=1, TeamLead=2, TeamAdmin=3)
- β
Unified Team Management interface for TeamLeads and Admins
- TeamLeads can manage only their team members
- Admins can view and manage all teams
- Accordion UI with expand/collapse all functionality
- Role-based filtering on backend endpoint
/api/users/my-team-members - Team and role selectors for Admin user creation
- TeamLeads auto-assign users to their team as TeamMember
- β
Configurable Title Color system
- Added
titleColorto theme BrandColors interface - All page titles dynamically reference theme configuration
- Admin-configurable via Settings β Color Schemes
- Real-time preview and persistent storage
- Added
- β
Complete UI consistency across all pages
- Standardized h4 bold titles with configurable color
- Consistent body1 subtitles with secondary text color
- Uniform padding (p: 3) on all pages
- Right-aligned action buttons with consistent spacing
- Proper header spacing (mb: 4) throughout
- β Complete approval workflow system with shift-focused UI
- β Self-approval prevention for TeamLeads and TeamAdmins
- β Two-column layout with shift details panel (65%/35% split)
- β Enhanced backend repositories with comprehensive navigation properties
- β Coverage impact warnings for shift swap requests
- β Decision comments display across all approval views
- β Email notification system with customizable templates
- β Badge notifications with perfect positioning
- β Top-aligned layout with optimized vertical spacing
- β Consistent compact card styling across all views
- β Redesigned All Shifts view with compact 2-column layout
- β Added monthly calendar views with optimized spacing
- β Improved space utilization throughout the interface
- β Enhanced responsive design for better mobile experience
- β Complete shift management system
- β Recurring shift patterns
- β User authentication and authorization
- β Team-based organization
- Weekly view optimization (2-week display) - planned for future release
- Minor ESLint warnings in development build
This project is licensed under the MIT License - see the LICENSE file for details.
- Development Team - Initial work and ongoing maintenance
- Material-UI team for the excellent component library
- Microsoft for .NET Core and Entity Framework
- React team for the robust frontend framework
ShiftIQ - Making staff scheduling simple and efficient! π―