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
• 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

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.