add frontend blocking for rounding for non-premium users

e2e/reporting.spec.ts

@@ -114,8 +114,8 @@ test('test that project filtering works in reporting', async ({ page }) => {
     await page.waitForLoadState('networkidle');
 
     // Verify only project1 time entries are shown
-    await expect(page.getByText(project1)).toBeVisible();
-    await expect(page.getByText(project2)).not.toBeVisible();
+    await expect(page.getByTestId('reporting_view').getByText(project1)).toBeVisible();
+    await expect(page.getByTestId('reporting_view').getByText(project2)).not.toBeVisible();
 });
 
 test('test that tag filtering works in reporting', async ({ page }) => {
@@ -142,7 +142,7 @@ test('test that tag filtering works in reporting', async ({ page }) => {
     ]);
 
     // Verify only time entries with tag1 are shown
-    await expect(page.getByText('1h 00min').first()).toBeVisible();
+    await expect(page.getByTestId('reporting_view').getByText('1h 00min').first()).toBeVisible();
 });
 
 test('test that billable status filtering works in reporting', async ({ page }) => {
@@ -164,7 +164,7 @@ test('test that billable status filtering works in reporting', async ({ page })
     ]);
     await page.waitForLoadState('networkidle');
 
-    await expect(page.getByText('1h 00min').first()).toBeVisible();
+    await expect(page.getByTestId('reporting_view').getByText('1h 00min').first()).toBeVisible();
 });
 
 

resources/js/Components/Common/Reporting/ReportingRoundingControls.vue

@@ -20,6 +20,9 @@ import {
 import { ArrowsUpDownIcon } from '@heroicons/vue/20/solid';
 import { computed, ref, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import { Link } from '@inertiajs/vue3';
+import { CreditCardIcon } from '@heroicons/vue/20/solid';
 // TimeEntryRoundingType definition
 const TimeEntryRoundingType = {
     Up: 'up' as const,
@@ -150,7 +153,17 @@ const iconClass = computed(() => {
             </Button>
         </PopoverTrigger>
         <PopoverContent class="w-72 p-4">
-            <div class="space-y-4">
+            <div v-if="!isAllowedToPerformPremiumAction()" class="flex flex-col space-y-2">
+                <span class="font-semibold text-xs">Premium</span>
+                <span class="text-xs text-text-secondary flex-1">Rounding is a premium feature. Upgrade to unlock this feature.</span>
+                <Link href="/billing">
+                    <Button size="sm" variant="input" class="items-center space-x-1">
+                        <CreditCardIcon class="w-3.5 h-3.5 text-text-tertiary mr-1" />
+                        Go to Billing
+                    </Button>
+                </Link>
+            </div>
+            <div v-else class="space-y-4">
                 <div>
                     <div class="flex items-center justify-between">
                     <InputLabel for="enable-rounding" value="Enable Rounding" />

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -154,7 +154,7 @@ function onSelectChange(checked: boolean) {
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <button
-                            :class="twMerge('text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary', organization?.time_format === '12-hours' ? 'w-[160px]' : 'w-[110px]')"
+                            :class="twMerge('text-text-secondary px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary', organization?.time_format === '12-hours' ? 'w-[170px]' : 'w-[120px]')"
                             @click="expanded = !expanded">
                             {{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
                         </button>