Previews / Design / Settings layout

Settings layout — current vs Option A vs Option B

Today's /contractor-settings "Profile" tab is a kitchen-sink scroll: 8 sections (Contractor Info, Homepage, Pay Feature, Compliance Adhoc, Compliance Split, Timesheet, Shift Details, Fleet) all stacked. Two redesign directions to compare against the reference set.

Today Live

Sidebar with 9 entries (Profile, Regions, Manager Rotas, Allocation Rules, Fleet Alerts, Vision Alerts, Integrations, AI, Security). The "Profile" entry contains all 8 sub-sections in one scrolling form.

Reference: GitLab Free Settings (similar density, but with accordion). What ships now is the dense scroll without the accordion affordance.

/contractor-settings — Profile tab (today)Light

Settings

⚙Profile 🌐Regions ↻Manager Rotas ▣Allocation Rules ⚠Fleet Alerts ⚉Vision Alerts ⇄Integrations ✦AI 🔒Security
ⓘ Contractor Information
⌂ Homepage Settings
$ Pay Feature
Enable Pay Feature
✓ Compliance Settings — Adhoc Shifts
Allow Fridge Log Skip
Allow Check-in Skip
Allow Driver Declaration Skip
✓ Compliance Settings — Split Shifts
Allow Inspections Skip
Allow Fridge Log Skip
Allow Check-in Skip
Allow Driver Declaration Skip
⏱ Timesheet Settings
Adhoc Shifts — Allow Timesheet Manager Review
Split Shifts — Allow Timesheet Manager Review
Regular Shifts — Allow Timesheet Manager Review
Enable AM Timesheet Reminder Before PM Shift
↓ continues — Shift Details Settings, Fleet Settings, Product Information…

Why this reads as not-ideal

  • Kitchen sink. 8 sections in one tab fight for attention. None are clearly the primary task.
  • No save model visible. Likely one global save somewhere (or per-section silent). Either way the user can't see what's dirty vs not.
  • Mental-model mismatch. "Compliance" and "Timesheet" and "Fleet" are different operational concerns; merging them under "Profile" loses that.
  • Scaling pain. Adding a new section (e.g. Pay Defaults, Notification Preferences) just makes the scroll longer.
  • Section dividers are weak. Tiny icon + plain heading. Top-tier uses borders, cards, or separate pages to chunk dense content.

Option A — split sub-pages, sticky save bar Recommended

Promote the Profile sub-sections into their own sidebar entries. Each page is focused (~640px), with an inline save bar that appears when fields are dirty.

Reference: Stripe Settings, Linear Settings, Resend Settings, Anthropic Console. Calibrated against the same set we use across the polish bar.

/contractor-settings/timesheet — Option A · LightSticky save bar shown (dirty state)

Settings

Profile
⚙Identity 🌐Defaults 📍Regions
Operations
✓Compliance ⏱Timesheet ⚐Shift Details ▣Allocation Rules
Fleet
⚠Fleet Alerts ⚉Vision Alerts ⛟Fleet Defaults
Workspace
⇄Integrations ✦AI 🔒Security

Timesheet

Controls when timesheets are required, who can review them, and the windows that gate compliance breaches.

Manager review
Adhoc shifts — manager reviewRequire manager sign-off before adhoc timesheets close.
Split shifts — manager reviewRequire manager sign-off for split timesheets.
Regular shifts — manager reviewDefault for standard rosters. Off = drivers self-submit.
Reminders
AM timesheet reminder before PM shiftPush driver to confirm AM hours before next shift opens.
Windows
How early a driver may clock on relative to scheduled start.
NHVR-aligned default. Lowering tightens fatigue compliance.
1 unsaved change
/contractor-settings/timesheet — Option A · DarkSticky save bar shown

Settings

Profile
⚙Identity 🌐Region & defaults ⌂Homepage
Operations
▣Allocation Rules ↻Manager Rotas ✓Compliance ⏱Timesheet ⚐Shift Details
Fleet
⚠Fleet Alerts ⚉Vision Alerts ⛟Fleet Defaults
Workspace
⇄Integrations $Pay Feature ✦AI 🔒Security 📍Regions

Timesheet

Controls when timesheets are required, who can review them, and the windows that gate compliance breaches.

Manager review
Adhoc shifts — manager reviewRequire manager sign-off before adhoc timesheets close.
Split shifts — manager reviewRequire manager sign-off for split timesheets.
Regular shifts — manager reviewDefault for standard rosters. Off = drivers self-submit.
Reminders
AM timesheet reminder before PM shiftPush driver to confirm AM hours before next shift opens.
Windows
How early a driver may clock on relative to scheduled start.
NHVR-aligned default. Lowering tightens fatigue compliance.
1 unsaved change

What changes vs today (trimmed cut — 13 entries)

  • Sidebar grows from 9 entries to 13, grouped under Profile / Operations / Fleet / Workspace. Reads top-down the way an admin thinks: identity → daily ops → fleet config → workspace plumbing.
  • Profile collapses to Identity + Defaults + Regions. Defaults page rolls up data region, default region, "what we call route/vehicle", Pay Feature toggle, Homepage default — all the single-toggle / single-field misc that didn't earn its own page.
  • Compliance Adhoc + Split unify under one Compliance page. Manager Rotas folds into Allocation Rules (same operational concern). Pay Feature demoted from sidebar to a Defaults toggle (it's one switch, doesn't deserve a page).
  • Each page caps at ~640px wide, with section headers (Manager review / Reminders / Windows) inside. Reads in seconds, not minutes.
  • Sticky save bar appears when any field is dirty; "1 unsaved change" + Discard + Save. Never a guessing game about whether changes have stuck.
  • Helper text under fields (NHVR-aligned default, etc.) — every setting earns its hint. Lifted from Linear / Stripe / Anthropic, who treat helper text as non-negotiable on settings.
  • New settings = new sidebar entry, not a longer scroll. Linear-style growth.

Option B — accordion within Profile For comparison

Keep the existing 9-entry sidebar. Within Profile, each of the 8 sub-sections becomes a collapsible accordion item. First section open by default.

Reference: GitLab Settings, Salesforce Setup. Enterprise admin density pattern. Lighter lift than Option A but doesn't solve the kitchen-sink problem.

/contractor-settings — Option B · Light · 4 of 8 accordions visibleOne open

Settings

⚙Profile 🌐Regions ↻Manager Rotas ▣Allocation Rules ⚠Fleet Alerts ⚉Vision Alerts ⇄Integrations ✦AI 🔒Security

Profile

Contractor identity, defaults, compliance and ops settings. Click each to expand.

ⓘContractor Information
8 fields · last edited 3d ago
›
⌂Homepage Settings
1 field
›
$Pay Feature
Off · 1 toggle
›
✓Compliance — Adhoc Shifts
3 toggles · 0 enabled
›
✓Compliance — Split Shifts
4 toggles · 0 enabled
›
⏱Timesheet Settings
4 toggles · 5 fields
›
⚐Shift Details
1 toggle
›
⛟Fleet Settings
3 fields · 2 toggles
›

Pros and cons of Option B

  • Pro: minimal change to existing IA. No sidebar growth. Ships fast.
  • Pro: meta on each accordion head ("3 toggles · 0 enabled", "last edited 3d ago") gives context without expanding.
  • Con: save model gets clunky — either save-per-accordion (8 buttons) or one global save (which then doesn't know which accordion to scroll to on error).
  • Con: when 4 accordions are open at once, you're back to the kitchen-sink scroll, just with click-overhead.
  • Con: doesn't fit the reference set we calibrate against. Linear / Stripe / Resend never accordion — they sub-page.
  • Con: adding a new section = adding a new accordion to an already-tall page; same scaling problem as today.

Decision

Both options solve "kitchen sink" — A solves it structurally (split into focused pages); B solves it cosmetically (collapse what's there). One sticks; the other defers the problem.

Open questions before code

  • Sidebar grouping in A: Profile / Operations / Fleet / Workspace shown. Locked unless you want a different cut.
  • Save model in A: sticky save bar (Stripe / Linear) shown above. Alternatives: per-section save buttons (Vercel / Resend), or auto-save on blur (Notion). Compliance + fatigue settings argue for explicit save, not auto-save.
  • Defaults page contents: proposed = data region + default region + route/vehicle terminology + Pay Feature toggle + Homepage. Could split off Pay Feature if it expands beyond a single toggle.
  • Permission gating: some entries (Security, Allocation Rules) are Saphyroo-Admin-only. Sidebar already hides them per role; preserved in A.
  • Mobile: sub-pages naturally collapse to a single-column list-then-detail flow. Accordion is harder to make mobile-friendly without hiding too much.