From 2a0d7c2ff2606ae0cb37133deb044ad3597d618f Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Mon, 15 Dec 2025 19:06:07 -0500
Subject: [PATCH] implemented expandable LOA details

---
 ui/src/components/loa/loaList.vue | 125 ++++++++++++++++++++----------
 1 file changed, 84 insertions(+), 41 deletions(-)

diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index 2a911a8..edc28c1 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -15,7 +15,7 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Ellipsis } from "lucide-vue-next";
+import { ChevronDown, ChevronUp, Ellipsis, X } from "lucide-vue-next";
 import { cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa";
 import { onMounted, ref, computed } from "vue";
 import { LOARequest } from "@shared/types/loa";
@@ -104,6 +104,9 @@ async function commitExtend() {
     isExtending.value = false;
     await loadLOAs();
 }
+
+const expanded = ref<number | null>(null);
+const hoverID = ref<number | null>(null);
 </script>
 
 <template>
@@ -139,51 +142,91 @@ async function commitExtend() {
                         <TableHead>Type</TableHead>
                         <TableHead>Start</TableHead>
                         <TableHead>End</TableHead>
-                        <TableHead class="w-[500px]">Reason</TableHead>
+                        <!-- <TableHead class="w-[500px]">Reason</TableHead> -->
                         <TableHead>Posted on</TableHead>
                         <TableHead>Status</TableHead>
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    <TableRow v-for="post in LOAList" :key="post.id" class="hover:bg-muted/50">
-                        <TableCell class="font-medium">
-                            <MemberCard :member-id="post.member_id"></MemberCard>
-                        </TableCell>
-                        <TableCell>{{ post.type_name }}</TableCell>
-                        <TableCell>{{ formatDate(post.start_date) }}</TableCell>
-                        <TableCell>{{ post.extended_till ? formatDate(post.extended_till) : formatDate(post.end_date) }}
-                        </TableCell>
-                        <TableCell>{{ post.reason }}</TableCell>
-                        <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
-                        <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) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
-                            <Badge v-else class="bg-gray-400">Ended</Badge>
-                        </TableCell>
-                        <TableCell @click.stop="" class="text-right">
-                            <DropdownMenu>
-                                <DropdownMenuTrigger class="cursor-pointer">
-                                    <Ellipsis></Ellipsis>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                    <DropdownMenuItem v-if="!post.closed && props.adminMode"
-                                        @click="isExtending = true; targetLOA = post">
-                                        Extend
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
-                                        @click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ? 'Cancel' :
-                                        'End' }}
-                                    </DropdownMenuItem>
-                                    <!-- Fallback: no actions available -->
-                                    <p v-if="post.closed || (!props.adminMode && post.closed)"
-                                        class="p-2 text-center text-sm">
-                                        No actions
-                                    </p>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </TableCell>
-                    </TableRow>
+                    <template v-for="post in LOAList" :key="post.id">
+                        <TableRow class="hover:bg-muted/50 cursor-pointer" @click="expanded = post.id"
+                            @mouseenter="hoverID = post.id" @mouseleave="hoverID = null" :class="{
+                                'border-b-0': expanded === post.id,
+                                'bg-muted/50': hoverID === post.id
+                            }">
+                            <TableCell class="font-medium">
+                                <MemberCard :member-id="post.member_id"></MemberCard>
+                            </TableCell>
+                            <TableCell>{{ post.type_name }}</TableCell>
+                            <TableCell>{{ formatDate(post.start_date) }}</TableCell>
+                            <TableCell>{{ post.extended_till ? formatDate(post.extended_till) :
+                                formatDate(post.end_date) }}
+                            </TableCell>
+                            <!-- <TableCell>{{ post.reason }}</TableCell> -->
+                            <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
+                            <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) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
+                                <Badge v-else class="bg-gray-400">Ended</Badge>
+                            </TableCell>
+                            <TableCell @click.stop="" class="text-right">
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger class="cursor-pointer">
+                                        <Button variant="ghost">
+                                            <Ellipsis class="size-6"></Ellipsis>
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent>
+                                        <DropdownMenuItem v-if="!post.closed && props.adminMode"
+                                            @click="isExtending = true; targetLOA = post">
+                                            Extend
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
+                                            @click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
+                                                'Cancel' :
+                                                'End' }}
+                                        </DropdownMenuItem>
+                                        <!-- Fallback: no actions available -->
+                                        <p v-if="post.closed || (!props.adminMode && post.closed)"
+                                            class="p-2 text-center text-sm">
+                                            No actions
+                                        </p>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            </TableCell>
+                            <TableCell>
+                                <Button v-if="expanded === post.id" @click.stop="expanded = null" variant="ghost">
+                                    <ChevronUp class="size-6" />
+                                </Button>
+                                <Button v-else @click.stop="expanded = post.id" variant="ghost">
+                                    <ChevronDown class="size-6" />
+                                </Button>
+                            </TableCell>
+                        </TableRow>
+                        <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="flex-1">
+                                            <!-- Title -->
+                                            <p class="text-md font-semibold text-foreground">
+                                                Reason
+                                            </p>
+
+                                            <!-- Content -->
+                                            <p
+                                                class="mt-1 text-md whitespace-pre-wrap leading-relaxed text-muted-foreground">
+                                                {{ post.reason }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </TableCell>
+                        </TableRow>
+
+                    </template>
                 </TableBody>
             </Table>
         </div>