livrare lot 2

backend/admin-dashboard/src/components/ProvidersManagement/tabs/ApiKeysTab.tsx

@@ -0,0 +1,65 @@
+/**
+ * API Keys tab — list of stored keys with usage telemetry.
+ *
+ * Backend redacts the key value to a prefix; frontend never sees the full key
+ * after creation. Edit dialog requires re-entering it if rotation is needed.
+ */
+import React from 'react';
+import {
+  Box, TableContainer, Table, TableHead, TableBody, TableRow, TableCell,
+  Button, Chip, IconButton, Switch,
+} from '@mui/material';
+import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import type { ApiKey } from '../ProvidersManagement.types';
+
+interface Props {
+  apiKeys: ApiKey[];
+  hasProviders: boolean;
+  onAdd: () => void;
+  onEdit: (k: ApiKey) => void;
+  onDelete: (k: ApiKey) => void;
+  onToggleActive: (k: ApiKey) => void;
+}
+
+export const ApiKeysTab: React.FC<Props> = ({ apiKeys, hasProviders, onAdd, onEdit, onDelete, onToggleActive }) => (
+  <>
+    <Box display="flex" justifyContent="flex-end" mb={2}>
+      <Button variant="contained" startIcon={<AddIcon />} onClick={onAdd} disabled={!hasProviders}>
+        Add API Key
+      </Button>
+    </Box>
+    <TableContainer>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Key Name</TableCell>
+            <TableCell>Provider</TableCell>
+            <TableCell>Prefix</TableCell>
+            <TableCell>Usage</TableCell>
+            <TableCell>Last Used</TableCell>
+            <TableCell>Active</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {apiKeys.map((k) => (
+            <TableRow key={k.api_key_id} hover>
+              <TableCell><strong>{k.key_name}</strong></TableCell>
+              <TableCell><Chip label={k.provider_code} size="small" /></TableCell>
+              <TableCell><code>{k.key_prefix}...</code></TableCell>
+              <TableCell>{k.usage_count} calls</TableCell>
+              <TableCell>{k.last_used_at ? new Date(k.last_used_at).toLocaleDateString() : 'Never'}</TableCell>
+              <TableCell>
+                <Switch checked={k.is_active} onChange={() => onToggleActive(k)} size="small" />
+              </TableCell>
+              <TableCell>
+                <IconButton size="small" onClick={() => onEdit(k)}><EditIcon /></IconButton>
+                <IconButton size="small" onClick={() => onDelete(k)} color="error"><DeleteIcon /></IconButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </>
+);