Work Shift Planning System

A work shift scheduling application with intelligent staff assignment, rest period validation, and workload optimization.

Overview

The application now runs entirely in the browser with all schedule calculation logic implemented in TypeScript/Angular. No backend server is required!

Requirements

You need to have

• Node.js 18.19+ or 20.9+
• npm 9+

Quick Start

You can start the app by installing all NPM packages once.

npm install

Then, any time you want to run the app and debug it locally, run

npm start

Then open your browser to: http://localhost:4200.

Alternatively, you can only use ng to build and serve statically (Production)

npm install
npm run build

Then serve the wwwroot directory with any static web server:

Using Python:

cd ../wwwroot
python -m http.server 8080

Using Node.js http-server:

npm install -g http-server
cd ../wwwroot
http-server -p 8080

Using live-server:

npm install -g live-server
cd ../wwwroot
live-server --port=8080

Then open: http://localhost:8080.

Architecture

The app is built using only Angular and all business logic is in the front-end files.

Components

1. HolidayService (holiday.service.ts)

   • Determines workdays and holidays
   • Customizable holiday calendar

2. ScheduleCalculatorService (schedule-calculator.service.ts)

   • Core scheduling algorithm
   • Staff assignment logic
   • Rest period validation
   • Converted from C# to TypeScript

3. ScheduleService (schedule.service.ts)

   • Wrapper service
   • Now calls local calculator instead of API

Data Flow

Input Component
    V
ScheduleService.calculateSchedule()
    V
ScheduleCalculatorService.calculateSchedule()
    V
HolidayService.isWorkday()
    V
ScheduleResult (in memory)
    V
Results Component

Features

All features work identically to the backend version:

• 24-hour shift coverage scheduling
• Regular workday assignments
• Rest period enforcement
• Monthly extended hours limits
• Holiday and weekend handling
• Workload distribution optimization
• Violation detection and reporting

Configuration

Customizing Holidays

Edit /src/app/services/holiday.service.ts:

static getHolidays(year: number): Date[] {
  const holidays: Date[] = [
    new Date(year, 0, 1),   // January 1
    new Date(year, 11, 25), // December 25
    // Add your holidays here
  ];
  return holidays;
}

Build Configuration

The Angular app is configured in angular.json:

• Output directory: ../wwwroot
• No server-side rendering
• Optimized for production builds

Deployment Options

GitHub Pages

To publish on GitHub Pages, execute these commands:

# Install angular-cli-ghpages, if you do not have it yet
npm i -g angular-cli-ghpages

# Build the app
ng build  --base-href https://miroj.github.io/work-shift-planning/

# Deploy wwwroot folder to GitHub Pages
npx angular-cli-ghpages --dir=dist/work-shift-planning/browser

Netlify / Vercel

1. Point to /wwwroot directory
2. No build command needed (pre-built)
3. Serve as SPA with fallback to index.html

Azure Static Web Apps / AWS S3

Upload the wwwroot folder contents with proper SPA routing configuration.

Migrating from Backend Version

The frontend-only version is 100% compatible with the backend version. The same TypeScript interfaces are used, and results are identical.

What Changed:

• Removed: HTTP calls to /api/schedule/calculate
• Added: Local ScheduleCalculatorService
• Added: HolidayService for date calculations
  • Same: All TypeScript models and interfaces
  • Same: UI components and styling

Troubleshooting

Build Errors

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
npm run build

License

This project is licensed under the MIT License - see the LICENSE file for details.