fullstackcompleted2023Interactive Demo

MES Request & Worklog System Demo

A unified MES demo showing request approval, technician work execution, worklog tracking, and shift-aware OT calculation using mock data.

C#.NETSQL ServerReactTypeScriptWorkflowTimesheet

Overview

**Problem:** Internal maintenance and operations work often spans request approval, technician execution, and timesheet review. When those steps are tracked separately, teams lose visibility into request status, work hours, OT, and closeout readiness.

**Solution:** A unified MES-style demo that combines request workflow tracking with technician worklog entry and shift-aware OT calculation. Requesters can submit and close jobs, approvers can approve or reject, and technicians can start work, record hours, and mark jobs done.

**Implementation:** The portfolio demo uses React and TypeScript with mock data to present the user-facing workflow. The real-world implementation experience involved C#, .NET, SQL Server, and enterprise workflow patterns, but this public demo excludes confidential company data and focuses on interaction design, state transitions, filtering, summaries, and OT logic.

Features

  • Request workflow: Draft -> Submitted -> Approved -> Started -> In Progress -> Job Done -> Closed
  • Role-based actions for requesters, approvers, and technicians
  • Worklog entry modal with real-time work hour preview
  • Shift-aware OT calculation for morning, afternoon, and night shifts
  • Timesheet filters by month, department, status, employee, and task
  • Dashboard summaries for request counts, working days, work hours, OT, pending, and approved records

Key Highlights

  • Connects request approval and execution tracking in one workflow
  • Demonstrates enterprise UI patterns with mock data only
  • Shows practical OT logic including midnight crossover handling

Tech Stack

C#.NETSQL ServerReactTypeScriptWorkflowTimesheet
Categoryfullstack
Statuscompleted
Year2023

Interested in similar work?

I'm available for full-time roles and freelance projects. Let's talk.