YogiPWD

Project progress monitoring tool

Yogendra January 28, 2026
Construction PM - Multi-Project Suite (INR)
SELECT PROJECT:

Summary: -

₹0 / 0%

Activity Management

Activity Timeline Total Qty Achieved Qty Exp. vs Act. % Cost Achieved Status Actions

Construction PM – Multi-Project Management Suite

The provided code implements a browser-based construction project management system. It allows engineers or project managers to manage multiple infrastructure projects, track activities, calculate cost progress, visualize completion percentages, and export progress reports.

The entire system runs inside a single HTML file using JavaScript, Local Storage, Chart.js visualizations, and PDF generation. No backend server is required.

1. External Libraries Used

The application integrates several JavaScript libraries for advanced functionality.

Chart.js

Chart.js is used to generate the progress comparison chart showing expected vs actual completion percentage for each activity.

jsPDF

jsPDF generates downloadable PDF reports summarizing project progress.

jsPDF AutoTable

This plugin creates formatted tables in the exported PDF.

2. Layout and Interface Design

The interface is built using standard HTML and CSS. The layout follows a card-based dashboard design.

Main Interface Components

  • Project selector and management controls
  • Project information card
  • Milestone management
  • Activity entry form
  • Activity tracking table
  • Progress chart
  • Export/Import and PDF generation tools

CSS styles define the overall appearance including typography, card layouts, buttons, tables, and color-coded status indicators.

3. Project Data Structure

All application data is stored in a JavaScript object called library. 

let library = {
    currentProjectId: null,
    projects: {}
};
Each project contains:
  • Project ID
  • Project name
  • Total budget
  • Activities list
  • Milestones
  • Reached milestones
Example structure: 
project = {
 id: "proj_123",
 name: "Highway Project",
 budget: 100000,
 activities: [],
 milestones: [25,50,75],
 reachedMilestones: []
}

4. Local Storage Persistence

The application saves data using the browser's Local Storage API. 

localStorage.setItem('construction_library', JSON.stringify(library));
When the page loads:
  • The stored JSON data is retrieved.
  • Projects are restored automatically.
  • If no project exists, a default project is created.
This enables the tool to function like a lightweight offline database.

5. Activity Categories

The system organizes construction tasks into structured groups such as:

  • Roadwork Layers
  • Structures
  • Bridges
  • Drainage
  • Safety Components
  • River Training Works
These groups populate the activity dropdown automatically. 
const activityGroups = {
 "Roadwork - Layers": ["Excavation","GSB","WMM"],
 "Bridges": ["Foundation","Substructure","Superstructure"]
};
This structure ensures standardized activity naming across projects.

6. Activity Entry System

Users can add or update construction activities using the activity form.

Each activity stores:
  • Activity name
  • Start date
  • End date
  • Total quantity
  • Achieved quantity
  • Unit cost
Example object: 
{
 name: "Wet Mix Macadam",
 start: "2026-01-01",
 end: "2026-02-01",
 totalQty: 1000,
 achievedQty: 400,
 unitCost: 120
}
The application calculates cost automatically: 
cost = achievedQty × unitCost

7. Progress Calculation Algorithm

The function calcStats() determines activity performance.

It calculates two metrics:

Expected Progress

Based on time elapsed: 
expected = (days passed / total days) × 100

Actual Progress

Based on quantity completed: 
actual = (achievedQty / totalQty) × 100

Status Evaluation

  • If actual progress is significantly lower → Behind
  • If equal or greater → On Track
Color coding is applied:
  • Green = Ahead/On track
  • Red = Behind schedule

8. Milestone Tracking

Milestones represent percentage thresholds of the project budget.

Example:
  • 25%
  • 50%
  • 75%
The system checks whether the total cost spent has reached each milestone. 
targetAmount = (milestonePercent / 100) × projectBudget
If the total spent exceeds the target amount, the milestone is marked as achieved. Achieved milestones turn green in the interface.

9. Progress Visualization

Chart.js generates a dynamic bar chart comparing expected vs actual progress.

Two datasets are rendered:
  • Expected progress (grey)
  • Actual progress (blue)
The chart updates automatically whenever activities change.

10. JSON Backup and Restore

The application supports exporting and importing project data.

Export

Creates a downloadable JSON backup file. 
Project progress backup dated YYYY-MM-DD.json

Import

The system reads the JSON file and merges the imported projects with existing data. This enables:
  • Data backup
  • Sharing projects between computers
  • Long-term archiving

11. PDF Report Generation

Clicking the Download PDF button generates a formatted project report.

The report includes:
  • Project name
  • Report date
  • Total budget
  • Total expenditure
  • Activity progress table
  • Embedded progress chart
This feature is implemented using:
  • jsPDF
  • jsPDF AutoTable

12. Multi-Project Capability

The tool allows managing multiple projects simultaneously.

Features include:
  • Create new projects
  • Rename projects
  • Switch between projects
  • Delete projects
Each project maintains its own:
  • Activities
  • Budget
  • Milestones
  • Progress records

13. Advantages of This System

  • Runs entirely in a web browser
  • No installation required
  • No server or database required
  • Instant visual progress tracking
  • Automatic cost calculations
  • Exportable reports
  • Backup and restore capability

Post a Comment

0 Comments

If you have any doubts, suggestions , corrections etc. let me know