updated interface

app/__init__.py

@@ -38,6 +38,7 @@ def create_app(config_name: str = "default") -> Flask:
     from app.routes.sonoff import sonoff_bp
     from app.routes.tuya import tuya_bp
     from app.routes.layouts import layouts_bp
+    from app.routes.devices import devices_bp
 
     app.register_blueprint(auth_bp)
     app.register_blueprint(dashboard_bp)
@@ -48,6 +49,7 @@ def create_app(config_name: str = "default") -> Flask:
     app.register_blueprint(sonoff_bp)
     app.register_blueprint(tuya_bp)
     app.register_blueprint(layouts_bp, url_prefix="/layouts")
+    app.register_blueprint(devices_bp, url_prefix="/devices")
 
     # ── user loader ───────────────────────────────────────────────────────────
     from app.models.user import User
@@ -76,6 +78,7 @@ def create_app(config_name: str = "default") -> Flask:
         from app.models import sonoff_device  # noqa: F401
         from app.models import tuya_device  # noqa: F401
         from app.models import layout  # noqa: F401
+        from app.models import device  # noqa: F401
         db.create_all()
         _seed_admin(app)
         _add_entities_column(app)

app/models/board.py

@@ -65,6 +65,10 @@ class Board(db.Model):
         "TuyaDevice", back_populates="board",
         cascade="all, delete-orphan", lazy="dynamic"
     )
+    devices = db.relationship(
+        "Device", back_populates="board",
+        cascade="all, delete-orphan", lazy="dynamic"
+    )
 
     # ── helpers ──────────────────────────────────────────────────────
     @property

app/models/device.py

@@ -0,0 +1,105 @@
+"""User-defined device abstraction.
+
+A Device is a human-friendly alias for a board relay (controllable output) or
+a board digital input (sensor/trigger) that the user wants to expose as a named
+entity — e.g. "Outdoor Light 1 (Courtyard)" mapped to Board "Garage" / Relay 4.
+
+Devices provide an intermediate, named layer so they can later be placed on
+Layout pages as interactive widgets without the UI needing raw board/relay IDs.
+"""
+from datetime import datetime
+from app import db
+
+
+class Device(db.Model):
+    __tablename__ = "devices"
+
+    id           = db.Column(db.Integer, primary_key=True)
+    name         = db.Column(db.String(128), nullable=False)
+    description  = db.Column(db.String(256), nullable=True)
+    area         = db.Column(db.String(64),  nullable=True)   # e.g. "Courtyard", "Living Room"
+
+    # Device category — drives default icon and state labels
+    device_class = db.Column(db.String(32),  nullable=False, default="switch")
+
+    # Bootstrap-Icons class override; None → use type default
+    icon         = db.Column(db.String(64),  nullable=True)
+
+    # ── Source entity on a board ─────────────────────────────────────────────
+    board_id     = db.Column(
+        db.Integer, db.ForeignKey("boards.id", ondelete="SET NULL"), nullable=True
+    )
+    entity_type  = db.Column(db.String(16), nullable=True)   # "relay" | "input"
+    entity_num   = db.Column(db.Integer,    nullable=True)    # 1-based relay/input index
+
+    created_at   = db.Column(db.DateTime, default=datetime.utcnow)
+
+    # ── relationships ────────────────────────────────────────────────────────
+    board = db.relationship("Board", back_populates="devices")
+
+    # ── helpers ──────────────────────────────────────────────────────────────
+    @property
+    def is_controllable(self) -> bool:
+        """True when the source entity is a relay (can be toggled ON/OFF)."""
+        return self.entity_type == "relay"
+
+    @property
+    def effective_icon(self) -> str:
+        """Icon class to use in the UI (custom override or type default)."""
+        from app.models.entity_types import RELAY_ENTITY_TYPES, INPUT_ENTITY_TYPES
+        if self.icon:
+            return self.icon
+        if self.entity_type == "relay":
+            return RELAY_ENTITY_TYPES.get(
+                self.device_class, RELAY_ENTITY_TYPES["switch"]
+            )["icon"]
+        if self.entity_type == "input":
+            return INPUT_ENTITY_TYPES.get(
+                self.device_class, INPUT_ENTITY_TYPES["generic"]
+            )["icon"]
+        return "bi-cpu"
+
+    @property
+    def current_state(self):
+        """Returns the current boolean state or None if unavailable."""
+        if not self.board or not self.entity_type or not self.entity_num:
+            return None
+        if self.entity_type == "relay":
+            return self.board.relay_states.get(f"relay_{self.entity_num}", False)
+        if self.entity_type == "input":
+            raw = self.board.input_states.get(f"input_{self.entity_num}", True)
+            return not raw   # NC contact: raw True = resting → False = idle
+        return None
+
+    @property
+    def state_label(self) -> str:
+        """Human-readable state string."""
+        from app.models.entity_types import RELAY_ENTITY_TYPES, INPUT_ENTITY_TYPES
+        state = self.current_state
+        if state is None:
+            return "Unknown"
+        if self.entity_type == "relay":
+            tdef = RELAY_ENTITY_TYPES.get(self.device_class, RELAY_ENTITY_TYPES["switch"])
+            return tdef["on"][1] if state else tdef["off"][1]
+        if self.entity_type == "input":
+            tdef = INPUT_ENTITY_TYPES.get(self.device_class, INPUT_ENTITY_TYPES["generic"])
+            return tdef["active"][1] if state else tdef["idle"][1]
+        return "Unknown"
+
+    @property
+    def state_color(self) -> str:
+        """Bootstrap color name for current state badge."""
+        from app.models.entity_types import RELAY_ENTITY_TYPES, INPUT_ENTITY_TYPES
+        state = self.current_state
+        if state is None:
+            return "secondary"
+        if self.entity_type == "relay":
+            tdef = RELAY_ENTITY_TYPES.get(self.device_class, RELAY_ENTITY_TYPES["switch"])
+            return tdef["on"][0] if state else tdef["off"][0]
+        if self.entity_type == "input":
+            tdef = INPUT_ENTITY_TYPES.get(self.device_class, INPUT_ENTITY_TYPES["generic"])
+            return tdef["active"][0] if state else tdef["idle"][0]
+        return "secondary"
+
+    def __repr__(self):
+        return f"<Device {self.name!r} id={self.id}>"

app/routes/devices.py

@@ -0,0 +1,218 @@
+"""Devices module routes.
+
+Devices are user-defined friendly aliases for board relay/input entities.
+E.g. Board "Garage" / Relay 4 → "Outdoor Light 1 (Courtyard)".
+"""
+import json
+from flask import (Blueprint, render_template, redirect, url_for,
+                   flash, request, abort, jsonify)
+from flask_login import login_required, current_user
+from flask import current_app
+
+from app import db
+from app.models.board import Board
+from app.models.device import Device
+from app.models.entity_types import (RELAY_ENTITY_TYPES, INPUT_ENTITY_TYPES,
+                                     ICON_PALETTE)
+from app.services.board_service import set_relay, poll_board
+
+devices_bp = Blueprint("devices", __name__)
+
+
+# ── helpers ───────────────────────────────────────────────────────────────────
+
+def _class_choices(entity_type: str) -> list[tuple[str, str]]:
+    """Return (value, label) pairs for the device_class selector."""
+    if entity_type == "relay":
+        return [(k, v["label"]) for k, v in RELAY_ENTITY_TYPES.items()]
+    return [(k, v["label"]) for k, v in INPUT_ENTITY_TYPES.items()]
+
+
+# ── list ──────────────────────────────────────────────────────────────────────
+
+@devices_bp.route("/")
+@login_required
+def list_devices():
+    devices = Device.query.order_by(Device.area, Device.name).all()
+    return render_template("devices/list.html", devices=devices)
+
+
+# ── add ───────────────────────────────────────────────────────────────────────
+
+@devices_bp.route("/add", methods=["GET", "POST"])
+@login_required
+def add_device():
+    if not current_user.is_admin():
+        abort(403)
+    boards = Board.query.order_by(Board.name).all()
+
+    if request.method == "POST":
+        name = request.form.get("name", "").strip()
+        if not name:
+            flash("Name is required.", "danger")
+            return render_template(
+                "devices/edit.html",
+                device=None, boards=boards,
+                relay_types=RELAY_ENTITY_TYPES,
+                input_types=INPUT_ENTITY_TYPES,
+                icon_palette=ICON_PALETTE,
+            )
+
+        board_id    = request.form.get("board_id") or None
+        entity_type = request.form.get("entity_type") or None
+        entity_num  = request.form.get("entity_num") or None
+
+        device = Device(
+            name        = name,
+            description = request.form.get("description", "").strip() or None,
+            area        = request.form.get("area", "").strip() or None,
+            device_class= request.form.get("device_class", "switch"),
+            icon        = request.form.get("icon", "").strip() or None,
+            board_id    = int(board_id) if board_id else None,
+            entity_type = entity_type,
+            entity_num  = int(entity_num) if entity_num else None,
+        )
+        db.session.add(device)
+        db.session.commit()
+        flash(f"Device '{name}' created successfully.", "success")
+        return redirect(url_for("devices.list_devices"))
+
+    return render_template(
+        "devices/edit.html",
+        device=None, boards=boards,
+        relay_types=RELAY_ENTITY_TYPES,
+        input_types=INPUT_ENTITY_TYPES,
+        icon_palette=ICON_PALETTE,
+    )
+
+
+# ── edit ──────────────────────────────────────────────────────────────────────
+
+@devices_bp.route("/<int:device_id>/edit", methods=["GET", "POST"])
+@login_required
+def edit_device(device_id: int):
+    if not current_user.is_admin():
+        abort(403)
+    device = db.get_or_404(Device, device_id)
+    boards = Board.query.order_by(Board.name).all()
+
+    if request.method == "POST":
+        name = request.form.get("name", "").strip()
+        if not name:
+            flash("Name is required.", "danger")
+            return render_template(
+                "devices/edit.html",
+                device=device, boards=boards,
+                relay_types=RELAY_ENTITY_TYPES,
+                input_types=INPUT_ENTITY_TYPES,
+                icon_palette=ICON_PALETTE,
+            )
+
+        board_id    = request.form.get("board_id") or None
+        entity_type = request.form.get("entity_type") or None
+        entity_num  = request.form.get("entity_num") or None
+
+        device.name         = name
+        device.description  = request.form.get("description", "").strip() or None
+        device.area         = request.form.get("area", "").strip() or None
+        device.device_class = request.form.get("device_class", device.device_class)
+        device.icon         = request.form.get("icon", "").strip() or None
+        device.board_id     = int(board_id) if board_id else None
+        device.entity_type  = entity_type
+        device.entity_num   = int(entity_num) if entity_num else None
+
+        db.session.commit()
+        flash(f"Device '{name}' updated.", "success")
+        return redirect(url_for("devices.list_devices"))
+
+    return render_template(
+        "devices/edit.html",
+        device=device, boards=boards,
+        relay_types=RELAY_ENTITY_TYPES,
+        input_types=INPUT_ENTITY_TYPES,
+        icon_palette=ICON_PALETTE,
+    )
+
+
+# ── delete ────────────────────────────────────────────────────────────────────
+
+@devices_bp.route("/<int:device_id>/delete", methods=["POST"])
+@login_required
+def delete_device(device_id: int):
+    if not current_user.is_admin():
+        abort(403)
+    device = db.get_or_404(Device, device_id)
+    name = device.name
+    db.session.delete(device)
+    db.session.commit()
+    flash(f"Device '{name}' deleted.", "warning")
+    return redirect(url_for("devices.list_devices"))
+
+
+# ── toggle relay (AJAX) ───────────────────────────────────────────────────────
+
+@devices_bp.route("/<int:device_id>/toggle", methods=["POST"])
+@login_required
+def toggle_device(device_id: int):
+    device = db.get_or_404(Device, device_id)
+    if not device.is_controllable:
+        return jsonify({"ok": False, "error": "Device is not controllable."}), 400
+    if not device.board:
+        return jsonify({"ok": False, "error": "No board linked."}), 400
+
+    # Determine new state (toggle)
+    current = device.board.relay_states.get(f"relay_{device.entity_num}", False)
+    new_state = not current
+
+    app = current_app._get_current_object()
+    ok = set_relay(device.board, device.entity_num, new_state)
+
+    # Re-read updated relay state
+    poll_board(app, device.board_id)
+    updated_device = db.session.get(Device, device_id)
+
+    return jsonify({
+        "ok": ok,
+        "state": updated_device.current_state,
+        "state_label": updated_device.state_label,
+        "state_color": updated_device.state_color,
+    })
+
+
+# ── API: board entity info (for dynamic form population) ─────────────────────
+
+@devices_bp.route("/api/boards/<int:board_id>/entities")
+@login_required
+def board_entities(board_id: int):
+    """Return relay and input entity info for the given board as JSON."""
+    board = db.get_or_404(Board, board_id)
+    relays = []
+    for n in range(1, board.num_relays + 1):
+        e = board.get_relay_entity(n)
+        state = board.relay_states.get(f"relay_{n}", False)
+        relays.append({
+            "num":        n,
+            "name":       e["name"],
+            "type":       e["type"],
+            "icon":       e["icon"],
+            "state":      state,
+            "state_label": e["on_label"] if state else e["off_label"],
+            "on_color":   e["on_color"],
+            "off_color":  e["off_color"],
+        })
+    inputs = []
+    for n in range(1, board.num_inputs + 1):
+        e = board.get_input_entity(n)
+        raw = board.input_states.get(f"input_{n}", True)
+        active = not raw
+        inputs.append({
+            "num":          n,
+            "name":         e["name"],
+            "type":         e["type"],
+            "icon":         e["icon"],
+            "active":       active,
+            "state_label":  e["active_label"] if active else e["idle_label"],
+            "active_color": e["active_color"],
+            "idle_color":   e["idle_color"],
+        })
+    return jsonify({"relays": relays, "inputs": inputs})

app/templates/base.html

@@ -31,6 +31,12 @@
           <i class="bi bi-motherboard me-2"></i>Boards
         </a>
       </li>
+      <li>
+        <a href="{{ url_for('devices.list_devices') }}"
+           class="nav-link text-white {% if 'devices.' in request.endpoint %}active{% endif %}">
+          <i class="bi bi-hdd-stack me-2"></i>Devices
+        </a>
+      </li>
       <li>
         <a href="{{ url_for('workflows.list_workflows') }}"
            class="nav-link text-white {% if 'workflows.' in request.endpoint %}active{% endif %}">

app/templates/devices/_card.html

@@ -0,0 +1,75 @@
+{% set state = device.current_state %}
+{% set controllable = device.is_controllable %}
+
+<div class="card border-0 rounded-4 h-100
+  {% if controllable %}
+    {% if state %}border-start border-3 border-{{ device.state_color }}
+    {% else %}border-start border-3 border-secondary{% endif %}
+  {% else %}border-start border-3 border-primary{% endif %}">
+
+  <div class="card-body p-3">
+    <!-- Icon + name row -->
+    <div class="d-flex align-items-start gap-3 mb-2">
+      <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
+           style="width:56px;height:56px;background:var(--bs-secondary-bg)">
+        <i class="bi {{ device.effective_icon }}"
+           style="font-size:1.8rem;
+             {% if controllable and state %}color:var(--bs-{{ device.state_color }}){% endif %}"></i>
+      </div>
+      <div class="flex-grow-1 min-w-0">
+        <div class="fw-semibold text-truncate">{{ device.name }}</div>
+        {% if device.description %}
+        <div class="text-secondary small text-truncate">{{ device.description }}</div>
+        {% endif %}
+        <div class="d-flex flex-wrap gap-1 mt-1">
+          {% if device.area %}
+          <span class="badge text-bg-secondary" style="font-size:.65rem">
+            <i class="bi bi-geo-alt me-1"></i>{{ device.area }}
+          </span>
+          {% endif %}
+          <span class="badge text-bg-secondary" style="font-size:.65rem">
+            {{ device.device_class | capitalize }}
+          </span>
+          {% if device.board %}
+          <span class="badge text-bg-secondary" style="font-size:.65rem">
+            <i class="bi bi-motherboard me-1"></i>{{ device.board.name }}
+            / {{ device.entity_type | capitalize }} {{ device.entity_num }}
+          </span>
+          {% else %}
+          <span class="badge text-bg-warning" style="font-size:.65rem">No board</span>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <!-- State + controls row -->
+    <div class="d-flex align-items-center justify-content-between mt-2">
+      <span class="badge device-state-badge text-bg-{{ device.state_color }}">
+        {{ device.state_label }}
+      </span>
+      <div class="d-flex gap-1">
+        {% if controllable and device.board %}
+        <button type="button"
+                class="btn btn-sm {% if state %}btn-{{ device.state_color }}{% else %}btn-outline-secondary{% endif %}"
+                onclick="deviceToggle(this, {{ device.id }})"
+                title="Toggle {{ device.name }}">
+          <i class="bi bi-power me-1"></i>{% if state %}ON{% else %}OFF{% endif %}
+        </button>
+        {% endif %}
+        {% if current_user.is_admin() %}
+        <a href="{{ url_for('devices.edit_device', device_id=device.id) }}"
+           class="btn btn-sm btn-outline-secondary" title="Edit">
+          <i class="bi bi-pencil"></i>
+        </a>
+        <form method="POST"
+              action="{{ url_for('devices.delete_device', device_id=device.id) }}"
+              onsubmit="return confirm('Delete device \'{{ device.name }}\'?')">
+          <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
+            <i class="bi bi-trash"></i>
+          </button>
+        </form>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

app/templates/devices/edit.html

@@ -0,0 +1,473 @@
+{% extends "base.html" %}
+{% block title %}{% if device %}Edit Device – {{ device.name }}{% else %}Add Device{% endif %}{% endblock %}
+
+{% block content %}
+<nav aria-label="breadcrumb" class="mb-3">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="{{ url_for('devices.list_devices') }}">Devices</a></li>
+    <li class="breadcrumb-item active">
+      {% if device %}Edit – {{ device.name }}{% else %}Add Device{% endif %}
+    </li>
+  </ol>
+</nav>
+
+<h2 class="fw-bold mb-1">
+  <i class="bi bi-hdd-stack me-2 text-info"></i>
+  {% if device %}Edit Device{% else %}Add Device{% endif %}
+</h2>
+<p class="text-secondary mb-4">
+  Give your device a name and map it to a relay or sensor channel on one of your boards.
+  Once mapped, toggling the device will control the physical hardware.
+</p>
+
+<form method="POST" id="deviceForm">
+
+  <!-- Hidden binding fields submitted with the form -->
+  <input type="hidden" id="hBoardId"    name="board_id"    value="{{ device.board_id if device and device.board_id else '' }}" />
+  <input type="hidden" id="hEntityType" name="entity_type" value="{{ device.entity_type if device and device.entity_type else '' }}" />
+  <input type="hidden" id="hEntityNum"  name="entity_num"  value="{{ device.entity_num if device and device.entity_num else '' }}" />
+
+<div class="row g-4">
+
+  <!-- ══════════════════ LEFT: identity + icon + type ══════════════════════ -->
+  <div class="col-lg-4">
+
+    <!-- Identity -->
+    <div class="card border-0 rounded-4 mb-4">
+      <div class="card-body p-4">
+        <h5 class="fw-semibold mb-3"><i class="bi bi-tag me-1 text-info"></i> Identity</h5>
+
+        <div class="mb-3">
+          <label class="form-label" for="name">Device name <span class="text-danger">*</span></label>
+          <input type="text" class="form-control" id="name" name="name"
+                 value="{{ device.name if device else '' }}"
+                 placeholder="e.g. Outdoor Light 1 – Courtyard"
+                 maxlength="128" required />
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label" for="description">Description <span class="text-secondary small">(optional)</span></label>
+          <input type="text" class="form-control" id="description" name="description"
+                 value="{{ device.description if device and device.description else '' }}"
+                 placeholder="Short description" maxlength="256" />
+        </div>
+
+        <div class="mb-0">
+          <label class="form-label" for="area">Area / Location <span class="text-secondary small">(optional)</span></label>
+          <input type="text" class="form-control" id="area" name="area"
+                 value="{{ device.area if device and device.area else '' }}"
+                 placeholder="e.g. Courtyard, Living Room, Garage"
+                 maxlength="64" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Device type -->
+    <div class="card border-0 rounded-4 mb-4">
+      <div class="card-body p-4">
+        <h5 class="fw-semibold mb-3"><i class="bi bi-grid-3x3-gap me-1 text-success"></i> Device Type</h5>
+        <p class="text-secondary small mb-3">Sets default icon, state labels and colours. Auto-filled when you pick a channel.</p>
+
+        <div id="relay-types-wrap">
+          <div class="d-flex flex-wrap gap-2">
+            {% for tkey, tdef in relay_types.items() %}
+            <label class="entity-type-pill" title="{{ tdef.label }}" data-icon="{{ tdef.icon }}">
+              <input type="radio" name="device_class" value="{{ tkey }}" hidden
+                     {% if (device and device.device_class == tkey) or (not device and tkey == 'switch') %}checked{% endif %} />
+              <i class="bi {{ tdef.icon }}"></i>
+              <span>{{ tdef.label }}</span>
+            </label>
+            {% endfor %}
+          </div>
+        </div>
+
+        <div id="input-types-wrap" style="display:none">
+          <div class="d-flex flex-wrap gap-2">
+            {% for tkey, tdef in input_types.items() %}
+            <label class="entity-type-pill" title="{{ tdef.label }}" data-icon="{{ tdef.icon }}">
+              <input type="radio" name="device_class" value="{{ tkey }}" hidden
+                     {% if device and device.device_class == tkey and device.entity_type == 'input' %}checked{% endif %} />
+              <i class="bi {{ tdef.icon }}"></i>
+              <span>{{ tdef.label }}</span>
+            </label>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Custom icon -->
+    <div class="card border-0 rounded-4">
+      <div class="card-body p-4">
+        <h5 class="fw-semibold mb-3"><i class="bi bi-palette me-1 text-warning"></i> Custom Icon</h5>
+
+        <div class="d-flex align-items-center gap-3 mb-3">
+          <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
+               style="width:60px;height:60px;background:var(--bs-secondary-bg)">
+            <i id="icon-preview" class="bi {{ (device.icon or device.effective_icon) if device else 'bi-toggles' }}"
+               style="font-size:2rem"></i>
+          </div>
+          <div class="flex-grow-1">
+            <div class="input-group input-group-sm">
+              <span class="input-group-text"><i class="bi bi-search"></i></span>
+              <input type="text" class="form-control" id="iconInput" name="icon"
+                     value="{{ device.icon if device and device.icon else '' }}"
+                     placeholder="bi-lightbulb-fill" />
+              <button type="button" class="btn btn-outline-secondary" id="iconClearBtn"><i class="bi bi-x"></i></button>
+            </div>
+            <div class="form-text">Leave blank to use device type default.</div>
+          </div>
+        </div>
+
+        <div class="d-flex flex-wrap gap-1" id="iconPalette">
+          {% for icon_cls, icon_name in icon_palette %}
+          <button type="button" class="btn btn-sm btn-outline-secondary p-1"
+                  title="{{ icon_name }}" data-icon="{{ icon_cls }}">
+            <i class="bi {{ icon_cls }}" style="font-size:1.1rem"></i>
+          </button>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- ══════════════════ RIGHT: board + entity card picker ═════════════════ -->
+  <div class="col-lg-8">
+    <div class="card border-0 rounded-4">
+      <div class="card-body p-4">
+        <h5 class="fw-semibold mb-1">
+          <i class="bi bi-motherboard me-1 text-primary"></i> Board &amp; Channel Binding
+        </h5>
+        <p class="text-secondary small mb-4">
+          Select a board, then click the relay or sensor you want to bind to this device.
+          Toggling the device later will directly control the physical hardware.
+        </p>
+
+        <!-- Board selector -->
+        <div class="mb-4">
+          <label class="form-label fw-semibold" for="boardSelect">Board</label>
+          <select class="form-select" id="boardSelect">
+            <option value="">— None (virtual / unlinked device) —</option>
+            {% for board in boards %}
+            <option value="{{ board.id }}" data-name="{{ board.name }}"
+              {% if device and device.board_id == board.id %}selected{% endif %}>
+              {{ board.name }}  ·  {{ board.board_type }}
+            </option>
+            {% endfor %}
+          </select>
+        </div>
+
+        <!-- Entity panel -->
+        <div id="entityPanel">
+
+          <div id="entityLoading" class="text-center py-4 text-secondary" style="display:none">
+            <div class="spinner-border spinner-border-sm me-2"></div>Loading channels…
+          </div>
+
+          <div id="entityPlaceholder" class="text-center py-5 text-secondary">
+            <i class="bi bi-arrow-up-circle display-5 d-block mb-2 opacity-25"></i>
+            Select a board above to see its relay and sensor channels.
+          </div>
+
+          <!-- Relays -->
+          <div id="relaySection" style="display:none">
+            <div class="d-flex align-items-center mb-2">
+              <i class="bi bi-lightning-charge text-warning me-2"></i>
+              <span class="fw-semibold">Relay Outputs</span>
+              <span class="badge text-bg-secondary ms-2" id="relayCount"></span>
+              <span class="text-secondary small ms-2">– controllable (ON / OFF)</span>
+            </div>
+            <div class="row g-2 mb-4" id="relayGrid"></div>
+          </div>
+
+          <!-- Inputs -->
+          <div id="inputSection" style="display:none">
+            <div class="d-flex align-items-center mb-2">
+              <i class="bi bi-arrow-down-circle text-success me-2"></i>
+              <span class="fw-semibold">Digital Inputs / Sensors</span>
+              <span class="badge text-bg-secondary ms-2" id="inputCount"></span>
+              <span class="text-secondary small ms-2">– read-only</span>
+            </div>
+            <div class="row g-2" id="inputGrid"></div>
+          </div>
+
+          <!-- Selection summary -->
+          <div id="bindSummary" class="alert alert-info d-flex align-items-center gap-3 mt-3" style="display:none">
+            <i class="bi bi-check-circle-fill fs-5"></i>
+            <div><strong>Bound to:</strong> <span id="bindSummaryText"></span></div>
+            <button type="button" class="btn btn-sm btn-outline-secondary ms-auto" id="unbindBtn">
+              <i class="bi bi-x me-1"></i>Remove binding
+            </button>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div><!-- /row -->
+
+<!-- ── Submit ────────────────────────────────────────────────────────────── -->
+<div class="d-flex gap-2 mt-4">
+  <button type="submit" class="btn btn-primary">
+    <i class="bi bi-check-circle me-1"></i>
+    {% if device %}Save Changes{% else %}Create Device{% endif %}
+  </button>
+  <a href="{{ url_for('devices.list_devices') }}" class="btn btn-outline-secondary">
+    <i class="bi bi-x me-1"></i>Cancel
+  </a>
+</div>
+
+</form>
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function () {
+  const INIT = {
+    boardId:    {{ (device.board_id | tojson)    if device and device.board_id    else 'null' }},
+    entityType: {{ (device.entity_type | tojson) if device and device.entity_type else 'null' }},
+    entityNum:  {{ (device.entity_num | tojson)  if device and device.entity_num  else 'null' }},
+    devClass:   {{ (device.device_class | tojson) if device else '"switch"' }},
+  };
+
+  // DOM refs
+  const boardSel       = document.getElementById("boardSelect");
+  const hBoardId       = document.getElementById("hBoardId");
+  const hEntityType    = document.getElementById("hEntityType");
+  const hEntityNum     = document.getElementById("hEntityNum");
+  const entityLoading  = document.getElementById("entityLoading");
+  const entityPh       = document.getElementById("entityPlaceholder");
+  const relaySection   = document.getElementById("relaySection");
+  const inputSection   = document.getElementById("inputSection");
+  const relayGrid      = document.getElementById("relayGrid");
+  const inputGrid      = document.getElementById("inputGrid");
+  const relayCount     = document.getElementById("relayCount");
+  const inputCount     = document.getElementById("inputCount");
+  const bindSummary    = document.getElementById("bindSummary");
+  const bindSummaryTxt = document.getElementById("bindSummaryText");
+  const unbindBtn      = document.getElementById("unbindBtn");
+  const iconInput      = document.getElementById("iconInput");
+  const iconPreview    = document.getElementById("icon-preview");
+  const iconClearBtn   = document.getElementById("iconClearBtn");
+  const relayTypesWrap = document.getElementById("relay-types-wrap");
+  const inputTypesWrap = document.getElementById("input-types-wrap");
+
+  // ── icon preview ─────────────────────────────────────────────────────────
+  function updateIconPreview() {
+    const val = iconInput.value.trim();
+    if (val) { iconPreview.className = "bi " + val; return; }
+    const checked = document.querySelector(
+      "#relay-types-wrap input[name=device_class]:checked, " +
+      "#input-types-wrap input[name=device_class]:checked"
+    );
+    if (checked) {
+      const lbl = checked.closest("label");
+      if (lbl) iconPreview.className = "bi " + lbl.dataset.icon;
+    }
+  }
+
+  iconInput.addEventListener("input", updateIconPreview);
+  iconClearBtn.addEventListener("click", () => { iconInput.value = ""; updateIconPreview(); });
+  document.getElementById("iconPalette").addEventListener("click", e => {
+    const btn = e.target.closest("[data-icon]");
+    if (!btn) return;
+    iconInput.value = btn.dataset.icon;
+    updateIconPreview();
+  });
+  document.querySelectorAll("label.entity-type-pill input").forEach(r =>
+    r.addEventListener("change", updateIconPreview)
+  );
+
+  // ── device type tab switch ────────────────────────────────────────────────
+  function showRelayTypes(preselect) {
+    relayTypesWrap.style.display = "";
+    inputTypesWrap.style.display = "none";
+    inputTypesWrap.querySelectorAll("input").forEach(r => r.checked = false);
+    if (preselect) {
+      const m = relayTypesWrap.querySelector(`input[value="${preselect}"]`);
+      if (m) m.checked = true;
+    }
+    if (!relayTypesWrap.querySelector("input:checked")) {
+      const f = relayTypesWrap.querySelector("input"); if (f) f.checked = true;
+    }
+    updateIconPreview();
+  }
+
+  function showInputTypes(preselect) {
+    inputTypesWrap.style.display = "";
+    relayTypesWrap.style.display = "none";
+    relayTypesWrap.querySelectorAll("input").forEach(r => r.checked = false);
+    if (preselect) {
+      const m = inputTypesWrap.querySelector(`input[value="${preselect}"]`);
+      if (m) m.checked = true;
+    }
+    if (!inputTypesWrap.querySelector("input:checked")) {
+      const f = inputTypesWrap.querySelector("input"); if (f) f.checked = true;
+    }
+    updateIconPreview();
+  }
+
+  // ── entity card factory ──────────────────────────────────────────────────
+  function makeCard(item, kind) {
+    const isSelected = hEntityType.value === kind && parseInt(hEntityNum.value) === item.num;
+    const stateColor = kind === "relay"
+      ? (item.state  ? item.on_color  : item.off_color)
+      : (item.active ? item.active_color : item.idle_color);
+    const label      = kind === "relay" ? "Relay" : "Input";
+
+    const col = document.createElement("div");
+    col.className = "col-6 col-md-4 col-xl-3";
+    col.innerHTML = `
+      <div class="card entity-pick-card border-2 rounded-3 h-100
+                  ${isSelected ? "border-primary bg-primary bg-opacity-10" : "border-transparent"}"
+           style="cursor:pointer;transition:all .15s"
+           data-kind="${kind}" data-num="${item.num}">
+        <div class="card-body p-3 text-center">
+          <div class="rounded-3 d-flex align-items-center justify-content-center mx-auto mb-2"
+               style="width:48px;height:48px;background:var(--bs-secondary-bg)">
+            <i class="bi ${item.icon} entity-card-icon"
+               style="font-size:1.5rem;${isSelected ? "color:var(--bs-primary)" : ""}"></i>
+          </div>
+          <div class="fw-semibold small text-truncate" title="${item.name}">${item.name}</div>
+          <div class="text-secondary" style="font-size:.7rem">${label} ${item.num}</div>
+          <span class="badge text-bg-${stateColor} mt-1" style="font-size:.65rem">${item.state_label}</span>
+          ${isSelected ? '<div class="mt-1"><i class="bi bi-check-circle-fill text-primary"></i></div>' : ''}
+        </div>
+      </div>`;
+
+    col.querySelector(".entity-pick-card").addEventListener("click", () => selectEntity(item, kind));
+    return col;
+  }
+
+  // ── select entity ─────────────────────────────────────────────────────────
+  function selectEntity(item, kind) {
+    hEntityType.value = kind;
+    hEntityNum.value  = item.num;
+
+    document.querySelectorAll(".entity-pick-card").forEach(c => {
+      const mine = c.dataset.kind === kind && parseInt(c.dataset.num) === item.num;
+      c.classList.toggle("border-primary", mine);
+      c.classList.toggle("bg-primary",     mine);
+      c.classList.toggle("bg-opacity-10",  mine);
+      c.classList.toggle("border-transparent", !mine);
+      c.classList.remove("bg-secondary");
+      const ico = c.querySelector(".entity-card-icon");
+      if (ico) ico.style.color = mine ? "var(--bs-primary)" : "";
+      // show/hide checkmark
+      let ck = c.querySelector(".entity-check");
+      if (!ck && mine) {
+        ck = document.createElement("div");
+        ck.className = "entity-check mt-1";
+        ck.innerHTML = '<i class="bi bi-check-circle-fill text-primary"></i>';
+        c.querySelector(".card-body").appendChild(ck);
+      } else if (ck && !mine) {
+        ck.remove();
+      }
+    });
+
+    kind === "relay" ? showRelayTypes(item.type) : showInputTypes(item.type);
+
+    // Auto-fill name if blank
+    const nameIn = document.getElementById("name");
+    if (!nameIn.value.trim()) nameIn.value = item.name;
+
+    // Summary banner
+    const boardName = boardSel.options[boardSel.selectedIndex]?.dataset.name || "Board";
+    bindSummaryTxt.textContent = `${boardName} · ${kind === "relay" ? "Relay" : "Input"} ${item.num} — ${item.name}`;
+    bindSummary.style.display = "flex";
+  }
+
+  unbindBtn.addEventListener("click", () => {
+    hEntityType.value = "";
+    hEntityNum.value  = "";
+    document.querySelectorAll(".entity-pick-card").forEach(c => {
+      c.classList.remove("border-primary", "bg-primary", "bg-opacity-10");
+      c.classList.add("border-transparent");
+      const ico = c.querySelector(".entity-card-icon");
+      if (ico) ico.style.color = "";
+      c.querySelector(".entity-check")?.remove();
+    });
+    bindSummary.style.display = "none";
+  });
+
+  // ── load board ────────────────────────────────────────────────────────────
+  function loadBoard(boardId) {
+    entityPh.style.display     = "none";
+    relaySection.style.display = "none";
+    inputSection.style.display = "none";
+    bindSummary.style.display  = "none";
+    relayGrid.innerHTML        = "";
+    inputGrid.innerHTML        = "";
+
+    if (!boardId) {
+      hBoardId.value = "";
+      entityPh.style.display = "";
+      return;
+    }
+    hBoardId.value = boardId;
+    entityLoading.style.display = "";
+
+    fetch(`/devices/api/boards/${boardId}/entities`)
+      .then(r => r.json())
+      .then(data => {
+        entityLoading.style.display = "none";
+
+        if (data.relays && data.relays.length) {
+          relayCount.textContent = data.relays.length;
+          data.relays.forEach(item => relayGrid.appendChild(makeCard(item, "relay")));
+          relaySection.style.display = "";
+        }
+        if (data.inputs && data.inputs.length) {
+          inputCount.textContent = data.inputs.length;
+          data.inputs.forEach(item => inputGrid.appendChild(makeCard(item, "input")));
+          inputSection.style.display = "";
+        }
+        if (!data.relays.length && !data.inputs.length) {
+          entityPh.innerHTML = `<i class="bi bi-exclamation-circle display-5 d-block mb-2 opacity-25"></i>
+            This board has no relay or input channels configured.`;
+          entityPh.style.display = "";
+        }
+
+        // Restore selection when editing
+        if (INIT.entityType && INIT.entityNum) {
+          const all = INIT.entityType === "relay" ? data.relays : data.inputs;
+          const match = all.find(i => i.num === INIT.entityNum);
+          if (match) selectEntity(match, INIT.entityType);
+        }
+      })
+      .catch(() => {
+        entityLoading.style.display = "none";
+        entityPh.innerHTML = `<i class="bi bi-exclamation-triangle text-warning me-2"></i>Failed to load board channels.`;
+        entityPh.style.display = "";
+      });
+  }
+
+  boardSel.addEventListener("change", () => {
+    hEntityType.value = "";
+    hEntityNum.value  = "";
+    loadBoard(boardSel.value || null);
+  });
+
+  // ── init ─────────────────────────────────────────────────────────────────
+  if (INIT.entityType === "input") {
+    showInputTypes(INIT.devClass);
+  } else {
+    showRelayTypes(INIT.devClass);
+  }
+  updateIconPreview();
+
+  if (INIT.boardId) {
+    loadBoard(INIT.boardId);
+  } else {
+    entityPh.style.display = "";
+  }
+})();
+</script>
+
+<style>
+.entity-pick-card:hover { background: var(--bs-secondary-bg) !important; transform: translateY(-2px); }
+.border-transparent { border-color: transparent !important; }
+</style>
+{% endblock %}

app/templates/devices/list.html

@@ -0,0 +1,118 @@
+{% extends "base.html" %}
+{% block title %}Devices – Location Management{% endblock %}
+
+{% block content %}
+<div class="d-flex align-items-center justify-content-between mb-4">
+  <h2 class="fw-bold mb-0">
+    <i class="bi bi-hdd-stack me-2 text-info"></i>Devices
+  </h2>
+  {% if current_user.is_admin() %}
+  <a href="{{ url_for('devices.add_device') }}" class="btn btn-primary">
+    <i class="bi bi-plus-circle me-1"></i> Add Device
+  </a>
+  {% endif %}
+</div>
+
+<p class="text-secondary mb-4">
+  Define named, personalized devices (lights, switches, pumps, sensors…) that map to
+  specific relay or input channels on your boards. Devices can be placed on Layout pages
+  as interactive widgets.
+</p>
+
+{% if devices %}
+
+{# Group by area #}
+{% set areas = devices | map(attribute='area') | unique | list %}
+{% set no_area = devices | selectattr('area', 'none') | list
+                 + devices | selectattr('area', 'equalto', '') | list
+                 + devices | selectattr('area', 'equalto', None) | list %}
+
+{# Collect non-empty areas #}
+{% set named_areas = [] %}
+{% for d in devices %}
+  {% if d.area and d.area != '' and d.area not in named_areas %}
+    {% set _ = named_areas.append(d.area) %}
+  {% endif %}
+{% endfor %}
+
+{# Devices with no area #}
+{% set ungrouped = [] %}
+{% for d in devices %}
+  {% if not d.area or d.area == '' %}
+    {% set _ = ungrouped.append(d) %}
+  {% endif %}
+{% endfor %}
+
+{% for area in named_areas %}
+  <h5 class="text-secondary fw-semibold mb-3 mt-4">
+    <i class="bi bi-geo-alt me-1"></i>{{ area }}
+  </h5>
+  <div class="row g-3 mb-2">
+    {% for device in devices %}
+    {% if device.area == area %}
+    <div class="col-md-6 col-xl-4" id="device-card-{{ device.id }}">
+      {% include "devices/_card.html" %}
+    </div>
+    {% endif %}
+    {% endfor %}
+  </div>
+{% endfor %}
+
+{% if ungrouped %}
+  {% if named_areas %}
+  <h5 class="text-secondary fw-semibold mb-3 mt-4">
+    <i class="bi bi-three-dots me-1"></i>Other
+  </h5>
+  {% endif %}
+  <div class="row g-3 mb-2">
+    {% for device in ungrouped %}
+    <div class="col-md-6 col-xl-4" id="device-card-{{ device.id }}">
+      {% include "devices/_card.html" %}
+    </div>
+    {% endfor %}
+  </div>
+{% endif %}
+
+{% else %}
+<div class="text-center py-5 text-secondary">
+  <i class="bi bi-hdd-stack display-4 d-block mb-3 opacity-25"></i>
+  <p class="mb-1">No devices defined yet.</p>
+  {% if current_user.is_admin() %}
+  <a href="{{ url_for('devices.add_device') }}" class="btn btn-sm btn-outline-primary mt-2">
+    <i class="bi bi-plus-circle me-1"></i> Add your first device
+  </a>
+  {% endif %}
+</div>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script>
+function deviceToggle(btn, deviceId) {
+  btn.disabled = true;
+  fetch(`/devices/${deviceId}/toggle`, {
+    method: "POST",
+    headers: {"X-Requested-With": "XMLHttpRequest"}
+  })
+  .then(r => r.json())
+  .then(data => {
+    if (!data.ok) { btn.disabled = false; return; }
+    const card = document.getElementById("device-card-" + deviceId);
+    const badge = card.querySelector(".device-state-badge");
+    if (badge) {
+      badge.className = "badge device-state-badge text-bg-" + data.state_color;
+      badge.textContent = data.state_label;
+    }
+    // Update toggle icon
+    btn.className = btn.className.replace(/btn-(outline-)?[a-z]+/, "btn-" + data.state_color);
+    if (data.state) {
+      btn.innerHTML = '<i class="bi bi-power me-1"></i>ON';
+    } else {
+      btn.innerHTML = '<i class="bi bi-power me-1"></i>OFF';
+    }
+    btn.disabled = false;
+  })
+  .catch(() => { btn.disabled = false; });
+}
+</script>
+{% endblock %}