MCP dashboard: server driven appointments section

app/Http/Controllers/HomeController.php

@@ -1445,6 +1445,73 @@ WHERE measurement.label NOT IN ('SBP', 'DBP')
         return json_encode($appointments);
     }
 
+    public function dashboardAppointmentsDisplay(Request $request, $from, $to) {
+        $performer = $this->performer();
+        $performerProID = $performer->pro->id;
+        $isAdmin = ($performer->pro->pro_type === 'ADMIN');
+
+        // $appointments = Appointment::where("start_time", '>=', $from)->where("start_time", '<=', $to.' 23:59:00+00');
+        $appointments = Appointment::where("raw_date", '=', $from);
+
+        if(!$isAdmin) {
+            $appointments = $appointments->where("pro_id", $performerProID);
+        }
+
+        $appointments = $appointments
+            ->orderBy('start_time', 'asc')
+            ->get();
+
+        foreach ($appointments as $appointment) {
+            $date = explode(" ", $appointment->start_time)[0];
+            $appointment->milliseconds = strtotime($date) . '000';
+            $appointment->newStatus = $appointment->status;
+
+            $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);
+            $appointment->clientSummary = friendly_date_time($appointment->client->dob, false) . ' (' .
+                $appointment->client->age_in_years . ' y.o' .
+                ($appointment->client->sex ? ' ' . $appointment->client->sex : '') .
+                ')';
+            $appointment->clientAge = $appointment->client->age_in_years;
+            $appointment->clientSex = $appointment->client->sex;
+
+            $appointment->started = false;
+            $appointment->inHowManyHours = date_diff(date_create('now'), date_create($appointment->start_time), false)
+                ->format('%R%h h, %i m');
+            if ($appointment->inHowManyHours[0] === '-') {
+                $appointment->inHowManyHours = substr($appointment->inHowManyHours, 1) . ' ago';
+                $appointment->started = true;
+            } else {
+                $appointment->inHowManyHours = 'Appt. in ' . substr($appointment->inHowManyHours, 1);
+            }
+            $appointment->clientUid = $appointment->client->uid;
+            $appointment->proUid = $appointment->pro->uid;
+            $appointment->proName = $appointment->pro->displayName();
+
+            // insurance information
+            $appointment->coverage = $appointment->client->getPrimaryCoverageStatus();
+
+            // bg color
+            $appointment->bgColor = 'bg-white';
+            if($appointment->status === 'COMPLETED') {
+                $appointment->bgColor = 'event-bg-green';
+            }
+            else if($appointment->status === 'CANCELLED') {
+                $appointment->bgColor = 'event-bg-gray';
+            }
+
+            unset($appointment->client);
+            unset($appointment->pro);
+            unset($appointment->detail_json);
+        }
+        return view('app.mcp.dashboard.appointments-list', compact('appointments', 'from', 'to'));
+    }
+
     public function dashboardMeasurements(Request $request, $filter) {
         $measurements = $this->performer()->pro->getMeasurements($filter === 'NEED_ACK');
         return json_encode($measurements);

resources/views/app/dashboard-mcp.blade.php

@@ -19,7 +19,7 @@
     <div id="dashboard-mcp">
     <div class="p-3">
         <div class="">
-            <div class="row mcp-theme-1" id="pro-dashboard-container" v-cloak>
+            <div class="row mcp-theme-1" id="pro-dashboard-container">
                 <div class="col-md-3 mcp-theme-1">
                     <div class="mb-4">
                         <div class="pro-dashboard-inline-calendar"></div>
@@ -284,17 +284,10 @@
                     </div>
                 </div>
                 <div class="col-md-9">
-                    <div class="row mcp-theme-1" id="pro-dashboard-container" v-cloak>
+                    <div class="row mcp-theme-1">
                         <div class="col-md-6 mcp-theme-1">
-                            <div class="card mb-4">
-                                <div class="card-header pl-2">
-                                    <strong>
-                                        Appointments @{{ formatSelectedDate(selectedDate) }}
-                                    </strong>
-                                </div>
-                                <div class="card-body p-0">
-                                    @include('app.mcp.dashboard.appointments')
-                                </div>
+                            <div id="mcp-dashboard-appointments" class="mb-4">
+
                             </div>
                             <div class="card mb-4">
                                 <div class="card-header pl-2">
@@ -350,350 +343,91 @@
 
     <script>
         (function () {
-            function init() {
-                window.apapp = new Vue({
-                    el: '#pro-dashboard-container',
-                    delimiters: ['@{{', '}}'],
-                    data: {
-                        tab: '{{ request()->input('tab') ? request()->input('tab') : 'measurements' }}',
-                        datesWithEvents: [],
-                        selectedDate: '{{ date('Y-m-d') }}',
-                        selectedStatus: 'PENDING',
-                        events: [],
-                        numEventsForDate: 0,
-                        filterStatus: '',
-                        calendarElem: null,
-                        currentMonth: null,
-                        currentYear: null,
-                        measurementFilterStatus: 'ALL',
-                        measurements: {!! $pro->pro_type === 'ADMIN' ? '[]' : json_encode($pro->getMeasurements()) !!},
-                        appointmentsLoaded: false,
-                    },
-                    methods: {
-                        formatDate: function (date) {
-                            let d = new Date(date),
-                                month = '' + (d.getMonth() + 1),
-                                day = '' + d.getDate(),
-                                year = d.getFullYear();
-
-                            if (month.length < 2)
-                                month = '0' + month;
-                            if (day.length < 2)
-                                day = '0' + day;
-
-                            return [year, month, day].join('-');
-                        },
-                        onDateChange: function (_newDate) {
-                            let self = this;
-                            window.setTimeout(() => {
-                                // let dayValue = $('.pro-dashboard-inline-calendar td.day.active').first().text();
-                                // if(dayValue.length === 1) dayValue = '0' + dayValue;
-                                // self.selectedDate = _newDate.substr(0, 8) + dayValue;
-                                self.selectedDate = _newDate;
-                                showMask();
-                                self.loadEvents(self.selectedDate, function () {
-                                    hideMask();
-                                    Vue.nextTick(() => {
-                                        // self.highlightDatesWithEvents(self.datesWithEvents);
-                                        initFastLoad($('.appointments-tab'));
-                                        initFastLoad($('#pro-dashboard-container'));
-                                        $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');
-                                        initMoes();
-                                    });
-                                });
-                            }, 25);
-                        },
-                        selectToday: function () {
-                            $('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
-                            $('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
-                                .addClass('active');
-                            // this.onDateChange('{{ date('Y-m-d') }}');
-                        },
-                        highlightDatesWithEvents: function (_dates) {
-                            $('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
-                            for (let i = 0; i < _dates.length; i++) {
-                                $('.pro-dashboard-inline-calendar table td[data-date="' + _dates[i] + '"]')
-                                    .attr('has-events', 1);
-                            }
-                        },
-                        updateStatus: function (_event) {
-                            $.post('/api/appointment/updateStatus', {
-                                uid: _event.uid,
-                                status: _event.newStatus
-                            }, function (_data) {
-                                if (!_data) {
-                                    toastr.error('Unable to update appointment status!');
-                                } else {
-                                    if (!_data.success) {
-                                        toastr.error(_data.message);
-                                    } else {
-                                        _event.status = _event.newStatus;
-                                        toastr.success('The appointment has been updated');
-                                    }
-                                }
-                            }, 'json')
-                        },
-                        showEditForm: function (_trigger) {
-                            let form = $(_trigger).closest('[moe]').find('form').first();
-                            showMoeFormMask();
-                            form.show();
-                            setTimeout(function () {
-                                initPrimaryForm(form);
-                            }, 0);
-                        },
-                        submitEditForm: function (_trigger) {
-                            let form = $(_trigger).closest('[moe]').find('form').first();
-                            if (!form[0].checkValidity()) {
-                                form[0].reportValidity();
-                                return;
-                            }
-                            $.post(form.attr('url'), form.serialize(), function (_data) {
-                                if (_data && _data.success) {
-                                    fastReload();
-                                } else {
-                                    if (_data.message) {
-                                        toastr.error(_data.message);
-                                    } else {
-                                        toastr.error('Unable to update the appointment');
-                                    }
-                                }
-                            });
-                        },
-                        cancelEditForm: function (_trigger) {
-                            let form = $(_trigger).closest('[moe]').find('form').first();
-                            hideMoeFormMask();
-                            form.hide();
-                        },
-                        loadEventDates: function (_refDate = false) {
-                            let today = new Date(_refDate ? _refDate : '{{date('Y-m-d')}}'),
-                                firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
-                                lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-
-                            this.selectedDate = null;
-                            $('td.day.active').removeClass('active');
-
-                            $.get('/pro-dashboard-event-dates/' +
-                                this.formatDate(firstOfMonth) + '/' +
-                                this.formatDate(lastOfMonth), (_data) => {
-                                this.datesWithEvents = _data;
-                                console.log(this.datesWithEvents);
-                                this.calendarElem.datepicker('refresh');
-                                // this.highlightDatesWithEvents(this.datesWithEvents);
-
-                                this.currentMonth = firstOfMonth.getMonth();
-                                this.currentYear = firstOfMonth.getFullYear();
-
-                                if (!_refDate && $('td.day[data-date="{{$milliseconds}}"]:visible').length) {
-                                    $('td.day[data-date="{{$milliseconds}}"]:visible').first().click();
-                                }
-
-                                this.appointmentsLoaded = true;
-                            }, 'json');
-                        },
-                        loadEvents: function (_date, _callback) {
-                            let self = this;
-                            $.get('/pro-dashboard-events/' + _date + '/' + _date, function (_data) {
-                                self.events = _data;
-                                self.numEventsForDate = (_data && _data.length) ? 1 : 0;
-                                _callback.call(self);
-                            }, 'json');
-                        },
-                        updateMeasurements: function () {
-                            $.get('/pro-dashboard-measurements/' + this.measurementFilterStatus, (_data) => {
-                                this.measurements = _data;
-                                Vue.nextTick(() => {
-                                    // this.initCMRTE();
-                                    $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');
-                                    initMoes();
-                                });
-                            }, 'json');
-                        },
-                        setMeasurementStatus: function (_uid, _status) {
-                            $.post('/api/measurement/updateStatus', {
-                                uid: _uid,
-                                status: _status
-                            }, (_data) => {
-                                this.updateMeasurements();
-                            }, 'json');
-                        },
-                        initCMRTE: function () {
-                            $('#pro-dashboard-container [cm-rte]').each(function () {
-
-                                $(this).wrap(
-                                    $('<div class="border-left border-right rte-holder"/>')
-                                        .attr('data-shortcuts', '')
-                                );
-
-                                // give a unique id to this editor instance
-                                var editorID = Math.ceil(Math.random() * 99999), fieldName = $(this).attr('data-name');
-
-                                var el = this;
-                                var existingContent = $(el).attr('data-content');
-                                var quill = new Quill(el, {
-                                    theme: 'snow',
-                                    modules: stagQuillConfig
-                                });
 
-                                var toolbar = $(quill.container).prev('.ql-toolbar');
-
-                                // add button for new shortcut
-                                var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
-                                    'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
-                                toolbar.append(newSCButton);
+            let datesWithEvents = [],
+                selectedDate = '{{ date('Y-m-d') }}',
+                calendarElem = null,
+                currentMonth = null,
+                currentYear = null,
+                appointmentsLoaded = false;
+
+            function formatDate(date) {
+                let d = new Date(date),
+                    month = '' + (d.getMonth() + 1),
+                    day = '' + d.getDate(),
+                    year = d.getFullYear();
+
+                if (month.length < 2)
+                    month = '0' + month;
+                if (day.length < 2)
+                    day = '0' + day;
+
+                return [year, month, day].join('-');
+            }
 
-                                quill.root.innerHTML = existingContent;
+            function onDateChange(_newDate) {
+                // ajax load appts list as markup directly from server
+                selectedDate = _newDate;
+                $.get('/pro-dashboard-events-display/' + selectedDate + '/' + selectedDate, function (_data) {
+                    let apptscontainer = $('#mcp-dashboard-appointments');
+                    apptscontainer.html(_data);
+                    initFastLoad(apptscontainer);
+                    initMoes();
+                });
+            }
 
-                                $('<input type="hidden" name="' + fieldName + '">').val(existingContent).insertAfter(el);
+            function loadEventDates(_refDate = false) {
+                let today = new Date(_refDate ? _refDate : '{{date('Y-m-d')}}'),
+                    firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
+                    lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+                selectedDate = null;
+                $('td.day.active').removeClass('active');
+                $.get('/pro-dashboard-event-dates/' +
+                    formatDate(firstOfMonth) + '/' +
+                    formatDate(lastOfMonth), (_data) => {
+                    datesWithEvents = _data;
+                    calendarElem.datepicker('refresh');
+                    currentMonth = firstOfMonth.getMonth();
+                    currentYear = firstOfMonth.getFullYear();
+                    if (!_refDate && $('td.day[data-date="{{$milliseconds}}"]:visible').length) {
+                        $('td.day[data-date="{{$milliseconds}}"]:visible').first().click();
+                    }
+                    appointmentsLoaded = true;
+                }, 'json');
+            }
 
-                                quill.on('text-change', function (delta, oldDelta, source) {
-                                    $(el).next('[name="' + fieldName + '"]').val(quill.root.innerHTML);
-                                });
+            function getFormattedCurrentDate() {
+                let date = new Date();
+                let day = date.getDate();
+                day = day < 10 ? '0' + day : day;
+                return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + day;
+            }
 
-                                $(quill.container)
-                                    .find('.ql-editor[contenteditable]')
-                                    .attr('data-field', fieldName)
-                                    .attr('data-editor-id', editorID)
-                                    .attr('with-shortcuts', 1);
+            function init(_target = null) {
 
-                            })
-                        },
-                        initLoadAppointments: function () {
-                            if (this.appointmentsLoaded) return false;
-                            this.loadEventDates();
-                        },
-                        loadMeasurements: function () {
-                            $('#measurements-tab').load('/pro-dashboard-measurements-tab', () => {
-                                initMoes();
-                                initFastLoad($('#measurements-tab'));
-                            });
-                        },
-                        getFormattedCurrentDate: function () {
-                            let date = new Date();
-                            let day = date.getDate();
-                            day = day < 10 ? '0' + day : day;
+                if(_target && _target !== '.stag-content') return;
 
-                            return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + day;
-                        },
-                        formatSelectedDate: function (_date, _format) {
-                            _format = _format || 'MM/DD/YYYY';
-                            if (_date) {
-                                return moment(_date).format(_format);
-                            }
-                        },
-                        formatTimeZone: function (_tz) {
-                            switch (_tz) {
-                                case 'EASTERN':
-                                    return 'EST'
-                                    break;
-                                case 'CENTRAL':
-                                    return 'CST'
-                                    break;
-                                case 'MOUNTAIN':
-                                    return 'MST'
-                                    break;
-                                case 'PACIFIC':
-                                    return 'PST'
-                                    break;
-                                case 'ALASKA':
-                                    return 'Alaska'
-                                    break;
-                                case 'HAWAII':
-                                    return 'Hawaii'
-                                    break;
-                                case 'PUERTO_RICO':
-                                    return 'Puerto Rico'
-                                    break;
-                                default:
-                                    return 'N/A';
-                            }
-                        },
-                        getEventBgColor: function(status){
-                            if(status === 'COMPLETED') return 'event-bg-green';
-                            if(status === 'CANCELLED') return 'event-bg-gray';
-                            return '';
-                        },
+                calendarElem = $('.pro-dashboard-inline-calendar');
+                calendarElem.datepicker({
+                    dateFormat: 'yy-mm-dd',
+                    onSelect: function (_date) {
+                        onDateChange(_date);
                     },
-                    mounted: function () {
-                        let self = this;
-                        this.calendarElem = $('.pro-dashboard-inline-calendar');
-                        this.calendarElem.datepicker({
-                            dateFormat: 'yy-mm-dd',
-                            onSelect: function (_date) {
-                                self.onDateChange(_date);
-                            },
-                            onChangeMonthYear: function (_year, _month) {
-                                let date = _year + '-' + (_month < 10 ? '0' : '') + _month + '-05';
-                                self.loadEventDates(date);
-                            },
-                            beforeShowDay: function (d) {
-                                if (self.datesWithEvents && self.datesWithEvents.indexOf(self.formatDate(d)) !== -1) {
-                                    return [true, 'has-events'];
-                                }
-                                return [true, 'no-events'];
-                            },
-                            defaultDate: 0
-                        });
-                        // this.calendarElem
-                        //     .on('changeDate', function () {
-                        //         self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
-                        //     })
-                        //     .on('changeMonth', function () {
-                        //         window.setTimeout(function() {
-                        //             let ts = $('td.day[data-date]').first().closest('tr').find('td.day[data-date]').last().attr('data-date');
-                        //             if(ts) {
-                        //                 self.loadEventDates(ts);
-                        //             }
-                        //         }, 10);
-                        //     });
-
-
-                        $('#pro-dashboard-container').find('[moe][initialized]').removeAttr('initialized');
-                        initMoes();
-
-                        // init fast load
-                        initFastLoad($('#pro-dashboard-container'));
-
-                        $(document)
-                            .off('click', '.dashboard-measurements.pagination a.page-link')
-                            .on('click', '.dashboard-measurements.pagination a.page-link', function () {
-                                $('#measurements-tab').text('Loading...').load('/pro-dashboard-measurements-tab/' + $(this).attr('data-target-page'), () => {
-                                    initMoes();
-                                    initFastLoad($('#measurements-tab'));
-                                });
-                                return false;
-                            });
-
-                        this.loadMeasurements();
-                        this.initLoadAppointments();
-                        this.onDateChange(this.getFormattedCurrentDate());
-                        this.selectedDate = this.getFormattedCurrentDate();
-                    }
-                });
-                /*// refresh once ticket popup is closed
-                $('body').off('stag-popup-closed')
-                $('body').on('stag-popup-closed', function() {
-                    if($('#pro-dashboard-container').length) {
-                        let activeTab = $('.nav-link.active[data-tab]').attr('data-tab');
-                        if(activeTab) {
-                            fastLoad('/?tab=' + activeTab);
+                    onChangeMonthYear: function (_year, _month) {
+                        let date = _year + '-' + (_month < 10 ? '0' : '') + _month + '-05';
+                        loadEventDates(date);
+                    },
+                    beforeShowDay: function (d) {
+                        if (datesWithEvents && datesWithEvents.indexOf(formatDate(d)) !== -1) {
+                            return [true, 'has-events'];
                         }
-                    }
-                });*/
-                // ticket-popup
-                $(document)
-                    .off('click', '.ticket-popup-trigger')
-                    .on('click', '.ticket-popup-trigger', function () {
-                        showMask();
-                        window.noMc = true;
-                        $.get(this.href, (_data) => {
-                            $('.ticket-popup').html(_data);
-                            showStagPopup('ticket-popup');
-                            $('.ticket-popup .stag-popup.stag-slide').attr('close-all-with-self', 1);
-                            runMCInitializer('patient-tickets'); // run specific mc initer
-                            hideMask();
-                        });
-                        return false;
-                    });
+                        return [true, 'no-events'];
+                    },
+                    defaultDate: 0
+                });
+
+                onDateChange(getFormattedCurrentDate());
+                selectedDate = getFormattedCurrentDate();
 
                 $(document)
                     .off('click', '.ack-client-pro-change')

resources/views/app/mcp/dashboard/appointment-change-status.blade.php

@@ -1,13 +1,13 @@
 <div class="ml-2" moe relative>
     <a href="#" start show><i class="fa fa-edit"></i></a>
     <form url="/api/appointment/updateStatus">
-        <input type="hidden" name="uid" :value="event.uid">
+        <input type="hidden" name="uid" value="{{$appointment->uid}}">
         <p class="text-nowrap mb-2 font-weight-bold text-secondary">Change appointment status</p>
         <select name="status" class="form-control form-control-sm input-sm bg-light mb-2">
-            <option value="PENDING" :selected="event.status === 'PENDING'">PENDING</option>
-            <option value="CONFIRMED" :selected="event.status === 'CONFIRMED'">CONFIRMED</option>
-            <option value="CANCELLED" :selected="event.status === 'CANCELLED'">CANCELLED</option>
-            <option value="COMPLETED" :selected="event.status === 'COMPLETED'">COMPLETED</option>
+            <option value="PENDING" {{$appointment->status === 'PENDING' ? 'selected' : ''}}>PENDING</option>
+            <option value="CONFIRMED" {{$appointment->status === 'CONFIRMED' ? 'selected' : ''}}>CONFIRMED</option>
+            <option value="CANCELLED" {{$appointment->status === 'CANCELLED' ? 'selected' : ''}}>CANCELLED</option>
+            <option value="COMPLETED" {{$appointment->status === 'COMPLETED' ? 'selected' : ''}}>COMPLETED</option>
         </select>
         <div class="mb-0">
             <button class="btn btn-primary btn-sm" submit>Submit</button>

resources/views/app/mcp/dashboard/appointments-list.blade.php

@@ -0,0 +1,80 @@
+@if(@$appointments && count($appointments))
+    <table class="mb-0 table table-sm table-bordered appointments">
+        @foreach($appointments as $appointment)
+            <tr class="{{$appointment->bgColor}}">
+                <td>
+                    <a href="/patients/view/{{$appointment->clientUid}}" class="font-weight-bold d-block mt-1">
+                        {{$appointment->clientName }}
+                    </a>
+                    <div class="mt-1">
+                        {{ $appointment->friendlyStartTime }} - {{ $appointment->friendlyEndTime }}
+                        <span class="text-secondary">{{ friendly_timezone($appointment->timezone) }}</span>
+                    </div>
+                    <a href="'/patients/view/{{$appointment->clientUid}}/calendar/{{$appointment->uid}}"
+                       class="d-block mt-1">
+                        <i class="fa fa-edit"></i>
+                    </a>
+                    @if($appointment->title)
+                        <span class="d-inline-block mt-1 text-secondary text-sm">
+                            {{ $appointment->title }}
+                        </span>
+                    @endif
+                </td>
+                <td>
+                    <div class="d-flex flex-column">
+                        <div class="d-flex align-items-baseline flex-nowrap">
+                            @if($appointment->status === 'PENDING')
+                                <div class="text-warning-mellow font-weight-bold text-nowrap">
+                                    <i class="fa fa-exclamation-triangle"></i>
+                                    Pending
+                                </div>
+                            @elseif($appointment->status === 'CONFIRMED')
+                                <div class="text-success font-weight-bold text-nowrap">
+                                    <i class="fa fa-check"></i>
+                                    Confirmed
+                                </div>
+                            @elseif($appointment->status === 'CANCELLED')
+                                <div class="text-danger font-weight-bold text-nowrap">
+                                    <i class="fa fa-stop"></i>
+                                    Cancelled
+                                </div>
+                            @elseif($appointment->status === 'COMPLETED')
+                                <div class="text-success font-weight-bold text-nowrap">
+                                    <i class="far fa-calendar-check"></i>
+                                    Completed
+                                </div>
+                            @endif
+                            @include('app.mcp.dashboard.appointment-change-status', compact('appointment'))
+                        </div>
+                        @if($from === date('Y-m-d'))
+                            <div class="{{$appointment->started ? 'text-danger': 'text-secondary'}}">
+                                {{ $appointment->inHowManyHours }}
+                            </div>
+                        @endif
+                    </div>
+                </td>
+                <td>
+                    <div>
+                        @if($appointment->coverage === 'YES')
+                            <b class="text-success">Covered</b>
+                        @elseif($appointment->coverage === 'NO')
+                            <b class="text-danger">Not Covered</b>
+                        @else
+                            <b v-else class="text-warning-mellow">Pending</b>
+                        @endif
+                    </div>
+                </td>
+            </tr>
+        @endforeach
+    </table>
+@else
+    @if(@$from)
+        <div class="bg-light p-3 text-secondary border bounded">
+            <span>You have no appointments on <b>{{ $from }}</b></span>
+        </div>
+    @else
+        <div class="bg-light p-3 text-secondary border bounded">
+            Please select a date from the calendar on the left
+        </div>
+    @endif
+@endif

routes/web.php

@@ -410,6 +410,7 @@ Route::middleware('pro.auth')->group(function () {
     // pro dashboard events (ajax)
     Route::get('pro-dashboard-event-dates/{from}/{to}', 'HomeController@dashboardAppointmentDates')->name('pro-dashboard-event-dates');
     Route::get('pro-dashboard-events/{from}/{to}', 'HomeController@dashboardAppointments')->name('pro-dashboard-events');
+    Route::get('pro-dashboard-events-display/{from}/{to}', 'HomeController@dashboardAppointmentsDisplay')->name('pro-dashboard-events');
 
     // pro dashboard measurements
     Route::get('pro-dashboard-measurements/{filter}', 'HomeController@dashboardMeasurements')->name('pro-dashboard-measurements');