Merge pull request #24 from Pearson-Advance/vue/PADV-892

PADV-892 feat: Add dashboard page

src/assets/colors.scss

@@ -8,8 +8,8 @@ $gradient-gray: rgba(247, 249, 253, 0.1);
 $color-active-button: #989ba3;
 $bg-main-color: white;
 $gray-light: #dfe1e1;
-$color-pink: #ffd0d7;
-$color-green: #c4eacd;
-$color-yellow: #f2f4be;
-$color-purple: #e4b8d6;
+$color-pink: #ffecf0;
+$color-green: #e7f7eb;
+$color-yellow: #fafbe5;
+$color-purple: #f4e3ee;
 $black-80: #333;

src/features/Dashboard/DashboardPage/_test_/index.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DashboardPage from 'features/Dashboard/DashboardPage';
+import { InstitutionContext } from 'features/Main/institutionContext';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('DashboardPage component', () => {
+  test('renders components', () => {
+    const { getByText } = render(
+      <InstitutionContext.Provider value={[{ id: 1, name: 'Institution Name' }]}>
+        <DashboardPage />
+      </InstitutionContext.Provider>,
+    );
+
+    expect(getByText('This week')).toBeInTheDocument();
+    expect(getByText('Next week')).toBeInTheDocument();
+    expect(getByText('Next month')).toBeInTheDocument();
+    expect(getByText('New students registered')).toBeInTheDocument();
+    expect(getByText('Classes scheduled')).toBeInTheDocument();
+    expect(getByText('Welcome to Institution Name')).toBeInTheDocument();
+  });
+});

src/features/Dashboard/DashboardPage/index.jsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import { Container } from '@edx/paragon';
+import StudentsMetrics from 'features/Students/StudentsMetrics';
+import { InstitutionContext } from 'features/Main/institutionContext';
+
+const DashboardPage = () => {
+  const dataInstitution = useContext(InstitutionContext);
+
+  return (
+    <Container size="xl">
+      <h2 className="title-page">{dataInstitution.length === 1 ? `Welcome to ${dataInstitution[0].name}` : 'Select an institution'}</h2>
+      <StudentsMetrics />
+    </Container>
+  );
+};
+
+export default DashboardPage;

src/features/Main/Sidebar/index.jsx

@@ -7,7 +7,7 @@ import { faUsers, faUser, faBook } from '@fortawesome/free-solid-svg-icons';
 import './index.scss';
 
 export const Sidebar = () => {
-  const [activeTab, setActiveTab] = useState('students');
+  const [activeTab, setActiveTab] = useState('dashboard');
   const history = useHistory();
 
   const handleTabClick = (tabName) => {
@@ -26,6 +26,17 @@ export const Sidebar = () => {
       </div>
       <nav className="nav-menu">
         <ul className="nav-links">
+          <li>
+            <button
+              type="button"
+              className={`${activeTab === 'dashboard' ? 'active' : ''} sidebar-item`}
+              aria-current="page"
+              onClick={() => handleTabClick('dashboard')}
+            >
+              <i className="fa-regular fa-house" />
+              <span className="nav-text">Home</span>
+            </button>
+          </li>
           <li>
             <button
               type="button"

src/features/Main/_test_/index.test.jsx

@@ -6,7 +6,11 @@ import '@testing-library/jest-dom/extend-expect';
 
 jest.mock('features/Students/StudentsPage');
 jest.mock('features/Students/data/api');
+jest.mock('features/Main/data/api');
 jest.mock('@edx/frontend-platform/auth');
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
 
 describe('Main component', () => {
   const authenticatedUser = {
@@ -35,7 +39,6 @@ describe('Main component', () => {
     expect(profileLink).toBeInTheDocument();
     expect(logOutLink).toBeInTheDocument();
   });
-
   it('Should render Sidebar', () => {
     render(
       <AppContext.Provider value={{ authenticatedUser, config }}>

src/features/Main/index.jsx

@@ -1,5 +1,8 @@
 import React, { useEffect, useReducer } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import {
+  BrowserRouter, Switch, Route, Redirect,
+} from 'react-router-dom';
+import { logError } from '@edx/frontend-platform/logging';
 import { Sidebar } from 'features/Main/Sidebar';
 import { Header } from 'features/Main/Header';
 import { Footer } from 'features/Main/Footer';
@@ -8,6 +11,7 @@ import Container from '@edx/paragon/dist/Container';
 import { getConfig } from '@edx/frontend-platform';
 import InstructorsPage from 'features/Instructors/InstructorsPage';
 import CoursesPage from 'features/Courses/CoursesPage';
+import DashboardPage from 'features/Dashboard/DashboardPage';
 import reducer from 'features/Main/reducer';
 import { getInstitutionName } from 'features/Main/data/api';
 import { InstitutionContext } from 'features/Main/institutionContext';
@@ -37,6 +41,7 @@ const Main = () => {
         dispatch({ type: FETCH_INSTITUTION_DATA_SUCCESS, payload: response.data });
       } catch (error) {
         dispatch({ type: FETCH_INSTITUTION_DATA_FAILURE, payload: error });
+        logError(error);
       }
     };
 
@@ -51,6 +56,14 @@ const Main = () => {
           <main>
             <Container size="xl">
               <Header />
+              <Switch>
+                <Route exact path="/">
+                  <Redirect to="/dashboard" />
+                </Route>
+              </Switch>
+              <Switch>
+                <Route path="/dashboard" exact component={DashboardPage} />
+              </Switch>
               <Switch>
                 <Route path="/students" exact component={StudentsPage} />
               </Switch>