Spaces:
Sleeping
Sleeping
| /** | |
| * AuditLogTable component - Display detailed audit log with pagination | |
| */ | |
| import React, { useState } from 'react'; | |
| import { | |
| Box, | |
| Typography, | |
| Paper, | |
| Table, | |
| TableBody, | |
| TableCell, | |
| TableContainer, | |
| TableHead, | |
| TableRow, | |
| TablePagination, | |
| TextField, | |
| InputAdornment, | |
| Chip, | |
| LinearProgress, | |
| } from '@mui/material'; | |
| import { | |
| Search as SearchIcon, | |
| } from '@mui/icons-material'; | |
| interface AuditLogEntry { | |
| rowNumber: number; | |
| column: string; | |
| oldValue: string; | |
| newValue: string; | |
| actionType: string; | |
| agent: string; | |
| confidence: number; | |
| timestamp: string; | |
| } | |
| interface AuditLogTableProps { | |
| entries: AuditLogEntry[]; | |
| loading?: boolean; | |
| } | |
| const AuditLogTable: React.FC<AuditLogTableProps> = ({ entries, loading = false }) => { | |
| const [page, setPage] = useState(0); | |
| const [rowsPerPage, setRowsPerPage] = useState(50); | |
| const [searchTerm, setSearchTerm] = useState(''); | |
| const handleChangePage = (_event: unknown, newPage: number) => { | |
| setPage(newPage); | |
| }; | |
| const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => { | |
| setRowsPerPage(parseInt(event.target.value, 10)); | |
| setPage(0); | |
| }; | |
| const filteredEntries = entries.filter((entry) => { | |
| const searchLower = searchTerm.toLowerCase(); | |
| return ( | |
| entry.column.toLowerCase().includes(searchLower) || | |
| entry.actionType.toLowerCase().includes(searchLower) || | |
| entry.agent.toLowerCase().includes(searchLower) | |
| ); | |
| }); | |
| const paginatedEntries = filteredEntries.slice( | |
| page * rowsPerPage, | |
| page * rowsPerPage + rowsPerPage | |
| ); | |
| const getConfidenceColor = (confidence: number): 'success' | 'warning' | 'error' => { | |
| if (confidence >= 0.8) return 'success'; | |
| if (confidence >= 0.5) return 'warning'; | |
| return 'error'; | |
| }; | |
| const formatTimestamp = (timestamp: string): string => { | |
| const date = new Date(timestamp); | |
| return date.toLocaleString(); | |
| }; | |
| const formatValue = (value: string): string => { | |
| if (!value || value === 'null' || value === '') { | |
| return '-'; | |
| } | |
| return value.length > 50 ? `${value.substring(0, 50)}...` : value; | |
| }; | |
| return ( | |
| <Paper elevation={2} sx={{ p: 3 }}> | |
| <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}> | |
| <Typography variant="h6" sx={{ fontWeight: 600 }}> | |
| Audit Log | |
| </Typography> | |
| <TextField | |
| size="small" | |
| placeholder="Search by column, action, or agent..." | |
| value={searchTerm} | |
| onChange={(e) => setSearchTerm(e.target.value)} | |
| slotProps={{ | |
| input: { | |
| startAdornment: ( | |
| <InputAdornment position="start"> | |
| <SearchIcon fontSize="small" /> | |
| </InputAdornment> | |
| ), | |
| }, | |
| }} | |
| sx={{ width: 300 }} | |
| /> | |
| </Box> | |
| {loading ? ( | |
| <LinearProgress /> | |
| ) : ( | |
| <> | |
| <TableContainer> | |
| <Table size="small" stickyHeader> | |
| <TableHead> | |
| <TableRow> | |
| <TableCell sx={{ fontWeight: 600 }}>Row #</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>Column</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>Old Value</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>New Value</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>Action Type</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>Agent</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>Confidence</TableCell> | |
| <TableCell sx={{ fontWeight: 600 }}>Timestamp</TableCell> | |
| </TableRow> | |
| </TableHead> | |
| <TableBody> | |
| {paginatedEntries.length > 0 ? ( | |
| paginatedEntries.map((entry, index) => ( | |
| <TableRow key={index} hover> | |
| <TableCell>{entry.rowNumber}</TableCell> | |
| <TableCell> | |
| <Chip label={entry.column} size="small" variant="outlined" /> | |
| </TableCell> | |
| <TableCell sx={{ fontFamily: 'monospace', fontSize: '0.75rem' }}> | |
| {formatValue(entry.oldValue)} | |
| </TableCell> | |
| <TableCell sx={{ fontFamily: 'monospace', fontSize: '0.75rem' }}> | |
| {formatValue(entry.newValue)} | |
| </TableCell> | |
| <TableCell> | |
| <Chip | |
| label={entry.actionType.replace(/_/g, ' ')} | |
| size="small" | |
| color="primary" | |
| variant="outlined" | |
| /> | |
| </TableCell> | |
| <TableCell>{entry.agent}</TableCell> | |
| <TableCell> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> | |
| <LinearProgress | |
| variant="determinate" | |
| value={entry.confidence * 100} | |
| color={getConfidenceColor(entry.confidence)} | |
| sx={{ width: 50, height: 6, borderRadius: 3 }} | |
| /> | |
| <Typography variant="caption"> | |
| {(entry.confidence * 100).toFixed(0)}% | |
| </Typography> | |
| </Box> | |
| </TableCell> | |
| <TableCell> | |
| <Typography variant="caption" color="textSecondary"> | |
| {formatTimestamp(entry.timestamp)} | |
| </Typography> | |
| </TableCell> | |
| </TableRow> | |
| )) | |
| ) : ( | |
| <TableRow> | |
| <TableCell colSpan={8} align="center"> | |
| <Typography variant="body2" color="textSecondary" sx={{ py: 3 }}> | |
| No audit log entries found | |
| </Typography> | |
| </TableCell> | |
| </TableRow> | |
| )} | |
| </TableBody> | |
| </Table> | |
| </TableContainer> | |
| <TablePagination | |
| component="div" | |
| count={filteredEntries.length} | |
| page={page} | |
| onPageChange={handleChangePage} | |
| rowsPerPage={rowsPerPage} | |
| onRowsPerPageChange={handleChangeRowsPerPage} | |
| rowsPerPageOptions={[25, 50, 100]} | |
| /> | |
| </> | |
| )} | |
| </Paper> | |
| ); | |
| }; | |
| export default AuditLogTable; | |