Sarah Chen
Sarah Chen
Administrator

Executive Summary

Cross-platform workforce management for SMEs without directory services. Local-only authentication, single codebase deployment, self-hosted infrastructure.

Employees Managed
15
Scalable to 500+
Platforms
3
Web · iOS · Android
Codebases
1
React Native + Web
AD/AAD Dependency
0
Self-contained auth

System Overview

WorkForce Pro is a cross-platform workforce management solution for SMEs that operate without directory services. Authentication is handled entirely in-app via email, phone number, or trusted-device token — no dependency on Active Directory, Azure AD, or domain-joined machines.

Five core capabilities: employee scheduling, time tracking, task management, organisation chart, and integrated leave & roster handling. A single React Native codebase compiles to iOS, Android, and web.

Technology Decisions

React Native + Expo
Single codebase to iOS, Android, Web. Reduces maintenance overhead.
Node.js + Express + TypeScript
RESTful API with compile-time type safety. Runs on Node 20+.
PostgreSQL (or SQLite for <50 staff)
Relational integrity for hierarchical employee data. No licensing cost.
JWT + bcrypt + Device Tokens
Password hashing (cost 12), stateless JWT sessions, optional device binding.
Three-Tier Role System
Admin, Manager, Employee — plain-English permission model.

Technology Stack

Deliverables

High-level architecture diagram (backend, database, auth flow)
Clickable prototype demonstrating full user journey
Wireframes for both web and mobile interfaces
Data model covering employees, shifts, tasks, leave, hierarchy
Feature backlog with prioritised milestones
Step-by-step deployment guide
Role & permission matrix for non-technical staff
No AD/AAD/domain dependency — verified
Step-by-step deployment guide
Role & permission matrix for non-technical staff
No AD/AAD/domain dependency — verified

System Architecture

Three-tier architecture with a shared API backend, single-codebase frontend, and self-hosted database. No external identity providers.

Architecture Diagram

Client layer, API layer, data layer

Web App
Chrome / Edge
Windows 10+
iOS App
iPhone / iPad
iOS 15+
Android App
Phone / Tablet
Android 8+
HTTPS / WSS (TLS 1.3)
Nginx
Reverse Proxy
TLS Termination
Auth Service
JWT Issue/Verify
bcrypt + Device Tokens
Core API
Express + TypeScript
REST / WebSocket
Notification
Push / Email
Background Jobs
Prisma ORM
PostgreSQL
Primary Database
Relational Integrity
SQLite
Offline Cache
Small Deployments
Redis
Session Cache
Job Queue
File Storage
Local / S3
Avatars, Documents

API Design

RESTful endpoints with versioning

# Authentication POST /api/v1/auth/register # Sign up (email/phone) POST /api/v1/auth/login # Sign in POST /api/v1/auth/refresh # Refresh JWT POST /api/v1/auth/device # Register trusted device # Employees GET /api/v1/employees # List (paginated) POST /api/v1/employees # Create (admin) PUT /api/v1/employees/:id # Update # Shifts & Roster GET /api/v1/shifts # By week/month POST /api/v1/shifts # Assign shift POST /api/v1/shifts/publish # Publish roster # Time Tracking POST /api/v1/timesheet/clock-in POST /api/v1/timesheet/clock-out # Tasks GET /api/v1/tasks # By assignee/status PUT /api/v1/tasks/:id # Update status # Leave POST /api/v1/leave # Submit request PUT /api/v1/leave/:id/approve # Approve # Org Chart GET /api/v1/org/tree # Full hierarchy

Architectural Principles

1. Single Codebase, Three Targets

React Native with Expo compiles to native iOS, native Android, and web. One team, one codebase, one set of features.

2. Stateful Auth, Stateless API

JWT access tokens (15-min TTL) + refresh tokens (7-day TTL, stored in Redis). Device tokens allow trusted-device login.

3. Offline-First Mobile

SQLite local cache on mobile devices. Clock-in/out works offline; data syncs when connectivity returns.

4. Horizontal Scalability

Stateless API containers behind Nginx. Redis for shared session state. Docker Compose for single-server deployment.

5. Self-Hosted, No Vendor Lock-in

Entire stack runs on a single Windows or Linux server. No cloud subscription required. All data stays on-premises.

Request Flow — Clock In/Out Example

# 1. Employee taps "Clock In" on mobile app POST /api/v1/timesheet/clock-in Headers: { Authorization: "Bearer eyJhbG..." } Body: { employeeId: 4, timestamp: "2026-08-20T06:00:12Z", device: "iPhone-AB12" } # 2. Auth middleware verifies JWT -> JWT verified, userId=4, role="employee" # 3. Permission check -> Yes (self-service) or Admin/Manager override # 4. Core API writes to PostgreSQL via Prisma INSERT INTO time_entries (employee_id, clock_in, device_id) VALUES (4, '2026-08-20T06:00:12Z', 'iPhone-AB12') # 5. WebSocket push to admin dashboard WS -> { event: "clock_in", employeeId: 4, name: "David Kim" } # 6. Response to client 200 OK { success: true, message: "Clocked in at 06:00" }

Authentication & Security

Application-native authentication — email, phone, or trusted-device. No Active Directory, no Azure AD, no SSO required.

Sign-up & Sign-in Flow

Complete authentication journey — from first sign-up to authenticated session

1
Register
Email or phone
2
Verify
OTP via SMS/email
3
Set Password
bcrypt hash stored
4
Admin Approves
Role assigned
5
JWT Issued
Access + Refresh
6
Device Trust
Optional biometric

Email-Based Authentication

The primary sign-up method. User enters their email address and a password. The system sends a 6-digit verification code to confirm ownership.

Password Security

Passwords are hashed with bcrypt (cost factor 12) — never stored in plain text. Minimum 8 characters, enforced by the API.

Phone-Based Authentication

For staff without email access (e.g., warehouse workers). Phone number + SMS OTP verification. Integrates with any SMS gateway (Twilio, Vonage, or local provider).

Works Offline Too

Trusted devices can be pre-registered by an admin, allowing clock-in/out without re-authentication each shift.

Device-Based Authentication

For shared or dedicated devices (e.g., wall-mounted kiosks, tablets). Admin registers a device with a unique token. The device authenticates automatically on launch.

Security Safeguard

Device tokens are revocable by admin at any time. Lost device = instant revoke, no data exposure.

Security Measures

bcrypt password hashing (cost 12)
JWT access tokens (15-min TTL)
Refresh tokens (7-day, Redis-backed)
Rate limiting on auth endpoints
Account lockout after 5 failed attempts
Optional 2FA via TOTP
TLS 1.3 for all transport
CORS allowlist (no wildcard)
SQL injection protection (Prisma)
Audit log for all admin actions

Role & Permission Matrix

Three roles — plain English, no technical jargon. Administrators can customise permissions per role.

CapabilityAdminManagerEmployee
View own schedule
Clock in / out
View own timesheet
Submit leave request
View team scheduleTeam×
Assign shiftsTeam×
Approve / reject leaveTeam×
Create / assign tasksTeam×
View org chart
Add / edit employees××
Manage roles & permissions××
Configure system settings××
View reports & analyticsTeamSelf
Export data (CSV/PDF)Team×
= Full accessTeam = Own team only× = No access

Prototype: Login / Sign-up

Application-native authentication screen — choose email, phone, or device-based sign-in.

Prototype: Admin Dashboard

Real-time overview — staff on duty, shift coverage, pending approvals, and task progress.

Currently On Duty
12
2 more than yesterday
Shifts This Week
56
96% coverage
Open Tasks
10
3 completed this week
Pending Leave Requests
4
Needs attention

Weekly Attendance Rate

Percentage of scheduled staff who clocked in on time

WeekdaysWeekends

Task Distribution

Tasks by status

>
13
Total Tasks
To Do 3
In Progress 4
In Review 2
Done 4

Recent Activity

David Kim clocked in
Morning shift · 06:02 AM · Zone B
2m ago
Priya Sharma requested leave
Medical leave · Aug 23-24 · 2 days
15m ago
Safety inspection marked complete
By Mei Ling Tan · Warehouse zone
1h ago
Shift swapped: Tom to David
Saturday morning shift · Approved by James
3h ago

Pending Approvals

PS
Priya Sharma
Medical Leave · Aug 23-24
DK
David Kim
Annual Leave · Sep 2-6
LM
Lucas Muller
Compassionate · Aug 25-26

Prototype: Scheduling & Roster

Weekly roster grid — click any shift badge to cycle through Morning, Evening, Night, and Off.

Morning Shift
06:00 - 14:00
8 staff
Evening Shift
14:00 - 22:00
6 staff
Night Shift
22:00 - 06:00
0 staff
Coverage Rate
This week
96% covered

Interactive Prototype

Click any shift badge in the roster grid above to cycle through shift types. This demonstrates the drag-and-drop roster editing capability.

Prototype: Time Tracking

Digital clock-in/out with live timer, timesheet view, and exportable reports.

Live Clock

Tap to clock in or out

--:--:--
Loading...
Today's hours:0h 0m
This week:32h 15m
Overtime:2h 15m

Today's Clock-ins

Live staff activity

DKDavid Kim06:02 AM2h 58mActive
JOJames Okafor06:00 AM3h 00mActive
MLMei Ling Tan06:15 AM2h 45mActive
ARAisha Rahman07:30 AM1h 30mActive
PSPriya SharmaScheduled 14:00--Upcoming

Weekly Timesheet

All employees · Aug 18-24, 2026

EmployeeMonTueWedThuFriSatSunTotal
Sarah Chen8h 00m8h 05m7h 55m8h 00m8h 10m----40h 10m
James Okafor8h 02m8h 00m7h 58m8h 01m8h 00m----40h 01m
David Kim8h 00m7h 45m8h 15m7h 50m8h 05m----39h 55m
Priya Sharma8h 00m--8h 00m8h 00m8h 00m----32h 00m
Emma Rodriguez8h 00m8h 00m--8h 00m8h 00m----32h 00m
Showing 5 of 15 employees

Prototype: Task Management

Kanban board — drag cards between columns to update status. Filter by assignee, priority, or tag.

Interactive Prototype

Drag any task card between the To Do, In Progress, In Review, and Done columns. The column counts update automatically.

Prototype: Organisation Chart

Visual hierarchy tree — click any node to view employee details. Auto-generated from manager_id relationships.

Departments

Management1 person
Operations4 people
Logistics4 people
Human Resources1 person
Customer Care1 person
IT1 person
Finance2 people
Marketing1 person

Hierarchy Stats

Total Employees15
Management Layer3 levels
Direct Reports (avg)3.0
Managers3
Frontline Staff11
Vacancies0

How It Works

The org chart is dynamically generated from the manager_id field on each employee record.

When an admin changes someone's manager, the tree redraws instantly — no manual chart editing needed.

Click any node in the chart above to see a quick employee summary.

Prototype: Leave Management

Calendar view with leave overlays, plus a sortable approval queue. Integrated with the roster for conflict detection.

Leave Calendar — August 2026

Colour-coded by status

ApprovedPendingRejected

Leave Balances

Sarah Chen18 / 21 days
James Okafor14 / 21 days
David Kim10 / 21 days
Priya Sharma8 / 14 days
Tom Walker5 / 14 days

Leave Requests

Approve or reject pending requests — roster conflicts are flagged automatically

EmployeeTypeDatesDaysReasonStatus

Prototype: Employee Directory

Full employee list with contact details, department, status, and role assignment.

EmployeeTitleDepartmentPhoneStatusRole

Data Model (ERD)

Relational schema covering employees, shifts, tasks, leave, time entries, and organisational hierarchy.

Entity Relationship Diagram

8 core tables with foreign key relationships

employees
idUUID PK
manager_idFK->self
full_nameVARCHAR
emailVARCHAR U
phoneVARCHAR
password_hashVARCHAR
titleVARCHAR
department_idFK
roleENUM
device_tokenVARCHAR
statusENUM
departments
idUUID PK
nameVARCHAR
head_idFK->emp
parent_idFK->self
descriptionTEXT
shifts
idUUID PK
employee_idFK
dateDATE
shift_typeENUM
start_timeTIME
end_timeTIME
publishedBOOLEAN
time_entries
idUUID PK
employee_idFK
shift_idFK
clock_inTIMESTAMPTZ
clock_outTIMESTAMPTZ
duration_minINT
device_idVARCHAR
geo_latDECIMAL
tasks
idUUID PK
assignee_idFK
created_byFK
titleVARCHAR
statusENUM
priorityENUM
due_dateDATE
tagsTEXT[]
leave_requests
idUUID PK
employee_idFK
approved_byFK
leave_typeENUM
start_dateDATE
end_dateDATE
statusENUM
conflict_flagBOOLEAN
leave_balances
idUUID PK
employee_idFK
leave_typeENUM
entitled_daysDECIMAL
used_daysDECIMAL
yearINT
trusted_devices
idUUID PK
employee_idFK
device_tokenVARCHAR U
platformENUM
last_seenTIMESTAMPTZ
revokedBOOLEAN

Key Relationships

employees -> departments: Many-to-one (department_id FK)
employees -> employees: Self-referential (manager_id FK — enables org chart)
shifts -> employees: Many-to-one (employee_id FK)
time_entries -> employees + shifts: Many-to-one (both FKs)
tasks -> employees: Many-to-one (assignee_id, created_by — both FKs)
leave_requests -> employees: Many-to-one (employee_id, approved_by — both FKs)
leave_balances -> employees: Many-to-one (employee_id FK)
trusted_devices -> employees: Many-to-one (employee_id FK)

Feature Backlog

Prioritised milestones — development can start immediately after approval. Each milestone is independently deployable.

M1
Foundation
Weeks 1-2 · Infrastructure & Auth
Priority: Critical
Project scaffolding — Expo + Express + Prisma
Est: 2 days · Dependency: None
Database schema & migrations (PostgreSQL)
Est: 2 days · Dependency: Scaffolding
Auth: email/phone sign-up, OTP, JWT
Est: 3 days · Dependency: DB schema
Role-based access control (Admin/Manager/Employee)
Est: 2 days · Dependency: Auth
Login screen (web + mobile)
Est: 2 days · Dependency: Auth
Device registration & trusted-device auth
Est: 2 days · Dependency: Auth
M2
Core Features
Weeks 3-4 · Dashboard, Tasks, Employees
Priority: High
Admin dashboard with live stats & charts
Est: 3 days · Dependency: M1
Employee CRUD — add, edit, deactivate
Est: 2 days · Dependency: M1
Employee directory with search & filter
Est: 2 days · Dependency: Employee CRUD
Task management — Kanban board with drag-drop
Est: 4 days · Dependency: M1
Task assignment, priorities, tags, due dates
Est: 2 days · Dependency: Kanban
Organisation chart — auto-generated from manager_id
Est: 3 days · Dependency: Employee CRUD
Department management
Est: 1 day · Dependency: Org chart
M3
Roster & Leave
Weeks 5-6 · Scheduling, Time, Leave
Priority: High
Shift scheduling — weekly roster grid
Est: 4 days · Dependency: M2
Drag-and-drop shift assignment
Est: 2 days · Dependency: Roster grid
Roster publish & push notifications
Est: 2 days · Dependency: Roster grid
Time tracking — clock in/out with geo-location
Est: 3 days · Dependency: M1
Timesheet view & CSV/PDF export
Est: 2 days · Dependency: Time tracking
Leave request submission (self-service)
Est: 2 days · Dependency: M1
Leave approval workflow with conflict detection
Est: 3 days · Dependency: Leave + Roster
Leave balance tracking & auto-calculation
Est: 2 days · Dependency: Leave approval
Leave calendar view (month/week)
Est: 2 days · Dependency: Leave approval
M4
Polish & Mobile
Weeks 7-8 · Mobile apps, reports, deployment
Priority: Medium
Native iOS build via Expo EAS
Est: 2 days · Dependency: M1-M3
Native Android build via Expo EAS
Est: 1 day · Dependency: iOS build
Offline mode — SQLite cache for clock-in/out
Est: 3 days · Dependency: Time tracking
Push notifications (Expo Notifications)
Est: 2 days · Dependency: Mobile builds
Reports & analytics dashboard
Est: 3 days · Dependency: M2-M3
Audit log for admin actions
Est: 2 days · Dependency: M1
2FA — TOTP via authenticator app
Est: 2 days · Dependency: M1
Docker Compose deployment package
Est: 1 day · Dependency: All
User acceptance testing & handover docs
Est: 2 days · Dependency: All

Milestone Summary

MilestoneTimelineFeaturesEffortStatus
M1: FoundationWeeks 1-26 items13 daysComplete (Prototype)
M2: Core FeaturesWeeks 3-47 items17 daysReady to start
M3: Roster & LeaveWeeks 5-69 items20 daysBlocked by M2
M4: Polish & MobileWeeks 7-89 items18 daysBlocked by M3

Total Estimated Effort

68 person-days (~14 weeks at 1 developer, or 7 weeks with 2 developers). Each milestone is independently deployable — the system is usable after M1.

Deployment Guide

Step-by-step instructions to deploy WorkForce Pro on a single Windows or Linux server.

Prerequisites

Windows 10/11 Pro or Ubuntu 22.04+
4 GB RAM minimum (8 GB recommended)
20 GB free disk space
Docker Desktop (Windows) or Docker Engine (Linux)
Node.js 20 LTS (for mobile build only)
Domain name (optional, for TLS)
SSL certificate (Let's Encrypt — free)

What Gets Deployed

API Node.js Express server (Docker container)
DB PostgreSQL 16 (Docker container)
Cache Redis 7 (Docker container)
Web Nginx serving React web build + reverse proxy
Mobile iOS/Android apps via Expo EAS (app store or MDM)

Step-by-Step Deployment

1

Install Docker

Download and install Docker Desktop for Windows or Docker Engine for Linux.

# Linux (Ubuntu): curl -fsSL https://get.docker.com -o get-docker.sh sudo sh get-docker.sh sudo usermod -aG docker $USER
2

Clone the Repository

Get the project source code onto your server.

git clone https://github.com/your-org/workforce-pro.git cd workforce-pro
3

Configure Environment Variables

Copy the example env file and set your secrets.

cp .env.example .env # .env DATABASE_URL=postgresql://wfp:wfp_password@db:5432/workforce_pro REDIS_URL=redis://redis:6379 JWT_SECRET=your-256-bit-secret-here JWT_REFRESH_SECRET=your-different-256-bit-secret APP_URL=https://wfp.yourcompany.com
4

Run Database Migrations

Initialise the PostgreSQL schema using Prisma.

docker compose run --rm api npx prisma migrate deploy docker compose run --rm api npx prisma db seed # Creates admin user
5

Start All Services

Launch the entire stack with a single command.

docker compose up -d # Services running: # - api (Node.js Express, port 3000) # - db (PostgreSQL 16, port 5432) # - redis (Redis 7, port 6379) # - web (Nginx, port 80/443) docker compose ps # Verify all containers are healthy
6

Configure TLS (HTTPS)

Secure your deployment with a free Let's Encrypt certificate.

sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d wfp.yourcompany.com
7

Build Mobile Apps (Optional)

Build iOS and Android apps using Expo EAS Build.

npm install -g eas-cli eas login eas build --platform all --profile production
8

First Admin Login

The database seed creates a default admin account. Change the password immediately.

# Default admin credentials (CHANGE IMMEDIATELY): Email: admin@company.local Password: ChangeMe123!

Docker Compose File

version: '3.8' services: api: build: ./server ports: ["3000:3000"] env_file: .env depends_on: [db, redis] restart: unless-stopped web: build: ./client-web ports: ["80:80", "443:443"] depends_on: [api] restart: unless-stopped db: image: postgres:16-alpine volumes: [pgdata:/var/lib/postgresql/data] env_file: .env restart: unless-stopped redis: image: redis:7-alpine restart: unless-stopped volumes: pgdata:

Post-Deployment Checklist

Change admin password
Generate new JWT secrets in .env
Configure SMS gateway (if using phone auth)
Set up TLS certificate
Configure firewall (allow 80/443 only)
Set up database backups (pg_dump cron)
Create employee accounts
Assign managers & set up org chart
Configure shift types & roster rules
Test clock-in/out on mobile
Test leave request workflow
Schedule Docker log rotation

Mobile Preview

Admin Dashboard
On Duty
12
Shifts
56
Tasks
10
Leave
4
Today's Shifts
06-14David Kim
06-14James Okafor
14-22Mei Ling Tan
OffTom Walker
Pending Approvals
Priya S. — MedicalPending
David K. — AnnualPending
Lucas M. — Compass.Pending
Home
Roster
Clock
Tasks
Profile