Start of PracticeSummaryReport

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

@@ -1,9 +1,69 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Loader, Grid } from 'semantic-ui-react';
+
+import { UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../../constants/enums';
+
+const MemberSummary = props => {
+    const { loading } = props;
+    const incidents = props.incidents ? props.incidents : [];
+
+    let totalUnscheduledFees = 0;
+    let totalUnlockedFees = 0;
+
+    incidents.forEach((incident) => {
+        console.log(incident);
+        switch (incident.incidentType) {
+            case UNSCHEDULED_INCIDENT:
+                totalUnscheduledFees += parseFloat(incident.totalChargeFee);
+                break;
+            case UNLOCKED_INCIDENT:
+                totalUnlockedFees += parseFloat(incident.incidentPrice);
+                break;
+        }
+    });
+
+    const grandTotal = totalUnlockedFees + totalUnscheduledFees;
+
+    const formattedUnscheduledFees = `$ ${totalUnscheduledFees.toFixed(2)}`;
+    const formattedUnlockedFees = `$ ${totalUnlockedFees.toFixed(2)}`;
+    const formattedGrandTotalFee = `$ ${grandTotal.toFixed(2)}`;
+
+    return (
+        <div>
+            <h4>Member Summary for selected period</h4>
+            <Loader active={loading} />
+            {
+                !loading &&
+                    <Grid stackable>
+                        <Grid.Row>
+                            <Grid.Column width={3}>
+                                <p>Unscheduled incidents total :</p>
+                            </Grid.Column>
+                            <Grid.Column width={9}>
+                                <p>{formattedUnscheduledFees}</p>
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row>
+                            <Grid.Column width={3}>
+                                <p>Unlocked incidents total :</p>
+                            </Grid.Column>
+                            <Grid.Column width={9}>
+                                <p>{formattedUnlockedFees}</p>
+                            </Grid.Column>
+                        </Grid.Row>
+                        <Grid.Row>
+                            <Grid.Column width={3}>
+                                <p><b>Grand Total :</b></p>
+                            </Grid.Column>
+                            <Grid.Column width={9}>
+                                <p><b>{formattedGrandTotalFee}</b></p>
+                            </Grid.Column>
+                        </Grid.Row>
+                    </Grid>
+            }
+        </div>
+    );
+};
 
-class MemberSummary extends Component {
-    render() {
-        return (<h4>Member Summary</h4>);
-    }
-}
 
 export default MemberSummary;

client/src/scenes/PracticeSummaryReport/index.js

@@ -57,9 +57,13 @@ class PracticeSummaryReport extends Component {
                     </Grid.Row>
                     <Grid.Row>
                         <Grid.Column>
-                            <MemberSummary />
+                            <MemberSummary
+                                incidents={memberIncidents}
+                                loading={loading}
+                            />
                         </Grid.Column>
                     </Grid.Row>
+                    <Grid.Row/>
                     <Grid.Row>
                         <Grid.Column>
                             <MemberIncidentsTable