add billable rate restriction interfaces for billing extension

2026-10-08 05:43: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
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -23,7 +23,7 @@ import { PanelLeft } from '@lucide/vue';
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { nextTick, onMounted, provide, ref } from 'vue';
+import { computed, nextTick, onMounted, provide, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores } from '@/utils/init';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
@@ -37,7 +37,9 @@ import {
    canViewReport,
    canViewTags,
 } from '@/utils/permissions';
-import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
+import { canUseBillableRates, isBillingActivated, isInvoicingActivated } from '@/utils/billing';
+import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import { billableRatesLockKey } from '@/packages/ui/src/utils/useBillableRatesLock';
 import type { User } from '@/types/models';
 import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
@@ -88,6 +90,14 @@ const { organization, isLoading: isOrganizationLoading } = useOrganizationQuery(

 provide('organization', organization);

+const showBillableRatesUpgradeModal = ref(false);
+provide(billableRatesLockKey, {
+    locked: computed(() => !canUseBillableRates()),
+    requestUpgrade: () => {
+        showBillableRatesUpgradeModal.value = true;
+    },
+});
+
 onMounted(async () => {
    useTheme();
    // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
@@ -377,4 +387,7 @@ const page = usePage<{
    <NotificationContainer></NotificationContainer>
    <UserTimezoneMismatchModal></UserTimezoneMismatchModal>
    <CommandPaletteProvider></CommandPaletteProvider>
+    <UpgradeModal v-model:show="showBillableRatesUpgradeModal">
+        <strong>Billable Rates</strong> are only available in solidtime Professional.
+    </UpgradeModal>
 </template>
--- a/resources/js/Pages/ProjectShow.vue
+++ b/resources/js/Pages/ProjectShow.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 MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/20/solid';
@@ -80,6 +82,8 @@ const shownTasks = computed(() => {
        return task.project_id === projectId && task.is_done;
    });
 });
+
+const { locked: billableRatesLocked } = useBillableRatesLock();
 </script>

 <template>
@@ -117,11 +121,17 @@ const shownTasks = computed(() => {
                    </li>
                </ol>
                <div class="px-4 space-x-1">
-                    <Badge v-if="project?.billable_rate">
+                    <UpgradeLockedBadge v-if="billableRatesLocked"
+                        >Billable Rates</UpgradeLockedBadge
+                    >
+                    <Badge v-else-if="project?.billable_rate">
                        {{ billableRateFormatted }}
                        / h
                    </Badge>
-                    <Badge v-if="project?.is_billable && !project?.billable_rate">
+                    <Badge
+                        v-if="
+                            project?.is_billable && !project?.billable_rate && !billableRatesLocked
+                        ">
                        Default Rate
                    </Badge>
                    <Badge v-if="!project?.is_billable"> Non-Billable </Badge>
--- a/resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
+++ b/resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
@@ -10,10 +10,12 @@ import { storeToRefs } from 'pinia';
 import OrganizationBillableRateModal from '@/Components/Common/Organization/OrganizationBillableRateModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { Checkbox } from '@/packages/ui/src';
+import { useBillableRatesLock } from '@/packages/ui/src/utils/useBillableRatesLock';

 const store = useOrganizationStore();
 const { fetchOrganization, updateOrganization } = store;
 const { organization } = storeToRefs(store);
+const { locked: billableRatesLocked, requestUpgrade } = useBillableRatesLock();
 const saving = ref(false);
 const organizationBody = ref<UpdateOrganizationBody>({
    name: '',
@@ -75,9 +77,8 @@ function checkForConfirmationModal() {
                    <Checkbox
                        v-if="organization"
                        id="organizationShowBillableRatesToEmployees"
-                        v-model:checked="
-                            organizationBody.employees_can_see_billable_rates
-                        "></Checkbox>
+                        v-model:checked="organizationBody.employees_can_see_billable_rates"
+                        :disabled="billableRatesLocked"></Checkbox>
                    <FieldLabel for="organizationShowBillableRatesToEmployees"
                        >Show Billable Rates to Employees</FieldLabel
                    >
@@ -85,7 +86,10 @@ function checkForConfirmationModal() {
            </div>
        </template>
        <template #actions>
-            <PrimaryButton @click="checkForConfirmationModal">Save</PrimaryButton>
+            <PrimaryButton v-if="billableRatesLocked" @click="requestUpgrade"
+                >Upgrade</PrimaryButton
+            >
+            <PrimaryButton v-else @click="checkForConfirmationModal">Save</PrimaryButton>
        </template>
    </FormSection>
 </template>
--- a/resources/js/packages/ui/src/Input/BillableRateInput.vue
+++ b/resources/js/packages/ui/src/Input/BillableRateInput.vue
@@ -8,6 +8,8 @@ import {
    NumberFieldIncrement,
    NumberFieldInput,
 } from '..';
+import UpgradeLockedField from './UpgradeLockedField.vue';
+import { useBillableRatesLock } from '../utils/useBillableRatesLock';

 const props = defineProps<{
    name: string;
@@ -20,6 +22,8 @@ const model = defineModel<number | null>({
    default: null,
 });

+const { locked } = useBillableRatesLock();
+
 const billableRateInput = ref<HTMLInputElement | null>(null);
 useFocus(billableRateInput, { initialValue: props.focus });

@@ -30,7 +34,9 @@ function formatValue(modelValue: number | null) {

 <template>
    <div class="relative">
+        <UpgradeLockedField v-if="locked" />
        <NumberField
+            v-else
            :id="name"
            ref="billableRateInput"
            :model-value="formatValue(model)"
--- a/resources/js/packages/ui/src/Input/UpgradeLockedField.vue
+++ b/resources/js/packages/ui/src/Input/UpgradeLockedField.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { LockClosedIcon } from '@heroicons/vue/20/solid';
+import { useBillableRatesLock } from '../utils/useBillableRatesLock';
+
+const { requestUpgrade } = useBillableRatesLock();
+</script>
+
+<template>
+    <button
+        type="button"
+        data-testid="billable_rates_locked"
+        class="flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input-border bg-input-background px-3 text-left text-sm text-text-tertiary shadow-sm transition hover:border-border-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        @click.prevent.stop="requestUpgrade">
+        <span class="flex min-w-0 items-center gap-2">
+            <LockClosedIcon class="w-3.5 shrink-0 text-icon-default" />
+            <span class="truncate"><slot>Billable rates</slot></span>
+        </span>
+        <span
+            class="shrink-0 rounded border border-border-secondary bg-secondary px-2 py-0.5 text-xs font-semibold text-text-secondary">
+            Upgrade
+        </span>
+    </button>
+</template>
--- a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
+++ b/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
@@ -10,12 +10,15 @@ import {
 } from '@/packages/ui/src/tooltip';
 import { computed, onMounted, ref, watch } from 'vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import { useBillableRatesLock } from '../utils/useBillableRatesLock';

 const props = defineProps<{
    currency: string;
    organizationBillableRate: number | null;
 }>();

+const { locked: billableRatesLocked } = useBillableRatesLock();
+
 type RateType = 'default-rate' | 'custom-rate';

 const billableDefault = ref<'billable' | 'non-billable'>('non-billable');
@@ -91,7 +94,12 @@ const emit = defineEmits(['submit']);
    </Field>
    <Field>
        <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="currency"
+            name="billableRate" />
+        <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-2">
            <Select v-model="rateType">
                <SelectTrigger id="billableRateType">
                    <SelectValue />
--- a/resources/js/packages/ui/src/UpgradeLockedBadge.vue
+++ b/resources/js/packages/ui/src/UpgradeLockedBadge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { LockClosedIcon } from '@heroicons/vue/20/solid';
+import { useBillableRatesLock } from './utils/useBillableRatesLock';
+
+const { requestUpgrade } = useBillableRatesLock();
+</script>
+
+<template>
+    <button
+        type="button"
+        data-testid="billable_rates_locked_badge"
+        class="inline-flex items-center space-x-1 rounded border border-border-secondary bg-secondary px-2 py-1 hover:border-border-tertiary hover:bg-tertiary"
+        @click.prevent.stop="requestUpgrade">
+        <LockClosedIcon class="w-3 text-text-tertiary"></LockClosedIcon>
+        <span class="text-xs font-semibold text-text-secondary"><slot>Upgrade</slot></span>
+    </button>
+</template>
--- a/resources/js/packages/ui/src/index.ts
+++ b/resources/js/packages/ui/src/index.ts
@@ -21,6 +21,8 @@ export type { CalendarSettings } from './FullCalendar/calendarSettings';
 export type { ActivityPeriod } from './FullCalendar/activityTypes';
 export { cn } from './utils/cn';
 export { useCssVariable } from './utils/useCssVariable';
+export { billableRatesLockKey, useBillableRatesLock } from './utils/useBillableRatesLock';
+export type { BillableRatesLock } from './utils/useBillableRatesLock';

 import Badge from './Badge.vue';
 import Button from './Buttons/Button.vue';
--- a/resources/js/packages/ui/src/utils/useBillableRatesLock.ts
+++ b/resources/js/packages/ui/src/utils/useBillableRatesLock.ts
@@ -0,0 +1,22 @@
+import { computed, inject, type ComputedRef, type InjectionKey } from 'vue';
+
+export interface BillableRatesLock {
+    locked: ComputedRef<boolean>;
+    requestUpgrade: () => void;
+}
+
+export const billableRatesLockKey: InjectionKey<BillableRatesLock> = Symbol('billableRatesLock');
+
+/**
+ * Whether billable rates are locked behind a plan upgrade for the current organization.
+ *
+ * The app layout provides the lock state and opens the upgrade dialog. Without a
+ * provider (e.g. public report views or other consumers of this package) billable
+ * rates count as unlocked.
+ */
+export function useBillableRatesLock(): BillableRatesLock {
+    return inject(billableRatesLockKey, {
+        locked: computed(() => false),
+        requestUpgrade: () => {},
+    });
+}
--- a/resources/js/utils/billing.ts
+++ b/resources/js/utils/billing.ts
@@ -70,3 +70,13 @@ export function isAllowedToPerformPremiumAction() {
        (isBillingActivated() && isInTrial())
    );
 }
+
+export function canUseBillableRates() {
+    const page = usePage<{
+        billing: {
+            can_use_billable_rates?: boolean;
+        } | null;
+    }>();
+
+    return !isBillingActivated() || page.props.billing?.can_use_billable_rates !== false;
+}