updated view in label preview

py_app/app/daily_mirror.py

@@ -605,11 +605,11 @@ def api_get_orders_data():
         
         if search:
             where_conditions.append("""
-                (order_id LIKE ? OR customer_name LIKE ? OR article_code LIKE ? OR 
-                 article_description LIKE ? OR client_order LIKE ?)
+                (order_id LIKE ? OR order_line LIKE ? OR customer_name LIKE ? OR article_code LIKE ? OR 
+                 article_description LIKE ? OR client_order_line LIKE ?)
             """)
             search_param = f'%{search}%'
-            params.extend([search_param] * 5)
+            params.extend([search_param] * 6)
         
         if status_filter:
             where_conditions.append("order_status = ?")
@@ -631,13 +631,15 @@ def api_get_orders_data():
         # Calculate offset
         offset = (page - 1) * per_page
         
-        # Get paginated data
+        # Get paginated data with all new fields
         data_query = f"""
-            SELECT id, order_id, customer_code, customer_name, client_order,
-                   article_code, article_description, quantity_requested, 
-                   delivery_date, order_status, priority, product_group, order_date
+            SELECT id, order_line, order_id, line_number, customer_code, customer_name, 
+                   client_order_line, article_code, article_description, 
+                   quantity_requested, balance, unit_of_measure, delivery_date, order_date,
+                   order_status, article_status, priority, product_group, 
+                   production_order, production_status, model, closed
             FROM dm_orders {where_clause}
-            ORDER BY order_date DESC, order_id
+            ORDER BY order_date DESC, order_id, line_number
             LIMIT ? OFFSET ?
         """
         cursor.execute(data_query, params + [per_page, offset])
@@ -648,18 +650,27 @@ def api_get_orders_data():
         for record in records:
             data.append({
                 'id': record[0],
-                'order_id': record[1],
-                'customer_code': record[2],
-                'customer_name': record[3],
-                'client_order': record[4],
-                'article_code': record[5],
-                'article_description': record[6],
-                'quantity_requested': record[7],
-                'delivery_date': record[8].strftime('%Y-%m-%d') if record[8] else '',
-                'order_status': record[9],
-                'priority': record[10],
-                'product_group': record[11],
-                'order_date': record[12].strftime('%Y-%m-%d') if record[12] else ''
+                'order_line': record[1],
+                'order_id': record[2],
+                'line_number': record[3],
+                'customer_code': record[4],
+                'customer_name': record[5],
+                'client_order_line': record[6],
+                'article_code': record[7],
+                'article_description': record[8],
+                'quantity_requested': record[9],
+                'balance': record[10],
+                'unit_of_measure': record[11],
+                'delivery_date': record[12].strftime('%Y-%m-%d') if record[12] else '',
+                'order_date': record[13].strftime('%Y-%m-%d') if record[13] else '',
+                'order_status': record[14],
+                'article_status': record[15],
+                'priority': record[16],
+                'product_group': record[17],
+                'production_order': record[18],
+                'production_status': record[19],
+                'model': record[20],
+                'closed': record[21]
             })
         
         # Get unique customers for filter dropdown
@@ -699,22 +710,31 @@ def api_update_orders_data(record_id):
         db.connect()
         cursor = db.connection.cursor()
         
-        # Update the record
+        # Update the record with all new fields
         update_query = """
             UPDATE dm_orders SET
-                customer_code = ?, customer_name = ?, client_order = ?,
-                article_code = ?, article_description = ?, quantity_requested = ?,
-                delivery_date = ?, order_status = ?, priority = ?, product_group = ?,
-                order_date = ?, updated_at = CURRENT_TIMESTAMP
+                order_line = ?, order_id = ?, line_number = ?,
+                customer_code = ?, customer_name = ?, client_order_line = ?,
+                article_code = ?, article_description = ?, 
+                quantity_requested = ?, balance = ?, unit_of_measure = ?,
+                delivery_date = ?, order_date = ?,
+                order_status = ?, article_status = ?, priority = ?, 
+                product_group = ?, production_order = ?, production_status = ?,
+                model = ?, closed = ?,
+                updated_at = CURRENT_TIMESTAMP
             WHERE id = ?
         """
         
         cursor.execute(update_query, (
-            data['customer_code'], data['customer_name'], data['client_order'],
-            data['article_code'], data['article_description'], data['quantity_requested'],
+            data['order_line'], data['order_id'], data['line_number'],
+            data['customer_code'], data['customer_name'], data['client_order_line'],
+            data['article_code'], data['article_description'], 
+            data['quantity_requested'], data.get('balance'), data.get('unit_of_measure'),
             data['delivery_date'] if data['delivery_date'] else None,
-            data['order_status'], data['priority'], data['product_group'],
             data['order_date'] if data['order_date'] else None,
+            data['order_status'], data.get('article_status'), data.get('priority'),
+            data.get('product_group'), data.get('production_order'), data.get('production_status'),
+            data.get('model'), data.get('closed'),
             record_id
         ))
         
@@ -727,6 +747,31 @@ def api_update_orders_data(record_id):
         return jsonify({'success': False, 'error': str(e)}), 500
 
 
+@daily_mirror_bp.route('/api/tune/orders_data/<int:record_id>', methods=['DELETE'])
+def api_delete_orders_data(record_id):
+    """API endpoint to delete an order record"""
+    access_check = check_daily_mirror_access()
+    if access_check:
+        return access_check
+        
+    try:
+        db = DailyMirrorDatabase()
+        db.connect()
+        cursor = db.connection.cursor()
+        
+        # Delete the record
+        delete_query = "DELETE FROM dm_orders WHERE id = ?"
+        cursor.execute(delete_query, (record_id,))
+        
+        db.connection.commit()
+        
+        return jsonify({'success': True, 'message': 'Order deleted successfully'})
+        
+    except Exception as e:
+        current_app.logger.error(f"Error deleting orders record: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
 @daily_mirror_bp.route('/tune/delivery')
 def tune_delivery_data():
     """Tune Delivery Records Data - Edit and update delivery information"""

py_app/app/daily_mirror_db_setup.py

@@ -150,7 +150,8 @@ class DailyMirrorDatabase:
             # Prepare insert statement with new schema
             insert_sql = """
                 INSERT INTO dm_production_orders (
-                    production_order, open_for_order_line, client_order_line,
+                    production_order, production_order_line, line_number,
+                    open_for_order_line, client_order_line,
                     customer_code, customer_name, article_code, article_description,
                     quantity_requested, unit_of_measure, delivery_date, opening_date,
                     closing_date, data_planificare, production_status,
@@ -161,7 +162,7 @@ class DailyMirrorDatabase:
                     phase_t3_sewing, t3_operator_name, t3_registration_date,
                     design_number, classification, model_description, model_lb2,
                     needle_position, needle_row, priority
-                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                 ON DUPLICATE KEY UPDATE
                     open_for_order_line = VALUES(open_for_order_line),
                     client_order_line = VALUES(client_order_line),
@@ -302,7 +303,7 @@ class DailyMirrorDatabase:
             return None
     
     def import_orders_data(self, file_path):
-        """Import orders data from Excel file with enhanced error handling"""
+        """Import orders data from Excel file with enhanced error handling and multi-line support"""
         try:
             # Ensure we have a database connection
             if not self.connection:
@@ -327,120 +328,125 @@ class DailyMirrorDatabase:
                     'error_message': f'Orders file not found: {file_path}'
                 }
             
-            # Try to get sheet names first
+            # Read from DataSheet - the correct sheet for orders data
             try:
-                excel_file = pd.ExcelFile(file_path)
-                sheet_names = excel_file.sheet_names
-                logger.info(f"Available sheets in orders file: {sheet_names}")
+                df = pd.read_excel(file_path, sheet_name='DataSheet', engine='openpyxl', header=0)
+                logger.info(f"Successfully read orders data from DataSheet: {len(df)} rows, {len(df.columns)} columns")
+                logger.info(f"Available columns: {list(df.columns)[:15]}...")
             except Exception as e:
-                logger.warning(f"Could not get sheet names: {e}")
-                sheet_names = ['DataSheet', 'Sheet1']
-            
-            # Try multiple approaches to read the Excel file
-            df = None
-            sheet_used = None
-            approaches = [
-                ('openpyxl', 0, 'read_only'),
-                ('openpyxl', 0, 'normal'),
-                ('openpyxl', 1, 'normal'),
-                ('xlrd', 0, 'normal') if file_path.endswith('.xls') else None,
-                ('default', 0, 'normal')
-            ]
-            
-            for approach in approaches:
-                if approach is None:
-                    continue
-                    
-                engine, sheet_name, mode = approach
-                try:
-                    logger.info(f"Trying to read orders with engine: {engine}, sheet: {sheet_name}, mode: {mode}")
-                    
-                    if engine == 'default':
-                        df = pd.read_excel(file_path, sheet_name=sheet_name, header=0)
-                    elif mode == 'read_only':
-                        df = pd.read_excel(file_path, sheet_name=sheet_name, engine=engine, header=0)
-                    else:
-                        df = pd.read_excel(file_path, sheet_name=sheet_name, engine=engine, header=0)
-                        
-                    sheet_used = f"{engine} (sheet: {sheet_name}, mode: {mode})"
-                    logger.info(f"Successfully read orders data with: {sheet_used}")
-                    break
-                    
-                except Exception as e:
-                    logger.warning(f"Failed with {engine}, sheet {sheet_name}, mode {mode}: {e}")
-                    continue
-            
-            if df is None:
-                logger.error("Could not read the orders file with any method")
+                logger.error(f"Failed to read DataSheet from orders file: {e}")
                 return {
                     'success_count': 0, 
                     'error_count': 1, 
                     'total_rows': 0,
-                    'error_message': 'Could not read the orders Excel file. The file may have formatting issues or be corrupted.'
+                    'error_message': f'Could not read DataSheet from orders file: {e}'
                 }
             
-            logger.info(f"Loaded orders data from {sheet_used}: {len(df)} rows, {len(df.columns)} columns")
-            logger.info(f"Available columns: {list(df.columns)[:10]}...")
-            
             cursor = self.connection.cursor()
             success_count = 0
             created_count = 0
             updated_count = 0
             error_count = 0
             
-            # Prepare insert statement for orders
+            # Prepare insert statement matching the actual table structure
             insert_sql = """
                 INSERT INTO dm_orders (
-                    order_id, customer_code, customer_name, client_order,
-                    article_code, article_description, quantity_requested, delivery_date,
-                    order_status, product_group, order_date
-                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                    order_line, order_id, line_number, customer_code, customer_name, 
+                    client_order_line, article_code, article_description, 
+                    quantity_requested, balance, unit_of_measure, delivery_date, order_date,
+                    order_status, article_status, priority, product_group, production_order, 
+                    production_status, model, closed
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                 ON DUPLICATE KEY UPDATE
+                    order_id = VALUES(order_id),
+                    line_number = VALUES(line_number),
                     customer_code = VALUES(customer_code),
                     customer_name = VALUES(customer_name),
-                    client_order = VALUES(client_order),
+                    client_order_line = VALUES(client_order_line),
                     article_code = VALUES(article_code),
                     article_description = VALUES(article_description),
                     quantity_requested = VALUES(quantity_requested),
+                    balance = VALUES(balance),
+                    unit_of_measure = VALUES(unit_of_measure),
                     delivery_date = VALUES(delivery_date),
-                    order_status = VALUES(order_status),
-                    product_group = VALUES(product_group),
                     order_date = VALUES(order_date),
+                    order_status = VALUES(order_status),
+                    article_status = VALUES(article_status),
+                    priority = VALUES(priority),
+                    product_group = VALUES(product_group),
+                    production_order = VALUES(production_order),
+                    production_status = VALUES(production_status),
+                    model = VALUES(model),
+                    closed = VALUES(closed),
                     updated_at = CURRENT_TIMESTAMP
             """
             
-            # Process each row with the actual column mapping and better null handling
+            # Safe value helper functions
+            def safe_str(value, default=''):
+                if pd.isna(value):
+                    return default
+                return str(value).strip() if value != '' else default
+            
+            def safe_int(value, default=None):
+                if pd.isna(value):
+                    return default
+                try:
+                    if isinstance(value, str):
+                        value = value.strip()
+                        if value == '':
+                            return default
+                    return int(float(value))
+                except (ValueError, TypeError):
+                    return default
+            
+            def safe_float(value, default=None):
+                if pd.isna(value):
+                    return default
+                try:
+                    if isinstance(value, str):
+                        value = value.strip()
+                        if value == '':
+                            return default
+                    return float(value)
+                except (ValueError, TypeError):
+                    return default
+            
+            # Process each row with the new schema
             for index, row in df.iterrows():
                 try:
-                    # Helper function to safely get values and handle NaN
-                    def safe_get(row, column, default=''):
-                        value = row.get(column, default)
-                        if pd.isna(value) or value == 'nan':
-                            return default
-                        return str(value).strip() if isinstance(value, str) else value
+                    # Create concatenated unique keys
+                    order_id = safe_str(row.get('Comanda'), f'ORD_{index:06d}')
+                    line_number = safe_int(row.get('Linie'), 1)
+                    order_line = f"{order_id}-{line_number}"
                     
-                    def safe_get_int(row, column, default=0):
-                        value = row.get(column, default)
-                        if pd.isna(value) or value == 'nan':
-                            return default
-                        try:
-                            return int(float(value)) if value != '' else default
-                        except (ValueError, TypeError):
-                            return default
+                    # Create concatenated client order line
+                    client_order = safe_str(row.get('Com. Achiz. Client'))
+                    client_order_line_num = safe_str(row.get('Nr. linie com. client'))
+                    client_order_line = f"{client_order}-{client_order_line_num}" if client_order and client_order_line_num else ''
                     
-                    # Map columns based on the actual Vizual. Artic. Comenzi Deschise format
+                    # Map all fields from Excel to database (21 fields, removed client_order)
                     data = (
-                        safe_get(row, 'Comanda', f'ORD_{index:06d}'),  # Order ID
-                        safe_get(row, 'Cod. Client'),  # Customer Code
-                        safe_get(row, 'Customer Name'),  # Customer Name
-                        safe_get(row, 'Com. Achiz. Client'),  # Client Order
-                        safe_get(row, 'Cod Articol'),  # Article Code
-                        safe_get(row, 'Part Description', safe_get(row, 'Descr. Articol')),  # Article Description
-                        safe_get_int(row, 'Cantitate'),  # Quantity
-                        self._parse_date(row.get('Data livrare')),  # Delivery Date
-                        safe_get(row, 'Statut Comanda', 'PENDING'),  # Order Status
-                        safe_get(row, 'Model'),  # Product Group
-                        self._parse_date(row.get('Data Comenzii'))  # Order Date
+                        order_line,  # order_line (UNIQUE key: order_id-line_number)
+                        order_id,  # order_id
+                        line_number,  # line_number
+                        safe_str(row.get('Cod. Client')),  # customer_code
+                        safe_str(row.get('Customer Name')),  # customer_name
+                        client_order_line,  # client_order_line (concatenated)
+                        safe_str(row.get('Cod Articol')),  # article_code
+                        safe_str(row.get('Part Description')),  # article_description
+                        safe_int(row.get('Cantitate')),  # quantity_requested
+                        safe_float(row.get('Balanta')),  # balance
+                        safe_str(row.get('U.M.')),  # unit_of_measure
+                        self._parse_date(row.get('Data livrare')),  # delivery_date
+                        self._parse_date(row.get('Data Comenzii')),  # order_date
+                        safe_str(row.get('Statut Comanda')),  # order_status
+                        safe_str(row.get('Stare Articol')),  # article_status
+                        safe_int(row.get('Prioritate')),  # priority
+                        safe_str(row.get('Grup')),  # product_group
+                        safe_str(row.get('Comanda Productie')),  # production_order
+                        safe_str(row.get('Stare CP')),  # production_status
+                        safe_str(row.get('Model')),  # model
+                        safe_str(row.get('Inchis'))  # closed
                     )
                     
                     cursor.execute(insert_sql, data)
@@ -454,12 +460,12 @@ class DailyMirrorDatabase:
                     success_count += 1
                     
                 except Exception as row_error:
-                    logger.warning(f"Error processing row {index}: {row_error}")
+                    logger.warning(f"Error processing row {index} (order_line: {order_line if 'order_line' in locals() else 'unknown'}): {row_error}")
                     error_count += 1
                     continue
             
             self.connection.commit()
-            logger.info(f"Orders import completed: {success_count} successful, {error_count} errors")
+            logger.info(f"Orders import completed: {success_count} successful ({created_count} created, {updated_count} updated), {error_count} errors")
             
             return {
                 'success_count': success_count,
@@ -472,6 +478,8 @@ class DailyMirrorDatabase:
             
         except Exception as e:
             logger.error(f"Error importing orders data: {e}")
+            import traceback
+            logger.error(traceback.format_exc())
             return {
                 'success_count': 0, 
                 'error_count': 1, 
@@ -566,76 +574,74 @@ class DailyMirrorDatabase:
             updated_count = 0
             error_count = 0
             
-            # Prepare insert statement for deliveries
+            # Prepare insert statement for deliveries - simple INSERT, every Excel row gets a database row
             insert_sql = """
                 INSERT INTO dm_deliveries (
-                    shipment_id, order_id, customer_code, customer_name,
+                    shipment_id, order_id, client_order_line, customer_code, customer_name,
                     article_code, article_description, quantity_delivered,
                     shipment_date, delivery_date, delivery_status, total_value
-                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-                ON DUPLICATE KEY UPDATE
-                    customer_code = VALUES(customer_code),
-                    customer_name = VALUES(customer_name),
-                    article_code = VALUES(article_code),
-                    article_description = VALUES(article_description),
-                    quantity_delivered = VALUES(quantity_delivered),
-                    shipment_date = VALUES(shipment_date),
-                    delivery_date = VALUES(delivery_date),
-                    delivery_status = VALUES(delivery_status),
-                    total_value = VALUES(total_value),
-                    updated_at = CURRENT_TIMESTAMP
+                ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
             """
             
             # Process each row with the actual column mapping and better null handling
             for index, row in df.iterrows():
                 try:
-                    # Helper function to safely get values and handle NaN
-                    def safe_get(row, column, default=''):
-                        value = row.get(column, default)
-                        if pd.isna(value) or value == 'nan':
+                    # Safe value helper functions
+                    def safe_str(value, default=''):
+                        if pd.isna(value):
                             return default
-                        return str(value).strip() if isinstance(value, str) else value
+                        return str(value).strip() if value != '' else default
                     
-                    def safe_get_float(row, column, default=0.0):
-                        value = row.get(column, default)
-                        if pd.isna(value) or value == 'nan':
+                    def safe_int(value, default=None):
+                        if pd.isna(value):
                             return default
                         try:
-                            return float(value) if value != '' else default
+                            if isinstance(value, str):
+                                value = value.strip()
+                                if value == '':
+                                    return default
+                            return int(float(value))
                         except (ValueError, TypeError):
                             return default
                     
-                    def safe_get_int(row, column, default=0):
-                        value = row.get(column, default)
-                        if pd.isna(value) or value == 'nan':
+                    def safe_float(value, default=None):
+                        if pd.isna(value):
                             return default
                         try:
-                            return int(float(value)) if value != '' else default
+                            if isinstance(value, str):
+                                value = value.strip()
+                                if value == '':
+                                    return default
+                            return float(value)
                         except (ValueError, TypeError):
                             return default
                     
+                    # Create concatenated client order line: Com. Achiz. Client + "-" + Linie
+                    client_order = safe_str(row.get('Com. Achiz. Client'))
+                    linie = safe_str(row.get('Linie'))
+                    client_order_line = f"{client_order}-{linie}" if client_order and linie else ''
+                    
                     # Map columns based on the actual Articole livrate_returnate format
                     data = (
-                        safe_get(row, 'Document Number', f'SH_{index:06d}'),  # Shipment ID
-                        safe_get(row, 'Comanda'),  # Order ID
-                        safe_get(row, 'Cod. Client'),  # Customer Code
-                        safe_get(row, 'Nume client'),  # Customer Name
-                        safe_get(row, 'Cod Articol'),  # Article Code
-                        safe_get(row, 'Part Description'),  # Article Description
-                        safe_get_int(row, 'Cantitate'),  # Quantity Delivered
+                        safe_str(row.get('Document Number'), f'SH_{index:06d}'),  # Shipment ID
+                        safe_str(row.get('Comanda')),  # Order ID
+                        client_order_line,  # Client Order Line (concatenated)
+                        safe_str(row.get('Cod. Client')),  # Customer Code
+                        safe_str(row.get('Nume client')),  # Customer Name
+                        safe_str(row.get('Cod Articol')),  # Article Code
+                        safe_str(row.get('Part Description')),  # Article Description
+                        safe_int(row.get('Cantitate')),  # Quantity Delivered
                         self._parse_date(row.get('Data')),  # Shipment Date
                         self._parse_date(row.get('Data')),  # Delivery Date (same as shipment for now)
-                        safe_get(row, 'Stare', 'DELIVERED'),  # Delivery Status
-                        safe_get_float(row, 'Total Price')  # Total Value
+                        safe_str(row.get('Stare'), 'DELIVERED'),  # Delivery Status
+                        safe_float(row.get('Total Price'))  # Total Value
                     )
                     
                     cursor.execute(insert_sql, data)
                     
-                    # Track created vs updated
+                    # Track created rows (simple INSERT always creates)
                     if cursor.rowcount == 1:
                         created_count += 1
-                    elif cursor.rowcount == 2:
-                        updated_count += 1
                     
                     success_count += 1
                     

py_app/app/routes.py

@@ -1958,6 +1958,18 @@ def print_module():
         flash(f"Error loading orders: {e}", 'error')
         return render_template('print_module.html', orders=[])
 
+@bp.route('/print_lost_labels')
+def print_lost_labels():
+    """Print lost labels module"""
+    try:
+        # Get orders data for lost labels (could be different logic than print_module)
+        orders_data = get_unprinted_orders_data(limit=100)
+        return render_template('print_lost_labels.html', orders=orders_data)
+    except Exception as e:
+        print(f"Error loading print lost labels data: {e}")
+        flash(f"Error loading orders: {e}", 'error')
+        return render_template('print_lost_labels.html', orders=[])
+
 @bp.route('/view_orders')
 def view_orders():
     """View all orders in a table format"""

py_app/app/static/css/daily_mirror_tune.css

@@ -1,9 +1,9 @@
 /* Daily Mirror Tune Pages - Modal Styles */
 /* Fixes for editable modals across tune/production, tune/orders, and tune/delivery pages */
 
-/* Force modal width to be extra large (20% wider than standard 1200px) */
+/* Force modal width to be extra wide (95% of viewport width) */
 #editModal .modal-dialog {
-    max-width: 1440px !important;
+    max-width: 95vw !important;
 }
 
 /* Modal footer button spacing and sizing */

py_app/app/static/css/print_module.css

@@ -0,0 +1,807 @@
+/* ==========================================================================
+   PRINT MODULE CSS - Dedicated styles for Labels/Printing Module
+   ==========================================================================
+   
+   This file contains all CSS for the printing module pages:
+   - print_module.html (main printing interface)
+   - print_lost_labels.html (lost labels printing)
+   - main_page_etichete.html (labels main page) 
+   - upload_data.html (upload orders)
+   - view_orders.html (view orders)
+   
+   ========================================================================== */
+
+/* ==========================================================================
+   LABEL PREVIEW STYLES
+   ========================================================================== */
+
+#label-preview {
+    background: #fafafa;
+    position: relative;
+    overflow: visible;
+}
+
+/* Label content rectangle styling */
+#label-content {
+    position: absolute;
+    top: 65.7px;
+    left: 11.34px;
+    width: 227.4px;
+    height: 321.3px;
+    border: 1px solid #ddd;
+    background: white;
+}
+
+/* Barcode frame styling */
+#barcode-frame {
+    position: absolute;
+    top: 387px;
+    left: 50%;
+    transform: translateX(calc(-50% - 20px));
+    width: 220px;
+    max-width: 220px;
+    height: 50px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: none;
+}
+
+#barcode-display {
+    width: 100%;
+    height: 40px;
+    max-width: 220px;
+}
+
+#barcode-text {
+    font-size: 8px;
+    font-family: 'Courier New', monospace;
+    margin-top: 2px;
+    text-align: center;
+    font-weight: bold;
+    display: none;
+}
+
+/* Vertical barcode frame styling */
+#vertical-barcode-frame {
+    position: absolute;
+    top: 50px;
+    left: 270px;
+    width: 321.3px;
+    height: 40px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(90deg);
+    transform-origin: left center;
+    border: none;
+}
+
+#vertical-barcode-display {
+    width: 100%;
+    height: 35px;
+}
+
+#vertical-barcode-text {
+    position: absolute;
+    bottom: -15px;
+    font-size: 7px;
+    font-family: 'Courier New', monospace;
+    text-align: center;
+    font-weight: bold;
+    width: 100%;
+    display: none;
+}
+
+/* Allow JsBarcode to control SVG colors naturally - removed forced black styling */
+
+/* ==========================================================================
+   PRINT MODULE TABLE STYLES
+   ========================================================================== */
+
+/* Enhanced table styling for print module tables */
+.card.scan-table-card table.print-module-table.scan-table thead th {
+    border-bottom: 2px solid var(--print-table-border) !important;
+    background-color: var(--print-table-header-bg) !important;
+    color: var(--print-table-header-text) !important;
+    padding: 0.25rem 0.4rem !important;
+    text-align: left !important;
+    font-weight: 600 !important;
+    font-size: 10px !important;
+    line-height: 1.2 !important;
+}
+
+.card.scan-table-card table.print-module-table.scan-table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    background-color: var(--print-table-body-bg) !important;
+}
+
+.card.scan-table-card table.print-module-table.scan-table tbody tr:hover td {
+    background-color: var(--print-table-hover) !important;
+    cursor: pointer !important;
+}
+
+.card.scan-table-card table.print-module-table.scan-table tbody td {
+    background-color: var(--print-table-body-bg) !important;
+    color: var(--print-table-body-text) !important;
+    border: 1px solid var(--print-table-border) !important;
+    padding: 0.25rem 0.4rem !important;
+}
+
+.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td {
+    background-color: var(--print-table-selected) !important;
+    color: white !important;
+}
+
+/* ==========================================================================
+   VIEW ORDERS TABLE STYLES (for print_lost_labels.html)
+   ========================================================================== */
+
+table.view-orders-table.scan-table {
+    margin: 0 !important;
+    border-spacing: 0 !important;
+    border-collapse: collapse !important;
+    width: 100% !important;
+    table-layout: fixed !important;
+    font-size: 11px !important;
+}
+
+table.view-orders-table.scan-table thead th {
+    height: 85px !important;
+    min-height: 85px !important;
+    max-height: 85px !important;
+    vertical-align: middle !important;
+    text-align: center !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
+    line-height: 1.3 !important;
+    padding: 6px 3px !important;
+    font-size: 11px !important;
+    background-color: var(--print-table-header-bg) !important;
+    color: var(--print-table-header-text) !important;
+    font-weight: bold !important;
+    text-transform: none !important;
+    letter-spacing: 0 !important;
+    overflow: visible !important;
+    box-sizing: border-box !important;
+    border: 1px solid var(--print-table-border) !important;
+    text-overflow: clip !important;
+    position: relative !important;
+}
+
+table.view-orders-table.scan-table tbody td {
+    padding: 4px 2px !important;
+    font-size: 10px !important;
+    text-align: center !important;
+    border: 1px solid var(--print-table-border) !important;
+    background-color: var(--print-table-body-bg) !important;
+    color: var(--print-table-body-text) !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    vertical-align: middle !important;
+}
+
+/* Column width definitions for view orders table */
+table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; }
+table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; }
+table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; }
+table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; }
+table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; }
+table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; }
+table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; }
+table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; }
+table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; }
+table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; }
+table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; }
+table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; }
+table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; }
+table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; }
+table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; }
+
+table.view-orders-table.scan-table tbody tr:hover td {
+    background-color: var(--print-table-hover) !important;
+}
+
+table.view-orders-table.scan-table tbody tr.selected td {
+    background-color: var(--print-table-selected) !important;
+    color: white !important;
+}
+
+/* Remove unwanted spacing */
+.report-table-card > * {
+    margin-top: 0 !important;
+}
+
+.report-table-container {
+    margin-top: 0 !important;
+}
+
+/* ==========================================================================
+   PRINT MODULE LAYOUT STYLES
+   ========================================================================== */
+
+/* Scan container layout */
+.scan-container {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    width: 100%;
+    align-items: flex-start;
+}
+
+/* Label preview card styling */
+.card.scan-form-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 700px;
+    width: 330px;
+    flex-shrink: 0;
+    position: relative;
+    padding: 15px;
+}
+
+/* Data preview card styling */
+.card.scan-table-card {
+    min-height: 700px;
+    width: calc(100% - 350px);
+    margin: 0;
+}
+
+/* View Orders and Upload Orders page specific layout - 25/75 split */
+.card.report-form-card,
+.card.scan-form-card {
+    min-height: 700px;
+    width: 25%;
+    flex-shrink: 0;
+    padding: 15px;
+    margin-bottom: 0; /* Remove bottom margin for horizontal layout */
+}
+
+.card.report-table-card,
+.card.scan-table-card {
+    min-height: 700px;
+    width: 75%;
+    margin: 0;
+    padding: 15px;
+}
+
+/* Upload Orders specific table styling */
+.card.scan-table-card table {
+    margin-bottom: 0;
+}
+
+/* Ensure proper scroll behavior for upload preview */
+.card.scan-table-card[style*="overflow-y: auto"] {
+    /* Maintain scroll functionality while keeping consistent height */
+    max-height: 700px;
+}
+
+/* Label view title */
+.label-view-title {
+    width: 100%;
+    text-align: center;
+    padding: 0 0 15px 0;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 0.5px;
+}
+
+/* ==========================================================================
+   SEARCH AND FORM STYLES
+   ========================================================================== */
+
+/* Search card styling */
+.search-card {
+    margin-bottom: 20px;
+    padding: 20px;
+}
+
+.search-field {
+    width: 100%;
+    max-width: 400px;
+    padding: 8px;
+    font-size: 14px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.quantity-field {
+    width: 100px;
+    padding: 8px;
+    font-size: 14px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.search-result-table {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+/* ==========================================================================
+   BUTTON STYLES
+   ========================================================================== */
+
+.print-btn {
+    background-color: #28a745;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.print-btn:hover {
+    background-color: #218838;
+}
+
+.print-btn:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
+
+/* ==========================================================================
+   REPORT TABLE CONTAINER STYLES
+   ========================================================================== */
+
+.report-table-card h3 {
+    margin: 0 0 15px 0 !important;
+    padding: 0 !important;
+}
+
+.report-table-card {
+    padding: 15px !important;
+}
+
+/* ==========================================================================
+   PRINT MODULE SPECIFIC LAYOUT ADJUSTMENTS
+   ========================================================================== */
+
+/* For print_lost_labels.html - Two-column layout */
+.scan-container.lost-labels {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+}
+
+.scan-container.lost-labels .search-card {
+    width: 100%;
+    max-height: 100px;
+    min-height: 70px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 24px;
+}
+
+.scan-container.lost-labels .row-container {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    width: 100%;
+    align-items: flex-start;
+}
+
+/* ==========================================================================
+   PRINT OPTIONS STYLES
+   ========================================================================== */
+
+/* Print method selection */
+.print-method-container {
+    margin-bottom: 15px;
+}
+
+.print-method-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 8px;
+}
+
+.form-check {
+    margin-bottom: 6px;
+}
+
+.form-check-label {
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+/* Printer selection styling */
+#qztray-printer-selection {
+    margin-bottom: 10px;
+}
+
+#qztray-printer-selection label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #495057;
+    margin-bottom: 3px;
+    display: block;
+}
+
+#qztray-printer-select {
+    font-size: 11px;
+    padding: 3px 6px;
+}
+
+/* Print button styling */
+#print-label-btn {
+    font-size: 13px;
+    padding: 8px 24px;
+    border-radius: 5px;
+    font-weight: 600;
+}
+
+/* QZ Tray info section */
+#qztray-info {
+    width: 100%;
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #e9ecef;
+}
+
+#qztray-info .info-box {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    padding: 10px;
+    text-align: center;
+}
+
+#qztray-info .info-text {
+    font-size: 10px;
+    color: #495057;
+    margin-bottom: 8px;
+}
+
+#qztray-info .download-link {
+    font-size: 10px;
+    padding: 4px 16px;
+}
+
+/* ==========================================================================
+   BADGE AND STATUS STYLES
+   ========================================================================== */
+
+.badge {
+    font-size: 9px;
+    padding: 2px 6px;
+}
+
+.badge-success {
+    background-color: #28a745;
+    color: white;
+}
+
+.badge-danger {
+    background-color: #dc3545;
+    color: white;
+}
+
+.badge-warning {
+    background-color: #ffc107;
+    color: #212529;
+}
+
+/* Status indicators */
+#qztray-status {
+    font-size: 9px;
+    padding: 2px 6px;
+}
+
+/* ==========================================================================
+   RESPONSIVE DESIGN
+   ========================================================================== */
+
+@media (max-width: 1200px) {
+    .scan-container {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .card.scan-form-card {
+        width: 100%;
+    }
+    
+    .card.scan-table-card {
+        width: 100%;
+    }
+    
+    /* View Orders and Upload Orders page responsive */
+    .card.report-form-card,
+    .card.scan-form-card {
+        width: 100%;
+        margin-bottom: 24px; /* Restore bottom margin for stacked layout */
+    }
+    
+    .card.report-table-card,
+    .card.scan-table-card {
+        width: 100%;
+    }
+}
+
+@media (max-width: 992px) and (min-width: 769px) {
+    /* Tablet view - adjust proportions for better fit */
+    .card.report-form-card,
+    .card.scan-form-card {
+        width: 30%;
+    }
+    
+    .card.report-table-card,
+    .card.scan-table-card {
+        width: 70%;
+    }
+}
+
+@media (max-width: 768px) {
+    .label-view-title {
+        font-size: 16px;
+    }
+    
+    #label-preview {
+        width: 280px;
+        height: 400px;
+    }
+    
+    #label-content {
+        width: 200px;
+        height: 290px;
+    }
+    
+    .search-field {
+        max-width: 300px;
+    }
+}
+
+/* ==========================================================================
+   THEME SUPPORT (Light/Dark Mode)
+   ========================================================================== */
+
+/* CSS Custom Properties for Theme Support */
+:root {
+    /* Light mode colors (default) */
+    --print-table-header-bg: #e9ecef;
+    --print-table-header-text: #000;
+    --print-table-body-bg: #fff;
+    --print-table-body-text: #000;
+    --print-table-border: #ddd;
+    --print-table-hover: #f8f9fa;
+    --print-table-selected: #007bff;
+    --print-card-bg: #fff;
+    --print-card-border: #ddd;
+    --print-search-field-bg: #fff;
+    --print-search-field-text: #000;
+    --print-search-field-border: #ddd;
+}
+
+/* Light mode theme variables */
+body.light-mode {
+    --print-table-header-bg: #e9ecef;
+    --print-table-header-text: #000;
+    --print-table-body-bg: #fff;
+    --print-table-body-text: #000;
+    --print-table-border: #ddd;
+    --print-table-hover: #f8f9fa;
+    --print-table-selected: #007bff;
+    --print-card-bg: #fff;
+    --print-card-border: #ddd;
+    --print-search-field-bg: #fff;
+    --print-search-field-text: #000;
+    --print-search-field-border: #ddd;
+}
+
+/* Dark mode theme variables */
+body.dark-mode {
+    --print-table-header-bg: #2a3441;
+    --print-table-header-text: #ffffff;
+    --print-table-body-bg: #2a3441;
+    --print-table-body-text: #ffffff;
+    --print-table-border: #495057;
+    --print-table-hover: #3a4451;
+    --print-table-selected: #007bff;
+    --print-card-bg: #2a2a2a;
+    --print-card-border: #555;
+    --print-search-field-bg: #333;
+    --print-search-field-text: #fff;
+    --print-search-field-border: #555;
+}
+
+/* Label Preview Theme Support */
+body.light-mode #label-preview {
+    background: #fafafa;
+    border: none;
+}
+
+body.light-mode #label-content {
+    background: white;
+    border: 1px solid #ddd;
+}
+
+body.light-mode #barcode-frame,
+body.light-mode #vertical-barcode-frame {
+    background: #ffffff;
+    border: 1px solid var(--print-card-border);
+}
+
+body.dark-mode #label-preview {
+    background: #2a2a2a;
+    border: none;
+}
+
+body.dark-mode #label-content {
+    background: #f8f9fa;
+    border: 1px solid #555;
+}
+
+body.dark-mode #barcode-frame,
+body.dark-mode #vertical-barcode-frame {
+    background: #ffffff;
+    border: 1px solid var(--print-card-border);
+}
+
+/* Card Theme Support */
+body.dark-mode .search-card,
+body.dark-mode .card {
+    background-color: var(--print-card-bg);
+    border: 1px solid var(--print-card-border);
+    color: var(--print-table-body-text);
+}
+
+/* Search Field Theme Support */
+body.dark-mode .search-field,
+body.dark-mode .quantity-field {
+    background-color: var(--print-search-field-bg);
+    border: 1px solid var(--print-search-field-border);
+    color: var(--print-search-field-text);
+}
+
+/* Button Theme Support */
+body.dark-mode .print-btn {
+    background-color: #28a745;
+}
+
+body.dark-mode .print-btn:hover {
+    background-color: #218838;
+}
+
+/* ==========================================================================
+   UTILITY CLASSES
+   ========================================================================== */
+
+.text-center {
+    text-align: center;
+}
+
+.font-weight-bold {
+    font-weight: bold;
+}
+
+.margin-bottom-15 {
+    margin-bottom: 15px;
+}
+
+.padding-10 {
+    padding: 10px;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ==========================================================================
+   DEBUG STYLES (can be removed in production)
+   ========================================================================== */
+
+.debug-border {
+    border: 2px solid red !important;
+}
+
+.debug-bg {
+    background-color: rgba(255, 0, 0, 0.1) !important;
+}
+
+/* ==========================================================================
+   PRINT MODULE SPECIFIC STYLES
+   ========================================================================== */
+
+/* Label preview container styling for print_module page */
+.scan-form-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 700px;
+    position: relative;
+    padding: 15px;
+}
+
+/* Label preview section */
+#label-preview {
+    border: 1px solid #ddd;
+    padding: 10px;
+    position: relative;
+    background: #fafafa;
+    width: 100%;
+    max-width: 301px;
+    height: 434.7px;
+    margin: 0 auto;
+}
+
+/* Ensure label content scales properly in responsive layout */
+@media (max-width: 1024px) {
+    #label-preview {
+        max-width: 280px;
+        height: 404px;
+    }
+    
+    .scan-form-card {
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    #label-preview {
+        max-width: 100%;
+        height: 350px;
+    }
+    
+    .scan-form-card {
+        padding: 8px;
+    }
+}
+
+/* ==========================================================================
+   FORM CONTROLS FIX
+   ========================================================================== */
+
+/* Fix radio button styling to prevent oval display issues */
+.form-check-input[type="radio"] {
+    width: 1rem !important;
+    height: 1rem !important;
+    margin-top: 0.25rem !important;
+    border: 1px solid #dee2e6 !important;
+    border-radius: 50% !important;
+    background-color: #fff !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+}
+
+.form-check-input[type="radio"]:checked {
+    background-color: #007bff !important;
+    border-color: #007bff !important;
+    background-image: radial-gradient(circle, #fff 30%, transparent 32%) !important;
+}
+
+.form-check-input[type="radio"]:focus {
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+    outline: none !important;
+}
+
+.form-check {
+    display: flex !important;
+    align-items: flex-start !important;
+    margin-bottom: 0.5rem !important;
+}
+
+.form-check-label {
+    margin-left: 0.5rem !important;
+    cursor: pointer !important;
+}

py_app/app/templates/base.html

@@ -12,6 +12,10 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
     <!-- Legacy CSS for backward compatibility (temporarily) -->
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <!-- Print Module CSS for Labels/Printing pages -->
+    {% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/print_module.css') }}">
+    {% endif %}
     <!-- Page-specific CSS -->
     {% block extra_css %}{% endblock %}
     {% block head %}{% endblock %}
@@ -43,6 +47,9 @@
                     {% if request.endpoint.startswith('daily_mirror') %}
                         <a href="{{ url_for('daily_mirror.daily_mirror_main_route') }}" class="btn btn-info btn-sm ms-2"> <i class="fas fa-home"></i> Daily Mirror Main</a>
                     {% endif %}
+                    {% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %}
+                        <a href="{{ url_for('main.etichete') }}" class="btn btn-success btn-sm ms-2"> <i class="fas fa-tags"></i> Labels Module</a>
+                    {% endif %}
                     <a href="{{ url_for('main.dashboard') }}" class="btn go-to-dashboard-btn ms-2">Go to Dashboard</a>
                     {% if 'user' in session %}
                         <span class="user-info ms-2">You are logged in as {{ session['user'] }}</span>

py_app/app/templates/daily_mirror_tune_orders.html

@@ -4,6 +4,47 @@
 
 {% block extra_css %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/daily_mirror_tune.css') }}">
+<style>
+/* Force modal width - using viewport width for maximum responsiveness */
+.modal#editModal .modal-dialog {
+    max-width: 95vw !important;
+    width: 95vw !important;
+    margin: 1.75rem auto !important;
+}
+
+.modal#editModal .modal-dialog.modal-xl {
+    max-width: 95vw !important;
+    width: 95vw !important;
+}
+
+/* Override ALL Bootstrap media queries */
+@media (min-width: 576px) {
+    .modal#editModal .modal-dialog {
+        max-width: 95vw !important;
+        width: 95vw !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .modal#editModal .modal-dialog {
+        max-width: 95vw !important;
+        width: 95vw !important;
+    }
+}
+
+@media (min-width: 1200px) {
+    .modal#editModal .modal-dialog,
+    .modal#editModal .modal-dialog.modal-xl {
+        max-width: 95vw !important;
+        width: 95vw !important;
+    }
+}
+
+/* Ensure pointer events work */
+.modal#editModal .modal-dialog {
+    pointer-events: auto !important;
+}
+</style>
 {% endblock %}
 
 {% block content %}
@@ -102,9 +143,9 @@
                         <table class="table table-striped table-hover" id="ordersTable">
                             <thead class="table-dark">
                                 <tr>
-                                    <th>Order ID</th>
+                                    <th>Order Line</th>
                                     <th>Customer</th>
-                                    <th>Client Order</th>
+                                    <th>Client Order Line</th>
                                     <th>Article Code</th>
                                     <th>Description</th>
                                     <th>Quantity</th>
@@ -149,8 +190,8 @@
 </div>
 
 <!-- Edit Modal -->
-<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable" style="max-width: 95vw !important; width: 95vw !important;">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="editModalLabel">Edit Customer Order</h5>
@@ -161,91 +202,148 @@
                     <input type="hidden" id="editRecordId">
                     
                     <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editOrderId" class="form-label">Order ID</label>
-                            <input type="text" class="form-control" id="editOrderId" readonly>
+                        <!-- Column 1: Order Information -->
+                        <div class="col-md-4">
+                            
+                            <div class="mb-3">
+                                <label for="editOrderLine" class="form-label">Order Line</label>
+                                <input type="text" class="form-control" id="editOrderLine" readonly>
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editOrderId" class="form-label">Order ID</label>
+                                <input type="text" class="form-control" id="editOrderId">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editLineNumber" class="form-label">Line Number</label>
+                                <input type="text" class="form-control" id="editLineNumber">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editClientOrderLine" class="form-label">Client Order Line</label>
+                                <input type="text" class="form-control" id="editClientOrderLine" readonly>
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editOrderDate" class="form-label">Order Date</label>
+                                <input type="date" class="form-control" id="editOrderDate">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editDeliveryDate" class="form-label">Delivery Date</label>
+                                <input type="date" class="form-control" id="editDeliveryDate">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editOrderStatus" class="form-label">Order Status</label>
+                                <select class="form-control" id="editOrderStatus">
+                                    <option value="PENDING">Pending</option>
+                                    <option value="CONFIRMED">Confirmed</option>
+                                    <option value="Confirmat">Confirmat</option>
+                                    <option value="IN_PROGRESS">In Progress</option>
+                                    <option value="FINISHED">Finished</option>
+                                    <option value="DELIVERED">Delivered</option>
+                                    <option value="CANCELLED">Cancelled</option>
+                                </select>
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editPriority" class="form-label">Priority</label>
+                                <select class="form-control" id="editPriority">
+                                    <option value="LOW">Low</option>
+                                    <option value="NORMAL">Normal</option>
+                                    <option value="HIGH">High</option>
+                                    <option value="URGENT">Urgent</option>
+                                </select>
+                            </div>
                         </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editCustomerCode" class="form-label">Customer Code</label>
-                            <input type="text" class="form-control" id="editCustomerCode">
+                        
+                        <!-- Column 2: Customer and Article Information -->
+                        <div class="col-md-4">
+                            
+                            <div class="mb-3">
+                                <label for="editCustomerCode" class="form-label">Customer Code</label>
+                                <input type="text" class="form-control" id="editCustomerCode">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editCustomerName" class="form-label">Customer Name</label>
+                                <input type="text" class="form-control" id="editCustomerName">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editArticleCode" class="form-label">Article Code</label>
+                                <input type="text" class="form-control" id="editArticleCode">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editDescription" class="form-label">Article Description</label>
+                                <textarea class="form-control" id="editDescription" rows="3"></textarea>
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editQuantity" class="form-label">Quantity Requested</label>
+                                <input type="number" class="form-control" id="editQuantity">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editBalance" class="form-label">Balance</label>
+                                <input type="number" step="0.01" class="form-control" id="editBalance">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editUnitOfMeasure" class="form-label">Unit of Measure</label>
+                                <input type="text" class="form-control" id="editUnitOfMeasure">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editArticleStatus" class="form-label">Article Status</label>
+                                <input type="text" class="form-control" id="editArticleStatus">
+                            </div>
                         </div>
-                    </div>
-                    
-                    <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editCustomerName" class="form-label">Customer Name</label>
-                            <input type="text" class="form-control" id="editCustomerName">
+                        
+                        <!-- Column 3: Production Information -->
+                        <div class="col-md-4">
+                            
+                            <div class="mb-3">
+                                <label for="editProductGroup" class="form-label">Product Group</label>
+                                <input type="text" class="form-control" id="editProductGroup">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editModel" class="form-label">Model</label>
+                                <input type="text" class="form-control" id="editModel">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editProductionOrder" class="form-label">Production Order</label>
+                                <input type="text" class="form-control" id="editProductionOrder">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editProductionStatus" class="form-label">Production Status</label>
+                                <input type="text" class="form-control" id="editProductionStatus">
+                            </div>
+                            
+                            <div class="mb-3">
+                                <label for="editClosed" class="form-label">Closed</label>
+                                <input type="text" class="form-control" id="editClosed">
+                            </div>
                         </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editClientOrder" class="form-label">Client Order</label>
-                            <input type="text" class="form-control" id="editClientOrder">
-                        </div>
-                    </div>
-                    
-                    <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editArticleCode" class="form-label">Article Code</label>
-                            <input type="text" class="form-control" id="editArticleCode">
-                        </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editQuantity" class="form-label">Quantity</label>
-                            <input type="number" class="form-control" id="editQuantity">
-                        </div>
-                    </div>
-                    
-                    <div class="mb-3">
-                        <label for="editDescription" class="form-label">Article Description</label>
-                        <textarea class="form-control" id="editDescription" rows="2"></textarea>
-                    </div>
-                    
-                    <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editDeliveryDate" class="form-label">Delivery Date</label>
-                            <input type="date" class="form-control" id="editDeliveryDate">
-                        </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editOrderStatus" class="form-label">Order Status</label>
-                            <select class="form-control" id="editOrderStatus">
-                                <option value="PENDING">Pending</option>
-                                <option value="CONFIRMED">Confirmed</option>
-                                <option value="Confirmat">Confirmat</option>
-                                <option value="IN_PROGRESS">In Progress</option>
-                                <option value="FINISHED">Finished</option>
-                                <option value="DELIVERED">Delivered</option>
-                                <option value="CANCELLED">Cancelled</option>
-                            </select>
-                        </div>
-                    </div>
-                    
-                    <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editPriority" class="form-label">Priority</label>
-                            <select class="form-control" id="editPriority">
-                                <option value="LOW">Low</option>
-                                <option value="NORMAL">Normal</option>
-                                <option value="HIGH">High</option>
-                                <option value="URGENT">Urgent</option>
-                            </select>
-                        </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editProductGroup" class="form-label">Product Group</label>
-                            <input type="text" class="form-control" id="editProductGroup">
-                        </div>
-                    </div>
-                    
-                    <div class="mb-3">
-                        <label for="editOrderDate" class="form-label">Order Date</label>
-                        <input type="date" class="form-control" id="editOrderDate">
                     </div>
                 </form>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-                    <i class="fas fa-times"></i> Cancel
-                </button>
-                <button type="button" class="btn btn-primary" onclick="saveRecord()">
-                    <i class="fas fa-save"></i> Save Changes
+            <div class="modal-footer d-flex justify-content-between">
+                <button type="button" class="btn btn-danger" onclick="deleteRecord()" style="min-width: 150px;">
+                    <i class="fas fa-trash"></i> Delete Record
                 </button>
+                <div>
+                    <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal" style="min-width: 100px;">Cancel</button>
+                    <button type="button" class="btn btn-primary" onclick="saveRecord()" style="min-width: 150px;">
+                        <i class="fas fa-save"></i> Save Changes
+                    </button>
+                </div>
             </div>
         </div>
     </div>
@@ -335,12 +433,12 @@ function displayOrdersData(data) {
     data.forEach(record => {
         const row = document.createElement('tr');
         row.innerHTML = `
-            <td><strong>${record.order_id}</strong></td>
+            <td><strong>${record.order_line}</strong></td>
             <td>
                 <small class="text-muted d-block">${record.customer_code}</small>
                 ${record.customer_name}
             </td>
-            <td>${record.client_order || '-'}</td>
+            <td>${record.client_order_line || '-'}</td>
             <td><code>${record.article_code}</code></td>
             <td><small>${record.article_description || '-'}</small></td>
             <td><span class="badge bg-info">${record.quantity_requested}</span></td>
@@ -448,8 +546,43 @@ function editRecord(recordId) {
                 recordData = data.data.find(record => record.id === recordId);
                 if (recordData) {
                     populateEditModal(recordData);
-                    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
-                    editModal.show();
+                    
+                    // Get modal elements
+                    const modalElement = document.getElementById('editModal');
+                    const modalDialog = modalElement.querySelector('.modal-dialog');
+                    
+                    // Remove any existing modal instances to prevent conflicts
+                    const existingModal = bootstrap.Modal.getInstance(modalElement);
+                    if (existingModal) {
+                        existingModal.dispose();
+                    }
+                    
+                    const modal = new bootstrap.Modal(modalElement, {
+                        backdrop: true,
+                        keyboard: true,
+                        focus: true
+                    });
+                    
+                    // Show the modal first
+                    modal.show();
+                    
+                    // Force the modal dialog width AFTER modal is shown - using 95% of viewport width
+                    setTimeout(() => {
+                        if (modalDialog) {
+                            console.log('Applying width after modal shown');
+                            modalDialog.style.setProperty('max-width', '95vw', 'important');
+                            modalDialog.style.setProperty('width', '95vw', 'important');
+                            modalDialog.style.setProperty('margin', '1.75rem auto', 'important');
+                            
+                            // Also apply to modal content for good measure
+                            const modalContent = modalDialog.querySelector('.modal-content');
+                            if (modalContent) {
+                                modalContent.style.setProperty('width', '100%', 'important');
+                            }
+                            
+                            console.log('Modal dialog computed width:', window.getComputedStyle(modalDialog).width);
+                        }
+                    }, 100);
                 }
             }
         })
@@ -461,34 +594,53 @@ function editRecord(recordId) {
 
 function populateEditModal(record) {
     document.getElementById('editRecordId').value = record.id;
+    document.getElementById('editOrderLine').value = record.order_line;
     document.getElementById('editOrderId').value = record.order_id;
+    document.getElementById('editLineNumber').value = record.line_number || '';
     document.getElementById('editCustomerCode').value = record.customer_code;
     document.getElementById('editCustomerName').value = record.customer_name;
-    document.getElementById('editClientOrder').value = record.client_order || '';
+    document.getElementById('editClientOrderLine').value = record.client_order_line || '';
     document.getElementById('editArticleCode').value = record.article_code;
     document.getElementById('editDescription').value = record.article_description || '';
     document.getElementById('editQuantity').value = record.quantity_requested;
+    document.getElementById('editBalance').value = record.balance || '';
+    document.getElementById('editUnitOfMeasure').value = record.unit_of_measure || '';
     document.getElementById('editDeliveryDate').value = record.delivery_date;
+    document.getElementById('editOrderDate').value = record.order_date;
     document.getElementById('editOrderStatus').value = record.order_status;
+    document.getElementById('editArticleStatus').value = record.article_status || '';
     document.getElementById('editPriority').value = record.priority || 'NORMAL';
     document.getElementById('editProductGroup').value = record.product_group || '';
-    document.getElementById('editOrderDate').value = record.order_date;
+    document.getElementById('editProductionOrder').value = record.production_order || '';
+    document.getElementById('editProductionStatus').value = record.production_status || '';
+    document.getElementById('editModel').value = record.model || '';
+    document.getElementById('editClosed').value = record.closed || '';
 }
 
 function saveRecord() {
     const recordId = document.getElementById('editRecordId').value;
     const data = {
+        order_line: document.getElementById('editOrderLine').value,
+        order_id: document.getElementById('editOrderId').value,
+        line_number: document.getElementById('editLineNumber').value,
         customer_code: document.getElementById('editCustomerCode').value,
         customer_name: document.getElementById('editCustomerName').value,
-        client_order: document.getElementById('editClientOrder').value,
+        client_order_line: document.getElementById('editClientOrderLine').value,
         article_code: document.getElementById('editArticleCode').value,
         article_description: document.getElementById('editDescription').value,
         quantity_requested: parseInt(document.getElementById('editQuantity').value) || 0,
+        balance: parseFloat(document.getElementById('editBalance').value) || null,
+        unit_of_measure: document.getElementById('editUnitOfMeasure').value,
         delivery_date: document.getElementById('editDeliveryDate').value,
+        order_date: document.getElementById('editOrderDate').value,
         order_status: document.getElementById('editOrderStatus').value,
+        article_status: document.getElementById('editArticleStatus').value,
         priority: document.getElementById('editPriority').value,
         product_group: document.getElementById('editProductGroup').value,
-        order_date: document.getElementById('editOrderDate').value
+        production_order: document.getElementById('editProductionOrder').value,
+        production_status: document.getElementById('editProductionStatus').value,
+        model: document.getElementById('editModel').value,
+        closed: document.getElementById('editClosed').value
     };
     
     fetch(`/daily_mirror/api/tune/orders_data/${recordId}`, {
@@ -520,6 +672,39 @@ function saveRecord() {
     });
 }
 
+function deleteRecord() {
+    const recordId = document.getElementById('editRecordId').value;
+    const orderLine = document.getElementById('editOrderLine').value;
+    
+    if (!confirm(`⚠️ Are you sure you want to delete order line "${orderLine}"?\n\nThis action cannot be undone.`)) {
+        return;
+    }
+    
+    fetch(`/daily_mirror/api/tune/orders_data/${recordId}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            throw new Error(data.error);
+        }
+        
+        // Close modal and reload data
+        const modal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
+        modal.hide();
+        
+        alert('Record deleted successfully!');
+        loadOrdersData(currentPage);
+    })
+    .catch(error => {
+        console.error('Error deleting record:', error);
+        alert('Error deleting record: ' + error.message);
+    });
+}
+
 function saveAllChanges() {
     alert('Save All Changes functionality will be implemented for bulk operations.');
 }

py_app/app/templates/main_page_etichete.html

@@ -25,7 +25,7 @@
             <p>Access the print module to print labels.</p>
             <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                 <a href="{{ url_for('main.print_module') }}" class="btn">Launch Printing Module</a>
-                <a href="{{ url_for('main.print_module') }}" class="btn">Launch lost labels printing module</a>
+                <a href="{{ url_for('main.print_lost_labels') }}" class="btn">Launch lost labels printing module</a>
             </div>
         </div>
 

py_app/app/templates/print_lost_labels.html

@@ -1,170 +1,26 @@
 {% extends "base.html" %}
 
 {% block head %}
-<style>
-/* TABLE STYLING - Same as view_orders.html */
-table.view-orders-table.scan-table {
-    margin: 0 !important;
-    border-spacing: 0 !important;
-    border-collapse: collapse !important;
-    width: 100% !important;
-    table-layout: fixed !important;
-    font-size: 11px !important;
-}
-
-table.view-orders-table.scan-table thead th {
-    height: 85px !important;
-    min-height: 85px !important;
-    max-height: 85px !important;
-    vertical-align: middle !important;
-    text-align: center !important;
-    white-space: normal !important;
-    word-wrap: break-word !important;
-    line-height: 1.3 !important;
-    padding: 6px 3px !important;
-    font-size: 11px !important;
-    background-color: #e9ecef !important;
-    font-weight: bold !important;
-    text-transform: none !important;
-    letter-spacing: 0 !important;
-    overflow: visible !important;
-    box-sizing: border-box !important;
-    border: 1px solid #ddd !important;
-    text-overflow: clip !important;
-    position: relative !important;
-}
-
-table.view-orders-table.scan-table tbody td {
-    padding: 4px 2px !important;
-    font-size: 10px !important;
-    text-align: center !important;
-    border: 1px solid #ddd !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    vertical-align: middle !important;
-}
-
-table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; }
-table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; }
-table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; }
-table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; }
-table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; }
-table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; }
-table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; }
-table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; }
-table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; }
-table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; }
-table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; }
-
-table.view-orders-table.scan-table tbody tr:hover td {
-    background-color: #f8f9fa !important;
-}
-
-table.view-orders-table.scan-table tbody tr.selected td {
-    background-color: #007bff !important;
-    color: white !important;
-}
-
-.report-table-card h3 {
-    margin: 0 0 15px 0 !important;
-    padding: 0 !important;
-}
-
-.report-table-card {
-    padding: 15px !important;
-}
-
-/* Search card styling */
-.search-card {
-    margin-bottom: 20px;
-    padding: 20px;
-}
-
-.search-field {
-    width: 100%;
-    max-width: 400px;
-    padding: 8px;
-    font-size: 14px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.quantity-field {
-    width: 100px;
-    padding: 8px;
-    font-size: 14px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.search-result-table {
-    margin-top: 15px;
-    margin-bottom: 15px;
-}
-
-.print-btn {
-    background-color: #28a745;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-}
-
-.print-btn:hover {
-    background-color: #218838;
-}
-
-.print-btn:disabled {
-    background-color: #6c757d;
-    cursor: not-allowed;
-}
-
-/* Force barcode SVG elements to be black */
-#barcode-display rect,
-#vertical-barcode-display rect {
-    fill: #000000 !important;
-    stroke: #000000 !important;
-}
-
-#barcode-display path,
-#vertical-barcode-display path {
-    fill: #000000 !important;
-    stroke: #000000 !important;
-}
-
-/* Ensure barcode frames have proper contrast */
-#barcode-frame,
-#vertical-barcode-frame {
-    background: #ffffff !important;
-    border: 1px solid #ddd;
-}
-</style>
+<!-- Print Module CSS is now loaded via base.html for all printing pages -->
 {% endblock %}
 
 {% block content %}
 
 
 <!-- ROW 1: Search Card (full width) -->
-<div class="scan-container" style="display: flex; flex-direction: column; gap: 0; width: 100%;">
-    <div class="card search-card" style="width: 100%; max-height: 100px; min-height: 70px; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 24px;">
-        <div style="flex: 1 1 300px; min-width: 250px;">
-            <label for="search-input" style="font-weight: bold;">Search Order (CP...):</label>
-            <input type="text" id="search-input" class="search-field" placeholder="Type to search..." oninput="searchOrder()" style="margin-left: 10px; max-width: 250px;">
-            <button id="fetch-matching-btn" class="btn btn-secondary" style="margin-left: 10px; padding: 7px 16px; font-size: 14px;" onclick="fetchMatchingOrders()">Find All</button>
+<div class="scan-container lost-labels">
+    <div class="card search-card">
+        <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
+            <label for="search-input" style="font-weight: bold; white-space: nowrap;">Search Order (CP...):</label>
+            <input type="text" id="search-input" class="search-field" placeholder="Type to search..." oninput="searchOrder()" style="flex: 1; min-width: 200px; max-width: 300px;">
+            <button id="fetch-matching-btn" class="btn btn-secondary" style="padding: 7px 16px; font-size: 14px; white-space: nowrap;" onclick="fetchMatchingOrders()">Find All</button>
         </div>
     </div>
 
-    <!-- ROW 2: Two cards side by side -->
-    <div style="display: flex; flex-direction: row; gap: 24px; width: 100%; align-items: flex-start;">
-        <!-- Print Preview Card (left, with all print_module.html controls) -->
-        <div class="card scan-form-card" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; width: 330px; flex-shrink: 0; position: relative; padding: 15px;">
+    <!-- ROW 2: Two cards side by side (25% / 75% layout) -->
+    <div class="row-container">
+        <!-- Print Preview Card (left, 25% width) -->
+        <div class="card scan-form-card" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; flex: 0 0 25%; position: relative; padding: 15px;">
             <div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
             <!-- Pairing Keys Section -->
             <div style="width: 100%; text-align: center; margin-bottom: 15px;">
@@ -175,9 +31,9 @@ table.view-orders-table.scan-table tbody tr.selected td {
                 <a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
             </div>
             <!-- Label Preview Section -->
-            <div id="label-preview" style="border: 1px solid #ddd; padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
+            <div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
                 <!-- ...label content rectangle and barcode frames as in print_module.html... -->
-                <div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; border: 2px solid #333; background: white;">
+                <div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; background: white;">
                     <div style="position: absolute; top: 0; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; color: #000; z-index: 10;">INNOFA ROMANIA SRL</div>
                     <div id="customer-name-row" style="position: absolute; top: 32.13px; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #000;"></div>
                     <div style="position: absolute; top: 32.13px; left: 0; right: 0; height: 1px; background: #999;"></div>
@@ -204,13 +60,13 @@ table.view-orders-table.scan-table tbody tr.selected td {
                     <div style="position: absolute; top: 289.17px; left: 0; width: 90.96px; height: 32.13px; display: flex; align-items: center; padding-left: 5px; font-size: 10px; color: #000;">Prod. order</div>
                     <div id="prod-order-value" style="position: absolute; top: 289.17px; left: 90.96px; width: 136.44px; height: 32.13px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #000;"></div>
                 </div>
-                <div id="barcode-frame" style="position: absolute; top: 395px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 270px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center;">
-                    <svg id="barcode-display" style="width: 100%; height: 40px;"></svg>
-                    <div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold;"></div>
+                <div id="barcode-frame">
+                    <svg id="barcode-display"></svg>
+                    <div id="barcode-text"></div>
                 </div>
-                <div id="vertical-barcode-frame" style="position: absolute; top: 50px; left: 270px; width: 321.3px; height: 40px; background: white; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); transform-origin: left center;">
-                    <svg id="vertical-barcode-display" style="width: 100%; height: 35px;"></svg>
-                    <div id="vertical-barcode-text" style="position: absolute; bottom: -15px; font-size: 7px; font-family: 'Courier New', monospace; text-align: center; font-weight: bold; width: 100%;"></div>
+                <div id="vertical-barcode-frame">
+                    <svg id="vertical-barcode-display"></svg>
+                    <div id="vertical-barcode-text"></div>
                 </div>
             </div>
             <!-- Print Options (copied from print_module.html) -->
@@ -220,17 +76,22 @@ table.view-orders-table.scan-table tbody tr.selected td {
                     <div id="print-method-label" style="font-size: 12px; font-weight: 600; color: #495057; margin-bottom: 8px;">
                         📄 Print Method:
                     </div>
-                    <div class="form-check" style="margin-bottom: 6px;">
-                        <input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
-                        <label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
-                            <strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
-                        </label>
-                    </div>
-                    <div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
-                        <input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
-                        <label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
-                            <strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
-                        </label>
+                    
+                    <!-- Print method options in horizontal layout -->
+                    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+                        <div class="form-check" style="margin-bottom: 6px;">
+                            <input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
+                            <label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
+                                <strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
+                            </label>
+                        </div>
+                        
+                        <div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
+                            <input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
+                            <label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
+                                <strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
+                            </label>
+                        </div>
                     </div>
                 </div>
                 <!-- Printer Selection for QZ Tray (Compact) -->
@@ -277,10 +138,9 @@ table.view-orders-table.scan-table tbody tr.selected td {
                 </div>
             </div>
         </div>
-        <!-- Orders Table Card (right, with load button and notification system) -->
-        <div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
+        <!-- Orders Table Card (right, 75% width) -->
+        <div class="card scan-table-card" style="min-height: 700px; flex: 0 0 75%; margin: 0;">
             <h3>Data Preview</h3>
-            <button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
             <div class="report-table-container">
                 <table class="scan-table print-module-table">
                     <thead>

py_app/app/templates/print_module.html

@@ -1,57 +1,13 @@
 {% extends "base.html" %}
 
 {% block head %}
-<style>
-#label-preview {
-    background: #fafafa;
-    position: relative;
-    overflow: visible;
-}
-
-/* Enhanced table styling */
-.card.scan-table-card table.print-module-table.scan-table thead th {
-    border-bottom: 2px solid var(--app-border-color, #dee2e6) !important;
-    background-color: var(--app-table-header-bg, #2a3441) !important;
-    color: var(--app-text-color, #ffffff) !important;
-    padding: 0.25rem 0.4rem !important;
-    text-align: left !important;
-    font-weight: 600 !important;
-    font-size: 10px !important;
-    line-height: 1.2 !important;
-}
-
-.card.scan-table-card table.print-module-table.scan-table {
-    width: 100% !important;
-    border-collapse: collapse !important;
-    background-color: var(--app-card-bg, #2a3441) !important;
-}
-
-.card.scan-table-card table.print-module-table.scan-table tbody tr:hover td {
-    background-color: var(--app-hover-bg, #3a4451) !important;
-    cursor: pointer !important;
-}
-
-.card.scan-table-card table.print-module-table.scan-table tbody td {
-    background-color: var(--app-card-bg, #2a3441) !important;
-    color: var(--app-text-color, #ffffff) !important;
-    border: 1px solid var(--app-border-color, #495057) !important;
-    padding: 0.25rem 0.4rem !important;
-}
-
-.card.scan-table-card table.print-module-table.scan-table tbody tr.selected td {
-    background-color: #007bff !important;
-    color: white !important;
-}
-
-/* Print Progress Modal Styles */
-
-</style>
+<!-- Print Module CSS is now loaded via base.html for all printing pages -->
 {% endblock %}
 
 {% block content %}
-<div class="scan-container" style="display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-start;">
+<div class="scan-container">
     <!-- Label Preview Card -->
-    <div class="card scan-form-card" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 700px; width: 330px; flex-shrink: 0; position: relative; padding: 15px;">
+    <div class="card scan-form-card">
         <div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
         
         <!-- Pairing Keys Section - Only show dropdown if multiple keys exist -->
@@ -66,9 +22,9 @@
         </div>
         
         <!-- Label Preview Section -->
-        <div id="label-preview" style="border: 1px solid #ddd; padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
+        <div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
             <!-- Label content rectangle -->
-            <div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; border: 2px solid #333; background: white;">
+            <div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; background: white;">
                 <!-- Top row content: Company name -->
                 <div style="position: absolute; top: 0; left: 0; right: 0; height: 32.13px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; color: #000; z-index: 10;">
                     INNOFA ROMANIA SRL
@@ -150,9 +106,9 @@
             </div>
             
             <!-- Barcode Frame - positioned 10px below rectangle, centered, constrained to label width -->
-            <div id="barcode-frame" style="position: absolute; top: 395px; left: 50%; transform: translateX(-50%); width: 220px; max-width: 220px; height: 50px; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;">
+            <div id="barcode-frame">
                 <!-- Code 128 Barcode representation -->
-                <svg id="barcode-display" style="width: 100%; height: 40px; max-width: 220px;"></svg>
+                <svg id="barcode-display"></svg>
                 
                 <!-- Barcode text below the bars (hidden in preview) -->
                 <div id="barcode-text" style="font-size: 8px; font-family: 'Courier New', monospace; margin-top: 2px; text-align: center; font-weight: bold; display: none;">
@@ -161,9 +117,9 @@
             </div>
             
             <!-- Vertical Barcode Frame - positioned on the right side, rotated 90 degrees, spans the height of main rectangle -->
-            <div id="vertical-barcode-frame" style="position: absolute; top: 50px; left: 270px; width: 321.3px; height: 40px; background: white; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); transform-origin: left center;">
+            <div id="vertical-barcode-frame">
                 <!-- Vertical Code 128 Barcode representation -->
-                <svg id="vertical-barcode-display" style="width: 100%; height: 35px;"></svg>
+                <svg id="vertical-barcode-display"></svg>
                 
                 <!-- Vertical barcode text (hidden in preview) -->
                 <div id="vertical-barcode-text" style="position: absolute; bottom: -15px; font-size: 7px; font-family: 'Courier New', monospace; text-align: center; font-weight: bold; width: 100%; display: none;">
@@ -180,18 +136,21 @@
                     📄 Print Method:
                 </div>
                 
-                <div class="form-check" style="margin-bottom: 6px;">
-                    <input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
-                    <label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
-                        <strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
-                    </label>
-                </div>
-                
-                <div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
-                    <input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
-                    <label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
-                        <strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
-                    </label>
+                <!-- Print method options in horizontal layout -->
+                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+                    <div class="form-check" style="margin-bottom: 6px;">
+                        <input class="form-check-input" type="radio" name="printMethod" id="qzTrayPrint" value="qztray" checked>
+                        <label class="form-check-label" for="qzTrayPrint" style="font-size: 11px; line-height: 1.2;">
+                            <strong>🖨️ Direct Print</strong> <span id="qztray-status" class="badge badge-success" style="font-size: 9px; padding: 2px 6px;">Ready</span>
+                        </label>
+                    </div>
+                    
+                    <div class="form-check" id="pdf-option-container" style="display: none; margin-bottom: 6px;">
+                        <input class="form-check-input" type="radio" name="printMethod" id="pdfGenerate" value="pdf">
+                        <label class="form-check-label" for="pdfGenerate" style="font-size: 11px; line-height: 1.2;">
+                            <strong>📄 PDF Export</strong> <span class="text-muted" style="font-size: 10px;">(fallback)</span>
+                        </label>
+                    </div>
                 </div>
             </div>
             
@@ -232,7 +191,7 @@
     </div>
     
     <!-- Data Preview Card -->
-    <div class="card scan-table-card" style="min-height: 700px; width: calc(100% - 350px); margin: 0;">
+    <div class="card scan-table-card">
         <h3>Data Preview (Unprinted Orders)</h3>
         <button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
         <div class="report-table-container">
@@ -266,7 +225,8 @@
 
 <!-- JavaScript Libraries -->
 <!-- JsBarcode library for real barcode generation -->
-<script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
+<!-- Backup local version: <script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script> -->
 <!-- Add html2canvas library for capturing preview as image -->
 <script src="{{ url_for('static', filename='html2canvas.min.js') }}"></script>
 <!-- PATCHED QZ Tray library - works with custom server using pairing key authentication -->
@@ -316,6 +276,7 @@ function showNotification(message, type = 'info') {
 // Wait for DOM to be ready before attaching event listeners
 document.addEventListener('DOMContentLoaded', function() {
     console.log('🚀 DOM Content Loaded - Initializing page...');
+    console.log('🔍 Checking JsBarcode library:', typeof JsBarcode !== 'undefined' ? 'LOADED' : 'NOT LOADED');
     
 // Database loading functionality
 document.getElementById('check-db-btn').addEventListener('click', function() {
@@ -375,7 +336,7 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
                             '<span style="color: #dc3545;">❌ No</span>'}
                     </td>
                     <td style="font-size: 9px; color: #6c757d;">
-                        ${order.created_at ? new Date(order.created_at).toLocaleString() : '-'}
+                        ${order.created_at ? new Date(order.created_at).toLocaleDateString() : '-'}
                     </td>
                 `;
                 
@@ -433,6 +394,8 @@ document.getElementById('check-db-btn').addEventListener('click', function() {
 
 // Update label preview with order data
 function updateLabelPreview(order) {
+    console.log('🔍 Updating label preview with order:', order);
+    
     const customerName = order.customer_name || 'N/A';
     document.getElementById('customer-name-row').textContent = customerName;
     
@@ -470,58 +433,72 @@ function updateLabelPreview(order) {
     
     // Update horizontal barcode with CP format (e.g., CP00000711/001)
     // Show the first piece number (001) in preview
-    const horizontalBarcodeData = comandaProductie ? `${comandaProductie}/001` : 'N/A';
+    const horizontalBarcodeData = comandaProductie ? `${comandaProductie}/001` : 'SAMPLE001';
     document.getElementById('barcode-text').textContent = horizontalBarcodeData;
     
     // Generate horizontal barcode visual using JsBarcode
     console.log('🔍 Attempting to generate horizontal barcode:', horizontalBarcodeData);
     console.log('🔍 JsBarcode available?', typeof JsBarcode !== 'undefined');
     
-    if (horizontalBarcodeData !== 'N/A' && typeof JsBarcode !== 'undefined') {
+    if (typeof JsBarcode !== 'undefined') {
         try {
-            const barcodeElement = document.querySelector("#barcode-display");
+            const barcodeElement = document.getElementById("barcode-display");
             console.log('🔍 Horizontal barcode element:', barcodeElement);
             
-            JsBarcode("#barcode-display", horizontalBarcodeData, {
-                format: "CODE128",
-                width: 1.2,
-                height: 40,
-                displayValue: false,
-                margin: 0,
-                fontSize: 0,
-                textMargin: 0
-            });
-            console.log('✅ Horizontal barcode generated successfully');
+            if (barcodeElement) {
+                barcodeElement.innerHTML = '';  // Clear existing content
+                JsBarcode(barcodeElement, horizontalBarcodeData, {
+                    format: "CODE128",
+                    width: 2,
+                    height: 50,
+                    displayValue: false,
+                    margin: 5,
+                    background: "#ffffff",
+                    lineColor: "#000000"
+                });
+                console.log('✅ Horizontal barcode generated successfully for:', horizontalBarcodeData);
+            } else {
+                console.error('❌ Horizontal barcode element not found');
+            }
         } catch (e) {
             console.error('❌ Failed to generate horizontal barcode:', e);
+            console.error('Error details:', e.message);
         }
     } else {
         console.warn('⚠️ Skipping horizontal barcode generation:', 
             horizontalBarcodeData === 'N/A' ? 'No data' : 'JsBarcode not loaded');
     }
     
-    // Update vertical barcode with client order format (e.g., Abcderd/65)
-    const verticalBarcodeData = comAchizClient && nrLinie ? `${comAchizClient}/${nrLinie}` : '000000/00';
+    // Update vertical barcode with client order format (e.g., Abcderd65)
+    const verticalBarcodeData = comAchizClient && nrLinie ? `${comAchizClient}${nrLinie}` : 'SAMPLE00';
     document.getElementById('vertical-barcode-text').textContent = verticalBarcodeData;
     
     // Generate vertical barcode visual using JsBarcode (will be rotated by CSS)
     console.log('🔍 Attempting to generate vertical barcode:', verticalBarcodeData);
     
-    if (verticalBarcodeData !== '000000/00' && typeof JsBarcode !== 'undefined') {
+    if (typeof JsBarcode !== 'undefined') {
         try {
-            const verticalElement = document.querySelector("#vertical-barcode-display");
+            const verticalElement = document.getElementById("vertical-barcode-display");
             console.log('🔍 Vertical barcode element:', verticalElement);
             
-            JsBarcode("#vertical-barcode-display", verticalBarcodeData, {
-                format: "CODE128",
-                width: 1.5,
-                height: 35,
-                displayValue: false,
-                margin: 2
-            });
-            console.log('✅ Vertical barcode generated successfully');
+            if (verticalElement) {
+                verticalElement.innerHTML = '';  // Clear existing content
+                JsBarcode(verticalElement, verticalBarcodeData, {
+                    format: "CODE128",
+                    width: 2,
+                    height: 40,
+                    displayValue: false,
+                    margin: 5,
+                    background: "#ffffff",
+                    lineColor: "#000000"
+                });
+                console.log('✅ Vertical barcode generated successfully for:', verticalBarcodeData);
+            } else {
+                console.error('❌ Vertical barcode element not found');
+            }
         } catch (e) {
             console.error('❌ Failed to generate vertical barcode:', e);
+            console.error('Error details:', e.message);
         }
     } else {
         console.warn('⚠️ Skipping vertical barcode generation:', 
@@ -539,14 +516,72 @@ function clearLabelPreview() {
     document.getElementById('description-value').textContent = 'N/A';
     document.getElementById('article-code-value').textContent = 'N/A';
     document.getElementById('prod-order-value').textContent = 'N/A';
-    document.getElementById('barcode-text').textContent = 'N/A';
-    document.getElementById('vertical-barcode-text').textContent = '000000/00';
+    document.getElementById('barcode-text').textContent = 'SAMPLE001';
+    document.getElementById('vertical-barcode-text').textContent = 'SAMPLE00';
     
-    // Clear barcode SVGs
-    const horizontalBarcode = document.getElementById('barcode-display');
-    const verticalBarcode = document.getElementById('vertical-barcode-display');
-    if (horizontalBarcode) horizontalBarcode.innerHTML = '';
-    if (verticalBarcode) verticalBarcode.innerHTML = '';
+    // Generate sample barcodes instead of clearing
+    generateSampleBarcodes();
+}
+
+// Generate sample barcodes for preview
+function generateSampleBarcodes() {
+    console.log('🔍 Generating sample barcodes...');
+    console.log('🔍 JsBarcode available:', typeof JsBarcode !== 'undefined');
+    
+    if (typeof JsBarcode !== 'undefined') {
+        try {
+            // Clear any existing content first
+            const horizontalElement = document.getElementById('barcode-display');
+            const verticalElement = document.getElementById('vertical-barcode-display');
+            
+            console.log('🔍 Horizontal element:', horizontalElement);
+            console.log('🔍 Vertical element:', verticalElement);
+            
+            if (horizontalElement) {
+                horizontalElement.innerHTML = '';
+                console.log('🔍 Horizontal element cleared, generating barcode...');
+                
+                // Generate horizontal sample barcode with simpler parameters first
+                JsBarcode(horizontalElement, "SAMPLE001", {
+                    format: "CODE128",
+                    width: 1,
+                    height: 40,
+                    displayValue: false,
+                    margin: 2
+                });
+                console.log('✅ Horizontal sample barcode generated');
+                console.log('🔍 Horizontal SVG content:', horizontalElement.innerHTML);
+            } else {
+                console.error('❌ Horizontal barcode element not found');
+            }
+            
+            if (verticalElement) {
+                verticalElement.innerHTML = '';
+                console.log('🔍 Vertical element cleared, generating barcode...');
+                
+                // Generate vertical sample barcode
+                JsBarcode(verticalElement, "SAMPLE00", {
+                    format: "CODE128",
+                    width: 1,
+                    height: 35,
+                    displayValue: false,
+                    margin: 2
+                });
+                console.log('✅ Vertical sample barcode generated');
+                console.log('🔍 Vertical SVG content:', verticalElement.innerHTML);
+            } else {
+                console.error('❌ Vertical barcode element not found');
+            }
+            
+            console.log('✅ All sample barcodes generated successfully');
+        } catch (e) {
+            console.error('❌ Failed to generate sample barcodes:', e);
+            console.error('Error details:', e.message, e.stack);
+        }
+    } else {
+        console.warn('⚠️ JsBarcode not loaded, cannot generate sample barcodes');
+        console.warn('🔍 Available objects:', Object.keys(window));
+    }
 }
 
 // QZ Tray Integration
@@ -1501,13 +1536,19 @@ function updatePrintMethodUI() {
     // Initialize UI
     updatePrintMethodUI();
     
+    // Initialize sample barcodes on page load
+    setTimeout(() => {
+        console.log('🔍 Initializing sample barcodes...');
+        generateSampleBarcodes();
+    }, 1000);
+    
     // Initialize QZ Tray
     setTimeout(initializeQZTray, 1000);
     
     // Load orders
     setTimeout(() => {
         document.getElementById('check-db-btn').click();
-    }, 500);
+    }, 1500);
 }); // End DOMContentLoaded
 </script>
 

py_app/app/templates/upload_orders.html

@@ -2,79 +2,13 @@
 {% block title %}Upload Order Data for Labels{% endblock %}
 
 {% block head %}
-<style>
-/* VIEW ORDERS TABLE - Specific styling (copied from view_orders.html) */
-table.view-orders-table.scan-table {
-    margin: 0 !important;
-    border-spacing: 0 !important;
-    border-collapse: collapse !important;
-    width: 100% !important;
-    table-layout: fixed !important;
-    font-size: 11px !important;
-}
-table.view-orders-table.scan-table thead th {
-    height: 85px !important;
-    min-height: 85px !important;
-    max-height: 85px !important;
-    vertical-align: middle !important;
-    text-align: center !important;
-    white-space: normal !important;
-    word-wrap: break-word !important;
-    line-height: 1.3 !important;
-    padding: 6px 3px !important;
-    font-size: 11px !important;
-    background-color: #e9ecef !important;
-    font-weight: bold !important;
-    text-transform: none !important;
-    letter-spacing: 0 !important;
-    overflow: visible !important;
-    box-sizing: border-box !important;
-    border: 1px solid #ddd !important;
-    text-overflow: clip !important;
-    position: relative !important;
-}
-table.view-orders-table.scan-table tbody td {
-    padding: 4px 2px !important;
-    font-size: 10px !important;
-    text-align: center !important;
-    border: 1px solid #ddd !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    vertical-align: middle !important;
-}
-table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; }
-table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; }
-table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; }
-table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; }
-table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; }
-table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; }
-table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; }
-table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; }
-table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; }
-table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; }
-table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; }
-table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; }
-table.view-orders-table.scan-table tbody tr:hover td {
-    background-color: #f8f9fa !important;
-}
-.report-table-card h3 {
-    margin: 0 0 15px 0 !important;
-    padding: 0 !important;
-}
-.report-table-card {
-    padding: 15px !important;
-}
-</style>
+<!-- Print Module CSS is now loaded via base.html for all printing pages -->
 {% endblock %}
 
 {% block content %}
 <div class="scan-container">
-    <!-- Upload Orders Card (first, fixed position) -->
-    <div class="card scan-form-card" style="margin-bottom: 24px;">
+    <!-- Upload Orders Card (first, 25% width) -->
+    <div class="card scan-form-card">
         {% if leftover_description %}
             <h3>Left over orders</h3>
             <div style="color: #dc3545; font-weight: bold; margin-bottom: 10px;">{{ leftover_description }}</div>
@@ -143,8 +77,8 @@ table.view-orders-table.scan-table tbody tr:hover td {
         </script>
     </div>
     
-    <!-- Preview Table Card (expandable height, scrollable) -->
-    <div class="card scan-table-card" style="margin-bottom: 24px; max-height: 480px; overflow-y: auto;">
+    <!-- Preview Table Card (75% width, scrollable) -->
+    <div class="card scan-table-card" style="max-height: 600px; overflow-y: auto;">
         {% if show_preview %}
             <h3>CSV Data Preview - {{ filename }}</h3>
             <table class="scan-table">

py_app/app/templates/view_orders.html

@@ -2,95 +2,7 @@
 {% block title %}View Uploaded Orders{% endblock %}
 
 {% block head %}
-<style>
-/* VIEW ORDERS TABLE - Specific styling */
-table.view-orders-table.scan-table {
-    margin: 0 !important;
-    border-spacing: 0 !important;
-    border-collapse: collapse !important;
-    width: 100% !important;
-    table-layout: fixed !important;
-    font-size: 11px !important;
-}
-
-/* HEADER STYLES for 2-line text */
-table.view-orders-table.scan-table thead th {
-    height: 85px !important;
-    min-height: 85px !important;
-    max-height: 85px !important;
-    vertical-align: middle !important;
-    text-align: center !important;
-    white-space: normal !important;
-    word-wrap: break-word !important;
-    line-height: 1.3 !important;
-    padding: 6px 3px !important;
-    font-size: 11px !important;
-    background-color: var(--header-bg-color) !important;
-    color: var(--header-text-color) !important;
-    font-weight: bold !important;
-    text-transform: none !important;
-    letter-spacing: 0 !important;
-    overflow: visible !important;
-    box-sizing: border-box !important;
-    border: 1px solid var(--border-color) !important;
-    text-overflow: clip !important;
-    position: relative !important;
-}
-
-/* BODY CELL STYLES */
-table.view-orders-table.scan-table tbody td {
-    padding: 4px 2px !important;
-    font-size: 10px !important;
-    text-align: center !important;
-    border: 1px solid var(--border-color) !important;
-    background-color: var(--card-bg-color) !important;
-    color: var(--text-color) !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    vertical-align: middle !important;
-}
-
-/* REMOVE UNWANTED SPACING */
-.report-table-card h3 {
-    margin: 0 0 15px 0 !important;
-    padding: 0 !important;
-}
-
-.report-table-card {
-    padding: 15px !important;
-}
-
-.report-table-card > * {
-    margin-top: 0 !important;
-}
-
-.report-table-container {
-    margin-top: 0 !important;
-}
-
-/* HOVER EFFECTS */
-table.view-orders-table.scan-table tbody tr:hover td {
-    background-color: var(--hover-color) !important;
-}
-
-/* COLUMN WIDTH SPECIFICATIONS */
-table.view-orders-table.scan-table td:nth-child(1) { width: 50px !important; } /* ID */
-table.view-orders-table.scan-table td:nth-child(2) { width: 80px !important; } /* Comanda Productie */
-table.view-orders-table.scan-table td:nth-child(3) { width: 80px !important; } /* Cod Articol */
-table.view-orders-table.scan-table td:nth-child(4) { width: 150px !important; } /* Descr Com Prod */
-table.view-orders-table.scan-table td:nth-child(5) { width: 70px !important; } /* Cantitate */
-table.view-orders-table.scan-table td:nth-child(6) { width: 80px !important; } /* Data Livrare */
-table.view-orders-table.scan-table td:nth-child(7) { width: 75px !important; } /* Dimensiune */
-table.view-orders-table.scan-table td:nth-child(8) { width: 90px !important; } /* Com Achiz Client */
-table.view-orders-table.scan-table td:nth-child(9) { width: 70px !important; } /* Nr Linie */
-table.view-orders-table.scan-table td:nth-child(10) { width: 100px !important; } /* Customer Name */
-table.view-orders-table.scan-table td:nth-child(11) { width: 90px !important; } /* Customer Art Nr */
-table.view-orders-table.scan-table td:nth-child(12) { width: 70px !important; } /* Open Order */
-table.view-orders-table.scan-table td:nth-child(13) { width: 50px !important; } /* Line */
-table.view-orders-table.scan-table td:nth-child(14) { width: 70px !important; } /* Printed */
-table.view-orders-table.scan-table td:nth-child(15) { width: 100px !important; } /* Created */
-</style>
+<!-- Print Module CSS is now loaded via base.html for all printing pages -->
 {% endblock %}
 
 {% block content %}