Helm Page Mockups

Proposed redesign

Tighter: about half the old spacing. Cards, rows and headers are compact. The gap between the content and the side panels is tighter on every page (Deb, 2026-09-26): a design-system change to PageContainer.
Colour: section tints come from the brand pair and chart ramp (navy, clay, slate, rose, stone). Status colours are used only for status.
Collapsible cards: every card folds to its header, showing status dots like the panel rails plus a one-line summary. On phone they start collapsed.
Left panel, My queue: your task queue, with rail dots for due today and due Monday.
Right panel, your view: each person picks what the right panel shows for their role: Collections call list, Change orders, Lien deadlines, Vendor holds or Today's work orders. The panel heading and rail dots follow the pick, and it is saved as their view.
Customize board (next to quick actions) turns each card, the company strip and the mottos on or off.

Build notes

Home → My Dashboard (/home). Uses the real PageContainer with both TogglePanels. Below 1024px the panels stack above and below the board.
Right-panel default comes from the person's org-chart role (AR → Collections call list, PM → Change orders, field coordinator → Today's work orders). They can change it, and their pick is saved.
In this mockup, the right-panel view and board choices save to this browser only. In Helm it would save to the user's profile.
Card icons borrow existing roles and need their own. The script line uses Caveat from Google Fonts.
All rows are illustrative sample data.

Proposed redesign

Summary strip: functions this phase, primary, secondary, daily effort, content ready.
Grouped cards by department (or by your part), each collapsible with status dots. Rows show number, function, systems, your part, frequency, size, effort and content readiness.
Left panel, My roles: the roles you hold and the people you share functions with.
Right panel, Needs attention: content not started or in review, and new feedback replies.

Build notes

Home → My Functions (/hub/my-functions), built in pages/tower/hub/my-functions/index.tsx.
Rows need content status and systems per function, which GET /api/hub/me/functions does not return today.
All rows are illustrative sample data.

Proposed redesign

Details card (collapsible, like every card): department, work-order type, number, frequency, size and both efforts in one compact band. Editing turns it into fields in place, with Save, Cancel and Delete underneath.
Where it sits: three functions in a row: the one before (linked), this one, and the one it hands off to (linked), each with its number, role and trigger.
Roles: primary and secondary role, track, people (you marked), and the role's other functions as links.
Content is only Policies, Job aids and Courses, each with status and writer (a writer picker for managers). The job aid title opens its detail page.
Systems shows the primary system, notes and docs/process links. Managers get an Edit button on the card that opens a systems dialog: set the primary, change module and note, remove, or add a system.
Left panel, In the flow: before this function, what this function is, and what comes after, in short prose on a timeline, then the switcher to jump between your functions. Right panel: feedback history and a Give feedback button, replacing the floating Feedback button.
Every role and system name (in Where it sits, Roles and Systems) opens a quick-view dialog with its key facts, people or modules, and the functions it touches, plus an Open role page / Open system page button to its full detail page.
Use Show as to see the member view, manager view, editing, delete confirm, the feedback, systems, role and system dialogs.

Build notes

/hub/my-functions/:id, built in FunctionDetail.tsx, which is read-only today. Edit, delete, writer assignment and system add/remove come from the Base44 Beacon Hub screens you shared and are manager-only.
Deleting a function removes its system links. Its content assets stay in Content Assets, unlinked (Deb, 2026-09-26).
Feedback reads and writes hub.feedback. All rows are illustrative sample data.

Proposed design

Opened from a function's content list. Breadcrumb: My Functions › the function › the job aid. There is no My Job Aids page.
Review strip when it isn't published: members see who is reviewing; the reviewer gets Send back and Approve and publish.
Open PDF in the header, and a PDF link in the Details card: the job aid as a printable PDF.
Details card: type, status, writer, reviewer, system, who it's for, PDF, last updated. The system and role names open their quick-view dialogs, as do the roles under Used by.
The job aid: numbered steps, with a "check before you save" callout.
Used by: the functions that use it (linked). Goes with: the function's policy and course.
Left panel, In the flow: what comes before this job aid, what it is for, and what comes after, told in short prose on a timeline. Function names link to their pages; role and system names open their quick views. Below it, the function's three content items with this one outlined.
Right panel: feedback and review notes.

Build notes

Route /hub/content/:id already exists for learners (content/AssetDetail.tsx, view mode, #2720). This redesigns it.
Content types shown on Home pages are Policy, Job aid and Course only. The repo's types today are course, job_aid, sop and live_session_guide.
Steps and the callout are illustrative, not Beacon's real procedure.

Proposed design

Six phases side by side: Sales, Planning & Design, Construction, Testing & Trimout, Closeout, Warranty (Closeout first, Deb). Every job sits in one, on a small card with its name, client, a badge with its stage, and small indicators.
Drag and drop (Deb, 2026-09-26: every card view): drag a job to another phase and it lands in that phase's first stage; with a phase open, drag it to another stage. Mouse: press and move. iPad and phone: press and hold, then move.
Indicators: No PM and Hold in red, open RFIs in blue, a change order waiting in orange. Each phase header carries its job count, value and status dots.
The phase header is a toggle. Click it and the phase animates open to show its stages as columns with larger cards; click the header again to go back to all phases. The other phases slide left and right into collapsed rails with their count and dots; click a rail to jump to that phase. The stage badge drops off the cards once the phase is open, because the column already says the stage. Try it in the browser frame.
Job summary: click any card and a summary flies in from the right, over the board and between the two side panels, which stay put. It shows the job #, phase, stage, flags, contract or proposal value, PM or estimator, the phase's stages with this job's place and days in stage, details, and open items (lien hold, RFIs, change orders). Open job goes to the full job page; Open in HubSpot opens the record. Close with × or Esc. On phone it fills the screen.
AI board summary (new feature, not built): a Summarize board button in the toolbar runs the Board summary skill over the jobs on the board now (after filters). A summary card opens above the board: a one-line overview, then numbered points. Every job a point names is underlined and clickable (opens the job summary), and is highlighted on the board in purple with that point's number. Phase headers and rails show how many of their jobs are called out. Pointing at or tapping a point dims every other job and scrolls its jobs into view. Regenerate reruns it; Clear removes the card and the highlights. Purple is kept for AI so it never reads as a status colour.
Totals: each stage column ends with its stage total, and each phase ends with its phase total.
Cards are the ones on the Job card page: the name is always the top line, and every card on the board carries the same rows so they are always the same height (small 90px and large 97px with the defaults), no labels, tooltips for the detail. The stage has its own row on small cards. Phase columns are at least 136px wide so no card gets narrower than 124px; below that the board scrolls sideways.
Key to the card icons sits at the bottom of the kanban, collapsed to a one-line strip; open it to see every icon explained.
Card properties: each person picks what else shows on cards, from Job #, Value, PM or estimator, Days in stage, City, Job type and Start date. Value, PM and Days in stage are on by default. The same pick shows on small and large cards and is saved as their view.
Phases and stages match HubSpot one to one. A HubSpot pipeline is a phase and its stages are that phase's columns, in HubSpot's order. The stage names in this mockup are illustrative.
Left panel, Filters and cards: only my jobs, PM or estimator, client, only jobs with an indicator, and Show on cards for the card properties. Right panel, Needs attention: open RFIs and change orders awaiting approval; notices and safety still say Coming soon.
Phone: the phases stack as collapsed cards. Opening one shows its stages as swipeable columns, with a chip per stage to jump to it.

Build notes

/jobs/dashboard, built in pages/tower/Jobs.tsx. Today it groups by stage or client from whatever stages the jobs carry, and keeps leads (pending jobs) out of the board in the Leads panel. This design puts leads on the board as the Sales phase.
Where phases and stages come from (Deb, 2026-09-26): the Sales phase is the Contract Workflow pipeline on the HubSpot deals object. Every other phase is a pipeline on the HubSpot jobs object. Each pipeline is one phase and each of its stages is one column, matched one to one: same names, same order.
Data is left alone until cutover (Deb, 2026-09-26). Pipelines, stage names, sync and any fields the Job model doesn't return yet are sorted then. Filed as [Epic] Jobs #3431, Jobs Dashboard #3432 and sub-stories #3433 to #3438.
Days in stage needs the date each job entered its stage. The Job model does not return it today, and it does not return a start date for leads.
The AI summary is mocked with fixed text. The build needs the Board summary skill, which returns the summary plus the job ids for each point, so the board can highlight them.
In this mockup the card properties save to this browser only. In Helm they save to the person's profile.
All jobs, clients and figures are illustrative sample data.

Proposed design

Same height, always. Every card on a board carries the same rows, so every card is the same height. With the defaults a small card is 90px and a large card 97px; each field added under Show on cards adds one row to every card. Long text truncates to one line instead of wrapping.
No labels. Value, days in stage, open items, the PM and the stage bar carry no captions. Hover any of them for the detail: full name and job facts, the full client line, the stage and its number, the exact value, days in stage, what each icon means, the PM's name, and the phase's stages with this job's place.
Small card (all phases view): name / client / stage badge on its own row, always readable (Deb, 2026-09-26) / value, days in stage, open-item icons and PM initials. With two or more open items the bottom row compacts: a count of 1 shows as the icon alone, and days in stage shows only as a red clock when past 30. It fits down to a 124px card, so board columns need a minimum width to match.
Key to every icon sits above the cards. The Jobs Dashboard carries the same key under the board.
Large card (opened phase): name on top / client / any chosen fields / segmented stage bar / value chip, days in stage, open-item icons and PM initials. No stage badge: the column says the stage.
Show on cards works here too, with Show all and Defaults. Job #, City, Job type and Start date each get their own row, marked by an icon (#, pin, tag, calendar) with the label in the tooltip.

States shown

Plain, everything open (lien hold, RFI, change order, past 30 days), no PM, long names, called out by AI, a one-stage phase (no stage bar), and selected.
"In a column" shows three cards stacked, to check that columns stay in step.

Proposed design

Tabs become a side menu (Deb) down the left of the job content, nested so it stays short (proposal): Overview; Contract (opens to SOV, Change Orders, Invoices, Lien & Collections, Credit Memos); Procurement (Purchase Orders, Subcontracts, Sales Confirmations, Material Check Ins); Coordination (RFIs, Submittals, Documents); Construction (Daily Logs, Time, Appointments, Other Submitted Forms); Inspections (Initial, Final); Close Out; Warranty (separate, Close Out first, Deb); Activity. Closed groups show their total count; the group holding the open section starts open. Lists not built yet sit where they belong (Deb), greyed with a "Soon" tag and the reason on hover.
Phone: one long list (Deb). Every section stacks down the page in the same order. The section menu stays a drop-down (Deb), pinned to the top while you scroll: it shows the section you're in, and picking one scrolls to it. Every section bar has a Top button, and a floating back-to-top button appears once you scroll.
Hero: "Own the details. Own the outcome.", the six phases filled to the current stage, the stage in large type, then contract, outstanding, end date with time used, and the PM.
Left panel, Job timeline (a Projects module feature, paid): every phase and stage with done dates, the current stage, and what's coming up. Click a phase to open its stages; click a stage to see what was completed and what's due (red when overdue). Free Tower keeps Leads here (see "Free Tower").
Detail modals (Deb: create one where there should be one): RFIs, submittals, invoices, change orders, sales confirmations, signed documents, statutory notices, vendor holds and the collection account each open a detail modal with their facts, the stored PDF and their next actions. Purchase orders and subcontracts open the purchase order modal. Lien records carry an explicit button to their record in the Lien Tracker (Deb): Open notice in Lien Tracker (notice editor), Open hold in Lien Tracker (Vendor Holds, that hold selected), Open account in Lien Tracker (collection account). Needs attention cards open their record; the SOV card opens SOV with the line picked out.
Contract detail modal (Open contract): tabs for Summary (numbers, parties, reps), Values & change orders (the value roll-up and every change order, each opening its own modal), SOV lines, Terms & scope (payment, retainage, billing, waivers, warranty, insurance, scope, exclusions) and Signed documents; Edit contract and New change order in the footer.
Send notice (Lien & Collections): Details (notice type, claim month, SOV line, claim amount and statutory deadline filled in, recipients owner / GC / surety) → Review (summary and notice preview) → Sent (confirmation, Open notice in Lien Tracker). Save draft keeps it as a draft notice.
Process sales confirmation (Procurement → Sales Confirmations; Deb): upload the vendor's confirmation → AI match to a purchase order (or pick it) → review every line against the PO (back-ordered, price differs, not on the PO) → submit. Each issue is logged as an event on the PO and routed (back-orders to the PM, price and extra lines to purchasing). Sales confirmations are the vendor's, matched to our POs. The steps run in order (Deb: linear, no jumping). Save for later on every step keeps it as a draft under Needs match; opening the draft picks up at the step where it was left.
New submittal (Coordination → Submittals; Deb): To (GC, subcontractor, AHJ or other) with recipient, title and spec section; Helm assigns the number → import documents (or pick from the job's) → notes and an auto-built cover sheet → email composed and sent from Helm with the cover sheet and documents attached; replies file on the submittal. Same as sales confirmations (Deb): the steps across the top are clickable, and Save for later keeps it as a Draft in Submittals (number already assigned) that reopens where it was left.
Pull from HubSpot quote (SOV; Deb: sync quote lines to SOV): reads the quote, shows every line as Unchanged, Update, Add or Kept (added in Helm), you tick which changes to apply, then it applies them and flags changed lines for reconciliation.
Specced for dev rather than mocked (Deb, option A): Add SOV line, New RFI (to GC or subcontractor), New invoice (existing form), New change order (existing form), Edit lien setup (existing form), and the one-click actions as confirm prompts.
Contract → Signed documents: every signed copy (contract, exhibits, executed change orders) is stored in Helm on the job, opens in a preview modal, and can be added or replaced; replacing keeps the old version.
Contacts sit under Needs attention in the right panel (Deb): Beacon (Account Manager, Site Contact) and the client (Project Manager, AP Contact, Site Contact), each with call and email buttons and an edit pencil for the list.
Right panel, Needs attention on this job: holds, approvals, overdue RFIs and deliveries, resubmittals, unsigned sales confirmations, SOV gaps. Each opens its section.
Every record list is one component: search; Filter (status, vendor or client, SOV line); group by SOV line, vendor/client, status or none; sort; and a List / Cards switch. Cards are always by status, one column per status with its count and total.
Contract (in scope, Deb): values (original, approved change orders, revised, billed, left to bill, with a paid / billed bar), change orders pending and retainage held, client numbers (contract #, PO #, project #, bid package, owner, GC), people (client contract rep, client billing, Beacon contract owner), terms, and the SOV lines on the contract. Open contract goes to the contract detail page.
SOV line is on Sales Confirmations, Invoices, Change Orders, Purchase Orders and Subcontracts. The SOV table shows each line's sales confirmation, and the Overview shows billed against each line.
Overview cards: Contract, Schedule of values, Site and people, Schedule. Every field shows, "—" when blank (#2327). The hold banner and the three create buttons stay; on phone the buttons fold into one New menu.

Proposed design

Jobs → Purchase Orders: every job's purchase orders, grouped by job (Deb). Each group is collapsible, with the job, job #, client, phase, order count and total. Groups start collapsed every time, with Expand all and Collapse all in the toolbar (Deb). New purchase order opens the purchase order modal empty.
Jobs → Subcontracts is this same page, filtered to purchase orders of subcontract type (Deb). Same cards, fly-in, filters (including the Vendor dropdown), groups and modal; only the title and the New button change. See Subcontracts under Show as.
Search, group, sort in the toolbar: group by job, vendor or status, or none; sort by newest, needed by, amount or vendor.
List or Cards (Deb, 2026-09-26), a toggle in the toolbar, on Purchase Orders and Subcontracts. List is the grouped view (group by job, vendor or status; groups start collapsed; switching views opens them). Cards are in columns by status (Deb): draft, waiting approval, approved, sent, partly received, received, billed, cancelled, each with its count and total. Every column always shows, even when empty. Columns accordion open and closed like the Jobs Dashboard phases: tap a column to open it wide with full cards, the others fold to narrow rails; tap again for every column. On phone the columns stack and open one at a time. Cards drag between columns to change status (mouse: press and move; iPad and phone: press and hold, then move). See List view under Show as.
Summary strip: open orders and their value, waiting on approval, out with vendors, overdue deliveries.
Cards in the Job card style: all the same height, no labels, tooltips for detail. PO # and status; vendor; lines and who created it; a five-step bar (draft, approved, sent, received, billed); total, needed by (red when overdue), AI-import and not-linked icons, creator's initials. A collapsible key sits at the bottom.
Fly-in, very succinct: status, vendor, job, total and line count, the five steps, needed by and received, the first three lines, then Open (the purchase order modal) and the one next step (Approve, Send to vendor, Receive, Enter bill).
Left panel, Filters: only my jobs, waiting on my approval, status, vendor, and only orders that are overdue, have unlinked lines or came from AI import. The Vendor dropdown lists every vendor on the page with its order count. Right panel, Needs attention: waiting on your approval, overdue deliveries, lines not in the parts list.

Build notes

Replaces the register at /jobs/purchase-orders (JobPurchaseOrdersList.tsx / PurchaseOrders.tsx).
Approval, sent-to-vendor, received percentage by line, needed by, AI-import and parts-list links depend on the feature issues under #3441.
All orders, vendors and amounts are sample data.

Proposed design

One modal for every purchase order, opened to create or open one from Jobs → Purchase Orders (the job-focused view). Bigger: up to 1180 × 860, with the order on the left and a summary rail on the right.
Header: PO number and status, the job, the vendor, and Import document (AI).
Details: vendor (with email and phone), job (set by where it was opened), needed by, deliver to site or will call, ship-to, vendor quote #, note to vendor.
Items connect to the parts list. Each line picks a part by number or name; a line that isn't linked shows Link to parts list, which offers the closest matches or adds it as a new part. Qty and unit cost edit in place; amount, SOV line, remove. Long orders (about 40 lines is normal, Deb): Details collapses to a one-line summary, a Find-a-line search appears with counts of unlinked lines, and the column headings stay pinned while the lines scroll. On phone the lines are stacking rows (part, description, amount, qty × cost); tapping one opens it accordion style to edit qty, unit cost, SOV line, change the part or remove it (Deb).
Import at the items: CSV, Excel, or paste rows, then match columns and review each row's parts-list match (matched, suggested, not in the parts list). The column matching is remembered per vendor.
AI import reads a whole quote (PDF, Excel, CSV, email, photo, Word), fills in the vendor, quote #, dates, ship-to, freight and every line, shows the document with what it read highlighted and a confidence on each value, matches lines to the parts list, and checks prices against past orders. Nothing is applied until you press Apply; the document is attached to the order.
Actions: Delete (drafts only), Save, Save and close (Deb, 2026-09-26: closing saves, so it says so), Send (straight to the vendor when no approval is needed), Send for approval. The approver gets Approve and Reject. Once approved: Send to vendor, Download PDF, Cancel PO. Once sent: lines lock; Resend, Receive, Cancel PO. There is no separate change step (Deb, 2026-09-26): changing quantities and prices to match the vendor, and moving back-ordered lines to their own order, happen as part of receiving. Receive (see Show as): received on, received by, delivery ticket, packing slip; per line ordered and received quantity, unit cost (a changed cost shows what it was and why), and for a short line whether the rest is back ordered or not coming. "Everything arrived" fills it in. Saving creates PO-…-01 for back-ordered lines, updates changed prices with their history, and reduces lines that aren't coming. Billing is a separate, later step (Deb).
Rail: order total, the approval steps with the approver, attachments, activity.

Build notes

Replaces NewPurchaseOrderModal and EditPurchaseOrderModal (JobCreateModals.tsx) and folds in the actions on PurchaseOrderDetail.tsx.
Not in the data model today: a part link on PO lines, unit and unit cost (lines have amount and a quantity that isn't multiplied in), needed by, delivery, ship-to, vendor quote #, note, freight and tax, approval (status, approver, rule), sent-to-vendor, and delete. Statuses today are draft, issued, closed, cancelled.
The $5,000 approval rule is an example, not a decision.
The only import in Helm today is the supplier price-book CSV (pricingCsv.ts), which has column matching to reuse.
All vendors, parts, prices and people are sample data.

Proposed design

Jobs → Change Orders matches Purchase Orders (Deb, 2026-09-26): every job's change orders grouped by job, groups start collapsed every time, Expand all and Collapse all, search, group (job, client, status, reason, none) and sort (newest, waiting longest, amount, client). New change order opens the change order modal empty.
List or Cards (Deb), a toggle in the toolbar. List is the grouped view described above. Cards are in columns by status (Deb): draft, submitted, approved, billed, payment received, rejected, each with its count and total. Every column always shows; columns accordion open and closed like the Jobs Dashboard phases; cards drag between columns to change status (press and hold on iPad and phone). Purchase Orders and Subcontracts work the same way.
Statuses: Draft, Submitted, Approved, Billed, Payment received (the code's set) plus Rejected (Deb). The card bar shows draft, submitted, approved, billed, paid; a rejected change order shows its badge only.
Cards in the Job card style: CO # and status; title; SOV line and reason (or the job when not grouped by job); the five-step bar; total, how long it has been with the client (red over 14 days), a new-SOV-line icon, creator's initials. Collapsible key at the bottom.
Group header by job shows the client and the revised contract (original plus approved change orders).
Fly-in: status, title, job and client, total and lines, the five steps, SOV line, reason, days with the client, the contract now or if approved, the first lines, then Open and the one next step (Send to client, Mark approved, Bill it, Record payment, Revise).
Left panel, Filters: only my jobs, waiting on the client, status, Client dropdown, and only change orders that have waited over 14 days, are approved but not billed, or add a new SOV line. Right panel, Needs attention: waiting on the client over 14 days, approved but not billed, drafts not sent.

Build notes

Replaces the status board at /jobs/change-orders (ChangeOrders.tsx, five fixed columns, search only, no New button).
Not in the data model today: Rejected, SOV line, reason, client reference, schedule impact, line items (#2333), sent date and approver. An approved change order doesn't add to the SOV or contract value yet.
The 14-day threshold is an example, not a decision. All change orders, amounts and people are sample data.

Proposed design

One modal for every change order (Deb), to create or open one from Jobs → Change Orders, the job's header, the job's Change Orders section and the contract detail. Same size and layout as the purchase order modal.
Details: title, job, reason (owner request, field condition, design change, code / AHJ), number assigned by Helm, requested by (client contact), requested date, client reference # (their PCO), scope (prints on the change order), schedule impact in days.
SOV: adds to an existing SOV line or a new one. When approved, the total is added to that line and to the contract (Deb) so it can be billed.
Items with products (#2333): parts from the parts list, or typed labor, equipment and subcontract lines. Qty and unit price edit in place. Totals by type, markup (overhead and profit), change order total.
Rail: total and schedule impact, the contract (original, approved change orders, this one, revised), progress (draft, submitted, approved or rejected, billed, payment received), attachments (sent PDF, signed copy, client documents), activity.
Actions: Draft: Delete, Save, Save and close, Preview PDF, Send to client (email from Helm with the PDF for signature; status becomes Submitted and lines lock). Submitted: Back to draft (with a reason), Mark rejected, Mark approved (approved by, date, upload the signed PDF). Approved: Signed PDF, Bill it (New invoice with the SOV line and amount). Rejected: PDF, Revise (a new draft revision).

Build notes

Replaces NewChangeOrderModal (JobCreateModals.tsx: number typed by hand, description, amount, requested date) and the placeholder /change-orders/:id page.
The API allows draft → submitted → approved and submitted → draft with a reason; billed and payment received are set by invoicing. Rejected, send to client, the signed copy and line items are new.
The 15% markup is an example, not a decision. All parts, prices and people are sample data.

Proposed redesign

Up next leads the page: the one course to do now, with its screens, length and a single Continue button.
Your path shows Foundation, Frame and Finish as three steps, with where you are marked.
All training is one compact list per group, with each item's type, length, progress and one action. It still switches By layer or By role.
Side column shows overall progress, progress per role, and the job aids, SOPs and guides to keep handy. On tablet it moves below the list. On phone a Continue bar slides up at the bottom once the Up next card scrolls out of view. Scroll the phone frame to see it.

Build notes

Uses only fields GET /api/hub/me already returns: title, type, layer, duration, screen count, required, roles, progress. No new API work.
Type icons borrow existing roles (hub.courses, hub.job-aids, hub.content, hub.weekly-report). The build needs its own roles for these.
Home → My Learning is lit in the nav. Sample items are the dev fixtures from hub-dev-seed.sql.

Home

Proposed redesign

Build notes

Proposed redesign

Build notes

Proposed redesign

Build notes

Proposed design

Build notes

Proposed design

Build notes

Proposed design

States shown

Proposed design

Proposed design

Build notes

Proposed design

Build notes

Proposed design

Build notes

Proposed design

Build notes

Proposed redesign

Build notes

Browser 1440 × 900

Tablet 834 × 1112

Phone 390 × 844