added matrice to identification parts

.env

@@ -1,47 +0,0 @@
-APP_ENV=production
-APP_DEBUG=true
-APP_KEY=base64:C+sutHm6xP5sE4QXhoZFhYjArlVN11s2mDU1F8beUkM=
-APP_URL=http://vanguard.test
-
-LOG_CHANNEL=stack
-
-DB_CONNECTION=mysql
-DB_HOST="localhost"
-DB_DATABASE="trfcertest"
-DB_USERNAME="solocla"
-DB_PASSWORD="!Massarosa2"
-DB_PREFIX="auth_"
-
-BROADCAST_DRIVER=log
-CACHE_DRIVER=file
-QUEUE_DRIVER=sync
-SESSION_DRIVER=database
-SESSION_LIFETIME=120
-
-REDIS_HOST=127.0.0.1
-REDIS_PASSWORD=null
-REDIS_PORT=6379
-
-MAIL_MAILER=mail
-MAIL_FROM_NAME=Vanguard
-MAIL_FROM_ADDRESS=vanguard@test.dev
-MAIL_HOST=smtp.mailtrap.io
-MAIL_PORT=2525
-MAIL_USERNAME=null
-MAIL_PASSWORD=null
-MAIL_ENCRYPTION=null
-
-PUSHER_APP_ID=
-PUSHER_APP_KEY=
-PUSHER_APP_SECRET=
-PUSHER_APP_CLUSTER=mt1
-
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
-
-# Credenziali API VisualLims
-API_BASE_URL=https://93.43.5.102/limsapi
-API_USERNAME=WebApiUser
-API_PASSWORD=webapiuser01
-
-BASE_URL=http://localhost:8000/userarea/

public/userarea/class/curl_auth_debug.log

@@ -1,36 +0,0 @@
-*   Trying 93.43.5.102:443...
-* Connected to 93.43.5.102 (93.43.5.102) port 443
-* ALPN: curl offers h2,http/1.1
-* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
-* ALPN: server accepted h2
-* Server certificate:
-*  subject: C=FR; ST=Île-de-France; O=Bureau Veritas; CN=bvcpsitaly-elims.it
-*  start date: Feb 17 00:00:00 2025 GMT
-*  expire date: Feb 17 23:59:59 2026 GMT
-*  issuer: C=US; O=Corporation Service Company; CN=Corporation Service Company RSA OV SSL CA
-*  SSL certificate verify result: unable to get local issuer certificate (20), continuing anyway.
-* using HTTP/2
-* [HTTP/2] [1] OPENED stream for https://93.43.5.102/limsapi/api/authentication/authenticate
-* [HTTP/2] [1] [:method: POST]
-* [HTTP/2] [1] [:scheme: https]
-* [HTTP/2] [1] [:authority: 93.43.5.102]
-* [HTTP/2] [1] [:path: /limsapi/api/authentication/authenticate]
-* [HTTP/2] [1] [content-type: application/json]
-* [HTTP/2] [1] [accept: application/json]
-* [HTTP/2] [1] [content-length: 51]
-> POST /limsapi/api/authentication/authenticate HTTP/2
-Host: 93.43.5.102
-Content-Type: application/json
-Accept: application/json
-Content-Length: 51
-
-< HTTP/2 200 
-< cache-control: max-age=0
-< content-type: application/json; charset=utf-8
-< server: Microsoft-IIS/10.0
-< strict-transport-security: max-age=2592000
-< x-powered-by: ASP.NET
-< x-content-type-options: nosniff
-< date: Mon, 08 Sep 2025 11:59:10 GMT
-< 
-* Connection #0 to host 93.43.5.102 left intact

public/userarea/class/curl_request_debug.log

@@ -1,35 +0,0 @@
-*   Trying 93.43.5.102:443...
-* Connected to 93.43.5.102 (93.43.5.102) port 443
-* ALPN: curl offers h2,http/1.1
-* SSL connection using TLSv1.2 / ECDHE-RSA-AES256-GCM-SHA384
-* ALPN: server accepted h2
-* Server certificate:
-*  subject: C=FR; ST=Île-de-France; O=Bureau Veritas; CN=bvcpsitaly-elims.it
-*  start date: Feb 17 00:00:00 2025 GMT
-*  expire date: Feb 17 23:59:59 2026 GMT
-*  issuer: C=US; O=Corporation Service Company; CN=Corporation Service Company RSA OV SSL CA
-*  SSL certificate verify result: unable to get local issuer certificate (20), continuing anyway.
-* using HTTP/2
-* [HTTP/2] [1] OPENED stream for https://93.43.5.102/limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues
-* [HTTP/2] [1] [:method: GET]
-* [HTTP/2] [1] [:scheme: https]
-* [HTTP/2] [1] [:authority: 93.43.5.102]
-* [HTTP/2] [1] [:path: /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues]
-* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMzOTk1MSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.JywaxXVFGeXH44RCOZUPfDGuEr5dt0cHAWN_vmIiFaw]
-* [HTTP/2] [1] [accept: application/json]
-> GET /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues HTTP/2
-Host: 93.43.5.102
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMzOTk1MSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.JywaxXVFGeXH44RCOZUPfDGuEr5dt0cHAWN_vmIiFaw
-Accept: application/json
-
-< HTTP/2 200 
-< cache-control: max-age=0
-< content-type: application/json; odata.metadata=minimal; odata.streaming=true; charset=utf-8
-< server: Microsoft-IIS/10.0
-< strict-transport-security: max-age=2592000
-< odata-version: 4.0
-< x-powered-by: ASP.NET
-< x-content-type-options: nosniff
-< date: Mon, 08 Sep 2025 11:59:14 GMT
-< 
-* Connection #0 to host 93.43.5.102 left intact

public/userarea/error_log.txt

@@ -12,3 +12,6 @@
 2025-08-26 16:49:24 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper
 2025-08-26 16:50:23 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper
 2025-09-08 08:39:17 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper
+2025-09-16 13:37:03 - Autenticazione fallita: HTTP 400, Errore cURL: , Risposta: {"title":"Bad Request","status":400,"detail":"Cannot persist the object. It was modified or deleted (purged) by another application.","instance":"POST /api/authentication/authenticate","errorCode":"96bfc1252b"}
+2025-09-16 13:37:51 - Autenticazione fallita: HTTP 400, Errore cURL: , Risposta: {"title":"Bad Request","status":400,"detail":"Cannot persist the object. It was modified or deleted (purged) by another application.","instance":"POST /api/authentication/authenticate","errorCode":"96bfc1252b"}
+2025-09-16 13:44:24 - Autenticazione fallita: HTTP 400, Errore cURL: , Risposta: {"title":"Bad Request","status":400,"detail":"Cannot persist the object. It was modified or deleted (purged) by another application.","instance":"POST /api/authentication/authenticate","errorCode":"96bfc1252b"}

public/userarea/get_matrice.php

@@ -0,0 +1,36 @@
+<?php
+require_once dirname(__DIR__, 2) . '/vendor/autoload.php';
+require_once dirname(__FILE__) . '/class/VisualLimsApiClient.class.php';
+
+header('Content-Type: application/json');
+
+ini_set('display_errors', '0');
+error_reporting(E_ALL);
+
+try {
+    $api = VisualLimsApiClient::getInstance();
+
+    // Endpoint per recuperare le Matrici
+    $endpoint = 'Matrice';
+
+    // (Opzionale) aggiungi parametri, ad esempio $top per limitare i risultati
+    $options = []; // oppure ad esempio: ['$top' => 100]
+
+    // Debug: salva URL usato
+    $base_url = 'https://93.43.5.102/limsapi/api/odata/';
+    $query = http_build_query($options);
+    $full_url = $base_url . $endpoint . ($query ? '?' . $query : '');
+    file_put_contents(__DIR__ . '/last_url.txt', $full_url . PHP_EOL, FILE_APPEND);
+
+    // Chiamata API
+    $data = $api->get($endpoint, $options);
+
+    // Salva il JSON in locale
+    file_put_contents(__DIR__ . '/matrici_response.json', json_encode($data, JSON_PRETTY_PRINT));
+
+    echo json_encode($data);
+} catch (Exception $e) {
+    file_put_contents(__DIR__ . '/error_log.txt', date('Y-m-d H:i:s') . ' - ' . $e->getMessage() . PHP_EOL, FILE_APPEND);
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+}

public/userarea/historical_trf.php

@@ -128,6 +128,9 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
     <link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
     <?php include('cssinclude.php'); ?>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <style>
         input.auto-input,
         select.auto-input {
@@ -947,7 +950,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
             <?php include('include/footer.php'); ?>
         </div>
         <?php include('jsinclude.php'); ?>
-        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
         <script src="photos.js"></script>
         <script src="parts.js"></script>

public/userarea/jsinclude.php

@@ -1,7 +1,7 @@
    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!--plugins-->
-   <script src="assets/js/jquery.min.js"></script>
+
    <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
    <script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
    <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>

public/userarea/load_parts.php

@@ -14,9 +14,9 @@ if (!$iddatadb) {
 }
 
 try {
-    $stmt = $pdo->prepare("SELECT id, iddatadb, part_number, part_description FROM identification_parts WHERE iddatadb = :iddatadb ORDER BY part_number ASC");
+    $stmt = $pdo->prepare("SELECT id, iddatadb, part_number, part_description, idmatrice FROM identification_parts WHERE iddatadb = :iddatadb ORDER BY part_number ASC");
     $stmt->execute([':iddatadb' => $iddatadb]);
-    $parts = $stmt->fetchAll();
+    $parts = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
     echo json_encode(['success' => true, 'parts' => $parts]);
 } catch (PDOException $e) {

public/userarea/mapping_template_xls_scheme2.php

@@ -21,7 +21,7 @@ $schemajson = $template['schemajson'] ? json_decode($template['schemajson'], tru
 $isSchemajsonEmpty = empty(trim($template['schemajson']));
 
 // Recupera i campi dalla tabella template_mapping
-$stmt = $pdo->prepare("SELECT id, field_id, excel_column, is_manual, manual_default, data_type, is_required, default_value, has_list, length, decimals, min_value, max_value, default_curr_date, tablename, field_label, main_field FROM template_mapping WHERE template_id = ?");
+$stmt = $pdo->prepare("SELECT id, field_id, excel_column, is_manual, manual_default, data_type, is_required, default_value, has_list, length, decimals, min_value, max_value, default_curr_date, tablename, field_label, main_field, is_visible_import FROM template_mapping WHERE template_id = ?");
 $stmt->execute([$id]);
 $mappings = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
@@ -83,8 +83,10 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
         }
 
         #schemaFieldsTable th:first-child,
-        #schemaFieldsTable td:first-child {
-            width: 50px;
+        #schemaFieldsTable td:first-child,
+        #schemaFieldsTable th:nth-child(2),
+        #schemaFieldsTable td:nth-child(2) {
+            width: 100px;
             text-align: center;
         }
     </style>
@@ -137,8 +139,8 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                                     <thead>
                                         <tr>
                                             <th>Main</th>
+                                            <th>Visible on Import</th>
                                             <th>Title</th>
-                                            <th>ID</th>
                                             <th>Type</th>
                                             <th>Mapping</th>
                                             <th>Default Value</th>
@@ -150,8 +152,15 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                                                 <td>
                                                     <input type="checkbox" class="main-field-checkbox" data-mapping-id="<?php echo $mapping['id']; ?>" <?php echo $mapping['main_field'] == 1 ? 'checked' : ''; ?>>
                                                 </td>
-                                                <td><?php echo htmlspecialchars($mapping['field_label'] ?? 'N/A'); ?></td>
-                                                <td><?php echo htmlspecialchars($mapping['field_id'] ?? 'N/A'); ?></td>
+                                                <td>
+                                                    <input type="checkbox" class="visible-import-checkbox" data-mapping-id="<?php echo $mapping['id']; ?>" <?php echo (isset($mapping['is_visible_import']) ? $mapping['is_visible_import'] : 1) == 1 ? 'checked' : ''; ?>>
+                                                </td>
+                                                <td>
+                                                    <?php echo htmlspecialchars($mapping['field_label'] ?? 'N/A'); ?>
+                                                    <?php if ($mapping['is_required'] == 1): ?>
+                                                        <span class="badge bg-danger ms-2">Required</span>
+                                                    <?php endif; ?>
+                                                </td>
                                                 <td><?php echo htmlspecialchars($mapping['data_type'] ?? 'N/A'); ?></td>
                                                 <td>
                                                     <?php
@@ -428,7 +437,7 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
 
             async function updateSchemaDetails() {
                 if (!schemaId) {
-                    document.getElementById('schemaFieldsBody').innerHTML = '<tr><td colspan="6" class="text-warning">No schema associated.</td></tr>'; // Aggiornato colspan a 6
+                    document.getElementById('schemaFieldsBody').innerHTML = '<tr><td colspan="6" class="text-warning">No schema associated.</td></tr>';
                     return;
                 }
 
@@ -445,7 +454,7 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                     await saveSchemaJson(templateId, JSON.stringify(data));
                     alert('Schema updated successfully. Refresh the page to see changes.');
                 } catch (error) {
-                    document.getElementById('schemaFieldsBody').innerHTML = '<tr><td colspan="6" class="text-danger">Error: ' + error.message + '</td></tr>'; // Aggiornato colspan a 6
+                    document.getElementById('schemaFieldsBody').innerHTML = '<tr><td colspan="6" class="text-danger">Error: ' + error.message + '</td></tr>';
                 } finally {
                     updateSchemaButton.disabled = false;
                     updateSchemaButton.textContent = 'Update Schema Details';
@@ -524,16 +533,11 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                         .then(data => {
                             if (!data.success) {
                                 console.error("❌ Error updating main_field:", data.message);
-                                // Revert checkbox state on error
                                 checkbox.checked = !checkbox.checked;
-                                // Riselezione visiva degli altri se errore
-                                if (value === 1) {
-                                    document.querySelectorAll('.main-field-checkbox').forEach(cb => {
-                                        cb.checked = cb.dataset.originalChecked === 'true';
-                                    });
-                                }
+                                document.querySelectorAll('.main-field-checkbox').forEach(cb => {
+                                    cb.checked = cb.dataset.originalChecked === 'true';
+                                });
                             } else {
-                                // Aggiorna lo stato originale dopo successo
                                 document.querySelectorAll('.main-field-checkbox').forEach(cb => {
                                     cb.dataset.originalChecked = cb.checked;
                                 });
@@ -542,12 +546,36 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                         .catch(error => {
                             console.error("❌ Fetch error:", error);
                             checkbox.checked = !checkbox.checked;
-                            // Riselezione visiva degli altri se errore
-                            if (value === 1) {
-                                document.querySelectorAll('.main-field-checkbox').forEach(cb => {
-                                    cb.checked = cb.dataset.originalChecked === 'true';
-                                });
+                            document.querySelectorAll('.main-field-checkbox').forEach(cb => {
+                                cb.checked = cb.dataset.originalChecked === 'true';
+                            });
+                        });
+                } else if (event.target.classList.contains('visible-import-checkbox')) {
+                    const checkbox = event.target;
+                    const mappingId = checkbox.dataset.mappingId;
+                    const value = checkbox.checked ? 1 : 0;
+
+                    fetch('update_visible_import.php', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                template_id: <?php echo $id; ?>,
+                                mapping_id: mappingId,
+                                value: value
+                            })
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (!data.success) {
+                                console.error("❌ Error updating is_visible_import:", data.message);
+                                checkbox.checked = !checkbox.checked;
                             }
+                        })
+                        .catch(error => {
+                            console.error("❌ Fetch error:", error);
+                            checkbox.checked = !checkbox.checked;
                         });
                 }
             });
@@ -569,7 +597,7 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                         mappedColumn = document.createElement('span');
                         mappedColumn.className = 'mapped-column';
                         mappedColumn.style.marginLeft = '5px';
-                        tr.querySelector('td:nth-child(5)').appendChild(mappedColumn); // Aggiornato a nth-child(5) per la nuova colonna
+                        tr.querySelector('td:nth-child(5)').appendChild(mappedColumn);
                     }
                     if (!removeBtn) {
                         removeBtn = document.createElement('button');
@@ -577,7 +605,7 @@ $xlsHeaders = $template['xls_headers'] ? json_decode($template['xls_headers'], t
                         removeBtn.textContent = 'X';
                         removeBtn.style.marginLeft = '5px';
                         removeBtn.setAttribute('data-id', mappingId);
-                        tr.querySelector('td:nth-child(5)').appendChild(removeBtn); // Aggiornato a nth-child(5)
+                        tr.querySelector('td:nth-child(5)').appendChild(removeBtn);
 
                         removeBtn.addEventListener('click', function(e) {
                             let tr = e.target.closest('tr');

public/userarea/modal_parts.php

@@ -9,10 +9,12 @@
             <div class="modal-body">
                 <div class="row">
                     <div class="col-md-6">
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; min-width: 0;">
                             <h6 style="margin: 0; white-space: nowrap;">Elenco Parti</h6>
-                            <div style="display: flex; align-items: center;">
-                                <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
+                            <div style="display: flex; align-items: center; min-width: 0;">
+                                <select id="global-matrice" class="ms-2" style="width: 250px !important; min-width: 250px !important;">
+                                </select>
+                                <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px; margin-left: 10px;">
                                 <label for="showMixParts" style="font-size: 0.9rem; margin-right: 10px;">Mix</label>
                                 <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>
@@ -170,7 +172,6 @@
     /* Unsaved changes */
     #savePhotoBtn.unsaved {
         background-color: #dc3545 !important;
-        /* Rosso */
         border-color: #dc3545 !important;
         color: white !important;
         animation: pulse 1.2s infinite;
@@ -190,4 +191,59 @@
             box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
         }
     }
+
+    /* Stili per Select2 in #partsList e #global-matrice */
+    #partsList .select2-container,
+    .select2-container--default #global-matrice {
+        width: 250px !important;
+        min-width: 250px !important;
+        margin-left: 10px;
+    }
+
+    #partsList .select2-selection--single,
+    .select2-container--default #global-matrice .select2-selection--single {
+        height: 26px !important;
+        padding: 0.2rem 0.5rem !important;
+        font-size: 0.9rem !important;
+        border: 1px solid #ced4da !important;
+        background-color: #fff !important;
+    }
+
+    #partsList .select2-selection__rendered,
+    .select2-container--default #global-matrice .select2-selection__rendered {
+        line-height: 24px !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+    }
+
+    #partsList .select2-selection__arrow,
+    .select2-container--default #global-matrice .select2-selection__arrow {
+        height: 26px !important;
+    }
+
+    #partsList .save-status,
+    #partsList .save-loading {
+        margin-left: 5px;
+    }
+
+    .select2-container--open .select2-dropdown {
+        z-index: 1051 !important;
+        border: 1px solid #aaa !important;
+        border-radius: 4px !important;
+        background: white !important;
+        overflow-y: auto !important;
+        max-height: 200px !important;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field {
+        width: 100% !important;
+        padding: 0.2rem !important;
+    }
+
+    .select2-container--default .part-matrice,
+    .select2-container--default #global-matrice {
+        width: 250px !important;
+        min-width: 250px !important;
+    }
 </style>

public/userarea/parts.js

@@ -16,10 +16,15 @@ $(document).ready(function () {
     let photoAnnotations = {};
     // colors keyed by part number
     let partColors = {};
+    // matrice IDs keyed by part number
+    let partMatrice = {};
 
     // selection
     let selectedPartNumber = null;
 
+    // lista delle matrici precaricata
+    let matrici = [];
+
     // ===================
     // VOICE RECOGNITION SETUP
     // ===================
@@ -27,13 +32,13 @@ $(document).ready(function () {
         window.SpeechRecognition || window.webkitSpeechRecognition;
     let recognition = null;
     let isVoiceActive = false;
-    const magicWord = "salva"; // Parola magica scelta: "prossima" (fa andare alla riga successiva)
+    const magicWord = "salva"; // Parola magica scelta
 
     if (SpeechRecognition) {
         recognition = new SpeechRecognition();
-        recognition.lang = "it-IT"; // Lingua italiana
-        recognition.continuous = true; // Ascolto continuo
-        recognition.interimResults = false; // Solo risultati finali per semplicità
+        recognition.lang = "it-IT";
+        recognition.continuous = true;
+        recognition.interimResults = false;
 
         recognition.onresult = function (event) {
             const transcript = event.results[
@@ -43,11 +48,10 @@ $(document).ready(function () {
                 .toLowerCase();
             console.log("Transcript vocale:", transcript);
 
-            const $currentRow = $("#partsTableBody tr:last"); // Ultima riga corrente
+            const $currentRow = $("#partsTableBody tr:last");
             const $descriptionInput = $currentRow.find(".part-description");
 
             if (transcript.includes(magicWord)) {
-                // Rimuovi la parola magica e aggiungi il resto alla descrizione corrente
                 const cleanedTranscript = transcript
                     .replace(magicWord, "")
                     .trim();
@@ -59,9 +63,8 @@ $(document).ready(function () {
                             cleanedTranscript
                         ).trim(),
                     );
-                    $descriptionInput.trigger("blur"); // Salva se necessario
+                    $descriptionInput.trigger("blur");
                 }
-                // Aggiungi nuova riga (simile a click su +)
                 const maxPartNumber = Math.max(
                     ...$("#partsTableBody tr")
                         .map(function () {
@@ -73,22 +76,19 @@ $(document).ready(function () {
                         .get(),
                 );
                 addNewRow(maxPartNumber + 1);
-                // Focus sulla nuova descrizione
                 const $newRow = $("#partsTableBody tr:last");
                 $newRow.find(".part-description").focus();
             } else {
-                // Aggiungi il transcript alla descrizione corrente
                 $descriptionInput.val(
                     ($descriptionInput.val() + " " + transcript).trim(),
                 );
-                $descriptionInput.trigger("blur"); // Salva se necessario
+                $descriptionInput.trigger("blur");
             }
         };
 
         recognition.onerror = function (event) {
             console.error("Errore riconoscimento vocale:", event.error);
             if (event.error === "no-speech" || event.error === "aborted") {
-                // Riavvia se necessario
                 if (isVoiceActive) recognition.start();
             } else {
                 alert("Errore nel riconoscimento vocale: " + event.error);
@@ -97,18 +97,15 @@ $(document).ready(function () {
         };
 
         recognition.onend = function () {
-            if (isVoiceActive) {
-                recognition.start(); // Riavvia per ascolto continuo
-            }
+            if (isVoiceActive) recognition.start();
         };
     } else {
         console.warn("Riconoscimento vocale non supportato dal browser.");
-        $("#toggleVoiceBtn").hide(); // Nascondi pulsante se non supportato
+        $("#toggleVoiceBtn").hide();
     }
 
     function toggleVoiceRecognition() {
         if (!recognition) return;
-
         isVoiceActive = !isVoiceActive;
         const $btn = $("#toggleVoiceBtn");
         if (isVoiceActive) {
@@ -116,7 +113,6 @@ $(document).ready(function () {
                 '<i class="fas fa-microphone-slash"></i> Stop Voce',
             );
             recognition.start();
-            // Focus iniziale sull'ultima descrizione
             const $currentRow = $("#partsTableBody tr:last");
             $currentRow.find(".part-description").focus();
         } else {
@@ -154,8 +150,39 @@ $(document).ready(function () {
             $("#trfHeader").text(`${iddatadb} - ${importRef} - ${description}`);
             $("#partsModal").data("iddatadb", iddatadb);
 
-            loadPhoto(iddatadb);
-            loadExistingParts(iddatadb);
+            // Precarica le matrici una volta sola
+            if (matrici.length === 0) {
+                $.ajax({
+                    url: "get_matrice.php",
+                    method: "GET",
+                    dataType: "json",
+                    success: function (data) {
+                        matrici = data.value || [];
+                        console.log(
+                            "Matrici precaricate (una volta sola):",
+                            matrici,
+                        );
+                        initializeGlobalSelect2();
+                        loadPhoto(iddatadb);
+                        loadExistingParts(iddatadb);
+                    },
+                    error: function (xhr, status, error) {
+                        console.error(
+                            "Errore nel precaricamento delle matrici:",
+                            error,
+                        );
+                        alert("Errore nel caricamento delle matrici: " + error);
+                        matrici = [];
+                        loadPhoto(iddatadb);
+                        loadExistingParts(iddatadb);
+                    },
+                });
+            } else {
+                console.log("Matrici già precaricate, riutilizzo.");
+                initializeGlobalSelect2();
+                loadPhoto(iddatadb);
+                loadExistingParts(iddatadb);
+            }
 
             if (partsModal) {
                 const modal = new bootstrap.Modal(partsModal);
@@ -250,7 +277,7 @@ $(document).ready(function () {
 
     function loadSinglePhoto(photoPath) {
         const img = $("#samplePhoto");
-        img.off("load"); // avoid stacking multiple handlers
+        img.off("load");
         img.attr("src", photoPath);
 
         img.on("load", function () {
@@ -281,7 +308,6 @@ $(document).ready(function () {
 
             canvas.width = naturalWidth;
             canvas.height = naturalHeight;
-
             canvas.style.width = `${displayWidth}px`;
             canvas.style.height = `${displayHeight}px`;
 
@@ -321,7 +347,6 @@ $(document).ready(function () {
             </tr>`;
         $("#partsTableBody").append(newRow);
         updateRowButtons();
-        // Initialize color for the new part
         const partNumber = nextPartNumber || 1;
         partColors[partNumber] = defaultColor;
     }
@@ -377,9 +402,10 @@ $(document).ready(function () {
                     if (response.success) {
                         $row.remove();
                         delete partColors[partNumber];
+                        delete partMatrice[partNumber];
                         updateRowButtons();
                         updatePartsList();
-                        clearCanvasMarkers(false); // Preserve descriptions
+                        clearCanvasMarkers(false);
                     } else {
                         alert("Errore nell'eliminazione: " + response.message);
                     }
@@ -398,6 +424,7 @@ $(document).ready(function () {
         } else {
             $row.remove();
             delete partColors[partNumber];
+            delete partMatrice[partNumber];
             updateRowButtons();
             updatePartsList();
         }
@@ -412,7 +439,6 @@ $(document).ready(function () {
         const $saveLoading = $row.find(".save-loading");
         const iddatadb = $("#partsModal").data("iddatadb");
         const isMix = partDescription.startsWith("Mix") ? "Y" : "N";
-
         const partId = $row.data("part-id") || null;
 
         if (partDescription && iddatadb) {
@@ -465,6 +491,160 @@ $(document).ready(function () {
         markUnsaved();
     });
 
+    // Funzione per inizializzare Select2 sulle tendine delle matrici
+    function initializeSelect2($select, partNumber, partId, idmatrice) {
+        if (typeof $.fn.select2 === "undefined") {
+            console.error("Select2 non disponibile per parte " + partNumber);
+            $select.replaceWith(
+                '<input type="text" class="form-control form-control-sm" placeholder="Select2 non disponibile" disabled>',
+            );
+            return;
+        }
+
+        // Popola con i dati precaricati
+        const options = matrici.map(function (matrice) {
+            return {
+                id: matrice.IdMatrice,
+                text: matrice.NomeMatriceTraduzione,
+            };
+        });
+
+        $select.select2({
+            placeholder: "Seleziona matrice",
+            allowClear: true,
+            data: options, // Carica la lista completa all'apertura
+            dropdownParent: $("#partsModal"),
+            matcher: function (params, data) {
+                // Filtraggio lato client sulla descrizione
+                if (!params.term || params.term.length < 3) {
+                    return data; // Mostra tutto se meno di 3 caratteri
+                }
+                const term = params.term.toUpperCase();
+                if (data.text.toUpperCase().indexOf(term) >= 0) {
+                    return data;
+                }
+                return null;
+            },
+        });
+
+        // Carica la matrice esistente, se presente
+        if (partId && partId !== "new" && idmatrice) {
+            const matrice = matrici.find((m) => m.IdMatrice == idmatrice);
+            if (matrice) {
+                console.log(
+                    "Preselezione matrice per partNumber " + partNumber + ":",
+                    matrice,
+                );
+                const option = new Option(
+                    matrice.NomeMatriceTraduzione,
+                    matrice.IdMatrice,
+                    true,
+                    true,
+                );
+                $select.append(option).trigger("change");
+                partMatrice[partNumber] = matrice.IdMatrice;
+            } else {
+                console.warn(
+                    "Matrice con ID " +
+                        idmatrice +
+                        " non trovata per partNumber " +
+                        partNumber,
+                );
+            }
+        }
+
+        // Gestione del cambio della matrice
+        $select.on("change", function () {
+            const idmatrice = $(this).val();
+            const $listItem = $(this).closest("li");
+            const $saveStatus = $listItem.find(".save-status");
+            const $saveLoading = $listItem.find(".save-loading");
+
+            console.log(
+                "Cambio matrice per partNumber:",
+                partNumber,
+                "nuovo idmatrice:",
+                idmatrice,
+            );
+            partMatrice[partNumber] = idmatrice || null;
+
+            if (partId && partId !== "new") {
+                $saveLoading.show();
+                $saveStatus.hide();
+
+                $.ajax({
+                    url: "save_matrice.php",
+                    method: "POST",
+                    data: JSON.stringify({
+                        iddatadb: $("#partsModal").data("iddatadb"),
+                        parts: [
+                            {
+                                id: partId,
+                                idmatrice: idmatrice || null,
+                            },
+                        ],
+                    }),
+                    contentType: "application/json",
+                    success: function (response) {
+                        if (response.success) {
+                            $saveLoading.hide();
+                            $saveStatus.show();
+                            setTimeout(() => $saveStatus.hide(), 2000);
+                        } else {
+                            alert(
+                                "Errore nel salvataggio della matrice: " +
+                                    response.message,
+                            );
+                            $saveLoading.hide();
+                        }
+                    },
+                    error: function (xhr, status, error) {
+                        alert("Errore nel salvataggio della matrice: " + error);
+                        $saveLoading.hide();
+                    },
+                });
+            }
+        });
+    }
+
+    // Funzione per inizializzare Select2 sul dropdown globale
+    function initializeGlobalSelect2() {
+        const $select = $("#global-matrice");
+        if (typeof $.fn.select2 === "undefined") {
+            console.error("Select2 non disponibile per il dropdown globale");
+            $select.replaceWith(
+                '<input type="text" class="form-control form-control-sm" placeholder="Select2 non disponibile" disabled>',
+            );
+            return;
+        }
+
+        // Popola con i dati precaricati
+        const options = matrici.map(function (matrice) {
+            return {
+                id: matrice.IdMatrice,
+                text: matrice.NomeMatriceTraduzione,
+            };
+        });
+
+        $select.select2({
+            placeholder: "Seleziona matrice globale",
+            allowClear: true,
+            data: options, // Carica la lista completa all'apertura
+            dropdownParent: $("#partsModal"),
+            matcher: function (params, data) {
+                // Filtraggio lato client sulla descrizione
+                if (!params.term || params.term.length < 3) {
+                    return data; // Mostra tutto se meno di 3 caratteri
+                }
+                const term = params.term.toUpperCase();
+                if (data.text.toUpperCase().indexOf(term) >= 0) {
+                    return data;
+                }
+                return null;
+            },
+        });
+    }
+
     function loadExistingParts(iddatadb) {
         $.ajax({
             url: "load_parts.php",
@@ -493,6 +673,9 @@ $(document).ready(function () {
                                 </tr>`;
                             $("#partsTableBody").append(newRow);
                             partColors[part.part_number] = defaultColor;
+                            if (part.idmatrice) {
+                                partMatrice[part.part_number] = part.idmatrice;
+                            }
                         });
                     } else {
                         addNewRow(1);
@@ -520,6 +703,7 @@ $(document).ready(function () {
         $("#partsTableBody tr").each(function () {
             const partNumber = $(this).find(".part-number").val();
             const partDescription = $(this).find(".part-description").val();
+            const partId = $(this).data("part-id");
             const partColor =
                 partColors[partNumber] ||
                 (partDescription.startsWith("Mix") ? "#0000ff" : "#ff0000");
@@ -529,14 +713,27 @@ $(document).ready(function () {
                 (showMixParts || !partDescription.startsWith("Mix"))
             ) {
                 const listItem = `
-                    <li class="list-group-item" data-part-number="${partNumber}">
-                        ${partNumber} - ${partDescription}
-                        <div style="display: flex; align-items: center;">
-                            <button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
-                            <input type="color" class="part-color" value="${partColor}" style="margin-left: 5px;">
-                        </div>
-                    </li>`;
+            <li class="list-group-item" data-part-number="${partNumber}" data-part-id="${partId}">
+                ${partNumber} - ${partDescription}
+                <div style="display: flex; align-items: center;">
+                    <button type="button" class="btn btn-primary btn-sm propagate-matrice-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; margin-right: 3px;"><i class="fas fa-arrow-right fa-xs"></i></button>
+                    <select class="part-matrice" style="width: 250px !important; margin-right: 10px;"></select>
+                    <button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
+                    <input type="color" class="part-color" value="${partColor}" style="margin-left: 5px;">
+                    <span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
+                    <span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
+                </div>
+            </li>`;
                 $("#partsList").append(listItem);
+                const $select = $("#partsList").find(
+                    `li[data-part-number="${partNumber}"] .part-matrice`,
+                );
+                initializeSelect2(
+                    $select,
+                    partNumber,
+                    partId,
+                    partMatrice[partNumber],
+                );
             }
         });
         updateMarkers();
@@ -546,8 +743,8 @@ $(document).ready(function () {
         const $rows = $("#partsTableBody tr");
         const iddatadb = $("#partsModal").data("iddatadb");
         let newPartColors = {};
+        let newPartMatrice = {};
 
-        // Raccogli tutte le righe con i loro dati attuali
         let partsData = $rows
             .map(function (index) {
                 const $row = $(this);
@@ -558,23 +755,21 @@ $(document).ready(function () {
             })
             .get();
 
-        // Rinumera in modo sequenziale
         partsData.forEach((part, index) => {
             const newNumber = index + 1;
             newPartColors[newNumber] = partColors[part.partNumber] || "#ff0000";
+            newPartMatrice[newNumber] = partMatrice[part.partNumber] || null;
             part.partNumber = newNumber;
         });
 
-        // Aggiorna i valori nella tabella
         $rows.each(function (index) {
             const $row = $(this);
             $row.find(".part-number").val(index + 1);
         });
 
-        // Aggiorna partColors
         partColors = newPartColors;
+        partMatrice = newPartMatrice;
 
-        // Aggiorna i marker nelle annotazioni
         const currentPhoto = $("#samplePhoto").attr("src");
         if (photoAnnotations[currentPhoto]) {
             photoAnnotations[currentPhoto].markers.forEach((marker) => {
@@ -589,12 +784,12 @@ $(document).ready(function () {
             });
         }
 
-        // Salva le modifiche nel database
         const partsToSave = partsData.map((part) => ({
             id: part.partId || null,
             part_number: part.partNumber,
             part_description: part.partDescription,
             mix: part.partDescription.startsWith("Mix") ? "Y" : "N",
+            idmatrice: partMatrice[part.partNumber] || null,
         }));
 
         console.log(
@@ -605,10 +800,7 @@ $(document).ready(function () {
         $.ajax({
             url: "renumber_parts.php",
             method: "POST",
-            data: JSON.stringify({
-                iddatadb: iddatadb,
-                parts: partsToSave,
-            }),
+            data: JSON.stringify({ iddatadb: iddatadb, parts: partsToSave }),
             contentType: "application/json",
             success: function (response) {
                 console.log("Risposta da renumber_parts.php:", response);
@@ -686,10 +878,23 @@ $(document).ready(function () {
         updatePartsList();
     });
 
+    $(document).on("click", ".propagate-matrice-btn", function () {
+        const $listItem = $(this).closest("li");
+        const globalVal = $("#global-matrice").val();
+        if (globalVal) {
+            $listItem.find(".part-matrice").val(globalVal).trigger("change");
+        } else {
+            alert("Seleziona una matrice globale prima di propagare.");
+        }
+    });
+
     $("#partsList").on("click", "li", function (e) {
         if (
             $(e.target).hasClass("add-to-mix-btn") ||
-            $(e.target).hasClass("part-color")
+            $(e.target).hasClass("part-color") ||
+            $(e.target).hasClass("part-matrice") ||
+            $(e.target).hasClass("propagate-matrice-btn") ||
+            $(e.target).closest(".select2-container").length
         )
             return;
         selectedPartNumber = $(this).data("part-number");
@@ -703,6 +908,7 @@ $(document).ready(function () {
     $("#renumberPartsBtn").on("click", function () {
         renumberParts();
     });
+
     // ===================
     // MARKERS & DESCRIPTIONS
     // ===================
@@ -716,7 +922,7 @@ $(document).ready(function () {
         const clickX = e.clientX - rect.left;
         const clickY = e.clientY - rect.top;
 
-        const x = clickX / photoData.scale; // convert to NATURAL coords
+        const x = clickX / photoData.scale;
         const y = clickY / photoData.scale;
 
         const currentPhoto = $("#samplePhoto").attr("src");
@@ -957,7 +1163,7 @@ $(document).ready(function () {
     });
 
     $("#removeAnnotationsBtn").on("click", function () {
-        clearCanvasMarkers(true); // Remove only descriptions
+        clearCanvasMarkers(true);
     });
 
     $("#undoMarkerBtn").on("click", function () {
@@ -966,7 +1172,6 @@ $(document).ready(function () {
 
     let unsavedChanges = false;
 
-    // --- helper functions ---
     function markUnsaved() {
         if (!unsavedChanges) {
             unsavedChanges = true;
@@ -979,12 +1184,10 @@ $(document).ready(function () {
         $("#savePhotoBtn").removeClass("unsaved").text("Salva Foto con Nome");
     }
 
-    // --- event listeners ---
     $(document).on("input change", "#partsTableBody input", markUnsaved);
     $(document).on("click", ".add-row, .add-mix-row, .remove-row", markUnsaved);
     $(document).on("markerChanged descriptionChanged", markUnsaved);
 
-    // --- modal close protection ---
     $("#partsModal").on("hide.bs.modal", function (e) {
         if (unsavedChanges) {
             if (!confirm("Hai modifiche non salvate. Vuoi davvero uscire?")) {
@@ -993,7 +1196,6 @@ $(document).ready(function () {
         }
     });
 
-    // --- SAVE BUTTON ---
     $("#savePhotoBtn").on("click", function () {
         const canvas = document.getElementById("photoCanvas");
         const ctx = canvas.getContext("2d");
@@ -1081,11 +1283,10 @@ $(document).ready(function () {
 
             ctx.beginPath();
             ctx.arc(x, y, radius, 0, 2 * Math.PI);
-            ctx.fillStyle = markerColor; // Use the stored color
+            ctx.fillStyle = markerColor;
             ctx.fill();
-
             ctx.lineWidth = 3;
-            ctx.strokeStyle = markerColor; // Use the same color for the border
+            ctx.strokeStyle = markerColor;
             ctx.stroke();
 
             ctx.fillStyle = "#ffffff";
@@ -1122,7 +1323,7 @@ $(document).ready(function () {
                         );
                         $("#samplePhoto").attr("src", response.file_path);
                         loadPhoto(iddatadb);
-                        clearCanvasMarkers(false); // Preserve descriptions
+                        clearCanvasMarkers(false);
                         clearUnsaved();
                     } else {
                         alert("Errore: " + response.message);

public/userarea/photos.js

@@ -7,7 +7,6 @@ document.addEventListener("DOMContentLoaded", function () {
             return;
         }
         try {
-            console.log("Caricamento contenuto per iddatadb:", iddatadb);
             const response = await fetch(
                 `photos_popup.php?iddatadb=${iddatadb}`,
             );
@@ -56,22 +55,18 @@ document.addEventListener("DOMContentLoaded", function () {
             return;
         }
 
-        // Funzione per avviare la webcam con un deviceId specifico
         async function startWebcam(deviceId = null) {
             try {
-                // Ferma il flusso video esistente, se presente
                 if (stream) {
                     stream.getTracks().forEach((track) => track.stop());
                     stream = null;
                     webcamVideo.srcObject = null;
                 }
 
-                // Configura i vincoli per getUserMedia
                 const constraints = {
                     video: deviceId ? { deviceId: { exact: deviceId } } : true,
                 };
 
-                // Avvia il flusso video
                 stream = await navigator.mediaDevices.getUserMedia(constraints);
                 webcamVideo.srcObject = stream;
                 webcamArea.style.display = "block";
@@ -86,21 +81,17 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         }
 
-        // Funzione per popolare il dropdown delle webcam
         async function populateWebcamSelect() {
             try {
-                // Richiedi i permessi per accedere ai dispositivi
                 await navigator.mediaDevices.getUserMedia({ video: true });
                 const devices = await navigator.mediaDevices.enumerateDevices();
                 const videoDevices = devices.filter(
                     (device) => device.kind === "videoinput",
                 );
 
-                // Svuota il dropdown
                 webcamSelect.innerHTML =
                     '<option value="">Select a webcam</option>';
 
-                // Popola il dropdown con le webcam disponibili
                 videoDevices.forEach((device) => {
                     const option = document.createElement("option");
                     option.value = device.deviceId;
@@ -109,11 +100,9 @@ document.addEventListener("DOMContentLoaded", function () {
                     webcamSelect.appendChild(option);
                 });
 
-                // Mostra il dropdown solo se ci sono più webcam
                 webcamSelect.style.display =
                     videoDevices.length > 1 ? "block" : "none";
 
-                // Avvia la webcam predefinita se ce n'è almeno una
                 if (videoDevices.length > 0) {
                     await startWebcam(videoDevices[0].deviceId);
                 } else {
@@ -129,12 +118,10 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         }
 
-        // Apri la webcam e popola il dropdown
         openWebcamBtn.addEventListener("click", async () => {
             await populateWebcamSelect();
         });
 
-        // Gestisci il cambio della webcam selezionata
         webcamSelect.addEventListener("change", async (e) => {
             const deviceId = e.target.value;
             if (deviceId) {
@@ -142,7 +129,6 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         });
 
-        // Chiudi la webcam
         closeWebcamBtn.addEventListener("click", () => {
             if (stream) {
                 stream.getTracks().forEach((track) => track.stop());
@@ -154,7 +140,6 @@ document.addEventListener("DOMContentLoaded", function () {
             dropArea.style.display = "block";
         });
 
-        // Cattura la foto
         captureBtn.addEventListener("click", () => {
             const canvas = document.createElement("canvas");
             canvas.width = webcamVideo.videoWidth;
@@ -171,7 +156,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 );
                 const loader = document.getElementById("loader");
                 if (loader) {
-                    console.log("Mostro loader per upload webcam");
                     loader.style.display = "flex";
                 }
                 await handleFiles([file], iddatadb);
@@ -187,7 +171,6 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
-    // Funzione per gestire il caricamento dei file
     async function handleFiles(files, iddatadb) {
         const loader = document.getElementById("loader");
         if (!loader) {
@@ -206,7 +189,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 continue;
             }
 
-            console.log("Inizio upload del file:", file.name);
             loader.style.display = "flex";
 
             const formData = new FormData();
@@ -219,9 +201,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 });
                 const result = await response.json();
                 if (result.success) {
-                    console.log(
-                        "Upload completato con successo, ricarico popup",
-                    );
                     loadPopupContent(iddatadb);
                 } else {
                     alert("Errore durante il caricamento: " + result.message);
@@ -229,13 +208,11 @@ document.addEventListener("DOMContentLoaded", function () {
             } catch (error) {
                 alert("Errore durante il caricamento: " + error.message);
             } finally {
-                console.log("Nascondo loader dopo upload");
                 loader.style.display = "none";
             }
         }
     }
 
-    // Funzione per attaccare gli event listener al contenuto del popup
     function attachPhotoEventListeners(iddatadb) {
         const dropArea = document.getElementById("dropArea");
         const photoInput = document.getElementById("photoInput");
@@ -250,9 +227,6 @@ document.addEventListener("DOMContentLoaded", function () {
             return;
         }
 
-        console.log("Event listener associati per iddatadb:", iddatadb);
-
-        // Gestione drag-and-drop
         const preventDefaults = (e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -281,7 +255,6 @@ document.addEventListener("DOMContentLoaded", function () {
         dropArea.addEventListener(
             "drop",
             (e) => {
-                console.log("Evento drop attivato");
                 const files = e.dataTransfer.files;
                 if (files.length > 0) {
                     handleFiles(files, iddatadb);
@@ -293,7 +266,6 @@ document.addEventListener("DOMContentLoaded", function () {
         dropArea.addEventListener(
             "click",
             () => {
-                console.log("Click su dropArea, apro input file");
                 photoInput.click();
             },
             false,
@@ -302,18 +274,15 @@ document.addEventListener("DOMContentLoaded", function () {
         photoInput.addEventListener(
             "change",
             (e) => {
-                console.log("Evento change su photoInput");
                 const files = e.target.files;
                 if (files.length > 0) {
                     handleFiles(files, iddatadb);
                 }
-                // Resetta l'input per consentire il caricamento dello stesso file
                 e.target.value = "";
             },
             false,
         );
 
-        // Gestione rimozione foto
         document.querySelectorAll(".delete-photo-btn").forEach((button) => {
             button.addEventListener("click", async function () {
                 const photoId = this.getAttribute("data-photo-id");
@@ -329,9 +298,6 @@ document.addEventListener("DOMContentLoaded", function () {
                         });
                         const result = await response.json();
                         if (result.success) {
-                            console.log(
-                                "Foto eliminata con successo, ricarico popup",
-                            );
                             loadPopupContent(iddatadb);
                         } else {
                             alert(
@@ -348,21 +314,17 @@ document.addEventListener("DOMContentLoaded", function () {
             });
         });
 
-        // Gestione ingrandimento immagini
         document.querySelectorAll(".thumbnail").forEach((img) => {
             img.addEventListener("click", function () {
-                console.log("Click su thumbnail, apro modale immagine");
                 const enlargedImage = document.getElementById("enlargedImage");
                 enlargedImage.src = this.src;
                 document.getElementById("imageModal").style.display = "block";
             });
         });
 
-        // Gestione chiusura modale immagine
         const imageCloseBtn = document.querySelector(".image-modal-close");
         if (imageCloseBtn) {
             imageCloseBtn.addEventListener("click", () => {
-                console.log("Chiusura modale immagine");
                 document.getElementById("imageModal").style.display = "none";
             });
         }
@@ -370,57 +332,42 @@ document.addEventListener("DOMContentLoaded", function () {
             .getElementById("imageModal")
             .addEventListener("click", function (event) {
                 if (event.target === this) {
-                    console.log(
-                        "Chiusura modale immagine cliccando sullo sfondo",
-                    );
                     this.style.display = "none";
                 }
             });
 
-        // Inizializza la gestione della webcam
         setupWebcam(iddatadb);
 
-        // Gestione bottone Crea Collage
         const createCollageBtn = document.getElementById("createCollageBtn");
         if (createCollageBtn) {
             createCollageBtn.addEventListener("click", () => {
-                console.log("Apertura modale collage");
                 document.getElementById("collageModal").style.display = "block";
                 initCollageCanvas();
             });
         }
 
-        // Chiusura modale collage
         const closeCollageBtn = document.querySelector(".close-collage");
         if (closeCollageBtn) {
             closeCollageBtn.addEventListener("click", () => {
-                console.log("Chiusura modale collage");
                 document.getElementById("collageModal").style.display = "none";
                 if (isCropping) {
-                    console.log(
-                        "Chiusura modale durante ritaglio, esco dalla modalità ritaglio",
-                    );
                     exitCropMode();
                 }
                 if (isRemovingBackground) {
-                    console.log(
-                        "Chiusura modale durante rimozione sfondo, esco dalla modalità",
-                    );
                     exitBackgroundRemovalMode();
                 }
             });
         }
 
-        // Inizializza canvas con Fabric.js
         let canvas;
         let cropRect = null;
         let isCropping = false;
-        let croppedImage = null; // Memorizza l'immagine da ritagliare
-        let isApplyingCrop = false; // Flag per prevenire duplicazioni
-        let isRemovingBackground = false; // Flag per modalità rimozione sfondo
-        let backgroundRemovalImage = null; // Immagine in modalità rimozione sfondo
-        let history = []; // Pila per salvare gli stati del canvas
-        const maxHistory = 20; // Limite massimo di stati nella pila
+        let croppedImage = null;
+        let isApplyingCrop = false;
+        let isRemovingBackground = false;
+        let backgroundRemovalImage = null;
+        let history = [];
+        const maxHistory = 20;
 
         function initCollageCanvas() {
             if (typeof fabric === "undefined") {
@@ -434,7 +381,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 backgroundColor: "#fff",
                 selection: true,
             });
-            // Imposta stile globale per i controlli
             fabric.Object.prototype.set({
                 cornerColor: "black",
                 cornerStrokeColor: "black",
@@ -442,63 +388,103 @@ document.addEventListener("DOMContentLoaded", function () {
                 borderColor: "black",
                 transparentCorners: false,
             });
-            // Abilita ridimensionamento e trascinamento
             canvas.on("object:modified", () => {
-                console.log("Oggetto modificato nel canvas");
                 saveCanvasState();
+                updateLayersPanel();
                 canvas.renderAll();
             });
-            // Gestisci selezione per abilitare/disabilitare pulsanti
+            canvas.on("object:added", () => {
+                updateLayersPanel();
+            });
+            canvas.on("object:removed", () => {
+                updateLayersPanel();
+            });
             canvas.on("selection:created", () => {
-                console.log("Evento selection:created triggerato");
                 updateButtons();
             });
             canvas.on("selection:updated", () => {
-                console.log("Evento selection:updated triggerato");
                 updateButtons();
             });
             canvas.on("selection:cleared", () => {
-                console.log("Evento selection:cleared triggerato");
                 if (!isCropping && !isRemovingBackground) {
                     updateButtons();
                 } else if (isCropping && cropRect) {
-                    console.log(
-                        "Ignoro selection:cleared perché in modalità ritaglio",
-                    );
-                    canvas.setActiveObject(cropRect); // Ripristina selezione del rettangolo
+                    canvas.setActiveObject(cropRect);
                     canvas.renderAll();
                 } else if (isRemovingBackground) {
-                    console.log(
-                        "Ignoro selection:cleared perché in modalità rimozione sfondo",
-                    );
-                    canvas.setActiveObject(backgroundRemovalImage); // Ripristina selezione dell'immagine
+                    canvas.setActiveObject(backgroundRemovalImage);
                     canvas.renderAll();
                 }
             });
-            // Gestisci click sul canvas per la rimozione dello sfondo
             canvas.on("mouse:down", (event) => {
                 if (isRemovingBackground && backgroundRemovalImage) {
-                    console.log(
-                        "Click sul canvas in modalità rimozione sfondo",
-                    );
                     handleBackgroundColorSelection(event);
                 }
             });
-            // Salva lo stato iniziale del canvas
             saveCanvasState();
-            // Forza un aggiornamento iniziale dei pulsanti
+            updateLayersPanel();
             updateButtons();
         }
 
-        // Salva lo stato del canvas nella pila
-        function saveCanvasState() {
-            if (isCropping || isRemovingBackground) {
-                console.log(
-                    "Non salvo lo stato perché in modalità ritaglio o rimozione sfondo",
-                );
+        function updateLayersPanel() {
+            const layersList = document.getElementById("layersList");
+            if (!layersList) {
+                console.error("Elemento layersList non trovato");
+                return;
+            }
+            layersList.innerHTML = "";
+
+            const images = canvas.getObjects("image");
+            images.forEach((img, index) => {
+                let thumbSrc;
+                try {
+                    const thumbCanvas = document.createElement("canvas");
+                    thumbCanvas.width = 50;
+                    thumbCanvas.height = 50;
+                    const thumbFabric = new fabric.Canvas(thumbCanvas);
+
+                    const clonedImg = fabric.util.object.clone(img);
+                    const scaleFactor = Math.min(
+                        50 / img.width,
+                        50 / img.height,
+                    );
+                    clonedImg.scaleX = scaleFactor;
+                    clonedImg.scaleY = scaleFactor;
+                    clonedImg.left = (50 - img.width * scaleFactor) / 2;
+                    clonedImg.top = (50 - img.height * scaleFactor) / 2;
+                    clonedImg.setCoords();
+                    thumbFabric.add(clonedImg);
+                    thumbFabric.renderAll();
+
+                    thumbSrc = thumbCanvas.toDataURL("image/png");
+                    thumbFabric.dispose();
+                } catch (error) {
+                    console.warn(
+                        "Errore nella generazione della thumbnail per immagine",
+                        index + 1,
+                        error,
+                    );
+                    thumbSrc = img.getSrc(); // Fallback all'URL originale
+                }
+
+                const layerItem = document.createElement("li");
+                const thumbImg = document.createElement("img");
+                thumbImg.src = thumbSrc;
+                thumbImg.title = `Layer ${index + 1}`;
+                thumbImg.addEventListener("click", () => {
+                    canvas.setActiveObject(img);
+                    canvas.renderAll();
+                });
+
+                layerItem.appendChild(thumbImg);
+                layersList.appendChild(layerItem);
+            });
+        }
+
+        function saveCanvasState() {
+            if (isCropping || isRemovingBackground) {
                 return;
             }
-            console.log("Salvataggio stato del canvas");
             const state = JSON.stringify(
                 canvas.toJSON([
                     "cornerColor",
@@ -510,26 +496,22 @@ document.addEventListener("DOMContentLoaded", function () {
             );
             history.push(state);
             if (history.length > maxHistory) {
-                history.shift(); // Rimuovi lo stato più vecchio se superato il limite
+                history.shift();
             }
-            console.log("Stato salvato, lunghezza pila:", history.length);
             updateButtons();
         }
 
-        // Ripristina l'ultimo stato del canvas
         function undo() {
             if (history.length <= 1) {
-                console.log("Nessuno stato da annullare");
                 return;
             }
-            console.log("Annullamento ultima azione");
-            history.pop(); // Rimuovi lo stato corrente
+            history.pop();
             const previousState = history[history.length - 1];
             if (previousState) {
                 canvas.clear();
                 canvas.loadFromJSON(previousState, () => {
                     canvas.renderAll();
-                    console.log("Stato ripristinato");
+                    updateLayersPanel();
                     updateButtons();
                 });
             } else {
@@ -537,11 +519,11 @@ document.addEventListener("DOMContentLoaded", function () {
                 canvas.clear();
                 canvas.setBackgroundColor("#fff");
                 canvas.renderAll();
+                updateLayersPanel();
                 updateButtons();
             }
         }
 
-        // Aggiorna stato dei pulsanti
         function updateButtons() {
             const cropBtn = document.getElementById("cropImageBtn");
             const applyCropBtn = document.getElementById("applyCropBtn");
@@ -555,20 +537,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 "backgroundRemovalInstruction",
             );
             const activeObject = canvas.getActiveObject();
-            console.log(
-                "updateButtons: activeObject =",
-                activeObject ? activeObject.type : null,
-                "isCropping =",
-                isCropping,
-                "isRemovingBackground =",
-                isRemovingBackground,
-                "history.length =",
-                history.length,
-            );
             if (isCropping && cropRect) {
-                console.log(
-                    "Modo ritaglio attivo, applyCropBtn e cancelCropBtn abilitati",
-                );
                 cropBtn.disabled = true;
                 applyCropBtn.disabled = false;
                 cancelCropBtn.disabled = false;
@@ -577,9 +546,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 undoBtn.disabled = true;
                 instruction.style.display = "none";
             } else if (isRemovingBackground && backgroundRemovalImage) {
-                console.log(
-                    "Modo rimozione sfondo attivo, removeBackgroundBtn disabilitato",
-                );
                 cropBtn.disabled = true;
                 applyCropBtn.disabled = true;
                 cancelCropBtn.disabled = true;
@@ -593,9 +559,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 !isCropping &&
                 !isRemovingBackground
             ) {
-                console.log(
-                    "Abilitazione cropImageBtn, removeBackgroundBtn e removeImageBtn",
-                );
                 cropBtn.disabled = false;
                 applyCropBtn.disabled = true;
                 cancelCropBtn.disabled = true;
@@ -604,7 +567,6 @@ document.addEventListener("DOMContentLoaded", function () {
                 undoBtn.disabled = history.length <= 1;
                 instruction.style.display = "none";
             } else {
-                console.log("Disabilitazione tutti i pulsanti");
                 cropBtn.disabled = true;
                 applyCropBtn.disabled = true;
                 cancelCropBtn.disabled = true;
@@ -615,7 +577,6 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         }
 
-        // Entra in modalità ritaglio
         function enterCropMode() {
             const activeObject = canvas.getActiveObject();
             if (!activeObject || activeObject.type !== "image") {
@@ -623,14 +584,9 @@ document.addEventListener("DOMContentLoaded", function () {
                 alert("Seleziona un'immagine prima di attivare il ritaglio!");
                 return;
             }
-            console.log(
-                "Entrata in modalità ritaglio per immagine:",
-                activeObject,
-            );
             isCropping = true;
-            croppedImage = activeObject; // Memorizza l'immagine da ritagliare
-            canvas.discardActiveObject(); // Deseleziona l'immagine
-            // Crea un rettangolo di ritaglio
+            croppedImage = activeObject;
+            canvas.discardActiveObject();
             cropRect = new fabric.Rect({
                 left: activeObject.left,
                 top: activeObject.top,
@@ -653,13 +609,10 @@ document.addEventListener("DOMContentLoaded", function () {
             canvas.setActiveObject(cropRect);
             canvas.renderAll();
             updateButtons();
-            console.log("Rettangolo di ritaglio creato e applicato");
         }
 
-        // Esci dalla modalità ritaglio
         function exitCropMode() {
             if (cropRect) {
-                console.log("Rimozione rettangolo di ritaglio");
                 canvas.remove(cropRect);
                 cropRect = null;
             }
@@ -669,20 +622,12 @@ document.addEventListener("DOMContentLoaded", function () {
             canvas.discardActiveObject();
             canvas.renderAll();
             updateButtons();
-            console.log("Uscita dalla modalità ritaglio");
         }
 
-        // Applica il ritaglio
         function applyCrop() {
             if (isApplyingCrop) {
-                console.log("applyCrop già in esecuzione, ignoro chiamata");
                 return;
             }
-            console.log("applyCrop chiamato, stato:", {
-                isCropping,
-                cropRect: !!cropRect,
-                croppedImage: !!croppedImage,
-            });
             if (!isCropping || !cropRect || !croppedImage) {
                 console.warn("Condizioni per il ritaglio non soddisfatte", {
                     isCropping,
@@ -696,20 +641,12 @@ document.addEventListener("DOMContentLoaded", function () {
                 return;
             }
             isApplyingCrop = true;
-            console.log("Applicazione ritaglio all'immagine:", croppedImage);
             const img = croppedImage;
             const cropX = (cropRect.left - img.left) / img.scaleX;
             const cropY = (cropRect.top - img.top) / img.scaleY;
             const cropWidth = (cropRect.width * cropRect.scaleX) / img.scaleX;
             const cropHeight = (cropRect.height * cropRect.scaleY) / img.scaleY;
-            console.log("Parametri di ritaglio:", {
-                cropX,
-                cropY,
-                cropWidth,
-                cropHeight,
-            });
 
-            // Crea un'immagine ritagliata
             fabric.Image.fromURL(
                 img.getSrc(),
                 (newImg) => {
@@ -730,20 +667,19 @@ document.addEventListener("DOMContentLoaded", function () {
                         borderColor: "black",
                         transparentCorners: false,
                     });
-                    canvas.remove(img); // Rimuovi l'immagine originale
-                    canvas.remove(cropRect); // Rimuovi il rettangolo di ritaglio
-                    canvas.add(newImg); // Aggiungi l'immagine ritagliata
+                    canvas.remove(img);
+                    canvas.remove(cropRect);
+                    canvas.add(newImg);
                     canvas.setActiveObject(newImg);
                     exitCropMode();
-                    saveCanvasState(); // Salva lo stato dopo il ritaglio
+                    saveCanvasState();
+                    updateLayersPanel();
                     canvas.renderAll();
-                    console.log("Ritaglio applicato con successo");
                 },
                 { crossOrigin: "anonymous" },
             );
         }
 
-        // Entra in modalità rimozione sfondo
         function enterBackgroundRemovalMode() {
             const activeObject = canvas.getActiveObject();
             if (!activeObject || activeObject.type !== "image") {
@@ -755,29 +691,19 @@ document.addEventListener("DOMContentLoaded", function () {
                 );
                 return;
             }
-            console.log(
-                "Entrata in modalità rimozione sfondo per immagine:",
-                activeObject,
-            );
             isRemovingBackground = true;
             backgroundRemovalImage = activeObject;
             updateButtons();
-            console.log(
-                "Modalità rimozione sfondo attivata, clicca sull'immagine per selezionare il colore",
-            );
         }
 
-        // Esci dalla modalità rimozione sfondo
         function exitBackgroundRemovalMode() {
             isRemovingBackground = false;
             backgroundRemovalImage = null;
             canvas.discardActiveObject();
             canvas.renderAll();
             updateButtons();
-            console.log("Uscita dalla modalità rimozione sfondo");
         }
 
-        // Gestisci la selezione del colore dello sfondo
         function handleBackgroundColorSelection(event) {
             if (!isRemovingBackground || !backgroundRemovalImage) {
                 console.warn(
@@ -788,14 +714,12 @@ document.addEventListener("DOMContentLoaded", function () {
             const pointer = canvas.getPointer(event.e);
             const img = backgroundRemovalImage;
 
-            // Crea una canvas temporanea per ottenere i dati dei pixel
             const tempCanvas = document.createElement("canvas");
             tempCanvas.width = img.width;
             tempCanvas.height = img.height;
             const ctx = tempCanvas.getContext("2d");
             ctx.drawImage(img.getElement(), 0, 0, img.width, img.height);
 
-            // Calcola la posizione relativa del click rispetto all'immagine
             const imgLeft = img.left;
             const imgTop = img.top;
             const scaleX = img.scaleX;
@@ -803,22 +727,17 @@ document.addEventListener("DOMContentLoaded", function () {
             const x = (pointer.x - imgLeft) / scaleX;
             const y = (pointer.y - imgTop) / scaleY;
 
-            // Ottieni il colore del pixel cliccato
             const pixelData = ctx.getImageData(x, y, 1, 1).data;
             const targetColor = {
                 r: pixelData[0],
                 g: pixelData[1],
                 b: pixelData[2],
             };
-            console.log("Colore dello sfondo selezionato:", targetColor);
 
-            // Rimuovi il colore dello sfondo
             removeBackground(img, targetColor);
         }
 
-        // Rimuovi il colore dello sfondo
         function removeBackground(img, targetColor) {
-            console.log("Inizio rimozione sfondo con colore:", targetColor);
             const tempCanvas = document.createElement("canvas");
             tempCanvas.width = img.width;
             tempCanvas.height = img.height;
@@ -832,27 +751,24 @@ document.addEventListener("DOMContentLoaded", function () {
                 tempCanvas.height,
             );
             const data = imageData.data;
-            const tolerance = 50; // Tolleranza per colori simili
+            const tolerance = 50;
 
-            // Scansiona i pixel e rendi trasparenti quelli che corrispondono al colore target
             for (let i = 0; i < data.length; i += 4) {
                 const r = data[i];
                 const g = data[i + 1];
                 const b = data[i + 2];
-                // Verifica se il colore è simile al targetColor
                 if (
                     Math.abs(r - targetColor.r) <= tolerance &&
                     Math.abs(g - targetColor.g) <= tolerance &&
                     Math.abs(b - targetColor.b) <= tolerance
                 ) {
-                    data[i + 3] = 0; // Imposta l'alpha a 0 (trasparente)
+                    data[i + 3] = 0;
                 }
             }
 
             ctx.putImageData(imageData, 0, 0);
             const newImageUrl = tempCanvas.toDataURL("image/png");
 
-            // Crea una nuova immagine con lo sfondo rimosso
             fabric.Image.fromURL(
                 newImageUrl,
                 (newImg) => {
@@ -869,19 +785,18 @@ document.addEventListener("DOMContentLoaded", function () {
                         borderColor: "black",
                         transparentCorners: false,
                     });
-                    canvas.remove(img); // Rimuovi l'immagine originale
-                    canvas.add(newImg); // Aggiungi l'immagine con sfondo rimosso
+                    canvas.remove(img);
+                    canvas.add(newImg);
                     canvas.setActiveObject(newImg);
                     exitBackgroundRemovalMode();
-                    saveCanvasState(); // Salva lo stato dopo la rimozione dello sfondo
+                    saveCanvasState();
+                    updateLayersPanel();
                     canvas.renderAll();
-                    console.log("Sfondo rimosso con successo");
                 },
                 { crossOrigin: "anonymous" },
             );
         }
 
-        // Rimuovi l'immagine selezionata
         function removeImage() {
             const activeObject = canvas.getActiveObject();
             if (!activeObject || activeObject.type !== "image") {
@@ -889,15 +804,13 @@ document.addEventListener("DOMContentLoaded", function () {
                 alert("Seleziona un'immagine da rimuovere!");
                 return;
             }
-            console.log("Rimozione immagine selezionata:", activeObject);
             canvas.remove(activeObject);
             canvas.discardActiveObject();
-            saveCanvasState(); // Salva lo stato dopo la rimozione
+            saveCanvasState();
+            updateLayersPanel();
             canvas.renderAll();
-            console.log("Immagine rimossa con successo");
         }
 
-        // Aggiungi foto selezionate al canvas
         const addToCanvasBtn = document.getElementById("addToCanvasBtn");
         if (addToCanvasBtn) {
             addToCanvasBtn.addEventListener("click", () => {
@@ -914,11 +827,11 @@ document.addEventListener("DOMContentLoaded", function () {
                         imgPath,
                         (img) => {
                             img.set({
-                                left: Math.random() * 600, // Posizione random iniziale
+                                left: Math.random() * 600,
                                 top: Math.random() * 400,
-                                scaleX: 0.5, // Scala iniziale
+                                scaleX: 0.5,
                                 scaleY: 0.5,
-                                hasControls: true, // Abilita resize/rotate
+                                hasControls: true,
                                 hasBorders: true,
                                 cornerColor: "black",
                                 cornerStrokeColor: "black",
@@ -928,25 +841,22 @@ document.addEventListener("DOMContentLoaded", function () {
                             });
                             canvas.add(img);
                             canvas.renderAll();
-                            console.log(
-                                "Immagine aggiunta al canvas:",
-                                imgPath,
-                            );
                         },
                         { crossOrigin: "anonymous" },
                     );
                 });
-                // Deseleziona checkbox dopo aggiunta
                 checkboxes.forEach((cb) => (cb.checked = false));
-                saveCanvasState(); // Salva lo stato dopo l'aggiunta
+                saveCanvasState();
             });
         }
 
-        // Salva collage
         const saveCollageBtn = document.getElementById("saveCollageBtn");
         if (saveCollageBtn) {
             saveCollageBtn.addEventListener("click", async () => {
-                if (canvas.getObjects().length === 0) {
+                if (
+                    canvas.getObjects().length === 0 &&
+                    !canvas.backgroundImage
+                ) {
                     alert("Il canvas è vuoto! Aggiungi almeno una foto.");
                     return;
                 }
@@ -959,29 +869,12 @@ document.addEventListener("DOMContentLoaded", function () {
                     type: "image/jpeg",
                 });
 
-                // Upload come nuova foto
                 await handleFiles([file], iddatadb);
-                // Chiudi modale e ricarica popup
                 document.getElementById("collageModal").style.display = "none";
                 loadPopupContent(iddatadb);
-                console.log("Collage salvato e modale chiuso");
             });
         }
 
-        // Pulisci canvas
-        const clearCanvasBtn = document.getElementById("clearCanvasBtn");
-        if (clearCanvasBtn) {
-            clearCanvasBtn.addEventListener("click", () => {
-                canvas.clear();
-                canvas.setBackgroundColor("#fff");
-                history = []; // Resetta la pila di stati
-                saveCanvasState(); // Salva lo stato vuoto
-                canvas.renderAll();
-                console.log("Canvas pulito");
-            });
-        }
-
-        // Gestione livelli delle immagini
         const bringToFrontBtn = document.getElementById("bringToFrontBtn");
         if (bringToFrontBtn) {
             bringToFrontBtn.addEventListener("click", () => {
@@ -989,8 +882,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.bringToFront(activeObject);
                     canvas.renderAll();
-                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
-                    console.log("Oggetto portato in primo piano");
+                    saveCanvasState();
+                    updateLayersPanel();
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
@@ -1004,8 +897,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.sendToBack(activeObject);
                     canvas.renderAll();
-                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
-                    console.log("Oggetto mandato in fondo");
+                    saveCanvasState();
+                    updateLayersPanel();
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
@@ -1019,8 +912,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.bringForward(activeObject);
                     canvas.renderAll();
-                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
-                    console.log("Oggetto spostato avanti di un livello");
+                    saveCanvasState();
+                    updateLayersPanel();
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
@@ -1034,19 +927,17 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.sendBackwards(activeObject);
                     canvas.renderAll();
-                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
-                    console.log("Oggetto spostato indietro di un livello");
+                    saveCanvasState();
+                    updateLayersPanel();
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
             });
         }
 
-        // Gestione ritaglio immagini
         const cropImageBtn = document.getElementById("cropImageBtn");
         if (cropImageBtn) {
             cropImageBtn.addEventListener("click", () => {
-                console.log("Pulsante Ritaglia cliccato");
                 enterCropMode();
             });
         }
@@ -1054,7 +945,6 @@ document.addEventListener("DOMContentLoaded", function () {
         const applyCropBtn = document.getElementById("applyCropBtn");
         if (applyCropBtn) {
             applyCropBtn.addEventListener("click", () => {
-                console.log("Pulsante Applica Ritaglio cliccato");
                 applyCrop();
             });
         }
@@ -1062,49 +952,39 @@ document.addEventListener("DOMContentLoaded", function () {
         const cancelCropBtn = document.getElementById("cancelCropBtn");
         if (cancelCropBtn) {
             cancelCropBtn.addEventListener("click", () => {
-                console.log("Pulsante Annulla Ritaglio cliccato");
                 exitCropMode();
             });
         }
 
-        // Gestione rimozione sfondo
         const removeBackgroundBtn = document.getElementById(
             "removeBackgroundBtn",
         );
         if (removeBackgroundBtn) {
             removeBackgroundBtn.addEventListener("click", () => {
-                console.log("Pulsante Rimuovi Sfondo cliccato");
                 enterBackgroundRemovalMode();
             });
         }
 
-        // Gestione rimozione immagine
         const removeImageBtn = document.getElementById("removeImageBtn");
         if (removeImageBtn) {
             removeImageBtn.addEventListener("click", () => {
-                console.log("Pulsante Rimuovi Immagine cliccato");
                 removeImage();
             });
         }
 
-        // Gestione undo
         const undoBtn = document.getElementById("undoBtn");
         if (undoBtn) {
             undoBtn.addEventListener("click", () => {
-                console.log("Pulsante Annulla cliccato");
                 undo();
             });
         }
 
-        // Assicurati che il loader sia nascosto all'apertura del popup
         const loader = document.getElementById("loader");
         if (loader) {
-            console.log("Nascondo loader all'apertura del popup");
             loader.style.display = "none";
         }
     }
 
-    // Gestione del pulsante Photos
     const photosButtons = document.querySelectorAll(".photos-btn");
     const photosModal = document.getElementById("photosModal");
     const closeBtn = document.querySelector(".close-btn");
@@ -1112,10 +992,6 @@ document.addEventListener("DOMContentLoaded", function () {
     if (photosButtons.length && photosModal && closeBtn) {
         photosButtons.forEach((button) => {
             button.addEventListener("click", function () {
-                console.log(
-                    "Pulsante Photos cliccato per iddatadb:",
-                    this.getAttribute("data-iddatadb"),
-                );
                 const iddatadb = this.getAttribute("data-iddatadb");
                 loadPopupContent(iddatadb);
                 photosModal.style.display = "block";
@@ -1124,7 +1000,6 @@ document.addEventListener("DOMContentLoaded", function () {
         });
 
         closeBtn.addEventListener("click", function () {
-            console.log("Chiusura modale photos");
             photosModal.style.display = "none";
             document.querySelector(".overlay").style.display = "none";
             document.body.style.pointerEvents = "auto";
@@ -1132,7 +1007,6 @@ document.addEventListener("DOMContentLoaded", function () {
 
         window.addEventListener("click", function (event) {
             if (event.target === photosModal) {
-                console.log("Chiusura modale photos cliccando sullo sfondo");
                 photosModal.style.display = "none";
                 document.querySelector(".overlay").style.display = "none";
                 document.body.style.pointerEvents = "auto";

public/userarea/photos_popup.php

@@ -21,7 +21,6 @@ use Endroid\QrCode\Writer\PngWriter;
 try {
     $dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../../');
     $dotenv->load();
-    error_log("File .env caricato correttamente da " . __DIR__ . '/../../.env');
 } catch (Exception $e) {
     error_log("Errore nel caricamento del file .env: " . $e->getMessage());
     echo json_encode(['error' => 'Errore nel caricamento del file di configurazione']);
@@ -176,7 +175,7 @@ $result->saveToFile($qrCodeFile);
     <!-- Modale per collage -->
     <div id="collageModal" class="modal" style="display: none; position: fixed; z-index: 1002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);">
         <div class="modal-content" style="background: white; margin: 5% auto; padding: 20px; width: 80%; max-width: 1200px; position: relative;">
-            <span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer;">&times;</span>
+            <span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; font-weight: bold; color: #333; cursor: pointer; z-index: 1003; background: #fff; padding: 5px 10px; border-radius: 50%;">&times;</span>
             <h3>Crea Collage</h3>
 
             <!-- Lista foto selezionabili -->
@@ -195,10 +194,15 @@ $result->saveToFile($qrCodeFile);
             <!-- Canvas per editing -->
             <canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
 
+            <!-- Pannello dei livelli -->
+            <div id="layersPanel" style="width: 120px; max-height: 600px; overflow-y: auto; background: #f8f9fa; padding: 10px; position: absolute; right: 0; top: 60px;">
+                <h4 style="margin: 0 0 10px 0; font-size: 16px;">Livelli</h4>
+                <ul id="layersList" style="list-style: none; padding: 0;"></ul>
+            </div>
+
             <!-- Bottoni azioni -->
             <div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px;">
                 <button id="saveCollageBtn" title="Salva il collage"><i class="fas fa-save"></i></button>
-                <!-- <button id="clearCanvasBtn" title="Pulisci il canvas"><i class="fas fa-trash"></i></button> -->
                 <button id="bringToFrontBtn" title="Porta in primo piano"><i class="fas fa-arrow-up"></i></button>
                 <button id="sendToBackBtn" title="Manda in fondo"><i class="fas fa-arrow-down"></i></button>
                 <button id="bringForwardBtn" title="Sposta avanti di un livello"><i class="fas fa-arrow-circle-up"></i></button>
@@ -311,11 +315,6 @@ $result->saveToFile($qrCodeFile);
         color: white;
     }
 
-    #clearCanvasBtn {
-        background: #dc3545;
-        color: white;
-    }
-
     #bringToFrontBtn,
     #sendToBackBtn,
     #bringForwardBtn,
@@ -323,7 +322,6 @@ $result->saveToFile($qrCodeFile);
         background: #007bff;
         color: white;
         padding: 8px;
-        /* Pulsanti solo icona più piccoli */
     }
 
     #cropImageBtn,
@@ -344,4 +342,25 @@ $result->saveToFile($qrCodeFile);
     #collageModal button i {
         font-size: 16px;
     }
+
+    /* Stile per il pannello dei livelli */
+    #layersPanel {
+        z-index: 1002;
+    }
+
+    #layersPanel li {
+        margin-bottom: 5px;
+    }
+
+    #layersPanel img {
+        width: 50px;
+        height: 50px;
+        border: 2px solid #ccc;
+        cursor: pointer;
+        object-fit: cover;
+    }
+
+    #layersPanel img:hover {
+        border-color: #007bff;
+    }
 </style>

public/userarea/quotations.php

@@ -0,0 +1,381 @@
+<?php
+// Abilita errori per debug
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+ini_set('log_errors', 1);
+ini_set('error_log', __DIR__ . '/quotations_debug.log');
+if (!file_exists(__DIR__ . '/quotations_debug.log')) {
+    file_put_contents(__DIR__ . '/quotations_debug.log', "Inizio operazioni alle " . date('Y-m-d H:i:s') . "\n", FILE_APPEND);
+}
+
+// Log iniziale
+error_log("Inizio operazioni alle " . date('Y-m-d H:i:s'));
+
+include('include/headscript.php');
+
+$db = DBHandlerSelect::getInstance();
+$pdo = $db->getConnection();
+
+// Recupera l'ID dell'utente loggato
+$user_id = $iduserlogin ?? 1;
+
+// Gestione creazione nuova quotation (crea record vuoto su conferma)
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'create') {
+    $description = '';
+    $customer = '';
+
+    $stmt = $pdo->prepare("INSERT INTO quotations (description, customer, iduser) VALUES (?, ?, ?)");
+    $stmt->execute([$description, $customer, $user_id]);
+    $newId = $pdo->lastInsertId();
+
+    // Log creazione
+    error_log("Creata nuova quotation ID: $newId");
+
+    // Reindirizza alla modifica della nuova quotation
+    header("Location: quotations.php?edit_id=" . $newId . "&status=success&message=" . urlencode("Quotation creata con successo"));
+    exit;
+}
+
+// Gestione modifica quotation
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'update' && isset($_POST['id'])) {
+    $id = intval($_POST['id']);
+    $description = $_POST['description'] ?? '';
+    $customer = $_POST['customer'] ?? '';
+
+    $stmt = $pdo->prepare("UPDATE quotations SET description = ?, customer = ? WHERE id = ? AND iduser = ?");
+    $stmt->execute([$description, $customer, $id, $user_id]);
+
+    // Log modifica
+    error_log("Modificata quotation ID: $id");
+
+    // Reindirizza alla lista delle quotations
+    header("Location: quotations.php?status=success&message=" . urlencode("Quotation modificata con successo"));
+    exit;
+}
+
+// Gestione cancellazione quotation
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'delete' && isset($_POST['id'])) {
+    $id = intval($_POST['id']);
+
+    $stmt = $pdo->prepare("DELETE FROM quotations WHERE id = ? AND iduser = ?");
+    $stmt->execute([$id, $user_id]);
+
+    // Log cancellazione
+    error_log("Cancellata quotation ID: $id");
+
+    header("Location: quotations.php?status=success&message=" . urlencode("Quotation cancellata con successo"));
+    exit;
+}
+
+// Recupera tutte le quotations per l'utente
+$stmt = $pdo->prepare("SELECT * FROM quotations WHERE iduser = ? ORDER BY creation_date DESC");
+$stmt->execute([$user_id]);
+$quotations = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+// Verifica se è richiesta la modifica di una quotation
+$editQuotation = null;
+if (isset($_GET['edit_id'])) {
+    $editId = intval($_GET['edit_id']);
+    $stmt = $pdo->prepare("SELECT * FROM quotations WHERE id = ? AND iduser = ?");
+    $stmt->execute([$editId, $user_id]);
+    $editQuotation = $stmt->fetch(PDO::FETCH_ASSOC);
+}
+?>
+
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
+    <?php include('cssinclude.php'); ?>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2Lw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
+    <style>
+        /* Stili simili alla pagina fornita, adattati */
+        .cell-changed {
+            background-color: #fff3b0 !important;
+            transition: background-color 0.3s ease;
+        }
+
+        input.manual-input,
+        select.manual-input {
+            background-color: #fff3cd;
+        }
+
+        input.required-input,
+        select.required-input {
+            background-color: #f8d7da;
+        }
+
+        input,
+        select,
+        textarea {
+            width: 100%;
+            box-sizing: border-box;
+            border: 1px solid #ced4da;
+            border-radius: 4px;
+            padding: 5px;
+            font-size: 14px;
+        }
+
+        .action-btn {
+            padding: 6px 8px;
+            margin-right: 5px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 35px;
+            box-sizing: border-box;
+        }
+
+        .save-btn {
+            background-color: #28a745;
+            color: white;
+        }
+
+        .delete-btn {
+            background-color: #dc3545;
+            color: white;
+        }
+
+        .photos-btn {
+            background-color: #007bff;
+            color: white;
+        }
+
+        .parts-btn {
+            background-color: #ffc107;
+            color: white;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        .form-group textarea {
+            height: 100px;
+            resize: vertical;
+        }
+
+        .flash-success {
+            background-color: #d4edda !important;
+            transition: background-color 0.3s ease;
+        }
+
+        .quotation-actions {
+            margin-top: 20px;
+        }
+    </style>
+    <title>Gestione Quotations - <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
+</head>
+
+<body>
+    <div class="wrapper">
+        <?php include('include/navbar.php'); ?>
+        <?php include('include/topbar.php'); ?>
+        <div class="page-wrapper">
+            <div class="page-content">
+                <div class="card radius-10">
+                    <div class="card-header">
+                        <div class="d-flex align-items-center">
+                            <div>
+                                <h6 class="mb-0">Gestione Quotations</h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <?php if ($editQuotation): ?>
+                            <!-- Modifica Quotation -->
+                            <h6 class="mb-3">Modifica Quotation ID: <?= $editQuotation['id'] ?></h6>
+                            <form id="editForm" method="post">
+                                <input type="hidden" name="action" value="update">
+                                <input type="hidden" name="id" value="<?= $editQuotation['id'] ?>">
+                                <div class="form-group">
+                                    <label for="description">Descrizione</label>
+                                    <textarea id="description" name="description" class="manual-input required-input" required><?= htmlspecialchars($editQuotation['description']) ?></textarea>
+                                </div>
+                                <div class="form-group">
+                                    <label for="customer">Cliente</label>
+                                    <input type="text" id="customer" name="customer" class="manual-input required-input" value="<?= htmlspecialchars($editQuotation['customer']) ?>" required>
+                                </div>
+                                <button type="submit" class="btn btn-primary">Salva Modifiche</button>
+                                <a href="quotations.php" class="btn btn-secondary">Torna alla Lista</a>
+                            </form>
+                            <div class="quotation-actions">
+                                <h6 class="mb-3">Azioni</h6>
+                                <button type="button" class="photos-btn action-btn" data-idquotations="<?= $editQuotation['id'] ?>" title="Photos"><i class="fas fa-camera"></i></button>
+                                <button type="button" class="parts-btn action-btn" data-idquotations="<?= $editQuotation['id'] ?>" title="Parts"><i class="fas fa-puzzle-piece"></i></button>
+                            </div>
+                        <?php else: ?>
+                            <!-- Lista Quotations -->
+                            <div class="mb-3">
+                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">Crea Nuova Quotation</button>
+                            </div>
+                            <h6 class="mb-3">Quotations Esistenti</h6>
+                            <table id="quotationsTable" class="table table-striped table-bordered">
+                                <thead>
+                                    <tr>
+                                        <th>ID</th>
+                                        <th>Data Creazione</th>
+                                        <th>Descrizione</th>
+                                        <th>Cliente</th>
+                                        <th>Azioni</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <?php foreach ($quotations as $row): ?>
+                                        <tr data-id="<?= $row['id'] ?>">
+                                            <td><?= htmlspecialchars($row['id']) ?></td>
+                                            <td><?= htmlspecialchars($row['creation_date']) ?></td>
+                                            <td>
+                                                <textarea name="description" class="cell-input manual-input form-control"><?= htmlspecialchars($row['description']) ?></textarea>
+                                            </td>
+                                            <td>
+                                                <input type="text" name="customer" class="cell-input manual-input form-control" value="<?= htmlspecialchars($row['customer']) ?>">
+                                            </td>
+                                            <td>
+                                                <button type="button" class="save-btn action-btn edit-btn" data-id="<?= $row['id'] ?>" title="Salva Modifiche"><i class="fas fa-save"></i></button>
+                                                <button type="button" class="delete-btn action-btn" data-id="<?= $row['id'] ?>" title="Cancella" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fas fa-trash"></i></button>
+                                                <button type="button" class="photos-btn action-btn" data-idquotations="<?= $row['id'] ?>" title="Photos"><i class="fas fa-camera"></i></button>
+                                                <button type="button" class="parts-btn action-btn" data-idquotations="<?= $row['id'] ?>" title="Parts"><i class="fas fa-puzzle-piece"></i></button>
+                                                <a href="quotations.php?edit_id=<?= $row['id'] ?>" class="btn btn-secondary action-btn" title="Modifica Dettagliata"><i class="fas fa-edit"></i></a>
+                                            </td>
+                                        </tr>
+                                    <?php endforeach; ?>
+                                </tbody>
+                            </table>
+                        <?php endif; ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Modal per conferma creazione nuova quotation -->
+        <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="createModalLabel">Conferma Creazione Nuova Quotation</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p>Vuoi creare una nuova quotation?</p>
+                        <form id="createModalForm" method="post">
+                            <input type="hidden" name="action" value="create">
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
+                        <button type="button" class="btn btn-primary" id="confirmCreate">Conferma</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Modal per conferma cancellazione -->
+        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="deleteModalLabel">Conferma Cancellazione</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p>Sicuro di voler cancellare questa quotation?</p>
+                        <form id="deleteForm" method="post">
+                            <input type="hidden" name="action" value="delete">
+                            <input type="hidden" name="id" id="deleteQuotationId">
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
+                        <button type="button" class="btn btn-danger" id="confirmDelete">Conferma</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="overlay toggle-icon"></div>
+        <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'); ?>
+    <?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.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+    <script src="photos.js"></script>
+    <script src="parts.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // Inizializza DataTables se non siamo in modalità modifica
+            if (!document.querySelector('#editForm')) {
+                $('#quotationsTable').DataTable({
+                    "paging": true,
+                    "searching": true,
+                    "ordering": true,
+                    "info": true,
+                    "autoWidth": false,
+                    "responsive": true
+                });
+            }
+
+            // Gestione conferma creazione nel modal
+            document.getElementById('confirmCreate').addEventListener('click', function() {
+                document.getElementById('createModalForm').submit();
+            });
+
+            // Gestione modifica inline e save nella lista
+            document.querySelectorAll('.edit-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const row = this.closest('tr');
+                    const id = row.dataset.id;
+                    const description = row.querySelector('textarea[name="description"]').value;
+                    const customer = row.querySelector('input[name="customer"]').value;
+
+                    const formData = new FormData();
+                    formData.append('action', 'update');
+                    formData.append('id', id);
+                    formData.append('description', description);
+                    formData.append('customer', customer);
+
+                    fetch('quotations.php', {
+                        method: 'POST',
+                        body: formData
+                    }).then(response => {
+                        if (response.ok) {
+                            row.classList.add('flash-success');
+                            setTimeout(() => row.classList.remove('flash-success'), 500);
+                            alert('Quotation modificata con successo!');
+                        } else {
+                            alert('Errore durante la modifica.');
+                        }
+                    });
+                });
+            });
+
+            // Gestione apertura modal di cancellazione
+            document.querySelectorAll('.delete-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const id = this.dataset.id;
+                    document.getElementById('deleteQuotationId').value = id;
+                });
+            });
+
+            // Gestione conferma cancellazione nel modal
+            document.getElementById('confirmDelete').addEventListener('click', function() {
+                document.getElementById('deleteForm').submit();
+            });
+
+            // I bottoni photos e parts usano gli script esistenti (photos.js, parts.js), passando data-idquotations
+        });
+    </script>
+</body>
+
+</html>

public/userarea/save_matrice.php

@@ -0,0 +1,44 @@
+<?php
+header('Content-Type: application/json');
+include('include/headscript.php');
+
+$dbHandler = DBHandlerSelect::getInstance();
+$pdo = $dbHandler->getConnection();
+
+$data = json_decode(file_get_contents('php://input'), true);
+
+$iddatadb = $data['iddatadb'] ?? null;
+$parts = $data['parts'] ?? [];
+
+if (!$iddatadb || empty($parts)) {
+    echo json_encode(['success' => false, 'message' => 'Dati mancanti']);
+    exit;
+}
+
+$part = $parts[0];
+$partId = $part['id'] ?? null;
+$idmatrice = $part['idmatrice'] ?? null;
+
+if (!$partId) {
+    echo json_encode(['success' => false, 'message' => 'ID della parte mancante']);
+    exit;
+}
+
+try {
+    $stmt = $pdo->prepare("UPDATE identification_parts 
+                           SET idmatrice = :idmatrice, updated_at = NOW() 
+                           WHERE id = :id AND iddatadb = :iddatadb");
+    $stmt->execute([
+        ':idmatrice' => $idmatrice,
+        ':id' => $partId,
+        ':iddatadb' => $iddatadb
+    ]);
+
+    if ($stmt->rowCount() > 0) {
+        echo json_encode(['success' => true, 'message' => 'Matrice salvata con successo']);
+    } else {
+        echo json_encode(['success' => false, 'message' => 'Nessuna riga aggiornata. Verifica l\'ID della parte.']);
+    }
+} catch (PDOException $e) {
+    echo json_encode(['success' => false, 'message' => 'Errore nel salvataggio della matrice: ' . $e->getMessage()]);
+}

public/userarea/update_visible_import.php

@@ -0,0 +1,26 @@
+<?php
+require_once 'include/headscript.php';
+
+header('Content-Type: application/json');
+
+$data = json_decode(file_get_contents('php://input'), true);
+$template_id = $data['template_id'] ?? null;
+$mapping_id = $data['mapping_id'] ?? null;
+$value = $data['value'] ?? null;
+
+if (!$template_id || !$mapping_id || !isset($value)) {
+    echo json_encode(['success' => false, 'message' => 'Invalid input']);
+    exit;
+}
+
+$db = DBHandlerSelect::getInstance();
+$pdo = $db->getConnection();
+
+$stmt = $pdo->prepare("UPDATE template_mapping SET is_visible_import = ? WHERE id = ? AND template_id = ?");
+$result = $stmt->execute([$value, $mapping_id, $template_id]);
+
+if ($result) {
+    echo json_encode(['success' => true]);
+} else {
+    echo json_encode(['success' => false, 'message' => 'Failed to update is_visible_import']);
+}