synchronisation du dashboard infirmière et dashboard médecin

Bonjour, je travaille sur un projet d'hôpital où il y a 2 utilisateurs (infirmière et médecin qui ont le même tableau de bord des chambres), l'infirmière puisse ajouter un nouveau patient, puis une carte apparaît dans la salle d'attente, la carte peut être déplacée vers différentes zones je souhaite synchroniser cela avec les deux comptes par exemple si l'infirmière déplace la carte de la salle d'attente à la salle de traitement le médecin avec son compte peut voir le mouvement que l'infirmière a fait donc la carte sera sur la salle de traitement puis-je avoir une idée de comment procéder ?

mon controller:

public function storePatient(Request $request)
{
$validatedData = $request->validate([
'nom' => 'required|string|max:255',
'nomJeuneFille' => 'nullable|string|max:255',
'lieuNaissance' => 'required|string|max:255',
'telephone' => 'required|string|max:255',
'email' => 'nullable|email|max:255',
'prenom' => 'required|string|max:255',
'dateNaissance' => 'required|date',
'adresse' => 'required|string|max:255',
'numeroAssurance' => 'required|string|max:255',
'sexe' => 'required',
]);

Patient::create($validatedData);

return view('Salles.index')->with('success', 'Patient ajouté avec succès.');
}

public function indexPatient() {
$patients = Patient::all();
foreach ($patients as $patient) {
$patient->icone = ($patient->sexe === 'femme') ? 'femelle.png' : 'male.png';
}
return view('Salles.index', ['patients' => $patients]);
}

mon blade

<div class="cote_gauche">
<div class="salle_iao zone">
<p class="titre">Salle IAO</p>
</div>
<div class="zone_attente">
<p class="titre">Zone d'attente</p>
<div class="attente_assise zone">
<p class="titre_secondaire">Attente assise</p>
@foreach($patients as $patient)
<div class="carte-patient" id="drag1" ondragstart="drag(event)" draggable="true">
<p>{{ $patient->nom }} {{ $patient->prenom }}</p>
<img src="{{ asset('images/' . $patient->icone) }}" alt="Icone">
</div>
@endforeach
</div>
<div class="attente_couchee zone">
<p class="titre_secondaire">Attente couchée</p>
</div>
</div>
</div>
<div class="cote_droit">
<div class="zone_soins">
<p class="titre">Zone de soins</p>
<div class="salles_soins">
<div class="soin1 zone">
<p class="titre_secondaire">Salle de soin 1</p>
</div>
<div class="soin2 zone">
<p class="titre_secondaire">Salle de soin 2</p>
</div>
<div class="dechocage zone">
<p class="titre_secondaire">Salle de déchocage</p>
</div>
<div class="platre zone">
<p class="titre_secondaire">Salle de platre</p>
</div>
</div>
</div>

les fonctions js pour bouger les cartes de zones en zones

document.addEventListener("DOMContentLoaded", function() {
const cartes = document.querySelectorAll('.carte-patient');

const zones = document.querySelectorAll('.zone');

cartes.forEach(carte => {
carte.addEventListener('dragstart', dragStart);
carte.addEventListener('dragend', dragEnd);
});

zones.forEach(zone => {
zone.addEventListener('dragover', dragOver);
zone.addEventListener('dragenter', dragEnter);
zone.addEventListener('dragleave', dragLeave);
zone.addEventListener('drop', drop);
});

function dragStart() {
this.classList.add('en-glissement');
}

function dragEnd() {
this.classList.remove('en-glissement');
}

function dragOver(e) {
e.preventDefault();
}

function dragEnter(e) {
e.preventDefault();
this.classList.add('zone-survol');
}

function dragLeave() {
this.classList.remove('zone-survol');
}

function drop() {
this.classList.remove('zone-survol');
const carte = document.querySelector('.en-glissement');
this.appendChild(carte);
}
});