MagoRevisited/templates/products.html

{% extends "base.html" %}
{% block title %}Articoli - Mago4 Demo{% endblock %}
{% block window_tabs %}<a href="/products" class="window-tab active"><i class="material-icons">inventory_2</i> Articoli</a>{% endblock %}

{% block content %}
<div class="module-bar">
    <div class="module-title">Articoli</div>
    <div class="breadcrumb"><a href="/">Mago4</a><span class="sep">»</span><a href="/anagrafiche">Anagrafiche</a><span class="sep">»</span><span class="current">Articoli</span></div>
</div>
<div class="tab-strip">
    <a href="/anagrafiche">Anagrafiche</a>
    <a href="/customers">Clienti</a>
    <a href="/suppliers">Fornitori</a>
    <a href="/products" class="active">Articoli</a>
</div>

<div class="doc-toolbar">
    <button class="tb-btn" title="Nuovo" onclick="alert('Nuovo articolo (demo)')"><i class="material-icons">add_box</i></button>
    <button class="tb-btn" title="Cerca"><i class="material-icons">search</i></button>
    <div class="tb-sep"></div>
    <button class="tb-btn" title="Stampa"><i class="material-icons">print</i></button>
</div>

<div class="content-pad">
    {% if low_stock %}
    <div class="alert alert-warning"><i class="material-icons">warning</i> {{ low_stock|length }} articolo/i sotto la scorta minima</div>
    {% endif %}

    <div class="panel">
        <div class="panel-header"><h3><i class="material-icons">inventory_2</i> Catalogo Articoli</h3></div>
        <table class="data-table">
            <thead><tr><th>Codice</th><th>Descrizione</th><th>Categoria</th><th class="text-center">UM</th><th class="text-right">Prezzo Vend.</th><th class="text-right">Costo</th><th class="text-center">IVA</th><th class="text-right">Giacenza</th><th></th></tr></thead>
            <tbody>
                {% for p in products %}
                <tr class="{% if p.quantity_in_stock <= p.reorder_level %}low-stock{% endif %}">
                    <td class="text-bold mono">{{ p.code }}</td>
                    <td>{{ p.description }}</td>
                    <td>{{ p.category }}</td>
                    <td class="text-center">{{ p.uom }}</td>
                    <td class="text-right">€ {{ "%.2f"|format(p.unit_price) }}</td>
                    <td class="text-right text-mute">€ {{ "%.2f"|format(p.purchase_price) }}</td>
                    <td class="text-center">{{ "%.0f"|format(p.tax_rate) }}%</td>
                    <td class="text-right {% if p.quantity_in_stock <= p.reorder_level %}text-danger text-bold{% endif %}">
                        {{ p.quantity_in_stock }} {{ p.uom }}
                        {% if p.quantity_in_stock <= p.reorder_level %}<i class="material-icons" style="font-size:14px;vertical-align:middle;">warning</i>{% endif %}
                    </td>
                    <td class="text-center"><button class="btn-icon-sm act-view" onclick="viewProduct({{ p.id }})"><i class="material-icons">visibility</i></button></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div id="genericModal" class="modal" onclick="if(event.target.id==='genericModal')closeGenericModal()">
    <div class="modal-content">
        <div class="modal-header"><h2 id="gmTitle">Dettagli</h2><button class="modal-close" onclick="closeGenericModal()"><i class="material-icons">close</i></button></div>
        <div class="modal-body" id="gmBody"></div>
    </div>
</div>

<script>
function viewProduct(id) {
    fetch(`/api/products/${id}`).then(r=>r.json()).then(d=>{
        const low = d.quantity_in_stock <= d.reorder_level;
        openGenericModal('Articolo: ' + d.code, `
        <div style="padding:16px">
          <div class="form-section-title">Dati Principali</div>
          <div class="form-grid-2">
            ${field('Codice', d.code)}${field('Descrizione', d.description)}
            ${field('Categoria', d.category)}${field('Unità di Misura', d.uom)}
          </div>
          <div class="form-section-title">Dati Commerciali</div>
          <div class="form-grid-2">
            ${field('Prezzo di Vendita', '€ ' + d.unit_price.toFixed(2))}
            ${field('Costo di Acquisto', '€ ' + d.purchase_price.toFixed(2))}
            ${field('Aliquota IVA', d.tax_rate.toFixed(0) + '%')}
          </div>
          <div class="form-section-title">Dati Magazzino</div>
          <div class="form-grid-2">
            ${field('Giacenza', '<span class="' + (low?'text-danger text-bold':'') + '">' + d.quantity_in_stock + ' ' + d.uom + (low?' ⚠ sottoscorta':'') + '</span>')}
            ${field('Scorta Minima', d.reorder_level + ' ' + d.uom)}
            ${field('Scorta Massima', d.max_stock + ' ' + d.uom)}
            ${field('Valore Giacenza', '€ ' + (d.quantity_in_stock * d.purchase_price).toFixed(2))}
          </div>
        </div>`);
    });
}
</script>
{% endblock %}