fix: display custom billable rate correctly on project detail page

resources/js/Layouts/AppLayout.vue

@@ -44,8 +44,7 @@ import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vu
 import BillingBanner from '@/Components/Billing/BillingBanner.vue';
 import UserTimezoneMismatchModal from '@/Components/Common/User/UserTimezoneMismatchModal.vue';
 import { useTheme } from '@/utils/theme';
-import { useQuery } from '@tanstack/vue-query';
-import { api } from '@/packages/api/src';
+import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
 import { twMerge } from 'tailwind-merge';
@@ -65,22 +64,12 @@ defineProps({
 const showSidebarMenu = ref(false);
 const isUnloading = ref(false);
 
-const { data: organization, isLoading: isOrganizationLoading } = useQuery({
-    queryKey: ['organization', getCurrentOrganizationId()],
-    queryFn: () =>
-        api.getOrganization({
-            params: {
-                organization: getCurrentOrganizationId()!,
-            },
-        }),
-    enabled: !!getCurrentOrganizationId(),
-});
-
-provide(
-    'organization',
-    computed(() => organization.value?.data)
+const { organization, isLoading: isOrganizationLoading } = useOrganizationQuery(
+    getCurrentOrganizationId()!
 );
 
+provide('organization', organization);
+
 onMounted(async () => {
     useTheme();
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia

resources/js/Pages/ProjectShow.vue

@@ -3,7 +3,7 @@ import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
-import { computed, ref, inject, type ComputedRef } from 'vue';
+import { computed, ref } from 'vue';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import {
     ChevronRightIcon,
@@ -28,11 +28,12 @@ import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 import { Badge } from '@/packages/ui/src';
 import { formatCents } from '../packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '../utils/money';
-import type { Organization } from '@/packages/api/src';
+import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
+import { getCurrentOrganizationId } from '@/utils/useUser';
 
 const { projects } = useProjectsQuery();
 
-const organization = inject<ComputedRef<Organization>>('organization');
+const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 
 const project = computed(() => {
     return projects.value.find((project) => project.id === route().params.project) ?? null;
@@ -48,6 +49,19 @@ const { projectMembers } = canViewProjectMembers()
 
 const showEditProjectModal = ref(false);
 
+const billableRateFormatted = computed(() => {
+    if (project.value?.billable_rate) {
+        return formatCents(
+            project.value.billable_rate,
+            getOrganizationCurrencyString(),
+            organization.value?.currency_format,
+            organization.value?.currency_symbol,
+            organization.value?.number_format
+        );
+    }
+    return null;
+});
+
 const activeTab = ref<'active' | 'done'>('active');
 
 const { tasks } = useTasksQuery();
@@ -96,15 +110,7 @@ const shownTasks = computed(() => {
                 </ol>
                 <div class="px-4">
                     <Badge v-if="project?.billable_rate">
-                        {{
-                            formatCents(
-                                project?.billable_rate ?? 0,
-                                getOrganizationCurrencyString(),
-                                organization?.currency_format,
-                                organization?.currency_symbol,
-                                organization?.number_format
-                            )
-                        }}
+                        {{ billableRateFormatted }}
                         / h
                     </Badge>
                     <Badge v-if="project?.is_billable && !project?.billable_rate">

resources/js/utils/useOrganizationQuery.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/vue-query';
+import { api } from '@/packages/api/src';
+import { computed } from 'vue';
+
+export function useOrganizationQuery(organizationId: string) {
+    const query = useQuery({
+        queryKey: ['organization', organizationId],
+        queryFn: () =>
+            api.getOrganization({
+                params: {
+                    organization: organizationId,
+                },
+            }),
+    });
+
+    const organization = computed(() => query.data.value?.data);
+
+    return {
+        ...query,
+        organization,
+    };
+}