From 7b5f63285a7952a57fcfc6bc349869752f689b82 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 17 Jan 2026 23:33:52 +0000
Subject: feat: track api key usage dates

---
 apps/web/components/settings/ApiKeySettings.tsx | 37 ++++++++++++++++---------
 apps/web/components/settings/DeleteApiKey.tsx   | 10 +++----
 2 files changed, 28 insertions(+), 19 deletions(-)

(limited to 'apps/web/components')

diff --git a/apps/web/components/settings/ApiKeySettings.tsx b/apps/web/components/settings/ApiKeySettings.tsx
index bc4b71c5..fa8b4927 100644
--- a/apps/web/components/settings/ApiKeySettings.tsx
+++ b/apps/web/components/settings/ApiKeySettings.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/table";
 import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
+import { formatDistanceToNow } from "date-fns";
 
 import AddApiKey from "./AddApiKey";
 import DeleteApiKey from "./DeleteApiKey";
@@ -32,23 +33,33 @@ export default async function ApiKeys() {
               <TableHead>{t("common.name")}</TableHead>
               <TableHead>{t("common.key")}</TableHead>
               <TableHead>{t("common.created_at")}</TableHead>
+              <TableHead>{t("common.last_used")}</TableHead>
               <TableHead>{t("common.action")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {keys.keys.map((k) => (
-              <TableRow key={k.id}>
-                <TableCell>{k.name}</TableCell>
-                <TableCell>**_{k.keyId}_**</TableCell>
-                <TableCell>{k.createdAt.toLocaleString()}</TableCell>
-                <TableCell>
-                  <div className="flex items-center gap-2">
-                    <RegenerateApiKey name={k.name} id={k.id} />
-                    <DeleteApiKey name={k.name} id={k.id} />
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
+            {keys.keys.map((key) => {
+              return (
+                <TableRow key={key.id}>
+                  <TableCell>{key.name}</TableCell>
+                  <TableCell>**_{key.keyId}_**</TableCell>
+                  <TableCell>
+                    {formatDistanceToNow(key.createdAt, { addSuffix: true })}
+                  </TableCell>
+                  <TableCell>
+                    {key.lastUsedAt
+                      ? formatDistanceToNow(key.lastUsedAt, { addSuffix: true })
+                      : "—"}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <RegenerateApiKey name={key.name} id={key.id} />
+                      <DeleteApiKey name={key.name} id={key.id} />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
             <TableRow></TableRow>
           </TableBody>
         </Table>
diff --git a/apps/web/components/settings/DeleteApiKey.tsx b/apps/web/components/settings/DeleteApiKey.tsx
index 392f3122..b26b40e6 100644
--- a/apps/web/components/settings/DeleteApiKey.tsx
+++ b/apps/web/components/settings/DeleteApiKey.tsx
@@ -4,10 +4,10 @@ import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { Button } from "@/components/ui/button";
-import { toast } from "@/components/ui/sonner";
 import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
 import { Trash } from "lucide-react";
+import { toast } from "sonner";
 
 export default function DeleteApiKey({
   name,
@@ -20,9 +20,7 @@ export default function DeleteApiKey({
   const router = useRouter();
   const mutator = api.apiKeys.revoke.useMutation({
     onSuccess: () => {
-      toast({
-        description: "Key was successfully deleted",
-      });
+      toast.success("Key was successfully deleted");
       router.refresh();
     },
   });
@@ -49,8 +47,8 @@ export default function DeleteApiKey({
         </ActionButton>
       )}
     >
-      <Button variant="outline">
-        <Trash size={18} color="red" />
+      <Button variant="ghost" title={t("actions.delete")}>
+        <Trash size={18} />
       </Button>
     </ActionConfirmingDialog>
   );
-- 
cgit v1.2.3-70-g09d2