From b6745a196df94f3da61658582138f23ca2780637 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Sun, 31 May 2026 23:56:14 +0200
Subject: [PATCH] feat(ui): simplify orientation step replacing degree rotation
 array by basic transforms

---
 .../dental-client/public/version.txt          |  2 +-
 .../src/pages/ImageDetailsPage.jsx            | 95 +++++++------------
 2 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/dental-server/dental-client/public/version.txt b/dental-server/dental-client/public/version.txt
index f1cd7fa..c594452 100644
--- a/dental-server/dental-client/public/version.txt
+++ b/dental-server/dental-client/public/version.txt
@@ -1 +1 @@
-2.1.49
+2.1.51
diff --git a/dental-server/dental-client/src/pages/ImageDetailsPage.jsx b/dental-server/dental-client/src/pages/ImageDetailsPage.jsx
index f723076..dcb0fa0 100644
--- a/dental-server/dental-client/src/pages/ImageDetailsPage.jsx
+++ b/dental-server/dental-client/src/pages/ImageDetailsPage.jsx
@@ -193,17 +193,17 @@ export default function ImageDetailsPage() {
   const cssTransform = (deg, flipH, flipV) =>
     `scaleX(${flipH ? -1 : 1}) scaleY(${flipV ? -1 : 1}) rotate(${deg}deg)`;
 
-  const choosePages = [
-    { flipH: false, flipV: false, label: 'Rotações' },
-    { flipH: true,  flipV: false, label: 'Espelhado ⇆' },
-    { flipH: false, flipV: true,  label: 'Espelhado ⇅' },
+  const initialOptions = [
+    { id: 'normal', deg: 0,  flipH: false, flipV: false, label: '0°' },
+    { id: 'fliph',  deg: 0,  flipH: true,  flipV: false, label: 'Espelho ⇆' },
+    { id: 'flipv',  deg: 0,  flipH: false, flipV: true,  label: 'Espelho ⇅' },
+    { id: 'rot90',  deg: 90, flipH: false, flipV: false, label: 'Rotacionar +90°' },
   ];
 
-  const pickOrientation = (deg) => {
-    const pg = choosePages[choosePage];
-    setBaseRotation(deg);
-    setBaseFlipH(pg.flipH);
-    setBaseFlipV(pg.flipV);
+  const pickOrientation = (opt) => {
+    setBaseRotation(opt.deg);
+    setBaseFlipH(opt.flipH);
+    setBaseFlipV(opt.flipV);
     setFineTuneAngle(0);
     setStep('finetune');
   };
@@ -282,9 +282,8 @@ export default function ImageDetailsPage() {
   };
 
   // Gerencia opções (4 no total). No mobile exibe APENAS UMA GIGANTE por vez.
-  const allRotations = [0, 90, 180, 270];
   const useOneCard = isMobile;
-  const currentRotations = useOneCard ? [allRotations[orientationSubpage]] : allRotations;
+  const currentOptions = useOneCard ? [initialOptions[orientationSubpage]] : initialOptions;
 
   return (
     <div className="layout">
@@ -352,25 +351,6 @@ export default function ImageDetailsPage() {
                   Escolha a melhor orientação inicial.
                 </p>
                 
-                {/* Controles Principais de Categoria (Rotações, Espelhos) */}
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 20 }}>
-                  <button
-                    type="button"
-                    className="btn btn-secondary"
-                    onClick={() => { setChoosePage((p) => Math.max(0, p - 1)); setOrientationSubpage(0); }}
-                    disabled={choosePage === 0}
-                  >← Categoria</button>
-                  <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-secondary)' }}>
-                    {choosePages[choosePage].label} ({choosePage + 1}/{choosePages.length})
-                  </span>
-                  <button
-                    type="button"
-                    className="btn btn-secondary"
-                    onClick={() => { setChoosePage((p) => Math.min(choosePages.length - 1, p + 1)); setOrientationSubpage(0); }}
-                    disabled={choosePage === choosePages.length - 1}
-                  >Categoria →</button>
-                </div>
-                
                 {/* Controles de Rotação (Mobile exibe 1 por vez) */}
                 {useOneCard && (
                   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 16 }}>
@@ -387,36 +367,33 @@ export default function ImageDetailsPage() {
                 )}
 
                 <div style={{ display: 'grid', gridTemplateColumns: useOneCard ? '1fr' : 'repeat(4, 1fr)', gap: 16 }}>
-                  {currentRotations.map((deg) => {
-                    const pg = choosePages[choosePage];
-                    return (
-                      <div
-                        key={deg}
-                        style={{
-                          border: '1px solid var(--border-color)', borderRadius: 10, background: 'var(--bg-color)',
-                          padding: useOneCard ? 0 : 16, display: 'flex', flexDirection: 'column',
-                          alignItems: 'center', transition: 'all .2s ease', overflow: 'hidden'
-                        }}
-                      >
-                        <div style={{ width: '100%', aspectRatio: useOneCard ? 'auto' : '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: useOneCard ? 20 : 0, background: '#0b1220' }}>
-                          <img
-                            src={imageUrl}
-                            alt={`${deg}°`}
-                            loading="lazy"
-                            style={{ width: useOneCard ? '100%' : '80%', maxHeight: useOneCard ? '50vh' : '100%', objectFit: 'contain', transform: cssTransform(deg, pg.flipH, pg.flipV), transformOrigin: 'center' }}
-                          />
-                        </div>
-                        <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', width: '100%', background: 'var(--bg-surface)' }}>
-                           <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
-                             {deg}°{pg.flipH ? ' ⇆' : pg.flipV ? ' ⇅' : ''}
-                           </span>
-                           <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => pickOrientation(deg)}>
-                             ✅ Escolher esta
-                           </button>
-                        </div>
+                  {currentOptions.map((opt) => (
+                    <div
+                      key={opt.id}
+                      style={{
+                        border: '1px solid var(--border-color)', borderRadius: 10, background: 'var(--bg-surface)',
+                        padding: useOneCard ? 0 : 16, display: 'flex', flexDirection: 'column',
+                        alignItems: 'center', transition: 'all .2s ease', overflow: 'hidden'
+                      }}
+                    >
+                      <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: useOneCard ? 20 : 0, background: 'var(--bg-surface)' }}>
+                        <img
+                          src={imageUrl}
+                          alt={opt.label}
+                          loading="lazy"
+                          style={{ width: '100%', maxHeight: useOneCard ? '50vh' : 280, objectFit: 'contain', transform: cssTransform(opt.deg, opt.flipH, opt.flipV), transformOrigin: 'center' }}
+                        />
                       </div>
-                    );
-                  })}
+                      <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', width: '100%', background: 'var(--bg-surface)' }}>
+                         <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
+                           {opt.label}
+                         </span>
+                         <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => pickOrientation(opt)}>
+                           ✅ Escolher esta
+                         </button>
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
             )}