livrare lot 2

backend/admin-dashboard/src/components/ModerationSettings/RolesCard.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Card, CardContent, Typography, Box, Switch, Table, TableBody, TableCell, TableHead, TableRow, Chip } from '@mui/material';
+import type { ModerationRole } from './api';
+import { updateModerationRole } from './api';
+
+interface Props {
+  roles: ModerationRole[];
+  onChanged: () => void;
+  onError: (msg: string) => void;
+}
+
+const TOGGLE_FIELDS: Array<keyof ModerationRole> = ['can_resolve', 'can_escalate', 'can_force_gold_brain', 'is_active'];
+
+export const RolesCard: React.FC<Props> = ({ roles, onChanged, onError }) => {
+  const toggle = async (code: string, field: keyof ModerationRole, value: boolean) => {
+    try {
+      const res = await updateModerationRole(code, { [field]: value } as Partial<ModerationRole>);
+      if (res.success) onChanged();
+      else onError(res.error ?? 'Update failed');
+    } catch (e) {
+      onError((e as Error).message);
+    }
+  };
+
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Typography variant="h6" fontWeight={700}>Roles & Permissions</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Maps Keycloak realm roles to HIL actions. Toggle changes auto-sync to Redis.
+        </Typography>
+
+        <Table size="small" sx={{ mt: 2 }}>
+          <TableHead>
+            <TableRow>
+              <TableCell>Role</TableCell>
+              <TableCell align="center">can_resolve</TableCell>
+              <TableCell align="center">can_escalate</TableCell>
+              <TableCell align="center">can_force_gold_brain</TableCell>
+              <TableCell align="center">active</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {roles.map((role) => (
+              <TableRow key={role.role_code} hover>
+                <TableCell>
+                  <Box>
+                    <Chip label={role.role_code} size="small" color="primary" variant="outlined" />
+                    <Typography variant="caption" display="block" color="text.secondary" mt={0.5}>
+                      {role.role_label}
+                    </Typography>
+                  </Box>
+                </TableCell>
+                {TOGGLE_FIELDS.map((field) => (
+                  <TableCell key={field} align="center">
+                    <Switch
+                      checked={!!role[field]}
+                      onChange={(e) => toggle(role.role_code, field, e.target.checked)}
+                      size="small"
+                    />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};