Dev

package.json

@@ -6,9 +6,14 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
+    "reactstrap": "^8.4.1",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/components/Layout/Header/Header.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+
+
+const P = styled.text`
+  float: right;
+  margin-right: 10px;
+  color: #8CA1BE;
+`;
+const Div = styled.text`
+  font-size: 25px;
+  color: #6C6C6C;
+  margin-right: 10px;
+  float: right;
+`;
+
+class Header extends Component {
+  componentDidMount(){
+    localStorage.setItem('balance',3000);
+  };
+
+  render(){ 
+  return (
+    <header>
+      <P>Balance</P><br/>
+      <Div>${localStorage.getItem('balance')}</Div>
+    </header>
+   )
+  }
+}
+
+
+export default Header;

src/components/Layout/Layout.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Sidebar from "./Sidebar/Sidebar";
+import  Header  from "./Header/Header";
+
+class Layout extends React.Component {
+  render() {
+    return (
+      <div className="Layout">
+        <div className="container-fluid">
+          <div className="row no-gutter">
+            <div className="col-2">
+              <Sidebar />
+            </div>
+            <div className="content col-10 no-gutter ">
+              <Header />
+              <main> {this.props.children}</main>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Layout;

src/components/Layout/Sidebar/Sidebar.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+class Sidebar extends React.Component {
+  render() {
+    return (
+      <aside>
+        <div>Logo</div>
+        <div className="navigation mt-4 ml-4">
+          <Link to="/">Home</Link>
+          <Link to="/charts">Charts</Link>
+          <Link to="/categories">Categories</Link>
+        </div>
+      </aside>
+    );
+  }
+}
+
+export default Sidebar;

src/components/Pages/AddCategory/AddCategory.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { Form, FormGroup, Label, Input } from "reactstrap";
+import { Link } from "react-router-dom";
+
+class AddCategory extends React.Component {
+  render() {
+    return (
+      <div className="container">
+        <Form
+          style={{
+            width: "60%",
+            marginTop: "50px",
+            border: "1px solid lightgrey",
+            padding: "30px",
+            borderRadius: "4px",
+          }}
+        >
+          <FormGroup>
+            <Label for="total">Total</Label>
+            <Input type="text" name="total" id="total" placeholder="total" />
+          </FormGroup>
+
+          <FormGroup>
+            <Label for="description">Description</Label>
+            <Input
+              type="text"
+              name="description"
+              id="description"
+              placeholder="description"
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <Label for="selectIcon">Select icon</Label>
+            <Input type="select" name="selectIcon" id="selectIcon">
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </Input>
+          </FormGroup>
+          <Link to="/categories" className="btn btn-secondary">
+            Add new category
+          </Link>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default AddCategory;

src/components/Pages/Categories/ActionMenu.js

@@ -0,0 +1,20 @@
+import React from "react";
+import {
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from "reactstrap";
+
+export default function ActionMenu() {
+  return (
+    <UncontrolledDropdown>
+      <DropdownToggle style={{ background: "none", color: "grey" }}>
+        Edit
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem>Delete category</DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+}

src/components/Pages/Categories/Categories.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import ActionMenu from "./ActionMenu";
+
+class Categories extends React.Component {
+  state = {
+    categories: [
+      { categoryName: "Food", description: "my food", date: "10.04.20" },
+      { categoryName: "Clothes", description: "", date: "10.04.20" },
+      { categoryName: "Restaurants", description: "", date: "10.04.20" },
+      { categoryName: "Utility bills", description: "", date: "10.04.20" },
+      { categoryName: "Pets", description: "", date: "10.04.20" },
+    ],
+  };
+
+  render() {
+    return (
+      <div className="container">
+        <div className="categories-header d-flex justify-content-between mt-4">
+          <h2>Categories</h2>
+          <Link to="/add_category" className="btn btn-primary">
+            Add category
+          </Link>
+        </div>
+        <div className="table">
+          <div
+            className="row mt-4"
+            style={{
+              borderBottom: "1px solid lightgrey",
+              fontWeight: "bolder",
+            }}
+          >
+            <div className="col-3 text-center">Category</div>
+            <div className="col-3 text-center">Description</div>
+            <div className="col-3 text-center">Date</div>
+            <div className="col-3 text-center">Action</div>
+          </div>
+          {this.state.categories.map((category) => (
+            <div className="row mt-2" key={category.categoryName}>
+              <div className="col-3 text-center">{category.categoryName}</div>
+              <div className="col-3 text-center">{category.description}</div>
+              <div className="col-3 text-center">{category.date}</div>
+              <div className="col-3 text-center">
+                <ActionMenu />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Categories;

src/components/Pages/Charts.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+class Charts extends React.Component {
+  render() {
+    return <div>Charts</div>;
+  }
+}
+
+export default Charts;

src/components/Pages/Home/Charges.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+class Charges extends React.Component {
+  render() {
+    return <div>Charges1</div>;
+  }
+}
+
+export default Charges;