add billable rate restriction interfaces for billing extension

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

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