1- import { ArrowDownCircle , ArrowUpCircle } from 'lucide-react' ;
1+ import { ArrowDownCircle , ArrowUpCircle , Users , Package , ClipboardList } from 'lucide-react' ;
22
3- // const movimientos = [
4- // {
5- // tipo: 'Entrada',
6- // producto: 'Botón Z6',
7- // cantidad: 500,
8- // fecha: '2025-08-02',
9- // icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
10- // },
11- // {
12- // tipo: 'Salida',
13- // producto: 'Botón R4',
14- // cantidad: 300,
15- // fecha: '2025-08-02',
16- // icono: <ArrowUpCircle className="text-red-600 w-5 h-5" />,
17- // },
18- // {
19- // tipo: 'Entrada',
20- // producto: 'Botón L2',
21- // cantidad: 200,
22- // fecha: '2025-08-01',
23- // icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
24- // },
25- // {
26- // tipo: 'Salida',
27- // producto: 'Botón M1',
28- // cantidad: 100,
29- // fecha: '2025-07-31',
30- // icono: <ArrowUpCircle className="text-red-600 w-5 h-5" />,
31- // },
32- // {
33- // tipo: 'Entrada',
34- // producto: 'Botón Z1',
35- // cantidad: 200,
36- // fecha: '2025-08-01',
37- // icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
38- // },
39- // {
40- // tipo: 'Entrada',
41- // producto: 'Botón Z1',
42- // cantidad: 1000,
43- // fecha: '2025-08-02',
44- // icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
45- // },
46- // // Puedes duplicar más para probar el scroll
47- // ];
48-
49- export default function MovimientosRecientesBL ( { movimientos} ) {
50- console . log ( 'movimientos' , movimientos ) ;
3+ export default function MovimientosRecientesBL ( { movimientos } ) {
514 return (
525 < div className = "relative flex flex-col h-full p-5" >
536 { /* Header */ }
@@ -58,12 +11,41 @@ export default function MovimientosRecientesBL({movimientos}) {
5811 { /* Lista scrollable */ }
5912 < div className = "flex-1 overflow-y-auto pr-1" >
6013 < ul className = "space-y-4 text-sm text-gray-800 dark:text-gray-300" >
61- { Object . values ( movimientos ) . map ( ( mov , i ) => {
14+ { movimientos . map ( ( mov , i ) => {
15+ // Icono según tipo de movimiento
6216 let icono ;
63- if ( mov . tipo === "entrada" ) {
64- icono = < ArrowUpCircle className = "text-green-600 w-5 h-5" /> ;
17+ switch ( mov . tipo ) {
18+ case "entrada" :
19+ icono = < ArrowDownCircle className = "text-green-600 w-5 h-5" /> ;
20+ break ;
21+ case "salida" :
22+ icono = < ArrowUpCircle className = "text-red-600 w-5 h-5" /> ;
23+ break ;
24+ case "pedido" :
25+ icono = < ClipboardList className = "text-blue-600 w-5 h-5" /> ;
26+ break ;
27+ case "marcacion" :
28+ icono = < Package className = "text-yellow-600 w-5 h-5" /> ;
29+ break ;
30+ case "cliente" :
31+ icono = < Users className = "text-purple-600 w-5 h-5" /> ;
32+ break ;
33+ default :
34+ icono = < Package className = "text-gray-400 w-5 h-5" /> ;
35+ }
36+
37+ // Nombre dinámico según tipo de movible
38+ let nombre ;
39+ if ( mov . empaque ?. producto ?. descripcion ) {
40+ nombre = mov . empaque . producto . descripcion ;
41+ } else if ( mov . movible ?. nombre ) {
42+ nombre = mov . movible . nombre ;
43+ } else if ( mov . movible ?. descripcion ) {
44+ nombre = mov . movible . descripcion ;
45+ } else if ( mov ?. motivo ) {
46+ nombre = mov . motivo ;
6547 } else {
66- icono = < ArrowDownCircle className = "text-red-600 w-5 h-5" /> ;
48+ nombre = "Sin información" ;
6749 }
6850
6951 return (
@@ -74,19 +56,17 @@ export default function MovimientosRecientesBL({movimientos}) {
7456 </ div >
7557 < div >
7658 < p className = "font-medium" >
77- { mov . tipo } : { mov ?. empaque ?. producto ?. descripcion }
59+ { mov . tipo . toUpperCase ( ) } : { nombre }
7860 </ p >
7961 < p className = "text-xs text-gray-500 dark:text-gray-400" >
80- Fecha: { mov . created_at . slice ( 0 , 10 ) }
62+ Fecha: { new Date ( mov . created_at ) . toLocaleDateString ( ) }
8163 </ p >
8264 </ div >
8365 </ div >
84- < div className = "text-xs text-gray-500 dark:text-gray-400" > { mov . fecha } </ div >
8566 </ li >
8667 ) ;
8768 } ) }
8869 </ ul >
89-
9070 </ div >
9171 </ div >
9272 ) ;
0 commit comments