saving my place

client/coral-admin/src/AppRouter.js

@@ -22,6 +22,7 @@ const routes = (
       <Route path='dashboard' component={Dashboard} />
       <Route path='moderate' component={ModerationContainer} />
       <Route path='moderate/:id' component={ModerationContainer} />
+      <Route path='dashboard' component={Dashboard} />
     </Route>
   </div>
 );

client/coral-admin/src/containers/Dashboard/Dashboard.css

@@ -0,0 +1,23 @@
+.Dashboard {
+  display: flex;
+  padding: 5px;
+}
+
+.widget {
+  margin-top: 10px;
+  flex: 1;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+  margin-right: 10px;
+  padding: 15px;
+
+}
+
+.widget:last-child {
+  margin-right: 0;
+}
+
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}

client/coral-admin/src/containers/Dashboard/Dashboard.js

@@ -1,11 +1,24 @@
 import React from 'react';
 import {compose} from 'react-apollo';
 import {mostFlags} from 'coral-admin/src/graphql/queries';
+import styles from './Dashboard.css';
 
 class Dashboard extends React.Component {
   render () {
     return (
-      <div>Dashboard</div>
+      <div className={styles.Dashboard}>
+        <div className={`${styles.flagWidget} ${styles.widget}`}>
+          <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
+          <table>
+            <thead>
+              <tr><th>Article</th><th>Flags</th></tr>
+            </thead>
+          </table>
+        </div>
+        <div className={`${styles.likeWidget} ${styles.widget}`}>
+          <h2 className={styles.heading}>Top ten comments with the most likes</h2>
+        </div>
+      </div>
     );
   }
 }

client/coral-admin/src/graphql/queries/mostFlags.graphql

@@ -1,3 +1,5 @@
 query mostFlags {
-  metric
+  metric {
+    id
+  }
 }