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="
-                    grid-template-columns:
-                        minmax(300px, 1fr) minmax(150px, auto) minmax(
-                            140px,
-                            auto
-                        )
-                        minmax(130px, auto) minmax(130px, auto) minmax(
-                            120px,
-                            auto
-                        )
-                        80px;
-                ">
-                <ProjectTableHeading></ProjectTableHeading>
+                :style="gridTemplate">
+                <ProjectTableHeading
+                    :showBillableRate="
+                        props.showBillableRate
+                    "></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