improved full details panel

This commit is contained in:
2026-01-17 10:25:18 -05:00
parent cdf8f57eb5
commit afbb771061

View File

@@ -235,11 +235,34 @@ function setPage(pagenum: number) {
<TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id" <TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
@mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }"> @mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
<TableCell :colspan="8" class="p-0"> <TableCell :colspan="8" class="p-0">
<div class="w-full p-3 mb-6 space-y-3"> <div class="w-full p-4 mb-6 space-y-4">
<div class="flex justify-between items-start gap-4">
<div class="space-y-3 w-full">
<!-- Header --> <!-- 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"> <div class="flex items-center gap-2">
<h4 class="text-sm font-semibold text-foreground"> <h4 class="text-sm font-semibold text-foreground">
Reason Reason
@@ -247,16 +270,13 @@ function setPage(pagenum: number) {
<Separator class="flex-1" /> <Separator class="flex-1" />
</div> </div>
<!-- Content -->
<div <div
class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground w-full"> 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.' }} {{ post.reason || 'No reason provided.' }}
</div> </div>
</div> </div>
</div> </div>
</div>
</TableCell> </TableCell>
</TableRow> </TableRow>