Add stats page with application status summary

client/src/api/statApi.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+class statApi {
+  static getApplicationSummary() {
+    return axios.get('/stat/applicationSummary')
+      .then((response) => {
+        return response.data
+      })
+  }
+}
+
+export default statApi

client/src/components/stat/ApplicationSummaryRow.js

@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react'
+import { Glyphicon } from 'react-bootstrap'
+
+function displayApplicationCount(count) {
+  return count ? count : 0
+}
+
+function getApplicationTotal() {
+  let applicationTotal = 0
+  for (let index = 0; index < arguments.length; index++) {
+    if (typeof arguments[index] === 'number') {
+      applicationTotal += arguments[index]
+    }
+  }
+  return applicationTotal
+}
+
+const ApplicationSummaryRow = ({ applicationSummary }) => {
+  return (
+    <tr>
+      <td>{ applicationSummary.name }</td>
+      <td>{ displayApplicationCount(applicationSummary.sent) }</td>
+      <td>{ displayApplicationCount(applicationSummary.accepted) }</td>
+      <td>{ displayApplicationCount(applicationSummary.refused) }</td>
+      <td>{ getApplicationTotal(applicationSummary.accepted, applicationSummary.refused, applicationSummary.sent) }</td>
+    </tr>
+  )
+}
+
+ApplicationSummaryRow.propTypes = {
+  applicationSummary: PropTypes.object.isRequired
+}
+
+export default ApplicationSummaryRow

client/src/components/stat/ApplicationSummaryTable.js

@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react'
+import { Glyphicon } from 'react-bootstrap'
+import ApplicationSummaryRow from './ApplicationSummaryRow'
+
+const ApplicationSummaryTable = ({ applicationSummaryList }) => {
+  return (
+    <table className="table table-hover">
+      <thead>
+        <tr>
+          <th>Pepite</th>
+          <th>En attente</th>
+          <th>Acceptées</th>
+          <th>Refusées</th>
+          <th>Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        {applicationSummaryList.map((applicationSummary, i) => { return (<ApplicationSummaryRow key={i} applicationSummary={applicationSummary} />) })}
+      </tbody>
+    </table>
+  )
+}
+
+ApplicationSummaryTable.propTypes = {
+  applicationSummaryList: PropTypes.array.isRequired
+}
+
+export default ApplicationSummaryTable

client/src/components/stat/StatPage.js

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react'
+import { Panel } from 'react-bootstrap'
+
+import statApi from '../../api/statApi'
+import ApplicationSummaryTable from './ApplicationSummaryTable'
+
+class StatPage extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      applicationSummary: []
+    }
+  }
+
+  componentDidMount() {
+    statApi.getApplicationSummary().then(((applicationSummary) => {
+      this.setState({ applicationSummary })
+    }))
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <div className="page-header">
+          <h1>Métriques du service</h1>
+          <Panel header="Candidatures par PEPITE">
+          <ApplicationSummaryTable applicationSummaryList={this.state.applicationSummary} />
+        </Panel>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default StatPage

client/src/routes.js

@@ -10,6 +10,7 @@ import CommitteeAnswerPage from './components/pepite/Applicant/CommitteeAnswer/C
 import ApplicantPage from './components/pepite/Applicant/ApplicantPage'
 import CommitteePage from './components/pepite/Committee/CommitteePage'
 import CguPage from './components/cgu/CguPage'
+import StatPage from './components/stat/StatPage'
 import NotFound from './components/error/NotFound'
 import EnsureIsAuthenticatedContainer from './components/login/EnsureIsAuthenticatedContainer'
 
@@ -20,6 +21,7 @@ export default (
     <Route path="application(/:id)" component={ApplicationPage} />
     <Route path="login" component={LoginPage} />
     <Route path="cgu" component={CguPage} />
+    <Route path="stats" component={StatPage} />
     <Route component={EnsureIsAuthenticatedContainer}>
       <Route path="pepite" component={PepiteHomePage} />
       <Route path="pepite/applicant" component={ApplicantPage} />