diff --git a/client/coral-admin/src/components/FlagWidget.css b/client/coral-admin/src/components/FlagWidget.css
new file mode 100644
index 000000000..590aa51d1
--- /dev/null
+++ b/client/coral-admin/src/components/FlagWidget.css
@@ -0,0 +1,5 @@
+.heading {
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/components/FlagWidget.js
new file mode 100644
index 000000000..be167de8a
--- /dev/null
+++ b/client/coral-admin/src/components/FlagWidget.js
@@ -0,0 +1,26 @@
+import React, {PropTypes} from 'react';
+import styles from './FlagWidget.css';
+
+const FlagWidget = props => {
+ return (
+
+
+ | Article | Flags |
+
+
+ {/* display asset list as rows here */}
+
+
+ );
+};
+
+FlagWidget.propTypes = {
+ assets: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.string,
+ title: PropTypes.string,
+ url: PropTypes.string,
+ count: PropTypes.number
+ })).isRequired
+};
+
+export default FlagWidget;
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index e01eec319..4d7f268f8 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js
@@ -1,21 +1,30 @@
import React from 'react';
import {compose} from 'react-apollo';
import {mostFlags} from 'coral-admin/src/graphql/queries';
+import {Spinner} from 'coral-ui';
import styles from './Dashboard.css';
+import FlagWidget from '../../components/FlagWidget';
class Dashboard extends React.Component {
render () {
+
+ const {data} = this.props;
+
+ if (data.loading) {
+ return ;
+ }
+
+ if (data.error) {
+ return {data.error};
+ }
+
return (
-
+
Top Ten Articles with the most flagged comments
-
+
-
+
Top ten comments with the most likes