From cdf8f57eb5d0f438a18c13529f6bbcec37d588dc Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sat, 17 Jan 2026 10:25:06 -0500
Subject: [PATCH 1/2] Added support for extended visuals

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

diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index 1785564..c33a1d4 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -75,15 +75,17 @@ function formatDate(date: Date): string {
     });
 }
 
-function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
+function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Extended" | "Overdue" | "Closed" {
     if (loa.closed) return "Closed";
 
     const now = new Date();
     const start = new Date(loa.start_date);
     const end = new Date(loa.end_date);
+    const extension = new Date(loa.extended_till);
 
     if (now < start) return "Upcoming";
-    if (now >= start && now <= end) return "Active";
+    if (now >= start && (now <= end)) return "Active";
+    if (now >= start && (now <= extension)) return "Extended";
     if (now > loa.extended_till || end) return "Overdue";
 
     return "Overdue"; // fallback
@@ -191,6 +193,7 @@ function setPage(pagenum: number) {
                             <TableCell>
                                 <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge>
                                 <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
+                                <Badge v-else-if="loaStatus(post) === 'Extended'" class="bg-green-500">Extended</Badge>
                                 <Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
                                 <Badge v-else class="bg-gray-400">Ended</Badge>
                             </TableCell>

From afbb771061a5be29c0e65c9e79d4e05475740295 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sat, 17 Jan 2026 10:25:18 -0500
Subject: [PATCH 2/2] improved full details panel

---
 ui/src/components/loa/loaList.vue | 54 +++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index c33a1d4..3a43837 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -235,27 +235,47 @@ function setPage(pagenum: number) {
                         <TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
                             @mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
                             <TableCell :colspan="8" class="p-0">
-                                <div class="w-full p-3 mb-6 space-y-3">
-                                    <div class="flex justify-between items-start gap-4">
-                                        <div class="space-y-3 w-full">
-
-                                            <!-- Header -->
-                                            <div class="flex items-center gap-2">
-                                                <h4 class="text-sm font-semibold text-foreground">
-                                                    Reason
-                                                </h4>
-                                                <Separator class="flex-1" />
-                                            </div>
-
-                                            <!-- Content -->
-                                            <div
-                                                class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground w-full">
-                                                {{ post.reason || 'No reason provided.' }}
-                                            </div>
+                                <div class="w-full p-4 mb-6 space-y-4">
 
+                                    <!-- Dates -->
+                                    <div class="grid grid-cols-3 gap-4 text-sm">
+                                        <div>
+                                            <p class="text-muted-foreground">Start</p>
+                                            <p class="font-medium">
+                                                {{ formatDate(post.start_date) }}
+                                            </p>
                                         </div>
 
+                                        <div>
+                                            <p class="text-muted-foreground">Original end</p>
+                                            <p class="font-medium">
+                                                {{ formatDate(post.end_date) }}
+                                            </p>
+                                        </div>
+
+                                        <div class="">
+                                            <p class="text-muted-foreground">Extended to</p>
+                                            <p class="font-medium text-foreground">
+                                                {{post.extended_till ? formatDate(post.extended_till) : 'N/A' }}
+                                            </p>
+                                        </div>
                                     </div>
+
+                                    <!-- Reason -->
+                                    <div class="space-y-2">
+                                        <div class="flex items-center gap-2">
+                                            <h4 class="text-sm font-semibold text-foreground">
+                                                Reason
+                                            </h4>
+                                            <Separator class="flex-1" />
+                                        </div>
+
+                                        <div
+                                            class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
+                                            {{ post.reason || 'No reason provided.' }}
+                                        </div>
+                                    </div>
+
                                 </div>
                             </TableCell>
                         </TableRow>