← All projects07 / 07
CASE STUDY - WEB APP
Private · Client work

ECC HMS.

A staff platform for ECC built around a drag-and-drop roster planner, with department publishing, a handbook, a shared drive, tickets, tasks and the staff side of a patient mobile app, in Dutch and English.

RoleFrontend Developer
ClientDSTRCT Tech
Year2024 - 2025
StackNext.js, TypeScript, GraphQL, Chakra UI
AccessPrivate - NDA
internal deployment - link withheld
[ drop screenshot ]
01 - Overview

ECC's teams planned shifts in spreadsheets, kept procedures in shared folders and reported issues by email. The goal was one app for the work around patient care: who works where and when, what the rules are, where the files live and what needs fixing.

I was the main frontend developer from September 2024 through 2025. I built the roster module, the organisation settings, department publishing, the handbook, the drive and most of the ticket and task screens, along with all of the app's React contexts and a large part of its theme.

The roster is the heart of it. Planners see rooms as rows on a timeline, drag staff onto a room to create a shift, resize and reorder, and follow a live current-time line. Behind the grid sit areas, room types, rooms, treatments, shifts, teams, leave with accumulation, holidays, availability, overrides and notes: close to 80 GraphQL operations in the roster module alone.

Like MKV it is a Next.js App Router app on a GraphQL API with generated, typed hooks. Ticket creation and details open as parallel routes over the list, and notifications arrive in real time over Socket.io.

02 - What I built
A

Roster planner

A timeline grid of rooms with drag-and-drop shift assignment, resizable bars, sortable rooms, repeat scheduling, manual assignment, shift notes and a personal My roster view.

B

Roster setup and leave

Areas, rooms and room types, treatments, shifts and teams; leave types and accumulation, holidays, availability and overrides; bulk upload of shift assignments.

C

Department publishing

Publications per department written in a Tiptap editor, with tags, reader roles and a draft-to-published status flow.

D

Handbook

A nested handbook of pages and sub-pages, with per-page permissions and a publish status.

E

Shared drive

Folders and multi-file uploads, previews, search, starred, recent and trash, per-item permissions, an activity history and download notifications.

F

Tickets and tasks

Tickets with types, sub-types, locations and type-specific fields; pickup, assignment, collaborators, comments, closing and export; plus task and document dashboards.

G

Organisation settings

Departments, users and functions: the structure that decides what each person can see and do.

H

Patient app admin

Staff-side screens for patients who use ECC's mobile app, including their intake.

03 - Stack
Next.jsReactTypeScriptGraphQLApollo ClientChakra UIdnd-kitTiptapTanStack TableSocket.ionext-intlReact Hook Form
/ UNDER NDA

The live app and source code belong to the client, so I can’t link them here. I’m happy to walk through the product and my code on a call.

Request a walkthrough →

Next project

01 / 07
01 / FULLSTACK

Atelier OS

Operating system for fashion industry brands and retailers.

Read case study →
Atelier OS
ECC HMS - pherwerz.dev