add employees_can_see_billable_rates setting to organization settings

resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue

@@ -9,6 +9,7 @@ import { useOrganizationStore } from '@/utils/useOrganization';
 import { storeToRefs } from 'pinia';
 import OrganizationBillableRateModal from '@/Components/Common/Organization/OrganizationBillableRateModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import { Checkbox } from '@/packages/ui/src';
 
 const store = useOrganizationStore();
 const { fetchOrganization, updateOrganization } = store;
@@ -17,6 +18,7 @@ const saving = ref(false);
 const organizationBody = ref<UpdateOrganizationBody>({
     name: '',
     billable_rate: null as number | null,
+    employees_can_see_billable_rates: false,
 });
 
 onMounted(async () => {
@@ -24,6 +26,8 @@ onMounted(async () => {
     organizationBody.value = {
         name: organization.value?.name ?? '',
         billable_rate: organization.value?.billable_rate,
+        employees_can_see_billable_rates:
+            organization.value?.employees_can_see_billable_rates ?? false,
     };
 });
 const showConfirmationModal = ref(false);
@@ -34,6 +38,17 @@ async function submit() {
     saving.value = false;
     showConfirmationModal.value = false;
 }
+
+function checkForConfirmationModal() {
+    if (
+        organizationBody.value.billable_rate ===
+        organization.value?.billable_rate
+    ) {
+        submit();
+    } else {
+        showConfirmationModal.value = true;
+    }
+}
 </script>
 
 <template>
@@ -64,9 +79,25 @@ async function submit() {
                         name="organizationBillableRate"></BillableRateInput>
                 </div>
             </div>
+
+            <div class="col-span-6">
+                <div class="col-span-6 sm:col-span-4">
+                    <div class="flex items-center space-x-2">
+                        <Checkbox
+                            v-if="organization"
+                            v-model:checked="
+                                organizationBody.employees_can_see_billable_rates
+                            "
+                            id="organizationShowBillableRatesToEmployees"></Checkbox>
+                        <InputLabel
+                            for="organizationShowBillableRatesToEmployees"
+                            value="Show Billable Rates to Employees" />
+                    </div>
+                </div>
+            </div>
         </template>
         <template #actions>
-            <PrimaryButton @click="showConfirmationModal = true"
+            <PrimaryButton @click="checkForConfirmationModal"
                 >Save</PrimaryButton
             >
         </template>

resources/js/packages/api/src/openapi.json.client.ts

@@ -51,12 +51,14 @@ const OrganizationResource = z
         name: z.string(),
         is_personal: z.boolean(),
         billable_rate: z.union([z.number(), z.null()]),
+        employees_can_see_billable_rates: z.boolean(),
     })
     .passthrough();
 const OrganizationUpdateRequest = z
     .object({
         name: z.string().max(255),
         billable_rate: z.union([z.number(), z.null()]).optional(),
+        employees_can_see_billable_rates: z.boolean().optional(),
     })
     .passthrough();
 const ProjectResource = z

resources/js/packages/ui/src/Input/Checkbox.vue

@@ -12,6 +12,10 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    id: {
+        type: String,
+        default: null,
+    },
 });
 
 const proxyChecked = computed({
@@ -29,6 +33,7 @@ const proxyChecked = computed({
     <input
         v-model="proxyChecked"
         type="checkbox"
+        :id="id"
         :value="value"
         class="rounded bg-input-background border-input-border text-indigo-600 shadow-sm focus:ring-indigo-500" />
 </template>