Settings workspace

One Settings screen for the whole company, organised into five plain-English categories — Team, Operations, Portals, Communications, Account.

What it is

Every configuration surface in the platform lives behind one Settings view with a grouped chip nav. Tabs are declared once in a registry, and the rail, the right-click Command Portal, the search box and the mobile sheet all read that same list. Tabs are role-gated: most are admin-only, Team Members opens to crew leaders too, and Help & Support opens to everyone.

Also called: settings · admin panel · account settings · where do I change this · configuration

See it
Settings workspace
🔒ridgelinepostframe.com/project/settin655
Equipment Storage
Framing · on schedule
Screenshot the desktop Settings header: five labelled chip rows (TEAM / OPERATIONS / PORTALS / COMMUNICATIONS / ACCOUNT) with the active tab as a dark chip. Rendered by SettingsView.tsx nav block. Sample data — no customer information appears here.
How it works
  1. 1SETTINGS_TABS in lib/settingsNav.ts declares each tab: id, label, icon, adminOnly, hiddenInNav, requiresBuilder3d.
  2. 2SETTINGS_GROUPS assigns each tab id to one of five categories; the desktop nav renders one wrapping chip row per category.
  3. 3SettingsView filters the registry by the viewer's permissions and by the agency 3D-builder grant before rendering.
  4. 4Choosing a tab rewrites the hash (#/settings/<tab>) so the screen is bookmarkable and shareable.
  5. 5A deep-link guard bounces a non-admin off an admin-only tab to My Profile — but only once Clerk has finished loading the role, so a real admin is never bounced mid-hydration.
Why we built it

The tab list used to be typed out in several places and had already drifted: the file notes that sub_agreement, automations and pay_structure all existed as tabs while their deep links silently redirected to Team Members — and that a bookmark landing on the wrong page looks like the page was deleted. The five categories came out of the IA redesign, whose code comment records the reasoning: the old Customers junk drawer split so the portal (genuinely customer-facing) got its own category while stages/SOPs/catalog/contracts became internal OPERATIONS; Messaging was too shallow for a group holding notifications and automations so it became COMMUNICATIONS; and My Business is identity so it lives with Brand.

The problem
  • Tab lists were duplicated across nav surfaces and drifted out of sync, silently breaking deep links.
  • Configuration had no vocabulary — nobody could tell a colleague where a control lived.
  • Non-admins could reach admin-only tabs through a stale hash.
Sound familiar?
What you get
Every settings surface is reachable from one screen with one naming scheme.
Adding a tab in one file makes it appear in the rail, the search index and the right-click menu at once.
Bookmarks and shared links keep landing on the right page after tabs are reorganised.
What's inside
Search your settings
A search box on the Settings title row that finds categories, tabs, sub-tabs and individual sections, and jumps you straight there.
How Settings is organised (the legend)
An info modal behind the ⓘ on the Settings title that explains the category → tab → section → subsection vocabulary with little replicas of the real UI.
On-this-page section index
A slide-out index on the right edge of any settings tab that lists its sections and sub-tabs, numbers them, and highlights whichever one you are reading.
Settings deep links that never 404
Every settings tab has a hash URL, and retired tab ids stay alive as aliases that open the right sub-tab inside whatever shell absorbed them.
Settings navigation on a phone
On mobile the chip rows collapse into a one-line selector in the top banner that opens a grouped bottom sheet of every settings tab.
Looking-for cross-reference card
A dashed card on the tab where you'd reasonably look for a setting, pointing at the tab that actually owns it.
Right-click go-anywhere menu
Right-click anywhere in the app to get one panel that navigates the whole platform and every settings category, with fly-outs per category.
Bug reports that know which settings tab you were on
The in-app bug reporter is told the exact settings tab and expanded section you were looking at, so a report reads 'Settings → Team Members' instead of just 'Settings'.
Client Portal settings — one sub-tab per customer stage
The customer's whole funnel configured as four sub-tabs — Estimate, Form, Contract, Dashboard — each the control surface for what the customer sees at that stage.
Project Stages settings — stages, notifications, analytics
One tab covering what the stages are, who hears about them, and how they actually go — with the sub-tab and even the stage id in the URL.
Settings panels that paint instantly
Heavy settings panels paint their last-known state immediately, then replace it with the live data — and show a stable skeleton rather than an empty form while loading.
No native browser dialogs in settings
Destructive settings actions use branded confirm dialogs and branded selects and toasts rather than the browser's own prompts.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →