From 39c8ba1288af712061c3dc0352d2969857325380 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 24 Dec 2023 12:17:28 +0530
Subject: [PATCH 1/3] fix: added empty state in all list views

---
 frontend/src/pages/CallLogs.vue      | 16 ++++++++++++++--
 frontend/src/pages/Contacts.vue      | 14 +++++++++++++-
 frontend/src/pages/Deals.vue         | 14 +++++++++++++-
 frontend/src/pages/Leads.vue         | 18 +++++++++++++++++-
 frontend/src/pages/Notes.vue         | 16 +++++++++-------
 frontend/src/pages/Organizations.vue | 14 +++++++++++++-
 6 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index ee430ce0..9f63ebe0 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -14,13 +14,25 @@
     </div>
   </div>
   <CallLogsListView
-    v-if="callLogs.data"
+    v-if="callLogs.data && rows.length"
     :rows="rows"
     :columns="callLogs.data.columns"
   />
+  <div v-else-if="callLogs.data" class="flex h-full items-center justify-center">
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <PhoneIcon class="h-10 w-10" />
+      <span>No Logs Found</span>
+      <Button label="Create" @click="showNewDialog = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
@@ -37,7 +49,7 @@ import { contactsStore } from '@/stores/contacts'
 import { useOrderBy } from '@/composables/orderby'
 import { useFilter } from '@/composables/filter'
 import { useDebounceFn } from '@vueuse/core'
-import { createResource, Breadcrumbs } from 'frappe-ui'
+import { createResource, Breadcrumbs, FeatherIcon } from 'frappe-ui'
 import { computed, watch } from 'vue'
 
 const { getUser } = usersStore()
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index fca3ae82..5612c5a4 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -34,14 +34,26 @@
     </div>
   </div>
   <ContactsListView
-    v-if="contacts.data"
+    v-if="contacts.data && rows.length"
     :rows="rows"
     :columns="contacts.data.columns"
   />
+  <div v-else-if="contacts.data" class="flex h-full items-center justify-center">
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <ContactsIcon class="h-10 w-10" />
+      <span>No Contacts Found</span>
+      <Button label="Create" @click="showNewDialog = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
   <ContactModal v-model="showContactModal" :contact="{}" />
 </template>
 
 <script setup>
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 6dcacade..1fb7573d 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -33,7 +33,18 @@
       <ViewSettings doctype="CRM Deal" v-model="deals" />
     </div>
   </div>
-  <DealsListView v-if="deals.data" :rows="rows" :columns="deals.data.columns" />
+  <DealsListView v-if="deals.data && rows.length" :rows="rows" :columns="deals.data.columns" />
+  <div v-else-if="deals.data" class="flex h-full items-center justify-center">
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <DealsIcon class="h-10 w-10" />
+      <span>No Deals Found</span>
+      <Button label="Create" @click="showNewDialog = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
   <Dialog
     v-model="showNewDialog"
     :options="{
@@ -54,6 +65,7 @@
 </template>
 
 <script setup>
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import NewDeal from '@/components/NewDeal.vue'
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 4c9adc10..b69ac198 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -32,7 +32,22 @@
       <ViewSettings doctype="CRM Lead" v-model="leads" />
     </div>
   </div>
-  <LeadsListView v-if="leads.data" :rows="rows" :columns="leads.data.columns" />
+  <LeadsListView
+    v-if="leads.data && rows.length"
+    :rows="rows"
+    :columns="leads.data.columns"
+  />
+  <div v-else-if="leads.data" class="flex h-full items-center justify-center">
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <LeadsIcon class="h-10 w-10" />
+      <span>No Leads Found</span>
+      <Button label="Create" @click="showNewDialog = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
   <Dialog
     v-model="showNewDialog"
     :options="{
@@ -53,6 +68,7 @@
 </template>
 
 <script setup>
+import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 import NewLead from '@/components/NewLead.vue'
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index dcef44aa..13875597 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -61,13 +61,15 @@
       </div>
     </div>
   </div>
-  <div
-    v-else
-    class="flex flex-1 items-center justify-center p-5 text-xl font-medium text-gray-500"
-  >
-    <div class="flex flex-col items-center gap-2">
-      <NoteIcon class="h-10 w-10 text-gray-500" />
-      <span>No notes</span>
+  <div v-else class="flex h-full items-center justify-center">
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <NoteIcon class="h-10 w-10" />
+      <span>No Notes Found</span>
+      <Button label="Create" @click="createNote">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
     </div>
   </div>
   <NoteModal
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 49433a06..9e57fa2c 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -38,13 +38,25 @@
     </div>
   </div>
   <OrganizationsListView
-    v-if="organizations.data"
+    v-if="organizations.data && rows.length"
     :rows="rows"
     :columns="organizations.data.columns"
   />
+  <div v-else-if="organizations.data" class="flex h-full items-center justify-center">
+    <div
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <OrganizationsIcon class="h-10 w-10" />
+      <span>No Organizations Found</span>
+      <Button label="Create" @click="showNewDialog = true">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </div>
+  </div>
   <OrganizationModal v-model="showOrganizationModal" :organization="{}" />
 </template>
 <script setup>
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'

From 90289dac6b7995a7b39aae2ff12bcd6dfe91a49e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 24 Dec 2023 12:18:06 +0530
Subject: [PATCH 2/3] fix: made empty states action button subtle

---
 frontend/src/components/Activities.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 1fd23977..9e77249a 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -568,25 +568,21 @@
     <span>{{ emptyText }}</span>
     <Button
       v-if="title == 'Calls'"
-      variant="solid"
       label="Make a Call"
       @click="makeCall(doc.data.mobile_no)"
     />
     <Button
       v-else-if="title == 'Notes'"
-      variant="solid"
       label="Create Note"
       @click="showNote()"
     />
     <Button
       v-else-if="title == 'Emails'"
-      variant="solid"
       label="Send Email"
       @click="$refs.emailBox.show = true"
     />
     <Button
       v-else-if="title == 'Tasks'"
-      variant="solid"
       label="Create Task"
       @click="showTask()"
     />

From dcb9941dda42485c853f560b30af2c45fb7ff8c3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 24 Dec 2023 12:21:09 +0530
Subject: [PATCH 3/3] fix: fixed empty state of contact & organizations tab
 content

---
 frontend/src/pages/Contact.vue      | 4 ++--
 frontend/src/pages/Organization.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index df20fba9..534d189f 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -186,9 +186,9 @@
           v-if="!rows.length"
           class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
         >
-          <div class="flex flex-col items-center justify-center space-y-2">
+          <div class="flex flex-col items-center justify-center space-y-3">
             <component :is="tab.icon" class="!h-10 !w-10" />
-            <div>No {{ tab.label.toLowerCase() }} found</div>
+            <div>No {{ tab.label }} Found</div>
           </div>
         </div>
       </template>
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index e3777589..bfd8a3a9 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -208,9 +208,9 @@
             v-if="!rows.length"
             class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
           >
-            <div class="flex flex-col items-center justify-center space-y-2">
+            <div class="flex flex-col items-center justify-center space-y-3">
               <component :is="tab.icon" class="!h-10 !w-10" />
-              <div>No {{ tab.label.toLowerCase() }} found</div>
+              <div>No {{ tab.label }} Found</div>
             </div>
           </div>
         </div>