From 3e3f05136c48d9da9c6e9d6e11bd17981528eef0 Mon Sep 17 00:00:00 2001
From: AV77web <villari.andrea@libero.it>
Date: Thu, 28 May 2026 23:55:28 +0200
Subject: [PATCH] correzione pagina movimenti con colonne distanziate

---
 src/app/(management)/movimenti/page.tsx | 169 ++++++++++++++----------
 1 file changed, 99 insertions(+), 70 deletions(-)

diff --git a/src/app/(management)/movimenti/page.tsx b/src/app/(management)/movimenti/page.tsx
index 5fb2b13..4329706 100644
--- a/src/app/(management)/movimenti/page.tsx
+++ b/src/app/(management)/movimenti/page.tsx
@@ -42,7 +42,7 @@ export default function MovimentiPage() {
 
   return (
     <div className="min-h-screen bg-black">
-      <div className="max-w-6xl mx-auto px-4 py-6">
+      <div className="max-w-7xl mx-auto px-4 py-6">
         {/* Header */}
         <div className="mb-6">
           <h1 className="text-2xl font-bold text-white">Movimenti</h1>
@@ -94,81 +94,110 @@ export default function MovimentiPage() {
             <p className="text-zinc-500">I movimenti appariranno qui quando effettuerai carichi o scarichi</p>
           </div>
         ) : (
-          <div className="space-y-2">
-            {movimenti.map((movimento) => (
-              <div
-                key={movimento.id}
-                className={`
-                  flex items-center gap-4 p-4 rounded-lg border bg-zinc-900
-                  ${movimento.tipo_movimento === 1 ? "border-green-500/30" : "border-red-500/30"}
-                `}
-              >
-                {/* Icona tipo */}
-                <div className={`
-                  p-2 rounded-lg flex-shrink-0
-                  ${movimento.tipo_movimento === 1 ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400"}
-                `}>
-                  {movimento.tipo_movimento === 1 ? (
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                    </svg>
-                  ) : (
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
-                    </svg>
-                  )}
-                </div>
+          <div className="rounded-xl border border-zinc-800 overflow-hidden">
+            {/* Header tabella */}
+            <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-zinc-800/50 text-xs font-medium text-zinc-400 uppercase tracking-wider">
+              <div className="col-span-1">Tipo</div>
+              <div className="col-span-3">Articolo</div>
+              <div className="col-span-1 text-center">Carico</div>
+              <div className="col-span-1 text-center">Scarico</div>
+              <div className="col-span-2">Magazzino</div>
+              <div className="col-span-2">Data / Utente</div>
+              <div className="col-span-2">Causale</div>
+            </div>
 
-                {/* Info articolo */}
-                <div className="flex-1 min-w-0">
-                  <p className="font-medium text-white truncate">
-                    {movimento.articolo_descrizione}
-                  </p>
-                  <p className="text-xs text-zinc-500 font-mono">
-                    {movimento.articolo_codice}
-                  </p>
-                </div>
+            {/* Righe */}
+            <div className="divide-y divide-zinc-800">
+              {movimenti.map((movimento) => {
+                const isCarico = movimento.tipo_movimento === 1;
+                
+                return (
+                  <div
+                    key={movimento.id}
+                    className="grid grid-cols-12 gap-4 px-4 py-3 bg-zinc-900 hover:bg-zinc-800/50 transition-colors items-center"
+                  >
+                    {/* Tipo */}
+                    <div className="col-span-1">
+                      <div className={`
+                        inline-flex items-center justify-center w-8 h-8 rounded-lg
+                        ${isCarico ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400"}
+                      `}>
+                        {isCarico ? (
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                          </svg>
+                        ) : (
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+                          </svg>
+                        )}
+                      </div>
+                    </div>
 
-                {/* Quantità */}
-                <div className={`
-                  text-lg font-bold flex-shrink-0
-                  ${movimento.tipo_movimento === 1 ? "text-green-400" : "text-red-400"}
-                `}>
-                  {movimento.tipo_movimento === 1 ? "+" : "-"}{movimento.quantita}
-                </div>
+                    {/* Articolo */}
+                    <div className="col-span-3 min-w-0">
+                      <p className="font-medium text-white truncate text-sm">
+                        {movimento.articolo_descrizione}
+                      </p>
+                      <p className="text-xs text-zinc-500 font-mono">
+                        {movimento.articolo_codice}
+                      </p>
+                    </div>
 
-                {/* Magazzino */}
-                <div className="text-right flex-shrink-0 min-w-[120px]">
-                  <p className="text-xs text-zinc-500">
-                    {movimento.tipo_movimento === 1 ? "Destinazione" : "Origine"}
-                  </p>
-                  <p className="text-sm text-white">
-                    {movimento.tipo_movimento === 1 
-                      ? movimento.magazzino_destinazione 
-                      : movimento.magazzino_origine}
-                  </p>
-                </div>
+                    {/* Quantità Carico */}
+                    <div className="col-span-1 text-center">
+                      {isCarico ? (
+                        <span className="text-lg font-bold text-green-400">
+                          +{movimento.quantita}
+                        </span>
+                      ) : (
+                        <span className="text-zinc-700">-</span>
+                      )}
+                    </div>
 
-                {/* Data e utente */}
-                <div className="text-right flex-shrink-0 min-w-[140px]">
-                  <p className="text-xs text-white">
-                    {formatDate(movimento.data_movimento)}
-                  </p>
-                  <p className="text-xs text-zinc-500">
-                    {movimento.utente}
-                  </p>
-                </div>
+                    {/* Quantità Scarico */}
+                    <div className="col-span-1 text-center">
+                      {!isCarico ? (
+                        <span className="text-lg font-bold text-red-400">
+                          -{movimento.quantita}
+                        </span>
+                      ) : (
+                        <span className="text-zinc-700">-</span>
+                      )}
+                    </div>
 
-                {/* Causale */}
-                {movimento.causale && (
-                  <div className="flex-shrink-0 max-w-[150px]">
-                    <p className="text-xs text-zinc-400 truncate" title={movimento.causale}>
-                      {movimento.causale}
-                    </p>
+                    {/* Magazzino */}
+                    <div className="col-span-2">
+                      <p className="text-xs text-zinc-500 mb-0.5">
+                        {isCarico ? "Destinazione" : "Origine"}
+                      </p>
+                      <p className="text-sm text-white">
+                        {isCarico 
+                          ? movimento.magazzino_destinazione || "-"
+                          : movimento.magazzino_origine || "-"}
+                      </p>
+                    </div>
+
+                    {/* Data / Utente */}
+                    <div className="col-span-2">
+                      <p className="text-sm text-white">
+                        {formatDate(movimento.data_movimento)}
+                      </p>
+                      <p className="text-xs text-zinc-500">
+                        {movimento.utente || "-"}
+                      </p>
+                    </div>
+
+                    {/* Causale */}
+                    <div className="col-span-2">
+                      <p className="text-sm text-zinc-400 truncate" title={movimento.causale || ""}>
+                        {movimento.causale || "-"}
+                      </p>
+                    </div>
                   </div>
-                )}
-              </div>
-            ))}
+                );
+              })}
+            </div>
           </div>
         )}
       </div>