diff --git a/example.js b/example.js
index 9c42dafe0..e3bb59688 100644
--- a/example.js
+++ b/example.js
@@ -20,6 +20,7 @@ import {
   CallTakerWindows,
   DefaultItinerary,
   DefaultMainPanel,
+  FieldTripWindows,
   MobileSearchScreen,
   ResponsiveWebapp,
   createCallTakerReducer,
@@ -89,7 +90,12 @@ const components = {
     : isBatchRoutingEnabled
       ? BatchRoutingPanel
       : DefaultMainPanel,
-  MapWindows: isCallTakerModuleEnabled ? CallTakerWindows : null,
+  MapWindows: isCallTakerModuleEnabled
+    ? () => <>
+      <CallTakerWindows />
+      <FieldTripWindows />
+    </>
+    : null,
   MobileSearchScreen: isBatchRoutingEnabled
     ? BatchSearchScreen
     : MobileSearchScreen,
diff --git a/lib/actions/call-taker.js b/lib/actions/call-taker.js
index 25ccb2ae7..5a48b8284 100644
--- a/lib/actions/call-taker.js
+++ b/lib/actions/call-taker.js
@@ -1,8 +1,9 @@
 import { getUrlParams } from '@opentripplanner/core-utils/lib/query'
+import { serialize } from 'object-to-formdata'
 import qs from 'qs'
 import { createAction } from 'redux-actions'
 
-import {searchToQuery} from '../util/call-taker'
+import {searchToQuery, sessionIsInvalid} from '../util/call-taker'
 import {URL_ROOT} from '../util/constants'
 import {getTimestamp} from '../util/state'
 
@@ -29,12 +30,16 @@ export function endCall () {
   return function (dispatch, getState) {
     const {callTaker, otp} = getState()
     const {activeCall, session} = callTaker
+    const { sessionId } = session
     if (sessionIsInvalid(session)) return
-    // Make POST request to store call.
-    const callData = new FormData()
-    callData.append('sessionId', session.sessionId)
-    callData.append('call.startTime', activeCall.startTime)
-    callData.append('call.endTime', getTimestamp())
+    // Make POST request to store new call.
+    const callData = serialize({
+      sessionId,
+      call: {
+        startTime: activeCall.startTime,
+        endTime: getTimestamp()
+      }
+    })
     fetch(`${otp.config.datastoreUrl}/calltaker/call`,
       {method: 'POST', body: callData}
     )
@@ -84,9 +89,8 @@ function newSession (datastoreUrl, verifyLoginUrl, redirect) {
     .then(res => res.json())
     .then(data => {
       const {sessionId: session} = data
-      console.log('newSession success: ' + session)
       const windowUrl = `${verifyLoginUrl}?${qs.stringify({session, redirect})}`
-      console.log('redirecting to: ' + windowUrl)
+      // Redirect to login url.
       window.location = windowUrl
     })
     .catch(error => {
@@ -104,8 +108,8 @@ function checkSession (datastoreUrl, sessionId) {
       .then(res => res.json())
       .then(session => dispatch(storeSession({session})))
       .catch(error => {
-        console.error('checkSession error', error)
         dispatch(storeSession({session: null}))
+        alert(`Error establishing auth session: ${JSON.stringify(error)}`)
       })
   }
 }
@@ -120,28 +124,12 @@ export function fetchCalls () {
     if (sessionIsInvalid(callTaker.session)) return
     const {datastoreUrl} = otp.config
     const {sessionId} = callTaker.session
-    const limit = 10
+    const limit = 30
     fetch(`${datastoreUrl}/calltaker/call?${qs.stringify({limit, sessionId})}`)
       .then(res => res.json())
-      .then(calls => {
-        console.log('GET calls response', calls)
-        dispatch(receivedCalls({calls}))
-      })
-      .catch(err => {
-        alert(`Could not fetch calls: ${JSON.stringify(err)}`)
-      })
-  }
-}
-
-/**
- * @return {boolean} - whether a calltaker session is invalid
- */
-function sessionIsInvalid (session) {
-  if (!session || !session.sessionId) {
-    console.error('No valid OTP datastore session found.')
-    return true
+      .then(calls => dispatch(receivedCalls({calls})))
+      .catch(err => alert(`Error fetching calls: ${JSON.stringify(err)}`))
   }
-  return false
 }
 
 /**
@@ -161,19 +149,13 @@ export function saveQueriesForCall (call) {
       const search = otp.searches[searchId]
       const query = searchToQuery(search, call, otp.config)
       const {sessionId} = callTaker.session
-      const queryData = new FormData()
-      queryData.append('sessionId', sessionId)
-      queryData.append('query.queryParams', query.queryParams)
-      queryData.append('query.fromPlace', query.fromPlace)
-      queryData.append('query.toPlace', query.toPlace)
-      queryData.append('query.timeStamp', query.timeStamp)
-      queryData.append('query.call.id', call.id)
+      const queryData = serialize({ sessionId, query })
       return fetch(`${datastoreUrl}/calltaker/callQuery?sessionId=${sessionId}`,
         {method: 'POST', body: queryData}
       )
         .then(res => res.json())
         .catch(err => {
-          alert(`Could not fetch calls: ${JSON.stringify(err)}`)
+          alert(`Error storing call queries: ${JSON.stringify(err)}`)
         })
     }))
   }
@@ -195,7 +177,7 @@ export function fetchQueries (callId) {
         dispatch(receivedQueries({callId, queries}))
       })
       .catch(err => {
-        alert(`Could not fetch calls: ${JSON.stringify(err)}`)
+        alert(`Error fetching queries: ${JSON.stringify(err)}`)
       })
   }
 }
diff --git a/lib/actions/field-trip.js b/lib/actions/field-trip.js
new file mode 100644
index 000000000..69d072347
--- /dev/null
+++ b/lib/actions/field-trip.js
@@ -0,0 +1,322 @@
+import { planParamsToQueryAsync } from '@opentripplanner/core-utils/lib/query'
+import { OTP_API_DATE_FORMAT, OTP_API_TIME_FORMAT } from '@opentripplanner/core-utils/lib/time'
+import moment from 'moment'
+import { serialize } from 'object-to-formdata'
+import qs from 'qs'
+import { createAction } from 'redux-actions'
+
+import {routingQuery} from './api'
+import {setQueryParam} from './form'
+import {getGroupSize, getTripFromRequest, sessionIsInvalid} from '../util/call-taker'
+
+if (typeof (fetch) === 'undefined') require('isomorphic-fetch')
+
+/// PRIVATE ACTIONS
+
+const receivedFieldTrips = createAction('RECEIVED_FIELD_TRIPS')
+const requestingFieldTrips = createAction('REQUESTING_FIELD_TRIPS')
+const receivedFieldTripDetails = createAction('RECEIVED_FIELD_TRIP_DETAILS')
+const requestingFieldTripDetails = createAction('REQUESTING_FIELD_TRIP_DETAILS')
+
+// PUBLIC ACTIONS
+
+export const setFieldTripFilter = createAction('SET_FIELD_TRIP_FILTER')
+export const setActiveFieldTrip = createAction('SET_ACTIVE_FIELD_TRIP')
+export const setGroupSize = createAction('SET_GROUP_SIZE')
+export const toggleFieldTrips = createAction('TOGGLE_FIELD_TRIPS')
+
+/**
+ * Fetch all field trip requests (as summaries).
+ */
+export function fetchFieldTrips () {
+  return async function (dispatch, getState) {
+    dispatch(requestingFieldTrips())
+    const {callTaker, otp} = getState()
+    if (sessionIsInvalid(callTaker.session)) return
+    const {datastoreUrl} = otp.config
+    const {sessionId} = callTaker.session
+    let fieldTrips = []
+    try {
+      const res = await fetch(`${datastoreUrl}/fieldtrip/getRequestsSummary?${qs.stringify({sessionId})}`)
+      fieldTrips = await res.json()
+    } catch (e) {
+      alert(`Error fetching field trips: ${JSON.stringify(e)}`)
+    }
+    dispatch(receivedFieldTrips({fieldTrips}))
+  }
+}
+
+/**
+ * Fetch details for a particular field trip request.
+ */
+export function fetchFieldTripDetails (requestId) {
+  return function (dispatch, getState) {
+    dispatch(requestingFieldTripDetails())
+    const {callTaker, otp} = getState()
+    if (sessionIsInvalid(callTaker.session)) return
+    const {datastoreUrl} = otp.config
+    const {sessionId} = callTaker.session
+    fetch(`${datastoreUrl}/fieldtrip/getRequest?${qs.stringify({requestId, sessionId})}`)
+      .then(res => res.json())
+      .then(fieldTrip => dispatch(receivedFieldTripDetails({fieldTrip})))
+      .catch(err => {
+        alert(`Error fetching field trips: ${JSON.stringify(err)}`)
+      })
+  }
+}
+
+/**
+ * Add note for field trip request.
+ */
+export function addFieldTripNote (request, note) {
+  return function (dispatch, getState) {
+    const {callTaker, otp} = getState()
+    const {datastoreUrl} = otp.config
+    if (sessionIsInvalid(callTaker.session)) return
+    const {sessionId, username} = callTaker.session
+    const noteData = serialize({
+      sessionId,
+      note: {...note, userName: username},
+      requestId: request.id
+    })
+    return fetch(`${datastoreUrl}/fieldtrip/addNote`,
+      {method: 'POST', body: noteData}
+    )
+      .then(() => dispatch(fetchFieldTripDetails(request.id)))
+      .catch(err => {
+        alert(`Error adding field trip note: ${JSON.stringify(err)}`)
+      })
+  }
+}
+
+/**
+ * Delete a specific note for a field trip request.
+ */
+export function deleteFieldTripNote (request, noteId) {
+  return function (dispatch, getState) {
+    const {callTaker, otp} = getState()
+    const {datastoreUrl} = otp.config
+    if (sessionIsInvalid(callTaker.session)) return
+    const {sessionId} = callTaker.session
+    return fetch(`${datastoreUrl}/fieldtrip/deleteNote`,
+      {method: 'POST', body: serialize({ noteId, sessionId })}
+    )
+      .then(() => dispatch(fetchFieldTripDetails(request.id)))
+      .catch(err => {
+        alert(`Error deleting field trip note: ${JSON.stringify(err)}`)
+      })
+  }
+}
+
+/**
+ * Edit teacher (AKA submitter) notes for a field trip request.
+ */
+export function editSubmitterNotes (request, submitterNotes) {
+  return function (dispatch, getState) {
+    const {callTaker, otp} = getState()
+    const {datastoreUrl} = otp.config
+    if (sessionIsInvalid(callTaker.session)) return
+    const {sessionId} = callTaker.session
+    const noteData = serialize({
+      notes: submitterNotes,
+      requestId: request.id,
+      sessionId
+    })
+    return fetch(`${datastoreUrl}/fieldtrip/editSubmitterNotes`,
+      {method: 'POST', body: noteData}
+    )
+      .then(() => dispatch(fetchFieldTripDetails(request.id)))
+      .catch(err => {
+        alert(`Error editing submitter notes: ${JSON.stringify(err)}`)
+      })
+  }
+}
+
+export function saveRequestTrip (request, outbound, groupPlan) {
+  return function (dispatch, getState) {
+    // If plan is not valid, return before persisting trip.
+    const check = checkPlanValidity(request, groupPlan)
+    if (!check.isValid) return alert(check.message)
+    const requestOrder = outbound ? 0 : 1
+    const type = outbound ? 'outbound' : 'inbound'
+    const preExistingTrip = getTripFromRequest(request, outbound)
+    if (preExistingTrip) {
+      const msg = `This action will overwrite a previously planned ${type} itinerary for this request. Do you wish to continue?`
+      if (!confirm(msg)) return
+    }
+    alert(`TODO: Save trip in request order ${requestOrder}!`)
+    // TODO: Enable saveTrip
+    // dispatch(saveTrip(request, requestOrder))
+  }
+}
+
+/**
+ * @typedef {Object} ValidationCheck
+ * @property {boolean} isValid - Whether the check is valid
+ * @property {string} message - The message explaining why the check returned
+ *   invalid.
+ */
+
+/**
+ * Checks that a group plan is valid for a given request, i.e., that it occurs
+ * on the requested travel date.
+ * @param  request   field trip request
+ * @param  groupPlan the group plan to check
+ * @return {ValidationCheck}
+ */
+function checkPlanValidity (request, groupPlan) {
+  if (groupPlan == null) {
+    return {
+      isValid: false,
+      message: 'No active plan to save'
+    }
+  }
+
+  // FIXME: add back in offset?
+  const planDeparture = moment(groupPlan.earliestStartTime) // .add('hours', otp.config.timeOffset)
+  const requestDate = moment(request.travelDate)
+
+  if (
+    planDeparture.date() !== requestDate.date() ||
+    planDeparture.month() !== requestDate.month() ||
+    planDeparture.year() !== requestDate.year()
+  ) {
+    return {
+      isValid: false,
+      message: `Planned trip date (${planDeparture.format('MM/DD/YYYY')}) is not the requested day of travel (${requestDate.format('MM/DD/YYYY')})`
+    }
+  }
+
+  // FIXME More checks? E.g., origin/destination
+
+  return { isValid: true, message: null }
+}
+
+export function planTrip (request, outbound) {
+  return async function (dispatch, getState) {
+    dispatch(setGroupSize(getGroupSize(request)))
+    const trip = getTripFromRequest(request, outbound)
+    if (!trip) {
+      // Construct params from request details
+      if (outbound) dispatch(planOutbound(request))
+      else dispatch(planInbound(request))
+    } else {
+      // Populate params from saved query params
+      const params = await planParamsToQueryAsync(JSON.parse(trip.queryParams))
+      dispatch(setQueryParam(params, trip.id))
+    }
+  }
+}
+
+function planOutbound (request) {
+  return async function (dispatch, getState) {
+    const {config} = getState().otp
+    // clearTrip()
+    const locations = await planParamsToQueryAsync({
+      fromPlace: request.startLocation,
+      toPlace: request.endLocation
+    }, config)
+    const queryParams = {
+      date: moment(request.travelDate).format(OTP_API_DATE_FORMAT),
+      departArrive: 'ARRIVE',
+      groupSize: getGroupSize(request),
+      time: moment(request.arriveDestinationTime).format(OTP_API_TIME_FORMAT),
+      ...locations
+    }
+    dispatch(setQueryParam(queryParams))
+    dispatch(routingQuery())
+  }
+}
+
+function planInbound (request) {
+  return async function (dispatch, getState) {
+    const {config} = getState().otp
+    const locations = await planParamsToQueryAsync({
+      fromPlace: request.endLocation,
+      toPlace: request.startLocation
+    }, config)
+    // clearTrip()
+    const queryParams = {
+      date: moment(request.travelDate).format(OTP_API_DATE_FORMAT),
+      departArrive: 'DEPART',
+      groupSize: getGroupSize(request),
+      time: moment(request.leaveDestinationTime).format(OTP_API_TIME_FORMAT),
+      ...locations
+    }
+    dispatch(setQueryParam(queryParams))
+    dispatch(routingQuery())
+  }
+}
+
+/**
+ * Set group size for a field trip request. Group size consists of numStudents,
+ * numFreeStudents, and numChaperones.
+ */
+export function setRequestGroupSize (request, groupSize) {
+  return function (dispatch, getState) {
+    const {callTaker, otp} = getState()
+    const {datastoreUrl} = otp.config
+    if (sessionIsInvalid(callTaker.session)) return
+    const {sessionId} = callTaker.session
+    const groupSizeData = serialize({
+      ...groupSize,
+      requestId: request.id,
+      sessionId
+    })
+    return fetch(`${datastoreUrl}/fieldtrip/setRequestGroupSize`,
+      {method: 'POST', body: groupSizeData}
+    )
+      .then(() => dispatch(fetchFieldTripDetails(request.id)))
+      .catch(err => {
+        alert(`Error setting group size: ${JSON.stringify(err)}`)
+      })
+  }
+}
+
+/**
+ * Set payment info for a field trip request.
+ */
+export function setRequestPaymentInfo (request, paymentInfo) {
+  return function (dispatch, getState) {
+    const {callTaker, otp} = getState()
+    const {datastoreUrl} = otp.config
+    if (sessionIsInvalid(callTaker.session)) return
+    const {sessionId} = callTaker.session
+    const paymentData = serialize({
+      ...paymentInfo,
+      requestId: request.id,
+      sessionId
+    })
+    return fetch(`${datastoreUrl}/fieldtrip/setRequestPaymentInfo`,
+      {method: 'POST', body: paymentData}
+    )
+      .then(() => dispatch(fetchFieldTripDetails(request.id)))
+      .catch(err => {
+        alert(`Error setting payment info: ${JSON.stringify(err)}`)
+      })
+  }
+}
+
+/**
+ * Set field trip request status (e.g., cancelled).
+ */
+export function setRequestStatus (request, status) {
+  return function (dispatch, getState) {
+    const {callTaker, otp} = getState()
+    const {datastoreUrl} = otp.config
+    if (sessionIsInvalid(callTaker.session)) return
+    const {sessionId} = callTaker.session
+    const statusData = serialize({
+      requestId: request.id,
+      sessionId,
+      status
+    })
+    return fetch(`${datastoreUrl}/fieldtrip/setRequestStatus`,
+      {method: 'POST', body: statusData}
+    )
+      .then(() => dispatch(fetchFieldTripDetails(request.id)))
+      .catch(err => {
+        alert(`Error setting request status: ${JSON.stringify(err)}`)
+      })
+  }
+}
diff --git a/lib/components/admin/call-record.js b/lib/components/admin/call-record.js
index 602599109..ff8ae8ab4 100644
--- a/lib/components/admin/call-record.js
+++ b/lib/components/admin/call-record.js
@@ -38,7 +38,7 @@ export default class CallRecord extends Component {
               style={{color: RED, fontSize: '8px', verticalAlign: '2px'}}
               type='circle'
               className='animate-flicker' />
-            <CallTimeCounter style={{display: 'inline'}} />
+            <CallTimeCounter />
           </div>
           <Icon type='phone' className='fa-flip-horizontal' />{' '}
           [Active call]
diff --git a/lib/components/admin/call-taker-controls.js b/lib/components/admin/call-taker-controls.js
index 56e4b39c6..a5f4ff803 100644
--- a/lib/components/admin/call-taker-controls.js
+++ b/lib/components/admin/call-taker-controls.js
@@ -1,30 +1,39 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
+import * as apiActions from '../../actions/api'
 import * as callTakerActions from '../../actions/call-taker'
-import { routingQuery } from '../../actions/api'
-import { setMainPanelContent } from '../../actions/ui'
-import CallTimeCounter from './call-time-counter'
+import * as fieldTripActions from '../../actions/field-trip'
+import * as uiActions from '../../actions/ui'
 import Icon from '../narrative/icon'
-
-const RED = '#C35134'
-const BLUE = '#1C4D89'
-const GREEN = '#6B931B'
+import {
+  CallHistoryButton,
+  CallTimeCounter,
+  ControlsContainer,
+  FieldTripsButton,
+  ToggleCallButton
+} from './styled'
 
 /**
  * This component displays the controls for the Call Taker/Field Trip modules,
  * including:
  *  - start/end call button
  *  - view call list
- *  TODO
  *  - view field trip list
  */
 class CallTakerControls extends Component {
   componentDidUpdate (prevProps) {
-    const {session} = this.props
+    const {
+      callTakerEnabled,
+      fetchCalls,
+      fetchFieldTrips,
+      fieldTripEnabled,
+      session
+    } = this.props
     // Once session is available, fetch calls.
     if (session && !prevProps.session) {
-      this.props.fetchCalls()
+      if (callTakerEnabled) fetchCalls()
+      if (fieldTripEnabled) fetchFieldTrips()
     }
   }
 
@@ -33,7 +42,7 @@ class CallTakerControls extends Component {
     else this.props.beginCall()
   }
 
-  _renderCallButton = () => {
+  _renderCallButtonIcon = () => {
     // Show stop button if call not in progress.
     if (this._callInProgress()) {
       return (
@@ -57,74 +66,57 @@ class CallTakerControls extends Component {
 
   _onToggleCallHistory = () => this.props.toggleCallHistory()
 
+  _onToggleFieldTrips = () => this.props.toggleFieldTrips()
+
   _callInProgress = () => Boolean(this.props.activeCall)
 
   render () {
-    const {session} = this.props
+    const {callTakerEnabled, fieldTripEnabled, session} = this.props
     // If no valid session is found, do not show calltaker controls.
     if (!session) return null
-    // FIXME: styled component
-    const circleButtonStyle = {
-      position: 'absolute',
-      zIndex: 999999,
-      color: 'white',
-      borderRadius: '50%',
-      border: 'none',
-      boxShadow: '2px 2px 4px #000000'
-    }
     return (
-      <>
+      <ControlsContainer>
         {/* Start/End Call button */}
-        <button
-          style={{
-            ...circleButtonStyle,
-            top: '154px',
-            backgroundColor: this._callInProgress() ? RED : BLUE,
-            height: '80px',
-            width: '80px',
-            marginLeft: '-8px'
-
-          }}
-          className='call-taker-button'
-          onClick={this._onClickCall}
-        >
-          {this._renderCallButton()}
-        </button>
+        {callTakerEnabled &&
+          <ToggleCallButton
+            callInProgress={this._callInProgress()}
+            className='call-taker-button'
+            onClick={this._onClickCall}
+          >
+            {this._renderCallButtonIcon()}
+          </ToggleCallButton>
+        }
         {this._callInProgress()
-          ? <CallTimeCounter style={{
-            display: 'inline',
-            position: 'absolute',
-            zIndex: 999999,
-            top: '241px',
-            borderRadius: '20px',
-            backgroundColor: BLUE,
-            boxShadow: '2px 2px 4px #000000',
-            color: 'white',
-            fontWeight: '600',
-            textAlign: 'center',
-            width: '80px',
-            marginLeft: '-8px'
-          }} />
+          ? <CallTimeCounter />
           : null
         }
         {/* Call History toggle button */}
-        <button
-          style={{
-            ...circleButtonStyle,
-            top: '140px',
-            backgroundColor: GREEN,
-            height: '40px',
-            width: '40px',
-            marginLeft: '69px'
-
-          }}
-          className='call-taker-button'
-          onClick={this._onToggleCallHistory}
-        >
-          <Icon type='history' className='fa-2x' style={{marginLeft: '-3px'}} />
-        </button>
-        {/* Field Trip toggle button TODO */}
-      </>
+        {callTakerEnabled &&
+          <CallHistoryButton
+            className='call-taker-button'
+            onClick={this._onToggleCallHistory}
+          >
+            <Icon
+              className='fa-2x'
+              style={{marginLeft: '-3px'}}
+              type='history'
+            />
+          </CallHistoryButton>
+        }
+        {/* Field Trip toggle button */}
+        {fieldTripEnabled &&
+          <FieldTripsButton
+            className='call-taker-button'
+            onClick={this._onToggleFieldTrips}
+          >
+            <Icon
+              className='fa-2x'
+              style={{marginLeft: '2px', marginTop: '3px'}}
+              type='graduation-cap'
+            />
+          </FieldTripsButton>
+        }
+      </ControlsContainer>
     )
   }
 }
@@ -132,19 +124,21 @@ class CallTakerControls extends Component {
 const mapStateToProps = (state, ownProps) => {
   return {
     activeCall: state.callTaker.activeCall,
+    callTakerEnabled: Boolean(state.otp.config.modules.find(m => m.id === 'call')),
+    fieldTripEnabled: Boolean(state.otp.config.modules.find(m => m.id === 'ft')),
     session: state.callTaker.session
   }
 }
 
-const {beginCall, endCall, fetchCalls, toggleCallHistory} = callTakerActions
-
 const mapDispatchToProps = {
-  beginCall,
-  endCall,
-  fetchCalls,
-  routingQuery,
-  setMainPanelContent,
-  toggleCallHistory
+  beginCall: callTakerActions.beginCall,
+  endCall: callTakerActions.endCall,
+  fetchCalls: callTakerActions.fetchCalls,
+  fetchFieldTrips: fieldTripActions.fetchFieldTrips,
+  routingQuery: apiActions.routingQuery,
+  setMainPanelContent: uiActions.setMainPanelContent,
+  toggleCallHistory: callTakerActions.toggleCallHistory,
+  toggleFieldTrips: fieldTripActions.toggleFieldTrips
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(CallTakerControls)
diff --git a/lib/components/admin/call-taker-windows.js b/lib/components/admin/call-taker-windows.js
index b575cc2ca..a169c2a09 100644
--- a/lib/components/admin/call-taker-windows.js
+++ b/lib/components/admin/call-taker-windows.js
@@ -5,6 +5,7 @@ import * as callTakerActions from '../../actions/call-taker'
 import CallRecord from './call-record'
 import DraggableWindow from './draggable-window'
 import Icon from '../narrative/icon'
+import {WindowHeader} from './styled'
 
 /**
  * Collects the various draggable windows used in the Call Taker module to
@@ -12,40 +13,33 @@ import Icon from '../narrative/icon'
  */
 class CallTakerWindows extends Component {
   render () {
-    const {callTaker, fetchQueries, searches} = this.props
+    const {callTaker, fetchQueries, searches, toggleCallHistory} = this.props
     const {activeCall, callHistory} = callTaker
+    if (!callHistory.visible) return null
     return (
-      <>
-        {callHistory.visible
-          // Active call window
-          ? <DraggableWindow
-            draggableProps={{
-              defaultPosition: callHistory.position
-            }}
-            header={<span><Icon type='history' /> Call history</span>}
-            onClickClose={this.props.toggleCallHistory}
-          >
-            {activeCall
-              ? <CallRecord
-                call={activeCall}
-                searches={searches}
-                inProgress />
-              : null
-            }
-            {callHistory.calls.data.length > 0
-              ? callHistory.calls.data.map((call, i) => (
-                <CallRecord
-                  key={i}
-                  index={i}
-                  call={call}
-                  fetchQueries={fetchQueries} />
-              ))
-              : <div>No calls in history</div>
-            }
-          </DraggableWindow>
+      <DraggableWindow
+        header={<WindowHeader><Icon type='history' /> Call history</WindowHeader>}
+        onClickClose={toggleCallHistory}
+        style={{right: '15px', top: '50px'}}
+      >
+        {activeCall
+          ? <CallRecord
+            call={activeCall}
+            searches={searches}
+            inProgress />
           : null
         }
-      </>
+        {callHistory.calls.data.length > 0
+          ? callHistory.calls.data.map((call, i) => (
+            <CallRecord
+              key={i}
+              index={i}
+              call={call}
+              fetchQueries={fetchQueries} />
+          ))
+          : <div>No calls in history</div>
+        }
+      </DraggableWindow>
     )
   }
 }
@@ -58,11 +52,9 @@ const mapStateToProps = (state, ownProps) => {
   }
 }
 
-const {
-  fetchQueries,
-  toggleCallHistory
-} = callTakerActions
-
-const mapDispatchToProps = { fetchQueries, toggleCallHistory }
+const mapDispatchToProps = {
+  fetchQueries: callTakerActions.fetchQueries,
+  toggleCallHistory: callTakerActions.toggleCallHistory
+}
 
 export default connect(mapStateToProps, mapDispatchToProps)(CallTakerWindows)
diff --git a/lib/components/admin/call-time-counter.js b/lib/components/admin/call-time-counter.js
index 1d8dfe763..1383687a4 100644
--- a/lib/components/admin/call-time-counter.js
+++ b/lib/components/admin/call-time-counter.js
@@ -43,9 +43,14 @@ export default class CallTimeCounter extends Component {
   }
 
   render () {
-    const {className, style} = this.props
+    const {className} = this.props
     return (
-      <div className={className} style={style}>
+      <div
+        // Pass the className for styling with
+        // styled-components
+        className={className}
+        style={{display: 'inline'}}
+      >
         {this._formatSeconds(this.state.counterString)}
       </div>
     )
diff --git a/lib/components/admin/draggable-window.js b/lib/components/admin/draggable-window.js
index 1159cdd39..a43789139 100644
--- a/lib/components/admin/draggable-window.js
+++ b/lib/components/admin/draggable-window.js
@@ -7,30 +7,34 @@ const noop = () => {}
 
 export default class DraggableWindow extends Component {
   render () {
-    const {children, draggableProps, header} = this.props
+    const {
+      children,
+      draggableProps,
+      footer,
+      header,
+      height = '245px',
+      onClickClose,
+      style
+    } = this.props
     const GREY_BORDER = '#777 1.3px solid'
     return (
       <Draggable
+        // Prevent dragging when clicking inside an input (e.g., search bar)
+        cancel='input'
         handle='.handle'
         {...draggableProps}
-        // axis='x'
-        // grid={[25, 25]}
-        // scale={1}
-        // FIXME: Update position in store on drag?
-        // onStart={this.handleStart}
-        // onDrag={this.handleDrag}
-        // onStop={this.handleStop}
       >
         <div
           style={{
-            position: 'absolute',
-            zIndex: 9999999,
-            width: '350px',
             backgroundColor: 'white',
+            border: GREY_BORDER,
             borderRadius: '5%',
-            padding: '10px',
             boxShadow: '2px 2px 8px',
-            border: GREY_BORDER
+            paddingBottom: '10px',
+            position: 'absolute',
+            width: '350px',
+            zIndex: 9999999,
+            ...style
           }}
         >
           <div
@@ -38,23 +42,36 @@ export default class DraggableWindow extends Component {
             style={{
               borderBottom: GREY_BORDER,
               cursor: 'move',
-              fontSize: 'large',
-              paddingBottom: '5px'
+              padding: '5px'
             }}
           >
             <button
-              onClick={this.props.onClickClose}
-              className='clear-button-formatting pull-right'>
+              className='clear-button-formatting pull-right'
+              onClick={onClickClose}
+              style={{margin: '4px 4px 0 0'}}
+            >
               <Icon type='times' />
             </button>
             {header}
           </div>
           <div style={{
-            height: '275px',
+            height,
+            margin: '0px 5px',
             overflowY: 'scroll'
           }}>
             {children}
           </div>
+          {footer &&
+            <div
+              className='window-footer'
+              style={{
+                borderTop: GREY_BORDER,
+                padding: '5px'
+              }}
+            >
+              {footer}
+            </div>
+          }
         </div>
       </Draggable>
     )
diff --git a/lib/components/admin/editable-section.js b/lib/components/admin/editable-section.js
new file mode 100644
index 000000000..e5b8cf27f
--- /dev/null
+++ b/lib/components/admin/editable-section.js
@@ -0,0 +1,147 @@
+import { Field, Form, Formik } from 'formik'
+import React, {Component} from 'react'
+
+import {
+  Button,
+  Para,
+  Val
+} from './styled'
+
+/**
+ * This component will render a set of fields along with a 'Change/Edit' button
+ * that toggles an editable state. In its editable state, the fields/values are
+ * rendered as form inputs, which can be edited and then saved/persisted.
+ */
+export default class EditableSection extends Component {
+  state = {
+    isEditing: false
+  }
+
+  _exists = (val) => val !== null && typeof val !== 'undefined'
+
+  _getVal = (fieldName) => this._exists(this.props.request[fieldName])
+    ? this.props.request[fieldName]
+    : ''
+
+  _onClickSave = data => {
+    const {request, onChange} = this.props
+    // Convert all null values received to '',
+    // otherwise they will appear in the backend as the 'null' string.
+    for (const field in data) {
+      if (data[field] === null) data[field] = ''
+    }
+
+    onChange(request, data)
+    this.setState({isEditing: false})
+  }
+
+  _toggleEditing = () => {
+    this.setState({isEditing: !this.state.isEditing})
+  }
+
+  render () {
+    const {children, fields, inputStyle, request, valueFirst} = this.props
+    const {isEditing} = this.state
+    if (!request) return null
+    return (
+      <Formik
+        // Force Formik to reload initialValues when we update them.
+        enableReinitialize
+        initialValues={request}
+        onSubmit={this._onClickSave}
+      >
+        {
+          formikProps => (
+            <Form>
+              {children}
+              <span
+                className='pull-right'
+                // Limit height so that it does not collide with form elements
+                // below when actively editing.
+                style={{height: '10px', marginRight: '15px'}}
+              >
+                {!isEditing
+                  ? <Button
+                    bsSize='xsmall'
+                    onClick={this._toggleEditing}
+                  >
+                    Change
+                  </Button>
+                  : <>
+                    <Button
+                      bsSize='xsmall'
+                      bsStyle='link'
+                      onClick={this._toggleEditing}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      bsSize='xsmall'
+                      bsStyle='link'
+                      disabled={!formikProps.dirty}
+                      type='submit'
+                    >
+                      Save
+                    </Button>
+                  </>
+                }
+              </span>
+              {fields.map(f => {
+                const input = (
+                  <InputToggle
+                    fieldName={f.fieldName}
+                    inputProps={f.inputProps}
+                    isEditing={isEditing}
+                    key={f.fieldName}
+                    options={f.options}
+                    style={inputStyle}
+                    value={this._getVal(f.fieldName)} />
+                )
+                return (
+                  <Para key={f.fieldName}>
+                    {valueFirst
+                      ? <>{input} {f.label}</>
+                      : <>{f.label}: {input}</>
+                    }
+                  </Para>
+                )
+              })}
+            </Form>
+          )
+        }
+      </Formik>
+    )
+  }
+}
+
+/**
+ * This component renders either the specified value for a given field or, if
+ * in an active editing state, the associated field's respective input (e.g.
+ * text, number, or select).
+ */
+class InputToggle extends Component {
+  render () {
+    const {inputProps, fieldName, isEditing, options, style, value} = this.props
+    if (isEditing) {
+      if (options) {
+        return (
+          <Field
+            as='select'
+            name={fieldName}
+          >
+            {Object.keys(options).map(k =>
+              <option value={k}>{options[k]}</option>
+            )}
+          </Field>
+        )
+      } else {
+        return <Field
+          {...inputProps}
+          name={fieldName}
+          style={style}
+        />
+      }
+    }
+    return <Val>{options ? options[value] : value}</Val>
+  }
+}
diff --git a/lib/components/admin/field-trip-details.js b/lib/components/admin/field-trip-details.js
new file mode 100644
index 000000000..91d2f2af6
--- /dev/null
+++ b/lib/components/admin/field-trip-details.js
@@ -0,0 +1,233 @@
+import { getDateFormat } from '@opentripplanner/core-utils/lib/time'
+import moment from 'moment'
+import React, { Component } from 'react'
+import { DropdownButton, MenuItem } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import * as fieldTripActions from '../../actions/field-trip'
+import DraggableWindow from './draggable-window'
+import EditableSection from './editable-section'
+import FieldTripNotes from './field-trip-notes'
+import Icon from '../narrative/icon'
+import {
+  Bold,
+  Button,
+  Container,
+  FullWithMargin,
+  Half,
+  Header,
+  InlineHeader,
+  Para,
+  Text,
+  Val,
+  WindowHeader as DefaultWindowHeader
+} from './styled'
+import TripStatus from './trip-status'
+import Updatable from './updatable'
+import {
+  getGroupSize,
+  GROUP_FIELDS,
+  PAYMENT_FIELDS,
+  TICKET_TYPES
+} from '../../util/call-taker'
+
+const WindowHeader = styled(DefaultWindowHeader)`
+  margin-bottom: 0px;
+`
+
+/**
+ * Shows the details for the active Field Trip Request.
+ */
+class FieldTripDetails extends Component {
+  _editSubmitterNotes = (val) => this.props.editSubmitterNotes(this.props.request, val)
+
+  _getRequestLink = (path, isPublic = false) =>
+    `${this.props.datastoreUrl}/${isPublic ? 'public/' : ''}fieldtrip/${path}?requestId=${this.props.request.id}`
+
+  _onCloseActiveFieldTrip = () => this.props.setActiveFieldTrip(null)
+
+  _onToggleStatus = () => {
+    const {request, setRequestStatus} = this.props
+    if (request.status !== 'cancelled') {
+      if (confirm('Are you sure you want to cancel this request? Any associated trips will be deleted.')) {
+        setRequestStatus(request, 'cancelled')
+      }
+    } else {
+      setRequestStatus(request, 'active')
+    }
+  }
+
+  _renderFooter = () => {
+    const cancelled = this.props.request.status === 'cancelled'
+    return (
+      <div style={{padding: '5px 10px 0px 10px'}}>
+        <DropdownButton
+          aria-label='Field Trip Menu'
+          bsSize='xsmall'
+          dropup
+          id='field-trip-menu'
+          title='View'
+        >
+          <MenuItem
+            href={this._getRequestLink('feedbackForm', true)}
+            target='_blank'
+          >
+            <Icon type='commenting-o' /> Feedback link
+          </MenuItem>
+          <MenuItem
+            href={this._getRequestLink('receipt')}
+            target='_blank'
+          >
+            <Icon type='file-text-o' /> Receipt link
+          </MenuItem>
+        </DropdownButton>
+        <Button
+          bsSize='xsmall'
+          bsStyle={cancelled ? undefined : 'danger'}
+          className='pull-right'
+          onClick={this._onToggleStatus}
+        >
+          {cancelled ? 'Reactivate' : 'Cancel'} request
+        </Button>
+      </div>
+    )
+  }
+
+  _renderHeader = () => {
+    const {dateFormat, request} = this.props
+    const {
+      id,
+      schoolName,
+      travelDate
+    } = request
+    const travelDateAsMoment = moment(travelDate)
+    return (
+      <WindowHeader>
+        <Icon type='graduation-cap' /> {schoolName} Trip (#{id})
+        <div style={{marginLeft: '28px'}}>
+          <small>
+            Travel date: {travelDateAsMoment.format(dateFormat)}{' '}
+            ({travelDateAsMoment.fromNow()})
+          </small>
+        </div>
+      </WindowHeader>
+    )
+  }
+
+  render () {
+    const {
+      addFieldTripNote,
+      deleteFieldTripNote,
+      request,
+      setRequestGroupSize,
+      setRequestPaymentInfo,
+      style
+    } = this.props
+    if (!request) return null
+    const {
+      invoiceRequired,
+      notes,
+      schoolName,
+      submitterNotes,
+      teacherName,
+      ticketType
+    } = request
+    const internalNotes = []
+    const operationalNotes = []
+    notes && notes.forEach(note => {
+      if (note.type === 'internal') internalNotes.push(note)
+      else operationalNotes.push(note)
+    })
+    return (
+      <DraggableWindow
+        footer={this._renderFooter()}
+        header={this._renderHeader()}
+        height='375px'
+        onClickClose={this._onCloseActiveFieldTrip}
+        style={style}
+      >
+        <Container>
+          <Header>Group Information</Header>
+          <Half>
+            <Para><Bold>{schoolName}</Bold></Para>
+            <Para>Teacher: {teacherName}</Para>
+            <Para>Ticket type: <Val>{TICKET_TYPES[ticketType]}</Val></Para>
+            <Para>Invoice required: <Val>{invoiceRequired ? 'Yes' : 'No'}</Val></Para>
+            <Para>
+              <Updatable
+                fieldName='Teacher notes'
+                label={<Icon type='sticky-note-o' title='Teacher notes' />}
+                onUpdate={this._editSubmitterNotes}
+                value={submitterNotes}
+              />
+            </Para>
+          </Half>
+          <Half>
+            <EditableSection
+              children={
+                <Text>
+                  <Bold>{getGroupSize(request)}</Bold> total
+                </Text>
+              }
+              fields={GROUP_FIELDS}
+              inputStyle={{lineHeight: '0.8em', padding: '0px', width: '50px'}}
+              onChange={setRequestGroupSize}
+              request={request}
+              valueFirst
+            />
+          </Half>
+          <TripStatus
+            outbound
+            request={request}
+          />
+          <TripStatus request={request} />
+          <FullWithMargin>
+            <EditableSection
+              // Use inline header so that 'Change' button appears on top line.
+              children={
+                <InlineHeader>
+                  <Icon type='credit-card' /> Payment information
+                </InlineHeader>
+              }
+              fields={PAYMENT_FIELDS}
+              inputStyle={{lineHeight: '0.8em', padding: '0px', width: '100px'}}
+              onChange={setRequestPaymentInfo}
+              request={request}
+            />
+          </FullWithMargin>
+          <FieldTripNotes
+            addFieldTripNote={addFieldTripNote}
+            deleteFieldTripNote={deleteFieldTripNote}
+            request={request}
+          />
+        </Container>
+      </DraggableWindow>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const {activeId, requests} = state.callTaker.fieldTrip
+  const request = requests.data.find(req => req.id === activeId)
+  return {
+    currentQuery: state.otp.currentQuery,
+    datastoreUrl: state.otp.config.datastoreUrl,
+    dateFormat: getDateFormat(state.otp.config),
+    request
+  }
+}
+
+const mapDispatchToProps = {
+  addFieldTripNote: fieldTripActions.addFieldTripNote,
+  deleteFieldTripNote: fieldTripActions.deleteFieldTripNote,
+  editSubmitterNotes: fieldTripActions.editSubmitterNotes,
+  fetchQueries: fieldTripActions.fetchQueries,
+  setActiveFieldTrip: fieldTripActions.setActiveFieldTrip,
+  setRequestGroupSize: fieldTripActions.setRequestGroupSize,
+  setRequestPaymentInfo: fieldTripActions.setRequestPaymentInfo,
+  setRequestStatus: fieldTripActions.setRequestStatus,
+  toggleFieldTrips: fieldTripActions.toggleFieldTrips
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FieldTripDetails)
diff --git a/lib/components/admin/field-trip-list.js b/lib/components/admin/field-trip-list.js
new file mode 100644
index 000000000..84152aa2d
--- /dev/null
+++ b/lib/components/admin/field-trip-list.js
@@ -0,0 +1,206 @@
+import React, { Component } from 'react'
+import { Badge } from 'react-bootstrap'
+import { connect } from 'react-redux'
+
+import * as fieldTripActions from '../../actions/field-trip'
+import DraggableWindow from './draggable-window'
+import Icon from '../narrative/icon'
+import Loading from '../narrative/loading'
+import {FieldTripRecordButton, WindowHeader} from './styled'
+import {getVisibleRequests, TABS} from '../../util/call-taker'
+import {FETCH_STATUS} from '../../util/constants'
+
+/**
+ * Displays a searchable list of field trip requests in a draggable window.
+ */
+class FieldTripList extends Component {
+  _onClickFieldTrip = (request) => {
+    const {callTaker, fetchFieldTripDetails, setActiveFieldTrip} = this.props
+    if (request.id === callTaker.fieldTrip.activeId) {
+      this._onCloseActiveFieldTrip()
+    } else {
+      setActiveFieldTrip(request.id)
+      fetchFieldTripDetails(request.id)
+    }
+  }
+
+  _onClickRefresh = () => this.props.fetchFieldTrips()
+
+  _onCloseActiveFieldTrip = () => {
+    this.props.setActiveFieldTrip(null)
+  }
+
+  /**
+   * Change search input selectively. This is to prevent excessive rendering
+   * each time the search input changes (on TriMet's production instance there
+   * are thousands of field trip requests).
+   */
+  _handleSearchKeyUp = e => {
+    const {callTaker, setFieldTripFilter} = this.props
+    const {search} = callTaker.fieldTrip.filter
+    const newSearch = e.target.value
+    // Update filter if Enter is pressed or search value is entirely cleared.
+    const newSearchEntered = e.keyCode === 13 && newSearch !== search
+    const searchCleared = search && !newSearch
+    if (newSearchEntered || searchCleared) {
+      setFieldTripFilter({search: newSearch})
+    }
+  }
+
+  _onTabChange = e => {
+    this.props.setFieldTripFilter({tab: e.currentTarget.name})
+  }
+
+  render () {
+    const {callTaker, style, toggleFieldTrips, visibleRequests} = this.props
+    const {fieldTrip} = callTaker
+    const {activeId, filter} = fieldTrip
+    const {search} = filter
+    return (
+      <DraggableWindow
+        header={
+          <>
+            <WindowHeader>
+              <Icon type='graduation-cap' /> Field Trip Requests{' '}
+              <span className='pull-right'>
+                <button
+                  className='clear-button-formatting'
+                  onClick={this._onClickRefresh}
+                  style={{marginRight: '5px', verticalAlign: 'bottom'}}
+                >
+                  <Icon type='refresh' />
+                </button>
+                <input
+                  defaultValue={search}
+                  onKeyUp={this._handleSearchKeyUp}
+                  placeholder='Press Enter to Search'
+                  style={{
+                    fontSize: 'revert',
+                    fontWeight: 400,
+                    marginRight: '15px',
+                    width: '140px'
+                  }}
+                />
+              </span>
+            </WindowHeader>
+            {TABS.map(tab => {
+              const active = tab.id === filter.tab
+              const style = {
+                backgroundColor: active ? 'navy' : undefined,
+                borderRadius: 5,
+                color: active ? 'white' : undefined,
+                padding: '2px 3px'
+              }
+              const requestCount = fieldTrip.requests.data.filter(tab.filter).length
+              return (
+                <button
+                  className='clear-button-formatting'
+                  key={tab.id}
+                  name={tab.id}
+                  onClick={this._onTabChange}
+                  style={style}
+                >
+                  {tab.label} <Badge>{requestCount}</Badge>
+                </button>
+              )
+            })}
+          </>
+        }
+        onClickClose={toggleFieldTrips}
+        style={style}
+      >
+        {fieldTrip.requests.status === FETCH_STATUS.FETCHING
+          ? <Loading />
+          : visibleRequests.length > 0
+            ? visibleRequests.map((request, i) => (
+              <FieldTripRequestRecord
+                active={activeId === request.id}
+                key={request.id}
+                onClick={this._onClickFieldTrip}
+                request={request}
+              />
+            ))
+            : <div>No field trips found.</div>
+        }
+      </DraggableWindow>
+    )
+  }
+}
+
+class FieldTripRequestRecord extends Component {
+  _onClick = () => {
+    const {onClick, request} = this.props
+    onClick(request)
+  }
+
+  _getStatusIcon = (status) => status
+    ? <Icon type='check' className='text-success' />
+    : <Icon type='exclamation-circle' className='text-warning' />
+
+  render () {
+    const {active, request} = this.props
+    const style = {
+      backgroundColor: active ? 'lightgrey' : undefined,
+      borderBottom: '1px solid grey'
+    }
+    const {
+      endLocation,
+      id,
+      inboundTripStatus,
+      outboundTripStatus,
+      schoolName,
+      startLocation,
+      teacherName,
+      timeStamp
+    } = request
+    return (
+      <li
+        className='list-unstyled'
+        style={style}
+      >
+        <FieldTripRecordButton
+          className='clear-button-formatting'
+          name={id}
+          onClick={this._onClick}
+        >
+          <span style={{display: 'inline-block', fontWeight: 600, width: '50%'}}>
+            {schoolName} Trip (#{id})
+          </span>
+          <span style={{display: 'inline-block', width: '50%'}}>
+            <span style={{marginLeft: '10px'}}>
+              {this._getStatusIcon(inboundTripStatus)} Inbound
+            </span>
+            <span style={{marginLeft: '10px'}}>
+              {this._getStatusIcon(outboundTripStatus)} Outbound
+            </span>
+          </span>
+          <span style={{display: 'block'}}>
+            Submitted by {teacherName} on {timeStamp}
+          </span>
+          <span style={{display: 'block'}}>
+            {startLocation} to {endLocation}
+          </span>
+        </FieldTripRecordButton>
+      </li>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    callTaker: state.callTaker,
+    currentQuery: state.otp.currentQuery,
+    searches: state.otp.searches,
+    visibleRequests: getVisibleRequests(state)
+  }
+}
+
+const mapDispatchToProps = {
+  fetchFieldTripDetails: fieldTripActions.fetchFieldTripDetails,
+  fetchFieldTrips: fieldTripActions.fetchFieldTrips,
+  setActiveFieldTrip: fieldTripActions.setActiveFieldTrip,
+  setFieldTripFilter: fieldTripActions.setFieldTripFilter,
+  toggleFieldTrips: fieldTripActions.toggleFieldTrips
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FieldTripList)
diff --git a/lib/components/admin/field-trip-notes.js b/lib/components/admin/field-trip-notes.js
new file mode 100644
index 000000000..a190f5f5d
--- /dev/null
+++ b/lib/components/admin/field-trip-notes.js
@@ -0,0 +1,116 @@
+import React, { Component } from 'react'
+import { Badge, Button as BsButton } from 'react-bootstrap'
+import styled from 'styled-components'
+
+import Icon from '../narrative/icon'
+import {
+  Button,
+  Full,
+  Header
+} from './styled'
+
+const Quote = styled.p`
+  font-size: small;
+  margin-bottom: 5px;
+`
+
+const Footer = styled.footer`
+  font-size: x-small;
+`
+
+const Note = ({note, onClickDelete}) => (
+  <blockquote>
+    <BsButton
+      bsSize='xsmall'
+      className='pull-right'
+      onClick={() => onClickDelete(note)}
+    >
+      <Icon className='text-danger' type='trash' />
+    </BsButton>
+    <Quote>{note.note}</Quote>
+    <Footer>{note.userName} on <em>{note.timeStamp}</em></Footer>
+  </blockquote>
+)
+
+const Feedback = ({feedback}) => (
+  <blockquote>
+    <Quote>{feedback.feedback}</Quote>
+    <Footer>{feedback.userName} on <em>{feedback.timeStamp}</em></Footer>
+  </blockquote>
+)
+/**
+ * Renders the various notes/feedback for a field trip request.
+ */
+export default class FieldTripNotes extends Component {
+  _getNotesCount = () => {
+    const {request} = this.props
+    const {feedback, notes} = request
+    let notesCount = 0
+    if (notes && notes.length) notesCount += notes.length
+    if (feedback && feedback.length) notesCount += feedback.length
+    return notesCount
+  }
+
+  _addInternalNote = () => this._addNote('internal')
+
+  _addOperationalNote = () => this._addNote('operational')
+
+  _addNote = (type) => {
+    const {addFieldTripNote, request} = this.props
+    const note = prompt(`Type ${type} note to be attached to this request:`)
+    if (note) addFieldTripNote(request, {note, type})
+  }
+
+  _deleteNote = (note) => {
+    const {deleteFieldTripNote, request} = this.props
+    if (confirm(`Are you sure you want to delete note "${note.note}"?`)) {
+      deleteFieldTripNote(request, note.id)
+    }
+  }
+
+  render () {
+    const {request} = this.props
+    if (!request) return null
+    const {
+      feedback,
+      notes
+    } = request
+    const internalNotes = []
+    const operationalNotes = []
+    notes && notes.forEach(note => {
+      if (note.type === 'internal') internalNotes.push(note)
+      else operationalNotes.push(note)
+    })
+    return (
+      <Full>
+        <Header>
+          <Icon type='sticky-note-o' /> Notes/Feedback{' '}
+          <Badge>{this._getNotesCount()}</Badge>
+          <Button bsSize='xs' onClick={this._addInternalNote}>
+            <Icon type='plus' /> Internal note
+          </Button>
+          <Button bsSize='xs' onClick={this._addOperationalNote}>
+            <Icon type='plus' /> Ops. note
+          </Button>
+        </Header>
+        <h5>Internal agent notes</h5>
+        {internalNotes && internalNotes.length > 0
+          ? internalNotes.map(n =>
+            <Note key={n.id} note={n} onClickDelete={this._deleteNote} />)
+          : 'No internal notes submitted.'
+        }
+        <h5>Operational notes</h5>
+        {operationalNotes && operationalNotes.length > 0
+          ? operationalNotes.map(n =>
+            <Note key={n.id} note={n} onClickDelete={this._deleteNote} />)
+          : 'No operational notes submitted.'
+        }
+        <h5>User feedback</h5>
+        {feedback && feedback.length > 0
+          ? feedback.map((f, i) => <Feedback feedback={f} key={i} />)
+          : 'No feedback submitted.'
+        }
+      </Full>
+    )
+  }
+}
diff --git a/lib/components/admin/field-trip-windows.js b/lib/components/admin/field-trip-windows.js
new file mode 100644
index 000000000..ddb6ee7ca
--- /dev/null
+++ b/lib/components/admin/field-trip-windows.js
@@ -0,0 +1,46 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import FieldTripDetails from './field-trip-details'
+import FieldTripList from './field-trip-list'
+
+const WINDOW_WIDTH = 450
+const MARGIN = 15
+
+/**
+ * Collects the various draggable windows for the Field Trip module.
+ */
+const FieldTripWindows = ({callTaker}) => {
+  const {fieldTrip} = callTaker
+  // Do not render details or list if visible is false.
+  if (!fieldTrip.visible) return null
+  return (
+    <>
+      <FieldTripDetails
+        style={{
+          bottom: `${MARGIN}px`,
+          right: `${MARGIN * 2 + WINDOW_WIDTH}px`,
+          width: `${WINDOW_WIDTH}px`,
+          // Ensure this window stays above the list.
+          zIndex: 9999999 + 1
+        }}
+      />
+      <FieldTripList
+        draggableProps={{positionOffset: {x: '-40%'}}}
+        style={{
+          bottom: `${MARGIN}px`,
+          right: `${MARGIN}px`,
+          width: `${WINDOW_WIDTH}px`
+        }}
+      />
+    </>
+  )
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    callTaker: state.callTaker
+  }
+}
+
+export default connect(mapStateToProps)(FieldTripWindows)
diff --git a/lib/components/admin/styled.js b/lib/components/admin/styled.js
new file mode 100644
index 000000000..c5f53259d
--- /dev/null
+++ b/lib/components/admin/styled.js
@@ -0,0 +1,134 @@
+import { Button as BsButton } from 'react-bootstrap'
+import styled, {css} from 'styled-components'
+
+import DefaultCounter from './call-time-counter'
+
+// Call Taker Controls Components
+
+const RED = '#C35134'
+const BLUE = '#1C4D89'
+const GREEN = '#6B931B'
+const PURPLE = '#8134D3'
+
+const circleButtonStyle = css`
+  border: none;
+  border-radius: 50%;
+  box-shadow: 2px 2px 4px #000000;
+  color: white;
+  position: absolute;
+  z-index: 999999;
+`
+
+export const CallHistoryButton = styled.button`
+  ${circleButtonStyle}
+  background-color: ${GREEN};
+  height: 40px;
+  margin-left: 69px;
+  top: 140px;
+  width: 40px;
+`
+
+export const CallTimeCounter = styled(DefaultCounter)`
+  background-color: ${BLUE};
+  border-radius: 20px;
+  box-shadow: 2px 2px 4px #000000;
+  color: white;
+  font-weight: 600;
+  margin-left: -8px;
+  position: absolute;
+  text-align: center;
+  top: 241px;
+  width: 80px;
+  z-index: 999999;
+`
+
+export const ControlsContainer = styled.div`
+  position: relative;
+`
+
+export const FieldTripsButton = styled.button`
+  ${circleButtonStyle}
+  background-color: ${PURPLE};
+  height: 50px;
+  margin-left: 80px;
+  top: 190px;
+  width: 50px;
+`
+
+export const ToggleCallButton = styled.button`
+  ${circleButtonStyle}
+  background-color: ${props => props.callInProgress ? RED : BLUE};
+  height: 80px;
+  margin-left: -8px;
+  top: 154px;
+  width: 80px;
+`
+
+// Field Trip Windows Components
+
+export const Bold = styled.strong``
+
+export const Button = styled(BsButton)`
+  margin-left: 5px;
+`
+
+export const Container = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+`
+
+export const Half = styled.div`
+  width: 50%
+`
+
+// Make sure button extends to end of window.
+export const FieldTripRecordButton = styled.button`
+  display: inline-block;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
+`
+
+export const Full = styled.div`
+  width: 100%
+`
+
+export const FullWithMargin = styled(Full)`
+  margin-top: 10px;
+`
+
+export const Header = styled.h4`
+  margin-bottom: 5px;
+  width: 100%;
+`
+
+export const InlineHeader = styled(Header)`
+  display: inline;
+`
+
+export const textCss = css`
+  font-size: 0.9em;
+  margin-bottom: 0px;
+`
+
+export const Para = styled.p`
+  ${textCss}
+`
+
+export const Text = styled.span`
+  ${textCss}
+`
+
+export const Val = styled.span`
+  :empty:before {
+    color: grey;
+    content: 'N/A';
+  }
+`
+
+export const WindowHeader = styled.h3`
+  font-size: 18px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+`
diff --git a/lib/components/admin/trip-status.js b/lib/components/admin/trip-status.js
new file mode 100644
index 000000000..741b12912
--- /dev/null
+++ b/lib/components/admin/trip-status.js
@@ -0,0 +1,109 @@
+import { getTimeFormat } from '@opentripplanner/core-utils/lib/time'
+import moment from 'moment'
+import React, {Component} from 'react'
+import { connect } from 'react-redux'
+
+import * as fieldTripActions from '../../actions/field-trip'
+import * as formActions from '../../actions/form'
+import Icon from '../narrative/icon'
+import {
+  Bold,
+  Button,
+  Full,
+  Header,
+  Para
+} from './styled'
+import { getTripFromRequest } from '../../util/call-taker'
+
+class TripStatus extends Component {
+  _getTrip = () => getTripFromRequest(this.props.request, this.props.outbound)
+
+  _formatTime = (time) => moment(time).format(this.props.timeFormat)
+
+  _formatTripStatus = () => {
+    if (!this._getStatus()) {
+      return (
+        <span>
+          No itineraries planned! Click Plan to plan trip.
+        </span>
+      )
+    }
+    const trip = this._getTrip()
+    if (!trip) return <span>Error finding trip!</span>
+    return (
+      <span>
+        {trip.groupItineraries.length} group itineraries, planned by{' '}
+        {trip.createdBy} at {trip.timeStamp}
+      </span>
+    )
+  }
+
+  _getStatus = () => {
+    const {outbound, request} = this.props
+    return outbound ? request.outboundTripStatus : request.inboundTripStatus
+  }
+
+  _getStatusIcon = () => this._getStatus()
+    ? <Icon type='check' className='text-success' />
+    : <Icon type='exclamation-circle' className='text-warning' />
+
+  _onPlanTrip = () => this.props.planTrip(this.props.request, this.props.outbound)
+
+  _onSaveTrip = () => this.props.saveRequestTrip(this.props.request, this.props.outbound)
+
+  render () {
+    const {outbound, request} = this.props
+    const {
+      arriveDestinationTime,
+      arriveSchoolTime,
+      endLocation,
+      leaveDestinationTime,
+      startLocation
+    } = request
+    if (!request) {
+      console.warn('Could not find field trip request')
+      return null
+    }
+    const start = outbound ? startLocation : endLocation
+    const end = outbound ? endLocation : startLocation
+    return (
+      <Full>
+        <Header>
+          {this._getStatusIcon()}
+          {outbound ? 'Outbound' : 'Inbound'} trip
+          <Button bsSize='xs' onClick={this._onPlanTrip}>Plan</Button>
+          <Button bsSize='xs' onClick={this._onSaveTrip}>Save</Button>
+        </Header>
+        <Para>From <Bold>{start}</Bold> to <Bold>{end}</Bold></Para>
+        {outbound
+          ? <Para>
+            Arriving at {this._formatTime(arriveDestinationTime)}
+          </Para>
+          : <>
+            <Para>
+              Leave at {this._formatTime(leaveDestinationTime)},{' '}
+              due back at {this._formatTime(arriveSchoolTime)}
+            </Para>
+          </>
+        }
+        <Para>{this._formatTripStatus()}</Para>
+      </Full>
+    )
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    callTaker: state.callTaker,
+    currentQuery: state.otp.currentQuery,
+    timeFormat: getTimeFormat(state.otp.config)
+  }
+}
+
+const mapDispatchToProps = {
+  planTrip: fieldTripActions.planTrip,
+  saveRequestTrip: fieldTripActions.saveRequestTrip,
+  setQueryParam: formActions.setQueryParam
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TripStatus)
diff --git a/lib/components/admin/updatable.js b/lib/components/admin/updatable.js
new file mode 100644
index 000000000..16bd37246
--- /dev/null
+++ b/lib/components/admin/updatable.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Button } from 'react-bootstrap'
+
+import { Val } from './styled'
+
+export default class Updatable extends Component {
+  _onClick = () => {
+    const {fieldName, onUpdate, value} = this.props
+    const newValue = window.prompt(
+      `Please input new value for ${fieldName}:`,
+      value
+    )
+    if (newValue !== null) onUpdate(newValue)
+  }
+
+  render () {
+    const {fieldName, label, value} = this.props
+    return (
+      <>
+        {label || fieldName}:{' '}
+        <Val>{value}</Val>
+        <Button bsSize='xsmall' bsStyle='link' onClick={this._onClick}>
+          Update
+        </Button>
+      </>
+    )
+  }
+}
diff --git a/lib/components/app/app-menu.js b/lib/components/app/app-menu.js
index 6bf4d9374..703c0752d 100644
--- a/lib/components/app/app-menu.js
+++ b/lib/components/app/app-menu.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import qs from 'qs'
 import { connect } from 'react-redux'
 import { DropdownButton, MenuItem } from 'react-bootstrap'
+import { withRouter } from 'react-router'
 
 import Icon from '../narrative/icon'
 
@@ -19,11 +21,21 @@ class AppMenu extends Component {
   }
 
   _startOver = () => {
-    const { reactRouterConfig } = this.props
+    const { location, reactRouterConfig } = this.props
+    const { search } = location
     let startOverUrl = '/'
     if (reactRouterConfig && reactRouterConfig.basename) {
       startOverUrl += reactRouterConfig.basename
     }
+    // If search contains sessionId, preserve this so that the current session
+    // is not lost when the page reloads.
+    if (search) {
+      const params = qs.parse(search, { ignoreQueryPrefix: true })
+      const { sessionId } = params
+      if (sessionId) {
+        startOverUrl += `?${qs.stringify({sessionId})}`
+      }
+    }
     window.location.href = startOverUrl
   }
 
@@ -62,4 +74,4 @@ const mapDispatchToProps = {
   setMainPanelContent
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AppMenu)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AppMenu))
diff --git a/lib/components/app/call-taker-panel.js b/lib/components/app/call-taker-panel.js
index 055b2a8d0..a15366b49 100644
--- a/lib/components/app/call-taker-panel.js
+++ b/lib/components/app/call-taker-panel.js
@@ -5,6 +5,7 @@ import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 
 import * as apiActions from '../../actions/api'
+import * as fieldTripActions from '../../actions/field-trip'
 import * as formActions from '../../actions/form'
 import AddPlaceButton from '../form/add-place-button'
 import AdvancedOptions from '../form/call-taker/advanced-options'
@@ -15,6 +16,7 @@ import LocationField from '../form/connected-location-field'
 import SwitchButton from '../form/switch-button'
 import UserSettings from '../form/user-settings'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
+import { getGroupSize } from '../../util/call-taker'
 import { hasValidLocation, getActiveSearch, getShowUserSettings } from '../../util/state'
 import ViewerContainer from '../viewers/viewer-container'
 
@@ -42,6 +44,7 @@ class CallTakerPanel extends Component {
       window.alert(`Please define the following fields to plan a trip: ${issues.join(', ')}`)
       return
     }
+    if (this.state.expandAdvanced) this.setState({expandAdvanced: false})
     routingQuery()
   }
 
@@ -91,11 +94,15 @@ class CallTakerPanel extends Component {
     }
   }
 
+  _updateGroupSize = (evt) => this.props.setGroupSize(+evt.target.value)
+
   render () {
     const {
       activeSearch,
       currentQuery,
+      groupSize,
       mainPanelContent,
+      maxGroupSize,
       mobile,
       modes,
       routes,
@@ -124,7 +131,7 @@ class CallTakerPanel extends Component {
       right: '0px',
       left: '0px',
       padding: '0px 8px 5px',
-      display: expandAdvanced ? 'none' : undefined
+      display: expandAdvanced ? undefined : 'none'
     }
     return (
       <ViewerContainer>
@@ -206,6 +213,21 @@ class CallTakerPanel extends Component {
               </Button>
             </div>
             <div className='advanced-search-options-container'>
+              {groupSize !== null && maxGroupSize &&
+                <span className='pull-right'>
+                  Group size:{' '}
+                  <input
+                    max={maxGroupSize}
+                    min={0}
+                    onChange={this._updateGroupSize}
+                    onKeyDown={this._handleFormKeyDown}
+                    step={1}
+                    style={{lineHeight: '0.8em'}}
+                    type='number'
+                    value={groupSize}
+                  />
+                </span>
+              }
               <Button
                 className='hide-button clear-button-formatting'
                 onClick={this._onHideAdvancedClick}>
@@ -248,12 +270,16 @@ class CallTakerPanel extends Component {
 
 // connect to the redux store
 const mapStateToProps = (state, ownProps) => {
+  const {activeId, requests} = state.callTaker.fieldTrip
+  const request = requests.data.find(req => req.id === activeId)
   const showUserSettings = getShowUserSettings(state.otp)
   return {
     activeSearch: getActiveSearch(state.otp),
     currentQuery: state.otp.currentQuery,
     expandAdvanced: state.otp.user.expandAdvanced,
+    groupSize: state.callTaker.fieldTrip.groupSize,
     mainPanelContent: state.otp.ui.mainPanelContent,
+    maxGroupSize: getGroupSize(request),
     modes: state.otp.config.modes,
     routes: state.otp.transitIndex.routes,
     showUserSettings,
@@ -264,6 +290,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = {
   findRoutes: apiActions.findRoutes,
   routingQuery: apiActions.routingQuery,
+  setGroupSize: fieldTripActions.setGroupSize,
   setQueryParam: formActions.setQueryParam
 }
 
diff --git a/lib/index.js b/lib/index.js
index da6c458e6..1bf19fee9 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,5 +1,6 @@
 import CallTakerControls from './components/admin/call-taker-controls'
 import CallTakerWindows from './components/admin/call-taker-windows'
+import FieldTripWindows from './components/admin/field-trip-windows'
 
 import DateTimeModal from './components/form/date-time-modal'
 import DateTimePreview from './components/form/date-time-preview'
@@ -68,6 +69,7 @@ export {
   DateTimePreview,
   DefaultSearchForm,
   ErrorMessage,
+  FieldTripWindows,
   LocationField,
   PlanTripButton,
   SettingsPreview,
diff --git a/lib/reducers/call-taker.js b/lib/reducers/call-taker.js
index 25c0c79fc..28d81a590 100644
--- a/lib/reducers/call-taker.js
+++ b/lib/reducers/call-taker.js
@@ -1,36 +1,37 @@
-import coreUtils from '@opentripplanner/core-utils'
 import update from 'immutability-helper'
 import moment from 'moment'
 
+import {constructNewCall} from '../util/call-taker'
 import {FETCH_STATUS} from '../util/constants'
-import {getTimestamp} from '../util/state'
-
-const { randId } = coreUtils.storage
-
-const UPPER_RIGHT_CORNER = {x: 604, y: 53}
 
 function createCallTakerReducer () {
   const initialState = {
     activeCall: null,
     callHistory: {
-      position: UPPER_RIGHT_CORNER,
-      visible: false,
       calls: {
         status: FETCH_STATUS.UNFETCHED,
         data: []
-      }
+      },
+      visible: false
+    },
+    fieldTrip: {
+      activeId: null,
+      filter: {
+        tab: 'new'
+      },
+      groupSize: null,
+      requests: {
+        status: FETCH_STATUS.UNFETCHED,
+        data: []
+      },
+      visible: false
     },
-    fieldTrips: [],
     session: null
   }
   return (state = initialState, action) => {
     switch (action.type) {
       case 'BEGIN_CALL': {
-        const newCall = {
-          startTime: getTimestamp(),
-          id: randId(),
-          searches: []
-        }
+        const newCall = constructNewCall()
         // Initialize new call and show call history window.
         return update(state, {
           activeCall: { $set: newCall },
@@ -52,6 +53,46 @@ function createCallTakerReducer () {
           callHistory: { calls: { $set: calls } }
         })
       }
+      case 'REQUESTING_FIELD_TRIPS': {
+        return update(state, {
+          fieldTrip: { requests: { status: { $set: FETCH_STATUS.FETCHING } } }
+        })
+      }
+      case 'RECEIVED_FIELD_TRIPS': {
+        const data = action.payload.fieldTrips
+        const requests = {
+          status: FETCH_STATUS.FETCHED,
+          data: data.sort((a, b) => moment(b.endTime) - moment(a.endTime))
+        }
+        return update(state, {
+          fieldTrip: { requests: { $set: requests } }
+        })
+      }
+      case 'SET_FIELD_TRIP_FILTER': {
+        return update(state, {
+          fieldTrip: { filter: { $merge: action.payload } }
+        })
+      }
+      case 'SET_GROUP_SIZE': {
+        return update(state, {
+          fieldTrip: { groupSize: { $set: action.payload } }
+        })
+      }
+      case 'SET_ACTIVE_FIELD_TRIP': {
+        return update(state, {
+          fieldTrip: {
+            activeId: { $set: action.payload },
+            groupSize: { $set: null }
+          }
+        })
+      }
+      case 'RECEIVED_FIELD_TRIP_DETAILS': {
+        const {fieldTrip} = action.payload
+        const index = state.fieldTrip.requests.data.findIndex(req => req.id === fieldTrip.id)
+        return update(state, {
+          fieldTrip: { requests: { data: { [index]: { $set: fieldTrip } } } }
+        })
+      }
       case 'RECEIVED_QUERIES': {
         const {callId, queries} = action.payload
         const {data} = state.callHistory.calls
@@ -62,13 +103,20 @@ function createCallTakerReducer () {
         })
       }
       case 'ROUTING_RESPONSE': {
-        // If call is in progress, record search ID when a routing response is
-        // fulfilled.
-        // TODO: How should we handle routing errors.
         if (state.activeCall) {
+          // If call is in progress, record search ID when a routing response is
+          // fulfilled.
+          // TODO: How should we handle routing errors.
           return update(state, {
             activeCall: { searches: { $push: [action.payload.searchId] } }
           })
+        } else if (state.callHistory.visible) {
+          // If call not in progress, but history is visible,
+          // construct new call and add search.
+          const newCall = constructNewCall()
+          newCall.searches.push(action.payload.searchId)
+          // Initialize new call and show call history window.
+          return update(state, { activeCall: { $set: newCall } })
         }
         // Otherwise, ignore.
         return state
@@ -89,6 +137,14 @@ function createCallTakerReducer () {
           callHistory: { visible: { $set: !state.callHistory.visible } }
         })
       }
+      case 'TOGGLE_FIELD_TRIPS': {
+        return update(state, {
+          fieldTrip: {
+            activeId: { $set: null },
+            visible: { $set: !state.fieldTrip.visible }
+          }
+        })
+      }
       case 'END_CALL': {
         return update(state, {
           activeCall: { $set: null }
diff --git a/lib/util/call-taker.js b/lib/util/call-taker.js
index 980c0cce3..f7138f281 100644
--- a/lib/util/call-taker.js
+++ b/lib/util/call-taker.js
@@ -1,9 +1,166 @@
+import {isTransit} from '@opentripplanner/core-utils/lib/itinerary'
+import {randId} from '@opentripplanner/core-utils/lib/storage'
+import moment from 'moment'
+
 import {getRoutingParams} from '../actions/api'
+import {getTimestamp} from './state'
+
+export const TICKET_TYPES = {
+  own_tickets: 'Will use own tickets',
+  hop_new: 'Will purchase new Hop Card',
+  hop_reload: 'Will reload existing Hop Card'
+}
+
+const PAYMENT_PREFS = {
+  request_call: 'Call requested at provided phone number',
+  phone_cc: 'Will call in credit card info to TriMet',
+  fax_cc: 'Will fax credit card info to TriMet',
+  mail_check: 'Will mail check to TriMet'
+}
+
+const positiveIntInputProps = {
+  min: 0,
+  step: 1,
+  type: 'number'
+}
+
+export const GROUP_FIELDS = [
+  {inputProps: positiveIntInputProps, fieldName: 'numStudents', label: 'students 7 or older'},
+  {inputProps: positiveIntInputProps, fieldName: 'numFreeStudents', label: 'students under 7'},
+  {inputProps: positiveIntInputProps, fieldName: 'numChaperones', label: 'chaperones'}
+]
+
+export const PAYMENT_FIELDS = [
+  {label: 'Payment preference', fieldName: 'paymentPreference', options: PAYMENT_PREFS},
+  {label: 'Class Pass Hop Card #', fieldName: 'classpassId'},
+  {label: 'Credit card type', fieldName: 'ccType'},
+  {label: 'Name on credit card', fieldName: 'ccName'},
+  {label: 'Credit card last 4 digits', fieldName: 'ccLastFour'},
+  {label: 'Check/Money order number', fieldName: 'checkNumber'}
+]
+
+// List of tabs used for filtering field trips.
+export const TABS = [
+  {
+    id: 'new',
+    label: 'New',
+    filter: (req) => req.status !== 'cancelled' &&
+      (!req.inboundTripStatus || !req.outboundTripStatus)
+  },
+  {
+    id: 'planned',
+    label: 'Planned',
+    filter: (req) => req.status !== 'cancelled' &&
+      req.inboundTripStatus && req.outboundTripStatus
+  },
+  {
+    id: 'cancelled',
+    label: 'Cancelled',
+    filter: (req) => req.status === 'cancelled'
+  },
+  {
+    id: 'past',
+    label: 'Past',
+    filter: (req) => req.travelDate &&
+      moment(req.travelDate).diff(moment(), 'days') < 0
+  },
+  {
+    id: 'all',
+    label: 'All',
+    filter: (req) => true
+  }
+]
+
+// List of fields in field trip object to which user's text search input applies.
+const SEARCH_FIELDS = [
+  'address',
+  'ccLastFour',
+  'ccName',
+  'ccType',
+  'checkNumber',
+  'city',
+  'classpassId',
+  'emailAddress',
+  'endLocation',
+  'grade',
+  'phoneNumber',
+  'schoolName',
+  'startLocation',
+  'submitterNotes',
+  'teacherName'
+]
+
+export function constructNewCall () {
+  return {
+    startTime: getTimestamp(),
+    id: randId(),
+    searches: []
+  }
+}
 
 function placeToLatLonStr (place) {
   return `${place.lat.toFixed(6)},${place.lon.toFixed(6)}`
 }
 
+/**
+ * @return {boolean} - whether a calltaker session is invalid
+ */
+export function sessionIsInvalid (session) {
+  if (!session || !session.sessionId) {
+    console.error('No valid OTP datastore session found.')
+    return true
+  }
+  return false
+}
+
+/**
+ * Get visible field trip requests according to the currently selected tab and
+ * search terms.
+ */
+export function getVisibleRequests (state) {
+  const {callTaker} = state
+  const {fieldTrip} = callTaker
+  const {filter} = fieldTrip
+  const {search, tab} = filter
+  const activeTab = TABS.find(t => t.id === tab)
+  return fieldTrip.requests.data.filter(request => {
+    let includedInTab = false
+    let includedInSearch = false
+    // First, filter field trip on whether it should be visible for the
+    // active tab.
+    if (activeTab) includedInTab = activeTab.filter(request)
+    // If search input is found, only include field trips with at least one
+    // field that matches search criteria.
+    if (search) {
+      // Split the search terms by whitespace and check that the request has
+      // values that match every term.
+      const searchTerms = search.toLowerCase().split(' ')
+      includedInSearch = searchTerms.every(term => {
+        const splitBySlash = term.split('/')
+        if (splitBySlash.length > 1) {
+          // Potential date format detected in search term.
+          const [month, day] = splitBySlash
+          if (!isNaN(month) && !isNaN(day)) {
+            // If month and day seem to be numbers, check against request date.
+            const date = moment(request.travelDate)
+            return date.month() + 1 === +month && date.date() === +day
+          }
+        }
+        return SEARCH_FIELDS.some(key => {
+          const value = (request[key] || '').toLowerCase()
+          let hasMatch = false
+          if (value) {
+            hasMatch = value.indexOf(term) !== -1
+          }
+          return hasMatch
+        })
+      })
+      return includedInTab && includedInSearch
+    }
+    return includedInTab
+  })
+}
+
 /**
  * Utility to map an OTP MOD UI search object to a Call Taker datastore query
  * object.
@@ -20,3 +177,96 @@ export function searchToQuery (search, call, otpConfig) {
     call
   }
 }
+
+/**
+ * Get the size of the group for a field trip request, optionally
+ * limited by those required to pay for tickets.
+ */
+export function getGroupSize (request, requireTickets = false) {
+  if (request) {
+    const { numChaperones = 0, numFreeStudents = 0, numStudents = 0 } = request
+    if (requireTickets) return numChaperones + numStudents
+    else return numChaperones + numFreeStudents + numStudents
+  }
+  return 0
+}
+
+/**
+ * Utility method to get either the outbound (default) or inbound
+ * trip that has been planned for the field trip request.
+ */
+export function getTripFromRequest (request, outbound = false) {
+  if (!request || !request.trips) return null
+  let trip
+  request.trips.forEach(t => {
+    const tripIsOutbound = t.requestOrder === 0
+    if (outbound && tripIsOutbound) trip = t
+    else if (!outbound && !tripIsOutbound) trip = t
+  })
+  return trip
+}
+
+/**
+ * Create trip plan from plan data with itineraries. Note: this is based on
+ * original code in OpenTripPlanner:
+ * https://github.com/ibi-group/OpenTripPlanner/blob/fdf972e590b809014e3f80160aeb6dde209dd1d4/src/client/js/otp/modules/planner/TripPlan.js#L27-L38
+ *
+ * FIXME: This still needs to be implemented for the field trip module.
+ */
+export function createTripPlan (planData, queryParams) {
+  const tripPlan = {
+    earliestStartTime: null,
+    latestEndTime: null,
+    planData,
+    queryParams,
+    itineraries: []
+  }
+  if (!planData) return
+  tripPlan.itineraries = tripPlan.planData.map(itinData =>
+    createItinerary(itinData, tripPlan))
+  const timeBounds = calculateTimeBounds(tripPlan.itineraries)
+  return {...tripPlan, ...timeBounds}
+}
+
+/**
+ * Calculate time bounds for all of the itineraries. Note: this is based on
+ * original code in OpenTripPlanner:
+ * https://github.com/ibi-group/OpenTripPlanner/blob/fdf972e590b809014e3f80160aeb6dde209dd1d4/src/client/js/otp/modules/planner/TripPlan.js#L53-L66
+ *
+ * FIXME: This still needs to be implemented for the field trip module.
+ */
+function calculateTimeBounds (itineraries) {
+  let earliestStartTime = null
+  let latestEndTime = null
+  itineraries.forEach(itin => {
+    earliestStartTime = (earliestStartTime == null || itin.getStartTime() < earliestStartTime)
+      ? itin.getStartTime()
+      : earliestStartTime
+    latestEndTime = (latestEndTime == null || itin.getEndTime() > latestEndTime)
+      ? itin.getEndTime()
+      : latestEndTime
+  })
+  return {earliestStartTime, latestEndTime}
+}
+
+/**
+ * Create itinerary. Note this is based on original code in OpenTripPlanner:
+ * https://github.com/ibi-group/OpenTripPlanner/blob/46e1f9ffd9a55f0c5409d25a34769cdaff2d8cbb/src/client/js/otp/modules/planner/Itinerary.js#L27-L40
+ */
+function createItinerary (itinData, tripPlan) {
+  const itin = {
+    itinData,
+    tripPlan,
+    firstStopIds: [],
+    hasTransit: false,
+    totalWalk: 0
+  }
+  itinData.legs.forEach(leg => {
+    if (isTransit(leg.mode)) {
+      itin.hasTransit = true
+      itin.firstStopIDs.push(leg.from.stopId)
+    }
+    if (leg.mode === 'WALK') itin.totalWalk += leg.distance
+  })
+  return itin
+}
diff --git a/package.json b/package.json
index 9cb3b881d..f7e931971 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "moment-timezone": "^0.5.23",
     "object-hash": "^1.3.1",
     "object-path": "^0.11.5",
+    "object-to-formdata": "^4.1.0",
     "prop-types": "^15.6.0",
     "qs": "^6.3.0",
     "react": "^16.9.0",
diff --git a/yarn.lock b/yarn.lock
index cde8b58ba..295ccc823 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11559,6 +11559,11 @@ object-path@^0.11.5:
   resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.5.tgz#d4e3cf19601a5140a55a16ad712019a9c50b577a"
   integrity sha512-jgSbThcoR/s+XumvGMTMf81QVBmah+/Q7K7YduKeKVWL7N111unR2d6pZZarSk6kY/caeNxUDyxOvMWyzoU2eg==
 
+object-to-formdata@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object-to-formdata/-/object-to-formdata-4.1.0.tgz#0d7bdd6f9e4efa8c0075a770c11ec92b7bf6c560"
+  integrity sha512-4Ti3VLTspWOUt5QIBl5/BpvLBnr4tbFpZ/FpXKWQFqLslvGIB3ug3jurW/k8iIpoyE6HcZhhmQ6mFiOq1tKGEQ==
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"