Francis dashboard branch

package.json

@@ -3,34 +3,52 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@faker-js/faker": "^7.3.0",
     "@feathersjs/authentication-client": "^4.5.11",
+    "@feathersjs/client": "^4.5.15",
     "@feathersjs/feathers": "^4.5.11",
     "@feathersjs/socketio-client": "^4.5.11",
     "@fortawesome/fontawesome-free": "^5.15.1",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.93",
+    "@mui/material": "^5.9.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.47",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.3",
+    "apexcharts": "^3.35.4",
     "bulma": "^0.9.1",
     "bulma-calendar": "^6.1.2",
     "bulma-toast": "^2.2.0",
     "chart.js": "^3.3.0",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.29.1",
     "dotenv": "^8.2.0",
+    "framer-motion": "^6.5.1",
     "leaflet": "^1.8.0",
     "random-string-generator": "^1.0.0",
-    "react": "^17.0.1",
+    "react": ">=16.8.0",
     "react-accessible-accordion": "^3.3.4",
+    "react-apexcharts": "^1.4.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-chartjs-2": "^3.0.3",
     "react-cool-onclickoutside": "^1.7.0",
+    "react-data-table-component": "^7.5.2",
     "react-datepicker": "^3.6.0",
     "react-debounce-input": "^3.2.3",
-    "react-dom": "^17.0.1",
+    "react-dom": ">=16.8.0",
     "react-draggable": "^4.4.3",
     "react-dropzone-uploader": "^2.11.0",
     "react-form-builder2": "^0.11.3",
     "react-hook-form": "^6.14.1",
     "react-infinite-scroll-component": "^6.0.0",
     "react-jitsi": "^1.0.4",
+    "react-json-editor-ajrm": "^2.5.13",
     "react-jutsu": "^3.0.1",
     "react-leaflet": "^4.0.0",
     "react-query": "^3.5.16",
@@ -39,8 +57,11 @@
     "react-to-print": "^2.12.5",
     "serve": "^11.3.2",
     "socket.io-client": "^2.3.1",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.8.3",
     "use-places-autocomplete": "^3.0.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "dev": "react-scripts start",
@@ -66,10 +87,20 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/leaflet": "^1.7.10"
+    "@types/leaflet": "^1.7.10",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-json-editor-ajrm": "^2.5.3",
+    "@types/styled-components": "^5.1.25",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6"
+  },
+  "engines": {
+    "npm": "8.1.0",
+    "node": "16.12.0"
   },
-  "engines" : { 
-    "npm" : "8.1.0",
-    "node" : "16.12.0"
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
+    ]
   }
 }

src/App.test.js

@@ -1,8 +1,19 @@
-import { render, screen } from '@testing-library/react';
+import {shallow, configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import App from './App';
+import Home from './components/Home.js';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+
+configure({ adapter: new Adapter() });
+
+let wrapper;
+
+beforeEach(() => {
+  wrapper = shallow(<App />);
 });
+
+describe('<App /> rendering', () => {
+  it('should render <Home />', () => {
+    expect(wrapper.find(Home)).toExist;
+  })
+})

src/components/Accounts/AccountHome.js

@@ -1,20 +1,14 @@
-import React from 'react'
+import React from "react";
+import AccountDashboard from "../UiHelper/@modules/AccountDashboard";
 
 export default function AccountHome() {
-    return (
-        <>
-        <section className="hero is-info is-fullheight">
-                <div className="hero-body">
-                    <div className="container has-text-centered">
-                    <h1 className="title">
-                       Account Module
-                    </h1>
-                    <h2 className="subtitle">
-                        Have fun working today!
-                    </h2>
-                    </div>
-                </div>
-            </section>
-        </>
-    )
+  return (
+    <>
+      <section className="hero is-info is-fullheight">
+        <div className="hero-body">
+          <AccountDashboard />
+        </div>
+      </section>
+    </>
+  );
 }