From ef3bf4ce5cd0b1da026caae3ff534d4a0f11dc6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Mon, 3 Aug 2026 11:13:22 -0300
Subject: [PATCH] Move composition below product volume

---
 src/pages/ProductDetails.tsx | 104 +++++++++++++++++------------------
 1 file changed, 51 insertions(+), 53 deletions(-)

diff --git a/src/pages/ProductDetails.tsx b/src/pages/ProductDetails.tsx
index c6e58bb..93c7569 100644
--- a/src/pages/ProductDetails.tsx
+++ b/src/pages/ProductDetails.tsx
@@ -412,59 +412,6 @@ const ProductDetails = () => {
         </div>
       </div>
 
-      <section className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
-        <div className="mb-5">
-          <div>
-            <h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Composição</h3>
-            {composition && (
-              <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">
-                Para produzir 1 UN de {composition.finishedProductSku || productInfo.id}
-              </p>
-            )}
-          </div>
-        </div>
-        {isCompositionLoading ? (
-          <div className="flex h-24 items-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">Carregando composição…</div>
-        ) : !composition ? (
-          <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-dark-border bg-dark-input/30 text-sm font-semibold text-zinc-500 dark:text-dark-muted">
-            Nenhuma composição sincronizada para este produto.
-          </div>
-        ) : composition.components.length === 0 ? (
-          <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-dark-border bg-dark-input/30 text-sm font-semibold text-zinc-500 dark:text-dark-muted">
-            Esta composição não possui insumos.
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-xl border border-dark-border">
-            <table className="w-full min-w-[640px] text-left text-sm">
-              <thead className="bg-dark-input/60 text-[10px] font-bold uppercase tracking-widest text-dark-muted">
-                <tr>
-                  <th className="px-4 py-3">Produto / insumo</th>
-                  <th className="px-4 py-3">SKU</th>
-                  <th className="px-4 py-3 text-right">Quantidade por unidade</th>
-                  <th className="px-4 py-3">Unidade</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-dark-border">
-                {composition.components.map(component => (
-                  <tr key={component.id} className="text-dark-text">
-                    <td className="px-4 py-3 font-semibold">
-                      {component.productId ? (
-                        <Link to={`/products/${component.productId}`} className="text-brand-primary hover:underline">
-                          {component.componentName}
-                        </Link>
-                      ) : component.componentName}
-                    </td>
-                    <td className="px-4 py-3 font-mono text-xs text-dark-muted">{component.componentSku || '—'}</td>
-                    <td className="px-4 py-3 text-right font-semibold">{formatNumber(component.quantityPerUnit)}</td>
-                    <td className="px-4 py-3 text-dark-muted">{component.unit || '—'}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </section>
-
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
         <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
           <div>
@@ -592,6 +539,57 @@ const ProductDetails = () => {
         )}
       </div>
 
+      <section className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
+        <div className="mb-5">
+          <h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Composição</h3>
+          {composition && (
+            <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">
+              Para produzir 1 UN de {composition.finishedProductSku || productInfo.id}
+            </p>
+          )}
+        </div>
+        {isCompositionLoading ? (
+          <div className="flex h-24 items-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">Carregando composição…</div>
+        ) : !composition ? (
+          <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-dark-border bg-dark-input/30 text-sm font-semibold text-zinc-500 dark:text-dark-muted">
+            Nenhuma composição sincronizada para este produto.
+          </div>
+        ) : composition.components.length === 0 ? (
+          <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-dark-border bg-dark-input/30 text-sm font-semibold text-zinc-500 dark:text-dark-muted">
+            Esta composição não possui insumos.
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-xl border border-dark-border">
+            <table className="w-full min-w-[640px] text-left text-sm">
+              <thead className="bg-dark-input/60 text-[10px] font-bold uppercase tracking-widest text-dark-muted">
+                <tr>
+                  <th className="px-4 py-3">Produto / insumo</th>
+                  <th className="px-4 py-3">SKU</th>
+                  <th className="px-4 py-3 text-right">Quantidade por unidade</th>
+                  <th className="px-4 py-3">Unidade</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-dark-border">
+                {composition.components.map(component => (
+                  <tr key={component.id} className="text-dark-text">
+                    <td className="px-4 py-3 font-semibold">
+                      {component.productId ? (
+                        <Link to={`/products/${component.productId}`} className="text-brand-primary hover:underline">
+                          {component.componentName}
+                        </Link>
+                      ) : component.componentName}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs text-dark-muted">{component.componentSku || '—'}</td>
+                    <td className="px-4 py-3 text-right font-semibold">{formatNumber(component.quantityPerUnit)}</td>
+                    <td className="px-4 py-3 text-dark-muted">{component.unit || '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
       <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
         <div className="mb-5 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
           <div>