> ## Documentation Index
> Fetch the complete documentation index at: https://kunalbham.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Dashboard

> Real-time emergency response dashboard features and usage

## Dashboard Overview

The access911 dashboard provides emergency operators with a comprehensive real-time view of emergency calls, their locations, and status. The dashboard is built with modern web technologies and provides an intuitive interface for managing emergency response operations.

## Key Components

### Interactive Map

The central map component displays emergency calls as colored pins based on severity:

* **Red Pins**: Critical emergencies requiring immediate response
* **Orange Pins**: High-priority emergencies
* **Yellow Pins**: Moderate-priority emergencies

<CardGroup cols={2}>
  <Card title="Real-time Updates" icon="sync">
    Map updates automatically as new emergency calls are received
  </Card>

  <Card title="Click for Details" icon="cursor-click">
    Click any pin to view detailed emergency information
  </Card>
</CardGroup>

### Call Queue Monitor

The call queue provides a live list of incoming emergency calls with key information:

* **Call ID**: Unique identifier for each emergency call
* **Location**: Address or area of the emergency
* **Type**: Emergency type (fire, medical, etc.)
* **Severity**: Priority level (Critical, High, Moderate)
* **Status**: Current response status
* **Timestamp**: When the call was received

### City Selector

Choose from different emergency scenarios to simulate various disaster types:

* **Los Angeles Wildfire**: Structure fires, evacuations, medical emergencies
* **Nashville Tornado**: Structural damage, debris injuries, shelter needs
* **San Francisco Earthquake**: Building collapse, gas leaks, trapped persons
* **Florida Hurricane**: Flooding, wind damage, power outages

### Simulation Controls

Generate realistic emergency scenarios for testing and training:

<AccordionGroup>
  <Accordion icon="flask" title="Scenario Selection">
    Choose from predefined emergency scenarios that simulate real-world disaster conditions.
  </Accordion>

  <Accordion icon="slider" title="Call Volume">
    Adjust the number of emergency calls to generate (1-100 calls).
  </Accordion>

  <Accordion icon="play" title="Simulation Speed">
    Control the rate at which calls are generated (1x to 10x speed).
  </Accordion>
</AccordionGroup>

### Live Call Visualizer

Watch emergency calls appear in real-time with:

* **Animated Pins**: Calls appear with smooth animations
* **Status Updates**: Real-time status changes as calls are processed
* **Severity Indicators**: Color-coded priority levels
* **Call Details**: Expandable information panels

### History View

Access historical emergency call data:

* **Call Archive**: Browse past emergency calls
* **Response Times**: Track how quickly emergencies were addressed
* **Pattern Analysis**: Identify trends in emergency types and locations
* **Export Data**: Download call data for analysis

## Dashboard Features

### Real-time Updates

The dashboard uses WebSocket connections to provide real-time updates:

```javascript theme={null}
// Example: Real-time call updates
const socket = new WebSocket('wss://access911.vercel.app/ws');
socket.onmessage = (event) => {
  const callData = JSON.parse(event.data);
  updateMapPin(callData);
  updateCallQueue(callData);
};
```

### Responsive Design

The dashboard is fully responsive and works on:

* **Desktop**: Full-featured interface with all components visible
* **Tablet**: Optimized layout for touch interaction
* **Mobile**: Simplified interface for field operations

### Dark/Light Theme

Toggle between dark and light themes for different lighting conditions:

* **Dark Theme**: Optimized for night operations and low-light environments
* **Light Theme**: Clear visibility in bright daylight conditions

## Usage Workflow

### 1. Monitor Live Calls

1. Open the dashboard
2. Watch the map for new emergency pins
3. Monitor the call queue for incoming emergencies
4. Click pins for detailed information

### 2. Run Simulations

1. Select a disaster scenario from the city selector
2. Choose the number of calls to generate
3. Set the simulation speed
4. Click "Start Simulation"
5. Monitor the generated calls on the map

### 3. Review History

1. Navigate to the History section
2. Filter calls by date, type, or severity
3. Click individual calls for detailed information
4. Export data for analysis if needed

## Keyboard Shortcuts

* **Space**: Start/stop simulation
* **R**: Reset simulation
* **H**: Toggle history view
* **M**: Toggle map view
* **Q**: Toggle call queue
* **T**: Toggle theme (dark/light)

## Integration Points

The dashboard integrates with several backend services:

* **AWS DynamoDB**: Real-time call data storage
* **AWS S3**: Full call record storage
* **ElevenLabs**: AI voice agent integration
* **AWS Bedrock**: AI-powered call summarization

## Performance Considerations

The dashboard is optimized for high-performance emergency operations:

* **Real-time Updates**: Sub-second latency for call updates
* **Scalable Architecture**: Handles hundreds of concurrent calls
* **Efficient Rendering**: Optimized map rendering for smooth performance
* **Caching**: Intelligent caching for improved response times

## Troubleshooting

<AccordionGroup>
  <Accordion icon="wifi" title="Connection Issues">
    If the dashboard isn't updating:

    1. Check your internet connection
    2. Refresh the page
    3. Check browser console for errors
  </Accordion>

  <Accordion icon="map" title="Map Not Loading">
    If the map isn't displaying:

    1. Check if JavaScript is enabled
    2. Try a different browser
    3. Clear browser cache
  </Accordion>

  <Accordion icon="clock" title="Slow Updates">
    If updates are slow:

    1. Check network speed
    2. Close other browser tabs
    3. Restart the browser
  </Accordion>
</AccordionGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Regular Monitoring" icon="eye">
    Check the dashboard regularly during active operations
  </Card>

  <Card title="Quick Response" icon="bolt">
    Respond to critical calls immediately
  </Card>

  <Card title="Data Backup" icon="save">
    Export important call data regularly
  </Card>

  <Card title="Training" icon="graduation-cap">
    Use simulations for operator training
  </Card>
</CardGroup>

<Note>
  **Emergency Use**: This dashboard is for demonstration and training purposes. For actual emergency response, ensure proper integration with your existing 911 systems.
</Note>