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 ++++++++++++++++---------
 1 file changed, 24 insertions(+), 13 deletions(-)

(limited to 'apps/web/components/settings/ApiKeySettings.tsx')

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>
-- 
cgit v1.2.3-70-g09d2