feat: Add web application interface

Implements a modern web-based interface alongside the existing desktop app.

Features:
- Flask backend with REST API and WebSocket support
- Responsive web UI with TailwindCSS and Alpine.js
- Real-time updates via Socket.IO
- All desktop features available in browser
- Multi-user support
- Mobile-friendly responsive design
- Same async import queue functionality

Technology Stack:
- Backend: Flask + Flask-SocketIO + Flask-CORS
- Frontend: HTML5 + TailwindCSS + Alpine.js
- Real-time: WebSocket (Socket.IO)
- Icons: Font Awesome 6

New Files:
- src/stocktool/web/app.py - Flask application server
- src/stocktool/web/templates/index.html - Main web interface
- src/stocktool/web/static/js/app.js - Alpine.js application logic
- WEB_APP.md - Complete web app documentation

API Endpoints:
- GET /api/config - Application configuration
- GET /api/locations - List locations
- POST /api/part/search - Search for part
- POST /api/part/import - Queue part import
- POST /api/stock/add - Add stock
- POST /api/stock/update - Update stock
- POST /api/stock/check - Check stock level
- POST /api/part/locate - Locate part
- GET /api/pending - Get pending imports

WebSocket Events:
- import_complete - Part import finished
- import_retry - Import failed, retrying
- import_failed - Import failed completely
- barcode_parsed - Barcode successfully parsed

Benefits:
- Access from any device with a browser
- No desktop installation required
- Better mobile experience
- Multiple users can work simultaneously
- Easier deployment and updates
- Network-accessible within local network

Usage:
  uv run stock-tool-web
  # Open browser to http://localhost:5000

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

README.md

@@ -2,6 +2,10 @@
 
 A comprehensive barcode scanning application for InvenTree inventory management.
 
+**Available in two versions:**
+- **Desktop App** (tkinter) - Traditional GUI application
+- **Web App** (Flask) - Modern browser-based interface **⭐ NEW!**
+
 ## Features
 
 - **Stock Addition**: Add stock to inventory by scanning barcodes
@@ -11,6 +15,7 @@ A comprehensive barcode scanning application for InvenTree inventory management.
 - **Async Part Import**: Non-blocking background import for unknown parts
 - **Server Connection Monitoring**: Real-time connection status
 - **Barcode Command Support**: Control the app via barcode commands
+- **Web Interface**: Access from any device with a browser (NEW!)
 
 ## Requirements
 
@@ -29,10 +34,16 @@ cd stocktool
 # Install with uv
 uv sync
 
-# Run the application
+# Run the DESKTOP application
 uv run stock-tool
+
+# OR run the WEB application
+uv run stock-tool-web
+# Then open browser to http://localhost:5000
 ```
 
+**👉 For Web App setup, see [WEB_APP.md](WEB_APP.md)**
+
 ### Manual Installation
 
 ```bash

WEB_APP.md

@@ -0,0 +1,254 @@
+# InvenTree Stock Tool - Web Application
+
+A modern web-based interface for InvenTree barcode scanning and inventory management.
+
+## Features
+
+- **Modern Web UI**: Responsive design works on desktop, tablet, and mobile
+- **Real-time Updates**: WebSocket integration for live import progress
+- **No Installation Required**: Just open in any modern browser
+- **Multi-User Support**: Multiple users can access simultaneously
+- **Camera Barcode Scanning**: Use device camera or USB scanner
+- **Async Part Import**: Non-blocking background imports with visual feedback
+- **Dark Theme**: Eye-friendly dark interface
+
+## Quick Start
+
+### 1. Install Dependencies
+
+```bash
+# Make sure web dependencies are installed
+uv sync
+```
+
+### 2. Run the Web Server
+
+```bash
+# Using UV (recommended)
+uv run stock-tool-web
+
+# Or directly
+uv run python -m stocktool.web.app
+```
+
+### 3. Open in Browser
+
+Navigate to: **http://localhost:5000**
+
+The web server will be accessible from any device on your local network at:
+`http://YOUR_IP_ADDRESS:5000`
+
+## Usage
+
+### Location Setup
+
+1. **Scan Location Barcode**: Enter location barcode (INV-SL format) in the location field
+2. **Or Select from Dropdown**: Choose from the list of available locations
+
+### Select Mode
+
+Click one of the four operation modes:
+- **Add Stock** - Add new stock or increase quantity
+- **Update Stock** - Set exact stock quantity
+- **Check Stock** - View current stock level
+- **Locate Part** - Find all locations where part is stored
+
+### Scan Parts
+
+1. Click in the "Scan Part" field or just start scanning
+2. Scan barcode or type part code
+3. Press Enter or click "Process"
+
+### Pending Imports
+
+When unknown parts are scanned:
+- They appear in the "Pending Imports" section
+- Import runs in background (30s timeout)
+- You can continue scanning other parts
+- Part is auto-processed when import completes
+- Failed imports retry automatically (up to 3 times)
+
+### Activity Log
+
+- Shows all operations in real-time
+- Color-coded messages:
+  - 🔵 Blue: Info
+  - 🟢 Green: Success
+  - 🟡 Yellow: Warning
+  - 🔴 Red: Error
+
+## Barcode Commands
+
+Scan special barcodes to control the app:
+
+**Mode Switching:**
+- `MODE:ADD`, `IMPORT` → Switch to Add Stock mode
+- `MODE:UPDATE`, `UPDATE` → Switch to Update Stock mode
+- `MODE:CHECK`, `CHECK` → Switch to Check Stock mode
+- `MODE:LOCATE`, `LOCATE` → Switch to Locate Part mode
+
+**Location:**
+- `CHANGE_LOCATION`, `LOCATION` → Clear current location
+
+## Supported Barcode Formats
+
+1. **JSON-like**: `{PM:PART-CODE,QTY:10}`
+2. **Separator-based**: Uses GS/RS separators (`\x1D`, `\x1E`)
+3. **InvenTree locations**: `INV-SL<location_id>`
+
+## API Endpoints
+
+The web app exposes a RESTful API:
+
+### Configuration
+- `GET /api/config` - Get app configuration
+
+### Locations
+- `GET /api/locations` - List all locations
+
+### Parts
+- `POST /api/part/search` - Search for a part
+- `POST /api/part/import` - Queue part for import
+- `POST /api/part/locate` - Find part locations
+
+### Stock Operations
+- `POST /api/stock/add` - Add stock
+- `POST /api/stock/update` - Update stock quantity
+- `POST /api/stock/check` - Check stock level
+
+### Pending Imports
+- `GET /api/pending` - Get pending imports list
+
+## WebSocket Events
+
+Real-time events via Socket.IO:
+
+**Server → Client:**
+- `connected` - Connection established
+- `barcode_parsed` - Barcode successfully parsed
+- `import_complete` - Part import finished successfully
+- `import_retry` - Import failed, retrying
+- `import_failed` - Import failed after all retries
+
+**Client → Server:**
+- `parse_barcode` - Parse a barcode string
+
+## Technology Stack
+
+- **Backend**: Flask + Flask-SocketIO
+- **Frontend**: HTML5 + TailwindCSS + Alpine.js
+- **Real-time**: WebSocket (Socket.IO)
+- **Icons**: Font Awesome 6
+- **Barcode**: Keyboard input (camera support coming soon)
+
+## Configuration
+
+Uses the same configuration file as the desktop app:
+
+**Location**: `~/.config/scan_and_import.yaml`
+
+```yaml
+host: https://your-inventree-server.com
+token: your-api-token-here
+```
+
+## Network Access
+
+### Local Network Access
+
+To access from other devices on your network:
+
+1. Find your computer's IP address:
+   ```bash
+   # Windows
+   ipconfig
+
+   # Linux/Mac
+   ifconfig
+   ```
+
+2. Open browser on any device:
+   ```
+   http://YOUR_IP_ADDRESS:5000
+   ```
+
+### Production Deployment
+
+For production use, consider:
+
+1. **Reverse Proxy**: Use nginx or Apache
+2. **HTTPS**: Enable SSL/TLS for security
+3. **Process Manager**: Use systemd or supervisor
+4. **Firewall**: Configure appropriate access rules
+
+Example nginx config:
+
+```nginx
+server {
+    listen 80;
+    server_name stock-tool.local;
+
+    location / {
+        proxy_pass http://127.0.0.1:5000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+    }
+}
+```
+
+## Troubleshooting
+
+### Port Already in Use
+
+Change the port in `app.py`:
+```python
+socketio.run(app, host='0.0.0.0', port=5001, ...)
+```
+
+### WebSocket Connection Failed
+
+Check your firewall settings allow port 5000.
+
+### Slow Import Performance
+
+The import uses `inventree-part-import` which can be slow. This is normal.
+The web UI stays responsive while imports run in background.
+
+## Comparison: Web vs Desktop
+
+| Feature | Web App | Desktop App |
+|---------|---------|-------------|
+| Installation | None (browser only) | Python + dependencies |
+| Platform | Any (browser) | Windows/Linux/Mac |
+| Multi-user | Yes | No |
+| Mobile friendly | Yes | No |
+| Camera scanning | Coming soon | No |
+| Async imports | Yes | Yes |
+| Real-time updates | WebSocket | UI updates |
+| Deployment | Server-based | Local install |
+
+## Development
+
+### Run in Debug Mode
+
+```bash
+# Flask debug mode is enabled by default
+uv run stock-tool-web
+```
+
+### Customize UI
+
+Edit files in:
+- `src/stocktool/web/templates/` - HTML templates
+- `src/stocktool/web/static/js/` - JavaScript
+- `src/stocktool/web/static/css/` - CSS (uses Tailwind CDN)
+
+### Add New Endpoints
+
+Edit `src/stocktool/web/app.py` and add route handlers.
+
+## License
+
+MIT License - Same as the main project

pyproject.toml

@@ -11,12 +11,16 @@ dependencies = [
     "pillow>=10.0.0",
     "requests>=2.31.0",
     "pyyaml>=6.0.0",
+    "flask>=3.0.0",
+    "flask-socketio>=5.3.0",
+    "flask-cors>=4.0.0",
 ]
 readme = "README.md"
 license = {text = "MIT"}
 
 [project.scripts]
 stock-tool = "stocktool.stock_tool_gui_v2:main"
+stock-tool-web = "stocktool.web.app:main"
 
 [build-system]
 requires = ["hatchling"]

src/stocktool/web/__init__.py

@@ -0,0 +1 @@
+"""Web interface for InvenTree Stock Tool."""

src/stocktool/web/app.py

@@ -0,0 +1,456 @@
+#!/usr/bin/env python3
+"""
+InvenTree Stock Tool - Web Application
+
+A Flask-based web interface for barcode scanning and inventory management.
+"""
+
+import os
+import sys
+from pathlib import Path
+from flask import Flask, render_template, request, jsonify
+from flask_socketio import SocketIO, emit
+from flask_cors import CORS
+import yaml
+import requests
+from typing import Dict, List, Tuple, Optional
+from datetime import datetime
+from dataclasses import asdict
+
+# Import core functionality from main app
+sys.path.insert(0, str(Path(__file__).parent.parent))
+from stock_tool_gui_v2 import (
+    find_part, get_locations, get_part_info, get_part_parameters,
+    get_part_locations, get_location_details, find_stock_item,
+    get_stock_level, parse_scan, lookup_barcode,
+    PendingPart, ImportResult, PartImportWorker, MODE_NAMES, BARCODE_COMMANDS
+)
+
+# Initialize Flask app
+app = Flask(__name__)
+app.config['SECRET_KEY'] = os.urandom(24)
+CORS(app)
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+# Global state
+config = {}
+pending_parts: Dict[str, PendingPart] = {}
+import_worker: Optional[PartImportWorker] = None
+
+
+def load_config():
+    """Load configuration from YAML file."""
+    config_file = Path.home() / '.config' / 'scan_and_import.yaml'
+    if not config_file.exists():
+        raise FileNotFoundError(f"Config file {config_file} not found")
+
+    data = yaml.safe_load(config_file.read_text())
+    host = data.get('host')
+    token = data.get('token')
+
+    if not host or not token:
+        raise ValueError("Both 'host' and 'token' must be set in config file")
+
+    return {
+        'host': host.rstrip('/'),
+        'token': token,
+        'headers': {
+            'Authorization': f'Token {token}',
+            'Content-Type': 'application/json'
+        }
+    }
+
+
+def on_import_complete(result: ImportResult):
+    """Handle import completion callback."""
+    pending_part = pending_parts.get(result.part_code)
+    if not pending_part:
+        return
+
+    if result.success:
+        # Emit success via WebSocket
+        socketio.emit('import_complete', {
+            'part_code': result.part_code,
+            'part_id': result.part_id,
+            'success': True,
+            'pending_part': asdict(pending_part)
+        })
+
+        # Remove from pending
+        del pending_parts[result.part_code]
+    else:
+        # Handle failure with retry
+        pending_part.retry_count += 1
+        if pending_part.retry_count >= 3:
+            socketio.emit('import_failed', {
+                'part_code': result.part_code,
+                'error': result.error,
+                'retry_count': pending_part.retry_count
+            })
+            del pending_parts[result.part_code]
+        else:
+            # Retry
+            import_worker.queue_import(result.part_code)
+            socketio.emit('import_retry', {
+                'part_code': result.part_code,
+                'error': result.error,
+                'retry_count': pending_part.retry_count
+            })
+
+
+# Routes
+@app.route('/')
+def index():
+    """Render main application page."""
+    return render_template('index.html')
+
+
+@app.route('/api/config')
+def get_config():
+    """Get application configuration (without sensitive data)."""
+    return jsonify({
+        'host': config['host'],
+        'modes': MODE_NAMES,
+        'barcode_commands': BARCODE_COMMANDS
+    })
+
+
+@app.route('/api/locations')
+def api_get_locations():
+    """Get all available locations."""
+    try:
+        locations = get_locations(config['host'], config['token'])
+        return jsonify({
+            'success': True,
+            'locations': [{'id': loc_id, 'name': name} for loc_id, name in locations]
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/part/search', methods=['POST'])
+def search_part():
+    """Search for a part by code."""
+    data = request.json
+    part_code = data.get('part_code')
+
+    if not part_code:
+        return jsonify({'success': False, 'error': 'part_code required'}), 400
+
+    try:
+        part_id = find_part(config['host'], config['token'], part_code)
+
+        if part_id:
+            # Get part details
+            part_info = get_part_info(config['host'], config['token'], part_id)
+            parameters = get_part_parameters(config['host'], config['token'], part_id)
+
+            return jsonify({
+                'success': True,
+                'found': True,
+                'part_id': part_id,
+                'part_info': part_info,
+                'parameters': parameters
+            })
+        else:
+            return jsonify({
+                'success': True,
+                'found': False
+            })
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/part/import', methods=['POST'])
+def queue_part_import():
+    """Queue a part for background import."""
+    data = request.json
+    part_code = data.get('part_code')
+    quantity = data.get('quantity')
+    location_id = data.get('location_id')
+    mode = data.get('mode', 'import')
+
+    if not part_code:
+        return jsonify({'success': False, 'error': 'part_code required'}), 400
+
+    # Check if already queued
+    if part_code in pending_parts:
+        return jsonify({'success': False, 'error': 'Part already queued for import'}), 400
+
+    # Create pending part
+    pending_part = PendingPart(
+        part_code=part_code,
+        quantity=quantity,
+        location_id=location_id or 0,
+        mode=mode,
+        timestamp=datetime.now()
+    )
+    pending_parts[part_code] = pending_part
+
+    # Queue for import
+    import_worker.queue_import(part_code)
+
+    return jsonify({
+        'success': True,
+        'pending_part': asdict(pending_part)
+    })
+
+
+@app.route('/api/stock/add', methods=['POST'])
+def add_stock():
+    """Add stock for a part."""
+    data = request.json
+    part_id = data.get('part_id')
+    location_id = data.get('location_id')
+    quantity = data.get('quantity')
+
+    if not all([part_id, location_id, quantity]):
+        return jsonify({'success': False, 'error': 'part_id, location_id, and quantity required'}), 400
+
+    try:
+        # Check if stock item already exists
+        existing = find_stock_item(config['host'], config['token'], part_id, location_id)
+        current_stock = get_stock_level(config['host'], config['token'], part_id, location_id)
+
+        if existing:
+            # Update existing
+            sid = existing.get('pk', existing.get('id'))
+            new_stock = current_stock + quantity
+
+            r = requests.patch(
+                f"{config['host']}/api/stock/{sid}/",
+                headers=config['headers'],
+                json={'quantity': new_stock}
+            )
+            r.raise_for_status()
+
+            return jsonify({
+                'success': True,
+                'action': 'updated',
+                'stock_item_id': sid,
+                'previous_quantity': current_stock,
+                'new_quantity': new_stock,
+                'added': quantity
+            })
+        else:
+            # Create new
+            r = requests.post(
+                f"{config['host']}/api/stock/",
+                headers=config['headers'],
+                json={'part': part_id, 'location': location_id, 'quantity': quantity}
+            )
+            r.raise_for_status()
+
+            response_data = r.json()
+            if isinstance(response_data, list):
+                stock_item = response_data[0] if response_data else {}
+            else:
+                stock_item = response_data
+
+            sid = stock_item.get('pk', stock_item.get('id'))
+
+            return jsonify({
+                'success': True,
+                'action': 'created',
+                'stock_item_id': sid,
+                'quantity': quantity
+            })
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/stock/update', methods=['POST'])
+def update_stock():
+    """Update stock quantity for a part."""
+    data = request.json
+    part_id = data.get('part_id')
+    location_id = data.get('location_id')
+    quantity = data.get('quantity')
+
+    if not all([part_id, location_id, quantity is not None]):
+        return jsonify({'success': False, 'error': 'part_id, location_id, and quantity required'}), 400
+
+    try:
+        existing = find_stock_item(config['host'], config['token'], part_id, location_id)
+        current_stock = get_stock_level(config['host'], config['token'], part_id, location_id)
+
+        if existing:
+            sid = existing['pk']
+            r = requests.patch(
+                f"{config['host']}/api/stock/{sid}/",
+                headers=config['headers'],
+                json={'quantity': quantity}
+            )
+            r.raise_for_status()
+
+            return jsonify({
+                'success': True,
+                'action': 'updated',
+                'stock_item_id': sid,
+                'previous_quantity': current_stock,
+                'new_quantity': quantity
+            })
+        else:
+            # Create new
+            r = requests.post(
+                f"{config['host']}/api/stock/",
+                headers=config['headers'],
+                json={'part': part_id, 'location': location_id, 'quantity': quantity}
+            )
+            r.raise_for_status()
+
+            response_data = r.json()
+            if isinstance(response_data, list):
+                stock_item = response_data[0] if response_data else {}
+            else:
+                stock_item = response_data
+
+            sid = stock_item.get('pk', stock_item.get('id'))
+
+            return jsonify({
+                'success': True,
+                'action': 'created',
+                'stock_item_id': sid,
+                'quantity': quantity
+            })
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/stock/check', methods=['POST'])
+def check_stock():
+    """Check stock level for a part at location."""
+    data = request.json
+    part_id = data.get('part_id')
+    location_id = data.get('location_id')
+
+    if not all([part_id, location_id]):
+        return jsonify({'success': False, 'error': 'part_id and location_id required'}), 400
+
+    try:
+        quantity = get_stock_level(config['host'], config['token'], part_id, location_id)
+        return jsonify({
+            'success': True,
+            'quantity': quantity
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/part/locate', methods=['POST'])
+def locate_part():
+    """Find all locations where a part is stored."""
+    data = request.json
+    part_id = data.get('part_id')
+
+    if not part_id:
+        return jsonify({'success': False, 'error': 'part_id required'}), 400
+
+    try:
+        stock_items = get_part_locations(config['host'], config['token'], part_id)
+
+        locations_info = []
+        total_stock = 0
+
+        for item in stock_items:
+            loc_id = item.get('location')
+            quantity = item.get('quantity', 0)
+            total_stock += quantity
+
+            if loc_id:
+                try:
+                    location = get_location_details(config['host'], config['token'], loc_id)
+                    loc_name = location.get('name', f'Location {loc_id}')
+                    loc_path = location.get('pathstring', '')
+
+                    locations_info.append({
+                        'location_id': loc_id,
+                        'location_name': loc_name,
+                        'location_path': loc_path,
+                        'quantity': quantity
+                    })
+                except Exception:
+                    locations_info.append({
+                        'location_id': loc_id,
+                        'location_name': f'Location {loc_id}',
+                        'location_path': '',
+                        'quantity': quantity
+                    })
+
+        return jsonify({
+            'success': True,
+            'locations': locations_info,
+            'total_stock': total_stock
+        })
+
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/pending')
+def get_pending():
+    """Get all pending part imports."""
+    return jsonify({
+        'success': True,
+        'pending': [asdict(p) for p in pending_parts.values()]
+    })
+
+
+# WebSocket events
+@socketio.on('connect')
+def handle_connect():
+    """Handle client connection."""
+    emit('connected', {'message': 'Connected to InvenTree Stock Tool'})
+
+
+@socketio.on('disconnect')
+def handle_disconnect():
+    """Handle client disconnection."""
+    print('Client disconnected')
+
+
+@socketio.on('parse_barcode')
+def handle_parse_barcode(data):
+    """Parse a scanned barcode."""
+    raw_barcode = data.get('barcode', '')
+    part_code, quantity = parse_scan(raw_barcode)
+
+    emit('barcode_parsed', {
+        'raw': raw_barcode,
+        'part_code': part_code,
+        'quantity': quantity
+    })
+
+
+def main():
+    """Main entry point for web application."""
+    global config, import_worker
+
+    # Load configuration
+    try:
+        config = load_config()
+        print(f"✅ Connected to InvenTree: {config['host']}")
+    except Exception as e:
+        print(f"✖ Configuration error: {e}")
+        sys.exit(1)
+
+    # Initialize import worker
+    import_worker = PartImportWorker(config['host'], config['token'], on_import_complete)
+
+    # Start Flask server
+    print("🚀 Starting InvenTree Stock Tool Web Server...")
+    print("📱 Open your browser to: http://localhost:5000")
+    print("Press Ctrl+C to stop")
+
+    try:
+        socketio.run(app, host='0.0.0.0', port=5000, debug=True, allow_unsafe_werkzeug=True)
+    except KeyboardInterrupt:
+        print("\n👋 Shutting down...")
+        import_worker.stop()
+
+
+if __name__ == '__main__':
+    main()

src/stocktool/web/static/js/app.js

@@ -0,0 +1,515 @@
+/**
+ * InvenTree Stock Tool - Web Application
+ * Alpine.js + Socket.IO client application
+ */
+
+function stockApp() {
+    return {
+        // Connection
+        socket: null,
+        connected: false,
+
+        // Configuration
+        config: {},
+        modes: {},
+        locations: [],
+
+        // Current state
+        currentLocation: '',
+        currentMode: 'import',
+        locationInput: '',
+        scanInput: '',
+
+        // Part data
+        currentPart: null,
+        currentParameters: null,
+        currentStock: null,
+
+        // Pending imports
+        pendingParts: [],
+
+        // Activity log
+        logs: [],
+        maxLogs: 100,
+
+        /**
+         * Initialize application
+         */
+        async init() {
+            this.log('info', '🚀 Initializing InvenTree Stock Tool...');
+
+            // Load configuration
+            await this.loadConfig();
+
+            // Connect WebSocket
+            this.connectWebSocket();
+
+            // Load locations
+            await this.loadLocations();
+
+            // Focus on scan input
+            this.$nextTick(() => {
+                this.$refs.scanInput?.focus();
+            });
+
+            this.log('success', '✅ Application ready');
+        },
+
+        /**
+         * Load configuration from server
+         */
+        async loadConfig() {
+            try {
+                const response = await fetch('/api/config');
+                const data = await response.json();
+                this.config = data;
+                this.modes = data.modes || {};
+                this.log('success', `📡 Connected to ${data.host}`);
+            } catch (error) {
+                this.log('error', `✖ Failed to load config: ${error.message}`);
+            }
+        },
+
+        /**
+         * Connect to WebSocket server
+         */
+        connectWebSocket() {
+            this.socket = io();
+
+            this.socket.on('connect', () => {
+                this.connected = true;
+                this.log('success', '🔌 WebSocket connected');
+            });
+
+            this.socket.on('disconnect', () => {
+                this.connected = false;
+                this.log('warning', '🔌 WebSocket disconnected');
+            });
+
+            this.socket.on('barcode_parsed', (data) => {
+                this.log('info', `📋 Parsed: ${data.part_code} (Qty: ${data.quantity || 'N/A'})`);
+            });
+
+            this.socket.on('import_complete', (data) => {
+                this.log('success', `✅ Import complete: ${data.part_code}`);
+                this.removePendingPart(data.part_code);
+                // Process the imported part
+                this.processImportedPart(data);
+            });
+
+            this.socket.on('import_retry', (data) => {
+                this.log('warning', `⚠ Import retry ${data.retry_count}: ${data.part_code}`);
+                this.updatePendingPart(data.part_code, data.retry_count);
+            });
+
+            this.socket.on('import_failed', (data) => {
+                this.log('error', `✖ Import failed: ${data.part_code} - ${data.error}`);
+                this.removePendingPart(data.part_code);
+            });
+        },
+
+        /**
+         * Load available locations
+         */
+        async loadLocations() {
+            try {
+                const response = await fetch('/api/locations');
+                const data = await response.json();
+                if (data.success) {
+                    this.locations = data.locations;
+                    this.log('success', `📍 Loaded ${data.locations.length} locations`);
+                }
+            } catch (error) {
+                this.log('error', `✖ Failed to load locations: ${error.message}`);
+            }
+        },
+
+        /**
+         * Process location scan/input
+         */
+        processLocationScan() {
+            const input = this.locationInput.trim();
+            if (!input) return;
+
+            // Check if it's a barcode (INV-SL prefix)
+            if (input.toUpperCase().startsWith('INV-SL')) {
+                const locId = parseInt(input.substring(6));
+                if (!isNaN(locId)) {
+                    this.currentLocation = locId;
+                    this.log('success', `📍 Location set: ${this.getCurrentLocationName()}`);
+                }
+            } else if (!isNaN(input)) {
+                // Direct ID
+                this.currentLocation = parseInt(input);
+                this.log('success', `📍 Location set: ${this.getCurrentLocationName()}`);
+            }
+
+            this.locationInput = '';
+        },
+
+        /**
+         * Handle location dropdown change
+         */
+        onLocationChange() {
+            if (this.currentLocation) {
+                this.log('success', `📍 Location set: ${this.getCurrentLocationName()}`);
+                this.$refs.scanInput?.focus();
+            }
+        },
+
+        /**
+         * Get current location name
+         */
+        getCurrentLocationName() {
+            const loc = this.locations.find(l => l.id == this.currentLocation);
+            return loc ? `${loc.id} - ${loc.name}` : `Location ${this.currentLocation}`;
+        },
+
+        /**
+         * Process scanned part
+         */
+        async processScan() {
+            const input = this.scanInput.trim();
+            if (!input) return;
+
+            this.log('info', `🔍 Processing: ${input}`);
+
+            // Parse barcode
+            const { part_code, quantity } = await this.parseBarcode(input);
+
+            if (!part_code) {
+                this.log('warning', '⚠ Could not parse part code');
+                this.scanInput = '';
+                return;
+            }
+
+            // Check if it's a command
+            if (this.handleBarcodeCommand(part_code)) {
+                this.scanInput = '';
+                return;
+            }
+
+            // Validate location for non-locate modes
+            if (this.currentMode !== 'locate' && !this.currentLocation) {
+                this.log('warning', '⚠ Please select a location first');
+                this.scanInput = '';
+                return;
+            }
+
+            // Search for part
+            await this.searchAndProcessPart(part_code, quantity);
+
+            this.scanInput = '';
+            this.$refs.scanInput?.focus();
+        },
+
+        /**
+         * Parse barcode input
+         */
+        async parseBarcode(raw) {
+            // Simple parsing - can be enhanced
+            let part_code = raw;
+            let quantity = null;
+
+            // Check for JSON-like format
+            if (raw.startsWith('{') && raw.includes('}')) {
+                const match = raw.match(/pm:([^,}]+)/i);
+                if (match) part_code = match[1];
+
+                const qtyMatch = raw.match(/qty:(\d+)/i);
+                if (qtyMatch) quantity = parseInt(qtyMatch[1]);
+            }
+
+            return { part_code, quantity };
+        },
+
+        /**
+         * Handle barcode commands
+         */
+        handleBarcodeCommand(code) {
+            const upper = code.toUpperCase();
+
+            // Mode switching
+            const modeMap = {
+                'MODE:ADD': 'import', 'MODE:IMPORT': 'import', 'ADD_STOCK': 'import', 'IMPORT': 'import',
+                'MODE:UPDATE': 'update', 'UPDATE_STOCK': 'update', 'UPDATE': 'update',
+                'MODE:CHECK': 'get', 'MODE:GET': 'get', 'CHECK_STOCK': 'get', 'CHECK': 'get',
+                'MODE:LOCATE': 'locate', 'LOCATE_PART': 'locate', 'LOCATE': 'locate', 'FIND_PART': 'locate'
+            };
+
+            if (modeMap[upper]) {
+                this.currentMode = modeMap[upper];
+                this.log('info', `🔄 Switched to ${this.modes[this.currentMode]} mode`);
+                return true;
+            }
+
+            // Location change
+            if (['CHANGE_LOCATION', 'NEW_LOCATION', 'SET_LOCATION', 'LOCATION'].includes(upper)) {
+                this.currentLocation = '';
+                this.log('info', '📍 Location change mode - scan new location');
+                return true;
+            }
+
+            return false;
+        },
+
+        /**
+         * Search and process part
+         */
+        async searchAndProcessPart(partCode, quantity) {
+            try {
+                const response = await fetch('/api/part/search', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ part_code: partCode })
+                });
+
+                const data = await response.json();
+
+                if (data.success && data.found) {
+                    // Part found
+                    this.currentPart = data.part_info;
+                    this.currentParameters = data.parameters;
+                    this.log('success', `✅ Found part: ${partCode}`);
+
+                    // Execute operation
+                    await this.executeOperation(data.part_id, partCode, quantity);
+                } else {
+                    // Part not found - queue for import
+                    this.log('warning', `⏳ Part ${partCode} not found - queuing for import`);
+                    await this.queueImport(partCode, quantity);
+                }
+            } catch (error) {
+                this.log('error', `✖ Error: ${error.message}`);
+            }
+        },
+
+        /**
+         * Execute stock operation based on mode
+         */
+        async executeOperation(partId, partCode, quantity) {
+            switch (this.currentMode) {
+                case 'import':
+                    await this.addStock(partId, quantity);
+                    break;
+                case 'update':
+                    await this.updateStock(partId);
+                    break;
+                case 'get':
+                    await this.checkStock(partId);
+                    break;
+                case 'locate':
+                    await this.locatePart(partId);
+                    break;
+            }
+        },
+
+        /**
+         * Add stock
+         */
+        async addStock(partId, quantity) {
+            if (!quantity) {
+                this.log('warning', '⚠ No quantity found in scan');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/stock/add', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        part_id: partId,
+                        location_id: this.currentLocation,
+                        quantity: quantity
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    if (data.action === 'updated') {
+                        this.log('success', `✔ Added ${quantity}× (${data.previous_quantity} → ${data.new_quantity})`);
+                    } else {
+                        this.log('success', `✔ Created new stock item with ${quantity}×`);
+                    }
+                    this.currentStock = data.new_quantity || data.quantity;
+                }
+            } catch (error) {
+                this.log('error', `✖ Error adding stock: ${error.message}`);
+            }
+        },
+
+        /**
+         * Update stock
+         */
+        async updateStock(partId) {
+            const newQty = prompt('Enter new stock quantity:', this.currentStock || 0);
+            if (newQty === null) return;
+
+            const quantity = parseInt(newQty);
+            if (isNaN(quantity)) {
+                this.log('error', '✖ Invalid quantity');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/stock/update', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        part_id: partId,
+                        location_id: this.currentLocation,
+                        quantity: quantity
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    this.log('success', `✔ Updated stock: ${data.previous_quantity || 0} → ${quantity}`);
+                    this.currentStock = quantity;
+                }
+            } catch (error) {
+                this.log('error', `✖ Error updating stock: ${error.message}`);
+            }
+        },
+
+        /**
+         * Check stock
+         */
+        async checkStock(partId) {
+            try {
+                const response = await fetch('/api/stock/check', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        part_id: partId,
+                        location_id: this.currentLocation
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    this.currentStock = data.quantity;
+                    this.log('info', `ℹ Current stock: ${data.quantity}`);
+                }
+            } catch (error) {
+                this.log('error', `✖ Error checking stock: ${error.message}`);
+            }
+        },
+
+        /**
+         * Locate part
+         */
+        async locatePart(partId) {
+            try {
+                const response = await fetch('/api/part/locate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ part_id: partId })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    this.log('info', `📍 Found in ${data.locations.length} location(s)`);
+                    data.locations.forEach(loc => {
+                        this.log('info', `  📌 ${loc.location_path || loc.location_name} - Qty: ${loc.quantity}`);
+                    });
+                    this.log('info', `📊 Total stock: ${data.total_stock}`);
+                    this.currentStock = data.total_stock;
+                }
+            } catch (error) {
+                this.log('error', `✖ Error locating part: ${error.message}`);
+            }
+        },
+
+        /**
+         * Queue part for import
+         */
+        async queueImport(partCode, quantity) {
+            try {
+                const response = await fetch('/api/part/import', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        part_code: partCode,
+                        quantity: quantity,
+                        location_id: this.currentLocation,
+                        mode: this.currentMode
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    this.pendingParts.push(data.pending_part);
+                    this.log('info', `📋 Added ${partCode} to import queue - continue scanning`);
+                }
+            } catch (error) {
+                this.log('error', `✖ Error queuing import: ${error.message}`);
+            }
+        },
+
+        /**
+         * Process imported part
+         */
+        async processImportedPart(data) {
+            if (data.part_id) {
+                await this.searchAndProcessPart(data.part_code, data.pending_part.quantity);
+            }
+        },
+
+        /**
+         * Update pending part retry count
+         */
+        updatePendingPart(partCode, retryCount) {
+            const part = this.pendingParts.find(p => p.part_code === partCode);
+            if (part) {
+                part.retry_count = retryCount;
+            }
+        },
+
+        /**
+         * Remove pending part
+         */
+        removePendingPart(partCode) {
+            this.pendingParts = this.pendingParts.filter(p => p.part_code !== partCode);
+        },
+
+        /**
+         * Add log message
+         */
+        log(type, message) {
+            const time = new Date().toLocaleTimeString();
+            this.logs.push({ type, message, time });
+
+            // Keep only last N logs
+            if (this.logs.length > this.maxLogs) {
+                this.logs.shift();
+            }
+
+            // Auto-scroll log
+            this.$nextTick(() => {
+                const container = this.$refs.logContainer;
+                if (container) {
+                    container.scrollTop = container.scrollHeight;
+                }
+            });
+        },
+
+        /**
+         * Get log CSS class
+         */
+        getLogClass(type) {
+            const classes = {
+                'info': 'text-blue-400',
+                'success': 'text-green-400',
+                'warning': 'text-yellow-400',
+                'error': 'text-red-400'
+            };
+            return classes[type] || 'text-gray-400';
+        }
+    };
+}

src/stocktool/web/templates/index.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>InvenTree Stock Tool</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body class="bg-gray-900 text-gray-100" x-data="stockApp()" x-init="init()">
+
+    <!-- Header -->
+    <header class="bg-gray-800 shadow-lg">
+        <div class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-barcode text-3xl text-blue-500"></i>
+                    <h1 class="text-2xl font-bold">InvenTree Stock Tool</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <!-- Connection Status -->
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-circle text-xs" :class="connected ? 'text-green-500 animate-pulse' : 'text-red-500'"></i>
+                        <span class="text-sm" x-text="connected ? 'Connected' : 'Disconnected'"></span>
+                    </div>
+                    <!-- Server Info -->
+                    <div class="text-sm text-gray-400" x-show="config.host">
+                        <i class="fas fa-server"></i>
+                        <span x-text="config.host"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="container mx-auto px-4 py-6 space-y-6">
+
+        <!-- Location Selection -->
+        <div class="bg-gray-800 rounded-lg shadow-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
+                Location
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <label class="block text-sm font-medium mb-2">Scan or Select Location</label>
+                    <input
+                        type="text"
+                        x-model="locationInput"
+                        @keyup.enter="processLocationScan"
+                        placeholder="Scan location barcode or enter ID"
+                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-2">Or Choose from List</label>
+                    <select
+                        x-model="currentLocation"
+                        @change="onLocationChange"
+                        class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                        <option value="">Select a location...</option>
+                        <template x-for="loc in locations" :key="loc.id">
+                            <option :value="loc.id" x-text="`${loc.id} - ${loc.name}`"></option>
+                        </template>
+                    </select>
+                </div>
+            </div>
+            <div x-show="currentLocation" class="mt-4 p-3 bg-blue-900 bg-opacity-30 rounded-lg border border-blue-700">
+                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                <span class="font-medium">Current Location: </span>
+                <span x-text="getCurrentLocationName()"></span>
+            </div>
+        </div>
+
+        <!-- Mode Selection -->
+        <div class="bg-gray-800 rounded-lg shadow-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-cog mr-2 text-blue-500"></i>
+                Mode
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <template x-for="(name, key) in modes" :key="key">
+                    <button
+                        @click="currentMode = key"
+                        :class="currentMode === key ? 'bg-blue-600 border-blue-500' : 'bg-gray-700 border-gray-600 hover:bg-gray-600'"
+                        class="px-6 py-3 border-2 rounded-lg font-medium transition-all"
+                        x-text="name"
+                    ></button>
+                </template>
+            </div>
+        </div>
+
+        <!-- Part Scanning -->
+        <div class="bg-gray-800 rounded-lg shadow-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-qrcode mr-2 text-blue-500"></i>
+                Scan Part
+            </h2>
+            <div class="flex space-x-4">
+                <input
+                    type="text"
+                    x-model="scanInput"
+                    @keyup.enter="processScan"
+                    placeholder="Scan part barcode or enter part code..."
+                    class="flex-1 px-4 py-3 text-lg bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    x-ref="scanInput"
+                >
+                <button
+                    @click="processScan"
+                    class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors"
+                >
+                    <i class="fas fa-search mr-2"></i>
+                    Process
+                </button>
+            </div>
+        </div>
+
+        <!-- Pending Imports -->
+        <div x-show="pendingParts.length > 0" class="bg-gray-800 rounded-lg shadow-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-clock mr-2 text-yellow-500"></i>
+                Pending Imports (<span x-text="pendingParts.length"></span>)
+            </h2>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead class="bg-gray-700">
+                        <tr>
+                            <th class="px-4 py-2 text-left">Part Code</th>
+                            <th class="px-4 py-2 text-left">Qty</th>
+                            <th class="px-4 py-2 text-left">Mode</th>
+                            <th class="px-4 py-2 text-left">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template x-for="part in pendingParts" :key="part.part_code">
+                            <tr class="border-t border-gray-700">
+                                <td class="px-4 py-2" x-text="part.part_code"></td>
+                                <td class="px-4 py-2" x-text="part.quantity || 'N/A'"></td>
+                                <td class="px-4 py-2" x-text="modes[part.mode] || part.mode"></td>
+                                <td class="px-4 py-2">
+                                    <span class="inline-flex items-center px-2 py-1 bg-yellow-900 text-yellow-300 rounded text-sm">
+                                        <i class="fas fa-spinner fa-spin mr-2"></i>
+                                        Importing... (attempt <span x-text="part.retry_count + 1"></span>)
+                                    </span>
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Part Information -->
+        <div x-show="currentPart" class="bg-gray-800 rounded-lg shadow-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-info-circle mr-2 text-blue-500"></i>
+                Part Information
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Part Details -->
+                <div class="md:col-span-2 space-y-3">
+                    <div class="flex justify-between py-2 border-b border-gray-700">
+                        <span class="font-medium">Part Code:</span>
+                        <span x-text="currentPart?.IPN || 'N/A'"></span>
+                    </div>
+                    <div class="flex justify-between py-2 border-b border-gray-700">
+                        <span class="font-medium">Name:</span>
+                        <span x-text="currentPart?.name || 'N/A'"></span>
+                    </div>
+                    <div class="flex justify-between py-2 border-b border-gray-700">
+                        <span class="font-medium">Description:</span>
+                        <span x-text="currentPart?.description || 'N/A'"></span>
+                    </div>
+                    <template x-if="currentParameters && currentParameters.length > 0">
+                        <div class="mt-4">
+                            <h3 class="font-semibold mb-2">Parameters:</h3>
+                            <template x-for="param in currentParameters" :key="param.pk">
+                                <div class="flex justify-between py-2 border-b border-gray-700">
+                                    <span x-text="param.template_detail?.name || 'N/A'"></span>
+                                    <span x-text="param.data || 'N/A'"></span>
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+                <!-- Image & Stock -->
+                <div class="space-y-4">
+                    <template x-if="currentPart?.image || currentPart?.thumbnail">
+                        <img
+                            :src="currentPart.image || currentPart.thumbnail"
+                            alt="Part Image"
+                            class="w-full rounded-lg border border-gray-700"
+                        >
+                    </template>
+                    <div x-show="currentStock !== null" class="text-center p-4 bg-blue-900 bg-opacity-30 rounded-lg border border-blue-700">
+                        <div class="text-sm text-gray-400 mb-1">Current Stock</div>
+                        <div class="text-3xl font-bold" x-text="currentStock"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Activity Log -->
+        <div class="bg-gray-800 rounded-lg shadow-xl p-6">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-list mr-2 text-blue-500"></i>
+                Activity Log
+            </h2>
+            <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm space-y-1" x-ref="logContainer">
+                <template x-for="(log, index) in logs" :key="index">
+                    <div :class="getLogClass(log.type)">
+                        <span class="text-gray-500" x-text="log.time"></span>
+                        <span x-html="log.message"></span>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </main>
+
+    <script src="/static/js/app.js"></script>
+</body>
+</html>