fix daterange presets, fix e2e test

allow admins to delete members
fix Dialog cloes on click outside of content

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

@@ -17,7 +17,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVar } from '@vueuse/core';
 
 use([
     CanvasRenderer,
@@ -47,10 +47,8 @@ const xAxisLabels = computed(() => {
         formatDate(el.key ?? '', organization?.value?.date_format)
     );
 });
-const accentColor = useCssVariable('--theme-color-chart');
-const labelColor = useCssVariable('--color-text-secondary');
-const markLineColor = useCssVariable('--color-border-secondary');
-const splitLineColor = useCssVariable('--color-border-tertiary');
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const seriesData = computed(() => {
     return props?.groupedData?.map((el) => {
@@ -113,7 +111,7 @@ const option = computed(() => ({
         data: xAxisLabels.value,
         markLine: {
             lineStyle: {
-                color: markLineColor.value,
+                color: 'rgba(125,156,188,0.1)',
                 type: 'dashed',
             },
         },
@@ -137,13 +135,9 @@ const option = computed(() => ({
     },
     yAxis: {
         type: 'value',
-        axisLabel: {
-            color: labelColor.value,
-            fontFamily: 'Outfit, sans-serif',
-        },
         splitLine: {
             lineStyle: {
-                color: splitLineColor.value,
+                color: 'rgba(125,156,188,0.2)', // Set desired color here
             },
         },
     },

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

@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVar } from '@vueuse/core';
 import type { Organization } from '@/packages/api/src';
 
 use([
@@ -36,7 +36,7 @@ type ReportingChartDataEntry = {
 const props = defineProps<{
     data: ReportingChartDataEntry | null;
 }>();
-const labelColor = useCssVariable('--color-text-secondary');
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const seriesData = computed(() => {
     return props.data?.map((el) => {

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -19,7 +19,7 @@ import {
     formatHumanReadableDuration,
     getDayJsInstance,
 } from '@/packages/ui/src/utils/time';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVar } from '@vueuse/core';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api, type Organization } from '@/packages/api/src';
@@ -64,9 +64,12 @@ const max = computed(() => {
     }
 });
 
-const backgroundColor = useCssVariable('--theme-color-card-background');
-const itemBackgroundColor = useCssVariable('--color-bg-tertiary');
-const borderColor = useCssVariable('--color-border');
+const backgroundColor = useCssVar('--color-card-background', null, {
+    observe: true,
+});
+const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
+    observe: true,
+});
 
 const option = computed(() => {
     return {
@@ -117,7 +120,7 @@ const option = computed(() => {
                 [],
             itemStyle: {
                 borderRadius: 5,
-                borderColor: borderColor.value,
+                borderColor: 'rgba(255,255,255,0.05)',
                 borderWidth: 1,
             },
             tooltip: {

resources/js/Components/Dashboard/DayOverviewCardChart.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
-import { computed } from 'vue';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { computed, ref } from 'vue';
+import { useCssVar } from '@vueuse/core';
 
 const props = defineProps<{
     history: number[];
 }>();
 
-const accentColor = useCssVariable('--theme-color-chart');
-const markLineColor = useCssVariable('--color-border-secondary');
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
 
 const seriesData = computed(() => props.history.map((el) => {
     return {
@@ -23,7 +22,7 @@ const seriesData = computed(() => props.history.map((el) => {
         },
     };
 }));
-const option = computed(() => ({
+const option = ref({
     grid: {
         top: 0,
         right: 0,
@@ -36,7 +35,7 @@ const option = computed(() => ({
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         markLine: {
             lineStyle: {
-                color: markLineColor.value,
+                color: 'rgba(125,156,188,0.1)',
                 type: 'dashed',
             },
         },
@@ -67,11 +66,11 @@ const option = computed(() => ({
     },
     series: [
         {
-            data: seriesData.value,
+            data: seriesData,
             type: 'bar',
         },
     ],
-}));
+});
 </script>
 
 <template>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVar } from "@vueuse/core";
 import type { Organization } from "@/packages/api/src";
 
 use([
@@ -24,7 +24,7 @@ use([
 ]);
 
 provide(THEME_KEY, 'dark');
-const labelColor = useCssVariable('--color-text-secondary');
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 
 const props = defineProps<{
     weeklyProjectOverview: {

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -18,7 +18,7 @@ import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getWeekStart } from '@/packages/ui/src/utils/settings';
-import { useCssVariable } from '@/utils/useCssVariable';
+import { useCssVar } from '@vueuse/core';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
@@ -60,7 +60,7 @@ const weekdays = computed(() => {
     }
 });
 
-const accentColor = useCssVariable('--theme-color-chart');
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
@@ -176,8 +176,10 @@ const seriesData = computed(() => {
     });
 });
 
-const markLineColor = useCssVariable('--color-border-secondary');
-const labelColor = useCssVariable('--color-text-secondary');
+const markLineColor = useCssVar('--color-border-secondary', null, {
+    observe: true,
+});
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 const option = computed(() => {
     return {
         tooltip: {
@@ -213,10 +215,6 @@ const option = computed(() => {
         },
         yAxis: {
             type: 'value',
-            axisLabel: {
-                color: labelColor.value,
-                fontFamily: 'Outfit, sans-serif',
-            },
             splitLine: {
                 lineStyle: {
                     color: markLineColor.value,

resources/js/Components/ui/calendar/CalendarDateInput.vue

@@ -6,8 +6,8 @@ import {
 } from '@/Components/ui/popover';
 import { Button } from '@/Components/ui/button';
 import { Calendar } from '@/Components/ui/calendar';
-import { CalendarIcon, XIcon } from 'lucide-vue-next';
-import { formatDate } from '@/packages/ui/src/utils/time';
+import { CalendarIcon } from 'lucide-vue-next';
+import { formatDateLocalized } from '@/packages/ui/src/utils/time';
 import { parseDate } from '@internationalized/date';
 import { computed, inject, type ComputedRef } from 'vue';
 import { type Organization } from '@/packages/api/src';
@@ -17,10 +17,6 @@ const emit = defineEmits<{
     blur: [];
 }>();
 
-defineProps<{
-    clearable?: boolean;
-}>();
-
 const handleChange = (date: string) => {
     model.value = date;
 };
@@ -29,11 +25,6 @@ const handleBlur = () => {
     emit('blur');
 };
 
-const handleClear = (event: Event) => {
-    event.stopPropagation();
-    model.value = null;
-};
-
 const date = computed(() => {
     return model.value ? parseDate(model.value) : undefined;
 });
@@ -53,17 +44,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 ]"
             >
                 <CalendarIcon class="mr-2 h-4 w-4" />
-                <span class="flex-1">
-                    {{ model ? formatDate(model, organization?.date_format) : 'Pick a date' }}
-                </span>
-                <button
-                    v-if="clearable && model"
-                    class="ml-2 hover:bg-muted rounded p-1 transition-colors"
-                    type="button"
-                    @click="handleClear"
-                >
-                    <XIcon class="h-4 w-4" />
-                </button>
+                {{ model ? formatDateLocalized(model, organization?.date_format) : 'Pick a date' }}
             </Button>
         </PopoverTrigger>
         <PopoverContent class="w-auto p-0">

resources/js/packages/api/src/openapi.json.client.ts

@@ -67,7 +67,6 @@ const InvoiceResource = z
         status: z.string(),
         date: z.string(),
         due_at: z.string(),
-        paid_date: z.string(),
         created_at: z.union([z.string(), z.null()]),
         updated_at: z.union([z.string(), z.null()]),
     })
@@ -77,7 +76,7 @@ const InvoiceDiscountType = z.enum(['percentage', 'fixed']);
 const InvoiceStoreRequest = z
     .object({
         due_at: z.union([z.string(), z.null()]).optional(),
-        paid_date: z.union([z.string(), z.null()]).optional(),
+        paid_at: z.union([z.string(), z.null()]).optional(),
         seller_name: z.string(),
         seller_vatin: z.union([z.string(), z.null()]).optional(),
         seller_address_line_1: z.union([z.string(), z.null()]).optional(),
@@ -103,13 +102,8 @@ const InvoiceStoreRequest = z
         billing_period_end: z.union([z.string(), z.null()]).optional(),
         reference: z.string(),
         currency: z.string(),
-        tax_rate: z.number().int().gte(0).lte(2147483647).optional(),
-        discount_amount: z
-            .number()
-            .int()
-            .gte(0)
-            .lte(9223372036854776000)
-            .optional(),
+        tax_rate: z.number().int().optional(),
+        discount_amount: z.number().int().optional(),
         discount_type: InvoiceDiscountType.optional(),
         footer: z.union([z.string(), z.null()]).optional(),
         notes: z.union([z.string(), z.null()]).optional(),
@@ -121,12 +115,8 @@ const InvoiceStoreRequest = z
                     .object({
                         name: z.string(),
                         description: z.union([z.string(), z.null()]).optional(),
-                        unit_price: z
-                            .number()
-                            .int()
-                            .gte(0)
-                            .lte(9223372036854776000),
-                        quantity: z.number().gte(0).lte(99999999),
+                        unit_price: z.number().int().gte(0).lte(99999999),
+                        quantity: z.number().gte(0),
                     })
                     .passthrough()
             )
@@ -171,7 +161,7 @@ const DetailedInvoiceResource = z
         buyer_address_country: z.string(),
         buyer_phone: z.string(),
         buyer_email: z.string(),
-        paid_date: z.string(),
+        paid_at: z.union([z.string(), z.null()]),
         due_at: z.string(),
         discount_type: z.string(),
         discount_amount: z.number().int(),
@@ -195,7 +185,7 @@ const InvoiceUpdateRequest = z
     .object({
         status: InvoiceStatus,
         due_at: z.union([z.string(), z.null()]),
-        paid_date: z.union([z.string(), z.null()]),
+        paid_at: z.union([z.string(), z.null()]),
         seller_name: z.string(),
         seller_vatin: z.union([z.string(), z.null()]),
         seller_address_line_1: z.union([z.string(), z.null()]),
@@ -221,8 +211,8 @@ const InvoiceUpdateRequest = z
         billing_period_end: z.union([z.string(), z.null()]),
         reference: z.string(),
         currency: z.string(),
-        tax_rate: z.number().int().gte(0).lte(2147483647),
-        discount_amount: z.number().int().gte(0).lte(9223372036854776000),
+        tax_rate: z.number().int(),
+        discount_amount: z.number().int(),
         discount_type: InvoiceDiscountType,
         footer: z.union([z.string(), z.null()]),
         notes: z.union([z.string(), z.null()]),
@@ -234,12 +224,8 @@ const InvoiceUpdateRequest = z
                     id: z.union([z.string(), z.null()]).optional(),
                     name: z.string(),
                     description: z.union([z.string(), z.null()]).optional(),
-                    unit_price: z
-                        .number()
-                        .int()
-                        .gte(0)
-                        .lte(9223372036854776000),
-                    quantity: z.number().gte(0).lte(99999999),
+                    unit_price: z.number().int().gte(0).lte(99999999),
+                    quantity: z.number().gte(0),
                 })
                 .passthrough()
         ),

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

@@ -154,13 +154,13 @@ 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('hidden lg:block 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]')"
                             @click="expanded = !expanded">
                             {{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
                         </button>
                     </div>
                     <button
-                        class="text-text-primary min-w-[90px] px-2.5 py-1.5 bg-transparent text-right 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"
+                        class="text-text-primary min-w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
                         @click="expanded = !expanded">
                         {{
                             formatHumanReadableDuration(
@@ -173,7 +173,7 @@ function onSelectChange(checked: boolean) {
 
                     <TimeTrackerStartStop
                         :active="!!(timeEntry.start && !timeEntry.end)"
-                        class="opacity-20 flex group-hover:opacity-100 focus-visible:opacity-100"
+                        class="opacity-20 hidden sm:flex group-hover:opacity-100 focus-visible:opacity-100"
                         @changed="
                             onStartStopClick(timeEntry)
                         "></TimeTrackerStartStop>

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

@@ -144,6 +144,7 @@ function onSelectChange(checked : boolean) {
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <TimeEntryRangeSelector
+                            class="hidden lg:block"
                             :start="timeEntry.start"
                             :end="timeEntry.end"
                             :show-date
@@ -159,7 +160,7 @@ function onSelectChange(checked : boolean) {
                         "></TimeEntryRowDurationInput>
                     <TimeTrackerStartStop
                         :active="!!(timeEntry.start && !timeEntry.end)"
-                        class="opacity-20 flex focus-visible:opacity-100 group-hover:opacity-100"
+                        class="opacity-20 hidden sm:flex focus-visible:opacity-100 group-hover:opacity-100"
                         @changed="onStartStopClick"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="

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

@@ -82,7 +82,7 @@ function selectInput(event: Event) {
         v-model="currentTime"
         data-testid="time_entry_duration_input"
         name="Duration"
-        class="text-text-primary w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
+        class="text-text-primary w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
         @focus="selectInput"
         @keydown.tab="open = false"
         @blur="updateTimerAndStartLiveTimerUpdate"

resources/js/packages/ui/src/utils/time.ts

@@ -160,29 +160,12 @@ export function formatWeek(date: string | null): string {
  * @param date - date in the format of 'YYYY-MM-DD'
  */
 export function formatHumanReadableDate(date: string) {
-    const dateObj = dayjs(date);
-    const today = dayjs();
-    
-    if (dateObj.isToday()) {
+    if (dayjs(date).isToday()) {
         return 'Today';
-    } else if (dateObj.isYesterday()) {
+    } else if (dayjs(date).isYesterday()) {
         return 'Yesterday';
     }
-    
-    // Calculate difference in days
-    const diffInDays = today.diff(dateObj, 'day');
-    
-    if (diffInDays > 0 && diffInDays <= 30) {
-        // For dates in the past (2-30 days ago)
-        return `${diffInDays} ${diffInDays === 1 ? 'day' : 'days'} ago`;
-    } else if (diffInDays < 0 && diffInDays >= -30) {
-        // For dates in the future (within 30 days)
-        const futureDays = Math.abs(diffInDays);
-        return `In ${futureDays} ${futureDays === 1 ? 'day' : 'days'}`;
-    }
-    
-    // For dates older than 30 days, show the actual date
-    return dateObj.format('MMM D, YYYY');
+    return dayjs(date).fromNow();
 }
 
 export function formatWeekday(date: string) {

resources/js/utils/theme.ts

@@ -3,6 +3,13 @@ import { computed, watch } from "vue";
 
 type themeOption = "system" | "light" | "dark";
 const themeSetting = useStorage<themeOption>("theme", "system");
+// reload page when themeSettingChanges
+watch(
+    themeSetting,
+    () => {
+        location.reload();
+    }
+)
 const preferredColor = usePreferredColorScheme();
 const theme = computed(() => {
     if(themeSetting.value === "system"){

resources/js/utils/useCssVariable.ts

@@ -1,49 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-export function useCssVariable(variableName: string) {
-  const value = ref('')
-  let observer: MutationObserver | null = null
-  let mediaQuery: MediaQueryList | null = null
-  
-  const updateValue = () => {
-    const computedStyle = getComputedStyle(document.documentElement)
-    const cssValue = computedStyle.getPropertyValue(variableName).trim()
-    value.value = cssValue
-  }
-  
-  onMounted(() => {
-    // Initialize with current value
-    updateValue()
-    
-    // Watch for class changes on document.documentElement (where theme classes are applied)
-    observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          updateValue()
-        }
-      })
-    })
-    
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    })
-    
-    // Also watch for system color scheme changes
-    if (window.matchMedia) {
-      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-      mediaQuery.addEventListener('change', updateValue)
-    }
-  })
-  
-  onUnmounted(() => {
-    if (observer) {
-      observer.disconnect()
-    }
-    if (mediaQuery) {
-      mediaQuery.removeEventListener('change', updateValue)
-    }
-  })
-  
-  return value
-}