change dashboard ui to use api instead of inertia props

resources/js/Components/Dashboard/TeamActivityCard.vue

@@ -1,33 +1,52 @@
 <script lang="ts" setup>
+import { useQuery } from '@tanstack/vue-query';
+import { computed } from 'vue';
 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 '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { LoadingSpinner } from "@/packages/ui/src";
+import { router } from '@inertiajs/vue3';
+
+// Get the organization ID using the utility function
+const organizationId = computed(() => getCurrentOrganizationId());
+
+// Set up the query
+const { data: latestTeamActivity, isLoading } = useQuery({
+  queryKey: ['latestTeamActivity', organizationId],
+  queryFn: () => {
+      return api.latestTeamActivity({
+          params: {
+              organization: organizationId.value!
+          }
+      })
+  },
+  enabled: computed(() => !!organizationId.value),
+});
 
-defineProps<{
-    latestTeamActivity: {
-        user_id: string;
-        name: string;
-        description: string;
-        time_entry_id: string;
-        task_id: string;
-        status: boolean;
-    }[];
-}>();
 </script>
 
 <template>
     <DashboardCard title="Team Activity" :icon="UserGroupIcon">
-        <TeamActivityCardEntry
-            v-for="activity in latestTeamActivity"
-            :key="activity.user_id"
-            :class="latestTeamActivity.length === 4 ? 'last:border-0' : ''"
-            :name="activity.name"
-            :description="activity.description"
-            :working="activity.status"></TeamActivityCardEntry>
+        <div v-if="isLoading" class="flex justify-center items-center h-40">
+            <LoadingSpinner />
+        </div>
+        <div v-else-if="latestTeamActivity">
+            <TeamActivityCardEntry
+                v-for="activity in latestTeamActivity"
+                :key="activity.time_entry_id"
+                :class="latestTeamActivity.length === 4 ? 'last:border-0' : ''"
+                :name="activity.name"
+                :description="activity.description"
+                :working="activity.status"></TeamActivityCardEntry>
+        </div>
+        <div v-else class="text-center text-gray-500 py-8">
+            No team activity found
+        </div>
         <div
-            v-if="latestTeamActivity.length <= 1"
+            v-if="latestTeamActivity && latestTeamActivity.length <= 1"
             class="text-center flex flex-1 justify-center items-center">
             <div>
                 <UserGroupIcon