add empty state for members activity, fix organization switch data loading problem

resources/js/Components/Dashboard/TeamActivityCard.vue

@@ -2,6 +2,8 @@
 import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
 import TeamActivityCardEntry from '@/Components/Dashboard/TeamActivityCardEntry.vue';
 import { UserGroupIcon } from '@heroicons/vue/20/solid';
+import { router } from '@inertiajs/vue3';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
 
 defineProps<{
     latestTeamActivity: {
@@ -24,5 +26,20 @@ defineProps<{
             :name="activity.name"
             :description="activity.description"
             :working="activity.status"></TeamActivityCardEntry>
+        <div
+            v-if="latestTeamActivity.length <= 2"
+            class="text-center flex flex-1 justify-center items-center">
+            <div>
+                <UserGroupIcon
+                    class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
+                <h3 class="text-white font-semibold text-sm">
+                    Invite your co-workers
+                </h3>
+                <p class="pb-5 text-sm">You can invite your entire team.</p>
+                <SecondaryButton @click="router.visit(route('members'))"
+                    >Go to Members
+                </SecondaryButton>
+            </div>
+        </div>
     </DashboardCard>
 </template>

resources/js/Components/OrganizationSwitcher.vue

@@ -5,6 +5,7 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import { router, usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
 import { isBillingActivated } from '@/utils/billing';
+import { initializeStores } from '@/utils/init';
 
 const page = usePage<{
     jetstream: {
@@ -28,6 +29,9 @@ const switchToTeam = (team: Organization) => {
         },
         {
             preserveState: false,
+            onSuccess: () => {
+                initializeStores();
+            },
         }
     );
 };

resources/js/Layouts/AppLayout.vue

@@ -19,14 +19,8 @@ import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/Pages/MainContainer.vue';
 import { onMounted, ref } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
-import { useTagsStore } from '@/utils/useTags';
-import { useTasksStore } from '@/utils/useTasks';
-import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
-import { useClientsStore } from '@/utils/useClients';
-import { useMembersStore } from '@/utils/useMembers';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { initializeStores } from '@/utils/init';
 
 defineProps({
     title: String,
@@ -38,13 +32,7 @@ onMounted(async () => {
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;
-        useProjectsStore().fetchProjects();
+        initializeStores();
-        useTasksStore().fetchTasks();
-        useTagsStore().fetchTags();
-        useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-        useClientsStore().fetchClients();
-        useMembersStore().fetchMembers();
-        useTimeEntriesStore().fetchTimeEntries();
     }
 });
 </script>

resources/js/Pages/Time.vue

@@ -92,7 +92,7 @@ const groupedTimeEntries = computed(() => {
             </div>
             <div
                 v-else-if="allTimeEntriesLoaded"
-                class="flex justify-center items-center py-5 text-white font-medium">
+                class="flex justify-center items-center py-5 text-muted font-medium">
                 All time entries are loaded!
             </div>
         </div>

resources/js/utils/init.ts

@@ -0,0 +1,17 @@
+import { useProjectsStore } from '@/utils/useProjects';
+import { useTasksStore } from '@/utils/useTasks';
+import { useTagsStore } from '@/utils/useTags';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import { useClientsStore } from '@/utils/useClients';
+import { useMembersStore } from '@/utils/useMembers';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+
+export function initializeStores() {
+    useProjectsStore().fetchProjects();
+    useTasksStore().fetchTasks();
+    useTagsStore().fetchTags();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+    useClientsStore().fetchClients();
+    useMembersStore().fetchMembers();
+    useTimeEntriesStore().fetchTimeEntries();
+}