Move fabric plan form to right side

src/pages/Supplies.tsx

@@ -1589,8 +1589,66 @@ const FabricPlanningScreen = () => {
           {errorMessage}
         </div>
       )}
-      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[420px_1fr] xl:items-start">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        <form onSubmit={handleSubmit} className={`${panelClassName} p-5 xl:sticky xl:top-6`}>
+        <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Planos ativos</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{plans.length}</p>
+        </div>
+        <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Kg planejado</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(totalKg)} kg</p>
+        </div>
+        <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Críticos</p>
+          <p className="mt-2 text-3xl font-bold text-dark-text">{plans.filter(plan => plan.priority === 'Crítico').length}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px] xl:items-start">
+        <div className={`${panelClassName} overflow-hidden`}>
+          <div className="border-b border-dark-border p-5">
+            <h2 className="text-base font-bold text-dark-text">Planos de malha</h2>
+            <p className="mt-1 text-sm font-semibold text-dark-muted">Itens planejados para compra ou recebimento.</p>
+          </div>
+          {isLoading ? (
+            <div className={`${emptyStateClassName} min-h-[220px]`}>
+              <Ruler className="h-8 w-8 text-brand-primary" />
+              <h3 className="text-base font-bold text-dark-text">Carregando planos...</h3>
+            </div>
+          ) : plans.length ? (
+            <div className="divide-y divide-dark-border">
+              {plans.map(plan => (
+                <div key={plan.id} className="grid grid-cols-1 gap-3 p-4 md:grid-cols-[1.4fr_1fr_100px_100px_44px] md:items-center">
+                  <div>
+                    <p className="font-bold text-dark-text">{plan.material}</p>
+                    <p className="text-xs font-semibold text-dark-muted">{plan.color}</p>
+                  </div>
+                  <p className="text-sm font-semibold text-dark-muted">{plan.supplier}</p>
+                  <p className="text-sm font-bold text-dark-text">{formatNumber(plan.quantityKg)} kg</p>
+                  <span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text">{plan.priority}</span>
+                  <button
+                    type="button"
+                    title="Remover plano"
+                    aria-label={`Remover plano ${plan.material}`}
+                    disabled={isBusy}
+                    onClick={() => removePlan(plan.id)}
+                    className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className={emptyStateClassName}>
+              <Ruler className="h-8 w-8 text-brand-primary" />
+              <h3 className="text-base font-bold text-dark-text">Nenhum plano de malha cadastrado</h3>
+              <p className="text-sm font-semibold text-dark-muted">Cadastre o primeiro plano no formulário ao lado.</p>
+            </div>
+          )}
+        </div>
+
+        <form onSubmit={handleSubmit} className={`${panelClassName} p-5`}>
           <h2 className="text-base font-bold text-dark-text">Novo plano de malha</h2>
           <div className="mt-4 grid grid-cols-1 gap-3">
             <label className="text-xs font-bold text-dark-muted">
@@ -1625,66 +1683,6 @@ const FabricPlanningScreen = () => {
             </button>
           </div>
         </form>
-
-        <div className="space-y-6">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
-              <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Planos ativos</p>
-              <p className="mt-2 text-3xl font-bold text-dark-text">{plans.length}</p>
-            </div>
-            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
-              <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Kg planejado</p>
-              <p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(totalKg)} kg</p>
-            </div>
-            <div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
-              <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Críticos</p>
-              <p className="mt-2 text-3xl font-bold text-dark-text">{plans.filter(plan => plan.priority === 'Crítico').length}</p>
-            </div>
-          </div>
-
-          <div className={`${panelClassName} overflow-hidden`}>
-            <div className="border-b border-dark-border p-5">
-              <h2 className="text-base font-bold text-dark-text">Planos de malha</h2>
-              <p className="mt-1 text-sm font-semibold text-dark-muted">Itens planejados para compra ou recebimento.</p>
-            </div>
-            {isLoading ? (
-              <div className={`${emptyStateClassName} min-h-[220px]`}>
-                <Ruler className="h-8 w-8 text-brand-primary" />
-                <h3 className="text-base font-bold text-dark-text">Carregando planos...</h3>
-              </div>
-            ) : plans.length ? (
-              <div className="divide-y divide-dark-border">
-                {plans.map(plan => (
-                  <div key={plan.id} className="grid grid-cols-1 gap-3 p-4 md:grid-cols-[1.4fr_1fr_100px_100px_44px] md:items-center">
-                    <div>
-                      <p className="font-bold text-dark-text">{plan.material}</p>
-                      <p className="text-xs font-semibold text-dark-muted">{plan.color}</p>
-                    </div>
-                    <p className="text-sm font-semibold text-dark-muted">{plan.supplier}</p>
-                    <p className="text-sm font-bold text-dark-text">{formatNumber(plan.quantityKg)} kg</p>
-                    <span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text">{plan.priority}</span>
-                    <button
-                      type="button"
-                      title="Remover plano"
-                      aria-label={`Remover plano ${plan.material}`}
-                      disabled={isBusy}
-                      onClick={() => removePlan(plan.id)}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className={emptyStateClassName}>
-                <Ruler className="h-8 w-8 text-brand-primary" />
-                <h3 className="text-base font-bold text-dark-text">Nenhum plano de malha cadastrado</h3>
-                <p className="text-sm font-semibold text-dark-muted">Cadastre o primeiro plano no formulário ao lado.</p>
-              </div>
-            )}
-          </div>
-        </div>
       </div>
     </div>
   );