GSB-Construction/docs/PLAN-project-wizard-dropdown-display.md

PLAN - Fix Project Wizard Dropdown Display Values

Improve the UX of the Project Setup Wizard by ensuring that all select dropdown elements display their human-readable name/label when selected and closed, instead of showing the raw ULID value.

Proposed Changes

Project Management Module (Frontend)

[MODIFY] Wizard.tsx

Pass the corresponding mapped items array to all 6 <Select> elements:

1. Step 2 (Milestone Select):
   • Pass items={localMilestones.map((m, mIdx) => ({ value: m.ulid || String(mIdx), label: m.name || Milestone ${mIdx+1} }))}
2. Step 4 (Labor Task Select):
   • Pass items={project.tasks.map(t => ({ value: t.ulid, label: t.name }))}
3. Step 4 (Labor Trade Select):
   • Pass items={laborRates.map(r => ({ value: r.ulid, label: r.trade_name }))}
4. Step 5 (Equipment Task Select):
   • Pass items={project.tasks.map(t => ({ value: t.ulid, label: t.name }))}
5. Step 5 (Equipment Select):
   • Pass items={equipmentRates.map(r => ({ value: r.ulid, label: r.equipment_name }))}
6. Step 7 (Reviewing Admin Select):
   • Pass items={employees.map(e => ({ value: e.ulid, label: ${e.name} (${e.email}) }))}

---

Verification Plan

Automated Tests

• Run TypeScript type checks and lint checks:

  npm run lint
  npx tsc --noEmit
  

Manual Verification

1. Open the Project Wizard and navigate through Step 2, Step 4, Step 5, and Step 7.
2. Select a value for each dropdown and verify that the trigger displays the human-readable text (e.g. Milestone Name, Task Name, Trade Name, Equipment Name, Employee Name) rather than the raw ULID.

✅ PHASE X COMPLETE

• TypeScript Typecheck: ✅ Pass
• Security: ✅ No critical issues
• Build: ✅ Success
• Date: 2026-06-01