Cleaning Management Screen Requirements

Screen Inventory

Screen ID	Screen Name	Primary Actor(s)	Workflow(s)	Access Level
SCR-CLEANING-001	Cleaning Task Board (Dispatcher)	Cleaning Supervisor / Dispatcher, Facilities Manager, Bed Management Coordinator	WF-CLN-001, WF-CLN-002, WF-CLN-003, WF-CLN-005	Supervisor / Facilities
SCR-CLEANING-002	Cleaning Staff Mobile App	Cleaning Staff, Senior Cleaning Staff	WF-CLN-001, WF-CLN-002, WF-CLN-003, WF-CLN-004, WF-CLN-005	Cleaning Staff
SCR-CLEANING-003	Bed Cleaning Status Board	Charge Nurse, Bed Management Coordinator, Cleaning Supervisor	WF-CLN-001, WF-CLN-004	Nursing / Bed Management / Supervisor
SCR-CLEANING-004	OR Turnover Dashboard	OR Cleaning Staff, OR Nurse, Cleaning Supervisor	WF-CLN-002	OR Staff / Supervisor
SCR-CLEANING-005	Schedule Management	Cleaning Supervisor / Dispatcher, Facilities Manager	WF-CLN-003	Supervisor / Facilities (admin)
SCR-CLEANING-006	Quality Inspection Form	Facilities Supervisor, Infection Control Officer, Senior Cleaning Staff	WF-CLN-004, WF-CLN-006	Supervisor / Infection Control
SCR-CLEANING-007	Cleaning Analytics Dashboard	Facilities Manager, Infection Control Officer, Cleaning Supervisor	WF-CLN-001–WF-CLN-006	Management / Infection Control

Screen Specifications

SCR-CLEANING-001: Cleaning Task Board (Dispatcher)

Purpose

Real-time, zone-based task board for supervisors/dispatchers to monitor all cleaning tasks, assign/reassign staff, adjust priorities, and track progress to support fast bed/OR turnaround and compliance with UAE infection-control protocols.

Field Specifications

Field	Type	Required	Validation	Default	Notes
Zone Filter	Dropdown (multi-select)	No	Must match existing `cleaning_zones.zone_id`	User’s default zone(s)	Filters columns/lanes by zone; supports “All Zones”
Priority Filter	Multi-select chips (STAT/High/Normal/Low)	No	Values in enum	All selected	Colour-coded; must not rely on colour alone (include text)
Task Search	Text input	No	Max 100 chars	—	Searches by room/bed, task ID, protocol, staff name
Pending Tasks Lane	Kanban column	—	Shows tasks with `status='pending'`	—	Cards grouped by zone; drag to assign
Assigned Tasks Lane	Kanban column	—	Shows `status='assigned'`	—	Drag between staff or to In Progress
In Progress Lane	Kanban column	—	Shows `status='in_progress'`	—	Read-only drag to Completed (with confirmation)
Completed Lane	Kanban column	—	Shows `status IN ('completed','inspected')`	—	Most recent at top
Task Card: Task ID	Label	Yes	UUID/sequence format	—	Click opens task detail drawer
Task Card: Location	Label	Yes	Must map to `locations.location_id`	—	Room/bed, OR room, or zone name
Task Card: Task Type	Badge	Yes	Enum: discharge, terminal, or_turnover, routine, emergency	—	Icon + text
Task Card: Priority	Badge	Yes	Enum: STAT, High, Normal, Low	Normal	Used for SLA monitoring
Task Card: Protocol	Label	Yes	FK to `cleaning_protocols.protocol_id`	—	Shows protocol name (e.g., “Terminal – C. diff”)
Task Card: Assigned Staff	Avatar + name	No	Must match active `cleaning_staff.staff_id`	Unassigned	Dragging to staff list sets this
Task Card: SLA Timer	Countdown/elapsed timer	Display	Uses task timestamps vs protocol SLA	—	Colour + text (e.g., “Overdue by 05:12”)
Staff Sidebar: Staff List	List with status	—	Shows only active staff in selected zones	—	Status: Available / Busy / Offline
Assign Button	Button on card	No	Enabled if user has `assign_tasks`	—	Opens staff selection dialog if not using drag-and-drop
Reassign Button	Button on card	No	Same as above	—	For reallocation
Bulk Actions Selector	Checkbox per task + dropdown	No	At least one task selected	—	Bulk assign, change priority, cancel tasks
Bed Status Indicator	Icon + text	Display	Sync with bed board	—	e.g., “Dirty”, “Cleaning in progress”, “Ready”

Validation Messages

Condition	Message	Severity
Assign without staff selected	"Select a cleaning staff member before assigning the task."	Error
Drag to staff who is off-shift	"Selected staff is not on an active shift. Proceed with assignment?"	Warning
Reassign in-progress task	"This task is already in progress by {staff}. Reassigning may cause duplication. Continue?"	Warning
Attempt to complete task without inspection_required logic satisfied (if required)	"This task requires inspection before completion. Create or link an inspection record."	Error
Filter returns no tasks	"No tasks match the current filters."	Info
User lacks assign permission	"You do not have permission to assign or reassign cleaning tasks."	Error

Actions / Buttons

Assign: Opens staff selection dialog or assigns to staff dropped onto; updates cleaning_tasks.assigned_to, assigned_datetime, status='assigned'.
Reassign: Same as Assign but logs previous assignee in audit trail.
Mark In Progress (context menu): Sets status='in_progress', started_datetime=now().
Mark Completed: For exceptional supervisor completion; sets status='completed', completed_datetime=now() with reason.
Create Inspection: Opens SCR-CLEANING-006 pre-populated with task_id and location_id.
Refresh: Manually refreshes board; auto-refresh every 15–30 seconds via WebSocket/event bus.
Export Tasks: Exports filtered view to CSV for reporting (no patient identifiers beyond room/bed, to align with UAE PDPL minimisation).

HTML Wireframe Mockup

Show HTML code

HTML

<div style="font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <div style="background: #1a73e8; color: white; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;">
    <h3 style="margin: 0;">Cleaning Task Board</h3>
    <div>
      <button style="background:#fff;color:#1a73e8;border:none;padding:6px 12px;border-radius:4px;margin-left:8px;">Refresh</button>
      <button style="background:#fff;color:#1a73e8;border:none;padding:6px 12px;border-radius:4px;margin-left:8px;">Export</button>
    </div>
  </div>
  <div style="padding: 12px 20px; border-bottom: 1px solid #eee;">
    <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
      <div>
        <label style="font-size:12px; display:block;">Zone</label>
        <select style="padding:4px 8px; min-width:160px;">
          <option>All Zones</option>
          <option>Zone A - Medical Ward</option>
          <option>Zone B - ICU</option>
        </select>
      </div>
      <div>
        <label style="font-size:12px; display:block;">Priority</label>
        <div>
          <label><input type="checkbox" checked> STAT</label>
          <label style="margin-left:8px;"><input type="checkbox" checked> High</label>
          <label style="margin-left:8px;"><input type="checkbox" checked> Normal</label>
          <label style="margin-left:8px;"><input type="checkbox" checked> Low</label>
        </div>
      </div>
      <div style="flex:1;">
        <label style="font-size:12px; display:block;">Search</label>
        <input type="text" placeholder="Search by room, bed, task ID, staff" style="width:100%; padding:4px 8px;">
      </div>
    </div>
  </div>
  <div style="display:flex; align-items:stretch;">
    <div style="width:220px; border-right:1px solid #eee; padding:12px 10px;">
      <h4 style="margin-top:0; font-size:14px;">Staff</h4>
      <div style="font-size:12px; margin-bottom:8px;">
        <strong>Available</strong>
        <div>- Ali Khan (Zone A)</div>
        <div>- Maryam Hassan (Zone B)</div>
      </div>
      <div style="font-size:12px;">
        <strong>Busy</strong>
        <div>- John Doe (Task #1023)</div>
      </div>
    </div>
    <div style="flex:1; display:flex; overflow-x:auto; padding:12px 10px; gap:10px;">
      <div style="flex:1; min-width:220px;">
        <h4 style="font-size:14px; margin-top:0;">Pending</h4>
        <div style="background:#f8f9fa; border-radius:4px; padding:8px; margin-bottom:8px;">
          <div style="font-size:12px; font-weight:bold;">Task #1045 • Room 305B (Bed 2)</div>
          <div style="font-size:11px;">Type: Discharge • Protocol: Standard</div>
          <div style="font-size:11px;">Priority: <span>STAT</span> • SLA: Overdue by 05:12</div>
          <button style="margin-top:6px; padding:4px 8px; font-size:11px;">Assign</button>
        </div>
      </div>
      <div style="flex:1; min-width:220px;">
        <h4 style="font-size:14px; margin-top:0;">Assigned</h4>
        <!-- similar cards -->
      </div>
      <div style="flex:1; min-width:220px;">
        <h4 style="font-size:14px; margin-top:0;">In Progress</h4>
      </div>
      <div style="flex:1; min-width:220px;">
        <h4 style="font-size:14px; margin-top:0;">Completed</h4>
      </div>
    </div>
  </div>
</div>

Accessibility (WCAG 2.1 AA)

All filters and buttons have <label> or aria-label.
Kanban lanes implemented as lists with role="list" and cards as role="listitem".
Drag-and-drop must have keyboard equivalents (e.g., select card, press key to open “Assign to…” dialog).
Colour not used as sole indicator; badges include text (e.g., “STAT”, “Overdue”).
Live updates announced through aria-live="polite" region for screen readers (e.g., “New STAT task created in Zone B”).

Responsive / Mobile

On tablets, lanes stack in two columns; on phones, show one lane at a time with a lane selector dropdown.
Staff sidebar collapses into a slide-out panel.
Touch targets minimum 44x44 px; drag-and-drop replaced with tap → “Assign” dialog on small screens.

SCR-CLEANING-002: Cleaning Staff Mobile App

Purpose

Mobile-first interface for cleaning staff to view and manage their assigned tasks, start/stop timers via QR code scanning, complete checklists, record supplies used, and mark tasks complete, including terminal cleaning documentation.

Field Specifications

Field	Type	Required	Validation	Default	Notes
My Tasks List	List	—	Only tasks where `assigned_to=current_staff` and `status IN ('assigned','in_progress')`	—	Grouped by priority and due time
Task Filter (Status)	Segmented control (Assigned/In Progress/Completed)	No	Enum	Assigned	Quick filter
Task Item: Location	Label	Yes	From `locations`/`beds`	—	e.g., “Room 305B – Bed 2”
Task Item: Task Type	Badge	Yes	Enum	—	Discharge, Terminal, OR, Routine, Emergency
Task Item: Priority	Badge	Yes	Enum	—	STAT, High, Normal, Low
Task Details: Protocol Name	Label	Yes	FK to `cleaning_protocols`	—	Includes estimated duration
Task Details: Infection Flag	Badge	Display	From EHR infection control	—	e.g., “Contact Precautions”
QR Scanner	Camera input	Yes (to start/complete)	Must decode valid location/task QR	—	Used to confirm presence
Start Task Button	Button	Conditional	Enabled when QR scan matches task location and status='assigned'	—	Sets `started_datetime`
Checklist Items	Checkbox list with text	Yes	All mandatory items must be checked	—	Bound to `cleaning_checklist_items`
Checklist Item Comment	Textarea (per item)	No	Max 250 chars	—	For exceptions/notes
Timer Display	Read-only	Display	Shows elapsed time since start	—	Used for SLA awareness
Supplies Used: Supply Name	Dropdown (searchable)	No	Must exist in approved supplies master	—	For PDPL minimisation, no patient data here
Supplies Used: Quantity	Numeric	Conditional	> 0	1	Required if supply selected
Supplies Used: Unit	Dropdown	Conditional	Enum (ml, wipes, pcs, etc.)	—	Required with quantity
Maintenance Issue Toggle	Checkbox	No	—	Unchecked	When checked, shows issue fields
Maintenance Issue Type	Dropdown	If toggle checked	Enum (Broken fixture, Spill, Biohazard, Other)	—	Triggers WF-CLN-005 integration
Maintenance Issue Description	Textarea	If toggle checked	Max 500 chars	—	No patient identifiers per PDPL
Complete Task Button	Button	Yes	Enabled when mandatory checklist items complete and QR scan for completion done	—	Sets `completed_datetime`, `status='completed'`

Validation Messages

Condition	Message	Severity
QR code does not match task location	"Scanned location does not match this task. Please verify room/bed."	Error
Start without QR scan	"Scan the room QR code to start the task."	Error
Attempt to complete with unchecked mandatory items	"All mandatory checklist items must be completed before finishing the task."	Error
Supplies quantity missing	"Enter quantity for each selected supply."	Error
Maintenance issue type missing	"Select an issue type to report maintenance."	Error
Network offline	"Offline mode: data will sync automatically when connection is restored."	Info

Actions / Buttons

Start Task: Validates QR; sets started_datetime, status='in_progress'.
Pause Task (optional, if configured): Logs pause/resume events for analytics.
Save Progress: Saves partial checklist and supplies data locally (offline) and to server when online.
Complete Task: Validates checklist, QR completion scan, supplies; updates cleaning_tasks and triggers bed/OR status update event.
Report Maintenance Issue: Creates outbound work order via INT-CLN-004 with location and description.
Open Checklist: Expands checklist section; supports large tap targets.

HTML Wireframe Mockup

Show HTML code

HTML

<div style="font-family: Arial, sans-serif; max-width: 420px; margin: 0 auto; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
  <div style="background: #1a73e8; color: white; padding: 10px 16px;">
    <h3 style="margin: 0; font-size: 16px;">My Cleaning Tasks</h3>
    <div style="font-size: 12px;">Logged in as: Ali Khan</div>
  </div>
  <div style="padding: 10px 16px; border-bottom:1px solid #eee;">
    <div style="display:flex; gap:8px; font-size:12px;">
      <button style="flex:1; padding:6px; border-radius:4px; border:1px solid #1a73e8; background:#1a73e8; color:#fff;">Assigned</button>
      <button style="flex:1; padding:6px; border-radius:4px; border:1px solid #ccc; background:#fff;">In Progress</button>
      <button style="flex:1; padding:6px; border-radius:4px; border:1px solid #ccc; background:#fff;">Completed</button>
    </div>
  </div>
  <div style="max-height: 260px; overflow-y:auto; padding:8px 16px;">
    <div style="border:1px solid #ddd; border-radius:4px; padding:8px; margin-bottom:8px;">
      <div style="font-size:13px; font-weight:bold;">Room 305B • Bed 2</div>
      <div style="font-size:11px;">Task: Discharge Cleaning • Priority: STAT</div>
      <div style="font-size:11px;">Protocol: Standard • ETA: 10 min</div>
      <button style="margin-top:6px; padding:4px 8px; font-size:11px;">Open</button>
    </div>
  </div>
  <div style="border-top:1px solid #eee; padding:10px 16px;">
    <h4 style="margin:0 0 6px 0; font-size:14px;">Task Details</h4>
    <div style="font-size:12px; margin-bottom:6px;">Room 305B • Bed 2 • Discharge • Standard Protocol</div>
    <button style="padding:6px 10px; font-size:12px; border-radius:4px; border:1px solid #1a73e8; background:#1a73e8; color:#fff;">Scan QR to Start</button>
    <div style="margin-top:8px; font-size:12px;">Timer: 00:05:23</div>
    <div style="margin-top:8px; max-height:120px; overflow-y:auto; border:1px solid #eee; padding:6px;">
      <div style="font-size:12px;">
        <label><input type="checkbox"> Bed frame cleaned</label><br>
        <label><input type="checkbox"> Mattress disinfected</label><br>
        <label><input type="checkbox"> Bathroom surfaces disinfected</label>
      </div>
    </div>
    <button style="margin-top:8px; padding:6px 10px; font-size:12px; border-radius:4px; border:1px solid #28a745; background:#28a745; color:#fff;">Complete Task</button>
  </div>
</div>

Accessibility (WCAG 2.1 AA)

Large, labelled buttons; all interactive elements reachable via keyboard (for tablet use with keyboard).
QR scanner has text alternative: manual room selection if camera not available.
Checklist items have clear labels; no reliance on colour alone.
Offline status indicated via text and icon with aria-live="polite".

Responsive / Mobile

Designed mobile-first; single-column layout.
On larger tablets, split view: task list on left, details on right.
Buttons and checkboxes sized for touch; avoid hover-only interactions.

SCR-CLEANING-003: Bed Cleaning Status Board

Purpose

Real-time visual board for nursing and bed management to monitor bed cleanliness status, estimated completion times, and readiness for admission/transfer, integrated with scheduling bed board.

Field Specifications

Field	Type	Required	Validation	Default	Notes
Facility Selector	Dropdown	Yes	FK to `facilities.facility_id`	User’s default facility	Limits view to one facility
Ward/Floor Filter	Dropdown	No	FK to `departments` / floor list	All	Filters beds by ward/floor
View Mode Toggle	Toggle (Grid / List)	No	Enum	Grid	Grid = floor-plan style; List = table
Bed Tile: Bed ID	Label	Yes	FK to `beds.bed_id`	—	e.g., “305B-2”
Bed Tile: Status	Badge	Yes	Enum: Dirty, Cleaning in Progress, Ready, Occupied	—	Sync with scheduling module
Bed Tile: Cleaning Task Link	Icon/button	No	If cleaning task exists	—	Opens task details (SCR-CLEANING-002/001)
Bed Tile: ETA	Label	Display	From `cleaning_tasks.estimated_completion`	—	e.g., “ETA 12 min”
Legend	Static labels	—	—	—	Explains colours/icons
Filter: Show Only Beds Awaiting Cleaning	Checkbox	No	—	Unchecked	For quick focus on bottlenecks

Validation Messages

Condition	Message	Severity
No beds match filters	"No beds found for the selected filters."	Info
Bed has no associated cleaning task but status=Dirty	"Bed marked dirty without cleaning task. Create cleaning task?"	Warning (with action)

Actions / Buttons

Create Cleaning Task (from bed tile): Opens task creation dialog (within module) pre-filled with bed/location and default protocol.
View Task: Opens task details drawer or navigates to SCR-CLEANING-001/002 depending on role.
Mark Ready (Nurse): For final readiness verification; if allowed by policy, sets bed to “Ready” after confirming cleaning completed and inspection (if required).

HTML Wireframe Mockup

Show HTML code

HTML

<div style="font-family: Arial, sans-serif; max-width: 1100px; margin: 0 auto; border:1px solid #ccc; border-radius:8px; overflow:hidden;">
  <div style="background:#1a73e8;color:#fff;padding:10px 16px;">
    <h3 style="margin:0;">Bed Cleaning Status Board</h3>
  </div>
  <div style="padding:10px 16px; border-bottom:1px solid #eee; display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
    <div>
      <label style="font-size:12px; display:block;">Facility</label>
      <select style="padding:4px 8px; min-width:160px;">
        <option>Dubai General Hospital</option>
        <option>Abu Dhabi Medical Center</option>
      </select>
    </div>
    <div>
      <label style="font-size:12px; display:block;">Ward/Floor</label>
      <select style="padding:4px 8px; min-width:140px;">
        <option>All</option>
        <option>3rd Floor - Medical</option>
        <option>4th Floor - Surgical</option>
      </select>
    </div>
    <div>
      <label style="font-size:12px; display:block;">View</label>
      <select style="padding:4px 8px;">
        <option>Grid</option>
        <option>List</option>
      </select>
    </div>
    <label style="font-size:12px; margin-left:auto;">
      <input type="checkbox"> Show only beds awaiting cleaning
    </label>
  </div>
  <div style="padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px;">
    <div style="width:120px; border:1px solid #ddd; border-radius:4px; padding:6px; font-size:11px;">
      <div style="font-weight:bold;">305B-1</div>
      <div>Status: <span>Dirty</span></div>
      <div>Task: Not created</div>
      <button style="margin-top:4px; padding:3px 6px; font-size:11px;">Create Task</button>
    </div>
    <div style="width:120px; border:1px solid #ddd; border-radius:4px; padding:6px; font-size:11px;">
      <div style="font-weight:bold;">305B-2</div>
      <div>Status: <span>Cleaning in Progress</span></div>
      <div>ETA: 12 min</div>
      <button style="margin-top:4px; padding:3px 6px; font-size:11px;">View Task</button>
    </div>
    <div style="width:120px; border:1px solid #ddd; border-radius:4px; padding:6px; font-size:11px;">
      <div style="font-weight:bold;">305B-3</div>
      <div>Status: <span>Ready</span></div>
      <button style="margin-top:4px; padding:3px 6px; font-size:11px;">Mark Occupied</button>
    </div>
  </div>
</div>

Accessibility (WCAG 2.1 AA)

Bed tiles have aria-label describing bed, status, and ETA.
Legend uses text labels; no colour-only indicators.
Keyboard navigation through tiles; Enter to activate actions.
Live updates announced via aria-live="polite".

Responsive / Mobile

On small screens, tiles stack in a single column.
List view becomes a vertical list with key columns only (Bed, Status, ETA, Action).
Filters collapse into a dropdown panel.

SCR-CLEANING-004: OR Turnover Dashboard

Purpose

OR-specific dashboard showing OR room status, case completion, cleaning status, turnover time, and next case info to support DOH/DHA OR efficiency targets.

Field Specifications

Field	Type	Required	Validation	Default	Notes
OR Suite Selector	Dropdown	Yes	List of OR suites for facility	User’s default	Filters rooms
OR Room Card: Room ID	Label	Yes	From OR master	—	e.g., “OR 3”
OR Room Card: Case Status	Badge	Display	From OR module	—	e.g., “Case in Progress”, “Case Completed”
OR Room Card: Cleaning Status	Badge	Display	From `cleaning_tasks`	—	e.g., “Awaiting Cleaning”, “Cleaning in Progress”, “Ready”
OR Room Card: Turnover Timer	Timer	Display	Time from case end to room ready	—	Used for KPI
OR Room Card: Next Case Info	Label	Display	From OR schedule	—	e.g., patient initials, procedure type (no full identifiers on shared board)
Cleaning Task Link	Button	No	—	—	Opens task details
Request Cleaning Button	Button	No	Enabled when case completed and no cleaning task exists	—	Creates OR turnover cleaning task

Validation Messages

Condition	Message	Severity
Request cleaning before case completion	"Cleaning can only be requested after the case is marked complete."	Error
No OR rooms configured	"No OR rooms configured for this facility."	Error

Actions / Buttons

Request Cleaning: Creates task_type='or_turnover' task with appropriate protocol; notifies OR cleaning staff.
View Cleaning Task: Opens SCR-CLEANING-002/001 details.
Mark Room Ready (OR Nurse): Confirms cleaning completed and OR checks done; sets OR room status to “Ready for Next Case”.

Accessibility

OR room cards labelled with aria-label summarising room, status, and timer.
Timers updated in a way that does not overwhelm screen readers (e.g., update text every 30–60 seconds, not every second).

Responsive / Mobile

Cards wrap into multiple rows; on mobile, one card per row.
Next case info truncated with tooltip/expand for details.

SCR-CLEANING-005: Schedule Management

Purpose

Administrative screen for configuring recurring cleaning schedules per zone, assigning protocols and staff teams, and managing templates for routine cleaning.

Field Specifications

Field	Type	Required	Validation	Default	Notes
Zone Selector	Dropdown	Yes	FK to `cleaning_zones.zone_id`	—	Drives schedule grid
Week Selector	Date/week picker	Yes	Valid calendar week	Current week	For viewing schedule
Weekly Schedule Grid	Matrix (days vs time slots)	—	—	—	Shows scheduled tasks
Add Schedule Button	Button	—	—	—	Opens schedule form
Schedule Form: Frequency	Dropdown	Yes	Enum: Daily, Weekly, Monthly	Daily	Maps to `cleaning_schedules.frequency`
Schedule Form: Day of Week	Multi-select	Conditional	Required if Weekly	—	`day_of_week`
Schedule Form: Time Slot	Time picker	Yes	Valid time	—	`time_slot`
Schedule Form: Protocol	Dropdown	Yes	FK to `cleaning_protocols.protocol_id`	Zone default	—
Schedule Form: Assigned Team	Multi-select staff	No	FK to `cleaning_staff.staff_id`	—	Optional pre-assignment
Schedule Form: Active Toggle	Checkbox	Yes	—	Checked	Maps to `is_active`
Template Manager: Template Name	Text	Yes	Max 100 chars	—	For reusable schedules

Validation Messages

Condition	Message	Severity
Overlapping schedule in same zone/time	"Another active schedule exists for this zone and time slot. Confirm overlap or adjust time."	Warning
Missing required fields	"Please complete all required schedule fields."	Error
Attempt to deactivate schedule with future tasks	"This schedule has future generated tasks. Deactivate and cancel future tasks?"	Warning

Actions / Buttons

Add Schedule / Edit Schedule: Opens modal form; saves to cleaning_schedules.
Copy Week: Copies current week’s pattern to another week.
Apply Template: Loads predefined schedule template for selected zone.
Approve Schedule (Facilities Manager): Marks schedule as approved; logs approver and timestamp.

Accessibility

Schedule grid uses table semantics with <th> for days and time slots.
Colour-coded cells also include text (e.g., “Routine – Active”).

Responsive / Mobile

On small screens, grid collapses to list grouped by day.
Editing done via simple forms rather than complex drag interactions.

SCR-CLEANING-006: Quality Inspection Form

Purpose

Tablet-friendly form for supervisors and infection control to perform cleaning quality inspections, score results, capture photos, and trigger re-cleaning tasks when needed.

Field Specifications

Field	Type	Required	Validation	Default	Notes
Location Selector	Dropdown + search	Yes	FK to `locations.location_id` or `beds.bed_id`	From linked task if any	—
Linked Task	Read-only label	No	FK to `cleaning_tasks.task_id`	—	Optional
Inspection Date/Time	Date-time picker	Yes	Cannot be future beyond small tolerance	Now	—
Inspector	Read-only	Yes	Current user	—	`inspector_id`
Inspection Checklist Items	Radio group per item (Pass/Fail/N/A)	Yes	All mandatory items must have value	—	From `Quality Scoring Criteria` master
Score	Calculated numeric	Display	0–100	—	Based on criteria
Pass/Fail	Dropdown	Yes	Enum: Pass, Fail	Auto from score threshold	Can be overridden with reason
Deficiency Notes	Textarea	Conditional	Required if Fail	—	Max 1000 chars
Photo Upload	File input (multi)	No	Image formats only; size limit	—	Stored securely per PDPL
Re-clean Required Toggle	Checkbox	Conditional	Required if Fail	—	When checked, creates new cleaning task

Validation Messages

Condition	Message	Severity
Mandatory checklist item not scored	"Please record a result for all required inspection items."	Error
Fail without deficiency notes	"Provide deficiency details for failed inspections."	Error
Photo upload invalid type/size	"Only image files up to {limit} MB are allowed."	Error

Actions / Buttons

Save Draft: Stores partial inspection; not counted in KPIs.
Submit Inspection: Finalises record; updates cleaning_inspections and, if Fail, optionally creates re-cleaning task.
Create Re-cleaning Task: Opens pre-filled task creation dialog with task_type='reclean' and references inspection.

Accessibility

Form fields labelled; radio groups grouped with <fieldset> and <legend>.
Photo thumbnails have alt text (e.g., “Photo of bathroom sink area”).

Responsive / Mobile

Optimised for tablets; single-column on phones.
Checklist items collapsible by category to reduce scrolling.

SCR-CLEANING-007: Cleaning Analytics Dashboard

Purpose

Management dashboard showing KPIs such as bed turnaround time, OR turnover, task completion rate, inspection scores, staff productivity, supply consumption, and infection-control compliance, aligned with DOH/DHA expectations.

Field Specifications

Field	Type	Required	Validation	Default	Notes
Date Range Filter	Date range picker	Yes	Start ≤ End; max range (e.g., 12 months)	Last 30 days	—
Facility / Zone Filter	Multi-select	No	Valid facility/zone IDs	All	—
KPI Cards	Tiles	Display	Calculated from `cleaning_tasks`, `cleaning_inspections`	—	Bed Turnaround, OR Turnover, etc.
Trend Charts	Line/bar charts	Display	—	—	Per KPI
Staff Productivity Table	Table	Display	—	—	Shows utilisation per staff
Export Button	Button	No	—	—	Exports aggregated data only (no direct identifiers)

Validation Messages

Condition	Message	Severity
No data for selected filters	"No cleaning data available for the selected period and filters."	Info

Actions / Buttons

Apply Filters: Refreshes all KPIs and charts.
Export: Exports current view to CSV/PDF for management reporting and DOH/DHA audits.
Drill-down: Clicking KPI opens detailed report (e.g., list of outlier tasks).

Accessibility

Charts accompanied by data tables for screen readers.
KPI tiles include text values and descriptions; not colour-only.

Responsive / Mobile

KPI tiles stack vertically; charts simplified or hidden behind “View Chart” links on small screens.

Common UI Patterns

Although cleaning screens are primarily location-focused, when a specific encounter is relevant (e.g., terminal cleaning after infectious patient discharge), a compact banner is shown:

Fields: Room/Bed, Patient initials (or anonymised ID), infection/isolation flags, last discharge time.
PDPL Consideration: Avoid full patient identifiers on shared boards; show minimal necessary data (e.g., “Infection: Contact Precautions”) per UAE PDPL data minimisation.

Pattern:

Show HTML code

HTML

<div style="background:#f5f5f5; padding:6px 10px; border-radius:4px; font-size:12px;">
  <strong>Room 305B • Bed 2</strong>
  <span style="margin-left:8px;">Patient: F.A. (THIQA)</span>
  <span style="margin-left:8px; color:#b00020;">Isolation: Contact</span>
  <span style="margin-left:8px;">Discharged: 14:32</span>
</div>

2. Search Components

Debounced search (300–500 ms) for tasks, staff, locations, supplies.
Autocomplete dropdown with keyboard navigation.
Clear button to reset search.

Validation:

Minimum 2–3 characters before search to reduce load.
“No results found” messaging.

3. Alerts / Notifications

Inline validation messages near fields.
Toast notifications for non-blocking events (e.g., “Task assigned to Ali Khan”).
Modal confirmations for critical actions (reassigning in-progress tasks, deactivating schedules).

Severity levels:

Info (blue), Warning (amber), Error (red) with icons and text.
For infection-control critical issues (e.g., missing terminal cleaning), use prominent warning with clear action.

4. Loading States

Skeleton loaders for boards and dashboards.
Spinners with text “Loading cleaning tasks…” and aria-busy="true".
Timeouts with retry option if backend slow/unavailable.

5. Arabic/English Bilingual UI

All labels, messages, and buttons must support Arabic and English, with user preference or facility default.
Right-to-left (RTL) support for Arabic:
Layout mirroring (e.g., Kanban lanes from right to left).
Text alignment adjusted appropriately.
Avoid text embedded in images; use translatable text.
Date/time formats consistent with UAE conventions (e.g., 24-hour time, DD/MM/YYYY).

Example bilingual label:

English: “Bed Turnaround Time”
Arabic: “وقت تجهيز السرير”

All interactive elements reachable via Tab; logical order.
Use aria-label, aria-describedby, and role attributes appropriately.
Live regions (aria-live) for real-time updates (new tasks, status changes) without overwhelming users.

7. Colour and Icon Usage

Do not rely on colour alone; include text labels (e.g., “Ready”, “Dirty”).
Icons accompanied by tooltips and accessible names.

8. Responsive Design Principles

Mobile-first for SCR-CLEANING-002; tablet-first for SCR-CLEANING-006; desktop-first for dashboards/boards.
Breakpoints:
< 600px: single-column, stacked components.
600–1024px: two-column where appropriate.
1024px: full dashboards and Kanban layouts.

Cleaning Management Screen Requirements

Screen Inventory

Navigation Flow

Screen Specifications

SCR-CLEANING-001: Cleaning Task Board (Dispatcher)

Field Specifications

Validation Messages

Actions / Buttons

HTML Wireframe Mockup

Accessibility (WCAG 2.1 AA)

Responsive / Mobile

SCR-CLEANING-002: Cleaning Staff Mobile App

Field Specifications

Validation Messages

Actions / Buttons

HTML Wireframe Mockup

Accessibility (WCAG 2.1 AA)

Responsive / Mobile

SCR-CLEANING-003: Bed Cleaning Status Board

Field Specifications

Validation Messages

Actions / Buttons

HTML Wireframe Mockup

Accessibility (WCAG 2.1 AA)

Responsive / Mobile

SCR-CLEANING-004: OR Turnover Dashboard

Field Specifications

Validation Messages

Actions / Buttons

Accessibility

Responsive / Mobile

SCR-CLEANING-005: Schedule Management

Field Specifications

Validation Messages

Actions / Buttons

Accessibility

Responsive / Mobile

SCR-CLEANING-006: Quality Inspection Form

Field Specifications

Validation Messages

Actions / Buttons

Accessibility

Responsive / Mobile

SCR-CLEANING-007: Cleaning Analytics Dashboard

Field Specifications

Validation Messages

Actions / Buttons

Accessibility

Responsive / Mobile

Common UI Patterns

1. Patient / Location Banner

2. Search Components

3. Alerts / Notifications

4. Loading States

5. Arabic/English Bilingual UI

6. Keyboard and Screen Reader Support

7. Colour and Icon Usage

8. Responsive Design Principles