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] 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>