From 6c30596dd1a878dcbd8c88481dc66878725282c0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 3 Sep 2025 16:27:04 +0530
Subject: [PATCH] fix: handle empty state for events

---
 frontend/src/components/Activities/Activities.vue | 12 +-----------
 frontend/src/components/Activities/EventArea.vue  | 12 ++++++++++--
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index c06cf7d8..94c8a768 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/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') {
diff --git a/frontend/src/components/Activities/EventArea.vue b/frontend/src/components/Activities/EventArea.vue
index ca3ee152..587c8b43 100644
--- a/frontend/src/components/Activities/EventArea.vue
+++ b/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
 }