Merge pull request #42 from shariquerik/empty-state

fix: Added empty states

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()"
     />

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()

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>

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'

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'

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'

frontend/src/pages/Notes.vue

@@ -61,13 +61,15 @@
       </div>
     </div>
   </div>
-  <div
+  <div v-else class="flex h-full items-center justify-center">
-    v-else
+    <div
-    class="flex flex-1 items-center justify-center p-5 text-xl font-medium text-gray-500"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
-  >
+    >
-    <div class="flex flex-col items-center gap-2">
+      <NoteIcon class="h-10 w-10" />
-      <NoteIcon class="h-10 w-10 text-gray-500" />
+      <span>No Notes Found</span>
-      <span>No notes</span>
+      <Button label="Create" @click="createNote">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
     </div>
   </div>
   <NoteModal

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>

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'