updated to see help page

2025-10-27 21:32:10 +02:00
parent d8e6dd1c78
commit dc1f23c26b
14 changed files with 604 additions and 3 deletions
--- a/py_app/app/routes.py
+++ b/py_app/app/routes.py
@@ -3515,6 +3515,63 @@ def api_daily_mirror_history_data():
    """Redirect to new Daily Mirror API history data route"""
    return redirect(url_for('daily_mirror.api_daily_mirror_history_data') + '?' + request.query_string.decode())

+# Help/Documentation Routes
+@bp.route('/help')
+@bp.route('/help/<page>')
+def help(page='index'):
+    """Display help documentation from Markdown files"""
+    import markdown
+    import os
+    
+    # Map page names to markdown files
+    doc_files = {
+        'index': 'index.md',
+        'dashboard': 'dashboard.md',
+        'print_module': 'print_module.md',
+        'upload_data': 'upload_data.md', 
+        'view_orders': 'view_orders.md',
+        'print_lost_labels': 'print_lost_labels.md'
+    }
+    
+    # Get the markdown file path
+    if page not in doc_files:
+        return render_template('docs/help_viewer.html', 
+                             error=f"Documentația pentru '{page}' nu a fost găsită.")
+    
+    doc_path = os.path.join(current_app.static_folder, 'docs', doc_files[page])
+    
+    try:
+        # Read and convert markdown to HTML
+        with open(doc_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        
+        # Convert markdown to HTML with extensions
+        html_content = markdown.markdown(content, extensions=[
+            'markdown.extensions.tables',
+            'markdown.extensions.fenced_code',
+            'markdown.extensions.toc'
+        ])
+        
+        # Fix image paths to work with Flask static files
+        import re
+        from flask import url_for
+        html_content = re.sub(
+            r'src="images/([^"]+)"', 
+            lambda m: f'src="{url_for("static", filename=f"docs/images/{m.group(1)}")}"', 
+            html_content
+        )
+        
+        return render_template('docs/help_viewer.html', 
+                             content=html_content, 
+                             page=page)
+                             
+    except FileNotFoundError:
+        return render_template('docs/help_viewer.html', 
+                             error=f"Fișierul de documentație '{doc_files[page]}' nu a fost găsit.")
+    except Exception as e:
+        return render_template('docs/help_viewer.html', 
+                             error=f"Eroare la încărcarea documentației: {str(e)}")
+
 # NOTE for frontend/extension developers:
 # To print labels, call the Chrome extension and pass the PDF URL:
 #   /generate_labels_pdf/<order_id>
--- 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/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_navigation.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ă
+
+### 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/dashboard_permissions.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/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/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.
--- a/py_app/app/templates/dashboard.html
+++ b/py_app/app/templates/dashboard.html
@@ -3,8 +3,14 @@
 {% block title %}Dashboard{% endblock %}

 {% block content %}
+<!-- Floating Help Button -->
+<div class="floating-help-btn">
+    <a href="{{ url_for('main.help', page='dashboard') }}" target="_blank" title="Dashboard Help">
+        📖
+    </a>
+</div>
+
 <div class="dashboard-container">
-    
    <!-- Row of evenly distributed cards -->
    <div class="dashboard-card">
        <h3>Quality Module</h3>
--- a/py_app/app/templates/docs/help_viewer.html
+++ b/py_app/app/templates/docs/help_viewer.html
@@ -0,0 +1,239 @@
+{% extends "base.html" %}
+
+{% block head %}
+<style>
+    /* Light Mode Styles (default) */
+    .help-container {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+    }
+    
+    .help-content {
+        line-height: 1.6;
+        color: #333;
+    }
+    
+    .help-content h1 {
+        color: #2c3e50;
+        border-bottom: 3px solid #3498db;
+        padding-bottom: 10px;
+        margin-bottom: 30px;
+    }
+    
+    .help-content h2 {
+        color: #34495e;
+        margin-top: 30px;
+        margin-bottom: 15px;
+    }
+    
+    .help-content h3 {
+        color: #7f8c8d;
+        margin-top: 25px;
+        margin-bottom: 10px;
+    }
+    
+    .help-content img {
+        max-width: 100%;
+        height: auto;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin: 15px 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    
+    .help-content code {
+        background: #f8f9fa;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: 'Courier New', monospace;
+        color: #e74c3c;
+    }
+    
+    .help-content pre {
+        background: #f8f9fa;
+        padding: 15px;
+        border-radius: 5px;
+        border-left: 4px solid #3498db;
+        overflow-x: auto;
+    }
+    
+    .help-content ul, .help-content ol {
+        margin-left: 20px;
+    }
+    
+    .help-content li {
+        margin-bottom: 5px;
+    }
+    
+
+    
+    .help-navigation {
+        background: #ecf0f1;
+        padding: 15px;
+        border-radius: 5px;
+        margin-bottom: 20px;
+    }
+    
+    .help-navigation a {
+        color: #3498db;
+        text-decoration: none;
+        margin-right: 15px;
+    }
+    
+    .help-navigation a:hover {
+        text-decoration: underline;
+    }
+    
+    /* Dark Mode Styles */
+    body.dark-mode .help-container {
+        background: #2d3748;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        color: #e2e8f0;
+    }
+    
+    body.dark-mode .help-content {
+        color: #e2e8f0;
+    }
+    
+    body.dark-mode .help-content h1 {
+        color: #90cdf4;
+        border-bottom: 3px solid #4299e1;
+    }
+    
+    body.dark-mode .help-content h2 {
+        color: #a0aec0;
+    }
+    
+    body.dark-mode .help-content h3 {
+        color: #718096;
+    }
+    
+    body.dark-mode .help-content img {
+        border: 1px solid #4a5568;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
+    
+    body.dark-mode .help-content code {
+        background: #1a202c;
+        color: #f56565;
+        border: 1px solid #4a5568;
+    }
+    
+    body.dark-mode .help-content pre {
+        background: #1a202c;
+        border-left: 4px solid #4299e1;
+        color: #e2e8f0;
+    }
+    
+    body.dark-mode .help-navigation {
+        background: #1a202c;
+        border: 1px solid #4a5568;
+    }
+    
+    body.dark-mode .help-navigation a {
+        color: #90cdf4;
+    }
+    
+    body.dark-mode .help-navigation a:hover {
+        color: #63b3ed;
+    }
+    
+    body.dark-mode .alert-danger {
+        background-color: #742a2a;
+        border-color: #e53e3e;
+        color: #feb2b2;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- Floating Back Button -->
+<div class="floating-back-btn">
+    <button onclick="history.back()" title="Înapoi">
+        ←
+    </button>
+</div>
+
+<div class="help-container">
+    {% if error %}
+        <div class="alert alert-danger">
+            <h4>Eroare</h4>
+            <p>{{ error }}</p>
+        </div>
+    {% else %}
+        <div class="help-navigation">
+            <strong>Documentație disponibilă:</strong>
+            <a href="{{ url_for('main.help', page='dashboard') }}">Dashboard</a>
+            <a href="{{ url_for('main.help', page='print_module') }}">Print Module</a>
+            <a href="{{ url_for('main.help', page='upload_data') }}">Upload Data</a>
+            <a href="{{ url_for('main.help', page='view_orders') }}">View Orders</a>
+            <a href="{{ url_for('main.help', page='print_lost_labels') }}">Print Lost Labels</a>
+        </div>
+        
+        <div class="help-content">
+            {{ content | safe }}
+        </div>
+    {% endif %}
+</div>
+
+<script>
+    // Theme Detection and Application
+    document.addEventListener('DOMContentLoaded', function() {
+        // Check if theme is stored in localStorage (same as main app)
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        // Apply theme based on saved preference or system preference
+        if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+            document.body.classList.add('dark-mode');
+        } else {
+            document.body.classList.remove('dark-mode');
+        }
+        
+        // Listen for theme changes (if user changes theme in main app)
+        window.addEventListener('storage', function(e) {
+            if (e.key === 'theme') {
+                if (e.newValue === 'dark') {
+                    document.body.classList.add('dark-mode');
+                } else {
+                    document.body.classList.remove('dark-mode');
+                }
+            }
+        });
+        
+        // Also check opener window theme if available (when opened from main app)
+        if (window.opener && window.opener.document) {
+            try {
+                const openerHasDarkMode = window.opener.document.body.classList.contains('dark-mode');
+                if (openerHasDarkMode) {
+                    document.body.classList.add('dark-mode');
+                } else {
+                    document.body.classList.remove('dark-mode');
+                }
+            } catch (e) {
+                // Cross-origin access denied, fallback to localStorage
+                console.log('Using localStorage theme fallback');
+            }
+        }
+    });
+    
+    // Smooth scrolling pentru linkurile din documentație
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+</script>
+{% endblock %}
--- a/py_app/app/templates/print_lost_labels.html
+++ b/py_app/app/templates/print_lost_labels.html
@@ -5,7 +5,12 @@
 {% endblock %}

 {% block content %}
-
+<!-- Floating Help Button -->
+<div class="floating-help-btn">
+    <a href="{{ url_for('main.help', page='print_lost_labels') }}" target="_blank" title="Print Lost Labels Help">
+        📖
+    </a>
+</div>

 <!-- ROW 1: Search Card (full width) -->
 <div class="scan-container lost-labels">
--- a/py_app/app/templates/print_module.html
+++ b/py_app/app/templates/print_module.html
@@ -5,6 +5,13 @@
 {% endblock %}

 {% block content %}
+<!-- Floating Help Button -->
+<div class="floating-help-btn">
+    <a href="{{ url_for('main.help', page='print_module') }}" target="_blank" title="Print Module Help">
+        📖
+    </a>
+</div>
+
 <div class="scan-container">
    <!-- Label Preview Card -->
    <div class="card scan-form-card">
--- a/py_app/requirements.txt
+++ b/py_app/requirements.txt
@@ -8,4 +8,5 @@ mariadb
 reportlab
 requests
 pandas
-openpyxl
+openpyxl
+markdown