Team Tab · Mockups
Six renderings that establish the design language for the redesigned Team tab. Customer 360 DNA applied to people: every team member gets a 360 page, with drill-in detail pages for Reviews, Payroll, Training, and Comp plans.
Served live at https://nightshift-web-production.up.railway.app/mockups/team/

Landing + directory

The entry points into the Team tab.
List view →
Team Roster
26-person directory with left-sidebar faceted filters (role, status, tenure, Top Gun tier, EOS involvement). KPI strip, tab pills, color-coded rows for at-risk / below-bar techs. Click any row → Team Member 360.
inherits: warranties-list-mockup
Flagship · most distinctive →
Team Member 360 · Kristin Torres
Everything about one team member on one page. Identity + hero KPI + EOS involvement + performance + training + pay + coaching + activity + AI insights + private notes. Mirrors Customer 360 exactly — people are customers of the org.
inherits: customer-360-mockup

Drill-in detail pages

Heavy-editing surfaces reached from the 360 or the sidebar.
Review workflow →
Performance Review Detail
Q1 2026 review for Kristin. Stage pipeline + velocity bars + dimension ratings grid + AI-drafted narrative with source evidence + development plan + previous reviews + version history. Matches Deal Detail's rhythm.
inherits: deal-detail-mockup
Pay run preview →
Payroll Preview · Apr 7–20
Biweekly pay run before Gusto submission. Per-employee line items with expandable commission breakdowns (PFP 3% / 6% / 12%), bonus triggers fired, variance flags, accounting journal entries. Show-your-work for every dollar.
inherits: invoice-detail-mockup
Trainual replacement →
Training Track · Field Tech Onboarding
90-day required track. Module + lesson list with completion %, cohort completion matrix across active learners, velocity bars per module, linked Knowledge Base articles, AI insights on content gaps.
inherits: job-detail-mockup
Owner-only →
Comp Plan Editor · Field Tech PFP v2.3
3-variant card grid (Junior / Tech / Install Lead), tiered commission rules (3% / 6% / 12% stacked), bonus triggers, bucket cap, impact modeler showing cost delta on rate change, version history.
inherits: estimate-detail-mockup

Design DNA carried forward

Every page obeys the same rules so they feel like one product:
· 3-column shell — 340 identity-left, fluid main, 320 insights-right. Collapses to single column below 1200px.
· One hero per page — big monospace amount in the left panel; everything else quiet.
· Glass Level 1 cards by default — subtle blur, inset glow, box-shadow border (not border).
· Semantic color discipline — green on target, amber attention, red off-target, blue info, indigo brand/AI.
· Monospace for numbers only — Geist Mono with tabular-nums.
· No pure white text — primary text is rgba(255,255,255,0.95).
· AI Insights panel — indigo-tinted card in the right rail on every detail page.
· Timeline grammar — colored left border + emoji icon + description + mono timestamp.
· Shared CSS — _shared.css defines every token; page-local <style> blocks stay small.

Round 2 · lenses + queues

The daily-use surfaces that make the Team tab actually run.
Company scoreboard →
Team Performance Dashboard
15-person Q2 scoreboard with medals on top-3, 13-week sparklines, goal-status pills, trend arrows. KPI strip + 4 role-comparison cards + action queue for managers to work through.
inherits: warranties-list (wide, sortable)
Manager working queue →
Coaching Queue
8 priority-coded coaching cards. Each card: person + reason + data quote + AI-drafted conversation starter + action footer. Cross-team pattern detection at bottom. Tool for running 1:1s, not an HR inbox.
new card-stream pattern
Employee lens · desktop tech →
My Today · desktop tech
What Kristin sees when SHE clicks "Team" on a desktop. Morning greeting, today's jobs, what's assigned this week (Rock + to-dos + lessons), pay-to-date, recognition, Ask Tower. Positive framing throughout. No manager-only surfaces.
inherits: customer-360 (lighter, personal)

Round 3 · role-specific lenses + approval flow

Techs live on phones. Office hourly folks need clock-in front-and-center. End-of-period timesheet verification mirrors the ServiceTitan workflow.
Phone · most-used by techs →
My Today · Mobile (tech phone)
iPhone-framed view. Big accent CLOCK IN button is the hero when off-shift; collapses to elapsed-time strip with End shift when on-shift. 4-stop schedule, week strip, pay snapshot, bottom tab bar, floating Ask Tower input. Touch targets 44px+.
new mobile pattern · side-by-side off/on shift
Employee lens · CSR / dispatch →
My Today · Office (CSR / Dispatch / Admin)
Sarah Chen's CSR view. No field schedule — instead: clock-in hero, company KPIs, lead queue "what needs your attention", CSR scorecard, announcements + culture, Ask Tower. Desktop-first since office folks work at computers.
variant of customer-360 · no schedule, has company KPIs
End-of-period workflow →
Timesheet Approvals
Mirrors ServiceTitan's process: manager sends → employees verify → disputes returned → manager signs off → feeds Pay Run Preview → Gusto. 22 rows grouped by status, drilldown card for one employee with 2-week daily breakdown + variance checks + bulk-signoff bar + AI anomaly watch.
new workflow · list + drilldown + timeline

Role-based routing spec

Companion design doc at docs/specs/team-role-routing.md defines who lands where on login and what top-nav items they see. Key moves:
· Field tech / install lead → /team/my mobile (phones + tablets)
· CSR / dispatch / office admin → /team/my office desktop
· Manager / owner → /brief (as today)
· Top nav for non-leadership: Team · Donna · Help only. Brief / Intelligence / Command Center / CRM / Field Ops / Marketing are role-gated.
· Hourly clock-in: ST-sourced for techs, Nightshift-native for office.
· Timesheet approvals: verify-at-period-end, like ServiceTitan.
· Build sequence: 7 PRs (TR-1 → TR-7), each independently mergeable.
Mockups live in the repo at office/dashboard-v2/public/mockups/team/ and auto-serve from the deployed Next.js app. Edit in VS Code, commit, push — the URL updates on next deploy.