change marker dimension

- partsTable: reduce excessive height to prevent oversized rendering
- annotationsModal: fix "Torna alle Parti" button behavior to return to parts view

public/userarea/annotationsModal.js

@@ -12,12 +12,16 @@ $(document).ready(function () {
 
     let photoAnnotations = {};
     let partColors = {};
+    let partSizes = {}; // memorizza la dimensione specifica per parte
     let selectedPartNumber = null;
     let unsavedChanges = false;
     let fabricCanvas = null;
     let descriptionTextbox = null;
     let markerObjects = {};
+    let nextMarkerId = 1;
     let partsListData = [];
+    // DIMENSIONE GLOBALE MARKER
+    let globalMarkerSize = 16;
 
     // ===================
     // MODAL INITIALIZATION
@@ -29,6 +33,8 @@ $(document).ready(function () {
             trfHeader,
         });
 
+        $("#annotationsModal").attr("data-iddatadb", iddatadb);
+
         if (!iddatadb && !idquotations) {
             const errorMsg = $(
                 '<div class="alert alert-danger temp-alert" role="alert">Errore: ID TRF mancante. Impossibile inizializzare il modale delle annotazioni.</div>',
@@ -67,6 +73,9 @@ $(document).ready(function () {
             });
         }
         modal.show();
+        // Inizializza slider dimensione marker
+        $("#markerSizeSlider").val(globalMarkerSize);
+        $("#markerSizeValue").text(globalMarkerSize + "px");
 
         // Debug: Verifica presenza elementi DOM
         console.log(
@@ -128,6 +137,7 @@ $(document).ready(function () {
         }
         descriptionTextbox = null;
         markerObjects = {};
+        globalMarkerSize = 16;
         $("#photoSelectorContainerAnnotations").empty().hide();
         $("#samplePhotoAnnotations").attr("src", "");
         $("#partsListAnnotations").empty();
@@ -144,6 +154,30 @@ $(document).ready(function () {
         $(":focus").blur();
     });
 
+    // SLIDER DIMENSIONE MARKER
+    $(document)
+        .off("input", "#markerSizeSlider")
+        .on("input", "#markerSizeSlider", function () {
+            globalMarkerSize = parseInt($(this).val());
+            $("#markerSizeValue").text(globalMarkerSize + "px");
+
+            partsListData.forEach(function (part) {
+                if (part && part.part_number != null) {
+                    partSizes[part.part_number] = globalMarkerSize;
+                }
+            });
+
+            $("#partsListAnnotations .marker-size-slider").val(
+                globalMarkerSize,
+            );
+            $("#partsListAnnotations .marker-size-value").text(
+                globalMarkerSize + "px",
+            );
+
+            updateMarkers();
+            markUnsaved();
+        });
+
     // ===================
     // PHOTO LOADERS
     // ===================
@@ -347,22 +381,13 @@ $(document).ready(function () {
 
                     const partColor =
                         partColors[selectedPartNumber] || "#ff0000";
-                    const existingMarker = photoAnnotations[
-                        currentPhoto
-                    ].markers.find((m) => m.partNumber == selectedPartNumber);
-
-                    if (existingMarker) {
-                        existingMarker.x = x;
-                        existingMarker.y = y;
-                        existingMarker.color = partColor;
-                    } else {
                     photoAnnotations[currentPhoto].markers.push({
+                        id: nextMarkerId++,
                         partNumber: selectedPartNumber,
                         x,
                         y,
                         color: partColor,
                     });
-                    }
 
                     console.log("Marker aggiunto/spostato:", {
                         partNumber: selectedPartNumber,
@@ -372,8 +397,6 @@ $(document).ready(function () {
                     });
                     updateMarkers();
                     markUnsaved();
-                    selectedPartNumber = null;
-                    $("#partsListAnnotations li").removeClass("active");
                 });
 
                 fabricCanvas.upperCanvasEl.focus();
@@ -465,113 +488,89 @@ $(document).ready(function () {
         );
 
     // ===================
-    // BACK TO PARTS MODAL
+    // TORNA AL MODALE PARTI (modal_partsTable.php)
     // ===================
     $(document)
         .off("click.backToParts", "#backToPartsBtnAnnotations")
         .on("click.backToParts", "#backToPartsBtnAnnotations", function (e) {
             e.preventDefault();
             e.stopPropagation();
-            console.log(
-                "Evento click su #backToPartsBtnAnnotations, ID elemento:",
-                $(this).attr("id"),
-            );
-            if (!$("#backToPartsBtnAnnotations").length) {
-                console.error(
-                    "Pulsante #backToPartsBtnAnnotations non trovato nel DOM.",
-                );
-                const errorMsg = $(
-                    '<div class="alert alert-danger temp-alert" role="alert">Errore: Pulsante #backToPartsBtnAnnotations non trovato nel DOM.</div>',
-                );
-                $("#annotationsModal .modal-body").prepend(errorMsg);
-                setTimeout(function () {
-                    errorMsg.fadeOut(500, function () {
-                        $(this).remove();
-                    });
-                }, 5000);
-                return;
-            }
 
-            // Controlla modifiche non salvate
             if (
                 unsavedChanges &&
                 !confirm(
                     "Hai modifiche non salvate. Vuoi davvero tornare al modale delle parti?",
                 )
             ) {
-                console.log(
-                    "Tornare al modale delle parti annullato a causa di modifiche non salvate.",
-                );
                 return;
             }
 
-            // Chiudi annotationsModal
-            const annotationsModalElement =
-                document.getElementById("annotationsModal");
-            const annotationsModal = bootstrap.Modal.getInstance(
-                annotationsModalElement,
-            );
-            if (annotationsModal) {
-                annotationsModal.hide();
-            } else {
-                console.error(
-                    "Impossibile trovare l'istanza del modale #annotationsModal.",
-                );
-            }
-
-            // Apri partsModal
             const iddatadb = $("#annotationsModal").data("iddatadb");
             const idquotations = $("#annotationsModal").data("idquotations");
             const trfHeader = $("#trfHeaderAnnotations").text();
-            console.log("Apertura partsModal con:", {
+
+            // CHIUDI MODALE ANNOTAZIONI IN MODO SICURO
+            const annotationsModalElement =
+                document.getElementById("annotationsModal");
+            if (annotationsModalElement) {
+                const modalInstance = bootstrap.Modal.getInstance(
+                    annotationsModalElement,
+                );
+                if (modalInstance) {
+                    modalInstance.hide();
+                } else {
+                    $(annotationsModalElement).modal("hide"); // fallback jQuery
+                }
+            }
+            console.log("Torno a modal_partsTable.php con:", {
                 iddatadb,
                 idquotations,
                 trfHeader,
             });
+            // CARICA E APRI MODALE PARTI
+            $.get(
+                "modal_partsTable.php",
+                {
+                    iddatadb: iddatadb || "",
+                    idquotations: idquotations || "",
+                    trfHeader: trfHeader,
+                },
+                function (data) {
+                    // Rimuovi vecchio modale (con ID corretto)
+                    $("#partsTableModal").remove();
+                    $(".modal-backdrop").remove();
 
-            const partsModalElement = document.getElementById("partsModal");
+                    // Aggiungi nuovo modale
-            if (!partsModalElement) {
+                    $("body").append(data);
-                console.error("Elemento #partsModal non trovato nel DOM.");
-                const errorMsg = $(
-                    '<div class="alert alert-danger temp-alert" role="alert">Errore: Il modale delle parti non è presente nel DOM.</div>',
-                );
-                $("#annotationsModal .modal-body").prepend(errorMsg);
-                setTimeout(function () {
-                    errorMsg.fadeOut(500, function () {
-                        $(this).remove();
-                    });
-                }, 5000);
-                return;
-            }
 
-            let partsModal = bootstrap.Modal.getInstance(partsModalElement);
+                    // Apri con Bootstrap 5
-            if (!partsModal) {
+                    const partsModalElement =
-                partsModal = new bootstrap.Modal(partsModalElement, {
+                        document.getElementById("partsTableModal");
+                    if (partsModalElement) {
+                        const modal = new bootstrap.Modal(partsModalElement, {
                             backdrop: true,
                             keyboard: true,
                             focus: true,
                         });
-            }
+                        modal.show();
-
-            // Inizializza il modale delle parti
-            if (typeof window.initPartsModal === "function") {
-                window.initPartsModal(iddatadb, idquotations, trfHeader);
-                partsModal.show();
-                console.log("partsModal aperto con successo.");
                     } else {
-                console.error("Funzione initPartsModal non definita.");
+                        let iddatadb =
-                const errorMsg = $(
+                            $("#annotationsModal").attr("data-iddatadb");
-                    '<div class="alert alert-danger temp-alert" role="alert">Errore: Funzione initPartsModal non trovata.</div>',
-                );
-                $("#annotationsModal .modal-body").prepend(errorMsg);
-                setTimeout(function () {
-                    errorMsg.fadeOut(500, function () {
-                        $(this).remove();
-                    });
-                }, 5000);
-            }
-        });
 
+                        $(
+                            "button.parts-btn[data-iddatadb='" +
+                                iddatadb +
+                                "']",
+                        ).trigger("click");
+                    }
+                },
+            ).fail(function (xhr) {
+                console.error("Errore caricamento modale parti:", xhr);
+                alert(
+                    "Errore 404: modal_partsTable.php non trovato o errore server.",
+                );
+            });
+        });
     // ===================
     // PARTS LIST
     // ===================
@@ -634,11 +633,18 @@ $(document).ready(function () {
                     .join("");
                 const listItem = `
                   <li class="list-group-item" data-part-number="${partNumber}">
-                        <span class="part-info" style="cursor: pointer;">${partNumber} - ${partDescription}</span>
+<span class="part-info" style="cursor: pointer;">${partNumber} - ${partDescription}</span>
-                        <div class="color-picker-container" style="display: inline-block; position: relative; overflow: visible; z-index: 2000;">
+<div class="color-picker-container" style="display:inline-block; position: relative; overflow: visible; z-index: 2000; margin-left:5px;">
-                            <div class="color-option selected-color" style="background-color: ${partColor}; width: 20px; height: 20px; display: inline-block; margin-left: 5px; cursor: pointer; pointer-events: auto;"></div>
+    <div class="color-option selected-color" style="background-color: ${partColor}; width: 20px; height: 20px; display: inline-block; cursor: pointer; pointer-events: auto;"></div>
     <div class="color-picker" style="display: none; position: absolute; right: 0; z-index: 2000; background: #fff; border: 1px solid #ccc; padding: 5px;">${colorOptions}</div>
-                        </div>
+</div>
+<div style="display:inline-flex; align-items:center; gap:4px; margin-left:5px;">
+    <input type="range" class="marker-size-slider" 
+           min="12" max="48" step="2" 
+           value="${partSizes[partNumber] || globalMarkerSize}"
+           style="width:70px;">
+    <span class="marker-size-value" style="font-size:0.8rem;">${partSizes[partNumber] || globalMarkerSize}px</span>
+</div>
                     </li>`;
                 partsListElement.append(listItem);
             }
@@ -663,8 +669,21 @@ $(document).ready(function () {
                     );
                     return;
                 }
+
                 const $listItem = $(this);
-                selectedPartNumber = $listItem.data("part-number");
+                const partNumber = $listItem.data("part-number");
+
+                if (
+                    selectedPartNumber == partNumber &&
+                    $listItem.hasClass("active")
+                ) {
+                    selectedPartNumber = null;
+                    $listItem.removeClass("active");
+
+                    return;
+                }
+
+                selectedPartNumber = partNumber;
                 $listItem.addClass("active").siblings().removeClass("active");
                 console.log(
                     "Parte selezionata tramite riga:",
@@ -687,30 +706,88 @@ $(document).ready(function () {
                 $picker.toggle();
             });
 
+        // === Gestione cambio colore ===
         partsListElement
             .off("click.colorOption")
             .on("click.colorOption", ".color-option", function (e) {
                 e.stopPropagation();
                 e.preventDefault();
+
                 const $this = $(this);
                 const color = $this.data("color");
                 const $listItem = $this.closest("li");
                 const partNumber = $listItem.data("part-number");
+
                 console.log(
                     "Cliccato .color-option, colore:",
                     color,
                     "per parte:",
                     partNumber,
                 );
+
+                // Salva il nuovo colore
                 partColors[partNumber] = color;
+
+                // Aggiorna il colore visivo nel selettore
                 $listItem
                     .find(".selected-color")
                     .css("background-color", color);
+
+                let currentPhoto = $("#samplePhotoAnnotations").attr("src");
+                let annotations = photoAnnotations[currentPhoto];
+
+                if (annotations) {
+                    annotations.markers.forEach(function (m) {
+                        if (m.partNumber == partNumber) {
+                            m.color = color;
+                            let group = markerObjects[m.id];
+
+                            if (group) {
+                                let circle = group.item(0);
+
+                                circle.set("fill", color);
+                                circle.set("stroke", color);
+                            }
+                        }
+                    });
+                    fabricCanvas.renderAll();
+                }
+
+                // Chiudi la palette e aggiorna canvas
                 $this.closest(".color-picker").hide();
                 updateMarkers();
                 markUnsaved();
             });
 
+        // === Slider locale per dimensione marker ===
+        partsListElement
+            .off("input.localMarkerSize")
+            .on("input.localMarkerSize", ".marker-size-slider", function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+
+                // Riferimenti alla parte e valore scelto
+                const $slider = $(this);
+                const partNumber = $slider.closest("li").data("part-number");
+                const newSize = parseInt($slider.val());
+
+                // Aggiorna il valore visivo accanto allo slider
+                $slider.siblings(".marker-size-value").text(newSize + "px");
+
+                // Memorizza la nuova dimensione per quella parte
+                partSizes[partNumber] = newSize;
+
+                // Aggiorna i marker sul canvas
+                updateMarkers();
+
+                // Segnala modifiche non salvate
+                markUnsaved();
+
+                console.log(
+                    `Dimensione marker aggiornata per parte ${partNumber}: ${newSize}px`,
+                );
+            });
+
         $(document)
             .off("click.colorPicker")
             .on("click.colorPicker", function (e) {
@@ -860,9 +937,9 @@ $(document).ready(function () {
             "updateMarkers chiamato, markerObjects:",
             Object.keys(markerObjects),
         );
-        for (let partNumber in markerObjects) {
+        for (let markerId in markerObjects) {
-            fabricCanvas.remove(markerObjects[partNumber]);
+            fabricCanvas.remove(markerObjects[markerId]);
-            delete markerObjects[partNumber];
+            delete markerObjects[markerId];
         }
         markerObjects = {};
 
@@ -892,8 +969,10 @@ $(document).ready(function () {
                 return;
             }
 
-            const radius = 12;
+            const size = partSizes[marker.partNumber] || globalMarkerSize;
-            const fontSize = 16;
+            const radius = size / 2;
+            const fontSize = Math.max(10, Math.round(size * 0.65));
+
             const markerColor =
                 marker.color || partColors[marker.partNumber] || "#ff0000";
 
@@ -941,6 +1020,9 @@ $(document).ready(function () {
                 lockRotation: true,
             });
 
+            group.markerId = marker.id;
+            group.partNumber = marker.partNumber;
+
             group.on("moving", function () {
                 marker.x = this.left / photoData.scale;
                 marker.y = this.top / photoData.scale;
@@ -953,7 +1035,7 @@ $(document).ready(function () {
             });
 
             fabricCanvas.add(group);
-            markerObjects[marker.partNumber] = group;
+            markerObjects[marker.id] = group;
         });
 
         fabricCanvas.renderAll();
@@ -1013,7 +1095,7 @@ $(document).ready(function () {
             scaleY: 1,
             backgroundColor: "transparent",
             fontFamily: "Arial",
-            fontSize: 24,
+            fontSize: Math.max(16, Math.round(globalMarkerSize * 0.8)),
             fill: "#000000",
             padding: 10,
             editable: false,
@@ -1107,9 +1189,9 @@ $(document).ready(function () {
             }
         }
 
-        for (let partNumber in markerObjects) {
+        for (let markerId in markerObjects) {
-            fabricCanvas.remove(markerObjects[partNumber]);
+            fabricCanvas.remove(markerObjects[markerId]);
-            delete markerObjects[partNumber];
+            delete markerObjects[markerId];
         }
         markerObjects = {};
 
@@ -1144,9 +1226,9 @@ $(document).ready(function () {
             photoAnnotations[currentPhoto].markers.length > 0
         ) {
             const lastMarker = photoAnnotations[currentPhoto].markers.pop();
-            if (markerObjects[lastMarker.partNumber]) {
+            if (markerObjects[lastMarker.id]) {
-                fabricCanvas.remove(markerObjects[lastMarker.partNumber]);
+                fabricCanvas.remove(markerObjects[lastMarker.id]);
-                delete markerObjects[lastMarker.partNumber];
+                delete markerObjects[lastMarker.id];
                 fabricCanvas.renderAll();
             }
             console.log("Ultimo marker rimosso:", lastMarker);

public/userarea/modal_annotations.php

@@ -1,13 +1,22 @@
 <!-- Modal per la gestione delle annotazioni -->
 <div class="modal fade" id="annotationsModal" tabindex="-1" aria-labelledby="annotationsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
+    <div class="modal-dialog modal-xl" style="max-width: 90% !important; width: 90% !important;">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="annotationsModalLabel">Annotazioni per TRF: <span id="trfHeaderAnnotations"></span></h5>
+
+                <!-- SLIDER PER DIMENSIONE MARKER -->
+                <div style="display: flex; align-items: center; gap: 10px; margin-left: 20px;">
+                    <label for="markerSizeSlider" style="margin: 0; font-size: 0.9rem; white-space: nowrap;">Dimensione marker:</label>
+                    <input type="range" id="markerSizeSlider" min="16" max="48" value="16" step="2" style="width: 120px;">
+                    <span id="markerSizeValue" style="font-weight: bold; min-width: 30px;">24px</span>
+                </div>
+
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div class="row">
+                    <!-- COLONNA SINISTRA RIDOTTA -->
                     <div class="col-md-6">
                         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                             <h6 style="margin: 0;">Elenco Parti</h6>
@@ -16,15 +25,17 @@
                                 <label for="showMixPartsAnnotations" style="font-size: 0.9rem;">Mix</label>
                             </div>
                         </div>
-                        <ul id="partsListAnnotations" class="list-group"></ul>
+                        <ul id="partsListAnnotations" class="list-group" style="max-height: 500px; overflow-y: auto;"></ul>
                     </div>
+
+                    <!-- COLONNA DESTRA PIÙ GRANDE -->
                     <div class="col-md-6">
                         <h6>Foto del Campione</h6>
                         <div style="display: flex; align-items: center; margin-bottom: 10px;">
                             <button type="button" class="btn btn-primary btn-sm" id="downloadPhotoBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i></button>
                             <div id="photoSelectorContainerAnnotations" style="display: none;"></div>
                         </div>
-                        <div style="position: relative; width: 100%; min-height: 400px;">
+                        <div style="position: relative; width: 100%; min-height: 500px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden;">
                             <img id="samplePhotoAnnotations" src="" alt="Foto del campione" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;">
                             <canvas id="photoCanvasAnnotations" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
                             <canvas id="overlayCanvasAnnotations" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas>
@@ -216,4 +227,32 @@
         transform: translateX(-50%);
         z-index: 3000;
     }
+
+    /* Stile per lo slider */
+    #markerSizeSlider {
+        -webkit-appearance: none;
+        height: 6px;
+        border-radius: 3px;
+        background: #ddd;
+        outline: none;
+    }
+
+    #markerSizeSlider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #007bff;
+        cursor: pointer;
+    }
+
+    #markerSizeSlider::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #007bff;
+        cursor: pointer;
+        border: none;
+    }
 </style>

public/userarea/modal_partsTable.php

@@ -6,7 +6,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <div class="row">
+                <div class="row parts-row">
                     <div class="col-md-9">
                         <!-- Prima riga: Elenco Parti, Rinumera, Voce -->
                         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
@@ -14,6 +14,10 @@
                             <div style="display: flex; align-items: center;">
                                 <button type="button" class="btn btn-info btn-sm" id="renumberPartsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rinumera Parti</button>
                                 <button type="button" class="btn btn-secondary btn-sm ms-2" id="toggleVoiceBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;"><i class="fas fa-microphone"></i> Voce</button>
+								<button type="button" class="btn btn-primary btn-sm ms-2" id="showHideImageBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">
+									<i class="fas fa-eye-slash" style="font-size: 0.8rem;"></i>
+									<i class="fas fa-image ms-1" style="font-size: 0.8rem;"></i>
+								</button>
                             </div>
                         </div>
                         <!-- Seconda riga: +, M, MacroMatrice, Matrice globale, Propaga -->

public/userarea/partsTable.js

@@ -1339,6 +1339,7 @@ $(document).ready(function () {
                     partId,
                     currentValue,
                     selectedMacro,
+					true
                 );
             });
         });
@@ -1415,6 +1416,7 @@ $(document).ready(function () {
         partId,
         idmatrice,
         selectedMacro = null,
+		fromFilter = false
     ) {
         if (typeof $.fn.select2 === "undefined") {
             $select.replaceWith(
@@ -1484,16 +1486,24 @@ $(document).ready(function () {
                     true,
                     true,
                 );
-                $select.append(option).trigger("change");
+
+				if (!fromFilter) $select.append(option).trigger("change");
+				else $select.append(option);
+
                 partMatrice[partNumber] = matrice.IdMatrice;
             } else {
                 // Aggiusta valore non valido
-                $select.val(null).trigger("change");
+				if (!fromFilter) $select.val(null).trigger("change");
+                
                 partMatrice[partNumber] = null;
             }
+        } else {
+			$select.val(null).trigger("change", [{ skipHandler: true }]);
 		}
 
-        $select.on("change", function () {
+        $select.on("change", function (event, data) {
+			if (data && data?.skipHandler) return;
+			
             const idmatrice = $(this).val();
             const $row = $(this).closest("tr");
             const partId = $row.data("part-id");
@@ -2000,3 +2010,19 @@ $(document).on("click", ".save-common-note-btn", function () {
         markUnsaved();
     }
 });
+
+$(document).on("click", "#showHideImageBtn", function () {
+    let mainRow = $(this).closest(".parts-row");
+    let photoContainer = mainRow.find(".col-md-3");
+    let tableContainer = mainRow.find("#partsTable").closest("div[class*='col-md']");
+
+    if (photoContainer.hasClass("d-none")) {
+        photoContainer.removeClass("d-none");
+        tableContainer.removeClass("col-md-12").addClass("col-md-9");
+        $(this).html("<i class='fas fa-eye-slash' style='font-size: 0.8rem;'></i><i class='fas fa-image ms-1' style='font-size: 0.8rem;'></i>");
+    } else {
+        photoContainer.addClass("d-none");
+        tableContainer.removeClass("col-md-9").addClass("col-md-12");
+        $(this).html("<i class='fas fa-eye' style='font-size: 0.8rem;'></i><i class='fas fa-image ms-1' style='font-size: 0.8rem;'></i>");
+    }
+});

public/userarea/quotations.php

@@ -399,14 +399,18 @@ if (isset($_GET['edit_id'])) {
         <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
         <?php include('include/footer.php'); ?>
     </div>
-    <?php include('modal_parts.php'); ?>
+    <div id="partsModalContainer"></div>
-    <?php include('photos_functions.php'); ?>
+    <div id="annotationsModalContainer"></div>
+    <?php include 'photos_functions.php'; ?>
+
     <?php include('jsinclude.php'); ?>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
     <script src="photos.js"></script>
-    <script src="parts.js"></script>
+    <script src="annotationsModal.js"></script>
+    <script src="partsTable.js"></script>
+
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             // Mostra messaggi di stato se presenti
@@ -423,6 +427,45 @@ if (isset($_GET['edit_id'])) {
                 }, 5000);
             }
 
+            $(document).on('click', '.parts-btn', function() {
+                const idquotations = $(this).data('idquotations');
+                $.ajax({
+                    url: 'modal_partsTable.php',
+                    method: 'GET',
+                    data: {
+                        idquotations: idquotations
+                    },
+                    success: function(response) {
+                        $('#partsModalContainer').html(response);
+                        const modalElement = document.getElementById('partsModal');
+                        if (!modalElement) return;
+                        $("#trfHeader").text(`Quotation #${idquotations}`);
+                        $("#partsModal").data("idquotations", idquotations);
+                        let modal = bootstrap.Modal.getInstance(modalElement) || new bootstrap.Modal(modalElement, {
+                            backdrop: true
+                        });
+                        modal.show();
+                        if (typeof window.loadParts === 'function') window.loadParts(null, idquotations);
+                    },
+                    error: function(xhr, status, error) {
+                        alert('Errore nel caricamento del modale: ' + error);
+                    }
+                });
+            });
+
+            $(document).on('hidden.bs.modal', '#partsModal', function() {
+                $('#partsModalContainer').empty();
+                $('.modal-backdrop').remove();
+                $('body').removeClass('modal-open').css('padding-right', '');
+            });
+
+            $(document).on('hidden.bs.modal', '#annotationsModal', function() {
+                $('#annotationsModalContainer').empty();
+                $('.modal-backdrop').remove();
+                $('body').removeClass('modal-open').css('padding-right', '');
+            });
+
+
             // Inizializza DataTables se non siamo in modalità modifica
             if (!document.querySelector('#editForm')) {
                 $('#quotationsTable').DataTable({
@@ -524,12 +567,7 @@ if (isset($_GET['edit_id'])) {
     </script>
 
     <!-- Modale per le foto in quotations.php -->
-    <div class="modal" id="photosModal">
+
-        <div class="modal-content">
-            <span class="close-btn">&times;</span>
-            <div class="popup-content"></div>
-        </div>
-    </div>
 
 </body>