diff -r 000000000000 -r 5f4fcbc80b37 clientjs/packages/dashboard-components/src/ui/Document.jsx
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/Document.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import './Document.scss';
+
+const Document = ({
+  document,
+  stats,
+  viaBaseUrl,
+  intl,
+}) => {
+  const docStats = stats
+    || {
+      users: 0,
+      annotations: 0,
+      comments: 0,
+      calls: 0,
+    };
+
+  const nbUsersTitle = intl.formatMessage({ id: 'ui.document.nbUsersTitle', defaultMessage: 'Nb. utilisateurs' });
+  const nbAnnotationsTitle = intl.formatMessage({ id: 'ui.document.nbAnnotationsTitle', defaultMessage: 'Nb. annotations' });
+  const nbCommentsTitle = intl.formatMessage({ id: 'ui.document.nbCommentsTitle', defaultMessage: 'Nb. commentaires' });
+  const nbCallsTitle = intl.formatMessage({ id: 'ui.document.nbCallsTitle', defaultMessage: "Nb. d'appels" });
+
+  /* eslint-disable react/no-danger */
+  return (
+    <div className="card w-100 document-card">
+
+      <div className="card-body">
+        <h4 className="card-title">{ document.name }</h4>
+        <h6 className="card-subtitle mb-2 text-muted">{ document.author }</h6>
+
+        <p className="card-text small" dangerouslySetInnerHTML={{ __html: document.description }} />
+
+        <a href={viaBaseUrl + document.uri} className="card-link" target="_blank" rel="noopener noreferrer"><FormattedMessage id="ui.document.annotator_link" defaultMessage="Open with annotator" /></a>
+      </div>
+
+      <div className="card-footer">
+        <div className="stats text-muted small">
+          <span title={nbUsersTitle}>
+            <FontAwesomeIcon icon="user" />
+            {' '}
+            <span>{ docStats.users }</span>
+          </span>
+          <span title={nbAnnotationsTitle}>
+            <FontAwesomeIcon icon="pencil-alt" />
+            {' '}
+            <span>{ docStats.annotations }</span>
+          </span>
+          <span title={nbCommentsTitle}>
+            <FontAwesomeIcon icon="comment" />
+            {' '}
+            <span>{ docStats.comments }</span>
+          </span>
+          <span title={nbCallsTitle}>
+            <FontAwesomeIcon icon="bell" />
+            {' '}
+            <span>{ docStats.calls }</span>
+          </span>
+        </div>
+      </div>
+
+    </div>
+  );
+  /* eslint-enable react/no-danger */
+};
+
+Document.propTypes = {
+  document: PropTypes.object.isRequired,
+  stats: PropTypes.object,
+  viaBaseUrl: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+Document.defaultProps = {
+  stats: {
+    users: 0,
+    annotations: 0,
+    comments: 0,
+    calls: 0,
+  },
+};
+
+export default injectIntl(Document);