Welcome to the Knowledge Centre

Quick Start Guide

Get started with the Project Estimating Tool in just a few steps. This guide will walk you through the basics of creating your first project estimate.

What You'll Need

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• Basic understanding of project management concepts
• Your project requirements and resource information

Step 1: Project Information

Start by entering your basic project information:

• Project name and description
• Start and end dates
• Primary currency for the project

Step 2: Add Resources

Define your project resources across multiple categories:

• Internal Resources: Your in-house team members with their rates and allocation
• External Resources: Contractors and consultants
• Vendors: Third-party service providers
• Tools & Software: Licensing and subscription costs
• Miscellaneous: Other project expenses

Step 3: Configure Timeline

The tool automatically calculates month-based allocations based on your project dates. You can adjust resource allocations for specific months as needed.

Step 4: Review & Export

View your comprehensive project summary and export the data for stakeholder review and approval.

Key Features

Multi-Category Cost Tracking

The tool provides comprehensive cost tracking across five main categories, allowing you to capture all aspects of your project budget:

• Internal resources with customizable rate cards
• External contractors and consultants
• Vendor services and contracts
• Tools, software, and equipment
• Miscellaneous expenses

Dynamic Timeline Calculations

Month-based timeline calculations automatically adjust resource allocations across your project duration. The system calculates:

• Total project months from start to end date
• Automatic prorating for partial months
• Resource costs distributed across timeline
• Monthly burn rate tracking

Currency Management v2.1

Comprehensive multi-currency support for international projects:

• 33 global currencies supported
• Manual exchange rate management
• Currency conversion utilities
• Primary currency selection

Data Persistence

Built-in localStorage integration ensures your work is never lost:

• Automatic saving as you work
• No backend required
• Works offline
• Export capabilities for backup

Risk Assessment & Contingency

Built-in tools for identifying and planning for project uncertainties:

• Risk factor identification
• Contingency budget allocation
• Buffer planning
• Scenario modeling

Architecture Overview

The Project Estimating Tool is built using a modular architecture with a centralized initialization management system. This design ensures predictable behavior, maintainability, and extensibility.

Core Architectural Principles

1. Centralized Initialization

All application initialization is controlled by a single init_manager.js module. This provides:

• Predictable module load order
• Dependency checking before execution
• Graceful error handling
• Clear debugging and logging

2. Modular Architecture

The application is broken down into focused, single-responsibility modules:

• DOM Manager: Handles all DOM manipulation
• Table Renderer: Manages table display and updates
• Data Manager: Controls data persistence and loading
• Edit Manager: Handles inline editing functionality
• Currency Manager: Manages multi-currency operations

3. Global Window Pattern

All modules and critical functions are exported to the window object, ensuring cross-module communication and preventing scope issues:

// Module exports
window.dataManager = new DataManager();
window.updateSummary = updateSummary;
window.projectData = {...};

4. Event-Driven Updates

The application uses event listeners strategically placed during initialization, avoiding scattered event setup across multiple files.

Initialization Manager Pattern

The Initialization Manager is the heart of the application's startup sequence. Understanding this pattern is crucial for development and troubleshooting.

Why Use This Pattern?

Initialization Sequence

The manager follows a strict 12-step initialization sequence:

Code Structure

class InitializationManager {
    constructor() {
        this.initialized = false;
        this.modules = {
            dataManager: false,
            tableRenderer: false,
            editManager: false,
            currencyManager: false
            // ... other modules
        };
    }

    async initialize() {
        // Execute all 12 initialization steps
        // With comprehensive logging and error handling
    }
}

File Structure

Understanding the project's file organization is essential for navigation and development.

cost_estimation/
├── index.html                # Main application entry point
├── script.js                 # Core business logic
├── style.css                 # Main stylesheet
├── js/
│   ├── dom_manager.js       # DOM utilities
│   ├── table_renderer.js    # Table rendering
│   └── data_manager.js      # Data persistence
├── modules/
│   ├── init_manager.js      # ⭐ Load LAST
│   ├── editManager.js       # Inline editing
│   ├── dynamic_form_helper.js
│   ├── table_fixes.js
│   ├── new_project_welcome.js
│   └── currency_manager.js  # ⭐ NEW in v2.1
└── Styles/
    └── edit-styles.css      # Edit-specific styles

File Responsibilities

init_manager.js ⭐ START HERE

• Central initialization orchestrator
• ONLY file that runs initialization logic
• Must be loaded last in HTML
• Exports: window.initManager

script.js

• Core application functions
• NO DOMContentLoaded listener
• Only function definitions
• Must export all functions to window

currency_manager.js ⭐ NEW

• Multi-currency support
• Exchange rate management
• Currency conversion utilities
• Exports: window.currencyManager

Development Guidelines

Follow these guidelines to maintain code quality and architectural consistency when extending the tool.

DO ✅

• Use init_manager for all initialization
• Export critical functions to window
• Check dependencies before using them
• Log initialization steps with ✓ checkmarks
• Provide fallback implementations
• Use consistent naming conventions
• Comment your code thoroughly
• Test modules in isolation
• Add commas in object literals

DON'T ❌

• Add DOMContentLoaded in multiple files
• Initialize on file load
• Assume modules are loaded
• Use setTimeout for initialization
• Hardcode dependencies
• Mix global and local scope
• Duplicate functions
• Skip error handling
• Forget commas (causes syntax errors!)

Adding New Modules

Follow this step-by-step guide to add a new module to the application.

Step 1: Create the Module File

// modules/my_new_module.js
class MyNewModule {
    constructor() {
        console.log('MyNewModule initialized');
    }

    initialize() {
        // Setup code here
        this.setupEventListeners();
    }

    setupEventListeners() {
        // Add listeners
    }

    myMethod() {
        // Module functionality
    }
}

window.myNewModule = new MyNewModule();
console.log('MyNewModule loaded');

Step 2: Add Script Tag to HTML

Add the script tag BEFORE init_manager.js:

<!-- Other modules -->
<script src="modules/new_project_welcome.js"></script>
<script src="modules/my_new_module.js"></script>

<!-- Init manager loads LAST -->
<script src="modules/init_manager.js"></script>

Step 3: Register in init_manager.js

// In constructor
this.modules = {
    // ... existing modules
    newProjectWelcome: false,  // ← MUST have comma
    myNewModule: false         // ← No comma if last
};

// In checkModules()
this.modules.myNewModule = !!(
    window.myNewModule || window.MyNewModule
);

// In initialize() - if initialization needed
if (this.modules.myNewModule && 
    typeof window.myNewModule.initialize === 'function') {
    window.myNewModule.initialize();
    console.log('✓ MyNewModule initialized');
}

Step 4: Test the Module

1. Open browser console
2. Look for "MyNewModule loaded" message
3. Check initialization logs
4. Test module functionality
5. Verify no errors in console

Currency Management v2.1

The Currency Manager provides comprehensive multi-currency support for international projects.

Supported Currencies

The tool supports 33 global currencies, including:

• Top 10: USD, EUR, GBP, JPY, CNY, AUD, CAD, CHF, INR, SGD
• Additional 23: AED, ARS, BRL, CZK, DKK, HKD, HUF, IDR, ILS, KRW, MXN, MYR, NOK, NZD, PHP, PLN, RON, RUB, SEK, THB, TRY, TWD, ZAR

Setting Primary Currency

// Access current currency
const primaryCurrency = window.projectData.currency.primaryCurrency;

// Change currency programmatically
window.projectData.currency.primaryCurrency = 'EUR';
window.currencyManager.updateCurrencyDisplay();

Managing Exchange Rates

// Add exchange rate (1 USD = 0.85 EUR)
window.currencyManager.addExchangeRate('EUR', 0.85);

// Delete exchange rate
window.currencyManager.deleteExchangeRate(rateId);

// Get all rates
const rates = window.projectData.currency.exchangeRates;

Currency Conversion

// Convert 100 USD to EUR
const converted = window.currencyManager.convertCurrency(
    100, 
    'USD', 
    'EUR'
);

// Get currency symbol
const symbol = window.currencyManager.getCurrencySymbol('USD'); // '$'

// Get currency name
const name = window.currencyManager.getCurrencyName('USD'); // 'US Dollar'

Data Structure

{
    currency: {
        primaryCurrency: 'USD',
        exchangeRates: [
            {
                id: 1234567890,
                currency: 'EUR',
                rate: 0.85,
                lastUpdated: '2024-10-10T12:00:00Z'
            }
        ]
    }
}

Troubleshooting

Common issues and their solutions to get you back on track quickly.

Timeout waiting for function: updateSummary

Cause: The function isn't exported to window

Fix: In script.js, ensure:

window.updateSummary = updateSummary;

Tabs/buttons not working

Cause: Event listeners not being set up

Fix: Ensure initializeBasicFunctionality() is:

1. Defined in script.js
2. Exported to window
3. Called by init_manager.js

Uncaught SyntaxError: Unexpected identifier

Cause: Missing comma before new module in modules object

Fix: In init_manager.js:

this.modules = {
    newProjectWelcome: false,  // ← MUST have comma
    currencyManager: false     // ← Last item, no comma
};

Module not loading

Checklist:

• ✅ Script tag in index.html? (before init_manager.js)
• ✅ Module exports to window?
• ✅ Module registered in init_manager.js?
• ✅ Comma added after previous module?
• ✅ Check browser console for errors

Currency settings not saving

Cause: Currency data structure not initialized

Fix:

1. Check browser console for errors
2. Verify window.projectData.currency exists
3. Try: localStorage.clear()
4. Check if DataManager is properly saving