Base de tableau de bord

client/src/components/HomePage/Dashboard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export function Dashboard() {
+  return (
+    <div className="columns">
+      <div className="column">
+        <div className="box">
+          <div className="level">
+            <div className="level-left">
+              <h3 className="is-size-3 subtitle level-item">Groupes de travail</h3>
+            </div>
+            <div className="level-right">
+              <button className="button is-primary level-item"><i className="fa fa-plus"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="column">
+        <div className="box">
+          <div className="level">
+            <div className="level-left">
+              <h3 className="is-size-3 subtitle level-item">D.à.Ds</h3>
+            </div>
+            <div className="level-right">
+              <button disabled className="button is-primary level-item"><i className="fa fa-plus"></i></button>
+            </div>
+          </div>
+          <pre>TODO</pre>
+        </div>
+      </div>
+      <div className="column">
+        <div className="box">
+          <div className="level">
+            <div className="level-left">
+              <h3 className="is-size-3 subtitle level-item">Assemblées</h3>
+            </div>
+            <div className="level-right">
+              <button disabled className="button is-primary level-item"><i className="fa fa-plus"></i></button>
+            </div>
+          </div>
+          <pre>TODO</pre>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/HomePage/HomePage.tsx

@@ -1,26 +1,27 @@
 import React, { useEffect } from 'react';
 import { Page } from '../Page';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { RootState } from '../../store/reducers/root';
+import { Dashboard } from './Dashboard';
 
 export function HomePage() {
   const currentUser = useSelector((state: RootState) => state.auth.currentUser);
 
   return (
-    <Page title="Accueil">
+    <Page title={currentUser ? 'Tableau de bord' : 'Accueil'}>
       <div className="container is-fluid">
         <section className="section">
-          <div className="columns">
+          {
-            <div className="column is-4 is-offset-4">
+            currentUser ?
-              <div className="box">
+            <Dashboard /> :
-              { 
+            <div className="columns">
-                currentUser && currentUser.email ?
+              <div className="column is-4 is-offset-4">
-                <p>Bonjour <span className="has-text-weight-bold">{currentUser.name ? currentUser.name : currentUser.email}</span> !</p> :
+                <div className="box">
-                <p>Veuillez vous authentifier.</p>
+                  <p>Veuillez vous authentifier.</p>
-              }
+                </div>
               </div>
-            </div>
+            </div> 
-          </div>
+          }
         </section>
       </div>
     </Page>