@Horned oak gall by confirmation, did you mean sort of pop ups where you can confirm or decline?

correct

then it should be on the client end

on the server side, you can't have user interactions/event handlers

"use client"
import { deleteTask } from '@/utils/actions'
import React from 'react'
const DeleteForm = async ({ id }) => {

const handleDelete = (e) => {
e.preventDefault()
let confirm = confirm('Are you sure you want to delete this task?')
if (confirm) {
deleteTask(new FormData(e.target))
}
}

return (
<form onSubmit={handleDelete} >
<input type='hidden' name='id' value={id} />
<button type="submit" className='btn btn-xs btn-error '>Delete</button>
</form >
)
}
export default DeleteForm

Trying this it breaks

it's not correct

create your popup modal and then invoke your server action from your dialog when they click on "agree" button

Thanks

"use client"
import { deleteTask } from '@/utils/actions'
import React from 'react'
const DeleteForm = ({ id }) => {

const handleDelete = async (e) => {
e.preventDefault()
const confirmed = confirm('Are you sure you want to delete this task?')
if (confirmed) {
deleteTask(new FormData(e.target))
} else {
alert('Task not deleted.')
}
}

return (
<form onSubmit={handleDelete} >
<input type='hidden' name='id' value={id} />
<button type="submit" className='btn btn-xs btn-error '>Delete</button>
</form >
)
}
export default DeleteForm

I did this so far