Major UI/UX improvements and help system implementation

✨ New Features: - Implemented comprehensive help/documentation system with Markdown support - Added floating help buttons throughout the application - Created modular CSS architecture for better maintainability - Added theme-aware help pages (light/dark mode support) 🎨 UI/UX Improvements: - Implemented 25%/75% card layout consistency across printing module pages - Fixed barcode display issues (removed black rectangles, proper barcode patterns) - Enhanced print method selection with horizontal layout (space-saving) - Added floating back button in help pages - Improved form controls styling (radio buttons, dropdowns) 🔧 Technical Enhancements: - Modularized CSS: Created print_module.css with 779 lines of specialized styles - Enhanced base.css with floating button components and dark mode support - Updated routes.py with help system endpoints and Markdown processing - Fixed JsBarcode integration with proper CDN fallback - Removed conflicting inline styles from templates 📚 Documentation: - Created dashboard.md with comprehensive user guide - Added help viewer template with theme synchronization - Set up documentation image system with proper Flask static serving - Implemented docs/images/ folder structure 🐛 Bug Fixes: - Fixed barcode positioning issues (horizontal/vertical alignment) - Resolved CSS conflicts between inline styles and modular CSS - Fixed radio button oval display issues - Removed borders from barcode frames while preserving label info borders - Fixed theme synchronization between main app and help pages 📱 Responsive Design: - Applied consistent 25%/75% layout across print_module, print_lost_labels, upload_data, view_orders - Added responsive breakpoints for tablet (30%/70%) and mobile (stacked) layouts - Improved mobile-friendly form layouts and button sizing The application now features a professional, consistent UI with comprehensive help system and improved printing module functionality.
2025-11-03 18:48:56 +02:00
parent b56cccce3f
commit 7fd4b7449d
19 changed files with 1938 additions and 293 deletions
--- a/py_app/app/static/css/base.css
+++ b/py_app/app/static/css/base.css
@@ -146,4 +146,111 @@ body.dark-mode header {

 body.dark-mode .user-info {
    color: #ccc;
+}
+
+/* ==========================================================================
+   FLOATING BUTTONS
+   ========================================================================== */
+
+/* Floating Help Button */
+.floating-help-btn {
+    position: fixed;
+    top: 80px; /* Position below the header */
+    right: 20px;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #17a2b8, #138496);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.floating-help-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+    background: linear-gradient(135deg, #138496, #0f6674);
+}
+
+.floating-help-btn a {
+    color: white;
+    text-decoration: none;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.floating-help-btn a:hover {
+    color: white;
+    text-decoration: none;
+}
+
+/* Floating Back Button */
+.floating-back-btn {
+    position: fixed;
+    top: 80px; /* Position below the header */
+    left: 20px;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6c757d, #545b62);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.floating-back-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+    background: linear-gradient(135deg, #545b62, #495057);
+}
+
+.floating-back-btn a,
+.floating-back-btn button {
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+.floating-back-btn a:hover,
+.floating-back-btn button:hover {
+    color: white;
+    text-decoration: none;
+}
+
+/* Dark mode styles for floating buttons */
+body.dark-mode .floating-help-btn {
+    background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
+}
+
+body.dark-mode .floating-help-btn:hover {
+    background: linear-gradient(135deg, #0aa2c0, #087990);
+}
+
+body.dark-mode .floating-back-btn {
+    background: linear-gradient(135deg, #495057, #343a40);
+}
+
+body.dark-mode .floating-back-btn:hover {
+    background: linear-gradient(135deg, #343a40, #212529);
 }
--- a/py_app/app/static/css/daily_mirror_tune.css
+++ b/py_app/app/static/css/daily_mirror_tune.css
@@ -0,0 +1,276 @@
+/* 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 wide (95% of viewport width) */
+#editModal .modal-dialog {
+    max-width: 95vw !important;
+}
+
+/* Modal footer button spacing and sizing */
+#editModal .modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#editModal .modal-footer .btn {
+    min-width: 100px;
+}
+
+#editModal .modal-footer .btn-danger {
+    min-width: 150px;
+    background-color: #dc3545 !important;
+    border-color: #dc3545 !important;
+}
+
+#editModal .modal-footer .btn-danger:hover {
+    background-color: #bb2d3b !important;
+    border-color: #b02a37 !important;
+}
+
+#editModal .modal-footer .btn-primary {
+    min-width: 150px;
+}
+
+#editModal .modal-footer .btn-secondary {
+    margin-right: 10px;
+}
+
+/* Force Bootstrap modal to have proper z-index */
+#editModal.modal {
+    z-index: 9999 !important;
+}
+
+#editModal .modal-backdrop {
+    z-index: 9998 !important;
+}
+
+/* Ensure modal dialog is interactive */
+#editModal .modal-dialog {
+    pointer-events: auto !important;
+    z-index: 10000 !important;
+}
+
+#editModal .modal-content {
+    pointer-events: auto !important;
+}
+
+/* Make all inputs in the modal fully interactive */
+#editModal .form-control:not([readonly]),
+#editModal .form-select:not([readonly]),
+#editModal input:not([readonly]):not([type="hidden"]),
+#editModal select:not([readonly]),
+#editModal textarea:not([readonly]) {
+    pointer-events: auto !important;
+    user-select: text !important;
+    cursor: text !important;
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    opacity: 1 !important;
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+}
+
+#editModal .form-control:focus:not([readonly]),
+#editModal input:focus:not([readonly]),
+#editModal select:focus:not([readonly]),
+#editModal textarea:focus:not([readonly]) {
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    border-color: #007bff !important;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+    outline: none !important;
+}
+
+/* Dark mode specific overrides for modal inputs */
+body.dark-mode #editModal .form-control:not([readonly]),
+body.dark-mode #editModal input:not([readonly]):not([type="hidden"]),
+body.dark-mode #editModal select:not([readonly]),
+body.dark-mode #editModal textarea:not([readonly]) {
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    opacity: 1 !important;
+}
+
+body.dark-mode #editModal .form-control:focus:not([readonly]),
+body.dark-mode #editModal input:focus:not([readonly]),
+body.dark-mode #editModal select:focus:not([readonly]),
+body.dark-mode #editModal textarea:focus:not([readonly]) {
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    border-color: #007bff !important;
+}
+
+/* Readonly fields should still look readonly */
+#editModal .form-control[readonly],
+#editModal input[readonly] {
+    background-color: #e9ecef !important;
+    cursor: not-allowed !important;
+}
+
+body.dark-mode #editModal .form-control[readonly],
+body.dark-mode #editModal input[readonly] {
+    background-color: #6c757d !important;
+    color: #e2e8f0 !important;
+}
+
+/* Dark mode styles for cards and tables */
+body.dark-mode .card {
+    background-color: #2d3748;
+    color: #e2e8f0;
+    border: 1px solid #4a5568;
+}
+
+body.dark-mode .card-header {
+    background-color: #4a5568;
+    border-bottom: 1px solid #6b7280;
+    color: #e2e8f0;
+}
+
+body.dark-mode .form-control {
+    background-color: #4a5568;
+    border-color: #6b7280;
+    color: #e2e8f0;
+}
+
+body.dark-mode .form-control:focus {
+    background-color: #4a5568;
+    border-color: #007bff;
+    color: #e2e8f0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+body.dark-mode .table {
+    color: #e2e8f0;
+}
+
+body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+body.dark-mode .table-hover tbody tr:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+body.dark-mode .modal-content {
+    background-color: #2d3748;
+    color: #e2e8f0;
+}
+
+body.dark-mode .modal-header {
+    border-bottom: 1px solid #4a5568;
+}
+
+body.dark-mode .modal-footer {
+    border-top: 1px solid #4a5568;
+}
+
+body.dark-mode .btn-secondary {
+    background-color: #4a5568;
+    border-color: #6b7280;
+}
+
+body.dark-mode .btn-secondary:hover {
+    background-color: #6b7280;
+}
+
+body.dark-mode .btn-close {
+    filter: invert(1);
+}
+
+/* Table and button styling */
+.table td {
+    vertical-align: middle;
+}
+
+.btn-action {
+    padding: 0.25rem 0.5rem;
+    margin: 0.1rem;
+}
+
+/* Editable field highlighting */
+.editable {
+    background-color: #fff3cd;
+    border: 1px dashed #ffc107;
+}
+
+body.dark-mode .editable {
+    background-color: #2d2d00;
+    border: 1px dashed #ffc107;
+}
+
+/* Compact table styling */
+.table-sm th,
+.table-sm td {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+}
+
+/* Action button styling */
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+}
+
+/* Pagination styling */
+.pagination {
+    margin-bottom: 0;
+}
+
+.page-link {
+    cursor: pointer;
+}
+
+body.dark-mode .pagination .page-link {
+    background-color: #4a5568;
+    border: 1px solid #6b7280;
+    color: #e2e8f0;
+}
+
+body.dark-mode .pagination .page-link:hover {
+    background-color: #374151;
+    border-color: #6b7280;
+    color: #e2e8f0;
+}
+
+body.dark-mode .pagination .page-item.active .page-link {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+    color: #ffffff;
+}
+
+/* Additional dark mode styles */
+body.dark-mode .container-fluid {
+    color: #e2e8f0;
+}
+
+body.dark-mode .text-muted {
+    color: #a0aec0 !important;
+}
+
+body.dark-mode .table-dark th {
+    background-color: #1a202c;
+    color: #e2e8f0;
+    border-color: #4a5568;
+}
+
+body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
+    background-color: #374151;
+}
+
+body.dark-mode .table-hover > tbody > tr:hover > td {
+    background-color: #4a5568;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .table-responsive {
+        font-size: 0.875rem;
+    }
+    
+    .btn-sm {
+        font-size: 0.75rem;
+        padding: 0.375rem 0.5rem;
+    }
+}
--- a/py_app/app/static/css/print_module.css
+++ b/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;
+}
--- a/py_app/app/static/docs/dashboard.md
+++ b/py_app/app/static/docs/dashboard.md
@@ -0,0 +1,131 @@
+# Dashboard - Ghid de utilizare
+
+## Prezentare generală
+Dashboard-ul este pagina principală a aplicației Quality Management System și oferă o vizualizare de ansamblu asupra tuturor modulelor disponibile și funcționalităților sistemului.
+
+## Structura Dashboard-ului
+
+### Bara de navigare superioară
+În partea de sus a paginii găsiți:
+- **Logo-ul companiei** -  Quality Management
+- **Meniul principal** cu accesul la toate modulele
+- **Butonul de profil utilizator** și logout în colțul din dreapta
+
+![Bara de navigare](images/dashboard_navbar.png)
+
+### Sectiuni principale
+![Poza cu Sectiunile](images/dashboard_main.png)
+#### 1. Modulul Quality (Calitate)
+Permite gestionarea proceselor de control al calității:
+- **Scan FG** - Scanarea produselor finite
+- **Scan RM** - Scanarea materiilor prime  
+- **Reports** - Rapoarte de calitate
+- **Quality Settings** - Configurări pentru modulul de calitate
+
+![Modulul Quality](images/dashboard_quality.png)
+
+#### 2. Modulul Warehouse (Depozit)
+Gestionarea stocurilor și locațiilor din depozit:
+- **Create Locations** - Crearea de noi locații în depozit
+- **Store Articles** - Depozitarea articolelor
+- **Warehouse Reports** - Rapoarte de depozit
+- **Inventory Management** - Gestionarea inventarului
+
+![Modulul Warehouse](images/dashboard_warehouse.png)
+
+#### 3. Modulul Labels (Etichete)
+Pentru generarea și printarea etichetelor:
+- **Print Module** - Printarea etichetelor pentru comenzi
+- **Print Lost Labels** - Reprintarea etichetelor pierdute
+- **View Orders** - Vizualizarea comenzilor
+- **Upload Data** - Încărcarea datelor pentru etichete
+
+![Modulul Labels](images/dashboard_labels.png)
+
+## Cum să navigați în aplicație
+
+### Pasul 1: Autentificarea
+1. Introduceți username-ul și parola
+2. Faceți clic pe "Login"
+3. Veți fi redirecționați automat către dashboard
+
+### Pasul 2: Selectarea modulului
+1. În dashboard, faceți clic pe modulul dorit (Quality, Warehouse, Labels)
+2. Veți vedea submeniul cu opțiunile disponibile
+3. Selectați funcționalitatea dorită
+
+![Navigare module](images/dashboard_main.png)
+
+### Pasul 3: Utilizarea funcționalităților
+Fiecare modul are propriile sale funcționalități specializate. Consultați ghidurile specifice pentru:
+- [Modulul Quality](quality_module.md)
+- [Modulul Warehouse](warehouse_module.md) 
+- [Modulul Labels](labels_module.md)
+
+## Permisiuni și acces
+
+### Tipuri de utilizatori
+Aplicația suportă diferite niveluri de acces:
+- **Superadmin** - Acces complet la toate modulele și setări
+- **Admin** - Acces la majoritatea funcționalităților
+- **Manager** - Acces la funcționalitățile de management
+- **User** - Acces limitat la funcționalitățile de bază
+![quick view access](images/quick_access.png)
+### Verificarea permisiunilor
+- Dacă nu aveți acces la un modul, acesta nu va fi vizibil în dashboard
+- Contactați administratorul pentru a obține permisiuni suplimentare
+- Permisiunile sunt configurate per utilizator și per modul
+
+![Niveluri de acces](images/access_management.png)
+
+## Funcționalități comune
+
+### Bara de căutare globală
+- Folosiți bara de căutare pentru a găsi rapid comenzi, articole sau rapoarte
+- Căutarea funcționează pe toate modulele activate
+
+### Notificări sistem
+- Notificările apar în colțul din dreapta sus
+- Includ alertele de sistem, confirmări de acțiuni și mesaje de eroare
+- Faceți clic pe notificare pentru a o închide
+
+### Shortcuts tastatura
+- **Ctrl + H** - Întoarcere la dashboard
+- **Ctrl + L** - Focus pe bara de căutare
+- **Escape** - Închiderea modalelor deschise
+
+## Rezolvarea problemelor comune
+
+### Nu se încarcă dashboard-ul
+1. Verificați conexiunea la internet
+2. Reîncărcați pagina (F5)
+3. Ștergeți cache-ul browserului
+4. Contactați administratorul IT
+
+### Lipsesc module din dashboard
+1. Verificați că sunteți autentificat corect
+2. Contactați administratorul pentru verificarea permisiunilor
+3. Unele module pot fi temporar dezactivate pentru mentenanță
+
+### Performanțe lente
+1. Închideți tab-urile de browser nefolosite
+2. Verificați conexiunea la rețea
+3. Raportați problema administratorului IT
+
+## Contacte și suport
+
+### Suport tehnic
+- **Email**: it-support@recticel.com
+- **Telefon intern**: 1234
+- **Program**: L-V, 08:00-17:00
+
+### Documentație suplimentară
+- [Manual complet utilizator](user_manual.pdf)
+- [Ghid rapid](quick_start.md)
+- [FAQ - Întrebări frecvente](faq.md)
+
+### Actualizări sistem
+Sistemul este actualizat regulat. Consultați [pagina de changelog](changelog.md) pentru ultimele noutăți și îmbunătățiri.
+
+---
+*Ultima actualizare: Octombrie 2025*
--- a/py_app/app/static/docs/images/access_management.png
+++ b/py_app/app/static/docs/images/access_management.png
--- a/py_app/app/static/docs/images/dashboard_labels.png
+++ b/py_app/app/static/docs/images/dashboard_labels.png
--- a/py_app/app/static/docs/images/dashboard_main.png
+++ b/py_app/app/static/docs/images/dashboard_main.png
--- a/py_app/app/static/docs/images/dashboard_navbar.png
+++ b/py_app/app/static/docs/images/dashboard_navbar.png
--- a/py_app/app/static/docs/images/dashboard_quality.png
+++ b/py_app/app/static/docs/images/dashboard_quality.png
--- a/py_app/app/static/docs/images/dashboard_warehouse.png
+++ b/py_app/app/static/docs/images/dashboard_warehouse.png
--- a/py_app/app/static/docs/images/quick_access.png
+++ b/py_app/app/static/docs/images/quick_access.png
--- a/py_app/app/static/docs/print_module.md
+++ b/py_app/app/static/docs/print_module.md
@@ -0,0 +1,48 @@
+# Print Module - Ghid de utilizare
+
+## Prezentare generală
+Modulul de printare permite generarea și printarea etichetelor pentru comenzile de producție.
+
+## Pași pentru printarea etichetelor
+
+### Pasul 1: Selectarea comenzii
+1. Accesați pagina **Print Module** din meniul principal
+2. În tabelul din dreapta, căutați comanda dorită
+3. Faceți clic pe linia corespunzătoare pentru a o selecta
+
+![Selectarea comenzii](images/print_module_step1.png)
+
+### Pasul 2: Verificarea previzualizării
+1. În panoul din stânga veți vedea previzualizarea etichetei
+2. Verificați că toate informațiile sunt corecte:
+   - Numele clientului
+   - Cantitatea comandată
+   - Data livrării
+   - Descrierea produsului
+
+![Previzualizare etichetă](images/print_module_step2.png)
+
+### Pasul 3: Configurarea printării
+1. Selectați metoda de printare:
+   - **🖨️ Direct Print**: Printare directă prin QZ Tray
+   - **📄 PDF Export**: Generare fișier PDF
+2. Pentru printarea directă, selectați imprimanta dorită din listă
+
+### Pasul 4: Printarea
+1. Faceți clic pe butonul **🖨️ Print Labels**
+2. Verificați că eticheta a fost printată corect
+
+## Rezolvarea problemelor
+
+### QZ Tray nu este conectat
+- Descărcați și instalați QZ Tray din linkul furnizat
+- Asigurați-vă că aplicația QZ Tray rulează
+- Verificați că imprimanta este conectată și configurată
+
+### Codul de bare nu se afișează
+- Verificați conexiunea la internet
+- Reîncărcați pagina
+- Contactați administratorul dacă problema persistă
+
+## Contacte
+Pentru probleme tehnice, contactați echipa IT.