chore: display user name and email on table list

app/(protected)/dashboard/records/record-list.tsx

@@ -33,6 +33,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import {
+  ClickableTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -347,17 +348,17 @@ export default function UserRecordsList({ user, action }: RecordListProps) {
                       )}
                     </TableCell>
                     <TableCell className="col-span-1 hidden truncate sm:flex">
-                      <TooltipProvider>
-                        <Tooltip delayDuration={200}>
-                          <TooltipTrigger className="truncate">
-                            {record.user.name ?? record.user.email}
-                          </TooltipTrigger>
-                          <TooltipContent>
+                      <ClickableTooltip
+                        className="cursor-pointer truncate"
+                        content={
+                          <div className="px-2 py-1">
                             <p>{record.user.name}</p>
-                            <p>{record.user.email}</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
+                            <p>{record.user?.email}</p>
+                          </div>
+                        }
+                      >
+                        {record.user.name || record.user.email}
+                      </ClickableTooltip>
                     </TableCell>
                     <TableCell className="col-span-1 hidden justify-center sm:flex">
                       <TimeAgoIntl

app/(protected)/dashboard/urls/url-list.tsx

@@ -49,12 +49,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { ClickableTooltip } from "@/components/ui/tooltip";
 import { UrlStatus } from "@/components/dashboard/status-card";
 import { FormType } from "@/components/forms/record-form";
 import { UrlForm } from "@/components/forms/url-form";
@@ -69,8 +64,6 @@ import QRCodeEditor from "@/components/shared/qr";
 import { TimeAgoIntl } from "@/components/shared/time-ago";
 
 import { UrlExporter } from "./export";
-import Globe from "./globe";
-import LiveLog from "./live-logs";
 import UserUrlMetaInfo from "./meta";
 
 export interface UrlListProps {
@@ -244,7 +237,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
         case "userName":
           return t("Search by username") + "...";
         default:
-          return t("Search") + "...";
+          return "Filter...";
       }
     };
 
@@ -399,16 +392,17 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                   />
                 </TableCell>
                 <TableCell className="col-span-1 hidden truncate sm:flex">
-                  <TooltipProvider>
-                    <Tooltip delayDuration={200}>
-                      <TooltipTrigger className="truncate">
-                        {short.userName ?? "Anonymous"}
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {short.userName ?? "Anonymous"}
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <ClickableTooltip
+                    className="cursor-pointer truncate"
+                    content={
+                      <div className="px-2 py-1">
+                        <p>{short.user?.name}</p>
+                        <p>{short.user?.email}</p>
+                      </div>
+                    }
+                  >
+                    {short.user?.name || short.user?.email}
+                  </ClickableTooltip>
                 </TableCell>
                 <TableCell className="col-span-1 hidden sm:flex">
                   <Switch
@@ -619,16 +613,17 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                 </div>
 
                 <div className="mt-auto flex items-center justify-end gap-1.5 text-xs text-muted-foreground">
-                  <TooltipProvider>
-                    <Tooltip delayDuration={200}>
-                      <TooltipTrigger className="truncate">
-                        {short.userName ?? "Anonymous"}
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        {short.userName ?? "Anonymous"}
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <ClickableTooltip
+                    className="cursor-pointer truncate"
+                    content={
+                      <div className="px-2 py-1">
+                        <p>{short.user?.name}</p>
+                        <p>{short.user?.email}</p>
+                      </div>
+                    }
+                  >
+                    {short.user?.name || short.user?.email}
+                  </ClickableTooltip>
                   <Separator
                     className="h-4/5"
                     orientation="vertical"

lib/dto/short-urls.ts

@@ -18,6 +18,10 @@ export interface ShortUrlFormData {
   password: string;
   createdAt?: Date;
   updatedAt?: Date;
+  user?: {
+    name: string;
+    email: string;
+  };
 }
 
 export interface UserShortUrlInfo extends ShortUrlFormData {
@@ -66,6 +70,14 @@ export async function getUserShortUrls(
       where: option,
       skip: (page - 1) * size,
       take: size,
+      include: {
+        user: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
       orderBy: {
         updatedAt: "desc",
       },