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/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 {
@@ -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');
      }
@@ -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) {
@@ -287,9 +351,9 @@ 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) => {
@@ -351,7 +415,6 @@ export const AuditSession: React.FC = () => {
    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);

@@ -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) {
+      // 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;
      }
    }
@@ -451,7 +520,7 @@ 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();

@@ -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);
@@ -791,6 +860,16 @@ 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>

@@ -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}
--- 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,