Add pandas dependency, enhance inventory summary visualization, and update table rendering

templates/fragments/_table_fragment.html

@@ -2,6 +2,7 @@
 {% if rows %}
 <div class="table-responsive">
     <table
+        id="datatable-{{ title|default('table')|replace(' ', '-')|lower }}"
         class="table table-bordered table-sm table-hover table-striped table-light m-0{% if title %} caption-top{% endif %}">
         {% if title %}
         <caption>{{ title }}</caption>

templates/index.html

@@ -32,6 +32,20 @@
             </div>
         </div>
         {% endif %}
+        <div class="col">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Summary</h5>
+                    <div id="summary"></div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
-{% endblock %}
+{% endblock %}
+
+{% block script %}
+    const data = {{ datasets|tojson }};
+    const layout = { title: 'Summary' };
+    Plotly.newPlot('summary', data, layout)
+{% endblock %}

templates/layout.html

@@ -13,8 +13,14 @@
     <title>{% block title %}Inventory{% endblock %}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
+    <link
+        href="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/dt-2.3.2/b-3.2.3/b-colvis-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.4/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sr-1.4.1/datatables.min.css"
+        rel="stylesheet" integrity="sha384-gdnBcErvPbrURVoR9w3NhVMliw+ZmcTCmq+64xj2Ksx21nRJFX3qW0zFvBotL5rm"
+        crossorigin="anonymous">
     <style>
-        {% block style %}
+        {
+            % block style %
+        }
 
         .sticky-top {
             position: sticky;
@@ -41,7 +47,9 @@
             background-color: white;
         }
 
-            {% endblock %}
+            {
+            % endblock %
+        }
     </style>
 </head>
 
@@ -75,6 +83,11 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"
         integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script
+        src="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/dt-2.3.2/b-3.2.3/b-colvis-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.4/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sr-1.4.1/datatables.min.js"
+        integrity="sha384-tNYRX2RiDDDRKCJgPF8Pw3rTxC1GUe1pt5qH1SBmwcazrEUj7Ii4C1Tz9wCCRUI4"
+        crossorigin="anonymous"></script>
     <script src="{{ url_for('static', filename='js/datalist.js') }}"></script>
     <script>
         const searchInput = document.querySelector('#search');
@@ -83,6 +96,15 @@
         searchInput.addEventListener('input', () => {
             searchButton.disabled = searchInput.value.trim() === '';
         });
+
+        document.addEventListener("DOMContentLoaded", function () {
+            $('table[id^="datatable-"]').DataTable({
+                pageLength: 25,
+                lengthChange: false,
+                ordering: true,
+                stateSave: true
+            })
+        })
         {% block script %} {% endblock %}
     </script>
 </body>

templates/table.html

@@ -11,5 +11,5 @@
 ) }}
 
 {{ tables.render_table(header, rows, entry_route) }}
-{{ tables.render_pagination(endpoint, page, has_prev, has_next, total_pages, extra_args=extra_args) }}
+{# { tables.render_pagination(endpoint, page, has_prev, has_next, total_pages, extra_args=extra_args) } #}
 {% endblock %}