From b41825879efe949e559765840c2a1f0159e618d2 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Mon, 25 May 2026 00:17:46 +0200
Subject: [PATCH] fix(transform): desativa geracao de posicoes para imagens
 derivadas e limpa estado

---
 dental-server/public/app.js | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/dental-server/public/app.js b/dental-server/public/app.js
index ccf4285..6e57d1d 100644
--- a/dental-server/public/app.js
+++ b/dental-server/public/app.js
@@ -476,6 +476,8 @@ async function loadPatientImages(patientName) {
 function renderPatientImages() {
     imagesGrid.innerHTML = patientImages.map(image => {
         const thumbUrl = image.thumb_filename ? `/uploads/${image.thumb_filename}` : `/uploads/${image.filename}`;
+        const isDerived = !!image.original_image_id;
+        
         return `
         <div class="image-card ${!image.enabled ? 'disabled' : ''}" data-id="${image.id}" onclick="handleImageClick(${image.id})">
             <div class="image-preview" style="background-image: url('${thumbUrl}'); background-size: cover; background-position: center;"></div>
@@ -483,8 +485,8 @@ function renderPatientImages() {
                 <div class="image-meta"><span>📅 ${formatDate(image.created_at)}</span></div>
                 <div class="image-guid">${escapeHtml(image.image_guid || image.filename)}</div>
                 <div class="image-actions">
-                    <button class="btn btn-primary btn-small" style="flex:1" onclick="handleImageClick(${image.id}); event.stopPropagation();">
-                        🔄 Orientar
+                    <button class="btn btn-primary btn-small" style="flex:1; ${isDerived ? 'background-color: #4b5563; border-color: #4b5563;' : ''}" onclick="handleImageClick(${image.id}); event.stopPropagation();">
+                        ${isDerived ? '🔍 Detalhes' : '🔄 Orientar'}
                     </button>
                     <button class="btn btn-small" style="flex:1; background:${image.enabled ? 'rgba(255,107,107,0.12)' : 'rgba(81,207,102,0.12)'}; color:${image.enabled ? '#c0392b' : '#27ae60'}; border:1px solid ${image.enabled ? 'rgba(255,107,107,0.3)' : 'rgba(81,207,102,0.3)'};" onclick="toggleImageEnabled(${image.id}); event.stopPropagation();">
                         ${image.enabled ? '🚫' : '✅'}
@@ -516,7 +518,8 @@ async function showTransformModal(imageId) {
     
     // Check if the image has been modified (has original_image_id)
     const btnResetImage = document.getElementById('btnResetImage');
-    if (image && image.original_image_id) {
+    const isDerived = !!(image && image.original_image_id);
+    if (isDerived) {
         btnResetImage.style.display = 'flex';
         btnResetImage.setAttribute('data-modified', 'true');
     } else {
@@ -540,6 +543,25 @@ async function showTransformModal(imageId) {
         document.getElementById('transformExtraInfo').style.display = 'none';
     }
 
+    if (isDerived) {
+        const imageUrl = image.thumb_filename ? `/uploads/${image.thumb_filename}` : `/uploads/${image.filename}`;
+        const container = document.getElementById('transformOptions');
+        container.innerHTML = `
+            <div style="grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; gap: 15px;">
+                <div style="max-width: 320px; border: 2px solid #ddd; border-radius: 8px; padding: 10px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
+                    <img src="${imageUrl}" alt="Imagem Orientada" style="max-width: 100%; height: auto; border-radius: 4px; display: block;" loading="lazy">
+                    <div style="margin-top: 10px; font-weight: 600; color: #2c3e50;">Imagem Orientada</div>
+                </div>
+                <div style="max-width: 450px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); padding: 15px; border-radius: 8px; color: #1e3a8a; font-size: 0.95rem;">
+                    <p style="margin: 0 0 10px 0;"><strong>ℹ️ Orientação Concluída</strong></p>
+                    <p style="margin: 0;">Esta imagem já é o resultado de uma rotação/espelhamento. Para aplicar novas transformações, primeiro restaure a imagem original clicando no botão de restaurar ↩️ no menu superior.</p>
+                </div>
+            </div>
+        `;
+        clearTransformSelection();
+        return;
+    }
+
     document.getElementById('transformOptions').innerHTML = `
         <div style="grid-column:1/-1; text-align:center; padding:40px 0; color:#888;">
             <div class="spinner" style="margin:0 auto 16px;"></div>
@@ -731,6 +753,7 @@ async function saveSelectedTransform() {
         if (!res.ok) throw new Error('Erro ao salvar');
 
         transformModal.classList.remove('active');
+        clearTransformSelection();
         showToast('Orientação salva!', 'success');
         if (selectedPatient) loadPatientImages(selectedPatient.patient_name);
     } catch (e) {