Add ses hook parser to capture all the events

apps/web/src/app/(dashboard)/api-keys/api-list.tsx

@@ -1,5 +1,14 @@
 "use client";
 
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@unsend/ui/src/table";
+import { formatDistanceToNow } from "date-fns";
 import Link from "next/link";
 import { api } from "~/trpc/react";
 
@@ -8,18 +17,35 @@ export default function ApiList() {
 
   return (
     <div className="mt-10">
-      <div className="flex flex-col gap-2">
-        {!apiKeysQuery.isLoading && apiKeysQuery.data?.length ? (
-          apiKeysQuery.data?.map((apiKey) => (
-            <div className="p-2 px-4 border rounded-lg flex justify-between">
-              <p>{apiKey.name}</p>
-              <p>{apiKey.permission}</p>
-              <p>{apiKey.partialToken}</p>
-            </div>
-          ))
-        ) : (
-          <div>No API keys added</div>
-        )}
+      <div className="border rounded-xl">
+        <Table className="">
+          <TableHeader className="">
+            <TableRow className=" bg-muted/30">
+              <TableHead className="rounded-tl-xl">Name</TableHead>
+              <TableHead>Token</TableHead>
+              <TableHead>Permission</TableHead>
+              <TableHead>Last used</TableHead>
+              <TableHead className="rounded-tr-xl">Created at</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {apiKeysQuery.data?.map((apiKey) => (
+              <TableRow key={apiKey.id}>
+                <TableCell>{apiKey.name}</TableCell>
+                <TableCell>{apiKey.partialToken}</TableCell>
+                <TableCell>{apiKey.permission}</TableCell>
+                <TableCell>
+                  {apiKey.lastUsed
+                    ? formatDistanceToNow(apiKey.lastUsed)
+                    : "Never"}
+                </TableCell>
+                <TableCell>
+                  {formatDistanceToNow(apiKey.createdAt, { addSuffix: true })}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
       </div>
     </div>
   );