mvp-1

2026-06-23 10:26:28 +05:30
parent 39c4e1b390
commit de2b5a808f
3 changed files with 175 additions and 55 deletions
--- a/src/api/activityFeedsService.ts
+++ b/src/api/activityFeedsService.ts
@@ -6,9 +6,9 @@ export const activityFeedsService = {
    return response;
  },

-  getHistoryDates: async (isRectificationEnabled: boolean) => {
+  getHistoryDates: async (isRectificationEnabled: boolean, siteIds?: string) => {
    const response = await axiosClient.get('/api/audit/anomaly/get_history_dates', {
-      params: { isRectificationEnabled }
+      params: { isRectificationEnabled, siteIds: siteIds || '' }
    });
    return response;
  },
--- a/src/components/common/TopFilterBar.tsx
+++ b/src/components/common/TopFilterBar.tsx
@@ -112,22 +112,46 @@ export const TopFilterBar: React.FC = () => {
    return `Asset: ${id}`;
  };

-  const [historyDates, setHistoryDates] = useState<any[]>([]);
+  const [historyDates, setHistoryDates] = useState<any[]>([]);           // normal history (isRectificationEnabled=false)
+  const [rectHistoryDates, setRectHistoryDates] = useState<any[]>([]);   // rectification history (isRectificationEnabled=true)
  const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
  const [loadingHistory, setLoadingHistory] = useState(false);
+  const [loadingRectHistory, setLoadingRectHistory] = useState(false);
  const [isHistoryDialogOpen, setIsHistoryDialogOpen] = useState(false);
  const [selectedHistoryDate, setSelectedHistoryDate] = useState('2026-06-12');
+  const [historyDropdownValue, setHistoryDropdownValue] = useState('');
+
+  // Fetch normal history dates (isRectificationEnabled=false) for the History dropdown
+  // Rectification history (isRectificationEnabled=true) is fetched separately by the RECTIFICATION HISTORY button
+  useEffect(() => {
+    if (!selectedSite || selectedSite.site_id === 'All Sites') return;
+    const fetchDates = async () => {
+      setLoadingHistory(true);
+      try {
+        const siteIds = String(selectedSite.site_id);
+        const dates: any = await activityFeedsService.getHistoryDates(false, siteIds);
+        setHistoryDates(Array.isArray(dates) ? dates : (dates?.responseData || []));
+      } catch (err) {
+        console.error("Failed to load history dates", err);
+      } finally {
+        setLoadingHistory(false);
+      }
+    };
+    fetchDates();
+  }, [selectedSite?.site_id]); // eslint-disable-line react-hooks/exhaustive-deps

  const handleHistoryClick = async () => {
    setIsHistoryDialogOpen(true);
-    setLoadingHistory(true);
+    if (!selectedSite || selectedSite.site_id === 'All Sites') return;
+    setLoadingRectHistory(true);
    try {
-      const dates: any = await activityFeedsService.getHistoryDates(true);
-      setHistoryDates(Array.isArray(dates) ? dates : (dates?.responseData || []));
+      const siteIds = String(selectedSite.site_id);
+      const dates: any = await activityFeedsService.getHistoryDates(true, siteIds);
+      setRectHistoryDates(Array.isArray(dates) ? dates : (dates?.responseData || []));
    } catch (err) {
-      console.error("Failed to load history dates", err);
+      console.error("Failed to load rectification history dates", err);
    } finally {
-      setLoadingHistory(false);
+      setLoadingRectHistory(false);
    }
  };

@@ -208,6 +232,48 @@ export const TopFilterBar: React.FC = () => {
        >
          BULK DELETE
        </Button>
+
+        {/* History dropdown — only visible when a specific site is selected */}
+        {localSiteId !== 'All Sites' && <FormControl size="small" sx={{ bgcolor: 'rgba(255,255,255,0.1)', borderRadius: 2, minWidth: 160 }}>
+          <Select
+            value={historyDropdownValue}
+            displayEmpty
+            onChange={(e) => {
+              const date = e.target.value as string;
+              if (date) {
+                handleSelectDate(date);
+                setHistoryDropdownValue('');
+              }
+            }}
+            renderValue={(val) => (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                {loadingHistory && <CircularProgress size={12} sx={{ color: '#fff' }} />}
+                <span>{val || 'History'}</span>
+              </Box>
+            )}
+            sx={{ '& .MuiSelect-select': { py: 1, px: 2 }, border: 'none', '& fieldset': { border: 'none' }, fontWeight: 'bold', color: '#fff', '& .MuiSvgIcon-root': { color: '#fff' } }}
+            MenuProps={{
+              slotProps: {
+                paper: {
+                  sx: { bgcolor: '#0f172a', color: '#f8fafc', border: '1px solid #1e293b', maxHeight: 300 }
+                }
+              }
+            }}
+          >
+            <MenuItem disabled value="">
+              <em style={{ color: '#64748b' }}>{loadingHistory ? 'Loading...' : historyDates.length === 0 ? 'No dates available' : 'Select a date'}</em>
+            </MenuItem>
+            {historyDates.map((d) => {
+              const dateStr = d.audited_on ? d.audited_on.split(' ')[0] : d.audited_on;
+              return (
+                <MenuItem key={dateStr} value={dateStr} sx={{ '&:hover': { bgcolor: '#1e293b' } }}>
+                  {dateStr}
+                </MenuItem>
+              );
+            })}
+          </Select>
+        </FormControl>}
+
        <Dialog
          open={isHistoryDialogOpen}
          onClose={() => setIsHistoryDialogOpen(false)}
@@ -254,14 +320,14 @@ export const TopFilterBar: React.FC = () => {
              Quick Select (Audited Dates)
            </Typography>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, maxHeight: 150, overflowY: 'auto', p: 0.5, border: '1px solid #1e293b', borderRadius: 1, bgcolor: '#0b1121' }}>
-              {loadingHistory ? (
+              {loadingRectHistory ? (
                <Box sx={{ width: '100%', display: 'flex', justifyContent: 'center', py: 2 }}>
                  <CircularProgress size={20} color="inherit" />
                </Box>
-              ) : historyDates.length === 0 ? (
+              ) : rectHistoryDates.length === 0 ? (
                <Typography variant="body2" sx={{ color: '#64748b', p: 1 }}>No dates found</Typography>
              ) : (
-                historyDates.map((d) => {
+                rectHistoryDates.map((d) => {
                  const dateStr = d.audited_on ? d.audited_on.split(' ')[0] : '';
                  return (
                    <Chip
@@ -339,47 +405,49 @@ export const TopFilterBar: React.FC = () => {
          </Select>
        </FormControl>

-        {/* Search ID Textfield */}
-        <TextField
-          size="small"
-          placeholder="Search ID..."
-          value={localSearchId}
-          onChange={(e) => handleSearchChange(e.target.value)}
-          slotProps={{
-            input: {
-              sx: { 
-                borderRadius: 2, 
-                bgcolor: 'rgba(255,255,255,0.1)', 
-                color: 'white',
-                fontWeight: 'bold',
-                width: 150,
-                '& fieldset': { border: 'none' },
-                '& .MuiInputBase-input': { py: 1, px: 2, '&::placeholder': { color: 'rgba(255,255,255,0.5)', opacity: 1 } }
-              }
-            }
-          }}
-        />
-
-        {/* Search Plaza Textfield */}
-        <TextField
-          size="small"
-          placeholder="Search Plaza..."
-          value={localPlaza}
-          onChange={(e) => handlePlazaChange(e.target.value)}
-          slotProps={{
-            input: {
-              sx: { 
-                borderRadius: 2, 
-                bgcolor: 'rgba(255,255,255,0.1)', 
-                color: 'white',
-                fontWeight: 'bold',
-                width: 150,
-                '& fieldset': { border: 'none' },
-                '& .MuiInputBase-input': { py: 1, px: 2, '&::placeholder': { color: 'rgba(255,255,255,0.5)', opacity: 1 } }
-              }
-            }
-          }}
-        />
+        {/* Search ID and Search Plaza — only visible when a specific site is selected */}
+        {localSiteId !== 'All Sites' && (
+          <>
+            <TextField
+              size="small"
+              placeholder="Search ID..."
+              value={localSearchId}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              slotProps={{
+                input: {
+                  sx: {
+                    borderRadius: 2,
+                    bgcolor: 'rgba(255,255,255,0.1)',
+                    color: 'white',
+                    fontWeight: 'bold',
+                    width: 150,
+                    '& fieldset': { border: 'none' },
+                    '& .MuiInputBase-input': { py: 1, px: 2, '&::placeholder': { color: 'rgba(255,255,255,0.5)', opacity: 1 } }
+                  }
+                }
+              }}
+            />
+            <TextField
+              size="small"
+              placeholder="Search Plaza..."
+              value={localPlaza}
+              onChange={(e) => handlePlazaChange(e.target.value)}
+              slotProps={{
+                input: {
+                  sx: {
+                    borderRadius: 2,
+                    bgcolor: 'rgba(255,255,255,0.1)',
+                    color: 'white',
+                    fontWeight: 'bold',
+                    width: 150,
+                    '& fieldset': { border: 'none' },
+                    '& .MuiInputBase-input': { py: 1, px: 2, '&::placeholder': { color: 'rgba(255,255,255,0.5)', opacity: 1 } }
+                  }
+                }
+              }}
+            />
+          </>
+        )}

        <Button
          variant="contained"
--- a/src/pages/audit-session/AuditSession.tsx
+++ b/src/pages/audit-session/AuditSession.tsx
@@ -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={{