feat: revue de code, doc CODE_REVIEW, forfaits 2026, traduction LLM, providers avec modèle

Made-with: Cursor

frontend/src/app/dashboard/api-keys/ApiKeyTable.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check, Trash2 } from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import type { ApiKey } from './types';
+
+interface ApiKeyTableProps {
+  keys: ApiKey[];
+  onRevoke: (key: ApiKey) => void;
+  isRevoking: boolean;
+}
+
+function formatDate(dateString: string | null): string {
+  if (!dateString) return 'Never';
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins} min ago`;
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export function ApiKeyTable({ keys, onRevoke, isRevoking }: ApiKeyTableProps) {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const copyPrefix = (keyId: string, prefix: string) => {
+    navigator.clipboard.writeText(prefix);
+    setCopiedId(keyId);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  if (keys.length === 0) {
+    return (
+      <div className="rounded-lg border border-border p-8 text-center">
+        <p className="text-muted-foreground">No API keys yet. Generate your first key to get started.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg border border-border">
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-transparent">
+            <TableHead className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Name
+            </TableHead>
+            <TableHead className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Key
+            </TableHead>
+            <TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground md:table-cell">
+              Created
+            </TableHead>
+            <TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground lg:table-cell">
+              Last Used
+            </TableHead>
+            <TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground lg:table-cell">
+              Uses
+            </TableHead>
+            <TableHead className="text-right text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Actions
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {keys.map((key) => (
+            <TableRow key={key.id}>
+              <TableCell className="font-medium">
+                {key.name}
+              </TableCell>
+              <TableCell>
+                <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+                  {key.key_prefix}...
+                </code>
+              </TableCell>
+              <TableCell className="hidden text-muted-foreground md:table-cell">
+                {formatDate(key.created_at)}
+              </TableCell>
+              <TableCell className="hidden text-muted-foreground lg:table-cell">
+                {formatDate(key.last_used_at)}
+              </TableCell>
+              <TableCell className="hidden lg:table-cell">
+                <Badge variant="secondary" className="text-xs">
+                  {key.usage_count}
+                </Badge>
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center justify-end gap-1">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={() => copyPrefix(key.id, key.key_prefix)}
+                        aria-label="Copy key prefix"
+                      >
+                        {copiedId === key.id ? (
+                          <Check className="size-3.5 text-accent" />
+                        ) : (
+                          <Copy className="size-3.5 text-muted-foreground" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {copiedId === key.id ? 'Copied!' : 'Copy prefix'}
+                    </TooltipContent>
+                  </Tooltip>
+
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={() => onRevoke(key)}
+                        disabled={isRevoking}
+                        aria-label="Revoke key"
+                      >
+                        <Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Revoke</TooltipContent>
+                  </Tooltip>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}