Add multi-project support: projects entity, picker home page, project context

Projects become the top-level container; SOPs and Work Packages belong to one. Backend: - New projects table + CRUD (/api/projects). - sops.project_id (FK, cascade) and work_packages.project_id added; list/latest/metrics endpoints accept a project_id filter. Front end (now under html/): - project-data.js: shared API-first ProjectData adapter with localStorage fallback + active-project helpers. - Home page: removed "About This Suite"; added a Project picker (create / use sample / select). Tool cards stay hidden until a project is active and carry &project=<id>; hero shows the active project. - Suite reads ?project, resolves it, shows it in the header, and prefills the SOP project fields; passes &project into the WP-creator iframe. - WP creator stamps projectId onto saved packages. SOP/WP localStorage is not yet namespaced per project (next step). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-15 15:39:45 -07:00
parent 4d111d608d
commit 3c40b58ff8
9 changed files with 437 additions and 39 deletions
--- a/html/index.html
+++ b/html/index.html
@@ -348,6 +348,22 @@
      color: var(--cds-text-primary);
    }
    
+    /* PROJECT PICKER */
+    .proj-loading { color: var(--cds-text-secondary); font-style: italic; font-size: 13px; }
+    .proj-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
+    .proj-row select { flex: 1; min-width: 240px; padding: 0.6rem 0.7rem; font-size: 14px;
+      border: 1px solid var(--cds-border-strong, #8d8d8d); border-radius: 4px; background: #fff; }
+    .proj-empty { background: var(--cds-ui-01, #fff); border: 1px dashed var(--cds-border-strong, #8d8d8d);
+      border-radius: 6px; padding: 1.25rem; }
+    .proj-empty p { margin: 0 0 0.9rem; color: var(--cds-text-secondary); }
+    .proj-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
+    .proj-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--cds-ui-03, #e0e0e0); border-radius: 6px; background: var(--cds-ui-01, #fff); }
+    .proj-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; }
+    .proj-form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 12px; font-weight: 600; color: var(--cds-text-secondary); }
+    .proj-form-grid input { padding: 0.55rem 0.65rem; font-size: 14px; border: 1px solid var(--cds-border-strong, #8d8d8d); border-radius: 4px; }
+    .proj-active { margin-top: 0.85rem; font-size: 13px; color: var(--cds-text-primary); }
+    .link-like { background: none; border: none; color: var(--cds-link-01, #0f62fe); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
+
    /* RESPONSIVE */
    @media (max-width: 768px) {
      .header-content { flex-direction: column; text-align: center; }
@@ -379,12 +395,19 @@
    
    <!-- HERO -->
    <div class="hero">
-      <h1>Work Package Suite</h1>
-      <p>Standardized approach to Work Package creation for Prime Controls construction projects. Configure project parameters, define constraints, and generate compliant work packages.</p>
+      <h1 id="hero-title">Work Package Suite</h1>
+      <p id="hero-sub">Standardized Work Package creation for Prime Controls construction projects. Select a project to begin — or create one.</p>
    </div>

-    <!-- TOOL CARDS -->
-    <div class="cards-grid" id="overview">
+    <!-- PROJECT SELECTION -->
+    <div class="section" id="project-section">
+      <h2>Project</h2>
+      <p style="color:var(--cds-text-secondary);font-size:13px;margin:-.25rem 0 1rem">Projects are stored centrally. Pick the project you're working on, or set up a new one.</p>
+      <div id="project-picker"><div class="proj-loading">Loading projects…</div></div>
+    </div>
+
+    <!-- TOOL CARDS (shown once a project is active) -->
+    <div class="cards-grid" id="overview" style="display:none">

      <!-- SOP CONFIG -->
      <a href="work-package-suite.html?tab=sop" class="card" id="card-sop">
@@ -443,25 +466,6 @@
      </div>
    </div>

-    <!-- SUPPORT SECTION -->
-    <div class="section">
-      <h2>About This Suite</h2>
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;">
-        <div>
-          <h3>Two-Step Workflow</h3>
-          <p>Configure the project SOP once, then author every Work Package against it. The Creator stays locked until the SOP is complete, so packages always inherit a valid baseline.</p>
-        </div>
-        <div>
-          <h3>Leave Feedback</h3>
-          <p>Use the feedback section on this page or within any tool. All comments are stored locally and can be exported for team review and iteration.</p>
-        </div>
-        <div>
-          <h3>Offline & Collaborative</h3>
-          <p>All tools work entirely in your browser. Export SOP and Work Package data as JSON for sharing, version control, and integration.</p>
-        </div>
-      </div>
-    </div>
-
  </div>

  <!-- FOOTER -->
@@ -470,20 +474,150 @@
  </footer>

  <script src="feedback-config.js"></script>
+  <script src="project-data.js"></script>
  <script>
-    // Reflect SOP completion on the tool cards.
-    (function reflectSOPStatus(){
+    // ── PROJECT SELECTION ─────────────────────────────────────────────────────
+    const esc = ProjectData.esc;
+    let _projects = [];
+
+    function initProjects(){
+      ProjectData.list().then(list => {
+        _projects = list || [];
+        // Reconcile the active project against the list; clear if it's gone.
+        const active = ProjectData.getActive();
+        if(active && !_projects.some(p => p.id === active.id)) ProjectData.setActive(null);
+        renderProjectPicker();
+        applyActiveProject();
+      });
+    }
+
+    function createFormHtml(){
+      return `<div class="proj-form" id="proj-form" style="display:none">
+        <div class="proj-form-grid">
+          <label>Project Name *<input type="text" id="np_name" placeholder="e.g. Micron — INC Construction"></label>
+          <label>Project Number<input type="text" id="np_number" placeholder="e.g. 26-67-008"></label>
+          <label>Client<input type="text" id="np_client" placeholder="e.g. Micron Technology, Inc."></label>
+          <label>Division<input type="text" id="np_division" placeholder="e.g. Semiconductor"></label>
+          <label>Site / Location<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
+        </div>
+        <div class="proj-actions">
+          <button class="card-button" onclick="saveNewProject()">Create &amp; Select</button>
+          <button class="close-btn" onclick="hideCreateProject()">Cancel</button>
+        </div>
+      </div>`;
+    }
+
+    function renderProjectPicker(){
+      const box = document.getElementById('project-picker');
+      const activeId = ProjectData.getActiveId();
+      if(!_projects.length){
+        box.innerHTML = `<div class="proj-empty">
+            <p>No projects yet. Create your first project, or start from a sample.</p>
+            <div class="proj-actions">
+              <button class="card-button" onclick="showCreateProject()">+ Create Project</button>
+              <button class="close-btn" onclick="useSampleProject()">Use Sample Project</button>
+            </div>
+          </div>` + createFormHtml();
+        return;
+      }
+      const opts = _projects.map(p =>
+        `<option value="${esc(p.id)}" ${p.id===activeId?'selected':''}>${esc(p.name||'(unnamed)')}${p.number?' — '+esc(p.number):''}${p.sample?'  [sample]':''}</option>`
+      ).join('');
+      box.innerHTML = `<div class="proj-row">
+          <select id="project-select" onchange="selectProject(this.value)">
+            <option value="">Select a project…</option>${opts}
+          </select>
+          <button class="card-button" onclick="showCreateProject()">+ New</button>
+          <button class="close-btn" onclick="useSampleProject()">Sample</button>
+        </div>
+        <div id="active-project-info"></div>` + createFormHtml();
+    }
+
+    function showCreateProject(){ const f=document.getElementById('proj-form'); if(f){ f.style.display=''; const n=document.getElementById('np_name'); if(n) n.focus(); } }
+    function hideCreateProject(){ const f=document.getElementById('proj-form'); if(f) f.style.display='none'; }
+
+    function saveNewProject(){
+      const v = id => (document.getElementById(id)?.value || '').trim();
+      const name = v('np_name');
+      if(!name){ alert('Project name is required.'); return; }
+      const p = { name, number:v('np_number'), client:v('np_client'), division:v('np_division'), site:v('np_site'), sample:false };
+      ProjectData.save(p).then(saved => { afterProjectChosen(saved); });
+    }
+
+    function useSampleProject(){
+      const existing = _projects.find(p => p.sample);
+      if(existing){ afterProjectChosen(existing); return; }
+      ProjectData.save(Object.assign({}, ProjectData.SAMPLE)).then(saved => { afterProjectChosen(saved); });
+    }
+
+    function selectProject(id){
+      if(!id){ ProjectData.setActive(null); applyActiveProject(); return; }
+      const p = _projects.find(x => x.id === id);
+      if(p){ ProjectData.setActive(p); applyActiveProject(); }
+    }
+
+    function afterProjectChosen(p){
+      if(!_projects.some(x => x.id === p.id)) _projects.unshift(p);
+      ProjectData.setActive(p);
+      renderProjectPicker();
+      applyActiveProject();
+      document.getElementById('overview').scrollIntoView({ behavior:'smooth', block:'start' });
+    }
+
+    // Show/hide the tool cards and stamp the active project into their links.
+    function applyActiveProject(){
+      const active = ProjectData.getActive();
+      const cards = document.getElementById('overview');
+      const heroTitle = document.getElementById('hero-title');
+      const heroSub = document.getElementById('hero-sub');
+      const info = document.getElementById('active-project-info');
+
+      if(!active){
+        cards.style.display = 'none';
+        heroTitle.textContent = 'Work Package Suite';
+        heroSub.textContent = 'Select a project to begin — or create one.';
+        if(info) info.innerHTML = '';
+        return;
+      }
+
+      const q = '&project=' + encodeURIComponent(active.id);
+      const setHref = (id, base) => { const el=document.getElementById(id); if(el) el.href = base + q; };
+      setHref('card-sop', 'work-package-suite.html?tab=sop');
+      setHref('card-wp', 'work-package-suite.html?tab=wp');
+      setHref('card-dash', 'work-package-suite.html?view=dashboard');
+
+      cards.style.display = '';
+      heroTitle.textContent = active.name || 'Work Package Suite';
+      heroSub.textContent = [active.number, active.client, active.site].filter(Boolean).join(' · ') || 'Active project';
+      if(info) info.innerHTML = `<div class="proj-active">✓ Active project: <strong>${esc(active.name||'')}</strong>${active.number?' ('+esc(active.number)+')':''}
+        &nbsp;<button class="link-like" onclick="clearActiveProject()">change</button></div>`;
+
+      reflectSOPStatus(active);
+    }
+
+    function clearActiveProject(){ ProjectData.setActive(null); renderProjectPicker(); applyActiveProject(); }
+
+    // Reflect SOP completion on the tool cards (scoped to the active project).
+    function reflectSOPStatus(active){
      let complete = false, projName = '';
      try {
        complete = localStorage.getItem('wp_suite_sop_complete') === '1';
        const sop = JSON.parse(localStorage.getItem('wp_suite_sop') || 'null');
        projName = sop && sop.project && sop.project.name || '';
+        // Only treat the SOP as belonging to this project when names match.
+        if(active && projName && active.name && projName !== active.name) complete = false;
      } catch(e){}

      const sopCard = document.getElementById('card-sop');
      const sopBtn = document.getElementById('card-sop-btn');
      const wpCard = document.getElementById('card-wp');
      const wpBtn = document.getElementById('card-wp-btn');
+      if(!sopCard) return;
+
+      // reset (re-render can run multiple times)
+      sopCard.classList.remove('complete');
+      wpCard && wpCard.classList.remove('disabled');
+      const oldStatus = sopCard.querySelector('.card-status'); if(oldStatus) oldStatus.remove();

      if(complete){
        sopCard.classList.add('complete');
@@ -497,7 +631,9 @@
        if(wpCard) wpCard.classList.add('disabled');
        if(wpBtn) wpBtn.textContent = 'Complete SOP first';
      }
-    })();
+    }
+
+    initProjects();

    let allComments = [];

--- a/html/project-data.js
+++ b/html/project-data.js
@@ -0,0 +1,80 @@
+/* Shared project layer for the Work Package Suite.
+   Projects are the top-level container — every SOP and Work Package belongs to
+   one. Project records live in the SQL database (via /api/projects); this
+   adapter is API-first and falls back to a localStorage mirror so the suite
+   still works in local dev / offline. Included by the home page and the suite. */
+(function (global) {
+  'use strict';
+
+  var API = '/api';
+  var LS_PROJECTS = 'wp_projects';        // local mirror of the project list
+  var LS_ACTIVE = 'wp_active_project';    // active project id
+  var LS_ACTIVE_OBJ = 'wp_active_project_obj';
+
+  function uid() { return 'proj_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6); }
+  function esc(v) { return v == null ? '' : String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+
+  function readLocal() { try { return JSON.parse(localStorage.getItem(LS_PROJECTS) || '[]') || []; } catch (e) { return []; } }
+  function writeLocal(list) { try { localStorage.setItem(LS_PROJECTS, JSON.stringify(list)); } catch (e) {} }
+  function cacheUpsert(p) {
+    var list = readLocal();
+    var ix = list.findIndex(function (x) { return x.id === p.id; });
+    if (ix >= 0) list[ix] = p; else list.unshift(p);
+    writeLocal(list);
+  }
+  function cacheRemove(id) { writeLocal(readLocal().filter(function (x) { return x.id !== id; })); }
+
+  var SAMPLE_PROJECT = {
+    name: 'Micron — INC Construction Work Packages', number: '26-67-008',
+    client: 'Micron Technology, Inc.', division: 'Semiconductor',
+    site: 'Boise, ID — Fab', sample: true
+  };
+
+  var ProjectData = {
+    SAMPLE: SAMPLE_PROJECT,
+    esc: esc,
+
+    // Returns the project list. Tries the API; falls back to the local mirror.
+    list: function () {
+      return fetch(API + '/projects', { headers: { 'Accept': 'application/json' } })
+        .then(function (r) { if (!r.ok) throw 0; return r.json(); })
+        .then(function (rows) { writeLocal(rows); return rows; })
+        .catch(function () { return readLocal(); });
+    },
+
+    get: function (id) {
+      return fetch(API + '/projects/' + encodeURIComponent(id))
+        .then(function (r) { if (!r.ok) throw 0; return r.json(); })
+        .catch(function () { return readLocal().find(function (x) { return x.id === id; }) || null; });
+    },
+
+    // Create or update. Assigns an id when new. Mirrors to localStorage either way.
+    save: function (p) {
+      if (!p.id) p.id = uid();
+      return fetch(API + '/projects', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(p)
+      })
+        .then(function (r) { if (!r.ok) throw 0; return r.json(); })
+        .then(function (saved) { cacheUpsert(saved); return saved; })
+        .catch(function () { cacheUpsert(p); return p; });   // offline / no API → local only
+    },
+
+    remove: function (id) {
+      return fetch(API + '/projects/' + encodeURIComponent(id), { method: 'DELETE' })
+        .then(function () { cacheRemove(id); })
+        .catch(function () { cacheRemove(id); });
+    },
+
+    // ── active project context ────────────────────────────────────────────────
+    getActiveId: function () { try { return localStorage.getItem(LS_ACTIVE) || ''; } catch (e) { return ''; } },
+    getActive: function () { try { return JSON.parse(localStorage.getItem(LS_ACTIVE_OBJ) || 'null'); } catch (e) { return null; } },
+    setActive: function (p) {
+      try {
+        if (p) { localStorage.setItem(LS_ACTIVE, p.id); localStorage.setItem(LS_ACTIVE_OBJ, JSON.stringify(p)); }
+        else { localStorage.removeItem(LS_ACTIVE); localStorage.removeItem(LS_ACTIVE_OBJ); }
+      } catch (e) {}
+    }
+  };
+
+  global.ProjectData = ProjectData;
+})(window);
--- a/html/work-package-suite-app.js
+++ b/html/work-package-suite-app.js
@@ -130,8 +130,9 @@ window.addEventListener('DOMContentLoaded',()=>{
  updateStepUI();
  updateProjectDisplay();

-  // Deep-link: ?tab=sop | ?tab=wp | ?view=dashboard from the home page cards.
+  // Deep-link: ?tab=sop | ?tab=wp | ?view=dashboard | ?project=<id> from the home page.
  const params = new URLSearchParams(window.location.search);
+  applyProjectContext(params.get('project'));
  const tab = params.get('tab');
  if(params.get('view') === 'dashboard') switchTool('wp');
  else if(tab === 'wp' || tab === 'sop') switchTool(tab);
@@ -284,8 +285,11 @@ function renderWPTab(){
    gate.style.display = 'none';
    frame.style.display = 'block';
    // Reload each time so the creator picks up the latest SOP from localStorage.
-    const wantDash = new URLSearchParams(window.location.search).get('view') === 'dashboard';
-    frame.src = 'wp-creation-index.html?embedded=1' + (wantDash ? '&view=dashboard' : '') + '&t=' + Date.now();
+    const sp = new URLSearchParams(window.location.search);
+    const wantDash = sp.get('view') === 'dashboard';
+    const projId = sp.get('project') || (activeProject && activeProject.id) || '';
+    frame.src = 'wp-creation-index.html?embedded=1' + (wantDash ? '&view=dashboard' : '')
+      + (projId ? '&project=' + encodeURIComponent(projId) : '') + '&t=' + Date.now();
  }else{
    gate.style.display = 'block';
    frame.style.display = 'none';
@@ -297,8 +301,40 @@ function onSOPReady(){
  if(currentTool === 'wp') renderWPTab();
 }

+// Active project comes from the home page (?project=<id> + ProjectData.getActive()).
+// When the SOP's project fields are still empty, prefill them from the project
+// record so the SOP is authored against the chosen project.
+let activeProject = null;
+function applyProjectContext(projectId){
+  try { if(typeof ProjectData !== 'undefined') activeProject = ProjectData.getActive(); } catch(e){}
+  if(projectId && (!activeProject || activeProject.id !== projectId)){
+    // Deep-linked to a project we don't have cached yet — resolve it, then prefill.
+    try {
+      if(typeof ProjectData !== 'undefined'){
+        ProjectData.get(projectId).then(p => { if(p){ activeProject = p; ProjectData.setActive(p); prefillProjectFields(); updateProjectDisplay(); } });
+      }
+    } catch(e){}
+  }
+  prefillProjectFields();
+}
+function prefillProjectFields(){
+  if(!activeProject) return;
+  const set = (id,v)=>{ const el=document.getElementById(id); if(el && !el.value && v) el.value = v; };
+  set('proj_name', activeProject.name);
+  set('proj_number', activeProject.number);
+  set('proj_client', activeProject.client);
+  set('proj_division', activeProject.division);
+  set('proj_site', activeProject.site);
+  if(typeof state !== 'undefined' && state.project){
+    state.project.name = state.project.name || activeProject.name || '';
+    state.project.number = state.project.number || activeProject.number || '';
+    state.project.client = state.project.client || activeProject.client || '';
+    state.project.division = state.project.division || activeProject.division || '';
+    state.project.site = state.project.site || activeProject.site || '';
+  }
+}
 function updateProjectDisplay(){
-  const projName = document.getElementById('proj_name')?.value || 'Project';
+  const projName = document.getElementById('proj_name')?.value || (activeProject && activeProject.name) || 'Project';
  const display = document.getElementById('project-display');
  if(display) display.textContent = sopComplete ? `✓ ${projName} (SOP Ready)` : projName;
 }
--- a/html/work-package-suite.html
+++ b/html/work-package-suite.html
@@ -369,6 +369,7 @@
  </div>

  <script src="feedback-config.js"></script>
+  <script src="project-data.js"></script>
  <script src="work-package-suite-app.js"></script>
 </body>
 </html>
--- a/html/wp-creation-app.js
+++ b/html/wp-creation-app.js
@@ -43,6 +43,7 @@ const EXAMPLE_PKG = {"number":"WP02-1P-ELEC-Conduit","status":"Issue","subject":

 // ── STATE ────────────────────────────────────────────────────────────────────
 let SOP=null, editingId=null, numberDirty=false;
+let activeProjectId='';  // set at boot from ?project=<id>; stamped onto saved WPs for the API
 let pkgMaterials=[], pkgAttach=[], pkgConstraints=[], pkgSignoffs=[], pkgHolds=[], pkgWorkSteps=[], pkgAssets=[];
 let pkgOverrides={};   // {fieldId: reason} for SOP-locked fields that were edited
 let numberDims={};     // {Sector:'', Discipline:''} dimensions that build the WP number (comment 3)
@@ -631,6 +632,7 @@ function collectPackage(){
  const prev=editingId?savedPackages.find(p=>p.id===editingId):null;  // carry instance/split linkage across edits
  return {
    id: editingId || ('wp_'+Date.now().toString(36)+Math.random().toString(36).slice(2,5)),
+    projectId: (prev&&prev.projectId) || activeProjectId || '',
    instanceOf: prev?prev.instanceOf:undefined, instanceLabel: prev?prev.instanceLabel:undefined,
    parentNumber: prev?prev.parentNumber:undefined, split: prev?prev.split:undefined, children: prev?prev.children:undefined,
    number:gv('wp_number'), status:getRadio('status')||'Draft', subject:gv('wp_subject'),
@@ -1016,6 +1018,7 @@ loadStore();
  // and prefer the SOP the Suite just completed (persisted to localStorage).
  const params = new URLSearchParams(location.search);
  if(params.get('embedded')) document.body.classList.add('embedded');
+  activeProjectId = params.get('project') || (typeof ProjectData!=='undefined' && ProjectData.getActiveId && ProjectData.getActiveId()) || '';
  try {
    const raw = localStorage.getItem('wp_suite_sop');
    if(raw){
--- a/html/wp-creation-index.html
+++ b/html/wp-creation-index.html
@@ -276,6 +276,7 @@
 </aside>

 <script src="feedback-config.js"></script>
+<script src="project-data.js"></script>
 <script src="wp-creation-app.js"></script>
 </body>
 </html>