Implement Phase 2 activity monitoring frontend

- Add ActivityStream page with paginated activity list
- Add user, action type, and date range filters
- Implement auto-refresh every 30 seconds (pauses with filters)
- Add "New activity" indicator for real-time updates
- Add export modal with date range picker for CSV download
- Update admin navigation to dropdown with Users and Activity links

src/App.jsx

@@ -8,6 +8,7 @@ import AdminRoute from './components/AdminRoute';
 import Login from './pages/Login';
 import UserList from './pages/admin/UserList';
 import UserDetail from './pages/admin/UserDetail';
+import ActivityStream from './pages/admin/ActivityStream';
 
 const ApartmentDashboard = () => {
   // Router
@@ -562,13 +563,29 @@ const ApartmentDashboard = () => {
               Analytics
             </Link>
             {user && user.role === 'admin' && (
-              <Link
+              <div className="relative group">
-                to="/admin/users"
+                <button
-                className={`flex items-center space-x-2 px-4 py-2 rounded-md ${location.pathname.startsWith('/admin') ? 'bg-violet-600 text-white' : 'bg-violet-100 text-violet-700 border border-violet-300 hover:bg-violet-200'}`}
+                  className={`flex items-center space-x-2 px-4 py-2 rounded-md ${location.pathname.startsWith('/admin') ? 'bg-violet-600 text-white' : 'bg-violet-100 text-violet-700 border border-violet-300 hover:bg-violet-200'}`}
-              >
+                >
-                <Shield className="w-4 h-4" />
+                  <Shield className="w-4 h-4" />
-                <span>Admin</span>
+                  <span>Admin</span>
-              </Link>
+                  <ChevronDown className="w-4 h-4" />
+                </button>
+                <div className="absolute left-0 mt-1 w-48 bg-white rounded-md shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150 z-50">
+                  <Link
+                    to="/admin/users"
+                    className={`block px-4 py-2 text-sm hover:bg-violet-50 ${location.pathname === '/admin/users' ? 'bg-violet-100 text-violet-700' : 'text-gray-700'}`}
+                  >
+                    Users
+                  </Link>
+                  <Link
+                    to="/admin/activity"
+                    className={`block px-4 py-2 text-sm hover:bg-violet-50 ${location.pathname === '/admin/activity' ? 'bg-violet-100 text-violet-700' : 'text-gray-700'}`}
+                  >
+                    Activity
+                  </Link>
+                </div>
+              </div>
             )}
           </div>
         </div>
@@ -1294,6 +1311,11 @@ const ApartmentDashboard = () => {
               <UserDetail />
             </AdminRoute>
           } />
+          <Route path="/admin/activity" element={
+            <AdminRoute>
+              <ActivityStream />
+            </AdminRoute>
+          } />
 
           {/* Catch-all redirect to overview */}
           <Route path="*" element={<Navigate to="/" replace />} />

src/pages/admin/ActivityStream.jsx

@@ -0,0 +1,717 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  RefreshCw,
+  Activity,
+  Download,
+  Filter,
+  X,
+  ChevronLeft,
+  ChevronRight,
+  Bell,
+  Calendar,
+  User,
+  LogIn,
+  LogOut,
+  Eye,
+  Navigation
+} from 'lucide-react';
+
+const API_BASE = 'https://apartments.maverickapplications.com/api';
+
+// Action type icons and labels
+const ACTION_CONFIG = {
+  LOGIN: { icon: LogIn, label: 'Logged in', color: 'text-green-600' },
+  LOGOUT: { icon: LogOut, label: 'Logged out', color: 'text-gray-600' },
+  PAGE_VIEW: { icon: Eye, label: 'Viewed', color: 'text-blue-600' },
+  NAVIGATION: { icon: Navigation, label: 'Navigated', color: 'text-violet-600' },
+  API_CALL: { icon: Activity, label: 'API call', color: 'text-orange-600' },
+  ADMIN_ENABLE_USER: { icon: User, label: 'Enabled user', color: 'text-green-600' },
+  ADMIN_DISABLE_USER: { icon: User, label: 'Disabled user', color: 'text-red-600' },
+  ADMIN_PROMOTE_USER: { icon: User, label: 'Promoted user', color: 'text-violet-600' },
+  ADMIN_DEMOTE_USER: { icon: User, label: 'Demoted user', color: 'text-orange-600' }
+};
+
+// Available action types for filter
+const ACTION_TYPES = [
+  { value: '', label: 'All Actions' },
+  { value: 'LOGIN', label: 'Login' },
+  { value: 'LOGOUT', label: 'Logout' },
+  { value: 'PAGE_VIEW', label: 'Page View' },
+  { value: 'NAVIGATION', label: 'Navigation' }
+];
+
+const ActivityStream = () => {
+  const navigate = useNavigate();
+
+  // State
+  const [activities, setActivities] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Pagination
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalActivities, setTotalActivities] = useState(0);
+  const limit = 50;
+
+  // Filters
+  const [userFilter, setUserFilter] = useState('');
+  const [actionFilter, setActionFilter] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  // Users for filter dropdown
+  const [users, setUsers] = useState([]);
+  const [loadingUsers, setLoadingUsers] = useState(false);
+
+  // Auto-refresh state
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [newActivityCount, setNewActivityCount] = useState(0);
+  const [lastActivityId, setLastActivityId] = useState(null);
+  const autoRefreshInterval = useRef(null);
+
+  // Export modal state
+  const [showExportModal, setShowExportModal] = useState(false);
+  const [exportStartDate, setExportStartDate] = useState('');
+  const [exportEndDate, setExportEndDate] = useState('');
+  const [exporting, setExporting] = useState(false);
+
+  // Check if filters are active
+  const hasActiveFilters = userFilter || actionFilter || startDate || endDate;
+
+  // Fetch users for filter dropdown
+  const fetchUsers = useCallback(async () => {
+    setLoadingUsers(true);
+    try {
+      const response = await fetch(`${API_BASE}/admin/users?limit=100`, {
+        credentials: 'include'
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setUsers(data.data.users || []);
+      }
+    } catch (err) {
+      console.error('Error fetching users:', err);
+    } finally {
+      setLoadingUsers(false);
+    }
+  }, []);
+
+  // Fetch activities
+  const fetchActivities = useCallback(async (isBackgroundRefresh = false) => {
+    if (!isBackgroundRefresh) {
+      setLoading(true);
+    }
+    setError(null);
+
+    try {
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: limit.toString()
+      });
+
+      if (userFilter) {
+        params.append('userId', userFilter);
+      }
+      if (actionFilter) {
+        params.append('action', actionFilter);
+      }
+      if (startDate) {
+        params.append('startDate', new Date(startDate).toISOString());
+      }
+      if (endDate) {
+        // Set end date to end of day
+        const end = new Date(endDate);
+        end.setHours(23, 59, 59, 999);
+        params.append('endDate', end.toISOString());
+      }
+
+      const response = await fetch(`${API_BASE}/admin/activity?${params}`, {
+        credentials: 'include'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch activity data');
+      }
+
+      const data = await response.json();
+      const newActivities = data.activities || [];
+
+      // Check for new activities (for indicator)
+      if (isBackgroundRefresh && newActivities.length > 0 && lastActivityId) {
+        const newCount = newActivities.findIndex(a => a._id === lastActivityId);
+        if (newCount > 0) {
+          setNewActivityCount(newCount);
+        } else if (newCount === -1 && newActivities[0]._id !== lastActivityId) {
+          // All activities are new (or first activity changed)
+          setNewActivityCount(newActivities.length);
+        }
+      }
+
+      if (!isBackgroundRefresh) {
+        setActivities(newActivities);
+        setNewActivityCount(0);
+        if (newActivities.length > 0) {
+          setLastActivityId(newActivities[0]._id);
+        }
+      }
+
+      setTotalPages(data.pagination?.pages || 1);
+      setTotalActivities(data.pagination?.total || 0);
+    } catch (err) {
+      console.error('Error fetching activities:', err);
+      if (!isBackgroundRefresh) {
+        setError(err.message);
+      }
+    } finally {
+      if (!isBackgroundRefresh) {
+        setLoading(false);
+      }
+    }
+  }, [page, userFilter, actionFilter, startDate, endDate, lastActivityId]);
+
+  // Load new activities when indicator is clicked
+  const loadNewActivities = () => {
+    setNewActivityCount(0);
+    fetchActivities(false);
+  };
+
+  // Fetch on mount and when dependencies change
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  useEffect(() => {
+    fetchActivities();
+  }, [fetchActivities]);
+
+  // Auto-refresh every 30 seconds (when tab is active and no filters)
+  useEffect(() => {
+    // Clear existing interval
+    if (autoRefreshInterval.current) {
+      clearInterval(autoRefreshInterval.current);
+      autoRefreshInterval.current = null;
+    }
+
+    // Only auto-refresh if enabled and no filters active
+    if (autoRefresh && !hasActiveFilters) {
+      autoRefreshInterval.current = setInterval(() => {
+        // Only refresh if document is visible
+        if (!document.hidden) {
+          fetchActivities(true);
+        }
+      }, 30000); // 30 seconds
+    }
+
+    return () => {
+      if (autoRefreshInterval.current) {
+        clearInterval(autoRefreshInterval.current);
+      }
+    };
+  }, [autoRefresh, hasActiveFilters, fetchActivities]);
+
+  // Pause auto-refresh when tab is hidden
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        // Tab is hidden, pause is handled by the interval check
+      } else {
+        // Tab is visible again, do an immediate check
+        if (autoRefresh && !hasActiveFilters) {
+          fetchActivities(true);
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [autoRefresh, hasActiveFilters, fetchActivities]);
+
+  // Handle export
+  const handleExport = async () => {
+    if (!exportStartDate || !exportEndDate) {
+      alert('Please select both start and end dates');
+      return;
+    }
+
+    setExporting(true);
+    try {
+      const params = new URLSearchParams({
+        startDate: new Date(exportStartDate).toISOString(),
+        endDate: new Date(exportEndDate + 'T23:59:59.999').toISOString()
+      });
+
+      if (userFilter) {
+        params.append('userId', userFilter);
+      }
+      if (actionFilter) {
+        params.append('action', actionFilter);
+      }
+
+      const response = await fetch(`${API_BASE}/admin/activity/export?${params}`, {
+        credentials: 'include'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to export activity data');
+      }
+
+      // Get filename from content-disposition header or generate one
+      const contentDisposition = response.headers.get('content-disposition');
+      let filename = `activity-export-${exportStartDate}-to-${exportEndDate}.csv`;
+      if (contentDisposition) {
+        const match = contentDisposition.match(/filename="?([^"]+)"?/);
+        if (match) {
+          filename = match[1];
+        }
+      }
+
+      // Download the file
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+
+      setShowExportModal(false);
+      setExportStartDate('');
+      setExportEndDate('');
+    } catch (err) {
+      console.error('Error exporting activity:', err);
+      alert(err.message);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  // Clear all filters
+  const clearFilters = () => {
+    setUserFilter('');
+    setActionFilter('');
+    setStartDate('');
+    setEndDate('');
+    setPage(1);
+  };
+
+  // Format relative time
+  const formatRelativeTime = (dateStr) => {
+    if (!dateStr) return '';
+
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSeconds < 60) {
+      return 'Just now';
+    } else if (diffMinutes < 60) {
+      return `${diffMinutes} minute${diffMinutes !== 1 ? 's' : ''} ago`;
+    } else if (diffHours < 24) {
+      return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
+    } else if (diffDays < 7) {
+      return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
+    } else {
+      return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+      });
+    }
+  };
+
+  // Get action description
+  const getActionDescription = (activity) => {
+    const config = ACTION_CONFIG[activity.action] || { label: activity.action };
+
+    switch (activity.action) {
+      case 'PAGE_VIEW':
+        return `viewed ${activity.metadata?.path || 'a page'}`;
+      case 'NAVIGATION':
+        return `navigated from ${activity.metadata?.from || 'unknown'} to ${activity.metadata?.to || 'unknown'}`;
+      case 'LOGIN':
+        return 'logged in';
+      case 'LOGOUT':
+        return 'logged out';
+      case 'ADMIN_ENABLE_USER':
+        return 'enabled a user account';
+      case 'ADMIN_DISABLE_USER':
+        return 'disabled a user account';
+      case 'ADMIN_PROMOTE_USER':
+        return 'promoted a user to admin';
+      case 'ADMIN_DEMOTE_USER':
+        return 'demoted a user from admin';
+      default:
+        return config.label.toLowerCase();
+    }
+  };
+
+  // Get action icon
+  const getActionIcon = (action) => {
+    const config = ACTION_CONFIG[action] || { icon: Activity, color: 'text-gray-600' };
+    const Icon = config.icon;
+    return <Icon className={`w-4 h-4 ${config.color}`} />;
+  };
+
+  // Navigate to user detail
+  const handleUserClick = (userId, e) => {
+    e.stopPropagation();
+    navigate(`/admin/users/${userId}`);
+  };
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+          <p className="text-red-700 mb-4">Error: {error}</p>
+          <button
+            onClick={() => fetchActivities()}
+            className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Activity Stream</h1>
+          <p className="text-gray-600">
+            {totalActivities} total activit{totalActivities !== 1 ? 'ies' : 'y'}
+            {hasActiveFilters && ' (filtered)'}
+          </p>
+        </div>
+        <div className="flex items-center space-x-3">
+          {/* Export Button */}
+          <button
+            onClick={() => setShowExportModal(true)}
+            className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-md bg-white hover:bg-gray-50"
+          >
+            <Download className="w-4 h-4" />
+            <span>Export</span>
+          </button>
+
+          {/* Refresh Button */}
+          <button
+            onClick={() => fetchActivities()}
+            disabled={loading}
+            className="flex items-center space-x-2 px-4 py-2 bg-violet-600 text-white rounded-md hover:bg-violet-700 disabled:opacity-50"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            <span>Refresh</span>
+          </button>
+        </div>
+      </div>
+
+      {/* New Activity Indicator */}
+      {newActivityCount > 0 && (
+        <button
+          onClick={loadNewActivities}
+          className="w-full flex items-center justify-center space-x-2 py-3 bg-violet-100 text-violet-700 rounded-lg hover:bg-violet-200 transition-colors"
+        >
+          <Bell className="w-4 h-4" />
+          <span>{newActivityCount} new activit{newActivityCount !== 1 ? 'ies' : 'y'} available</span>
+        </button>
+      )}
+
+      {/* Filters */}
+      <div className="bg-white rounded-lg shadow-md p-4">
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center space-x-2">
+            <Filter className="w-5 h-5 text-gray-500" />
+            <span className="font-medium text-gray-700">Filters:</span>
+          </div>
+
+          {/* User Filter */}
+          <div className="flex items-center space-x-2">
+            <label className="text-sm text-gray-600">User:</label>
+            <select
+              value={userFilter}
+              onChange={(e) => { setUserFilter(e.target.value); setPage(1); }}
+              className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+              disabled={loadingUsers}
+            >
+              <option value="">All Users</option>
+              {users.map((user) => (
+                <option key={user._id} value={user._id}>
+                  {user.name} ({user.email})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Action Filter */}
+          <div className="flex items-center space-x-2">
+            <label className="text-sm text-gray-600">Action:</label>
+            <select
+              value={actionFilter}
+              onChange={(e) => { setActionFilter(e.target.value); setPage(1); }}
+              className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+            >
+              {ACTION_TYPES.map((type) => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Date Range */}
+          <div className="flex items-center space-x-2">
+            <Calendar className="w-4 h-4 text-gray-500" />
+            <input
+              type="date"
+              value={startDate}
+              onChange={(e) => { setStartDate(e.target.value); setPage(1); }}
+              className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+              placeholder="Start Date"
+            />
+            <span className="text-gray-500">to</span>
+            <input
+              type="date"
+              value={endDate}
+              onChange={(e) => { setEndDate(e.target.value); setPage(1); }}
+              className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+              placeholder="End Date"
+            />
+          </div>
+
+          {/* Clear Filters */}
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="flex items-center space-x-1 px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md"
+            >
+              <X className="w-4 h-4" />
+              <span>Clear</span>
+            </button>
+          )}
+
+          {/* Auto-refresh toggle */}
+          <div className="ml-auto flex items-center space-x-2">
+            <label className="text-sm text-gray-600">Auto-refresh:</label>
+            <button
+              onClick={() => setAutoRefresh(!autoRefresh)}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                autoRefresh && !hasActiveFilters ? 'bg-violet-600' : 'bg-gray-300'
+              }`}
+              disabled={hasActiveFilters}
+              title={hasActiveFilters ? 'Auto-refresh is paused while filters are active' : ''}
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                  autoRefresh && !hasActiveFilters ? 'translate-x-6' : 'translate-x-1'
+                }`}
+              />
+            </button>
+            {hasActiveFilters && (
+              <span className="text-xs text-gray-500">(paused)</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Activity List */}
+      <div className="bg-white rounded-lg shadow-md overflow-hidden">
+        {loading && activities.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <RefreshCw className="w-8 h-8 animate-spin text-violet-600" />
+            <span className="ml-3 text-gray-600">Loading activities...</span>
+          </div>
+        ) : activities.length === 0 ? (
+          <div className="text-center py-12">
+            <Activity className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">No Activity Found</h3>
+            <p className="text-gray-600">
+              {hasActiveFilters
+                ? 'Try adjusting your filters to see more results.'
+                : 'No activity has been recorded yet.'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-100">
+            {activities.map((activity) => (
+              <div
+                key={activity._id}
+                className="p-4 hover:bg-gray-50 transition-colors"
+              >
+                <div className="flex items-start space-x-4">
+                  {/* Avatar */}
+                  <div
+                    className="flex-shrink-0 cursor-pointer"
+                    onClick={(e) => handleUserClick(activity.userId, e)}
+                  >
+                    {activity.userPicture ? (
+                      <img
+                        src={activity.userPicture}
+                        alt={activity.userName}
+                        className="w-10 h-10 rounded-full"
+                      />
+                    ) : (
+                      <div className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center">
+                        <span className="text-sm font-medium text-gray-600">
+                          {activity.userName?.charAt(0)?.toUpperCase() || '?'}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center space-x-2">
+                      <button
+                        onClick={(e) => handleUserClick(activity.userId, e)}
+                        className="font-medium text-gray-900 hover:text-violet-600 hover:underline"
+                      >
+                        {activity.userName || 'Unknown User'}
+                      </button>
+                      <span className="text-gray-600">
+                        {getActionDescription(activity)}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2 mt-1 text-sm text-gray-500">
+                      {getActionIcon(activity.action)}
+                      <span>{activity.userEmail}</span>
+                      <span className="text-gray-300">|</span>
+                      <span>{formatRelativeTime(activity.timestamp)}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between px-4 py-3 bg-gray-50 border-t">
+            <div className="text-sm text-gray-600">
+              Showing {((page - 1) * limit) + 1} to {Math.min(page * limit, totalActivities)} of {totalActivities} activities
+            </div>
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={() => setPage(Math.max(1, page - 1))}
+                disabled={page === 1 || loading}
+                className="flex items-center px-3 py-1 border border-gray-300 rounded-md bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <ChevronLeft className="w-4 h-4" />
+                <span className="ml-1">Previous</span>
+              </button>
+              <span className="px-3 py-1 text-sm">
+                Page {page} of {totalPages}
+              </span>
+              <button
+                onClick={() => setPage(Math.min(totalPages, page + 1))}
+                disabled={page === totalPages || loading}
+                className="flex items-center px-3 py-1 border border-gray-300 rounded-md bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span className="mr-1">Next</span>
+                <ChevronRight className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Export Modal */}
+      {showExportModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-lg max-w-md w-full p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold">Export Activity Data</h3>
+              <button
+                onClick={() => setShowExportModal(false)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <p className="text-gray-600 mb-4">
+              Select a date range to export activity data as CSV. Export is limited to 10,000 records.
+            </p>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Start Date
+                </label>
+                <input
+                  type="date"
+                  value={exportStartDate}
+                  onChange={(e) => setExportStartDate(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  End Date
+                </label>
+                <input
+                  type="date"
+                  value={exportEndDate}
+                  onChange={(e) => setExportEndDate(e.target.value)}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
+                />
+              </div>
+
+              {userFilter && (
+                <p className="text-sm text-gray-500">
+                  Note: Current user filter will be applied to export.
+                </p>
+              )}
+              {actionFilter && (
+                <p className="text-sm text-gray-500">
+                  Note: Current action filter will be applied to export.
+                </p>
+              )}
+            </div>
+
+            <div className="flex justify-end space-x-3 mt-6">
+              <button
+                onClick={() => setShowExportModal(false)}
+                disabled={exporting}
+                className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleExport}
+                disabled={exporting || !exportStartDate || !exportEndDate}
+                className="flex items-center space-x-2 px-4 py-2 bg-violet-600 text-white rounded-md hover:bg-violet-700 disabled:opacity-50"
+              >
+                {exporting ? (
+                  <>
+                    <RefreshCw className="w-4 h-4 animate-spin" />
+                    <span>Exporting...</span>
+                  </>
+                ) : (
+                  <>
+                    <Download className="w-4 h-4" />
+                    <span>Export CSV</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ActivityStream;