Differentiate training appts

app/Http/Controllers/HomeController.php

@@ -509,6 +509,7 @@ WHERE measurement.label NOT IN ('SBP', 'DBP')
             $appointment->dateYMD = date('Y-m-d', strtotime($appointment->raw_date));
             $appointment->clientName = $appointment->client->displayName();
             $appointment->clientInitials = substr($appointment->client->name_first, 0, 1) . substr($appointment->client->name_last, 0, 1);
+            $appointment->isClientShadowOfPro = $appointment->client->shadow_pro_id ? true : false;
             $appointment->proInitials = substr($appointment->pro->name_first, 0, 1) . substr($appointment->pro->name_last, 0, 1);
             $appointment->friendlyStartTime = friendly_time($appointment->raw_start_time);
             $appointment->friendlyEndTime = friendly_time($appointment->raw_end_time);

public/css/style.css

@@ -589,11 +589,12 @@ a.ui-button:active,
 .patient-avatar {
     width: 50px;
     height: 50px;
-    background: #ddd;
+    background: #eee;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 100%;
+    border: 1px solid #ccc;
 }
 .large {
     font-size: 16px !important;
@@ -1676,4 +1677,35 @@ form.non-interactive .form-content {
 form.non-interactive .form-content * {
     pointer-events: none;
 }
-#eventPros { max-height: 28px; opacity: 0;}
+#eventPros {
+    max-height: 28px;
+    opacity: 0;
+}
+.training-event {
+    position: relative;
+    background: #f0feff;
+    border-color: #32a2b89e !important;
+}
+.training-event::after {
+    position: absolute;
+    content: 'Training';
+    font-size: 10px;
+    font-weight: normal;
+    color: #17a2b8;
+    left: 1px;
+    bottom: -13px;
+    transform-origin: left top;
+    transform: rotate(
+      -90deg
+    );
+    width: 90px;
+    text-align: center;
+    letter-spacing: 0.75px;
+}
+.training-event .training-icon {
+    font-size: 22px;
+    color: #0d59af;
+}
+.training-event .patient-avatar {
+    border-color: #0d59af7d !important;
+}

resources/views/app/dashboard.blade.php

@@ -209,8 +209,11 @@
                                 </div>
                             </div>
                             <div v-for="event in events" class="align-items-end p-3 border rounded mb-3"
-                                 :class="event.dateYMD === selectedDate && (filterStatus === '' || filterStatus === event.status) ? 'd-flex' : 'd-none'">
-                                <div class="patient-avatar mr-3 align-self-center">@{{ event.proInitials }}</div>
+                                 :class="(event.dateYMD === selectedDate && (filterStatus === '' || filterStatus === event.status) ? 'd-flex' : 'd-none') + ' ' + (event.isClientShadowOfPro ? 'training-event' : '')">
+                                <div class="patient-avatar mr-3 align-self-center">
+                                    <i v-if="event.isClientShadowOfPro" class="fa fa-graduation-cap training-icon" :title="event.proInitials"></i>
+                                    <span v-else class="">@{{ event.proInitials }}</span>
+                                </div>
                                 <div>
                                     <div class="pb-1">
                                         <b class="text-info">@{{ event.proName }}</b>