feature: Add support for managing API keys

1 files changed, 49 insertions, 0 deletions

diff --git a/packages/web/app/dashboard/settings/components/ApiKeySettings.tsx b/packages/web/app/dashboard/settings/components/ApiKeySettings.tsx
new file mode 100644
index 00000000..1598f25f
--- /dev/null
+++ b/packages/web/app/dashboard/settings/components/ApiKeySettings.tsx
@@ -0,0 +1,49 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { api } from "@/server/api/client";
+import DeleteApiKey from "./DeleteApiKey";
+import AddApiKey from "./AddApiKey";
+
+export default async function ApiKeys() {
+  const keys = await api.apiKeys.list();
+  return (
+    <div className="pt-4">
+      <span className="text-xl">API Keys</span>
+      <hr className="my-2" />
+      <div className="flex flex-col space-y-3">
+        <div className="flex flex-1 justify-end">
+          <AddApiKey />
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Key</TableHead>
+              <TableHead>Created At</TableHead>
+              <TableHead>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>
+                  <DeleteApiKey name={k.name} id={k.id} />
+                </TableCell>
+              </TableRow>
+            ))}
+            <TableRow></TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}