Add clearable DatePicker and report tests

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -9,7 +9,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/packages/ui/src/popover';
 import { Calendar } from '..';
 import { Button } from '@/packages/ui/src/Buttons';
-import { CalendarIcon } from 'lucide-vue-next';
+import { CalendarIcon, XIcon } from 'lucide-vue-next';
 import { parseDate, type DateValue } from '@internationalized/date';
 import type { Organization } from '@/packages/api/src';
 
@@ -17,6 +17,7 @@ const props = defineProps<{
     tabindex?: string;
     class?: string;
     size?: 'sm' | 'default';
+    clearable?: boolean;
 }>();
 
 // This has to be a localized timestamp, not UTC
@@ -60,6 +61,12 @@ function handleDateSelect(newDate: DateValue | undefined) {
     emit('changed', newValue);
     open.value = false;
 }
+
+function handleClear(event: Event) {
+    event.stopPropagation();
+    model.value = null;
+    emit('changed', null);
+}
 </script>
 
 <template>
@@ -72,7 +79,16 @@ function handleDateSelect(newDate: DateValue | undefined) {
                     :tabindex="tabindex"
                     :class="['w-full px-2 gap-1.5', props.class]">
                     <CalendarIcon class="!size-3 text-muted-foreground" />
-                    <span>{{ displayDate || 'Pick a date' }}</span>
+                    <span :class="{ 'flex-1': clearable }">{{
+                        displayDate || 'Pick a date'
+                    }}</span>
+                    <span
+                        v-if="clearable && model"
+                        role="button"
+                        class="hover:bg-muted rounded p-0.5 transition-colors"
+                        @click.stop="handleClear($event)">
+                        <XIcon class="size-3" />
+                    </span>
                 </Button>
             </PopoverTrigger>
             <PopoverContent class="w-auto p-0" align="center">