Floorplan Components

Overview

The Warehouse Floor Plan module provides SVG-based zone layout visualization with real-time driver overlay.

Components

FloorplanEditor (Admin Only)

Admin-only floor plan editor with full editing capabilities.

Features:

• SVG upload/import
• Canvas editor with pan & zoom
• Draw rectangular zones (drag to draw)
• Select zone tool (select + move + resize)
• Color picker + label input for zones
• Snap-to-grid toggle
• Undo/Redo basic (stack of changes)
• Save button with debounced autosave
• Zone list panel
• Heatmap toggle
• Driver overlay toggle (real-time markers)
• Export/Import JSON

Location: src/pages/admin/FloorplanEditor.tsx

FloorplanViewer (Read-Only)

Read-only viewer for workers and admins.

Features:

• Load floorplan + zones (read-only)
• Pan & Zoom
• Zone highlighting on hover/click
• Heatmap toggle (read-only)
• Driver overlay toggle
• Hazard Overlay (Phase 3):
  • Visual risk heat map with smooth gradients
  • Color-coded zones (Green → Yellow → Orange → Red)
  • Tooltip details on hover
  • Threshold indicators for critical zones
  • Manual hazard marking (Safety Officer only)
• Pick & Pack integration:
  • Highlight route for current pick list
  • Show "Your next zone: Z07" with blinking highlight
• No editing capabilities

Location: src/pages/warehouse/FloorplanViewer.tsx

Backend Functions

lib/floorplan.ts

Core floorplan management functions:

• parseSvg() - Extract width, height, viewBox from SVG
• normalizeCoordinates() - Normalize coordinates to viewBox units
• sanitizeSvg() - Remove scripts/styles (XSS protection)
• createFloorplan() - Create new floorplan
• updateFloorplan() - Update existing floorplan
• createZoneFromRect() - Create zone shape from rectangle
• updateZoneShape() - Update zone shape properties
• deleteZoneShape() - Delete zone shape
• getFloorplanWithZones() - Get floorplan with all zones
• computeHeatmap() - Compute heatmap data from analytics
• mapGeoToSvg() - Map GPS coordinates to SVG (optional)

Security

• SVG content sanitization using sanitize-html
• Tenant isolation via RLS policies
• Admin-only editing (workers read-only)
• Rate limiting on save operations

Integration

• Zones: Links to existing zones table
• Analytics: Heatmap computed from analytics data
• Driver Locations: Real-time GPS overlay
• Pick & Pack: Route visualization on floor plan
• Hazard Mapping (Phase 3): Predictive safety risk overlay integrated with warehouse floor plan

Hazard Mapping (Phase 3)

Overview

Hazard Mapping provides visual risk overlay on warehouse floor plans, showing predictive safety scores as color-coded zones.

Features

• Automatic Projection: Zone predictive scores are automatically projected to hazard_zones when scores are calculated
• Smooth Gradients: Visual gradients from green (low risk) to red (critical risk)
• Tooltip Details: Hover over zones to see risk score, source (predictive/manual), and notes
• Threshold Indicators: Critical risk zones (70+) show red circle indicators
• Manual Marking: Safety Officers can manually mark hazards with custom risk scores and notes

Color Scheme

• Green (#00ff00): Low risk (0-30)
• Yellow (#ffaa00): Medium risk (30-50)
• Orange (#ff8800): High risk (50-70)
• Red (#ff0000): Critical risk (70-100)

Manual Hazard Marking

Safety Officers can:

1. Click on a zone in the floor plan viewer
2. Set risk score (0-100) using slider
3. Add optional notes
4. Save to create/update hazard zone

Database

• hazard_zones: Links predictive scores or manual hazards to floor plan zones
• Automatically synced when predictive scores are calculated
• Supports both predictive and manual sources

Permissions

• Admin: Full access (create, read, update, delete)
• Worker: Read-only access (viewer)
• Driver: No access

Database Tables

• floorplans - Master floor plan records
• floorplan_zones - Zone shapes on floor plans

See Database Schema for details.