livrare lot 2

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

@@ -0,0 +1,79 @@
+/**
+ * Assignments tab — maps each component to a primary provider+model with
+ * an optional fallback. Settings column packs temp/max/timeout into one
+ * caption row to keep the table scannable.
+ */
+import React from 'react';
+import {
+  Box, TableContainer, Table, TableHead, TableBody, TableRow, TableCell,
+  Button, Chip, IconButton, Switch, Typography,
+} from '@mui/material';
+import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import type { ComponentAssignment } from '../ProvidersManagement.types';
+
+interface Props {
+  assignments: ComponentAssignment[];
+  hasProvidersAndModels: boolean;
+  onAdd: () => void;
+  onEdit: (a: ComponentAssignment) => void;
+  onDelete: (a: ComponentAssignment) => void;
+  onToggleEnabled: (a: ComponentAssignment) => void;
+}
+
+export const AssignmentsTab: React.FC<Props> = ({ assignments, hasProvidersAndModels, onAdd, onEdit, onDelete, onToggleEnabled }) => (
+  <>
+    <Box display="flex" justifyContent="flex-end" mb={2}>
+      <Button variant="contained" startIcon={<AddIcon />} onClick={onAdd} disabled={!hasProvidersAndModels}>
+        Add Assignment
+      </Button>
+    </Box>
+    <TableContainer>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Component</TableCell>
+            <TableCell>Provider / Model</TableCell>
+            <TableCell>Fallback</TableCell>
+            <TableCell>Settings</TableCell>
+            <TableCell>Enabled</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {assignments.map((a) => (
+            <TableRow key={a.assignment_id} hover>
+              <TableCell>
+                <strong>{a.component_name}</strong>
+                <Typography variant="caption" display="block" color="text.secondary">{a.component_code}</Typography>
+              </TableCell>
+              <TableCell>
+                <Chip label={a.provider_code} size="small" sx={{ mr: 0.5 }} />
+                <Chip label={a.model_code} size="small" variant="outlined" />
+              </TableCell>
+              <TableCell>
+                {a.fallback_provider_code ? (
+                  <>
+                    <Chip label={a.fallback_provider_code} size="small" sx={{ mr: 0.5 }} />
+                    <Chip label={a.fallback_model_code} size="small" variant="outlined" />
+                  </>
+                ) : '-'}
+              </TableCell>
+              <TableCell>
+                <Typography variant="caption">
+                  temp: {a.temperature} | max: {a.max_tokens} | timeout: {a.timeout_ms}ms
+                </Typography>
+              </TableCell>
+              <TableCell>
+                <Switch checked={a.is_enabled} onChange={() => onToggleEnabled(a)} size="small" />
+              </TableCell>
+              <TableCell>
+                <IconButton size="small" onClick={() => onEdit(a)}><EditIcon /></IconButton>
+                <IconButton size="small" onClick={() => onDelete(a)} color="error"><DeleteIcon /></IconButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </>
+);