modify UI to display incidents separately

client/src/components/MemberIncidentsTable/index.js

@@ -8,13 +8,13 @@ import {incidentsReportHeaderTitles} from '../../constants/menuItems';
 import {
     incidentDescriptions,
     incidentLevelDescriptions,
-    UNLOCKED_INCIDENT,
+    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
-    UNSCHEDULED_INCIDENT
+    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE
 } from '../../constants/enums';
 
 
 const MemberIncidentsTable = props => {
-    const { loading, title, openMemberSummaryOnMemberClick } = props;
+    const { loading, title, openMemberSummaryOnMemberClick, showBookingTimes, showDoorLockEntryTimes } = props;
     const incidents = props.incidents ? props.incidents : [];
 
     const columns = [];
@@ -24,7 +24,15 @@ const MemberIncidentsTable = props => {
         incidentHeaders.forEach((header) => {
             const columnTitle = incidentsReportHeaderTitles[header];
 
-            if (columnTitle){
+            let showColumn = true;
+            if ((header === 'bookingStart' || header === 'bookingEnd') && !showBookingTimes){
+                showColumn = false;
+            }
+            if ((header === 'unlockTimestamp' || header === 'lockTimestamp') && !showDoorLockEntryTimes){
+                showColumn = false;
+            }
+
+            if (columnTitle && showColumn){
                 const columnAlignments = {
                     left: 'left',
                     right: 'right',
@@ -54,10 +62,13 @@ const MemberIncidentsTable = props => {
                                 const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
 
                                 switch (incidentType) {
-                                    case UNLOCKED_INCIDENT:
+                                    case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
+                                    case UNLOCKED_INCIDENT_STANDALONE:
                                         cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
                                         break;
-                                    case UNSCHEDULED_INCIDENT:
+                                    case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
+                                    case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
+                                    case UNSCHEDULED_INCIDENT_STANDALONE:
                                         cellValue = `${timeIntervalsToCharge} x 5 min`;
                                         break;
                                     default:
@@ -80,12 +91,6 @@ const MemberIncidentsTable = props => {
                         }else{
                             return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
                         }
-
-                        // return <NavLink to={urlValue}>
-                        //     <div>{cellValue}</div>
-                        // </NavLink>
-
-                        // return <div style={{ textAlign: columnContentsAlignment }}><a href={'www.gogole.com'} >{cellValue}</a></div>
                     }
                 });
             }

client/src/constants/enums.js

@@ -1,10 +1,16 @@
 
-export const UNLOCKED_INCIDENT = 2;
+export const UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION = 2;
-export const UNSCHEDULED_INCIDENT = 3;
+export const UNSCHEDULED_INCIDENT_BEFORE_RESERVATION = 3;
+export const UNSCHEDULED_INCIDENT_AFTER_RESERVATION = 4;
+export const UNLOCKED_INCIDENT_STANDALONE = 5;
+export const UNSCHEDULED_INCIDENT_STANDALONE = 6;
 
 export const incidentDescriptions = {};
-incidentDescriptions[UNLOCKED_INCIDENT] = 'User left door unlocked';
+incidentDescriptions[UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION] = 'User left door unlocked';
-incidentDescriptions[UNSCHEDULED_INCIDENT] = 'Unscheduled use';
+incidentDescriptions[UNSCHEDULED_INCIDENT_BEFORE_RESERVATION] = 'Unscheduled use - before';
+incidentDescriptions[UNSCHEDULED_INCIDENT_AFTER_RESERVATION] = 'Unscheduled use - after';
+incidentDescriptions[UNLOCKED_INCIDENT_STANDALONE] = 'User left door unlocked';
+incidentDescriptions[UNSCHEDULED_INCIDENT_STANDALONE] = 'Unscheduled use';
 
 export const incidentLevelDescriptions = {
     UNLOCKED_0: 'First month',
@@ -13,5 +19,4 @@ export const incidentLevelDescriptions = {
     UNLOCKED_3: 'Fourth month',
     UNLOCKED_4: 'Fifth month',
     UNLOCKED_5: 'Sixth month',
-
 };

client/src/constants/menuItems.js

@@ -45,6 +45,8 @@ export const incidentsReportHeaderTitles = {
     resourceName: 'Room',
     bookingStart: 'Reservation Start',
     bookingEnd: 'Reservation End',
+    unlockTimestamp: 'Unlock Time',
+    lockTimestamp: 'Lock Time',
     memberName: 'Member Name',
     incidentType: 'Incident Type',
     feeDescription: 'Fee description',

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: