feat: implement activity feed module with debounced filtering, history tracking, and axios service integration

2026-06-24 11:28:37 +05:30
parent de2b5a808f
commit fc61b4cdb6
13 changed files with 442 additions and 156 deletions
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,4 @@
-VITE_DASHBOARD_API_URL=https://python.seekright.com
-VITE_AUDIT_API_URL=https://node-audit.seekright.com
+# VITE_DASHBOARD_API_URL=https://python.seekright.com
+# VITE_AUDIT_API_URL=https://node-audit.seekright.com
+VITE_DASHBOARD_API_URL=https://sr-backend-api.takeleap.in
+VITE_AUDIT_API_URL=https://sr-audit.takeleap.in
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,11 +43,13 @@ import { Login } from './pages/account/Login';
 import { Dashboard } from './pages/dashboard/Dashboard';
 import { GlobalFeed } from './pages/activity-feeds/GlobalFeed';
 import { AuditSession } from './pages/audit-session/AuditSession';
+import { ToastProvider } from './components/common/ToastProvider';

 export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
+      <ToastProvider />
      <BrowserRouter>
        <Routes>
          {/* Public Routes */}
--- a/src/api/activityFeedsService.ts
+++ b/src/api/activityFeedsService.ts
@@ -62,8 +62,15 @@ export const activityFeedsService = {
    return response;
  },

+  // Called after normal (non-rectification) true anomaly audit
  updateAnomalyInDashboard: async (payload: { site_id: string, anomaly_id: number[] }) => {
-    const response = await axiosClient.post(`/api/audit/auditor/anomaly/update`, payload);
+    const response = await axiosClient.post('/api/audit/auditor/anomaly/update', payload);
+    return response;
+  },
+
+  // Called after rectification true anomaly audit
+  markAnomalyCompleted: async (payload: { anomaly_id: number[], site_id: number }) => {
+    const response = await axiosClient.post('/api/audit/auditor/anomaly/completed', payload);
    return response;
  },

--- a/src/api/axiosClient.ts
+++ b/src/api/axiosClient.ts
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { useAuthStore } from '../store/authStore';
+import { useToastStore } from '../store/toastStore';

 // You can move this to an environment variable later
 // Base URL is empty because we use specific proxy prefixes in the service calls
@@ -15,6 +16,18 @@ export const axiosClient = axios.create({
 // Request Interceptor: Attach token if available
 axiosClient.interceptors.request.use(
  (config) => {
+    // Rocket.Chat webhook: skip auth headers, skip dbName, let Vite proxy handle in dev
+    if (config.url?.startsWith('/api/rocketchat')) {
+      if (import.meta.env.DEV) {
+        // Leave URL as-is — Vite proxy rewrites /api/rocketchat → https://text.seekright.com
+        return config;
+      }
+      // Production: rewrite URL directly (no Vite proxy)
+      const rcUrl = import.meta.env.VITE_ROCKETCHAT_URL || 'https://text.seekright.com';
+      config.url = config.url.replace('/api/rocketchat', rcUrl);
+      return config;
+    }
+
    const user = useAuthStore.getState().user;
    if (user?.access_token) {
      config.headers['x-access-token'] = user.access_token;
@@ -23,8 +36,6 @@ axiosClient.interceptors.request.use(
      config.params = { ...config.params, dbName: user.db_name };
    }

-    // Automatically rewrite local proxy paths to the real URLs from environment variables
-    // This allows us to remove the Vite/Nginx proxy completely!
    if (config.url?.startsWith('/api/dashboard')) {
      const dashboardUrl = import.meta.env.VITE_DASHBOARD_API_URL || 'https://sr-backend-api.takeleap.in';
      config.url = config.url.replace('/api/dashboard', dashboardUrl);
@@ -43,22 +54,21 @@ axiosClient.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (!error.response) {
-      // Network offline or CORS error (status 0 in Angular)
-      alert('Seems one of the sub-application is offline. Please restart the application again.');
+      useToastStore.getState().showToast('Network error — one of the services appears to be offline.', 'error');
      return Promise.reject(error);
    }

    const { status, data } = error.response;

    if (status === 400) {
-      const message = data?.responseStatus?.responseMessage || data?.errorMessage || 'OOPS! Something wrong has happened. Please refresh the browser and try again.';
-      alert(message);
+      const message = data?.responseStatus?.responseMessage || data?.errorMessage || 'Something went wrong. Please try again.';
+      useToastStore.getState().showToast(message, 'error');
    } else if (status === 401) {
      console.error('Login issue');
      useAuthStore.getState().logout();
-      window.location.href = '/login'; // Redirect to login
+      window.location.href = '/login';
    } else {
-      alert('OOPS! Something wrong has happened. Please refresh the browser and try again.');
+      useToastStore.getState().showToast('Something went wrong. Please refresh and try again.', 'error');
    }

    return Promise.reject(error);
--- a/src/components/common/ToastProvider.tsx
+++ b/src/components/common/ToastProvider.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert, Stack } from '@mui/material';
+import { useToastStore } from '../../store/toastStore';
+
+export const ToastProvider: React.FC = () => {
+  const { toasts, removeToast } = useToastStore();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <Stack
+      spacing={1}
+      sx={{
+        position: 'fixed',
+        bottom: 24,
+        right: 24,
+        zIndex: 99999,
+        pointerEvents: 'none',
+      }}
+    >
+      {toasts.map((toast) => (
+        <Alert
+          key={toast.id}
+          severity={toast.severity}
+          variant="filled"
+          onClose={() => removeToast(toast.id)}
+          sx={{
+            minWidth: 280,
+            maxWidth: 420,
+            boxShadow: '0 4px 16px rgba(0,0,0,0.5)',
+            pointerEvents: 'all',
+          }}
+        >
+          {toast.message}
+        </Alert>
+      ))}
+    </Stack>
+  );
+};
--- a/src/components/common/TopFilterBar.tsx
+++ b/src/components/common/TopFilterBar.tsx
@@ -155,6 +155,7 @@ export const TopFilterBar: React.FC = () => {
    }
  };

+  // Used by RECTIFICATION HISTORY dialog — isRectificationTab: true → fetches with isRectificationEnabled=true
  const handleSelectDate = (date: string) => {
    const existingIndex = tabs.findIndex(t => t.date === date && t.isRectificationTab);
    if (existingIndex !== -1) {
@@ -174,6 +175,26 @@ export const TopFilterBar: React.FC = () => {
    }
  };

+  // Used by History dropdown — isRectificationTab: false → fetches with isRectificationEnabled=false
+  const handleHistoryDateSelect = (date: string) => {
+    const existingIndex = tabs.findIndex(t => t.date === date && !t.isRectificationTab);
+    if (existingIndex !== -1) {
+      setSelectedTabIndex(existingIndex);
+    } else {
+      addTab({
+        date: date,
+        isRectificationTab: false,
+        totalAnomalyCount: 0,
+        anomalies: [],
+        anomaliesCopy: [],
+        selectedAnomalyIndex: 0,
+        filters: {},
+        page: 0,
+        rowsPerPage: 20
+      });
+    }
+  };
+
  const handleViewHistory = () => {
    if (!selectedHistoryDate) return;
    handleSelectDate(selectedHistoryDate);
@@ -241,7 +262,7 @@ export const TopFilterBar: React.FC = () => {
            onChange={(e) => {
              const date = e.target.value as string;
              if (date) {
-                handleSelectDate(date);
+                handleHistoryDateSelect(date);
                setHistoryDropdownValue('');
              }
            }}
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -102,7 +102,7 @@ export const MainLayout: React.FC = () => {
        
        {/* Child routes get injected here */}
        <Outlet />
-        
+
      </Box>
    </Box>
  );
--- a/src/pages/activity-feeds/AnomalyTable.tsx
+++ b/src/pages/activity-feeds/AnomalyTable.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Slider, Checkbox } from '@mui/material';
+import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Slider, Checkbox, Skeleton } from '@mui/material';
 import { useFeedStore } from '../../store/feedStore';

+const SKELETON_COLS = 13;
+
 export const AnomalyTable: React.FC = () => {
-  const { tabs, selectedTabIndex, updateTab, filterPlaza, isRectificationEnabled } = useFeedStore();
+  const { tabs, selectedTabIndex, updateTab, filterPlaza, isRectificationEnabled, isFeedLoading } = useFeedStore();

  if (tabs.length === 0 || selectedTabIndex < 0) {
    return <Typography sx={{ p: 2 }}>Loading feeds...</Typography>;
@@ -64,7 +66,16 @@ export const AnomalyTable: React.FC = () => {
          </TableRow>
        </TableHead>
        <TableBody>
-          {anomalies.map((anomaly: any, _filteredIndex: number) => {
+          {isFeedLoading && Array.from({ length: 8 }).map((_, i) => (
+            <TableRow key={`skel-${i}`}>
+              {Array.from({ length: SKELETON_COLS }).map((__, j) => (
+                <TableCell key={j} sx={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                  <Skeleton variant="text" sx={{ bgcolor: 'rgba(255,255,255,0.06)', borderRadius: 1 }} />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+          {!isFeedLoading && anomalies.map((anomaly: any, _filteredIndex: number) => {
            const realIndex = rawAnomalies.indexOf(anomaly);
            const isSelected = activeTab.selectedAnomalyIndex === realIndex;
            const assetName = anomaly?.Asset?.replace(/_/gi, ' ') || 'Unknown Asset';
--- a/src/pages/activity-feeds/GlobalFeed.tsx
+++ b/src/pages/activity-feeds/GlobalFeed.tsx
@@ -15,7 +15,8 @@ export const GlobalFeed: React.FC = () => {
    isRectificationEnabled,
    filterFromDate, filterTillDate,
    filterMinChainage, filterMaxChainage,
-    selectedAssetIds
+    selectedAssetIds,
+    setIsFeedLoading
  } = useFeedStore();

  useEffect(() => {
@@ -70,6 +71,7 @@ export const GlobalFeed: React.FC = () => {
      const siteIdParam = (!selectedSite || selectedSite?.site_id === 'All Sites')
        ? '' : String(selectedSite.site_id || '');

+      setIsFeedLoading(true);
      try {
        const historyRes: any = await activityFeedsService.getHistory({
          date: activeTab.date || '',
@@ -106,6 +108,8 @@ export const GlobalFeed: React.FC = () => {
        }
      } catch (err) {
        console.error('[GlobalFeed] Failed to load history for active tab/filters change', err);
+      } finally {
+        setIsFeedLoading(false);
      }
    };

--- a/src/pages/audit-session/AuditSession.tsx
+++ b/src/pages/audit-session/AuditSession.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Box, Typography, Button, Chip, Switch, Dialog, DialogTitle, DialogContent, DialogActions, IconButton } from '@mui/material';
+import { Box, Typography, Button, Chip, Switch, Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Select, MenuItem, TextField, CircularProgress } from '@mui/material';
 import { useNavigate, useLocation } from 'react-router-dom';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import { activityFeedsService } from '../../api/activityFeedsService';
+import { axiosClient } from '../../api/axiosClient';
+import { useToastStore } from '../../store/toastStore';
 import { useAuthStore } from '../../store/authStore';
 import { useFeedStore } from '../../store/feedStore';

@@ -59,6 +61,68 @@ export const AuditSession: React.FC = () => {
  const [isNotesFocused, setIsNotesFocused] = useState(false);
  const [showCompletionModal, setShowCompletionModal] = useState(false);
  const [isShortcutsDialogOpen, setIsShortcutsDialogOpen] = useState(false);
+  const [isReportDialogOpen, setIsReportDialogOpen] = useState(false);
+  const [reportDev, setReportDev] = useState('');
+  const [reportMessage, setReportMessage] = useState('');
+  const [reportSending, setReportSending] = useState(false);
+
+  const DEVS = ['aromal', 'divya', 'Poonam', 'ravi', 'Kaushik', 'Saleth', 'Jagan', 'Yash', 'faraz_siddiqui', 'brinda.n', 'SasiVardhan', 'Shubham'];
+  const ROCKETCHAT_WEBHOOK_PATH = '/api/rocketchat/hooks/6a22ad73a88367bc6e1095a2/xcHkbDSce5rCwofdBZF3ri2rb6ntxT2mahqT6Gg7iKdectYk';
+
+  const handleSendReport = async () => {
+    if (!reportDev || !reportMessage.trim()) return;
+    setReportSending(true);
+    try {
+      const a = currentAnomaly;
+      const masterPrefix = isRectActive
+        ? 'https://sr-img.seekright.com/'
+        : 'https://auditor-master-images.seekright.com/SeekRight/';
+      const testPrefix = 'https://dashboard-images.seekright.com/SeekRight/';
+
+      const masterImageUrl = a?.Frame_Master ? `${masterPrefix}${a.Frame_Master}` : null;
+      const anomalyImageUrl = a?.Frame_Test ? `${testPrefix}${a.Frame_Test}` : null;
+      const videoUrl = a?.video_url ? `${testPrefix}${a.video_url}` : null;
+      const extraImages: string[] = a?.Extra_Image
+        ? a.Extra_Image.split(',').map((src: string) => `${testPrefix}${src.trim()}`)
+        : [];
+
+      const context = [
+        `*Anomaly Report*`,
+        `• *ID:* #${a?.id}`,
+        `• *Asset:* ${a?.Asset?.replace(/_/gi, ' ') || 'N/A'}`,
+        `• *Plaza:* ${a?.Plaza || 'N/A'}`,
+        `• *Chainage:* ${a?.Chainage || 'N/A'}`,
+        `• *Side:* ${a?.Side || 'N/A'}`,
+        `• *Position:* ${a?.Pos || 'N/A'}`,
+        `• *Road:* ${a?.road || 'N/A'}`,
+        `• *Algorithm:* ${a?.Algorithm || 'N/A'}`,
+        `• *Created:* ${a?.Created_on ? new Date(a.Created_on).toLocaleString() : 'N/A'}`,
+        ``,
+        `*Media:*`,
+        masterImageUrl ? `• *Master Image:* ${masterImageUrl}` : `• *Master Image:* Not available`,
+        anomalyImageUrl ? `• *Anomaly Image:* ${anomalyImageUrl}` : `• *Anomaly Image:* Not available`,
+        videoUrl ? `• *Video:* ${videoUrl}` : `• *Video:* Not available`,
+        ...(extraImages.length > 1
+          ? [`• *Extra Images:*`, ...extraImages.map((url, i) => `  ${i + 1}. ${url}`)]
+          : []
+        ),
+        ``,
+        `*Message from ${user?.username || user?.email}:*`,
+        reportMessage.trim(),
+      ].join('\n');
+
+      await axiosClient.post(ROCKETCHAT_WEBHOOK_PATH, { channel: `@${reportDev}`, text: context });
+      setIsReportDialogOpen(false);
+      setReportDev('');
+      setReportMessage('');
+      useToastStore.getState().showToast(`Message sent to @${reportDev}`, 'success');
+    } catch (err) {
+      console.error('Failed to send report:', err);
+      useToastStore.getState().showToast('Failed to send message. Please try again.', 'error');
+    } finally {
+      setReportSending(false);
+    }
+  };

  const location = useLocation();
  const {
@@ -80,7 +144,7 @@ export const AuditSession: React.FC = () => {
  };
  const [sessionPageNo, setSessionPageNo] = useState(() => location.state?.startPage || 0);
  const hasInitializedSession = useRef(false);
-  
+
  const [masterZoom, setMasterZoom] = useState(1);
  const [anomalyZoom, setAnomalyZoom] = useState(1);

@@ -124,7 +188,7 @@ export const AuditSession: React.FC = () => {
        setNotAnAnomalySubCategory(null);
        setItemAuditStates(res.anomalies.map((a: any) => a.IsAudited === 1 ? 'audited' : 'pending'));
      } else {
-        alert("No more anomalies left in the feed.");
+        useToastStore.getState().showToast('No more anomalies left in the feed.', 'info');
        setShowCompletionModal(false);
        navigate('/activity-feeds');
      }
@@ -163,8 +227,8 @@ export const AuditSession: React.FC = () => {
      });

      if (res && res.anomalies && res.anomalies.length > 0) {
-        updateTab(selectedTabIndex, { 
-          anomalies: res.anomalies, 
+        updateTab(selectedTabIndex, {
+          anomalies: res.anomalies,
          anomaliesCopy: res.anomalies,
          page: nextPage
        });
@@ -180,7 +244,7 @@ export const AuditSession: React.FC = () => {
        setAnomalyZoom(1);
        setItemAuditStates(res.anomalies.map((a: any) => a.IsAudited === 1 ? 'audited' : 'pending'));
      } else {
-        alert("No more anomalies left in the feed.");
+        useToastStore.getState().showToast('No more anomalies left in the feed.', 'info');
        navigate('/activity-feeds');
      }
    } catch (err) {
@@ -204,8 +268,8 @@ export const AuditSession: React.FC = () => {
        setAnomalies(filteredAnomalies);
        // Find correct index in filtered list
        const origSelectedAnomaly = activeTab.anomalies[navState.startIndex || 0];
-        const newIdx = origSelectedAnomaly 
-          ? filteredAnomalies.findIndex((a: any) => (a.id === origSelectedAnomaly.id || a._id === origSelectedAnomaly._id)) 
+        const newIdx = origSelectedAnomaly
+          ? filteredAnomalies.findIndex((a: any) => (a.id === origSelectedAnomaly.id || a._id === origSelectedAnomaly._id))
          : 0;
        setCurrentIndex(newIdx !== -1 ? newIdx : 0);
        setItemAuditStates(filteredAnomalies.map((a: any) => a.IsAudited === 1 ? 'audited' : 'pending'));
@@ -236,7 +300,7 @@ export const AuditSession: React.FC = () => {
    }
  }, [location.state, tabs, selectedTabIndex, loadSessionData, filterPlaza]);

-  const IMAGES_AWS_PREFIX = isRectActive 
+  const IMAGES_AWS_PREFIX = isRectActive
    ? "https://sr-img.seekright.com/"
    : "https://auditor-master-images.seekright.com/SeekRight/";
  const IMAGES_TEST_AUDIT_PREFIX = "https://dashboard-images.seekright.com/SeekRight/";
@@ -257,7 +321,7 @@ export const AuditSession: React.FC = () => {
  let masterImageSrc = '';
  let latStr = 'N/A';
  let longStr = 'E/A';
-  
+
  if (currentAnomaly) {
    if (currentAnomaly.Frame_Master) {
      masterImageSrc = IMAGES_AWS_PREFIX + currentAnomaly.Frame_Master;
@@ -287,10 +351,10 @@ export const AuditSession: React.FC = () => {
    }
  }

-  const mediaItems: { type: 'image'|'video', url: string }[] = React.useMemo(() => {
+  const mediaItems: { type: 'image' | 'video', url: string }[] = React.useMemo(() => {
    if (!currentAnomaly) return [];
-    const items: { type: 'image'|'video', url: string }[] = [];
-    
+    const items: { type: 'image' | 'video', url: string }[] = [];
+
    if (currentAnomaly.images && currentAnomaly.images.length > 0) {
      currentAnomaly.images.forEach((img: any) => {
        items.push({ type: 'image', url: IMAGES_TEST_AUDIT_PREFIX + img.src });
@@ -302,7 +366,7 @@ export const AuditSession: React.FC = () => {
    if (currentAnomaly.video_url) {
      items.push({ type: 'video', url: IMAGES_TEST_AUDIT_PREFIX + currentAnomaly.video_url });
    }
-    
+
    return items;
  }, [currentAnomaly]);

@@ -341,20 +405,19 @@ export const AuditSession: React.FC = () => {
      return next;
    });
    handleNext();
-  };  const saveAuditState = useCallback(async (
-    anomalyVal: boolean | null, 
-    catVal: number | null, 
-    notesVal: string, 
+  }; const saveAuditState = useCallback(async (
+    anomalyVal: boolean | null,
+    catVal: number | null,
+    notesVal: string,
    plantSub?: string | null,
    notAnAnomalySub?: string | null
  ) => {
    if (!currentAnomaly || !user) return;
    try {
      const isAnomalyBool = anomalyVal ?? true;
-      const auditStatusVal = isAnomalyBool ? 1 : 0;
      const categories = isAnomalyBool ? ANOMALY_CATEGORIES : SAFE_CATEGORIES;
      const matchedCategory = categories.find(c => c.id === catVal);
-      
+
      let auditValueVal = matchedCategory ? matchedCategory.value : '';
      if (isAnomalyBool && catVal === 1 && plantSub) {
        auditValueVal = plantSub;
@@ -362,49 +425,55 @@ export const AuditSession: React.FC = () => {
        auditValueVal = notAnAnomalySub;
      }

-      // Construct properties matching Angular properties list:
-      // ["dbName", "isRectificationEnabled", "Audit_value", "Comments", "Audit_status", "Frame_Test", "Frame_Master", "Chainage", "Pos", "id", "road", "user_id", "Algorithm"]
+      // Body matches exactly what the API expects (dbName + isRectificationEnabled go in URL params via axiosClient)
      const auditPayload = {
-        dbName: user.db_name || '',
-        isRectificationEnabled: isRectActive,
        Audit_value: auditValueVal,
        Comments: notesVal || '',
-        Audit_status: auditStatusVal,
+        Audit_status: isAnomalyBool,          // boolean true/false, not 1/0
        Frame_Test: currentAnomaly.Frame_Test || '',
        Frame_Master: currentAnomaly.Frame_Master || '',
        Chainage: currentAnomaly.Chainage || '',
        Pos: currentAnomaly.Pos || '',
        id: currentAnomaly.id,
        road: currentAnomaly.road || 'mcw',
+        Algorithm: currentAnomaly.Algorithm || '',
        user_id: user.user_id || 0,
-        Algorithm: currentAnomaly.Algorithm || ''
      };

-      // Call API 1: Update anomaly
+      // Call API 1: Save audit result
      await activityFeedsService.updateAnomaly([auditPayload], isRectActive);

-      // Call API 2: If true anomaly, update anomaly status in dashboard to notify client portal
-      if (auditStatusVal === 1) {
-        await activityFeedsService.updateAnomalyInDashboard({
-          site_id: String(currentAnomaly.site_id),
-          anomaly_id: [currentAnomaly.id]
-        });
+      // Call API 2: Notify dashboard — only for true anomaly, endpoint differs by mode
+      if (isAnomalyBool) {
+        if (isRectActive) {
+          // Rectification mode: /auditor/anomaly/completed, site_id as number
+          await activityFeedsService.markAnomalyCompleted({
+            anomaly_id: [currentAnomaly.id],
+            site_id: currentAnomaly.site_id
+          });
+        } else {
+          // Normal audit mode: /auditor/anomaly/update, site_id as string
+          await activityFeedsService.updateAnomalyInDashboard({
+            site_id: String(currentAnomaly.site_id),
+            anomaly_id: [currentAnomaly.id]
+          });
+        }
      }
    } catch (err) {
      console.error('Failed to submit audit state:', err);
    }
-  }, [currentAnomaly, user]);
+  }, [currentAnomaly, user, isRectActive]);

  const handleSaveAndNext = useCallback(async () => {
    if (!currentAnomaly) return;

    if (selectedCategory === 1) {
      if ((isAnomaly === null || isAnomaly === true) && !plantSubCategory) {
-        alert("Please select feature before submit.");
+        useToastStore.getState().showToast('Please select a feature before submitting.', 'warning');
        return;
      }
      if (isAnomaly === false && !notAnAnomalySubCategory) {
-        alert("Please select feature before submit.");
+        useToastStore.getState().showToast('Please select a feature before submitting.', 'warning');
        return;
      }
    }
@@ -414,17 +483,17 @@ export const AuditSession: React.FC = () => {
      next[currentIndex] = 'audited';
      return next;
    });
-    
+
    // Call the API
    await saveAuditState(isAnomaly, selectedCategory, notes, plantSubCategory, notAnAnomalySubCategory);
-    
+
    handleNext();
  }, [currentIndex, currentAnomaly, isAnomaly, selectedCategory, notes, plantSubCategory, notAnAnomalySubCategory, saveAuditState, handleNext]);

  // Quick Auto Advance save trigger
  const handleQuickSaveAndNext = useCallback(async (
-    anomalyVal: boolean, 
-    catVal: number, 
+    anomalyVal: boolean,
+    catVal: number,
    plantSub?: string | null,
    notAnAnomalySub?: string | null
  ) => {
@@ -437,7 +506,7 @@ export const AuditSession: React.FC = () => {

    // Call the API
    await saveAuditState(anomalyVal, catVal, notes, plantSub, notAnAnomalySub);
-    
+
    if (currentIndex < anomalies.length - 1) {
      setCurrentIndex(prev => prev + 1);
      setSelectedCategory(null);
@@ -451,10 +520,10 @@ export const AuditSession: React.FC = () => {
  }, [currentIndex, anomalies.length, currentAnomaly, notes, saveAuditState]);
  // Keyboard shortcuts
  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (isNotesFocused) return;
+    if (isNotesFocused || isReportDialogOpen || isShortcutsDialogOpen) return;

    const key = e.key.toLowerCase();
-    
+
    // Register active flash pulse
    setActiveKeyFlash(key);
    setTimeout(() => setActiveKeyFlash(null), 150);
@@ -558,7 +627,7 @@ export const AuditSession: React.FC = () => {
        handleSkip();
        break;
    }
-  }, [currentIndex, anomalies, isAnomaly, selectedCategory, notes, plantSubCategory, isQuickAudit, isNotesFocused, handleQuickSaveAndNext, handleSaveAndNext, handleSkip]);
+  }, [currentIndex, anomalies, isAnomaly, selectedCategory, notes, plantSubCategory, isQuickAudit, isNotesFocused, isReportDialogOpen, isShortcutsDialogOpen, handleQuickSaveAndNext, handleSaveAndNext, handleSkip]);

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
@@ -596,25 +665,25 @@ export const AuditSession: React.FC = () => {
  };

  return (
-    <Box sx={{ 
-      display: 'flex', 
-      flexDirection: 'column', 
+    <Box sx={{
+      display: 'flex',
+      flexDirection: 'column',
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
-      bgcolor: '#0b1121', 
-      color: '#f8fafc', 
+      bgcolor: '#0b1121',
+      color: '#f8fafc',
      overflow: 'hidden',
      zIndex: 9999
    }}>
-      
+
      {/* Header */}
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 1, px: 2, borderBottom: '1px solid #1e293b', bgcolor: '#0f172a' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-          <Button 
-            startIcon={<ArrowBackIcon fontSize="small" />} 
+          <Button
+            startIcon={<ArrowBackIcon fontSize="small" />}
            onClick={() => {
              const navState = location.state as any;
              if (!navState?.useExistingFeed) invalidateDashboardCache();
@@ -647,15 +716,15 @@ export const AuditSession: React.FC = () => {
            color = '#eab308'; // skipped (orange)
          }
          return (
-            <Box 
-              key={index} 
-              sx={{ 
-                flex: 1, 
-                height: '100%', 
+            <Box
+              key={index}
+              sx={{
+                flex: 1,
+                height: '100%',
                bgcolor: color,
                mr: index === itemAuditStates.length - 1 ? 0 : '1px',
                transition: 'background-color 0.2s ease'
-              }} 
+              }}
            />
          );
        })}
@@ -663,10 +732,10 @@ export const AuditSession: React.FC = () => {

      {/* Main Content Area */}
      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden', p: 2, gap: 2 }}>
-        
+
        {/* Left Side: Images & Overlay */}
        <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, gap: 2, overflow: 'hidden' }}>
-          
+
          {/* Images Row */}
          <Box sx={{ display: 'flex', flex: 1, gap: 2, overflow: 'hidden' }}>
            {/* Previous Image Pane */}
@@ -684,16 +753,16 @@ export const AuditSession: React.FC = () => {
                  </IconButton>
                </Box>
                {masterImageSrc ? (
-                  <img 
-                    src={masterImageSrc} 
-                    alt="Master" 
-                    style={{ 
+                  <img
+                    src={masterImageSrc}
+                    alt="Master"
+                    style={{
                      width: masterZoom === 1 ? '100%' : `${masterZoom * 100}%`,
                      height: masterZoom === 1 ? '100%' : 'auto',
                      objectFit: masterZoom === 1 ? 'contain' : 'cover',
                      transition: 'width 0.2s ease, height 0.2s ease',
                      transformOrigin: 'top left'
-                    }} 
+                    }}
                    onError={(e) => {
                      e.currentTarget.onerror = null;
                      e.currentTarget.src = '/assets/images/master_image_not_available.png';
@@ -723,30 +792,30 @@ export const AuditSession: React.FC = () => {
                {mediaItems.length > 0 ? (
                  <>
                    {mediaItems[carouselIndex]?.type === 'video' ? (
-                      <video src={mediaItems[carouselIndex]?.url} controls autoPlay loop style={{ 
+                      <video src={mediaItems[carouselIndex]?.url} controls autoPlay loop style={{
                        width: anomalyZoom === 1 ? '100%' : `${anomalyZoom * 100}%`,
                        height: anomalyZoom === 1 ? '100%' : 'auto',
                        objectFit: anomalyZoom === 1 ? 'contain' : 'cover',
                        transition: 'width 0.2s ease, height 0.2s ease'
                      }} />
                    ) : (
-                      <img 
-                        src={mediaItems[carouselIndex]?.url} 
-                        alt="Anomaly" 
-                        style={{ 
+                      <img
+                        src={mediaItems[carouselIndex]?.url}
+                        alt="Anomaly"
+                        style={{
                          width: anomalyZoom === 1 ? '100%' : `${anomalyZoom * 100}%`,
                          height: anomalyZoom === 1 ? '100%' : 'auto',
                          objectFit: anomalyZoom === 1 ? 'contain' : 'cover',
                          transition: 'width 0.2s ease, height 0.2s ease',
                          transformOrigin: 'top left'
-                        }} 
+                        }}
                        onError={(e) => {
                          e.currentTarget.onerror = null;
                          e.currentTarget.src = '/assets/images/anomaly-placeholder.png';
                        }}
                      />
                    )}
-                    
+
                    {mediaItems.length > 1 && (
                      <Box sx={{ position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 1, bgcolor: 'rgba(0,0,0,0.6)', p: 0.5, borderRadius: 2 }}>
                        <Button size="small" variant="text" sx={{ color: 'white', minWidth: 'auto', px: 2, '&:hover': { bgcolor: 'rgba(255,255,255,0.1)' } }} onClick={() => setCarouselIndex(prev => prev > 0 ? prev - 1 : mediaItems.length - 1)}>
@@ -777,13 +846,13 @@ export const AuditSession: React.FC = () => {
                  {currentAnomaly?.Plaza || 'Unknown Location'}
                </Typography>
              </Box>
-              <Chip 
-                label={`ID #${currentAnomaly?.id || currentAnomaly?.anomaly_id || 'N/A'}`} 
-                size="small" 
-                sx={{ bgcolor: 'rgba(59, 130, 246, 0.15)', color: '#60a5fa', fontWeight: 'bold', border: '1px solid rgba(59, 130, 246, 0.3)' }} 
+              <Chip
+                label={`ID #${currentAnomaly?.id || currentAnomaly?.anomaly_id || 'N/A'}`}
+                size="small"
+                sx={{ bgcolor: 'rgba(59, 130, 246, 0.15)', color: '#60a5fa', fontWeight: 'bold', border: '1px solid rgba(59, 130, 246, 0.3)' }}
              />
            </Box>
-            
+
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
              <Chip size="small" label={currentAnomaly?.Asset?.replace(/_/gi, ' ') || 'Unknown Asset'} sx={{ bgcolor: '#1e293b', color: '#e2e8f0', borderRadius: 1.5, fontWeight: 'medium' }} />
              <Chip size="small" label={currentAnomaly?.date_of_audit || currentAnomaly?.Created_on ? new Date(currentAnomaly?.date_of_audit || currentAnomaly?.Created_on).toLocaleString() : 'No Date'} sx={{ bgcolor: '#1e293b', color: '#e2e8f0', borderRadius: 1.5 }} />
@@ -791,19 +860,29 @@ export const AuditSession: React.FC = () => {
              <Chip size="small" label={`Side: ${currentAnomaly?.Side || 'N/A'}`} sx={{ bgcolor: '#1e293b', color: '#e2e8f0', borderRadius: 1.5 }} />
              <Chip size="small" label={`${latStr}${longStr ? `, ${longStr}` : ''}`} sx={{ bgcolor: '#1e293b', color: '#e2e8f0', borderRadius: 1.5 }} />
            </Box>
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={() => setIsReportDialogOpen(true)}
+                sx={{ borderColor: '#f59e0b', color: '#f59e0b', textTransform: 'none', fontSize: '0.75rem', borderRadius: 1.5, '&:hover': { bgcolor: 'rgba(245,158,11,0.1)', borderColor: '#f59e0b' } }}
+              >
+                Report to Dev
+              </Button>
+            </Box>
          </Box>
        </Box>

        {/* Right Side: Sidebar */}
        <Box sx={{ width: 320, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          
+
          {/* Quick-Audit Auto-Advance Toggle */}
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: '#0f172a', p: 1.5, borderRadius: 2, border: '1px solid #1e293b' }}>
            <Box>
              <Typography sx={{ fontSize: '0.8rem', fontWeight: 'bold', color: '#f8fafc' }}>Quick Audit</Typography>
              <Typography sx={{ fontSize: '0.65rem', color: '#64748b' }}>Auto-advances on keypress</Typography>
            </Box>
-            <Switch 
+            <Switch
              size="small"
              checked={isQuickAudit}
              onChange={(e) => handleToggleQuickAudit(e.target.checked)}
@@ -821,15 +900,15 @@ export const AuditSession: React.FC = () => {
              <Typography sx={{ fontSize: '0.75rem', color: '#64748b' }}>A / S</Typography>
            </Box>
            <Box sx={{ display: 'flex', gap: 1 }}>
-              <Button 
-                fullWidth 
+              <Button
+                fullWidth
                variant={isAnomaly === true ? "contained" : "outlined"}
                color={isAnomaly === true ? "error" : "inherit"}
                onClick={() => setIsAnomaly(true)}
-                sx={{ 
-                  borderRadius: 2, 
-                  textTransform: 'none', 
-                  borderColor: '#334155', 
+                sx={{
+                  borderRadius: 2,
+                  textTransform: 'none',
+                  borderColor: '#334155',
                  color: isAnomaly === true ? 'white' : '#cbd5e1',
                  transition: 'all 0.15s ease',
                  border: activeKeyFlash === 'a' ? '2px solid #ef4444' : '1px solid #334155',
@@ -838,8 +917,8 @@ export const AuditSession: React.FC = () => {
              >
                ⚠️ Anomaly
              </Button>
-              <Button 
-                fullWidth 
+              <Button
+                fullWidth
                variant={isAnomaly === false ? "contained" : "outlined"}
                color={isAnomaly === false ? "success" : "inherit"}
                onClick={() => {
@@ -847,10 +926,10 @@ export const AuditSession: React.FC = () => {
                  setSelectedCategory(null);
                  setPlantSubCategory(null);
                }}
-                sx={{ 
-                  borderRadius: 2, 
-                  textTransform: 'none', 
-                  borderColor: '#334155', 
+                sx={{
+                  borderRadius: 2,
+                  textTransform: 'none',
+                  borderColor: '#334155',
                  color: isAnomaly === false ? 'white' : '#cbd5e1',
                  transition: 'all 0.15s ease',
                  border: activeKeyFlash === 's' ? '2px solid #22c55e' : '1px solid #334155',
@@ -874,7 +953,7 @@ export const AuditSession: React.FC = () => {
                      if (isAnomaly === null) {
                        setIsAnomaly(true);
                      }
-                      
+
                      // If selecting Plant (Anomaly 1) or Not an Anomaly (Safe 1), do not auto-advance; wait for nested sub-options
                      if (cat.id === 1) {
                        return;
@@ -884,9 +963,9 @@ export const AuditSession: React.FC = () => {
                        setTimeout(() => handleQuickSaveAndNext(currentIsAnom, cat.id), 120);
                      }
                    }}
-                    sx={{ 
-                      justifyContent: 'flex-start', 
-                      textTransform: 'none', 
+                    sx={{
+                      justifyContent: 'flex-start',
+                      textTransform: 'none',
                      color: selectedCategory === cat.id ? 'white' : '#cbd5e1',
                      bgcolor: selectedCategory === cat.id ? 'rgba(255,255,255,0.05)' : 'transparent',
                      borderRadius: 2,
@@ -982,20 +1061,20 @@ export const AuditSession: React.FC = () => {
          {/* Notes */}
          <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
            <Typography sx={{ fontSize: '0.75rem', fontWeight: 'bold', color: '#94a3b8', letterSpacing: 1, mb: 1 }}>NOTES</Typography>
-            <Box 
+            <Box
              component="textarea"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              onFocus={() => setIsNotesFocused(true)}
              onBlur={() => setIsNotesFocused(false)}
              placeholder="Optional observations..."
-              sx={{ 
-                width: '100%', 
+              sx={{
+                width: '100%',
                flex: 1,
                minHeight: 60,
-                bgcolor: '#0f172a', 
-                border: '1px solid #1e293b', 
-                borderRadius: 2, 
+                bgcolor: '#0f172a',
+                border: '1px solid #1e293b',
+                borderRadius: 2,
                color: 'white',
                p: 2,
                fontFamily: 'inherit',
@@ -1007,17 +1086,17 @@ export const AuditSession: React.FC = () => {

          {/* Actions */}
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            <Button 
-              variant="contained" 
-              color={selectedCategory !== null ? "primary" : "inherit"} 
+            <Button
+              variant="contained"
+              color={selectedCategory !== null ? "primary" : "inherit"}
              onClick={selectedCategory !== null ? handleSaveAndNext : handleSkip}
-              sx={{ 
-                borderRadius: 2, 
-                py: 1.5, 
-                textTransform: 'none', 
-                fontWeight: 'bold', 
-                display: 'flex', 
-                justifyContent: 'space-between', 
+              sx={{
+                borderRadius: 2,
+                py: 1.5,
+                textTransform: 'none',
+                fontWeight: 'bold',
+                display: 'flex',
+                justifyContent: 'space-between',
                px: 3,
                transition: 'all 0.15s ease',
                bgcolor: selectedCategory !== null ? '' : '#1e293b',
@@ -1029,35 +1108,35 @@ export const AuditSession: React.FC = () => {
              {selectedCategory !== null ? "Save & Next" : "Next (Skip)"} <Typography component="span" sx={{ fontSize: '0.75rem', opacity: 0.7 }}>Enter</Typography>
            </Button>
            <Box sx={{ display: 'flex', gap: 1 }}>
-              <Button 
-                variant="outlined" 
+              <Button
+                variant="outlined"
                onClick={handlePrev}
                disabled={currentIndex === 0}
-                sx={{ 
-                  flex: 1, 
-                  borderRadius: 2, 
-                  textTransform: 'none', 
-                  borderColor: '#1e293b', 
-                  color: '#94a3b8', 
+                sx={{
+                  flex: 1,
+                  borderRadius: 2,
+                  textTransform: 'none',
+                  borderColor: '#1e293b',
+                  color: '#94a3b8',
                  transition: 'all 0.15s ease',
                  border: activeKeyFlash === 'arrowleft' ? '2px solid #64748b' : '1px solid #1e293b',
-                  '&:hover': { borderColor: '#334155' } 
+                  '&:hover': { borderColor: '#334155' }
                }}
              >
                ← Prev
              </Button>
-              <Button 
-                variant="outlined" 
+              <Button
+                variant="outlined"
                onClick={handleSkip}
-                sx={{ 
-                  flex: 1, 
-                  borderRadius: 2, 
-                  textTransform: 'none', 
-                  borderColor: '#1e293b', 
-                  color: '#94a3b8', 
+                sx={{
+                  flex: 1,
+                  borderRadius: 2,
+                  textTransform: 'none',
+                  borderColor: '#1e293b',
+                  color: '#94a3b8',
                  transition: 'all 0.15s ease',
                  border: activeKeyFlash === 'tab' ? '2px solid #64748b' : '1px solid #1e293b',
-                  '&:hover': { borderColor: '#334155' } 
+                  '&:hover': { borderColor: '#334155' }
                }}
              >
                Skip <span style={{ fontSize: '0.75rem', opacity: 0.7, marginLeft: 8 }}>Tab</span>
@@ -1070,9 +1149,9 @@ export const AuditSession: React.FC = () => {
      {/* Footer Shortcuts */}
      <Box sx={{ borderTop: '1px solid #1e293b', p: 1, px: 2, display: 'flex', gap: 3, alignItems: 'center', overflowX: 'auto', '& > div': { display: 'flex', alignItems: 'center', gap: 1, whiteSpace: 'nowrap' } }}>
        <Typography sx={{ fontSize: '0.75rem', color: '#64748b' }}>
-          {isNotesFocused ? "Shortcuts Paused (Typing notes)" : "Keys:"}
+          {(isNotesFocused || isReportDialogOpen || isShortcutsDialogOpen) ? "Shortcuts Paused" : "Keys:"}
        </Typography>
-        {!isNotesFocused && (
+        {!(isNotesFocused || isReportDialogOpen || isShortcutsDialogOpen) && (
          <>
            <Box>
              <Chip label="A" size="small" sx={{ height: 20, fontSize: '0.65rem', bgcolor: '#1e293b', color: '#cbd5e1' }} />
@@ -1106,6 +1185,77 @@ export const AuditSession: React.FC = () => {
        )}
      </Box>

+      {/* Report to Dev Dialog */}
+      <Dialog
+        open={isReportDialogOpen}
+        onClose={() => { setIsReportDialogOpen(false); setReportDev(''); setReportMessage(''); }}
+        sx={{ zIndex: 10000 }}
+        slotProps={{ paper: { sx: { bgcolor: '#0f172a', color: '#f8fafc', border: '1px solid #1e293b', minWidth: 400 } } }}
+      >
+        <DialogTitle sx={{ fontWeight: 'bold', pb: 1, borderBottom: '1px solid #1e293b' }}>
+          Report to Dev
+        </DialogTitle>
+        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block', mb: 0.5 }}>Anomaly</Typography>
+            <Typography variant="body2" sx={{ color: '#f8fafc' }}>
+              ID #{currentAnomaly?.id} — {currentAnomaly?.Asset?.replace(/_/gi, ' ')} @ {currentAnomaly?.Plaza} (CH: {currentAnomaly?.Chainage})
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block', mb: 0.5 }}>Select Developer</Typography>
+            <Select
+              value={reportDev}
+              onChange={(e) => setReportDev(e.target.value)}
+              displayEmpty
+              size="small"
+              fullWidth
+              sx={{ color: '#f8fafc', '& fieldset': { borderColor: '#334155' }, '& .MuiSvgIcon-root': { color: '#94a3b8' } }}
+              slotProps={{ input: { sx: { color: '#f8fafc' } } }}
+              MenuProps={{ sx: { zIndex: 10001 }, slotProps: { paper: { sx: { bgcolor: '#0f172a', border: '1px solid #1e293b' } } } }}
+            >
+              <MenuItem disabled value=""><em style={{ color: '#64748b' }}>Choose a developer</em></MenuItem>
+              {DEVS.map(dev => (
+                <MenuItem key={dev} value={dev} sx={{ color: '#f8fafc', bgcolor: '#0f172a', '&:hover': { bgcolor: '#1e293b' }, '&.Mui-selected': { bgcolor: '#1e3a5f' }, '&.Mui-selected:hover': { bgcolor: '#1e3a5f' } }}>@{dev}</MenuItem>
+              ))}
+            </Select>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block', mb: 0.5 }}>Message</Typography>
+            <TextField
+              multiline
+              rows={4}
+              fullWidth
+              placeholder="Describe the issue..."
+              value={reportMessage}
+              onChange={(e) => setReportMessage(e.target.value)}
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  color: '#f8fafc',
+                  '& fieldset': { borderColor: '#334155' },
+                  '&:hover fieldset': { borderColor: '#475569' },
+                  '&.Mui-focused fieldset': { borderColor: '#3b82f6' },
+                },
+                '& .MuiInputBase-input::placeholder': { color: '#64748b', opacity: 1 },
+              }}
+            />
+          </Box>
+        </DialogContent>
+        <DialogActions sx={{ borderTop: '1px solid #1e293b', px: 3, py: 1.5, gap: 1 }}>
+          <Button onClick={() => { setIsReportDialogOpen(false); setReportDev(''); setReportMessage(''); }} sx={{ color: '#94a3b8', textTransform: 'none' }}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSendReport}
+            variant="contained"
+            disabled={!reportDev || !reportMessage.trim() || reportSending}
+            sx={{ bgcolor: '#f59e0b', color: '#000', fontWeight: 'bold', textTransform: 'none', '&:hover': { bgcolor: '#d97706' }, '&.Mui-disabled': { bgcolor: 'rgba(245,158,11,0.3)', color: 'rgba(0,0,0,0.4)' } }}
+          >
+            {reportSending ? <CircularProgress size={18} sx={{ color: '#000' }} /> : 'Send'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+
      {/* Keyboard Shortcuts Dialog */}
      <Dialog
        open={isShortcutsDialogOpen}
@@ -1182,7 +1332,7 @@ export const AuditSession: React.FC = () => {
          <Typography variant="body1" sx={{ color: '#cbd5e1', mb: 2 }}>
            {(() => {
              const navState = location.state as any;
-              return navState?.useExistingFeed 
+              return navState?.useExistingFeed
                ? `You have successfully completed this feed session.`
                : `You have successfully audited this session of 50 items.`;
            })()}
@@ -1204,9 +1354,9 @@ export const AuditSession: React.FC = () => {
            const feedPageSize = activeTab?.rowsPerPage || 20;
            return (
              <>
-                <Button 
-                  fullWidth 
-                  variant="contained" 
+                <Button
+                  fullWidth
+                  variant="contained"
                  onClick={isFeedSession ? handleLoadNextFeedPage : async () => {
                    setShowCompletionModal(false);
                    const nextPage = sessionPageNo + 1;
@@ -1217,9 +1367,9 @@ export const AuditSession: React.FC = () => {
                >
                  {isFeedSession ? `Audit Next ${feedPageSize} Anomalies` : 'Audit Next 50 Items'}
                </Button>
-                <Button 
-                  fullWidth 
-                  variant="outlined" 
+                <Button
+                  fullWidth
+                  variant="outlined"
                  onClick={() => {
                    setShowCompletionModal(false);
                    if (!isFeedSession) invalidateDashboardCache();
--- a/src/store/feedStore.ts
+++ b/src/store/feedStore.ts
@@ -58,6 +58,7 @@ interface FeedState {
  dashboardCache: DashboardCache;
  searchAnomalyId: string;
  isRectificationEnabled: boolean;
+  isFeedLoading: boolean;

  // Actions
  setTabs: (tabs: FeedTab[]) => void;
@@ -82,6 +83,7 @@ interface FeedState {
  setFilterPlaza: (val: string) => void;
  setSearchAnomalyId: (id: string) => void;
  setIsRectificationEnabled: (val: boolean) => void;
+  setIsFeedLoading: (val: boolean) => void;
  resetStore: () => void;
 }

@@ -120,6 +122,7 @@ const initialFeedState = {
  dashboardCache: EMPTY_DASHBOARD_CACHE,
  searchAnomalyId: '',
  isRectificationEnabled: false,
+  isFeedLoading: false,
 };

 export const useFeedStore = create<FeedState>()(
@@ -148,6 +151,7 @@ export const useFeedStore = create<FeedState>()(
      setFilterPlaza: (filterPlaza) => set({ filterPlaza }),
      setSearchAnomalyId: (searchAnomalyId) => set({ searchAnomalyId }),
      setIsRectificationEnabled: (isRectificationEnabled) => set({ isRectificationEnabled }),
+      setIsFeedLoading: (isFeedLoading) => set({ isFeedLoading }),
      addTab: (tab) => set((state) => ({ tabs: [...state.tabs, tab], selectedTabIndex: state.tabs.length })),
      closeTab: (index) => set((state) => {
        const newTabs = [...state.tabs];
--- a/src/store/toastStore.ts
+++ b/src/store/toastStore.ts
@@ -0,0 +1,30 @@
+import { create } from 'zustand';
+
+export type ToastSeverity = 'success' | 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  severity: ToastSeverity;
+}
+
+interface ToastState {
+  toasts: Toast[];
+  showToast: (message: string, severity?: ToastSeverity) => void;
+  removeToast: (id: string) => void;
+}
+
+export const useToastStore = create<ToastState>((set) => ({
+  toasts: [],
+
+  showToast: (message, severity = 'info') => {
+    const id = `${Date.now()}-${Math.random()}`;
+    set((state) => ({ toasts: [...state.toasts, { id, message, severity }] }));
+    setTimeout(() => {
+      useToastStore.getState().removeToast(id);
+    }, 4000);
+  },
+
+  removeToast: (id) =>
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) })),
+}));
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,7 +6,13 @@ export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: true,
-    // Reverse proxy is no longer needed since endpoints allow CORS natively
+    proxy: {
+      '/api/rocketchat': {
+        target: 'https://text.seekright.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api\/rocketchat/, ''),
+      },
+    },
  },
  preview: {
    allowedHosts: true,