add structure for member practice summary report

client/src/constants/menuItems.js

@@ -1,6 +1,7 @@
 import UploadDLockData from '../scenes/UploadDLockData';
 import Home from '../scenes/Home';
 import IncidentsReport from '../scenes/IncidentsReport';
+import PracticeSummaryReport from '../scenes/PracticeSummaryReport';
 
 export const mainMenuItems = [
     {
@@ -9,6 +10,12 @@ export const mainMenuItems = [
         url: '/',
         component: Home,
     },
+    {
+        id: 'practiceSummaryReport',
+        title: 'Practice Summary Report',
+        url: '/practice-summary-report',
+        component: PracticeSummaryReport,
+    },
     {
         id: 'report',
         title: 'Incidents Report',

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

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { Dropdown, Form } from 'semantic-ui-react';
+
+class MemberSelector extends Component {
+    render(){
+        return (
+            <Form>
+                <label>{'\u00A0'}</label>
+                <Dropdown
+                    placeholder="Select Member"
+                    selection
+                    search
+                    fluid
+                />
+            </Form>
+        );
+    }
+}
+
+export default MemberSelector;

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

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+class MemberSummary extends Component {
+    render() {
+        return (<h4>Member Summary</h4>);
+    }
+}
+
+export default MemberSummary;

client/src/scenes/PracticeSummaryReport/index.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {Container, Grid} from 'semantic-ui-react';
+
+import MainMenu from '../../components/MainMenu';
+import DateRangePicker from '../../components/DateRangePicker';
+import MemberSelector from './components/MemberSelector';
+import MemberSummary from './components/MemberSummary';
+import MemberIncidentsTable from '../../components/MemberIncidentsTable';
+
+class PracticeSummaryReport extends Component {
+    render () {
+        return (
+            <Container>
+                <MainMenu/>
+                <h3>Practice Summary Report</h3>
+                <hr/>
+                <Grid stackable columns="equal">
+                    <Grid.Row>
+                        <Grid.Column>
+                            <MemberSelector />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <DateRangePicker />
+                        </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <MemberSummary />
+                        </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <MemberIncidentsTable title="Incidents list" />
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </Container>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+});
+
+const mapDispatchToProps = (dispatch) => ({
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PracticeSummaryReport);