Add view all barcodes feature with print functionality

Added a new feature that allows viewing all product barcodes for a tenant
in a grid layout with print-optimized styling. This makes it easy to print
barcode sheets for all products at once.

Changes:
- Add new route /<tenant_id>/barcodes for viewing all barcodes
- Create view_all_barcodes() function in routes/admin.py
- Add all_barcodes.html template with responsive grid and print CSS
- Add "View All Barcodes" button to tenant index page
- Print layout optimized for 3-column barcode sheets

src/app.py

@@ -400,7 +400,7 @@ def serve_barcode(tenant_id, filename):
 
 # Import product management routes
 from routes.admin import (add_product, edit_product, delete_product,
-                         generate_barcode, manage_ar_fields)
+                         generate_barcode, manage_ar_fields, view_all_barcodes)
 
 # Register product management routes (remove /admin/ from paths)
 app.add_url_rule('/<tenant:tenant_id>/add', 'admin.add_product', add_product, methods=['GET', 'POST'])
@@ -408,6 +408,7 @@ app.add_url_rule('/<tenant:tenant_id>/edit/<product_id>', 'admin.edit_product',
 app.add_url_rule('/<tenant:tenant_id>/delete/<product_id>', 'admin.delete_product', delete_product, methods=['POST'])
 app.add_url_rule('/<tenant:tenant_id>/generate_barcode/<product_id>/<code_type>', 'admin.generate_barcode', generate_barcode)
 app.add_url_rule('/<tenant:tenant_id>/ar_fields', 'admin.manage_ar_fields', manage_ar_fields, methods=['GET', 'POST'])
+app.add_url_rule('/<tenant:tenant_id>/barcodes', 'admin.view_all_barcodes', view_all_barcodes, methods=['GET'])
 
 # Register API routes with tenant prefix
 from routes.api import api_index

src/routes/admin.py

@@ -316,19 +316,32 @@ def generate_barcode(tenant_id, product_id, code_type):
     products = load_products(tenant_id)
     if product_id not in products:
         return jsonify({"error": "Product not found"}), 404
-    
+
     # Map code_type to the expected format for the main endpoint
     type_mapping = {
         'qrcode': 'qr',
         'ean13': 'ean13',
         'code128': 'code128'
     }
-    
+
     barcode_type = type_mapping.get(code_type, code_type)
-    
+
     # Redirect to the main barcode endpoint which generates dynamically
     return redirect(f'/{tenant_id}/barcodes/{product_id}_{barcode_type}.png')
 
+def view_all_barcodes(tenant_id):
+    """Display all product barcodes for printing"""
+    products = load_products(tenant_id)
+    tenant = database.get_or_create_tenant(tenant_id)
+
+    # Get barcode type setting for this tenant
+    barcode_type = tenant.get('barcode_type', 'qr')
+
+    return render_template('admin/all_barcodes.html',
+                         products=products,
+                         tenant=tenant,
+                         barcode_type=barcode_type)
+
 def manage_credentials(tenant_id):
     """Manage tenant login credentials"""
     tenant = database.get_or_create_tenant(tenant_id)

src/templates/admin/all_barcodes.html

@@ -0,0 +1,149 @@
+{% extends "layout.html" %}
+
+{% block title %}All Barcodes - {{ tenant.name }} - KCAP Demo Server{% endblock %}
+
+{% block extra_css %}
+<style>
+    /* Screen styles */
+    @media screen {
+        .barcode-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 20px;
+            padding: 20px 0;
+        }
+
+        .barcode-item {
+            border: 1px solid #ddd;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            background: white;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .barcode-item img {
+            max-width: 100%;
+            height: auto;
+            margin: 10px 0;
+        }
+
+        .barcode-item .product-id {
+            font-weight: bold;
+            font-size: 1.1em;
+            margin-bottom: 10px;
+            color: #333;
+        }
+
+        .print-buttons {
+            margin-bottom: 20px;
+        }
+    }
+
+    /* Print styles */
+    @media print {
+        /* Hide everything except barcodes */
+        nav, .navbar, .print-buttons, .alert, .btn {
+            display: none !important;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 100% !important;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        /* Grid layout for print */
+        .barcode-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            padding: 10px;
+            page-break-inside: avoid;
+        }
+
+        .barcode-item {
+            border: 1px solid #ddd;
+            padding: 10px;
+            text-align: center;
+            page-break-inside: avoid;
+            background: white;
+        }
+
+        .barcode-item img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: 5px auto;
+        }
+
+        .barcode-item .product-id {
+            font-weight: bold;
+            font-size: 0.9em;
+            margin-bottom: 5px;
+            color: #000;
+        }
+
+        /* Page breaks */
+        @page {
+            margin: 0.5cm;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row mt-4">
+    <div class="col-md-12">
+        <div class="alert alert-info">
+            <strong>Current Tenant:</strong> {{ tenant.name }} (ID: {{ tenant.id }})
+            <div class="mt-2">
+                <a href="{{ url_for('tenant_index', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Back to Dashboard</a>
+            </div>
+        </div>
+
+        <div class="print-buttons d-flex justify-content-between align-items-center mb-4">
+            <h1>All Product Barcodes</h1>
+            <button onclick="window.print()" class="btn btn-primary">
+                <i class="bi bi-printer"></i> Print Barcodes
+            </button>
+        </div>
+
+        {% if products %}
+        <div class="barcode-grid">
+            {% for product_id, product_data in products.items() %}
+            <div class="barcode-item">
+                <div class="product-id">{{ product_id }}</div>
+                <img src="/{{ tenant.id }}/barcodes/{{ product_id }}_{{ barcode_type }}.png"
+                     alt="Barcode for {{ product_id }}"
+                     onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'100\'%3E%3Crect width=\'200\' height=\'100\' fill=\'%23f0f0f0\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'12\' fill=\'%23999\'%3EBarcode unavailable%3C/text%3E%3C/svg%3E';">
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="alert alert-info">
+            No products available to generate barcodes.
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    // Optional: Automatically print when page loads if requested via URL parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('autoprint') === 'true') {
+        window.onload = function() {
+            setTimeout(function() {
+                window.print();
+            }, 500);
+        };
+    }
+</script>
+{% endblock %}

src/templates/admin/index.html

@@ -10,6 +10,9 @@
             <div class="mt-2">
                 <a href="{{ url_for('admin.manage_credentials', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Manage Credentials</a>
                 <a href="{{ url_for('admin.manage_ar_fields', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Manage AR Fields</a>
+                <a href="{{ url_for('admin.view_all_barcodes', tenant_id=tenant.id) }}" class="btn btn-sm btn-success">
+                    <i class="bi bi-upc-scan"></i> View All Barcodes
+                </a>
                 <a href="/" class="btn btn-sm btn-outline-secondary">Switch Tenant</a>
             </div>
         </div>

src/templates/index.html

@@ -18,9 +18,14 @@
             <div class="mt-4">
                 <div class="d-flex justify-content-between align-items-center mb-3">
                     <h2>Products</h2>
-                    <a href="/{{ tenant.id }}/add" class="btn btn-primary">
-                        <i class="bi bi-plus-circle"></i> Add New Product
-                    </a>
+                    <div>
+                        <a href="/{{ tenant.id }}/barcodes" class="btn btn-success me-2">
+                            <i class="bi bi-upc-scan"></i> View All Barcodes
+                        </a>
+                        <a href="/{{ tenant.id }}/add" class="btn btn-primary">
+                            <i class="bi bi-plus-circle"></i> Add New Product
+                        </a>
+                    </div>
                 </div>
                 
                 {% if products %}