From 2caaca213a4bc72794c09b2587f6fd632b3feb86 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Mon, 25 May 2026 00:27:09 +0200
Subject: [PATCH] fix(transform): corrige bug visual sem alterar logica
 original e limpa estado

---
 dental-server/public/app.js     | 36 +++++++++------------------------
 dental-server/public/index.html |  2 +-
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/dental-server/public/app.js b/dental-server/public/app.js
index 6e57d1d..52e84c6 100644
--- a/dental-server/public/app.js
+++ b/dental-server/public/app.js
@@ -476,8 +476,6 @@ 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>
@@ -485,8 +483,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; ${isDerived ? 'background-color: #4b5563; border-color: #4b5563;' : ''}" onclick="handleImageClick(${image.id}); event.stopPropagation();">
-                        ${isDerived ? '🔍 Detalhes' : '🔄 Orientar'}
+                    <button class="btn btn-primary btn-small" style="flex:1" onclick="handleImageClick(${image.id}); event.stopPropagation();">
+                        🔄 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 ? '🚫' : '✅'}
@@ -518,8 +516,7 @@ async function showTransformModal(imageId) {
     
     // Check if the image has been modified (has original_image_id)
     const btnResetImage = document.getElementById('btnResetImage');
-    const isDerived = !!(image && image.original_image_id);
-    if (isDerived) {
+    if (image && image.original_image_id) {
         btnResetImage.style.display = 'flex';
         btnResetImage.setAttribute('data-modified', 'true');
     } else {
@@ -543,25 +540,6 @@ 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>
@@ -784,8 +762,12 @@ function adjustFineTune(offset) {
 
     // Update display name inside the card
     const nameEl = selectedEl.querySelector('.transform-name');
-    if (nameEl) {
-        nameEl.innerText = `${transform.name} (${fineTuneAngle > 0 ? '+' : ''}${fineTuneAngle}°)`;
+    if (nameEl && transform) {
+        if (fineTuneAngle === 0) {
+            nameEl.innerText = transform.name;
+        } else {
+            nameEl.innerText = `${transform.name} (${fineTuneAngle > 0 ? '+' : ''}${fineTuneAngle}°)`;
+        }
     }
 }
 
diff --git a/dental-server/public/index.html b/dental-server/public/index.html
index 2f30209..de3cc26 100644
--- a/dental-server/public/index.html
+++ b/dental-server/public/index.html
@@ -129,7 +129,7 @@
                 <div id="transformViewWrapper" style="display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%;">
                     <div id="transformOptions" class="transform-grid" style="flex: 1; min-height: 0;"></div>
                     <div id="transformActionArea" style="display: none; margin-top: 15px; background: #f8f9fa; padding: 15px; border-radius: 8px; flex-shrink: 0; border: 1px solid #e3e8ee;">
-                        <textarea id="newImageRemark" class="search-input" rows="2" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;" placeholder="Nova Observação / Detalhes (Opcional)..."></textarea>
+                        <textarea id="newImageRemark" class="search-input" rows="2" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px;" placeholder="Nova observação (opcional)"></textarea>
                         <div style="display: flex; gap: 10px; margin-top: 10px;">
                             <button class="btn btn-secondary" style="flex: 1; padding: 12px; font-size: 1.1rem;" onclick="clearTransformSelection()">Cancelar</button>
                             <button id="btnSaveTransform" class="btn btn-primary" style="flex: 2; padding: 12px; font-size: 1.1rem;" onclick="saveSelectedTransform()">Salvar Nova Imagem</button>