{incomes && incomes.length > 0 ?
<div className='border bg-white shadow-lg p-3 mt-4 mb-4'>
<SectionHeader label={'Efectivos'} />
<div id='header' className='grid grid-cols-12 items-center justify-around font-semibold mt-4'>
<p className='col-span-3 text-center'>Sucursal</p>
<p className='col-span-2 text-center'>Encargado</p>
<p className='col-span-3 text-center'>Tipo</p>
<p className='col-span-1 text-center'>Monto</p>
</div>
{incomes.map((income, index) => (
<div key={income._id} className='grid grid-cols-12 items-center border border-black border-opacity-30 mt-2 shadow-m rounded-lg'>
<div id='list-element' className=' flex col-span-10 items-center justify-around pt-3 pb-3'>
<p className='text-center text-xs w-3/12'>{income.branch.branch ? income.branch.branch : income.branch}</p>
<p className='text-center text-xs w-3/12'>{income.employee.name + ' ' + income.employee.lastName}</p>
<p className='text-center text-xs w-2/12'>{income.type.name ? income.type.name : income.type}</p>
<p className='text-center text-xs w-3/12'>{income.amount.toLocaleString("es-MX", { style: 'currency', currency: 'MXN' })}</p>
</div>
{currentUser._id == income.employee._id ?
<div>
<button id={income._id} onClick={() => { setIsOpen(isOpen ? false : true) }} disabled={loading} className=' col-span-2 bg-slate-100 border shadow-lg rounded-lg text-center h-10 w-10 m-3'>
<span>
<FaTrash className='text-red-700 m-auto' />
</span>
</button>
{isOpen ?
<div className='fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex justify-center items-center'>
<div className='bg-white p-5 rounded-lg flex flex-col justify-center items-center gap-5'>
<div>
<p className='text-3xl font-semibold'>¿Estás seguro de borrar este registro?</p>
</div>
<div className='flex gap-10'>
<div>
<button className='rounded-lg bg-red-500 text-white shadow-lg w-20 h-10' onClick={() => { deleteIncome(income._id, index), setIsOpen(isOpen ? false : true) }}>Si</button>
</div>
<div>
<button className='rounded-lg border shadow-lg w-20 h-10' onClick={() => { setIsOpen(isOpen ? false : true) }}>No</button>
</div>
</div>
</div>
</div>
: ''}
</div>
: ''}
</div>
))}
<div className='flex mt-4 border-opacity-30 shadow-lg border-black border rounded-lg p-3'>
<p className='w-6/12 text-center'>Total:</p>
<p className='w-6/12 text-center'>{incomesTotal.toLocaleString("es-MX", { style: 'currency', currency: 'MXN' })}</p>
</div>
</div>
: ''}
Esta es la función que uso para no tener que volver a consultar la lista después de eliminar un registro. El deleteIncomeFetch funciona bien, el problema está desde que el console.log me muestra los datos del último registro y no de el del botón que estoy clickeando
const deleteIncome = async (incomeId, index) => {
setLoading(true)
console.log(index, incomeId)//lastItemIndex, lastItemId
const { error } = await deleteIncomeFetch(incomeId)
setLoading(false)
if (error == null) {
setIncomesTotal(incomesTotal - parseFloat(incomes[index].amount))
incomes.splice(index, 1)
}
}
Aquí pulsé el botón del elemento que tiene el monto de 1000, pero elimina el último
Todo lo lista bien, pero cuando selecciono cualquier botón elimina el último registro (Supongo que lo toma como si estuviera clickeando siempre al botón que se genera al final). Estuve buscando y cambiando cosas pero simplemente no cambia. Incluso si le hago console log al indice y al id que se pasa a la función deleteIncome me muestran los del último registro y es el que resulta eliminado. Espero encontrar la solución e igual cualquier ayuda o retroalimentación al código se apreciará bastante