n.siegfried
68c1c803d6
Replaces the free-text "Typical WP Size" with a preset dropdown (Small / Standard / Large / Custom). Choosing a preset auto-fills the max-hours split threshold (still editable). The chosen band is now surfaced next to Est. Hrs in the creator's size hint (not just the View-SOP modal), alongside the threshold/over-threshold warning. Sample SOP aligned to Standard (80 hrs). repopulateForm preserves a non-preset saved value as a dropdown option. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
383 lines
21 KiB
HTML
383 lines
21 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="icon" href="favicon.ico" sizes="any">
|
||
<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;">
|
||
</a>
|
||
<div>
|
||
<div class="header-title">Work Package Suite</div>
|
||
<div class="header-subtitle" id="project-display"></div>
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<button id="load-sample-btn" class="header-button" onclick="loadSampleData()" title="Load example SOP data">⭐ Load Sample</button>
|
||
<button class="header-button" onclick="toggleComments()" title="View and add comments for the current step">💬 Step Comments</button>
|
||
<button class="header-button" onclick="showAnalytics()" title="Review usage logs for this tool">📊 Usage Logs</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., Mariano Sanchez">
|
||
</div>
|
||
<div class="field">
|
||
<label>Assistant Project Manager (APM)</label>
|
||
<input type="text" id="proj_apm" placeholder="e.g., Assistant PM name">
|
||
</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 style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
|
||
<div class="sub-heading">Additional Team Members (optional)</div>
|
||
<div id="team-members-list" style="margin-top: 1rem;"></div>
|
||
<button class="add-btn" onclick="addTeamMember()">+ Add Team Member</button>
|
||
</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</h2>
|
||
<div class="notice">Enable the WP types your project will use. Add any special rules and the roles required to approve WO completion.</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. The choices here decide how the Work Package Creator behaves for every package.</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]-[TYPE]">
|
||
<small>Use ## for counter, [Sector] [TYPE] as variables</small>
|
||
</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>
|
||
|
||
<h3 style="margin:1.4rem 0 .4rem">How will Work Packages use disciplines?</h3>
|
||
<div class="notice">Decide whether a single package can carry more than one discipline (e.g. a chiller skid needing Mechanical install + Electrical wire-pull + Tech terminations), or whether each discipline gets its own package. This drives whether the Creator shows per-discipline scope sections and the <strong>Split by Discipline</strong> button.</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label>Disciplines on this project</label>
|
||
<input type="text" id="gov_disciplines" placeholder="Mechanical, Electrical, Tech">
|
||
<small>Comma-separated. These appear as scope sections and instance suffixes in the Creator.</small>
|
||
</div>
|
||
<div class="field">
|
||
<label>Discipline strategy *</label>
|
||
<select id="gov_discmode">
|
||
<option value="choice">Let the planner choose per package (recommended)</option>
|
||
<option value="single">One discipline per package (many small packages)</option>
|
||
<option value="multi">Multiple disciplines per package (scope split by discipline)</option>
|
||
</select>
|
||
<small>"Choose per package" lets the planner build a large multi-discipline package and split it later.</small>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin:1.4rem 0 .4rem">Work Package sizing</h3>
|
||
<div class="notice">A Work Package should be a manageable, trackable chunk of work — typically a 1–2 week assignment. The Creator warns the planner when a package exceeds the ceiling so it can be broken down.</div>
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label>Typical WP Size</label>
|
||
<select id="gov_wosize" onchange="onSizePresetChange()">
|
||
<option value="">Select…</option>
|
||
<option value="Small — 1–2 days (≈8–24 hrs)">Small — 1–2 days (≈8–24 hrs)</option>
|
||
<option value="Standard — 3–5 days (≈40–80 hrs)">Standard — 3–5 days (≈40–80 hrs)</option>
|
||
<option value="Large — 1–2 weeks (≈80–160 hrs)">Large — 1–2 weeks (≈80–160 hrs)</option>
|
||
<option value="Custom…">Custom…</option>
|
||
</select>
|
||
<small>Sets the split threshold automatically; choose Custom to enter your own.</small>
|
||
</div>
|
||
<div class="field">
|
||
<label>Split threshold — max labor hours</label>
|
||
<input type="number" id="gov_size_hours_max" min="0" step="1" placeholder="e.g., 80">
|
||
<small>Auto-set from the size above (editable). The Creator flags packages over this so they can be split.</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">Comes pre-sequenced with a typical install flow. Drag the ⠿ handle to reorder steps, edit labels inline, add a QC hold gate, or remove any step.</div>
|
||
<div id="sequence-list" style="margin-top: 1rem;"></div>
|
||
<div style="display:flex; gap:0.5rem; margin-top:1rem; flex-wrap:wrap;">
|
||
<input type="text" id="seq-add-input" placeholder="New step name" onkeydown="if(event.key==='Enter'){addSequenceStep();}" style="flex:1; min-width:200px; padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
|
||
<button class="add-btn" onclick="addSequenceStep()">+ Add Step</button>
|
||
<button class="add-btn" onclick="addSequenceGate()" style="background:var(--warning);">◆ Add QC Hold</button>
|
||
</div>
|
||
</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 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">
|
||
<!-- Shown until the SOP is complete -->
|
||
<div id="wp-gate" style="padding: 3rem 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. Once the SOP is finished, the full creator loads here with your project defaults pre-populated.</p>
|
||
<button class="nav-btn primary" onclick="switchTool('sop')" style="margin-top: 1rem;">← Go to SOP Configuration</button>
|
||
</div>
|
||
<!-- The real Work Package Creator, embedded once the SOP is complete -->
|
||
<iframe id="wp-frame" title="Work Package Creator" style="display:none; width:100%; border:0; min-height: calc(100vh - 200px);"></iframe>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- STEP COMMENTS DROPDOWN (toggled from header) -->
|
||
<div id="comments-panel" class="comments-dropdown" style="display: none;">
|
||
<div class="comments-dropdown-header">
|
||
<strong>💬 Step Comments</strong>
|
||
<button onclick="toggleComments()" class="comments-dropdown-close" title="Close">✕</button>
|
||
</div>
|
||
<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>
|
||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
|
||
<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="exportComments()" style="background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 600;">⤓ Export</button>
|
||
<button onclick="document.getElementById('sop-comments-import').click()" style="background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 600;">⤒ Import</button>
|
||
<input type="file" id="sop-comments-import" accept="application/json" style="display:none" onchange="importComments(event)">
|
||
</div>
|
||
<div id="comments-list" style="margin-top: 1rem; max-height: 240px; overflow-y: auto;"></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="feedback-config.js"></script>
|
||
<script src="project-data.js"></script>
|
||
<script src="work-package-suite-app.js"></script>
|
||
</body>
|
||
</html>
|