323 lines
16 KiB
HTML
323 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Work Package Suite</title>
|
||
<link rel="stylesheet" href="theme-light.css">
|
||
<link rel="stylesheet" href="work-package-suite-styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- HEADER -->
|
||
<div class="header">
|
||
<div class="header-left">
|
||
<a href="index.html" class="logo" title="Back to Home">
|
||
<img src="prime-controls-logo.jpg" alt="Prime Controls" style="height: 36px; width: auto;">
|
||
<div class="logo-text">Work Package Suite</div>
|
||
</a>
|
||
<div class="header-title">Work Package Suite</div>
|
||
<div class="header-subtitle" id="project-display"></div>
|
||
</div>
|
||
<div class="header-right">
|
||
<button id="load-sample-btn" class="header-button" onclick="loadSampleData()" title="Load example SOP data">⭐ Load Sample</button>
|
||
<span class="step-counter"><span id="current-step">1</span> / <span id="total-steps">10</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN NAVIGATION -->
|
||
<div class="main-nav">
|
||
<button class="nav-tab active" data-tab="sop" onclick="switchTool('sop')">
|
||
<span class="tab-icon">⚙️</span> SOP Configuration
|
||
</button>
|
||
<button class="nav-tab" data-tab="wp" onclick="switchTool('wp')">
|
||
<span class="tab-icon">📋</span> Work Package Creation
|
||
</button>
|
||
</div>
|
||
|
||
<!-- CONTENT AREA -->
|
||
<div class="content-area">
|
||
|
||
<!-- ═════════════════════════════════════════════════════════════════════ -->
|
||
<!-- SOP CONFIGURATION TOOL -->
|
||
<!-- ═════════════════════════════════════════════════════════════════════ -->
|
||
<div id="tool-sop" class="tool active">
|
||
|
||
<!-- SOP STEP INDICATORS -->
|
||
<div class="step-nav">
|
||
<div class="steps-container">
|
||
<div class="step-item active" data-step="1" onclick="goToStep(1)">Project</div>
|
||
<div class="step-item" data-step="2" onclick="goToStep(2)">Team</div>
|
||
<div class="step-item" data-step="3" onclick="goToStep(3)">Sign-Offs</div>
|
||
<div class="step-item" data-step="4" onclick="goToStep(4)">WP Types</div>
|
||
<div class="step-item" data-step="5" onclick="goToStep(5)">Governance</div>
|
||
<div class="step-item" data-step="6" onclick="goToStep(6)">Quality</div>
|
||
<div class="step-item" data-step="7" onclick="goToStep(7)">Platforms</div>
|
||
<div class="step-item" data-step="8" onclick="goToStep(8)">Sequence</div>
|
||
<div class="step-item" data-step="9" onclick="goToStep(9)">Constraints</div>
|
||
<div class="step-item" data-step="10" onclick="goToStep(10)">Sources</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SOP STEP CONTENT -->
|
||
<div class="step-content">
|
||
|
||
<!-- STEP 1: PROJECT BASICS -->
|
||
<div class="step" id="sop-step-1" style="display: block;">
|
||
<h2>1. Project Basics</h2>
|
||
<div class="notice">Define the core project information that will be inherited by all Work Packages.</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label>Project Name *</label>
|
||
<input type="text" id="proj_name" placeholder="e.g., Micron — INC Construction Work Packages" oninput="updateProjectDisplay()">
|
||
</div>
|
||
<div class="field">
|
||
<label>Project Number *</label>
|
||
<input type="text" id="proj_number" placeholder="e.g., 26-67-008">
|
||
</div>
|
||
<div class="field">
|
||
<label>Client Name *</label>
|
||
<input type="text" id="proj_client" placeholder="e.g., Micron Technology, Inc.">
|
||
</div>
|
||
<div class="field">
|
||
<label>Division / Sector *</label>
|
||
<input type="text" id="proj_division" placeholder="e.g., Semiconductor, Oil & Gas, Data Center">
|
||
</div>
|
||
<div class="field">
|
||
<label>Site Location *</label>
|
||
<input type="text" id="proj_site" placeholder="e.g., Boise, ID — Fab 7">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 2: PROJECT TEAM -->
|
||
<div class="step" id="sop-step-2" style="display: none;">
|
||
<h2>2. Project Team Leadership</h2>
|
||
<div class="notice">Name the key project leaders. These are informational and will appear in SOP exports.</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label>Project Manager (PM)</label>
|
||
<input type="text" id="proj_pm" placeholder="e.g., Nick Siegfried">
|
||
</div>
|
||
<div class="field">
|
||
<label>Construction Manager (CM)</label>
|
||
<input type="text" id="proj_cm" placeholder="e.g., K. Boyd">
|
||
</div>
|
||
<div class="field">
|
||
<label>Quality Manager (QM)</label>
|
||
<input type="text" id="proj_qm" placeholder="e.g., D. Nguyen">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 3: SIGN-OFF ROLES -->
|
||
<div class="step" id="sop-step-3" style="display: none;">
|
||
<h2>3. Required Sign-Off Roles</h2>
|
||
<div class="notice">Superintendent and Foreman are required. Add other roles as needed for your project structure.</div>
|
||
<div class="required-roles">
|
||
<div class="role-required">
|
||
<div class="role-checkbox">
|
||
<input type="checkbox" id="role_super" checked disabled>
|
||
<label>Superintendent *</label>
|
||
</div>
|
||
<input type="text" id="role_super_name" placeholder="Name (optional)" style="flex: 1; margin-left: 1rem;">
|
||
</div>
|
||
<div class="role-required">
|
||
<div class="role-checkbox">
|
||
<input type="checkbox" id="role_foreman" checked disabled>
|
||
<label>Foreman *</label>
|
||
</div>
|
||
<input type="text" id="role_foreman_name" placeholder="Name (optional)" style="flex: 1; margin-left: 1rem;">
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
|
||
<div class="sub-heading">Optional Additional Roles</div>
|
||
<div id="optional-roles-list" style="margin-top: 1rem;"></div>
|
||
<button class="add-btn" onclick="addOptionalRole()">+ Add Role</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 4: WORK PACKAGE TYPES -->
|
||
<div class="step" id="sop-step-4" style="display: none;">
|
||
<h2>4. Work Package Types & Disciplines</h2>
|
||
<div class="notice">Enable the WP types your project will use. Assign a discipline to each for IWP constraint checklists.</div>
|
||
<div id="wp-types-table" style="margin-top: 1.5rem;"></div>
|
||
</div>
|
||
|
||
<!-- STEP 5: GOVERNANCE -->
|
||
<div class="step" id="sop-step-5" style="display: none;">
|
||
<h2>5. Governance & WP Numbering</h2>
|
||
<div class="notice">Define how Work Packages are formatted, sized, and issued on this project.</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label>Work Package Number Format *</label>
|
||
<input type="text" id="gov_woformat" placeholder="e.g., WP##-[Sector]-[Discipline]-[TYPE]">
|
||
<small>Use ## for counter, [Sector] [Discipline] [TYPE] as variables</small>
|
||
</div>
|
||
<div class="field">
|
||
<label>Typical WP Size</label>
|
||
<input type="text" id="gov_wosize" placeholder="e.g., 3–5 days or 40–80 hours">
|
||
</div>
|
||
<div class="field">
|
||
<label>Issuance Strategy</label>
|
||
<select id="gov_issuance" multiple size="3">
|
||
<option selected>By Sector / Area</option>
|
||
<option>By Discipline</option>
|
||
<option>By Phase / Sequence</option>
|
||
<option>By Resource Availability</option>
|
||
</select>
|
||
<small>Hold Ctrl to select multiple</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 6: QUALITY -->
|
||
<div class="step" id="sop-step-6" style="display: none;">
|
||
<h2>6. Quality & Inspection Strategy</h2>
|
||
<div class="notice">Establish project-wide quality expectations that cascade to every Work Package.</div>
|
||
<div class="field-grid col1">
|
||
<div class="field">
|
||
<label>QC Required? *</label>
|
||
<select id="qual_qcreq">
|
||
<option>Yes</option>
|
||
<option>Yes — Detailed inspection items</option>
|
||
<option>Yes — Sample / Spot-check</option>
|
||
<option>No</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label>Photo / Documentation Standard</label>
|
||
<select id="qual_photo">
|
||
<option selected>Key checkpoints only</option>
|
||
<option>Every step documented</option>
|
||
<option>As-built final condition only</option>
|
||
<option>None</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label>Hold Points & Witness Requirements</label>
|
||
<textarea id="qual_hold" rows="3" placeholder="e.g., HOLD: Prime QAQC to inspect rough-in before cover/cover-up. WITNESS: client QC to observe megger test before energization."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 7: PLATFORMS -->
|
||
<div class="step" id="sop-step-7" style="display: none;">
|
||
<h2>7. Tracking & Commissioning Platforms</h2>
|
||
<div class="notice">Select the tools used for construction tracking and commissioning. These can be the same or different systems.</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label>Construction Tracking Platform *</label>
|
||
<select id="plat_tracking">
|
||
<option>CxAlloy</option>
|
||
<option>Procore</option>
|
||
<option>Autodesk Construction Cloud (ACC)</option>
|
||
<option>Other</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label>Commissioning Tool *</label>
|
||
<select id="plat_commissioning">
|
||
<option selected>CxAlloy</option>
|
||
<option>Procore</option>
|
||
<option>Autodesk Construction Cloud (ACC)</option>
|
||
<option>Other</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 8: SEQUENCE -->
|
||
<div class="step" id="sop-step-8" style="display: none;">
|
||
<h2>8. Construction Sequence</h2>
|
||
<div class="notice">Define the major phases and logical sequence of construction work.</div>
|
||
<div id="sequence-list" style="margin-top: 1rem;"></div>
|
||
<button class="add-btn" onclick="addSequenceStep()">+ Add Sequence Step</button>
|
||
</div>
|
||
|
||
<!-- STEP 9: CONSTRAINTS -->
|
||
<div class="step" id="sop-step-9" style="display: none;">
|
||
<h2>9. Release Gate Constraints</h2>
|
||
<div class="notice">Constraints are readiness items that must be cleared before a WP can be issued.</div>
|
||
<div style="margin-bottom: 2rem;">
|
||
<div class="sub-heading">Standard AWP Constraints (Vol II §2.3.2)</div>
|
||
<div id="standard-constraints" style="margin-top: 1rem;"></div>
|
||
</div>
|
||
<div style="border-top: 1px solid var(--border); padding-top: 1.5rem;">
|
||
<div class="sub-heading">Custom Constraints (Optional)</div>
|
||
<div id="custom-constraints-list" style="margin-top: 1rem;"></div>
|
||
<button class="add-btn" onclick="showConstraintLibrary()">+ Add Custom Constraint</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STEP 10: SOURCES -->
|
||
<div class="step" id="sop-step-10" style="display: none;">
|
||
<h2>10. Engineering Sources & References</h2>
|
||
<div class="notice">Link to key documents and systems that WP authors will reference.</div>
|
||
<div id="sources-list" style="margin-top: 1rem;"></div>
|
||
<button class="add-btn" onclick="addSource()">+ Add Source</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- SOP COMMENTS -->
|
||
<div class="comments-section">
|
||
<button class="comments-toggle" onclick="toggleComments()">💬 Step Comments</button>
|
||
<div id="comments-panel" style="display: none; margin-top: 1rem; padding: 1rem; background: var(--bg); border-radius: 6px; border: 1px solid var(--border);">
|
||
<div style="margin-bottom: 1rem;">
|
||
<label style="font-weight: 600; font-size: 13px;">Your Name (optional)</label>
|
||
<input type="text" id="commenter-name" placeholder="e.g., Bill Clarida" style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: 0.25rem;">
|
||
</div>
|
||
<div style="margin-bottom: 1rem;">
|
||
<label style="font-weight: 600; font-size: 13px;">Feedback</label>
|
||
<textarea id="comment-text" rows="3" placeholder="Your feedback here..." style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: 0.25rem; font-family: inherit;"></textarea>
|
||
</div>
|
||
<button onclick="submitComment()" style="background: var(--primary); color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">Submit</button>
|
||
<button onclick="toggleComments()" style="background: var(--border); color: var(--text); padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; margin-left: 0.5rem;">Close</button>
|
||
<div id="comments-list" style="margin-top: 1rem; max-height: 200px; overflow-y: auto;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SOP NAVIGATION -->
|
||
<div class="step-navigation">
|
||
<button class="nav-btn" id="sop-prev-btn" onclick="previousStep()">← Back</button>
|
||
<button class="nav-btn" id="sop-next-btn" onclick="nextStep()">Next →</button>
|
||
<button class="nav-btn primary" id="sop-complete-btn" onclick="completeSOP()" style="display: none;">✓ SOP Complete</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ═════════════════════════════════════════════════════════════════════ -->
|
||
<!-- WORK PACKAGE CREATION TOOL -->
|
||
<!-- ═════════════════════════════════════════════════════════════════════ -->
|
||
<div id="tool-wp" class="tool">
|
||
<div style="padding: 2rem; text-align: center;">
|
||
<h2>📋 Work Package Creation</h2>
|
||
<p style="color: var(--text-light); margin: 1rem 0;">Complete the SOP Configuration first to enable Work Package creation.</p>
|
||
<div style="margin-top: 2rem; padding: 2rem; background: var(--bg); border-radius: 8px; border: 2px dashed var(--border);">
|
||
<h3 style="color: var(--text-dim);">SOP Status: <span id="sop-status">Not started</span></h3>
|
||
<p id="sop-progress-text" style="color: var(--text-light); margin-top: 0.5rem;"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- CONSTRAINT LIBRARY MODAL -->
|
||
<div id="constraint-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Add Custom Constraint</h3>
|
||
<button class="modal-close" onclick="closeConstraintModal()">✕</button>
|
||
</div>
|
||
<div id="constraint-library" style="max-height: 400px; overflow-y: auto; margin: 1rem 0;"></div>
|
||
<button class="nav-btn" onclick="closeConstraintModal()">Done</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="work-package-suite-app.js"></script>
|
||
</body>
|
||
</html>
|