add format check, update prettier rules, apply rules consistently

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

@@ -2,20 +2,20 @@
 import { Switch } from '@/Components/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/Components/ui/popover';
 import { Button } from '@/Components/ui/button';
-import { 
-    Select, 
-    SelectContent, 
-    SelectItem, 
-    SelectTrigger, 
-    SelectValue 
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
 } from '@/Components/ui/select';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
-import { 
-    NumberField, 
-    NumberFieldInput, 
-    NumberFieldContent, 
-    NumberFieldIncrement, 
-    NumberFieldDecrement 
+import {
+    NumberField,
+    NumberFieldInput,
+    NumberFieldContent,
+    NumberFieldIncrement,
+    NumberFieldDecrement,
 } from '@/Components/ui/number-field';
 import { ArrowsUpDownIcon } from '@heroicons/vue/20/solid';
 import { computed, ref, watch } from 'vue';
@@ -30,7 +30,7 @@ const TimeEntryRoundingType = {
     Nearest: 'nearest' as const,
 } as const;
 
-type TimeEntryRoundingType = typeof TimeEntryRoundingType[keyof typeof TimeEntryRoundingType];
+type TimeEntryRoundingType = (typeof TimeEntryRoundingType)[keyof typeof TimeEntryRoundingType];
 
 interface Props {
     enabled: boolean;
@@ -79,8 +79,8 @@ const selectedInterval = ref('');
 
 // Compute the current interval value based on props
 const currentInterval = computed(() => {
-    const predefined = predefinedIntervals.find(interval => 
-        interval.value !== 'custom' && parseInt(interval.value) === props.minutes
+    const predefined = predefinedIntervals.find(
+        (interval) => interval.value !== 'custom' && parseInt(interval.value) === props.minutes
     );
     return predefined ? predefined.value : 'custom';
 });
@@ -116,10 +116,14 @@ function handleCustomMinutesChange(value: string | number) {
 }
 
 // Watch for changes in props.minutes
-watch(() => props.minutes, (newMinutes) => {
-    customMinutes.value = newMinutes;
-    initializeSelectedInterval();
-}, { immediate: true });
+watch(
+    () => props.minutes,
+    (newMinutes) => {
+        customMinutes.value = newMinutes;
+        initializeSelectedInterval();
+    },
+    { immediate: true }
+);
 
 watch(currentInterval, () => {
     initializeSelectedInterval();
@@ -136,7 +140,9 @@ const activeClass = computed(() => {
 const iconClass = computed(() => {
     return twMerge(
         'w-4 h-4',
-        props.enabled ? 'dark:text-accent-300/80 text-accent-400/80' : 'text-muted-foreground opacity-50'
+        props.enabled
+            ? 'dark:text-accent-300/80 text-accent-400/80'
+            : 'text-muted-foreground opacity-50'
     );
 });
 </script>
@@ -144,10 +150,7 @@ const iconClass = computed(() => {
 <template>
     <Popover>
         <PopoverTrigger as-child>
-            <Button 
-                variant="outline" 
-                size="sm"
-                :class="twMerge(activeClass)">
+            <Button variant="outline" size="sm" :class="twMerge(activeClass)">
                 <ArrowsUpDownIcon :class="iconClass" />
                 Rounding {{ enabled ? 'on' : 'off' }}
             </Button>
@@ -155,7 +158,9 @@ const iconClass = computed(() => {
         <PopoverContent class="w-72 p-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>
+                <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" />
@@ -166,26 +171,31 @@ const iconClass = computed(() => {
             <div v-else class="space-y-4">
                 <div>
                     <div class="flex items-center justify-between">
-                    <InputLabel for="enable-rounding" value="Enable Rounding" />
-                    <Switch 
-                        id="enable-rounding"
-                        :model-value="enabled"
-                        class="data-[state=checked]:bg-accent-500"
-                        @update:model-value="updateEnabled" />
-                </div>
-                <div class="mb-3 pb-2 pt-1 text-xs text-muted-foreground border-b border-border-secondary text-text-tertiary">
-                Rounding is applied to each individual time entry, not to the accumulated total.
-                </div>
-
+                        <InputLabel for="enable-rounding" value="Enable Rounding" />
+                        <Switch
+                            id="enable-rounding"
+                            :model-value="enabled"
+                            class="data-[state=checked]:bg-accent-500"
+                            @update:model-value="updateEnabled" />
+                    </div>
+                    <div
+                        class="mb-3 pb-2 pt-1 text-xs text-muted-foreground border-b border-border-secondary text-text-tertiary">
+                        Rounding is applied to each individual time entry, not to the accumulated
+                        total.
+                    </div>
                 </div>
 
                 <div>
                     <InputLabel for="rounding-type" value="Rounding Type" class="mb-2" />
-                    <Select 
+                    <Select
                         :model-value="type"
                         :disabled="!enabled"
                         @update:model-value="(value) => updateType(value as TimeEntryRoundingType)">
-                        <SelectTrigger id="rounding-type" size="small" class="w-full" :disabled="!enabled">
+                        <SelectTrigger
+                            id="rounding-type"
+                            size="small"
+                            class="w-full"
+                            :disabled="!enabled">
                             <SelectValue placeholder="Select rounding type" />
                         </SelectTrigger>
                         <SelectContent>
@@ -197,23 +207,27 @@ const iconClass = computed(() => {
                 </div>
                 <div>
                     <InputLabel for="minutes-interval" value="Minutes Interval" class="mb-2" />
-                    <Select 
+                    <Select
                         :model-value="selectedInterval"
                         :disabled="!enabled"
                         @update:model-value="(value) => handleIntervalChange(value as string)">
-                        <SelectTrigger id="minutes-interval" size="small" class="w-full" :disabled="!enabled">
-                            <SelectValue  placeholder="Select interval" />
+                        <SelectTrigger
+                            id="minutes-interval"
+                            size="small"
+                            class="w-full"
+                            :disabled="!enabled">
+                            <SelectValue placeholder="Select interval" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem 
-                                v-for="interval in predefinedIntervals" 
+                            <SelectItem
+                                v-for="interval in predefinedIntervals"
                                 :key="interval.value"
                                 :value="interval.value">
                                 {{ interval.label }}
                             </SelectItem>
                         </SelectContent>
                     </Select>
-                    
+
                     <div v-if="showCustomInput" class="mt-2">
                         <NumberField
                             id="custom-minutes"
@@ -226,7 +240,9 @@ const iconClass = computed(() => {
                             @update:model-value="handleCustomMinutesChange">
                             <NumberFieldContent>
                                 <NumberFieldDecrement :disabled="!enabled" />
-                                <NumberFieldInput placeholder="Enter custom minutes" :disabled="!enabled" />
+                                <NumberFieldInput
+                                    placeholder="Enter custom minutes"
+                                    :disabled="!enabled" />
                                 <NumberFieldIncrement :disabled="!enabled" />
                             </NumberFieldContent>
                         </NumberField>
@@ -235,4 +251,4 @@ const iconClass = computed(() => {
             </div>
         </PopoverContent>
     </Popover>
-</template> 
+</template>