From c30763d718462aa458235da6f8c8fbb723efe3d7 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 15 Apr 2024 22:29:58 +0200
Subject: [PATCH] add empty state for time page

---
 e2e/organization.spec.ts                         |  2 ++
 resources/js/Pages/Teams/Partials/ImportData.vue |  6 +++---
 resources/js/Pages/Time.vue                      | 10 +++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/e2e/organization.spec.ts b/e2e/organization.spec.ts
index 751fba80..4b84f4f9 100644
--- a/e2e/organization.spec.ts
+++ b/e2e/organization.spec.ts
@@ -62,3 +62,5 @@ test('test that error shows if no role is selected', async ({ page }) => {
         'The role field is required.'
     );
 });
+
+// TODO: Add Test for import
diff --git a/resources/js/Pages/Teams/Partials/ImportData.vue b/resources/js/Pages/Teams/Partials/ImportData.vue
index 10ccca8c..a209d109 100644
--- a/resources/js/Pages/Teams/Partials/ImportData.vue
+++ b/resources/js/Pages/Teams/Partials/ImportData.vue
@@ -6,7 +6,7 @@ import { ref } from 'vue';
 import { useNotificationsStore } from '@/utils/notification';
 import { api } from '../../../../../openapi.json.client';
 import InputLabel from '@/Components/InputLabel.vue';
-import { PhotoIcon } from '@heroicons/vue/24/solid';
+import { DocumentIcon } from '@heroicons/vue/24/solid';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 
 defineProps<{
@@ -111,8 +111,8 @@ const importType = ref<ImportType | null>(null);
                 <div
                     class="mt-2 flex justify-center rounded-lg border border-dashed border-white/30 px-6 py-10">
                     <div class="text-center">
-                        <PhotoIcon
-                            class="mx-auto h-12 w-12 text-gray-500"
+                        <DocumentIcon
+                            class="mx-auto h-8 w-8 text-muted"
                             aria-hidden="true" />
 
                         <div class="mt-4 flex text-sm leading-6 text-muted">
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index 436afd90..a3a0da9a 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -10,6 +10,7 @@ import type { TimeEntry } from '@/utils/api';
 import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
 import { useElementVisibility } from '@vueuse/core';
+import { ClockIcon } from '@heroicons/vue/20/solid';
 
 const timeEntriesStore = useTimeEntriesStore();
 const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
@@ -49,7 +50,7 @@ const groupedTimeEntries = computed(() => {
 <template>
     <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
-            class="py-4 sm:py-8 border-b border-default-background-separator">
+            class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
             <TimeTracker></TimeTracker>
         </MainContainer>
         <div v-for="(value, key) in groupedTimeEntries" :key="key">
@@ -59,6 +60,13 @@ const groupedTimeEntries = computed(() => {
                 v-for="entry in value"
                 :time-entry="entry"></TimeEntryRow>
         </div>
+        <div
+            v-if="Object.keys(groupedTimeEntries).length === 0"
+            class="text-center pt-12">
+            <ClockIcon class="w-8 text-icon-default inline pb-2"></ClockIcon>
+            <h3 class="text-white font-semibold">No time entries found</h3>
+            <p class="pb-5">Create your first time entry now!</p>
+        </div>
         <div ref="loadMoreContainer">
             <div
                 v-if="loading && !allTimeEntriesLoaded"