diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 33baa4d7b..37616a207 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -22,6 +22,7 @@ const routes = (
+
);
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css
new file mode 100644
index 000000000..be2cd9f7a
--- /dev/null
+++ b/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;
+}
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index c287d5f2c..e01eec319 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/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 (
-
Dashboard
+
+
+
Top Ten Articles with the most flagged comments
+
+
+
+
Top ten comments with the most likes
+
+
);
}
}
diff --git a/client/coral-admin/src/graphql/queries/mostFlags.graphql b/client/coral-admin/src/graphql/queries/mostFlags.graphql
index b84e21d08..229d64541 100644
--- a/client/coral-admin/src/graphql/queries/mostFlags.graphql
+++ b/client/coral-admin/src/graphql/queries/mostFlags.graphql
@@ -1,3 +1,5 @@
query mostFlags {
- metric
+ metric {
+ id
+ }
}