Add Credentials page with CRUD UI

vickyshaw29 · vickyshaw29 · commit 8a59b0b30c77 · 2026-02-27T00:40:00.000+05:30
diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
@@ -14,6 +14,7 @@ const SettingsPage = lazy(() => import("@/pages/settings/SettingsPage"));
 const AlertsPage = lazy(() => import("@/pages/alerts/AlertsPage"));
 const SpendPage = lazy(() => import("@/pages/spend/SpendPage"));
 const OnchainPage = lazy(() => import("@/pages/onchain/OnchainPage"));
+const CredentialsPage = lazy(() => import("@/pages/credentials/CredentialsPage"));
 const LoginPage = lazy(() => import("@/pages/login/LoginPage"));
 
 function PageLoader() {
@@ -97,6 +98,14 @@ export default function App() {
                   </Suspense>
                 }
               />
+              <Route
+                path={ROUTES.CREDENTIALS}
+                element={
+                  <Suspense fallback={<PageLoader />}>
+                    <CredentialsPage />
+                  </Suspense>
+                }
+              />
               <Route
                 path={ROUTES.SETTINGS}
                 element={
diff --git a/dashboard/src/api/endpoints/credentials.ts b/dashboard/src/api/endpoints/credentials.ts
@@ -0,0 +1,21 @@
+import { apiFetch } from "../client";
+import type { CredentialsResponse, CreateCredentialPayload } from "../types";
+
+export function fetchCredentials(): Promise<CredentialsResponse> {
+  return apiFetch<CredentialsResponse>("/credentials");
+}
+
+export function createCredential(
+  payload: CreateCredentialPayload,
+): Promise<{ success: boolean }> {
+  return apiFetch("/credentials", {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteCredential(
+  id: string,
+): Promise<{ success: boolean }> {
+  return apiFetch(`/credentials/${id}`, { method: "DELETE" });
+}
diff --git a/dashboard/src/api/types.ts b/dashboard/src/api/types.ts
@@ -203,6 +203,25 @@ export interface PermitsResponse {
   permits: Permit[];
 }
 
+// --- Credentials ---
+export interface Credential {
+  id: string;
+  service: string;
+  name: string;
+  created_at: string;
+  last_used_at: string | null;
+}
+
+export interface CredentialsResponse {
+  credentials: Credential[];
+}
+
+export interface CreateCredentialPayload {
+  service: string;
+  name: string;
+  api_key: string;
+}
+
 // --- Generic ---
 export interface ApiError {
   error: string;
diff --git a/dashboard/src/components/layout/Shell.tsx b/dashboard/src/components/layout/Shell.tsx
@@ -10,6 +10,7 @@ const routeTitles: Record<string, string> = {
   [ROUTES.ALERTS]: "Alerts",
   [ROUTES.SPEND]: "Spend Analytics",
   [ROUTES.ONCHAIN]: "Onchain Permits",
+  [ROUTES.CREDENTIALS]: "Credentials",
 };
 
 const routeSubtitles: Record<string, string> = {
@@ -18,6 +19,7 @@ const routeSubtitles: Record<string, string> = {
   [ROUTES.ALERTS]: "Monitor and manage security and budget alerts",
   [ROUTES.SPEND]: "Budget tracking and daily spend breakdown",
   [ROUTES.ONCHAIN]: "Contract whitelist, permit history, and signer status",
+  [ROUTES.CREDENTIALS]: "Manage API keys for external services",
 };
 
 export function Shell() {
diff --git a/dashboard/src/components/layout/Sidebar.tsx b/dashboard/src/components/layout/Sidebar.tsx
@@ -34,7 +34,7 @@ interface NavItemData {
 
 const mainNavItems: NavItemData[] = [
   { to: ROUTES.HOME, label: "Dashboard", icon: <LayoutDashboard size={18} /> },
-  { label: "Credentials", icon: <Key size={18} />, disabled: true },
+  { to: ROUTES.CREDENTIALS, label: "Credentials", icon: <Key size={18} /> },
   { label: "Policies", icon: <Sliders size={18} />, disabled: true },
   { label: "Audit Log", icon: <FileText size={18} />, disabled: true },
   { to: ROUTES.SPEND, label: "Spend", icon: <BarChart3 size={18} /> },
diff --git a/dashboard/src/hooks/use-credentials.ts b/dashboard/src/hooks/use-credentials.ts
@@ -0,0 +1,66 @@
+import { useState, useCallback, useMemo } from "react";
+import { useFetch } from "./use-fetch";
+import {
+  fetchCredentials,
+  createCredential,
+  deleteCredential,
+} from "@/api/endpoints/credentials";
+import type { Credential, CreateCredentialPayload } from "@/api/types";
+
+interface UseCredentialsReturn {
+  credentials: Credential[];
+  loading: boolean;
+  error: Error | null;
+  add: (payload: CreateCredentialPayload) => Promise<boolean>;
+  remove: (id: string) => Promise<void>;
+  refetch: () => void;
+}
+
+export function useCredentials(): UseCredentialsReturn {
+  const { data, loading, error, refetch } = useFetch(fetchCredentials);
+
+  const [optimisticRemoved, setOptimisticRemoved] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const credentials = useMemo(() => {
+    if (!data) return [];
+    return data.credentials
+      .filter((c) => !optimisticRemoved.has(c.id))
+      .sort(
+        (a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+      );
+  }, [data, optimisticRemoved]);
+
+  const add = useCallback(
+    async (payload: CreateCredentialPayload): Promise<boolean> => {
+      try {
+        await createCredential(payload);
+        refetch();
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [refetch],
+  );
+
+  const remove = useCallback(
+    async (id: string) => {
+      setOptimisticRemoved((prev) => new Set(prev).add(id));
+      try {
+        await deleteCredential(id);
+      } catch {
+        setOptimisticRemoved((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    },
+    [],
+  );
+
+  return { credentials, loading, error, add, remove, refetch };
+}
diff --git a/dashboard/src/lib/constants.ts b/dashboard/src/lib/constants.ts
@@ -5,6 +5,7 @@ export const ROUTES = {
   ALERTS: "/alerts",
   SPEND: "/spend",
   ONCHAIN: "/onchain",
+  CREDENTIALS: "/credentials",
 } as const;
 
 export const POLLING_INTERVALS = {
diff --git a/dashboard/src/pages/credentials/AddCredentialModal.tsx b/dashboard/src/pages/credentials/AddCredentialModal.tsx
@@ -0,0 +1,149 @@
+import { useState, useCallback, useEffect } from "react";
+import { X } from "lucide-react";
+import { SERVICES, SERVICE_LABELS } from "@/lib/constants";
+import type { CreateCredentialPayload } from "@/api/types";
+
+interface AddCredentialModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (payload: CreateCredentialPayload) => Promise<boolean>;
+}
+
+export function AddCredentialModal({
+  open,
+  onClose,
+  onSubmit,
+}: AddCredentialModalProps) {
+  const [service, setService] = useState<string>(SERVICES[0]);
+  const [name, setName] = useState("");
+  const [apiKey, setApiKey] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  // Reset form when modal opens
+  useEffect(() => {
+    if (open) {
+      setService(SERVICES[0]);
+      setName("");
+      setApiKey("");
+    }
+  }, [open]);
+
+  // Escape key closes modal
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  const canSubmit = name.trim().length > 0 && apiKey.trim().length > 0;
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit || submitting) return;
+      setSubmitting(true);
+      const ok = await onSubmit({
+        service,
+        name: name.trim(),
+        api_key: apiKey.trim(),
+      });
+      setSubmitting(false);
+      if (ok) onClose();
+    },
+    [service, name, apiKey, canSubmit, submitting, onSubmit, onClose],
+  );
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="w-full max-w-md rounded-xl border border-border bg-surface p-6 shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-text">Add Credential</h2>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-text-tertiary transition-colors hover:bg-surface-hover hover:text-text"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="mt-5 space-y-4">
+          {/* Service */}
+          <div>
+            <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.08em] text-text-tertiary">
+              Service
+            </label>
+            <select
+              value={service}
+              onChange={(e) => setService(e.target.value)}
+              className="w-full rounded-lg border border-border bg-surface-input px-3 py-2 text-sm text-text focus:border-brand/50 focus:outline-none focus:ring-1 focus:ring-brand/20"
+            >
+              {SERVICES.map((s) => (
+                <option key={s} value={s}>
+                  {SERVICE_LABELS[s]}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Name */}
+          <div>
+            <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.08em] text-text-tertiary">
+              Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Production API Key"
+              className="w-full rounded-lg border border-border bg-surface-input px-3 py-2 text-sm text-text placeholder:text-text-tertiary/50 focus:border-brand/50 focus:outline-none focus:ring-1 focus:ring-brand/20"
+            />
+          </div>
+
+          {/* API Key */}
+          <div>
+            <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.08em] text-text-tertiary">
+              API Key
+            </label>
+            <input
+              type="password"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder="sk-..."
+              className="w-full rounded-lg border border-border bg-surface-input px-3 py-2 font-mono text-sm text-text placeholder:text-text-tertiary/50 focus:border-brand/50 focus:outline-none focus:ring-1 focus:ring-brand/20"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg px-3 py-1.5 text-sm text-text-tertiary transition-colors hover:bg-surface-hover hover:text-text"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!canSubmit || submitting}
+              className="rounded-lg bg-brand px-4 py-1.5 text-sm font-medium text-white transition-all duration-150 hover:bg-brand-hover disabled:opacity-40"
+            >
+              {submitting ? "Adding..." : "Add Credential"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/pages/credentials/CredentialRow.tsx b/dashboard/src/pages/credentials/CredentialRow.tsx
diff --git a/dashboard/src/pages/credentials/CredentialsPage.tsx b/dashboard/src/pages/credentials/CredentialsPage.tsx
