hide total billable amounts from employees when employees_can_see_billable_rates is disabled

resources/js/Components/Common/Reporting/ReportingRow.vue

@@ -12,7 +12,7 @@ type AggregatedGroupedData = GroupedData & {
 
 type GroupedData = {
     seconds: number;
-    cost: number;
+    cost: number | null;
     description: string | null | undefined;
 };
 
@@ -48,7 +48,7 @@ const expanded = ref(false);
             {{ formatHumanReadableDuration(entry.seconds) }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{ formatCents(entry.cost, getOrganizationCurrencyString()) }}
+            {{entry.cost ? formatCents(entry.cost, getOrganizationCurrencyString()) : '--' }}
         </div>
     </div>
     <div

resources/js/Components/Common/Reporting/ReportingTabNavbar.vue

@@ -2,9 +2,13 @@
 import { router } from '@inertiajs/vue3';
 import TabBar from '@/Components/Common/TabBar/TabBar.vue';
 import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import {canViewReport} from "@/utils/permissions";
+import {computed} from "vue";
 defineProps<{
     active: 'reporting' | 'detailed' | 'shared';
 }>();
+
+const showSharedReports = computed(() => canViewReport());
 </script>
 
 <template>
@@ -20,6 +24,7 @@ defineProps<{
             >Detailed</TabBarItem
         >
         <TabBarItem
+            v-if="showSharedReports"
             :active="active === 'shared'"
             @click="router.visit(route('reporting.shared'))"
             >Shared</TabBarItem