correzione pagina movimenti con colonne distanziate
This commit is contained in:
AV77web
parent
88d6de0453
commit
3e3f05136c
1 changed files with 99 additions and 70 deletions
|
|
@ -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;
|
||||
|
||||
{/* 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>
|
||||
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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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à 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>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue