Worksuite SaaS / Visitor Module — Full UI/UX Spec
v1.0 · Design Spec 14 screens Multi-tenant SaaS
A. Module Architecture & Sitemap
Full page hierarchy, route structure, grouping
▾
Module groups
Visitors Dashboard, List, Profile, Check-in/out, New entry
Pre-reg Pre-registration list, Create/edit, VIP guests
Complaints List, Detail + timeline, Create/edit, Notification log
Feedback Feedback list, Review detail
Admin Reports + export, Settings
Sidebar placement

Positioned after the HR group, before Reports in the global sidebar accordion.

Icon: `person-badge` (or `user-check`). Permission gate: `visitor_access`. Entire group hidden if role lacks this permission.

Expandable accordion with 5 sub-groups listed above. Active section auto-expands on load.

### Route Map

    GET  /visitor                      → Dashboard
    GET  /visitor/visitors             → Visitor list
    GET  /visitor/visitors/{id}        → Visitor profile
    GET  /visitor/visitors/create      → New entry (4-step stepper)
    GET  /visitor/checkin              → Check-in desk (kiosk-friendly)
    GET  /visitor/preregistration      → Pre-reg list
    GET  /visitor/preregistration/create → New pre-registration
    GET  /visitor/vip                  → VIP guest management
    GET  /visitor/complaints           → Complaint list
    GET  /visitor/complaints/{id}      → Complaint detail + timeline
    GET  /visitor/complaints/create    → New complaint
    GET  /visitor/feedback             → Feedback list + detail
    GET  /visitor/notifications        → Notification log
    GET  /visitor/reports              → Reports + export
    GET  /visitor/settings             → Settings (admin gate)

Navigation & Information Architecture
Submenu structure, breadcrumbs, page hierarchy
▾
The sidebar accordion Visitor expands to show 5 sub-groups. Each sub-group collapses individually. Breadcrumbs appear in the topbar for depth-3+ pages (e.g. Complaints / C-0091 / Edit).
Sidebar accordion structure

    👤 Visitor
      ├─ Dashboard
      ├─ Visitors
      │    ├─ All visitors
      │    └─ Check-in desk
      ├─ Pre-registration
      │    ├─ All pre-registrations
      │    └─ VIP guests
      ├─ Complaints
      │    ├─ All complaints
      │    └─ Notification log
      ├─ Feedback
      └─ Reports & Settings (admin)

Breadcrumb examples

Visitor / Complaints / #C-0091

Visitor / Visitors / Ramesh Kumar

Visitor / Pre-registration / New

Page titles follow Worksuite convention: `[Module] — [Page name]` in `<title>`. H1 heading inside content area.

Role-Based Access Matrix
Permission gates per role and section
▾

Role | Dashboard | Check-in/out | Complaints | Reports | Settings
--- | --- | --- | --- | --- | ---
Receptionist | View | Full | Create only | — | —
Helpdesk | View | Read-only | Assign + update | Own dept | —
Dept. staff | Own dept | — | Assigned only | — | —
Admin | Full | Full | Full | Full | Full
Super admin | All tenants | Full | Full + escalate | Cross-tenant | Full

Permissions are managed via Spatie Laravel-Permission. Gate names: `visitor_view_dashboard`, `visitor_manage_checkin`, `visitor_manage_complaints`, `visitor_assign_complaints`, `visitor_view_reports`, `visitor_export_reports`, `visitor_manage_settings`
Screen 1 — Visitor Dashboard
Real-time operational overview for reception shift
▾
Purpose & roles

Purpose: First thing a receptionist sees at shift start. Shows today's footfall, live check-ins, complaint status and activity feed.

Primary roles: Receptionist, Helpdesk, Admin

Components used
Stat cards ×4 Datatable Activity feed Status badge Mini progress bars CTA buttons Date filter select
Wireframe — Visitor Dashboard
👤 Visitor dashboard
Today: 9 Apr● 3 on premises
Visitors today
14
↑ 3 vs yesterday
On premises
3
Checked in, not out
Open complaints
7
↑ 2 new today
Avg. resolution
2.4d
↓ 0.3d improvement
Active visitors View all →

Visitor | Purpose | In | Token | Status |
--- | --- | --- | --- | --- | ---
RKRamesh Kumar | HR / Job inquiry | 09:14 | `VIS-2841` | Checked in |
PPPriya Patel | Admin / Complaint | 10:02 | `VIS-2842` | VIP |
MJMohan Joshi | Finance / Admission | 11:30 | `VIS-2843` | Checked in |

Activity feed
Mohan Joshi checked in
VIS-2843
11:30
#C-0091 assigned to Finance
By: Anita
11:22
VIP pre-reg arrived
Priya Patel
10:02
#C-0089 SLA breached
Escalation sent
09:45
States

Empty: "No visitors today. Ready for walk-in entry." with large + CTA centered.

Loading: Skeleton bars on all cards and table rows.

Error: Inline top banner: "Could not load visitor data — Retry"

Accessibility & mobile

`aria-live="polite"` on activity feed for real-time updates.

Tab order: CTAs → stat cards → table rows → feed.

Mobile: Stat cards collapse to 2×2. Table becomes per-visitor card with swipe-to-checkout. Feed moves below table.

Screen 2 — Visitor List
Full paginated register of all visitor records
▾
Purpose & roles

Full historical list of all visitors. Searchable, filterable. Entry point for re-check-in of returning visitors.

Roles: All (filtered by dept for Dept. staff)

Filter bar

Date range · VIP only (checkbox) · Reason of visit · Department · Check-in status (Active / Checked out / All)

Search: mobile number or name with live debounce (300ms)

Wireframe — Visitor List
VIP only
+ Walk-in entry

# | Visitor | Mobile | Last visit | Total visits | Tag | Status | Actions
--- | --- | --- | --- | --- | --- | --- | ---
001 | RKRamesh Kumar | +91 98765 43210 | 9 Apr 2026 | 8 | VIP | Active | Profile
002 | PPPriya Patel | +91 98712 34567 | 9 Apr 2026 | 3 | VIP | Active | Profile
003 | DSDeepa Sharma | +91 97654 32109 | 7 Apr 2026 | 2 | — | Checked out | Profile

Empty state

"No visitors found for these filters. Try widening the date range or clearing filters."

Screen 3 — Visitor Profile
Complete visit history and complaint record for a single visitor
▾
Layout

Profile header (avatar, name, mobile, visit count, VIP badge, quick actions) → 2-col body: left = full visit timeline, right = complaint history + notes

Visit timeline card

Each visit card shows: date, token (VIS-XXXX), purpose, host dept, duration, assigned staff, any complaints raised. Expandable per visit.

Wireframe — Visitor Profile
RK
Ramesh Kumar VIP
+91 98765 43210 · 8 visits · First visit: 15 Jan 2025
+ New check-in

### Visit history

Visit #8 — 9 Apr 2026 · `VIS-2844`
Purpose: Admission letter · Finance · Duration: ongoing
Visit #7 — 2 Apr 2026 · `VIS-2798`
Purpose: Complaint · HR · Duration: 38 min
Visit #6 — 15 Mar 2026 · `VIS-2741`
Purpose: Job inquiry · HR · Duration: 22 min

### Complaints

#C-0091 In progress
Delay in admission letter · Finance · 9 Apr
#C-0067 Completed
Staff behaviour issue · HR · 2 Apr
Screen 4 — Check-in / Check-out
4-step receptionist intake flow, keyboard-optimised
▾
Entire flow completable in under 60 seconds by a trained receptionist. Full keyboard navigation. `Cmd+Enter` or `F10` = Confirm check-in.

### Step 1 — Visitor lookup

Step 1 of 4 — Lookup
1 · Lookup→ 2 · Details→ 3 · Purpose→ 4 · Token
Mobile number or visitor name
Type at least 3 characters to search existing records
Matching records
RK
Ramesh Kumar
+91 98765 43210 · 7 visits · VIP
Select ↵
RN
Rajesh Nair
+91 98700 12345 · 2 visits
Select
Not in list?

### Step 2 — Visitor details (pre-filled for returning)

Step 2 of 4 — Visitor details
✓ Lookup→ 2 · Details→ 3 · Purpose→ 4 · Token
RK
Ramesh Kumar VIP
+91 98765 43210 · Visit #8 · Last: 2 Apr 2026
Full name *
Mobile *
ID type
ID number
📷 Capture selfie
🪪 Upload ID scan
Photo linked to this visit only. Max 2MB. Optional but recommended for VIP guests.

### Step 3 — Purpose

Step 3 of 4 — Purpose of visit
Reason of visit *
Complaint Admission letter Suggestion / feedback Job inquiry Other
Host department
Duty officer will be notified automatically via SMS.
Remarks
Pre-registration match found: "Admission letter collection · Expected 10:00 · Admin officer Sunita." This visit will be linked automatically.

### Step 4 — Token / QR

Step 4 of 4 — Token & confirmation
✓ Lookup→ ✓ Details→ ✓ Purpose→ 4 · Token
QR code
VIS-2844
Valid for today · 9 Apr 2026

### Check-out flow

Check-out — minimal flow
Search by token or name
RK
Ramesh Kumar
Checked in 09:14 · Duration: 2h 18m · Finance / Admission
Send feedback survey via SMS
Screen 5 — Pre-registration
Register expected visitors in advance with VIP and helpdesk notes
▾
Purpose

Admin or helpdesk pre-registers an expected visitor. On arrival, the receptionist sees a yellow "Pre-registered" banner in the check-in flow and the record is auto-matched by mobile number.

Form fields

Name · Mobile · Expected date/time · Purpose · Host name/dept · VIP toggle · Notes for receptionist · Attachment (optional)

Pre-registration List

Visitor | Mobile | Expected | Purpose | Host | VIP | Status | Actions
--- | --- | --- | --- | --- | --- | --- | ---
Ramesh Kumar | +91 98765 43210 | 9 Apr 10:00 | Admission letter | Finance | VIP | Arrived |
Ananya Singh | +91 91234 56789 | 9 Apr 14:30 | Job inquiry | HR | — | Pending |
Vikram Rao | +91 99887 76655 | 10 Apr 11:00 | Complaint | Admin | — | Pending |

Screen 6 — VIP Guest Management
Tag, track, and surface VIP visitors with priority treatment
▾
VIP behaviour

VIP-tagged visitors receive: automatic SMS on arrival to their host, priority indicator on the dashboard active table, VIP badge (primary / header color) throughout all screens.

Management actions

Tag/untag VIP from visitor profile or this page. Add internal notes per VIP (e.g. "Minister's office — always alert HOD"). Full visit history visible.

VIP Guest List

Visitor | Mobile | Total visits | Last visit | VIP since | Notes | Actions
--- | --- | --- | --- | --- | --- | ---
RKRamesh Kumar VIP | +91 98765 43210 | 8 | 9 Apr 2026 | 1 Mar 2025 | Ministerial liaison | Profile
PPPriya Patel VIP | +91 98712 34567 | 3 | 9 Apr 2026 | 5 Apr 2026 | Donor committee | Profile

Screen 7 — Complaint List
Centralised triage table for all complaints
▾
Filters

Status · Source · Type · Department · Assigned staff · Date range · SLA breached (checkbox)

SLA row highlighting

Rows with breached SLA get a very faint red background (5% opacity). SLA bar in each row: green → amber at 60% elapsed → red at 85%.

Complaint List Table
SLA breached
+ New complaint

#ID | Summary | Visitor | Source | Dept | Assigned | SLA | Status |
--- | --- | --- | --- | --- | --- | --- | --- | ---
`C-0091` | Delay in admission letter | Ramesh K. | Direct | Finance | Suresh M. |  | In progress | Open
`C-0089` | Staff behaviour issue | Deepa S. | Portal | HR | Kavita R. |  | SLA breached | Open
`C-0087` | Suggestion for helpdesk | Mohan J. | WhatsApp | Admin | — |  | New | Open

Bulk actions

Select rows → "Assign selected to department" / "Change status" / "Export selected". Confirmation required for bulk status change.

Screen 8 — Complaint Detail + Timeline
Full lifecycle view: status pipeline, activity log, assignment, SLA
▾
Internal notes are never visible to the visitor. "Note + notify visitor" creates an internal note AND sends an SMS simultaneously in one action.
Complaint Detail — #C-0091
Complaints /`C-0091` Work in progress
Delay in issuance of admission letter — Finance dept
Opened by Ramesh Kumar · 9 Apr 2026, 10:42 · Source: Direct office
Status pipeline
New→ In progress→ Completed· Out of area· Redirected
Activity timeline 4 events
Assigned to Finance — Suresh Mehta
By: Helpdesk Anita · SMS notification sent
11:22
Status: New → In progress
By: Suresh Mehta · Note: "Letter pending HOD approval"
11:38
SMS notification delivered
"Your complaint is being processed"
11:39
Complaint registered
Via reception · Token: VIS-2844
10:42
Complaint info

Type | Service delay
Source | Direct office
Department | Finance
Priority | High
SLA deadline | 11 Apr · 1d 13h

38% of SLA elapsed
Assigned to Reassign
SM
Suresh Mehta
Finance dept · Duty officer
Visitor View profile

Name | Ramesh Kumar
Mobile | +91 98765 43210
Token | `VIS-2844`
Tag | VIP

Reassign drawer

Opens a right-side drawer (not a modal) to search staff within a department. Avoids full-page interruption while maintaining context.

Accessibility

Each status pipeline button is focusable and announces its action. Timeline is a `role="list"`. Status change requires confirmation dialog: "Change status to Completed? This will trigger a feedback SMS."

Screen 9 — Create / Edit Complaint
Register a complaint with source, type, priority and assignment
▾
When opened from the check-in flow (Purpose = Complaint), source is pre-filled as "Direct office" and visitor is pre-linked. Saves one complete flow.
New Complaint Form

### Complainant

Link to visitor
Auto-linked from check-in. Change visitor

### Complaint details

Complaint type *
Source *
Priority
Low Medium High Critical
Assign to department
Description * (min. 30 characters)
Attachments
Drop files here or browse · PDF, JPG, PNG up to 5MB

### SLA preview

Based on High priority rule:
48 hours
Deadline: 11 Apr 2026, 10:42
Assignment notification will be sent automatically to Finance dept duty officer via SMS on save.
Screen 10 — Feedback & Review
Post-resolution visitor satisfaction and internal staff review
▾
Trigger

Feedback SMS/WhatsApp sent automatically when complaint status → Completed, after a configurable delay (default 1 hour). Link opens a minimal branded page (or SMS-reply code for no-smartphone users).

Detail view contents

Star rating (large 1–5 display) · Visitor comment · Resolution summary · Staff internal review textarea · Complaint link · Handling staff name

Feedback List

Visitor | Complaint | Rating | Comment | Resolved by | Date | Internal remark
--- | --- | --- | --- | --- | --- | ---
Deepa Sharma | `C-0082` | ⭐⭐⭐⭐⭐ 5/5 | Very quick response | Kavita R. | 7 Apr |
Rohit Nair | `C-0079` | ⭐⭐⭐ 3/5 | Took 3 days, expected 1 | Suresh M. | 5 Apr | Review noted

Screen 11 — Notification Log
Full audit trail of all outgoing SMS, WhatsApp, and call notifications
▾
Notification Log

Time | Channel | Recipient | Event | Message preview | Status |
--- | --- | --- | --- | --- | --- | ---
11:39 | SMS | Ramesh K. (+91 98765…) | Complaint update | "Your complaint #C-0091 is being…" | Delivered |
11:22 | WhatsApp | Suresh M. (+91 98100…) | Assignment | "Complaint #C-0091 assigned to…" | Delivered |
10:43 | SMS | Ramesh K. (+91 98765…) | Complaint registered | "Complaint registered #C-0091" | Delivered |
10:14 | SMS | Meena T. (+91 97654…) | Check-in alert | "Your visitor Priya Patel has…" | Failed |

Technical note

Delivery status fetched from SMS/WhatsApp gateway webhooks. Failed notifications show a retry button inline. Log is append-only (no deletion) for audit compliance.

Screen 12 — Reports & Export
Filterable reports with CSV, Excel, and PDF export
▾
Reports Page

### Report filters

Report type
Visitor summary Complaint report Feedback report Department-wise VIP report
Date from
Date to
Department
Status
VIP only SLA breached only

### Export

Large exports (>5,000 rows) are queued and a download link emailed to you.

### Preview — Visitor summary (top 50 rows)

Date | Visitor | Purpose | Department | Duration | Complaints | Status
--- | --- | --- | --- | --- | --- | ---
9 Apr | Ramesh Kumar | Admission letter | Finance | Ongoing | 1 | Checked in
9 Apr | Priya Patel | Complaint | Admin | Ongoing | 0 | VIP
7 Apr | Deepa Sharma | Suggestion | HR | 24 min | 0 | Checked out

Screen 13 — Settings
Admin-only: statuses, types, templates, SLA rules
▾
Tab 1 — Statuses & Types

Add/edit/reorder complaint types and complaint sources. Drag-and-drop reorder. Each type has a name, color chip, and default SLA override.

Tab 2 — Departments

Map departments for assignment. Set default duty officer per dept. Department head receives escalation SMS if SLA breaches.

Tab 3 — Notification templates

SMS and WhatsApp message templates per event: Check-in, Complaint registered, Status changed, Feedback request. Variable picker: `{'{{'}visitor_name{'}}'}`, `{'{{'}token{'}}'}`, `{'{{'}complaint_id{'}}'}`, `{'{{'}dept{'}}'}`

Tab 4 — SLA Rules

Hours-to-resolve per priority: Low 72h, Medium 48h, High 24h, Critical 4h. Escalation contact per priority tier.

Tab 5 — General

Token prefix (default: VIS-). Auto-feedback trigger toggle. Delay after resolution (default 1h). Kiosk mode toggle (Phase 2, grayed out with "Coming soon" badge).

D. UX Flows
Step-by-step user journeys for all primary flows
▾

### Flow 1 — New walk-in visitor

Visitor at desk→ Type mobile / name→ Not found?→ Manual entry form→ Choose purpose→ Token generated→ Checked in ✓

Optional: Photo capture prompted after manual entry. Dept notified automatically. Token printed or SMS'd on confirmation.

### Flow 2 — Returning visitor repeat entry

Visitor at desk→ Mobile lookup→ Existing record found→ Pre-filled form→ Confirm/update purpose→ New token issued→ Checked in ✓
Duplicate guard: If same mobile number attempts check-in twice in one day: "This visitor checked in today at 09:14 as VIS-2841. Proceed as new visit or view existing?" Prevents accidental duplicates.

### Flow 3 — Pre-registered VIP arrival

VIP arrives→ Name / ID lookup→ Pre-reg match shown→ 1-click VIP check-in→ Host notified (SMS)→ Checked in ✓

Pre-registration match is surfaced as a yellow banner in step 3 of check-in. VIP lane skips photo/ID prompts by default.

### Flow 4 — Complaint registration and assignment

Visitor at desk→ Purpose = Complaint→ Complaint form opens→ Type + source + description→ Assign dept→ Saved + #ID generated→ SMS sent to visitor + dept

Opening complaint inline from check-in purpose = Complaint auto-links visitor and pre-fills source as "Direct office".

### Flow 5 — Complaint status transitions

New→ In progress→ Completed
New / In progress→ Out of area→ Redirected

Every status change: (1) records in timeline with actor + timestamp, (2) triggers SMS to visitor if "notify visitor" is on for that event, (3) logs notification in notification log.

### Flow 6 — Feedback capture

Complaint → Completed→ Wait 1h (configurable)→ SMS/WhatsApp with rating link→ Visitor rates 1–5→ Feedback saved → list

### Flow 7 — Report export

Reports page→ Set filters→ Preview top 50 rows→ Choose format→ Download / email link ✓
E. Component Inventory
New components vs reused Worksuite components
▾
New components (build fresh)
Visit token badge (VIS-XXXX) QR code display modal Visit timeline component SLA progress bar Complaint pipeline stepper Selfie/ID upload drop zone Notification delivery log row Star rating widget Visitor lookup typeahead Pre-reg match banner
Reused unchanged
Data table + column filters Form controls (input, select, textarea) Status badge / chip Card + card-header pattern Avatar / initials circle Modal / drawer Sidebar accordion group Export format buttons Pagination component Date range picker Breadcrumb component Confirmation dialog Toast notifications
The complaint pipeline uses a single status row (not Kanban). Kanban adds visual overhead without benefit at this data density. Kanban can be added as an optional view toggle in Phase 3 for teams managing 20+ simultaneous complaints per user.
F. Design Token Guidance
Incremental additions only — no new design language
▾

Token | Value | Usage | Where defined
--- | --- | --- | ---
`--header_color` | `#171f29` (default) | Primary buttons, active sidebar/tab, stepper, links | `resources/views/sections/theme_css.blade.php` — per company
`--color-page-bg` | `#f3f5f8` | Main content wrapper (`main-container` / `bg-additional-grey`) | `public/css/main.css` utility classes
`--color-vip-badge` | `outline + header` | VIP label — use `.badge` + border or reuse warning/primary variant | Keep consistent with existing badge components
Visit token font | `font-family: monospace` | VIS-XXXX display, token in tables | Use existing `font-mono` variable
SLA bar height | `6px` | SLA progress bar — slightly thicker than standard for urgency | Inline component style
SLA amber threshold | `60%` | Bar color changes to amber at 60% elapsed | Component logic
SLA red threshold | `85%` | Bar color changes to red at 85% elapsed | Component logic

All spacing, card density, table padding, button styles, form controls and modal behavior reuse existing Worksuite tokens unchanged. Zero design language conflicts.
G. Developer Handoff Notes
Laravel/Blade/Livewire implementation guidance
▾

### Recommended Livewire components

VisitorLookupStep

Real-time mobile/name search as user types. Debounce 300ms. Returns: existing record or "new visitor" prompt. Highlights pre-registered match.

CheckinStepper

Manages 4-step state, saves draft to session between steps. Emits `VisitorCheckedIn` event on confirmation.

ComplaintStatusUpdater

Inline status change with note textarea. Triggers notification job. Records timeline entry. Returns updated timeline HTML.

ReportPreview

Live table preview as filters change. Debounce 500ms. Top 50 rows only. Export triggers server-side queue job for large datasets.

### Events & Jobs

    // Events fired
    VisitorCheckedIn    → SendVisitorNotification, NotifyDutyOfficer
    VisitorCheckedOut   → LogVisitDuration, TriggerFeedbackRequest (if configured)
    ComplaintCreated    → SendComplaintRegisteredSms, NotifyAssignedDept
    ComplaintAssigned   → SendAssignmentNotification
    ComplaintStatusChanged → SendComplaintUpdateSms, LogNotificationAttempt
    ComplaintCompleted  → ScheduleFeedbackRequest (delayed by config hours)
    SlaBreached         → SendEscalationAlert (to dept head)

### Blade component reuse

    {{-- Reuse existing --}}
    @include('components.status-badge', ['status' => $complaint->status])
    @include('components.avatar', ['name' => $visitor->name])
    @include('components.datatable', ['columns' => $columns, 'rows' => $rows])

    {{-- New Visitor module components --}}
    @include('visitor.components.visit-token', ['token' => $visit->token])
    @include('visitor.components.sla-bar', ['percent' => $slaPercent])
    @include('visitor.components.timeline', ['events' => $complaint->timeline])
    @include('visitor.components.pre-reg-banner', ['preReg' => $preReg])

### Permission gates (Spatie)

    visitor_view_dashboard
    visitor_manage_checkin
    visitor_manage_complaints
    visitor_assign_complaints
    visitor_view_reports
    visitor_export_reports
    visitor_manage_settings

### Database notes

Key tables

`visitors` · `visits` · `pre_registrations` · `complaints` · `complaint_timeline` · `notifications_log` · `feedback`

`visits.token`: Unique, indexed, format `VIS-NNNN`. Prefix configurable in settings.

Multi-tenancy

All tables include `tenant_id` (or use team scoping via `team_id` following Worksuite's existing pattern). Notifications log scoped per tenant. Reports filtered by tenant automatically.

H. Prioritized MVP vs Phase 2/3
What ships first and why
▾

Phase | Features | Rationale
--- | --- | ---
MVP Phase 1 | Visitor walk-in check-in/out Existing visitor lookup + visit history Visit token / QR generation Reason of visit (5 types) Complaint registration + assignment Complaint status tracking (5 states) SMS notification on check-in and complaint events Notification log Dashboard (live active visitors + complaint counts) | Core operational loop. Reception desk can function from day 1. Complaints tracked and routed to departments. Enough for go-live.
Phase 2 | Pre-registration + VIP management Photo/selfie capture (camera permission flow) Feedback and rating collection WhatsApp notifications (API integration) Reports with CSV/Excel/PDF export Settings page (types, templates, SLA rules) Visitor profile full history view | Adds operational polish, compliance history, and self-service admin. Delivers value to helpdesk and management layer.
Phase 3 | Kiosk / self-service mode (touchscreen visitor fills own form) AI-based complaint routing (NLP to auto-detect type and dept) Analytics dashboard with trends and charts Mobile app for receptionist (React Native or PWA) Kanban view toggle for complaints (high-volume teams) Public-facing complaint portal | Advanced automation and alternative interfaces. Defer until Phase 1 + 2 adoption is proven.

Estimated Phase 1 build effort (assuming existing Worksuite infrastructure): 6–8 weeks for a 2-developer team. Largest unknowns are the SMS gateway integration and the check-in stepper UI state management. Both are well-scoped above.
Visitor Module UI/UX Spec — Worksuite SaaS · Version 1.0 · Generated 9 Apr 2026
Visual system: Worksuite admin — loads `public/css/main.css` + vendor CSS like `layouts/app` · `--header_color` (`theme_css`) · Bootstrap body font stack · `.bg-additional-grey` (#f2f4f7) page · white cards