strapi-plugin-keycloak-realm-users 1.0.0

package/admin/src/pages/AuditPage/index.jsx

@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import {
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Typography,
+  Badge,
+  Flex,
+  Box,
+  EmptyStateLayout,
+  Loader,
+  SingleSelect,
+  SingleSelectOption,
+  Field,
+} from '@strapi/design-system';
+import { Layouts } from '@strapi/strapi/admin';
+import { ArrowLeft, File } from '@strapi/icons';
+
+import { getTrad } from '../../constants';
+import useAuditLogs from '../../hooks/useAuditLogs';
+import useRealms from '../../hooks/useRealms';
+import pluginId from '../../pluginId';
+
+const ACTION_COLORS = {
+  CREATE_USER: 'success100',
+  UPDATE_USER: 'primary100',
+  DELETE_USER: 'danger100',
+  RESET_PASSWORD: 'warning100',
+  ASSIGN_ROLE: 'success100',
+  REMOVE_ROLE: 'warning100',
+  ENABLE_USER: 'success100',
+  DISABLE_USER: 'warning100',
+  SEND_VERIFY_EMAIL: 'primary100',
+  SEND_RESET_PASSWORD_EMAIL: 'primary100',
+  BULK_IMPORT: 'success100',
+};
+
+const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleString();
+};
+
+const AuditPage = () => {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const { realms } = useRealms();
+  const [selectedRealm, setSelectedRealm] = useState('');
+  const [selectedAction, setSelectedAction] = useState('');
+
+  const { logs, isLoading, fetchLogs } = useAuditLogs();
+
+  const handleRealmChange = (value) => {
+    setSelectedRealm(value);
+    fetchLogs({ realmName: value || undefined, action: selectedAction || undefined });
+  };
+
+  const handleActionChange = (value) => {
+    setSelectedAction(value);
+    fetchLogs({ realmName: selectedRealm || undefined, action: value || undefined });
+  };
+
+  return (
+    <Layouts.Root>
+      <Layouts.Header
+        title={formatMessage({ id: getTrad('audit.title'), defaultMessage: 'Audit Log' })}
+        subtitle={formatMessage({
+          id: getTrad('audit.subtitle'),
+          defaultMessage: 'Track user management actions',
+        })}
+        navigationAction={
+          <Button
+            startIcon={<ArrowLeft />}
+            variant="ghost"
+            onClick={() => navigate(`/settings/${pluginId}`)}
+          >
+            {formatMessage({ id: getTrad('common.back'), defaultMessage: 'Back' })}
+          </Button>
+        }
+      />
+
+      <Layouts.Content>
+        <Box marginBottom={4}>
+          <Flex gap={4}>
+            <Box width="200px">
+              <Field.Root>
+                <Field.Label>Filter by Realm</Field.Label>
+                <SingleSelect
+                  value={selectedRealm}
+                  onChange={handleRealmChange}
+                  placeholder="All realms"
+                >
+                  <SingleSelectOption value="">All realms</SingleSelectOption>
+                  {realms.map((realm) => (
+                    <SingleSelectOption key={realm.documentId} value={realm.name}>
+                      {realm.displayName}
+                    </SingleSelectOption>
+                  ))}
+                </SingleSelect>
+              </Field.Root>
+            </Box>
+            <Box width="200px">
+              <Field.Root>
+                <Field.Label>Filter by Action</Field.Label>
+                <SingleSelect
+                  value={selectedAction}
+                  onChange={handleActionChange}
+                  placeholder="All actions"
+                >
+                  <SingleSelectOption value="">All actions</SingleSelectOption>
+                  <SingleSelectOption value="CREATE_USER">Create User</SingleSelectOption>
+                  <SingleSelectOption value="UPDATE_USER">Update User</SingleSelectOption>
+                  <SingleSelectOption value="DELETE_USER">Delete User</SingleSelectOption>
+                  <SingleSelectOption value="RESET_PASSWORD">Reset Password</SingleSelectOption>
+                  <SingleSelectOption value="ASSIGN_ROLE">Assign Role</SingleSelectOption>
+                  <SingleSelectOption value="REMOVE_ROLE">Remove Role</SingleSelectOption>
+                  <SingleSelectOption value="ENABLE_USER">Enable User</SingleSelectOption>
+                  <SingleSelectOption value="DISABLE_USER">Disable User</SingleSelectOption>
+                  <SingleSelectOption value="BULK_IMPORT">Bulk Import</SingleSelectOption>
+                </SingleSelect>
+              </Field.Root>
+            </Box>
+          </Flex>
+        </Box>
+
+        {isLoading ? (
+          <Flex justifyContent="center" padding={8}>
+            <Loader />
+          </Flex>
+        ) : logs.length === 0 ? (
+          <EmptyStateLayout
+            icon={<File width="10rem" height="10rem" />}
+            content="No audit logs found"
+          />
+        ) : (
+          <Table colCount={6} rowCount={logs.length + 1}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('audit.date'), defaultMessage: 'Date' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('audit.action'), defaultMessage: 'Action' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('audit.realm'), defaultMessage: 'Realm' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('audit.user'), defaultMessage: 'Keycloak User' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">
+                    {formatMessage({ id: getTrad('audit.performedBy'), defaultMessage: 'Performed By' })}
+                  </Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Details</Typography>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {logs.map((log) => (
+                <Tr key={log.documentId}>
+                  <Td>
+                    <Typography textColor="neutral600">{formatDate(log.createdAt)}</Typography>
+                  </Td>
+                  <Td>
+                    <Badge backgroundColor={ACTION_COLORS[log.action] || 'neutral150'}>
+                      {log.action.replace(/_/g, ' ')}
+                    </Badge>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">
+                      {log.realmDisplayName || log.realmName}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">
+                      {log.keycloakUsername || log.keycloakUserId || '-'}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral600">{log.performedByEmail || '-'}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral500" ellipsis>
+                      {log.details ? JSON.stringify(log.details).substring(0, 50) : '-'}
+                    </Typography>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        )}
+      </Layouts.Content>
+    </Layouts.Root>
+  );
+};
+
+export default AuditPage;