From 87bdd30a19479a3ffd9492bc3ef3e3dbf686e058 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sun, 22 Mar 2026 01:12:07 -0400
Subject: [PATCH] Built mobile display for LOA List

---
 ui/src/components/loa/loaList.vue             | 143 +++++++++++++++---
 ui/src/components/ui/dialog/DialogContent.vue |   2 +-
 2 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/loa/loaList.vue b/ui/src/components/loa/loaList.vue
index 524dcbe..139d464 100644
--- a/ui/src/components/loa/loaList.vue
+++ b/ui/src/components/loa/loaList.vue
@@ -141,29 +141,125 @@
 <template>
     <div>
         <Dialog :open="isExtending" @update:open="(val) => isExtending = val">
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
+            <DialogContent class="w-[95vw] max-w-[95vw] p-4 sm:max-w-fit sm:p-6">
+                <DialogHeader class="gap-1 pr-12 text-left">
+                    <DialogTitle class="text-base leading-tight sm:text-lg">Extend Leave of Absence</DialogTitle>
+                    <DialogDescription class="truncate text-xs text-muted-foreground sm:text-sm">
+                        {{ targetLOA?.name }}
+                    </DialogDescription>
                 </DialogHeader>
-                <div class="flex gap-5">
-                    <Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
+                <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-5">
+                    <Calendar v-model="extendTo"
+                        class="mx-auto w-min rounded-md border shadow-sm sm:mx-0"
+                        layout="month-and-year"
                         :min-value="toCalendarDate(targetEnd)"
                         :max-value="props.adminMode ? toCalendarDate(targetEnd).add({ years: 1 }) : toCalendarDate(targetEnd).add({ months: 1 })" />
-                    <div class="flex flex-col w-full gap-3 px-2">
-                        <p>Quick Options</p>
-                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
+                    <div class="flex w-full flex-col gap-2 sm:gap-3">
+                        <p class="text-sm font-medium text-muted-foreground">Quick Options</p>
+                        <Button class="w-full" variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
                             Week</Button>
-                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
+                        <Button class="w-full" variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
                             Month</Button>
                     </div>
                 </div>
-                <div class="flex justify-end gap-4">
-                    <Button variant="outline" @click="isExtending = false">Cancel</Button>
-                    <Button @click="commitExtend">Extend</Button>
+                <div class="flex flex-row justify-end gap-2 pt-2 sm:gap-4 sm:pt-0">
+                    <Button class="flex-1 sm:flex-none" variant="outline" @click="isExtending = false">Cancel</Button>
+                    <Button class="flex-1 sm:flex-none" @click="commitExtend">Extend</Button>
                 </div>
             </DialogContent>
         </Dialog>
         <div class="max-w-7xl w-full mx-auto">
+            <div class="space-y-3 md:hidden">
+                <template v-for="post in LOAList" :key="`mobile-${post.id}`">
+                    <div class="rounded-lg border bg-card p-2.5 shadow-sm">
+                        <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+                            <div class="min-w-0 overflow-hidden">
+                                <div class="max-w-[70vw] overflow-hidden whitespace-nowrap">
+                                    <MemberCard :member-id="post.member_id"></MemberCard>
+                                </div>
+                            </div>
+                            <Badge v-if="loaStatus(post) === 'Upcoming'" class="shrink-0 bg-blue-400">Upcoming</Badge>
+                            <Badge v-else-if="loaStatus(post) === 'Active'" class="shrink-0 bg-green-500">Active</Badge>
+                            <Badge v-else-if="loaStatus(post) === 'Extended'" class="shrink-0 bg-green-500">Extended</Badge>
+                            <Badge v-else-if="loaStatus(post) === 'Overdue'" class="shrink-0 bg-yellow-400">Overdue</Badge>
+                            <Badge v-else class="shrink-0 bg-gray-400">Ended</Badge>
+                        </div>
+
+                        <div class="mt-1 grid grid-cols-2 gap-x-4 gap-y-1">
+                            <div>
+                                <p class="text-[11px] uppercase tracking-wide text-muted-foreground/90">Start</p>
+                                <p class="text-sm font-semibold text-foreground">{{ formatDate(post.start_date) }}</p>
+                            </div>
+                            <div class="text-right">
+                                <p class="text-[11px] uppercase tracking-wide text-muted-foreground/90">End</p>
+                                <p class="text-sm font-semibold text-foreground">{{ post.extended_till ? formatDate(post.extended_till) : formatDate(post.end_date) }}</p>
+                            </div>
+                        </div>
+
+                        <div class="mt-1 flex items-center justify-end gap-1">
+                            <Button variant="ghost" class="h-8 px-2 text-xs text-muted-foreground" @click="expanded = expanded === post.id ? null : post.id">
+                                <span class="mr-1">Details</span>
+                                <ChevronUp v-if="expanded === post.id" class="size-4" />
+                                <ChevronDown v-else class="size-4" />
+                            </Button>
+
+                            <DropdownMenu>
+                                <DropdownMenuTrigger class="cursor-pointer">
+                                    <Button variant="ghost" size="icon" class="size-8 text-muted-foreground">
+                                        <Ellipsis class="size-5"></Ellipsis>
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem v-if="!post.closed"
+                                        :disabled="post.extended_till !== null && !props.adminMode"
+                                        @click="isExtending = true; targetLOA = post">
+                                        {{ (post.extended_till !== null && !props.adminMode) ? 'Extend (Already Extended)' : 'Extend' }}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
+                                        @click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
+                                            'Cancel' :
+                                            'End' }}
+                                    </DropdownMenuItem>
+                                    <p v-if="post.closed || (!props.adminMode && post.closed)"
+                                        class="p-2 text-center text-sm">
+                                        No actions
+                                    </p>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+
+                        <div v-if="expanded === post.id" class="mt-2 space-y-2.5 border-t pt-2 text-sm">
+                            <div class="space-y-1.5">
+                                <div class="flex items-center justify-between gap-3">
+                                    <span class="text-muted-foreground/90">Type</span>
+                                    <span class="text-right font-semibold text-foreground">{{ post.type_name }}</span>
+                                </div>
+                                <div class="flex items-center justify-between gap-3">
+                                    <span class="text-muted-foreground/90">Posted on</span>
+                                    <span class="text-right font-semibold text-foreground">{{ formatDate(post.filed_date) }}</span>
+                                </div>
+                                <div class="flex items-center justify-between gap-3">
+                                    <span class="text-muted-foreground/90">Original end</span>
+                                    <span class="text-right font-semibold text-foreground">{{ formatDate(post.end_date) }}</span>
+                                </div>
+                                <div class="flex items-center justify-between gap-3">
+                                    <span class="text-muted-foreground/90">Extended to</span>
+                                    <span class="text-right font-semibold text-foreground">{{ post.extended_till ? formatDate(post.extended_till) : 'N/A' }}</span>
+                                </div>
+                            </div>
+
+                            <div>
+                                <h4 class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/90">Reason</h4>
+                                <p class="mt-1 whitespace-pre-wrap text-sm leading-relaxed text-foreground/90">
+                                    {{ post.reason || 'No reason provided.' }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+
+            <div class="hidden overflow-x-auto md:block">
             <Table>
                 <TableHeader>
                     <TableRow>
@@ -242,7 +338,7 @@
                                 <div class="w-full p-4 mb-6 space-y-4">
 
                                     <!-- Dates -->
-                                    <div class="grid grid-cols-3 gap-4 text-sm">
+                                    <div class="grid grid-cols-1 gap-4 text-sm lg:grid-cols-3">
                                         <div>
                                             <p class="text-muted-foreground">Start</p>
                                             <p class="font-medium">
@@ -266,16 +362,12 @@
                                     </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="space-y-2 border-t pt-3">
+                                        <h4 class="text-sm font-semibold text-foreground">
+                                            Reason
+                                        </h4>
 
-                                        <div
-                                            class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
+                                        <div class="text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
                                             {{ post.reason || 'No reason provided.' }}
                                         </div>
                                     </div>
@@ -287,8 +379,9 @@
                     </template>
                 </TableBody>
             </Table>
-            <div class="mt-5 flex justify-between">
-                <div></div>
+            </div>
+            <div class="mt-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                <div class="hidden md:block"></div>
                 <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
                     :default-page="2" :page="pageNum" @update:page="setPage">
                     <PaginationContent v-slot="{ items }">
@@ -303,7 +396,7 @@
                         <PaginationNext />
                     </PaginationContent>
                 </Pagination>
-                <div class="flex items-center gap-3 text-sm">
+                <div class="flex items-center justify-end gap-3 text-sm">
                     <p class="text-muted-foreground text-nowrap">Per page:</p>
 
                     <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
diff --git a/ui/src/components/ui/dialog/DialogContent.vue b/ui/src/components/ui/dialog/DialogContent.vue
index 9062dd2..7f667b9 100644
--- a/ui/src/components/ui/dialog/DialogContent.vue
+++ b/ui/src/components/ui/dialog/DialogContent.vue
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <slot />
 
       <DialogClose
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-3.5 right-3.5 inline-flex h-9 w-9 items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none sm:top-4 sm:right-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
       >
         <X />
         <span class="sr-only">Close</span>