SSL Service Manager — Global Shell & Design Foundation v0.1

The information architecture, navigation, terminology and visual language shared by every module. Derived from the agreed meeting decisions (structure), Mark's prototype (visual direction) and the SaaS4 customer review (navigation preferences). Decision IDs reference the Decisions Register.

Artifacts: 00 Register · 01 Shell · 02 Module spec · 03 Wireframes · 04 Build spec

1. Information architecture

The old SM's nine sections collapse into six, plus a globally available service-user search. (G-001, G-004, G-005, G-006, G-007)

SSL sectionReplaces (old SM)Notes
Home / DashboardHome, DashboardOperational stats only: on-shift responders (clickable for detail), requests open/due, average time to accept, active jobs. No graphs, no weather, no staff-online panel, no alerts/messages widgets (D-001…D-007).
RequestsIncidents (+ ARC tickets)Single console for ARC and local requests; incidents = urgent requests. "Request console" terminology (G-001).
ReferralsReferrals, Quick AgreementILOS "Intake" pattern; survey templates with public URLs; duplicate-address detection at creation (R-001…R-007, G-006).
SchedulingScheduling (+ SA Workspace)Bookings home page; Roster, Daily Planner subpages; roster-change reassignment workflow; task-type filters (C-001…C-004, G-007).
InventoryInventory (7 subpages)Goods In, Stock, Stock Transfer, Stock Take (new), Stores (typed), Manufacturers — single creation pages (I-001…I-011).
ReportsOperational ReportsConsolidated: Referral, Request, Service Agreements, Stock, Audit reports + scheduling/email, "as of" queries, custom reports (P-001…P-008).
AdministrationAdministrationRoles/teams with categories, default task sets + SLAs per request type, cancellation-reason categories, store config (G-009, Q-003, Q-010).
Service User Profile via global searchService Agreements sectionNot a menu section. Reached from the omnipresent search bar; advanced search opens from the bar (S-001, G-005).

Navigation concept: top bar + left menu

Layout follows Mark's prototype and the old SM: a persistent left menu of the seven sections with icons — explicitly praised by customers ("nice left menu to directly access key functions", X-002) — plus a fixed top bar carrying the global search (G-005). Branding: ILOS logo top-left; "Powered by Tunstall" at the bottom of the left menu; the monitored organisation's logo on service-user profiles (S-002). A live ops ticker ribbon scrolls along the bottom (Mark's pattern) with a hide control and a "Live feed" restore pill. Shell behaviours: collapsible left menu (button + Ctrl/Cmd+\), Ctrl/Cmd+K focuses the global search, popups close on outside click / Escape (except prompts requiring an explicit choice), non-obtrusive success toasts for saves and key actions, ILOS favicon. Visual language: Mark's component styling with the Tunstall palette — dark slate primary buttons (#334a54), Assure Blue links/highlights, darker borders, segmented icon tabs. Breadcrumbs on every page instead of back-button reliance (X-002). All pages stretch to the full viewport width (4K-friendly); the menu collapses to an icon rail on narrow screens.

2. Global search & Service User Profile

3. Terminology map

Old SM / ARC termSSL Service Manager termDecision
Incident / TicketRequest (urgent request = old incident)G-001
Ticket consoleRequest consoleG-001
Service Agreement summaryService User ProfileS-001
Average time to answerAverage time to acceptD-002
Allocated (stock)ReservedQ-007
Task historyTasksQ-007
BookingsSchedulingC-001
Tags (ILOS)KeywordsG-008
Intake (ILOS)ReferralsR-001
Circle of Care (NSM)ContactsS-011

4. Visual language (from Mark's prototype)

Tokens extracted from the delta.tunstallpartners.com build. We keep the palette, typography and card-based layout everyone responded to, while replacing structure/widgets the meetings rejected (graphs, weather, staff-online).

TokenValueUse
--brand-950hsl(198 38% 10%)Top navigation, headers
--brand-900hsl(198 34% 16%)Primary buttons, table headers
--brand-700hsl(190 82% 32%)Active nav, success states
--brand-600hsl(190 86% 38%)Secondary actions, links
--accent-bluehsl(219 91% 58%)Informational highlights
--warninghsl(40 91% 48%)SLA approaching (RAG amber)
--dangerhsl(354 64% 47%)SLA breached (RAG red), destructive actions

Typography & components

Status pill tokens (semantic) — reuse in every module; do not reinvent (UI/UX critique 12.4)

Status is conveyed by meaning, not arbitrary colour. Seven semantic states, capped — every module maps its statuses onto these tokens so the colour language stays consistent.

StateColourUsed for
AcceptedBlue (Assure)Accepted / acknowledged — request or task picked up (p-acc)
In progressAmberIn progress / scheduled / expiring soon / due (p-prog, p-hold, p-draft)
CompleteGreenComplete / closed-successfully / published / active / SLA met (p-done, p-active, p-pub)
On holdPurpleOn hold — held with reason; distinct from in-progress (p-onhold)
NeutralGreyClosed/ended/terminated/disabled — no action expected (p-closed, p-term)
UrgentRedUrgent / SLA breached / redacted / MOSA — needs attention (p-urgent, p-redact)
InternalSlate outlineSource/system tags (SM, ARC, Internal) — informational, not a lifecycle state (p-int)

Dark mode brightens each token to keep every text/background pair ≥ 4.5:1 (verified programmatically). Required form fields are marked with a red *; inline validation + an error summary follow on Save (AA 3.3.x, critique 12.5).

From Mark's prototype: keep / drop

Keep (endorsed or unchallenged)Drop (rejected in meetings)
Top-bar navigation + global search; customer profile layout (header stats, activity feed, key-details panel); stat tiles; status pills; Inbox→intake flow patterns; clean typographyWeather widget (D-004); graphs (D-004); staff-online panel (D-004); alerts & messages widgets (D-004); ad-hoc phone number (D-006); Service Cases tab (S-012); client photo (S-002); Medication tab until NHS link (S-018)

5. Cross-cutting behaviours

6. Open questions for Tunstall (Phase 0)