Better dashboard widget for appointment

src/containers/PatientDetails/PatientOverviewDynamic/components/StandardCard/prepare.tsx

@@ -266,19 +266,7 @@ export function prepareAppointments(bundle: Bundle<WithId<Appointment | Encounte
 }
 
 export function prepareAppointmentDetails(appointment: Appointment) {
-    const [name, specialty] =
-        appointment.participant
-            .find((p) => fromFHIRReference(p.actor)?.resourceType === 'PractitionerRole')
-            ?.actor?.display?.split(' - ') || [];
     const appointmentDetails = [
-        {
-            title: t`Practitioner`,
-            value: name || '-',
-        },
-        {
-            title: t`Service`,
-            value: specialty || '-',
-        },
         {
             title: t`Date`,
             value: appointment.start ? formatHumanDate(appointment.start) : '-',
@@ -292,7 +280,13 @@ export function prepareAppointmentDetails(appointment: Appointment) {
         },
     ];
 
-    return appointmentDetails;
+    //TODO agree on terminology for Appointment.particioant.type and use it
+    const participants = appointment.participant.filter(p => p.type?.[0]?.coding?.[0]?.code !== 'patient').map(participant => ({
+        title: participant.type?.[0]?.text,
+        value: participant.actor?.display,
+    }))
+
+    return [...appointmentDetails, ...participants]
 }
 
 export function prepareServiceRequest(