modify UI to display incidents separately

client/src/scenes/IncidentsReport/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Container } from 'semantic-ui-react';
+import { Container, Accordion, Label } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
 import DateRangePicker from '../../components/DateRangePicker';
@@ -8,6 +8,13 @@ import MemberIncidentsTable from '../../components/MemberIncidentsTable';
 
 import { fetchIncidents } from '../../store/actions';
 
+import {
+    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION,
+    UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
+    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION,
+    UNSCHEDULED_INCIDENT_STANDALONE
+} from '../../constants/enums';
+
 class IncidentsReport extends Component {
     onDatesUpdate(dateRange) {
         const { fetchIncidents } = this.props;
@@ -17,6 +24,62 @@ class IncidentsReport extends Component {
     render () {
         const { pendingIncidents, incidents } = this.props;
 
+        const incidentsRelatedToReservations = [];
+        const standaloneIncidents = [];
+
+        if (Array.isArray(incidents)){
+            incidents.forEach((incident) => {
+                if (incident && incident.incidentType){
+                    switch (incident.incidentType) {
+                        case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
+                        case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
+                        case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
+                            incidentsRelatedToReservations.push(incident);
+                            break;
+                        case UNLOCKED_INCIDENT_STANDALONE:
+                        case UNSCHEDULED_INCIDENT_STANDALONE:
+                            standaloneIncidents.push(incident);
+                            break;
+                    }
+                }
+            });
+        }
+
+        const incidentsRelatedToReservationsTable = (
+            <MemberIncidentsTable
+                loading={pendingIncidents}
+                incidents={incidentsRelatedToReservations}
+                openMemberSummaryOnMemberClick
+                showBookingTimes
+            />
+        );
+
+        const standaloneIncidentsTable = (
+            <MemberIncidentsTable
+                loading={pendingIncidents}
+                incidents={standaloneIncidents}
+                openMemberSummaryOnMemberClick
+                showDoorLockEntryTimes
+            />
+        );
+
+        const accordionPanels = [
+            {
+                key: 'related-door-lock-incidents',
+                title : { content: <Label color='blue' content={'Door Lock Charges - Related to reservations'} /> },
+                content: { content : incidentsRelatedToReservationsTable },
+            },
+            {
+                key: 'standalone-door-lock-incidents',
+                title : { content: <Label color='blue' content={'Door Lock Charges - Standalone'} /> },
+                content: { content: standaloneIncidentsTable },
+            },
+            {
+                key: 'reservation-modification-incidents',
+                title: {content: <Label color='blue' content={'Cancellation charges'}/>},
+            }
+        ];
+
         return (
             <Container>
                 <MainMenu/>
@@ -24,7 +87,12 @@ class IncidentsReport extends Component {
                 <hr/>
                 <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
                 <br/>
-                <MemberIncidentsTable loading={pendingIncidents} incidents={incidents} openMemberSummaryOnMemberClick />
+                <Accordion
+                    panels={accordionPanels}
+                    exclusive={false}
+                    defaultActiveIndex={[0]}
+                    fluid
+                />
             </Container>
         );
     }

client/src/scenes/PracticeSummaryReport/components/MemberSummary.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Loader, Grid } from 'semantic-ui-react';
 
-import { UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../../constants/enums';
+import { UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION } from '../../../constants/enums';
 
 const MemberSummary = props => {
     const { loading } = props;
@@ -12,10 +12,10 @@ const MemberSummary = props => {
 
     incidents.forEach((incident) => {
         switch (incident.incidentType) {
-            case UNSCHEDULED_INCIDENT:
+            case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
                 totalUnscheduledFees += parseFloat(incident.totalChargeFee);
                 break;
-            case UNLOCKED_INCIDENT:
+            case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
                 totalUnlockedFees += parseFloat(incident.incidentPrice);
                 break;
             default: