- **Reorganized and refactored HTML templates for data import transactions:**

  - Removed outdated templates: `data_import_job_txs_imported.html`, `data_import_job_txs_table.html`, and `data_import_job_txs.html`.
  - Introduced new reusable templates:
    - `includes/staged_txs_form_card.html` for compact card-based transaction forms.
    - `import_job_txs.html` for centralized transaction display and actions handling.
  - Streamlined template structure by implementing improved layout with clearer separation of concerns.
  - Enhanced visual styles and dynamic behavior:
    - Added match indicators, account mapping helpers, and conditional logic tags for visual cues.
    - Incorporated responsive styles and conditional element visibility.

- **Updated template logic for staged transaction and import workflows:**
  - Consolidated logic into reusable components to reduce redundancy.
  - Improved handling of `matches_found`, `is_matched`, and import validation for staged transactions with intuitive actions.

### **Summary**
Replaced legacy transaction templates with modular and reusable components for improved clarity, maintainability, and user experience. Enhanced workflows for staged and imported transaction handling.

### **Backwards Compatibility**
These changes are not backwards compatible. Old templates were removed and replaced with redesigned structures and updated logic.

Author: elarroba

django_ledger/templates/django_ledger/components/menu.html

@@ -70,7 +70,6 @@
                     </div>
                 </div>
             {% endif %}
-
         {% endfor %}
     </div>
 {% endif %}

django_ledger/templates/django_ledger/data_import/data_import_job_txs.html

@@ -0,0 +1,68 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+
+{% block view_content %}
+    <div class="box">
+        <div class="columns is-multiline">
+            <div class="column is-12">
+                <div class="level">
+                    <div class="level-left">
+                        <div>
+                            <p class="is-size-5 has-text-weight-semibold">{{ import_job_model.description }}</p>
+                            <p class="is-size-6 has-text-grey">
+                                {{ import_job_model.bank_account_model }}
+                                &middot; {{ import_job_model.created }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="level-right">
+                        <a class="button is-info is-light mr-2"
+                           href="{{ import_job_model.get_update_url }}">
+                            {% trans 'Update' %}
+                        </a>
+                        <form class="mr-2" action="{{ import_job_model.get_data_import_reset_url }}" method="post">
+                            {% csrf_token %}
+                            <button class="button is-warning" type="submit">{% trans 'Reset Job' %}</button>
+                        </form>
+                        <a class="button is-dark"
+                           href="{{ import_job_model.get_list_url }}">{% trans 'Back' %}</a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Progress visual -->
+            <div class="column is-12">
+                <div class="box" style="border-radius: 10px;">
+                    <div class="level is-mobile">
+                        <div class="level-left">
+                            <p class="is-size-6 has-text-weight-semibold">{% trans 'Import Progress' %}</p>
+                        </div>
+                        <div class="level-right">
+                            <span class="tag is-info is-light mr-1">{% trans 'Total' %}: {{ progress.total }}</span>
+                            <span class="tag is-success is-light mr-1">{% trans 'Imported' %}: {{ progress.imported }}</span>
+                            <span class="tag is-warning is-light mr-1">{% trans 'Ready' %}: {{ progress.ready }}</span>
+                            <span class="tag is-danger is-light">{% trans 'Pending' %}: {{ progress.pending }}</span>
+                        </div>
+                    </div>
+                    <progress class="progress is-primary" value="{{ progress.pct }}" max="100">{{ progress.pct }}%
+                    </progress>
+                    <p class="has-text-right is-size-7 has-text-grey">{{ progress.pct }}% {% trans 'complete' %}</p>
+                </div>
+            </div>
+
+            <!-- Pending Transactions Table (interactive overview) -->
+            <div class="column is-12">
+                <h2 class="is-size-4 mb-2">{% trans 'Pending Transactions' %}</h2>
+                {% import_job_txs_pending import_job_model %}
+            </div>
+
+            <!-- Imported Transactions Table (reuse tag) -->
+            <div class="column is-12 mb-4">
+                <h2 class="is-size-4 mb-2">{% trans 'Imported / Matched Transactions' %}</h2>
+                {% import_job_txs_imported import_job_model %}
+            </div>
+        </div>
+    </div>
+{% endblock %}

django_ledger/templates/django_ledger/data_import/import_job_detail.html

@@ -11,6 +11,6 @@
         <a class="button is-dark"
            href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
             {% trans 'Back' %}</a>
-        {% data_import_job_list_table %}
+        {% import_job_list_table import_job_list %}
     </div>
 {% endblock %}