# Floor Plan Designer

Use the Floor Plan Designer to create a visual map of your store layout, place racks and fixtures, assign product categories to zones, and manage layout versions for seasonal changes. The designer is powered by a drag-and-drop canvas that makes it easy to build an accurate representation of your sales floor.

---

## Overview

The Floor Plan module has three main pages:

| Page | Purpose | Route |
|------|---------|-------|
| **Designer** | Visual drag-and-drop canvas for placing racks and editing the floor plan | `/admin/:typeNum/floor-plan` |
| **Layouts** | Create, compare, and activate different category assignment configurations | `/admin/:typeNum/floor-plan/layouts` |
| **Rack Types** | Reference guide showing all available rack shapes, sizes, and zone counts | `/admin/:typeNum/floor-plan/rack-types` |

> **Permissions:** You need the `uri_floor_plans` permission to view floor plans and `uri_floor_plans_manage` to make changes.

---

## The Designer Interface

The designer is a full-featured visual editor built on the SyncFusion Diagram component. It fills your browser window and includes several key areas.

### Header Bar

The header bar at the top shows the floor plan name and provides quick access to:
- **Save** -- Save diagram changes
- **Fullscreen** -- Toggle fullscreen mode for maximum canvas space (press `Esc` or click the button again to exit)
- **Navigation links** to Layouts, Rack Types, and Reports

### Canvas Area

The main canvas is where you build your floor plan. Key interactions:

| Action | How |
|--------|-----|
| **Pan** | Click and drag on empty space |
| **Zoom** | Scroll wheel or pinch gesture |
| **Select rack** | Click on a rack |
| **Move rack** | Drag a selected rack to reposition |
| **Multi-select** | Hold Shift and click multiple racks |

### Toolbar

The toolbar provides tools for:
- Adding new racks from the rack type palette
- Searching for racks by name
- Uploading a background image (e.g., a store blueprint)
- Exporting the floor plan as PNG or JSON
- Syncing diagram positions to the database

### Sidebar Panel

When you select a rack on the canvas, the sidebar shows:
- Rack name and type
- Zone/socket details
- Category assignments for the current layout
- Edit and delete options

---

## Creating Your First Floor Plan

### Step 1: Open the Designer

Navigate to **Admin** > **Floor Plan** or go directly to `/admin/:typeNum/floor-plan`.

If no floor plan exists yet, the designer will prompt you to create one.

### Step 2: Add Racks

1. Open the rack palette from the toolbar
2. Select a rack type (see Rack Types Reference below)
3. The rack appears on the canvas -- drag it to the correct position
4. Double-click the rack to rename it (e.g., "Wall Rack A", "Center Island 1")

### Step 3: Position Your Layout

- Drag racks to match your physical store layout
- Use the grid snapping to align racks neatly
- Upload a background image of your store blueprint for reference positioning

### Step 4: Save

Click `Save` in the toolbar to persist all rack positions. After saving, use `Sync` to ensure all rack positions are written to the database for use in reports and heatmaps.

> **Tip:** Use the fullscreen mode when working on detailed layouts. The extra screen space makes positioning much easier.

---

## Working with Background Images

You can upload a store blueprint or overhead photo to use as a positioning guide:

1. Click the background image button in the toolbar
2. Select an image file (PNG or JPEG)
3. The image appears behind your racks at reduced opacity
4. Position your racks to align with the background
5. The background image can be removed at any time

---

## Draft Workflow

The designer supports a draft workflow so you can make changes without affecting the live floor plan:

1. **Create Draft** -- Start editing from the current published state
2. **Make Changes** -- Add, move, or remove racks
3. **Preview** -- Review your changes before publishing
4. **Publish** -- Apply the draft as the new current state
5. **Discard** -- Throw away draft changes and revert

---

## Rack Types Reference

Access the Rack Types page from `/admin/:typeNum/floor-plan/rack-types` or via the link in the designer header.

Rack types are organized by category and each type specifies:

| Property | Description |
|----------|-------------|
| **Name** | The rack type name (e.g., "4-Way Rack", "Wall Section") |
| **Shape** | Rectangle, circle, or cross |
| **Default Size** | Width x Height dimensions |
| **Zones** | Number of zones/sockets where categories can be assigned |
| **Description** | What this rack type represents physically |

Each rack type card shows a shape preview so you can visually identify the type at a glance.

> **Tip:** The number of zones determines how many different product categories can be assigned to that rack. A "4-Way Rack" with 4 zones can hold 4 different category assignments.

---

## Layout Management

Layouts define which product categories go where on your floor plan. Navigate to **Layouts** (`/admin/:typeNum/floor-plan/layouts`) to manage them.

### Layout Types

| Type | Purpose |
|------|---------|
| **Current** | The active layout representing what is actually on your sales floor right now |
| **Wanted** | A planned layout for future changes (e.g., seasonal resets, event layouts) |

### Layout Statuses

| Status | Color | Meaning |
|--------|-------|---------|
| **Draft** | Gray | Being prepared, not yet active |
| **Active** | Green | Currently in use |
| **Scheduled** | Amber | Set to activate on a future date |
| **Archived** | Light Gray | Previously active, now historical |

### Creating a Layout

1. Click `Create Layout`
2. Enter a **Name** (e.g., "Holiday Season 2025")
3. Select **Type**: Wanted (for planning) or Current
4. Optionally **Copy Assignments From** an existing layout to start with the same category placements
5. Optionally **Link to Event** to auto-schedule activation with an event start date
6. Add an optional **Description**
7. Click `Create Layout`

### Comparing Layouts (Diff)

For Wanted layouts, click `Diff` to compare it against the current layout:

- **Additions** (green): Categories placed in the wanted layout that are not in the current layout
- **Removals** (red): Categories in the current layout that are removed in the wanted layout
- **Dropped Categories** (amber): Categories that exist in the current layout but have no placement in the wanted layout

### Generating Move Tasks

After reviewing a diff, click `Generate Tasks` to create actionable move tasks:

1. For dropped categories, choose whether to **Send to Backstock** or mark as **Gone (No Task)**
2. Click `Generate Tasks`
3. Tasks are created for each addition and removal

### Viewing and Completing Tasks

Click `Tasks` on any Wanted layout to see all generated move tasks:

- Each task shows a description, category, and status
- Click `Complete` to mark a task as done
- For backstock tasks, you can optionally enter a bin number
- The pending count badge shows how many tasks remain

### Activating a Layout

1. Find a Draft layout on the Layouts page
2. Click `Activate`
3. Confirm the activation -- the previous layout will be archived automatically

> **Warning:** Activating a layout replaces the current active layout. Make sure all move tasks are completed first.

---

## Workbook Integration

The floor plan also appears in the Workbook as a read-only panel showing:

- A mini-map thumbnail of the store layout
- **Rack count** and **maintenance needs** at a glance
- **Maintenance Queue**: Racks that need attention (tidying, restocking), with one-click "Mark Done" buttons
- **Move Tasks**: Pending layout change tasks that team members can complete from the Workbook

---

## Exporting Your Floor Plan

Two export options are available from the designer toolbar:

| Format | Use Case |
|--------|----------|
| **PNG** | Visual image for printing or sharing |
| **JSON** | Data backup or transfer to another store |

---

## Troubleshooting

### Racks are not showing on the canvas
- Ensure the floor plan has been saved and synced. Click `Sync` in the toolbar.
- Try refreshing the page. Large floor plans may take a moment to render.

### Cannot edit racks or add new ones
- Verify you have the `uri_floor_plans_manage` permission. View-only users can see the floor plan but cannot make changes.

### Background image is not displaying
- Check that the image is in PNG or JPEG format. Other formats may not be supported.
- Very large images may take time to load. Try a smaller resolution version.

---

## Related Articles

- [Floor Plan Reports](/support/articles/floor-plan-reports)
- [Replenishment System](/support/articles/replenishment-system)