From 8f397131d47bdd94b8a2169c848282db5bad6fed Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 17 Dec 2025 09:57:46 -0500
Subject: [PATCH 1/5] fixed weird behaviour on datepickers when a date is
 selected

---
 ui/src/components/loa/loaForm.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 44eeb1c..43771b3 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -237,8 +237,7 @@ const filteredMembers = computed(() => {
                                     </PopoverTrigger>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-                                            :model-value="field.value
-                                                ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
+
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             layout="month-and-year" :min-value="today(getLocalTimeZone())" />
                                     </PopoverContent>
@@ -265,7 +264,7 @@ const filteredMembers = computed(() => {
                                     </PopoverTrigger>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-                                            :model-value="field.value ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
+                                            
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             :default-placeholder="defaultPlaceholder" :min-value="minEndDate"
                                             :max-value="maxEndDate" layout="month-and-year">

From 6f3ab2da737ca56629cb2f816b016ebe532562ba Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 17 Dec 2025 10:03:46 -0500
Subject: [PATCH 2/5] disabled datepickers until Type selected

---
 ui/src/components/loa/loaForm.vue | 60 ++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 43771b3..50bc08e 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -226,18 +226,28 @@ const filteredMembers = computed(() => {
                             <FieldContent>
                                 <FieldLabel>Start Date</FieldLabel>
                                 <Popover>
-                                    <PopoverTrigger as-child>
-                                        <Button variant="outline" :class="cn(
-                                            'w-full justify-start text-left font-normal',
-                                            !field.value && 'text-muted-foreground',
-                                        )">
-                                            <CalendarIcon class="mr-2 h-4 w-4" />
-                                            {{ field.value ? df.format(field.value) : "Pick a date" }}
-                                        </Button>
-                                    </PopoverTrigger>
+                                    <div class="relative inline-flex items-center group">
+                                        <PopoverTrigger as-child>
+                                            <Button :disabled="!values.type" variant="outline" :class="cn(
+                                                'w-full justify-start text-left font-normal',
+                                                !field.value && 'text-muted-foreground',
+                                            )">
+                                                <CalendarIcon class="mr-2 h-4 w-4" />
+                                                {{ field.value ? df.format(field.value) : "Pick a date" }}
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <!-- Tooltip bubble -->
+                                        <div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
+                                                    whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
+                                                    text-popover-foreground shadow-md border border-border
+                                                    opacity-0 translate-y-1
+                                                    group-hover:opacity-100 group-hover:translate-y-0
+                                                    transition-opacity transition-transform duration-150">
+                                            Select an LOA type first
+                                        </div>
+                                    </div>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             layout="month-and-year" :min-value="today(getLocalTimeZone())" />
                                     </PopoverContent>
@@ -253,18 +263,28 @@ const filteredMembers = computed(() => {
                             <FieldContent>
                                 <FieldLabel>End Date</FieldLabel>
                                 <Popover>
-                                    <PopoverTrigger as-child>
-                                        <Button variant="outline" :class="cn(
-                                            'w-full justify-start text-left font-normal',
-                                            !field.value && 'text-muted-foreground',
-                                        )">
-                                            <CalendarIcon class="mr-2 h-4 w-4" />
-                                            {{ field.value ? df.format(field.value) : "Pick a date" }}
-                                        </Button>
-                                    </PopoverTrigger>
+                                    <div class="relative inline-flex items-center group">
+                                        <PopoverTrigger as-child>
+                                            <Button :disabled="!values.type" variant="outline" :class="cn(
+                                                'w-full justify-start text-left font-normal',
+                                                !field.value && 'text-muted-foreground',
+                                            )">
+                                                <CalendarIcon class="mr-2 h-4 w-4" />
+                                                {{ field.value ? df.format(field.value) : "Pick a date" }}
+                                            </Button>
+                                        </PopoverTrigger>
+                                        <!-- Tooltip bubble -->
+                                        <div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
+                                                    whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
+                                                    text-popover-foreground shadow-md border border-border
+                                                    opacity-0 translate-y-1
+                                                    group-hover:opacity-100 group-hover:translate-y-0
+                                                    transition-opacity transition-transform duration-150">
+                                            Select an LOA type first
+                                        </div>
+                                    </div>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-                                            
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
                                             :default-placeholder="defaultPlaceholder" :min-value="minEndDate"
                                             :max-value="maxEndDate" layout="month-and-year">

From a95dbe2623e3402e29f32356df6a8cbc78d67da0 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 17 Dec 2025 10:06:56 -0500
Subject: [PATCH 3/5] Added backwards restriction check if end date is selected
 first

---
 ui/src/components/loa/loaForm.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 50bc08e..73a96bd 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -134,6 +134,15 @@ const maxEndDate = computed(() => {
     }
 })
 
+const minStartDate = computed(() => {
+    if (values.type && values.end_date) {
+        let endDateObj = new Date(values.end_date.getTime() - values.type.max_length_days * 24 * 60 * 60 * 1000);
+        return new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
+    } else {
+        return null;
+    }
+})
+
 const memberFilter = ref('');
 
 const filteredMembers = computed(() => {
@@ -249,7 +258,7 @@ const filteredMembers = computed(() => {
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
-                                            layout="month-and-year" :min-value="today(getLocalTimeZone())" />
+                                            layout="month-and-year" :min-value="minStartDate || today(getLocalTimeZone())" />
                                     </PopoverContent>
                                 </Popover>
                                 <div class="h-4">

From 18d08af91da2106f9bbfb78095084f5b9f3fd11b Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 17 Dec 2025 10:09:21 -0500
Subject: [PATCH 4/5] smartified start date restrictions to never go earlier
 than today

---
 ui/src/components/loa/loaForm.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index 73a96bd..f17e033 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -137,7 +137,9 @@ const maxEndDate = computed(() => {
 const minStartDate = computed(() => {
     if (values.type && values.end_date) {
         let endDateObj = new Date(values.end_date.getTime() - values.type.max_length_days * 24 * 60 * 60 * 1000);
-        return new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
+        let td = today(getLocalTimeZone());
+        let start = new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
+        return td.compare(start) > 0 ? td : start;
     } else {
         return null;
     }
@@ -258,7 +260,8 @@ const filteredMembers = computed(() => {
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
-                                            layout="month-and-year" :min-value="minStartDate || today(getLocalTimeZone())" />
+                                            layout="month-and-year"
+                                            :min-value="minStartDate || today(getLocalTimeZone())" />
                                     </PopoverContent>
                                 </Popover>
                                 <div class="h-4">

From 1cf6b35021264e76f255efdd92a3e39222705ad6 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 17 Dec 2025 10:13:39 -0500
Subject: [PATCH 5/5] prevented end date from ever going earlier than today

---
 ui/src/components/loa/loaForm.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index f17e033..c6f71c2 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -121,7 +121,7 @@ const minEndDate = computed(() => {
     if (values.start_date) {
         return new CalendarDate(values.start_date.getFullYear(), values.start_date.getMonth() + 1, values.start_date.getDate())
     } else {
-        return null;
+        return today(getLocalTimeZone());
     }
 })
 
@@ -141,7 +141,7 @@ const minStartDate = computed(() => {
         let start = new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
         return td.compare(start) > 0 ? td : start;
     } else {
-        return null;
+        return today(getLocalTimeZone());
     }
 })