feat: Add disabled prop to ReportGeneratorButton and enhance ActivityLogPage with period filtering

jbouse · jbouse · commit eb75c7e96a7b · 2025-08-16T15:53:22.000-04:00
diff --git a/src/components/ReportGeneratorButton.tsx b/src/components/ReportGeneratorButton.tsx
@@ -22,6 +22,7 @@ const ReportGeneratorButton: React.FC<ReportGeneratorButtonProps> = ({
   buildReportData,
   onReportGenerated,
   buttonText = 'Generate Report',
+  disabled
 }) => {
   const [availableReportTypes, setAvailableReportTypes] = useState<ReportType[]>([]);
   const [showReportModal, setShowReportModal] = useState(false);
@@ -87,7 +88,7 @@ const ReportGeneratorButton: React.FC<ReportGeneratorButtonProps> = ({
       <Button
         variant="success"
         onClick={handleGenerateReport}
-        disabled={generating || !isReportTypeAvailable}
+        disabled={generating || !isReportTypeAvailable || disabled}
         title={!isReportTypeAvailable ? 'Required report type is not available.' : undefined}
       >
         {buttonText}
diff --git a/src/pages/ActivityLogPage.tsx b/src/pages/ActivityLogPage.tsx
@@ -8,34 +8,28 @@ import activityLogService from '../services/activityLogService';
 import ReportGeneratorButton from '../components/ReportGeneratorButton';
 import ContextSelect from '../components/ContextSelect';
 import { Volunteer } from '../types/Volunteer';
+import { Period } from '../types/Period';
 import { ActivityLog } from '../types/ActivityLog';
 import { ReportType } from '../types/Report';
-import { ALERT_NO_CONTEXT_SELECTED } from '../constants/messages';
+import { ALERT_NOT_LOGGED_IN } from '../constants/messages';
 
 
 const ActivityLogPage: React.FC = () => {
-  const { selectedPeriod } = usePeriod();
-  const { volunteers } = useVolunteers();
   const { user, token } = useContext(AuthContext);
-  const [activityLogs, setActivityLogs] = useState<ActivityLog[]>([]);
+  const { volunteers, loading: volunteersLoading } = useVolunteers();
+  const { periods, loading: periodsLoading } = usePeriod();
   const [loading, setLoading] = useState(false);
+  const [activityLogs, setActivityLogs] = useState<ActivityLog[]>([]);
+  const [selectedPeriod, setSelectedPeriod] = useState<Period | null>(null);
   const [selectedVolunteer, setSelectedVolunteer] = useState<Volunteer | null>(null);
 
   useEffect(() => {
-    if (!selectedPeriod) return;
     setLoading(true);
     const fetchLogs = async () => {
       try {
         const token = localStorage.getItem('token') || '';
         let logs: ActivityLog[] = [];
-        if (selectedVolunteer) {
-          logs = await activityLogService.listByVolunteer(selectedVolunteer.volunteerId, token);
-          // Filter to current period
-          logs = logs.filter(l => l.periodId === selectedPeriod.periodId);
-        } else {
-          logs = await activityLogService.list(token);
-          logs = logs.filter(l => l.periodId === selectedPeriod.periodId);
-        }
+        logs = await activityLogService.list(token);
         logs.sort((a, b) => new Date(a.timestamp || '').getTime() - new Date(b.timestamp || '').getTime());
         setActivityLogs(logs);
       } catch (e) {
@@ -47,9 +41,22 @@ const ActivityLogPage: React.FC = () => {
     fetchLogs();
   }, [selectedPeriod, selectedVolunteer]);
 
-  if (!selectedPeriod) {
-    return <Alert variant="warning">{ALERT_NO_CONTEXT_SELECTED}</Alert>;
-  }
+  if (!token) return <Alert variant="warning">{ALERT_NOT_LOGGED_IN}</Alert>;
+
+  // Filter and sort activity logs before rendering
+  const filteredActivityLogs = (activityLogs || [])
+    .filter(l => {
+      // Filter by selected period if set
+      if (selectedPeriod && l.periodId !== selectedPeriod.periodId) return false;
+      // Filter by selected volunteer if set
+      if (selectedVolunteer && l.volunteerId !== selectedVolunteer.volunteerId) return false;
+      return true;
+    })
+    .sort((a, b) => {
+      const aTimestamp = new Date(a.timestamp || '').getTime();
+      const bTimestamp = new Date(b.timestamp || '').getTime();
+      return aTimestamp - bTimestamp;
+    });
 
   return (
     <Container>
@@ -58,26 +65,35 @@ const ActivityLogPage: React.FC = () => {
           <Row className="align-items-center">
             <Col><strong>Activity Log</strong></Col>
             <Col md="auto" className="d-flex align-items-center gap-2">
+              <ContextSelect
+                label="Period"
+                options={periods}
+                value={selectedPeriod ? selectedPeriod.periodId : null}
+                onSelect={id => setSelectedPeriod(id ? periods.find(p => p.periodId === id) ?? null : null)}
+                loading={periodsLoading}
+                getOptionLabel={p => p.description}
+                getOptionValue={p => p.periodId}
+              />
               <ContextSelect
                 label="Volunteer"
                 options={volunteers}
                 value={selectedVolunteer ? selectedVolunteer.volunteerId : null}
                 onSelect={id => setSelectedVolunteer(id ? volunteers.find(v => v.volunteerId === id) ?? null : null)}
-                loading={loading}
-                getOptionLabel={v => v.name}
+                loading={volunteersLoading}
+                getOptionLabel={v => v.callsign ? `${v.name} (${v.callsign})` : v.name}
                 getOptionValue={v => v.volunteerId}
               />
               <ReportGeneratorButton
                 requiredReportType={ReportType.ICS214}
-                token={token || ''}
+                token={token}
                 user={user}
                 buttonText="Generate ICS-214"
-                disabled={!selectedPeriod || activityLogs.length === 0}
+                disabled={filteredActivityLogs.length === 0}
                 buildReportData={({ positionTitle }) => {
                   // ICS-214 report payload builder
                   // Find referenced volunteers and count log entries per volunteer
                   const logCounts: Record<string, number> = {};
-                  for (const log of activityLogs) {
+                  for (const log of filteredActivityLogs) {
                     if (log.volunteerId) {
                       logCounts[log.volunteerId] = (logCounts[log.volunteerId] || 0) + 1;
                     }
@@ -89,7 +105,7 @@ const ActivityLogPage: React.FC = () => {
                   const referencedVolunteers = volunteers.filter(v => topVolunteerIds.includes(v.volunteerId));
                   return {
                     period: selectedPeriod,
-                    activityLogs,
+                    activityLogs: filteredActivityLogs,
                     volunteers: referencedVolunteers,
                     preparedBy: user,
                     positionTitle,
@@ -115,10 +131,10 @@ const ActivityLogPage: React.FC = () => {
                     <td><Placeholder animation="glow"><Placeholder xs={10} /></Placeholder></td>
                   </tr>
                 ))
-              ) : activityLogs.length === 0 ? (
+              ) : filteredActivityLogs.length === 0 ? (
                 <tr><td colSpan={2} className="text-center">No activity log entries found.</td></tr>
               ) : (
-                activityLogs.map(entry => (
+                filteredActivityLogs.map(entry => (
                   <tr key={entry.logId}>
                     <td>{entry.timestamp ? formatLocalDateTime(entry.timestamp) : ''}</td>
                     <td>{entry.details ? `${entry.details}` : ''}</td>
diff --git a/src/pages/Incidents/IncidentsPage.tsx b/src/pages/Incidents/IncidentsPage.tsx
@@ -16,8 +16,6 @@ const IncidentsPage: React.FC = () => {
     incidents, 
     loading, 
     error, 
-    selectedIncident, 
-    setSelectedIncident, 
     addIncident, 
     updateIncident, 
     deleteIncident 
@@ -26,6 +24,7 @@ const IncidentsPage: React.FC = () => {
   const [editIncident, setEditIncident] = useState<Incident | null>(null);
   const [showView, setShowView] = useState(false);
   const [viewIncident, setViewIncident] = useState<Incident | null>(null);
+  const [selectedIncident, setSelectedIncident] = useState<Incident | null>(null);
   // Sorting and filtering state
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
 
diff --git a/src/pages/Locations/LocationsPage.tsx b/src/pages/Locations/LocationsPage.tsx
@@ -6,6 +6,7 @@ import { AuthContext } from '../../context/AuthContext';
 import { Container, Card, Table, Button, Alert, Placeholder, Row, Col, Spinner } from 'react-bootstrap';
 import { ArchiveFill, CheckCircleFill, DashCircleFill } from 'react-bootstrap-icons';
 import { Location, LocationStatus } from '../../types/Location';
+import { Unit } from '../../types/Unit';
 import LocationForm from './LocationForm';
 import { useIncident } from '../../context/IncidentContext';
 import LocationViewModal from './LocationViewModal';
@@ -23,15 +24,16 @@ const LocationsPage: React.FC = () => {
     updateLocation, 
     deleteLocation 
   } = useLocation();
+  const { units, loading: unitsLoading } = useUnit();
+  const { selectedIncident } = useIncident();
   const [showForm, setShowForm] = useState(false);
   const [editLocation, setEditLocation] = useState<Location | null>(null);
   const [showView, setShowView] = useState(false);
   const [viewLocation, setViewLocation] = useState<Location | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
+  const [selectedUnit, setSelectedUnit] = useState<Unit | null>(null);
   // Sorting and filtering state
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-  const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
-  const { units, loading: unitsLoading, selectedUnit, setSelectedUnit } = useUnit();
-  const { selectedIncident } = useIncident();
 
   const handleAdd = () => {
     setEditLocation(null);
diff --git a/src/pages/Periods/PeriodsPage.tsx b/src/pages/Periods/PeriodsPage.tsx
@@ -4,6 +4,7 @@ import { AuthContext } from '../../context/AuthContext';
 import { Container, Card, Table, Button, Alert, Placeholder, Row, Col } from 'react-bootstrap';
 import ContextSelect from '../../components/ContextSelect';
 import { Period } from '../../types/Period';
+import { Unit } from '../../types/Unit';
 import { formatLocalDateTime } from '../../utils/dateFormat';
 import { useIncident } from '../../context/IncidentContext';
 import PeriodForm from './PeriodForm';
@@ -22,17 +23,17 @@ const PeriodsPage: React.FC = () => {
     addPeriod,
     updatePeriod,
     deletePeriod,
-    selectedPeriod,
-    setSelectedPeriod,
   } = usePeriod();
+  const { incidents, loading: incidentsLoading } = useIncident();
+  const { units, loading: unitsLoading } = useUnit();
   const [showForm, setShowForm] = useState(false);
   const [editPeriod, setEditPeriod] = useState<Period | null>(null);
   const [showView, setShowView] = useState(false);
   const [viewPeriod, setViewPeriod] = useState<Period | null>(null);
+  const [selectedUnit, setSelectedUnit] = useState<Unit | null>(null);
+  const [selectedPeriod, setSelectedPeriod] = useState<Period | null>(null);
   // Sorting and filtering state
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-  const { incidents, loading: incidentsLoading } = useIncident();
-  const { units, loading: unitsLoading, selectedUnit, setSelectedUnit } = useUnit();
 
   const handleAdd = () => {
     setEditPeriod(null);
diff --git a/src/pages/Resources/PeoplePage.tsx b/src/pages/Resources/PeoplePage.tsx
@@ -132,7 +132,7 @@ const PeoplePage: React.FC = () => {
                         value={selectedVolunteer ? selectedVolunteer.volunteerId : null}
                         onSelect={id => setSelectedVolunteer(id ? volunteers.find(v => v.volunteerId === id) ?? null : null)}
                         loading={loading}
-                        getOptionLabel={v => v.name}
+                        getOptionLabel={v => v.callsign ? `${v.name} (${v.callsign})` : v.name}
                         getOptionValue={v => v.volunteerId}
                       />
                     </div>
diff --git a/src/pages/Resources/RadiosResourcePage.tsx b/src/pages/Resources/RadiosResourcePage.tsx
@@ -141,7 +141,7 @@ const RadiosResourcePage: React.FC = () => {
                         value={selectedVolunteer ? selectedVolunteer.volunteerId : null}
                         onSelect={id => setSelectedVolunteer(id ? volunteers.find(v => v.volunteerId === id) ?? null : null)}
                         loading={loading}
-                        getOptionLabel={v => v.name}
+                        getOptionLabel={v => v.callsign ? `${v.name} (${v.callsign})` : v.name}
                         getOptionValue={v => v.volunteerId}
                       />
                     </div>
diff --git a/src/pages/Volunteers/VolunteersPage.tsx b/src/pages/Volunteers/VolunteersPage.tsx
@@ -97,7 +97,7 @@ const VolunteersPage: React.FC = () => {
                 value={selectedVolunteer ? selectedVolunteer.volunteerId : null}
                 onSelect={id => setSelectedVolunteer(id ? volunteers.find(v => v.volunteerId === id) ?? null : null)}
                 loading={loading}
-                getOptionLabel={v => v.name}
+                getOptionLabel={v => v.callsign ? `${v.name} (${v.callsign})` : v.name}
                 getOptionValue={v => v.volunteerId}
               />
               <Button variant="success" onClick={handleAdd} disabled={loading}>
diff --git a/src/services/activityLogService.ts b/src/services/activityLogService.ts
@@ -22,6 +22,15 @@ const activityLogService = {
     });
   },
 
+  // List activity logs by period ID using Global Secondary Index
+  async listByPeriod(id: string, token: string, onAuthError?: () => void): Promise<ActivityLog[]> {
+    return apiFetch<ActivityLog[]>({
+      path: `${API_BASE}/period/${id}`,
+      token,
+      onAuthError,
+    });
+  },
+
   // No get method as ActivityLog is immutable
 
   async create(data: Partial<ActivityLog>, token: string, onAuthError?: () => void): Promise<ActivityLog> {
