Initial commit of react-revamp for Auditor Portal
This commit is contained in:
124
src/pages/activity-feeds/AnomalyTable.tsx
Normal file
124
src/pages/activity-feeds/AnomalyTable.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Slider, Checkbox } from '@mui/material';
|
||||
import { useFeedStore } from '../../store/feedStore';
|
||||
|
||||
export const AnomalyTable: React.FC = () => {
|
||||
const { tabs, selectedTabIndex, updateTab } = useFeedStore();
|
||||
|
||||
if (tabs.length === 0 || selectedTabIndex < 0) {
|
||||
return <Typography sx={{ p: 2 }}>Loading feeds...</Typography>;
|
||||
}
|
||||
|
||||
const activeTab = tabs[selectedTabIndex];
|
||||
const anomalies = activeTab.anomalies || [];
|
||||
|
||||
if (anomalies.length === 0) {
|
||||
return (
|
||||
<Box sx={{ p: 4, textAlign: 'center' }}>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
No anomalies found for the selected criteria.
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const handleRowClick = (index: number) => {
|
||||
updateTab(selectedTabIndex, { selectedAnomalyIndex: index });
|
||||
};
|
||||
|
||||
const getRowColor = (index: number, _asset: string) => {
|
||||
// Dark mode colors for table rows
|
||||
const colors = ['rgba(255, 255, 255, 0.03)', 'rgba(255, 255, 255, 0.0)'];
|
||||
return colors[index % colors.length];
|
||||
};
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper} sx={{ borderRadius: 0, boxShadow: 'none', height: 'calc(100vh - 180px)', bgcolor: 'transparent' }}>
|
||||
<Table stickyHeader size="small" sx={{ minWidth: 1200 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>#ID</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>PLAZA</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>ROAD</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>DATE</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>CHAINAGE</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>LAT/LONG</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>ANOMALY</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>SIDE</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>ANOMALY True/False</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>FEATURES</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>COMMENTS</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>CHECKED</TableCell>
|
||||
<TableCell sx={{ fontWeight: 'bold', bgcolor: 'background.paper', color: 'text.primary', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>AUTO AUDIT</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{anomalies.map((anomaly: any, index: number) => {
|
||||
const isSelected = activeTab.selectedAnomalyIndex === index;
|
||||
const assetName = anomaly?.Asset?.replace(/_/gi, ' ') || 'Unknown Asset';
|
||||
const rowColor = getRowColor(index, assetName);
|
||||
|
||||
// Parse Position
|
||||
let latStr = 'N/A';
|
||||
let longStr = 'E/A';
|
||||
if (anomaly?.Pos) {
|
||||
const match = String(anomaly.Pos).match(/([NS][0-9.]+)([EW][0-9.]+)/i);
|
||||
if (match) {
|
||||
latStr = match[1];
|
||||
longStr = match[2];
|
||||
} else {
|
||||
latStr = anomaly.Pos; // Fallback
|
||||
longStr = '';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={anomaly._id || index}
|
||||
onClick={() => handleRowClick(index)}
|
||||
sx={{
|
||||
bgcolor: isSelected ? 'rgba(59, 130, 246, 0.2)' : rowColor,
|
||||
cursor: 'pointer',
|
||||
'&:hover': { bgcolor: 'rgba(255,255,255,0.08)' },
|
||||
borderLeft: isSelected ? '4px solid #3b82f6' : '4px solid transparent',
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>#{anomaly.id || anomaly._id?.substring(0, 7) || 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.Plaza || 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.road || anomaly.Road || 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.Created_on ? new Date(anomaly.Created_on).toLocaleDateString() : 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.Chainage || 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem' }}>
|
||||
{latStr}<br/>
|
||||
{longStr}
|
||||
</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{assetName}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.Side || 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)', width: 120 }}>
|
||||
<Slider
|
||||
size="small"
|
||||
value={anomaly.Audit_status || anomaly.anomaly_status_slider || 50}
|
||||
step={100}
|
||||
marks
|
||||
min={0}
|
||||
max={100}
|
||||
sx={{ color: '#ff4d4f' }}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.Features || 'N/A'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>{anomaly.Comments || '-'}</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<Checkbox size="small" checked={!!anomaly.IsAudited} />
|
||||
</TableCell>
|
||||
<TableCell sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<Checkbox size="small" checked={!!anomaly.auto_audit} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user