add billable rate restriction interfaces for billing extension

2026-10-13 16:23:18 +01:00 · 2026-10-06 17:20:33 +02:00
parent d54296e66a
commit e793b81b35
36 changed files with 635 additions and 48 deletions
--- a/resources/js/Components/Common/Member/MemberEditModal.vue
+++ b/resources/js/Components/Common/Member/MemberEditModal.vue
@@ -21,6 +21,7 @@ import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';

 const { updateMember } = useMembersStore();
 const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
@@ -71,6 +72,8 @@ function saveWithChecks() {
    }
 }

+const { locked: billableRatesLocked } = useBillableRatesLock();
+
 const billableRateSelect = ref<MemberBillableKey>('default-rate');

 onMounted(() => {
@@ -159,7 +162,12 @@ const roleDescription = computed(() => {
                        <FieldLabel :icon="BillableIcon" for="billableRateType"
                            >Billable Rate</FieldLabel
                        >
-                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                        <BillableRateInput
+                            v-if="billableRatesLocked"
+                            v-model="displayedRate"
+                            :currency="getOrganizationCurrencyString()"
+                            name="memberBillableRate" />
+                        <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            <Select v-model="billableRateSelect">
                                <SelectTrigger id="billableRateType">
                                    <SelectValue />
--- a/resources/js/Components/Common/Member/MemberTableHeading.vue
+++ b/resources/js/Components/Common/Member/MemberTableHeading.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import TableHeading from '@/Components/Common/TableHeading.vue';
 import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
@@ -12,6 +14,8 @@ const props = defineProps<{
 defineEmits<{
    sort: [column: SortColumn];
 }>();
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -33,7 +37,10 @@ defineEmits<{
            column="billable_rate"
            v-bind="props"
            @sort="$emit('sort', $event)">
-            Billable Rate
+            <span class="inline-flex items-center gap-2 whitespace-nowrap">
+                Billable Rate
+                <UpgradeLockedBadge v-if="billableRatesLocked" />
+            </span>
        </SortableTableHeaderCell>
        <SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
            Status
--- a/resources/js/Components/Common/Member/MemberTableRow.vue
+++ b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import type { Member, Organization } from '@/packages/api/src';
 import { api } from '@/packages/api/src';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/24/outline';
@@ -25,6 +26,7 @@ import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
 import MemberMergeModal from '@/Components/Common/Member/MemberMergeModal.vue';
 import MemberMakePlaceholderModal from '@/Components/Common/Member/MemberMakePlaceholderModal.vue';
 import MemberDeleteModal from '@/Components/Common/Member/MemberDeleteModal.vue';
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
 import { formatCents } from '../../../packages/ui/src/utils/money';
 import {
@@ -71,6 +73,8 @@ async function invitePlaceholder(id: string) {
 const userHasValidMailAddress = computed(() => {
    return !props.member.email.endsWith('@solidtime-import.test');
 });
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -90,7 +94,8 @@ const userHasValidMailAddress = computed(() => {
                    {{ capitalizeFirstLetter(member.role) }}
                </div>
                <div class="whitespace-nowrap px-3 py-4 text-sm text-text-primary">
-                    <span v-if="member.billable_rate">
+                    <UpgradeLockedBadge v-if="billableRatesLocked" />
+                    <span v-else-if="member.billable_rate">
                        {{
                            formatCents(
                                member.billable_rate,
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -23,8 +23,10 @@ import ProjectVisibilitySelect from '@/packages/ui/src/Project/ProjectVisibility
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';

 const { updateProject } = useProjectsStore();
+const { locked: billableRatesLocked } = useBillableRatesLock();
 const { clients } = useClientsQuery();
 const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 const show = defineModel('show', { default: false });
@@ -48,6 +50,11 @@ const project = ref<CreateProjectBody>({
    is_public: props.originalProject.is_public,
 });

+// Locked organizations do not receive the rate of the project, so sending it back would remove the existing rate
+function getUpdateBody() {
+    const { billable_rate: billableRate, ...body } = project.value;
+    return billableRatesLocked.value ? body : { ...body, billable_rate: billableRate };
+}
 async function submit() {
    if (props.originalProject.billable_rate !== project.value.billable_rate) {
        // make sure that the alert modal is not immediately submitted when user presses enter
@@ -56,7 +63,7 @@ async function submit() {
        }, 0);
        return;
    }
-    await updateProject(props.originalProject.id, project.value);
+    await updateProject(props.originalProject.id, getUpdateBody());
    show.value = false;
 }

@@ -72,7 +79,7 @@ const currentClientName = computed(() => {
 });

 async function submitBillableRate() {
-    await updateProject(props.originalProject.id, project.value);
+    await updateProject(props.originalProject.id, getUpdateBody());
    show.value = false;
    showBillableRateModal.value = false;
 }
--- a/resources/js/Components/Common/Project/ProjectTableHeading.vue
+++ b/resources/js/Components/Common/Project/ProjectTableHeading.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
 import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
@@ -25,6 +27,8 @@ const sortState = computed(() => ({
 function handleSort(column: SortColumn) {
    emit('sort', column);
 }
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -50,7 +54,10 @@ function handleSort(column: SortColumn) {
            column="billable_rate"
            v-bind="sortState"
            @sort="handleSort">
-            Billable Rate
+            <span class="inline-flex items-center gap-2 whitespace-nowrap">
+                Billable Rate
+                <UpgradeLockedBadge v-if="billableRatesLocked" />
+            </span>
        </SortableTableHeaderCell>
        <SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
            Status
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import ProjectMoreOptionsDropdown from '@/Components/Common/Project/ProjectMoreOptionsDropdown.vue';
 import type { Project } from '@/packages/api/src';
 import { computed, ref, inject, type ComputedRef } from 'vue';
@@ -15,6 +16,7 @@ import { useTasksQuery } from '@/utils/useTasksQuery';
 import { useProjectsStore } from '@/utils/useProjects';
 import TableRow from '@/Components/TableRow.vue';
 import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
@@ -52,8 +54,11 @@ function deleteProject() {
 }

 function archiveProject() {
+    // Locked organizations do not receive the rate of the project, so sending it back would remove the existing rate
+    const { billable_rate: billableRate, ...project } = props.project;
    useProjectsStore().updateProject(props.project.id, {
-        ...props.project,
+        ...project,
+        ...(billableRatesLocked.value ? {} : { billable_rate: billableRate }),
        is_archived: !props.project.is_archived,
    });
 }
@@ -78,6 +83,8 @@ const billableRateInfo = computed(() => {
 });

 const showEditProjectModal = ref(false);
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -129,7 +136,8 @@ const showEditProjectModal = ref(false);
                <div
                    v-if="showBillableRate"
                    class="whitespace-nowrap px-3 py-4 text-sm text-text-primary">
-                    <span v-if="billableRateInfo">{{ billableRateInfo }}</span>
+                    <UpgradeLockedBadge v-if="billableRatesLocked" />
+                    <span v-else-if="billableRateInfo">{{ billableRateInfo }}</span>
                    <span v-else class="text-text-tertiary">--</span>
                </div>
                <div
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberTableHeading.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberTableHeading.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import TableHeading from '@/Components/Common/TableHeading.vue';
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -7,7 +11,10 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
        <div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
            Name
        </div>
-        <div class="px-3 py-1.5 text-left text-text-tertiary">Billable Rate</div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary flex items-center gap-2">
+            Billable Rate
+            <UpgradeLockedBadge v-if="billableRatesLocked" />
+        </div>
        <div class="px-3 py-1.5 text-left text-text-tertiary">Role</div>
        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
            <span class="sr-only">Edit</span>
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import type { ProjectMember } from '@/packages/api/src';
 import { computed, ref, inject, type ComputedRef } from 'vue';
 import TableRow from '@/Components/TableRow.vue';
@@ -10,6 +11,7 @@ import { capitalizeFirstLetter } from '@/utils/format';
 import ProjectMemberEditModal from '@/Components/Common/ProjectMember/ProjectMemberEditModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import type { Organization } from '@/packages/api/src';
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';

 const props = defineProps<{
    projectMember: ProjectMember;
@@ -33,6 +35,8 @@ const member = computed(() => {
    return members.value.find((member) => member.id === props.projectMember.member_id);
 });
 const showEditModal = ref(false);
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -48,17 +52,20 @@ const showEditModal = ref(false);
            </span>
        </div>
        <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
-            {{
-                projectMember.billable_rate
-                    ? formatCents(
-                          projectMember.billable_rate,
-                          getOrganizationCurrencyString(),
-                          organization?.currency_format,
-                          organization?.currency_symbol,
-                          organization?.number_format
-                      )
-                    : '--'
-            }}
+            <UpgradeLockedBadge v-if="billableRatesLocked" />
+            <span v-else>
+                {{
+                    projectMember.billable_rate
+                        ? formatCents(
+                              projectMember.billable_rate,
+                              getOrganizationCurrencyString(),
+                              organization?.currency_format,
+                              organization?.currency_symbol,
+                              organization?.number_format
+                          )
+                        : '--'
+                }}
+            </span>
        </div>
        <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
            {{ capitalizeFirstLetter(member?.role ?? '') }}
--- a/resources/js/Components/Common/Reporting/ReportingOverview.vue
+++ b/resources/js/Components/Common/Reporting/ReportingOverview.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import {
    ChartBarIcon,
    ArrowDownTrayIcon,
@@ -290,6 +292,8 @@ const tableData = computed(() => {
        };
    });
 });
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -416,7 +420,12 @@ const tableData = computed(() => {
                        <div class="text-right" :class="!showBillableRate ? 'pr-6' : ''">
                            Duration
                        </div>
-                        <div v-if="showBillableRate" class="text-right pr-6">Cost</div>
+                        <div
+                            v-if="showBillableRate"
+                            class="flex items-center justify-end gap-2 pr-6">
+                            <UpgradeLockedBadge v-if="billableRatesLocked" />
+                            Cost
+                        </div>
                    </div>
                    <template
                        v-if="
--- a/resources/js/Components/Common/StatCard.vue
+++ b/resources/js/Components/Common/StatCard.vue
@@ -9,7 +9,7 @@ defineProps<{
    <div class="rounded-lg bg-card-background border-card-border shadow-card border px-3.5 py-2.5">
        <dt class="font-medium text-sm text-text-secondary">{{ title }}</dt>
        <dd class="text-xl text-text-primary pt-1 font-medium">
-            {{ value ?? '--' }}
+            <slot>{{ value ?? '--' }}</slot>
        </dd>
    </div>
 </template>
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { BarChart } from 'echarts/charts';
@@ -101,6 +103,8 @@ const { data: totalWeeklyBillableTime } = useQuery({
    staleTime: 1000 * 30, // 30 seconds
 });

+const { locked: billableRatesLocked } = useBillableRatesLock();
+
 const { data: totalWeeklyBillableAmount } = useQuery({
    queryKey: ['totalWeeklyBillableAmount', organizationId],
    queryFn: () => {
@@ -110,7 +114,7 @@ const { data: totalWeeklyBillableAmount } = useQuery({
            },
        });
    },
-    enabled: computed(() => !!organizationId.value),
+    enabled: computed(() => !!organizationId.value && !billableRatesLocked.value),
    staleTime: 1000 * 30, // 30 seconds
 });

@@ -270,7 +274,11 @@ const option = computed(() => {
                          )
                        : '--'
                " />
+            <StatCard v-if="billableRatesLocked" title="Billable Amount">
+                <UpgradeLockedBadge />
+            </StatCard>
            <StatCard
+                v-else
                title="Billable Amount"
                :value="
                    totalWeeklyBillableAmount
--- a/resources/js/Components/Dashboard/ThisWeekReportingTable.vue
+++ b/resources/js/Components/Dashboard/ThisWeekReportingTable.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import UpgradeLockedBadge from '@/packages/ui/src/UpgradeLockedBadge.vue';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';
 import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
 import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
 import {
@@ -126,6 +128,8 @@ const showBillableRate = computed(() => {
        getCurrentRole() !== 'employee' || organization?.value?.employees_can_see_billable_rates
    );
 });
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -151,7 +155,10 @@ const showBillableRate = computed(() => {
                class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:pb-1.5 [&>*]:pt-1 text-text-tertiary text-sm">
                <div class="pl-6">Name</div>
                <div class="text-right" :class="!showBillableRate ? 'pr-6' : ''">Duration</div>
-                <div v-if="showBillableRate" class="text-right pr-6">Cost</div>
+                <div v-if="showBillableRate" class="flex items-center justify-end gap-2 pr-6">
+                    <UpgradeLockedBadge v-if="billableRatesLocked" />
+                    Cost
+                </div>
            </div>

            <div