update

templates/customers/note_form.html

@@ -0,0 +1,11 @@
+{% load i18n static crispy_forms_filters %}
+
+
+    <form method="post" action="{% url 'add_note_to_customer' customer.pk %}" enctype="multipart/form-data">
+
+    {% csrf_token %}
+    {{ form|crispy }}
+
+
+          <button type="submit" class="btn btn-sm btn-success w-100">{{ _("Add") }}</button>
+  </form>

templates/customers/view_customer.html

@@ -223,7 +223,45 @@
             </div>
           </div>
         </div>
-
-{% include 'partials/notes.html' %}
+<div class="modal fade" id="noteModal" tabindex="-1" aria-labelledby="noteModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header justify-content-between align-items-start gap-5 px-4 pt-4 pb-3 border-0">
+        <h4 class="modal-title" id="noteModalLabel">{% trans 'Notes' %}</h4>
+        <button class="btn p-0 text-body-quaternary fs-6" data-bs-dismiss="modal" aria-label="Close">
+            <span class="fas fa-times"></span>
+        </button>
       </div>
+      <div class="modal-body">
+        <!-- Content will be loaded here via AJAX -->
+      </div>
+    </div>
+  </div>
+</div>
+      </div>
+    <script>
+document.addEventListener("DOMContentLoaded", function () {
+    const noteModal = document.getElementById("noteModal");
+    const modalTitle = document.getElementById("noteModalLabel");
+
+    const modalBody = noteModal.querySelector(".modal-body");
+
+    noteModal.addEventListener("show.bs.modal", function (event) {
+        const button = event.relatedTarget;
+        const url = button.getAttribute("data-url");
+        const title = button.getAttribute("data-note-title");
+
+        fetch(url)
+            .then((response) => response.text())
+            .then((html) => {
+                modalBody.innerHTML = html;
+                modalTitle.innerHTML = title;
+            })
+            .catch((error) => {
+                modalBody.innerHTML = '<p class="text-danger">{% trans 'Error loading form. Please try again later' %}.</p>';
+                console.error("Error loading form:", error);
+            });
+    });
+});
+</script>
 {% endblock %}