This commit is contained in:
2026-06-23 10:26:28 +05:30
parent 39c4e1b390
commit de2b5a808f
3 changed files with 175 additions and 55 deletions

View File

@@ -58,6 +58,7 @@ export const AuditSession: React.FC = () => {
const [activeKeyFlash, setActiveKeyFlash] = useState<string | null>(null);
const [isNotesFocused, setIsNotesFocused] = useState(false);
const [showCompletionModal, setShowCompletionModal] = useState(false);
const [isShortcutsDialogOpen, setIsShortcutsDialogOpen] = useState(false);
const location = useLocation();
const {
@@ -630,7 +631,7 @@ export const AuditSession: React.FC = () => {
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<Typography sx={{ fontWeight: 'bold', fontSize: '0.9rem' }}>{user?.username || user?.email}</Typography>
<Button size="small" sx={{ color: '#94a3b8', border: '1px solid #334155', textTransform: 'none', borderRadius: 2 }}>? Shortcuts</Button>
<Button size="small" onClick={() => setIsShortcutsDialogOpen(true)} sx={{ color: '#94a3b8', border: '1px solid #334155', textTransform: 'none', borderRadius: 2 }}>? Shortcuts</Button>
</Box>
</Box>
@@ -1105,9 +1106,60 @@ export const AuditSession: React.FC = () => {
)}
</Box>
{/* Keyboard Shortcuts Dialog */}
<Dialog
open={isShortcutsDialogOpen}
onClose={() => setIsShortcutsDialogOpen(false)}
sx={{ zIndex: 10000 }}
slotProps={{ paper: { sx: { bgcolor: '#0f172a', color: '#f8fafc', border: '1px solid #1e293b', minWidth: 420 } } }}
>
<DialogTitle sx={{ fontWeight: 'bold', pb: 1, borderBottom: '1px solid #1e293b' }}>
Keyboard Shortcuts
</DialogTitle>
<DialogContent sx={{ pt: 2 }}>
{[
{ section: 'Classification' },
{ key: 'A', desc: 'Mark as Anomaly' },
{ key: 'S', desc: 'Mark as Safe (Not an Anomaly)' },
{ section: 'Category Selection' },
{ key: '1 0', desc: 'Select category (0 = category 10)' },
{ section: 'Plant sub-categories (Anomaly → Category 1)' },
{ key: '1', desc: 'In Grown' },
{ key: '2', desc: 'Out Grown' },
{ section: 'Not-an-Anomaly sub-categories (Safe → Category 1)' },
{ key: '1', desc: 'Comparison Error' },
{ key: '2', desc: 'Low Light' },
{ key: '3', desc: 'Far Asset' },
{ key: '4', desc: 'No Detection' },
{ key: '5', desc: 'Image Mismatch' },
{ section: 'Navigation' },
{ key: '→', desc: 'Next item' },
{ key: '←', desc: 'Previous item' },
{ key: 'Tab', desc: 'Skip current item' },
{ key: 'Enter', desc: 'Save & Next (or Skip if no category)' },
].map((row, i) =>
'section' in row ? (
<Typography key={i} variant="caption" sx={{ display: 'block', color: '#3b82f6', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: 0.8, mt: i === 0 ? 0 : 2, mb: 0.5 }}>
{row.section}
</Typography>
) : (
<Box key={i} sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 0.5 }}>
<Chip label={row.key} size="small" sx={{ minWidth: 52, fontWeight: 'bold', bgcolor: '#1e293b', color: '#e2e8f0', border: '1px solid #334155', borderRadius: 1, fontSize: '0.75rem' }} />
<Typography variant="body2" sx={{ color: '#94a3b8' }}>{row.desc}</Typography>
</Box>
)
)}
</DialogContent>
<DialogActions sx={{ borderTop: '1px solid #1e293b', px: 3, py: 1.5 }}>
<Button onClick={() => setIsShortcutsDialogOpen(false)} sx={{ color: '#94a3b8', textTransform: 'none', fontWeight: 'bold' }}>
Close
</Button>
</DialogActions>
</Dialog>
{/* Session Completion In-place Modal */}
<Dialog
open={showCompletionModal}
<Dialog
open={showCompletionModal}
onClose={() => setShowCompletionModal(false)}
sx={{ zIndex: 10000 }}
slotProps={{