show date distance for timestamp in case list

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/case-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { format } from "date-fns";
+import { formatDate, formatDistanceToNow } from "date-fns";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
@@ -15,6 +15,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import type { SupportTicketListItem } from "../types/tickets";
 import {
   getTicketStatusBadgeVariant,
@@ -133,7 +134,7 @@ export function SupportsCaseList({
                   linkBox
                   className="hover:bg-accent/50 cursor-pointer"
                 >
-                  <TableCell className="py-6">
+                  <TableCell className="py-5">
                     <Link
                       className="text-foreground font-medium text-sm before:absolute before:inset-0"
                       href={`/team/${team.slug}/~/support/cases/${ticket.id}`}
@@ -142,15 +143,23 @@ export function SupportsCaseList({
                     </Link>
                   </TableCell>
                   <TableCell>
-                    <Badge
-                      variant={getTicketStatusBadgeVariant(ticket.status)}
-                      className="text-sm"
-                    >
+                    <Badge variant={getTicketStatusBadgeVariant(ticket.status)}>
                       {getTicketStatusLabel(ticket.status)}
                     </Badge>
                   </TableCell>
-                  <TableCell className="text-muted-foreground text-sm">
-                    {format(new Date(ticket.updatedAt), "MMM d, yyyy")}
+                  <TableCell>
+                    <ToolTipLabel
+                      label={formatDate(
+                        new Date(ticket.updatedAt),
+                        "MMM d, yyyy 'at' hh:mm a",
+                      )}
+                    >
+                      <div className="text-sm flex items-center gap-2 z-10 relative">
+                        {formatDistanceToNow(new Date(ticket.updatedAt), {
+                          addSuffix: true,
+                        })}
+                      </div>
+                    </ToolTipLabel>
                   </TableCell>
                 </TableRow>
               ))}