hide billable rate in projects table for employees when employees_can_see_billable_rates is disabled

resources/js/Components/Common/Project/ProjectTable.vue

@@ -2,7 +2,7 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
@@ -18,8 +18,9 @@ import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import { getOrganizationCurrencyString } from '@/utils/money';
 
-defineProps<{
+const props = defineProps<{
     projects: Project[];
+    showBillableRate: boolean;
 }>();
 
 const showCreateProjectModal = ref(false);
@@ -35,6 +36,9 @@ async function createClient(
     return await useClientsStore().createClient(client);
 }
 const { clients } = storeToRefs(useClientsStore());
+const gridTemplate = computed(() => {
+    return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) 80px;`;
+});
 </script>
 
 <template>
@@ -49,19 +53,11 @@ const { clients } = storeToRefs(useClientsStore());
             <div
                 data-testid="project_table"
                 class="grid min-w-full"
-                style="
+                :style="gridTemplate">
-                    grid-template-columns:
+                <ProjectTableHeading
-                        minmax(300px, 1fr) minmax(150px, auto) minmax(
+                    :showBillableRate="
-                            140px,
+                        props.showBillableRate
-                            auto
+                    "></ProjectTableHeading>
-                        )
-                        minmax(130px, auto) minmax(130px, auto) minmax(
-                            120px,
-                            auto
-                        )
-                        80px;
-                ">
-                <ProjectTableHeading></ProjectTableHeading>
                 <div
                     class="col-span-5 py-24 text-center"
                     v-if="projects.length === 0">
@@ -79,7 +75,9 @@ const { clients } = storeToRefs(useClientsStore());
                     </SecondaryButton>
                 </div>
                 <template v-for="project in projects" :key="project.id">
-                    <ProjectTableRow :project="project"></ProjectTableRow>
+                    <ProjectTableRow
+                        :showBillableRate="props.showBillableRate"
+                        :project="project"></ProjectTableRow>
                 </template>
             </div>
         </div>

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
+defineProps<{
+    showBillableRate: boolean;
+}>();
 </script>
 
 <template>
@@ -15,7 +18,9 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
         <div class="px-3 py-1.5 text-left font-semibold text-white">
             Progress
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-white">
+        <div
+            class="px-3 py-1.5 text-left font-semibold text-white"
+            v-if="showBillableRate">
             Billable Rate
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -21,6 +21,7 @@ const { tasks } = storeToRefs(useTasksStore());
 
 const props = defineProps<{
     project: Project;
+    showBillableRate: boolean;
 }>();
 
 const client = computed(() => {
@@ -104,7 +105,9 @@ const showEditProjectModal = ref(false);
                 :current="project.spent_time"></EstimatedTimeProgress>
             <span v-else> -- </span>
         </div>
-        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted"
+            v-if="showBillableRate">
             {{ billableRateInfo }}
         </div>
         <div

resources/js/Pages/Projects.vue

@@ -20,13 +20,18 @@ import type {
     Project,
 } from '@/packages/api/src';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import { getCurrentRole } from '@/utils/useUser';
+import { useOrganizationStore } from '@/utils/useOrganization';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
+    useOrganizationStore().fetchOrganization();
 });
 const { clients } = storeToRefs(useClientsStore());
 const showCreateProjectModal = ref(false);
 
+const { organization } = storeToRefs(useOrganizationStore());
+
 const activeTab = ref<'active' | 'archived'>('active');
 
 function isActiveTab(tab: string) {
@@ -53,10 +58,18 @@ async function createClient(
 ): Promise<Client | undefined> {
     return await useClientsStore().createClient(client);
 }
+
+const showBillableRate = computed(() => {
+    return !!(
+        getCurrentRole() !== 'employee' ||
+        organization.value?.employees_can_see_billable_rates
+    );
+});
 </script>
 
 <template>
     <AppLayout title="Projects" data-testid="projects_view">
+        {{ organization?.employee_can_see_billable_rates ? 'true' : 'false' }}
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
@@ -88,6 +101,8 @@ async function createClient(
                 @submit="createProject"
                 v-model:show="showCreateProjectModal"></ProjectCreateModal>
         </MainContainer>
-        <ProjectTable :projects="shownProjects"></ProjectTable>
+        <ProjectTable
+            :show-billable-rate="showBillableRate"
+            :projects="shownProjects"></ProjectTable>
     </AppLayout>
 </template>