Correcciones para mostrar los datos de los contactos

    <script>

        const contactos = @json($contactos);

        const data = contactos.map(user => [user.username, user.name, user.roles[0].name, user.dependencia.nombre, renderIsActive(user.active), renderActions(user.id, user.name)]);

        console.log(contactos);

        const data = contactos.map(contacto => {

            let nombreCompleto;

            if (contacto.profesion?.abreviatura) {

                nombreCompleto = contacto.profesion.abreviatura + ' ' + contacto.nombre;

            } else {

                nombreCompleto = contacto.nombre;

            }

            return [nombreCompleto, renderParameter(contacto.ap_paterno), renderParameter(contacto.ap_materno), renderParameter(contacto.cargo?.nombre), renderActions(contacto.id)];

        });

        function renderActions(id, nombre) {

        function renderActions(id) {

            return `

                <div class="flex space-x-2">

                    <form action="{{ route('usuarios.destroy', '') }}/${id}" method="POST" class="inline-block">

                    <form action="{{ route('contacto.destroy', '') }}/${id}" method="POST" class="inline-block">

                        @csrf

                        @method('DELETE')

                        <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>

                    </form>

                    <a href="/administracion/usuarios/${id}/editar" class="btn btn-primary btn-sm">Editar</a>

                    <a href="/contacto/${id}/editar" class="btn btn-primary btn-sm">Editar</a>

                </div>`;

        }

        function renderIsActive(bool) {

            if(bool === 0){

                return `<span class="badge whitespace-nowrap bg-danger">No</span>`;

        function renderParameter(parametro) {

            if(parametro === null || parametro === undefined){

                return `Sin información`;

            }else{

                return `<span class="badge whitespace-nowrap bg-success">Si</span>`;

               return parametro;

            }

        }

        document.addEventListener('DOMContentLoaded', () => {

            const datatable = new simpleDatatables.DataTable('#myTable', {

                data: {

                    headings: ['Usuario', 'Nombre', 'Tipo', 'Dependencia', 'Activo', 'Acciones'],

                    headings: ['Nombre', 'Apellido paterno', 'Apellido materno', 'Cargo', 'Acciones'],

                    data: data

                },

                perPage: 10,