andrea/magricambi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

correzione pagina movimenti con colonne distanziate
All checks were successful
Deploy to VPS / build (push) Successful in 37s
Details
Deploy to VPS / deploy (push) Successful in 27s
Details

Browse source
This commit is contained in:
AV77web 2026-05-28 23:55:28 +02:00
parent 88d6de0453
commit 3e3f05136c
1 changed files with 99 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/app/(management)/movimenti/page.tsx
View file

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