fix: handle empty state for events

frontend/src/components/Activities/Activities.vue

@@ -21,7 +21,7 @@
       <LoadingIndicator class="h-6 w-6" />
       <span>{{ __('Loading...') }}</span>
     </div>
-    <div v-else-if="title == 'Events'" class="activity">
+    <div v-else-if="title == 'Events'" class="h-full activity">
       <EventArea :doctype="doctype" :docname="docname" />
     </div>
     <div
@@ -398,11 +398,6 @@
         :label="__('New Comment')"
         @click="emailBox.showComment = true"
       />
-      <Button
-        v-else-if="title == 'Events'"
-        :label="__('Schedule an Event')"
-        @click="modalRef.showEvent()"
-      />
       <Button
         v-else-if="title == 'Tasks'"
         :label="__('Create Task')"
@@ -473,7 +468,6 @@ import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
-import EventIcon from '@/components/Icons/EventIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
@@ -718,8 +712,6 @@ const emptyText = computed(() => {
     text = 'No Comments'
   } else if (title.value == 'Data') {
     text = 'No Data'
-  } else if (title.value == 'Events') {
-    text = 'No Events'
   } else if (title.value == 'Calls') {
     text = 'No Call Logs'
   } else if (title.value == 'Notes') {
@@ -742,8 +734,6 @@ const emptyTextIcon = computed(() => {
     icon = CommentIcon
   } else if (title.value == 'Data') {
     icon = DetailsIcon
-  } else if (title.value == 'Events') {
-    icon = EventIcon
   } else if (title.value == 'Calls') {
     icon = PhoneIcon
   } else if (title.value == 'Notes') {

frontend/src/components/Activities/EventArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="(event, i) in events" :key="event.name">
+  <div v-if="events.length" v-for="(event, i) in events" :key="event.name">
     <div
       class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
     >
@@ -70,6 +70,14 @@
       </div>
     </div>
   </div>
+  <div
+    v-else
+    class="flex h-full flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-4"
+  >
+    <CalendarIcon class="h-10 w-10" />
+    <span>{{ __('No Events Scheduled') }}</span>
+    <Button :label="__('Schedule an Event')" @click="showEvent()" />
+  </div>
 </template>
 <script setup>
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
@@ -89,7 +97,7 @@ const props = defineProps({
   },
 })
 
-function showEvent(e) {
+function showEvent(e = {}) {
   showEventModal.value = true
   activeEvent.value = e
 }