<file_sep>import React, { useState } from "react";
import { Container, Row, Col, Image} from "react-bootstrap";
import "./style.css";
import { Link } from "react-router-dom";
import Axios from "axios";
import { Navigation } from "../Components/Navigation";
import jwt from "jsonwebtoken";

const Content = (props) => {

  const TOKEN_KEY = "Auth";
  let role_id = "";
  let myId = "";
  
  let token = localStorage.getItem(TOKEN_KEY);
  let salt = "<PASSWORD>";
  const headers = {headers: {'auth' : token}}
  
  jwt.verify(token, salt, (err, decode) => {
    if(!err){
      myId = decode.id
    } else {
      console.log(err)
    }
  });

  const [data, SetData] = useState({data: [] });
  const [onRefresh, setOnRefresh] = useState(false);
  const [notRefresh, setNotRefresh] = useState(false);

  React.useEffect(() => {
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/profile/id/${myId}`, headers)
      .then((res) => {
        SetData(res.data.data[0]);
      })
      .catch((err) => console.log(err.message));
  }, [onRefresh]);

  return (
    <>
      <Container className="profile-color">
        <Container className="pt-4">
          <Row className="justify-content-center">
          <ul className="navbar-nav mr-sm-0">
            <li><Image src={require("../Assets/picture.png")} /></li>
            <Link to="#">
            <li  className="text-edit" >Edit</li>
            </Link>
            </ul>
          </Row>

          <Row className="justify-content-center">
              <ul className="navbar-nav mr-sm-0">
          <li>{data.first_name}</li>
          <li className="text-number">{data.phone ? data.phone : "+62"}</li>
              </ul>
          </Row>

        </Container>
        <Container className="margin-menu pb-3">

          <Row className="justify-content-md-center">
            <Col md={6} className="btn-menu mb-4">
              <Link to="/profile/personal">
                <Row>
                  <Col className="text-menu" md={11}>
                    Personal Info
                  </Col>
                  <Image src={require("../Assets/arrow-left.png")} />
                </Row>
              </Link>
            </Col>
          </Row>

          <Row className="justify-content-md-center">
            <Col md={6} className="btn-menu mb-4">
              <Link to="/profile/password">
                <Row>
                  <Col className="text-menu" md={11}>
                    Change Password
                  </Col>
                  <Image src={require("../Assets/arrow-left.png")} />
                </Row>
              </Link>
            </Col>
          </Row>

          <Row className="justify-content-md-center">
            <Col md={6} className="btn-menu mb-4">
              <Link to="/profile/pin">
                <Row>
                  <Col className="text-menu" md={11}>
                    Change Pin
                  </Col>
                  <Image src={require("../Assets/arrow-left.png")} />
                </Row>
              </Link>
            </Col>
          </Row>

          <Row className="justify-content-md-center">
            <Col md={6} className="btn-menu mb-4">
              <Row>
                <Col>Logout</Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </Container>
    </>
  );
};

const Profile = (props) => {
  return (
    <>
      <section class="my-5 container">
        <div class="row">
          <Col lg={3}>
            <Navigation {...props} />
          </Col>
          <Col>
            <Content/>
          </Col>
        </div>
      </section>
    </>
  );
};

export default Profile;
<file_sep>import DashboardSub from "./subDashboard.js"

export default DashboardSub<file_sep>import React, { Component, useState } from "react";
import { Container, Row, Col, Image, Media, Nav } from "react-bootstrap";
import "./dashboardStyle.css";
import Axios from "axios";
import { Navigation } from "../Components/Navigation";
import { Link } from "react-router-dom";
import jwt from "jsonwebtoken";
import Loading from "../Components/Loading";

const Content = () => {
  const TOKEN_KEY = "Auth";
  let role_id = "";
  let myId = "";

  let token = localStorage.getItem(TOKEN_KEY);
  let salt = "<PASSWORD>";

  const headers = { headers: { auth: token } };

  jwt.verify(token, salt, (err, decode) => {
    if (!err) {
      myId = decode.id;
    } else {
      console.log(err);
    }
  });

  const [data, SetData] = React.useState("");
  const [data2, SetData2] = useState({ data: [] });

  React.useEffect(() => {
    Axios.get(
      `${process.env.REACT_APP_URL_BACKEND}/api/v1/profile/id/${myId}`,
      headers
    )
      .then((res) => SetData(res.data.data[0]))
      .catch((err) => console.log(err));
  }, []);

  React.useEffect(() => {
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/transfer`, headers)
      .then((res) => SetData2(res.data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <>
      <Container>
        <Row className="balance-color">
          <Col>
            <Col>
              <Col className="mt-2 mb-2">Balance</Col>
              <div>
                <Col className="text-bal balance-text">
                  {data.balance ? data.balance : "0"}
                </Col>
                <Col className="mt-2 mb-2">
                  {data.phone ? data.balance : "+62"}
                </Col>
              </div>
            </Col>
          </Col>
          <Col md={3} className="mt-5 mb-5">
            <Col>
              <Col className="mb-3 btn-ballance">
                <>
                  <Image src={require("../Assets/transfer-btn.png")} />
                  <span>Transfer</span>
                </>
              </Col>
              <Col className="btn-ballance">
                <>
                  <Image src={require("../Assets/topup-btn.png")} />
                  <span>Topup</span>
                </>
              </Col>
            </Col>
          </Col>
        </Row>

        <Row className="mt-3">
          <Col>
            <div className="dashboard-color">
              <div className="d-flex flex-column">
                <div className="p-2">
                  <div className="container">
                    <div className="row justify-content-around">
                      <Col>
                        <Image src={require("../Assets/arrow-up.png")} />
                        <p>Income</p>
                        <p>Rp.2.120.000</p>
                      </Col>
                      <Col>
                        <Image src={require("../Assets/arrow-down.png")} />
                        <p>Expense</p>
                        <p>Rp.1.560.000</p>
                      </Col>
                    </div>
                  </div>
                </div>
                <div className="p-2 d-flex align-items-end">
                  <canvas id="canvas"></canvas>
                </div>
              </div>
            </div>
          </Col>

          <Col md={6} className="dashboard-color-sub">
            <div className="dashboard-color">
              <div className="d-flex flex-column">
                <div className="p-2">
                  <div className="container">
                    <div className="row">
                      <div className="col-9">Transaction History</div>
                      <div className="col">
                        <Link to="/history">See all</Link>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="p-2">
                  {data2.data.map((item) => (
                    <Container className="mb-3">
                      <Row>
                        <Col>
                          <Nav className="nav-profile form-inline my-3 my-lg-0 pr-5">
                            <Image
                              className="mr-sm-2"
                              src={require("../Assets/picture.png")}
                            />
                            <Media.Body className="ml-2 mr-2">
                              <ul className="navbar-nav mr-sm-0">
                                <li className="text-style">
                                  {item.first_name} {item.last_name}
                                </li>
                                <li>Transfer</li>
                              </ul>
                            </Media.Body>
                          </Nav>
                        </Col>
                        <p className="mr-2">{item.balance}</p>
                      </Row>
                    </Container>
                  ))}
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </Container>
    </>
  );
};

const Profile = (props) => {
  return (
    <>
      <section class="my-5 container">
        <div class="row">
          <Col lg={3}>
            <Navigation {...props} />
          </Col>
          <Col>
            <Content />
          </Col>
        </div>
      </section>
    </>
  );
};

export default Profile;
<file_sep>import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { isLogin } from '../../Utils'
import jwt from "jsonwebtoken"

// const TOKEN_KEY = "Auth";
// let role_id = ""

// let token = localStorage.getItem(TOKEN_KEY)
// let salt = "<PASSWORD>"

// jwt.verify(token, salt, (err, decode) => {
//     if(!err){
//         return role_id = decode.role_id
//     } else {
//         console.log(err)
//     }
// })

const PrivateRoute = ({ component: Component, ...rest })=> {

    return(
        <Route {...rest} 
            render={(props)=> (
                isLogin() ? (<Component {...props} />):(<Redirect to='/login' />)
            )}
        />
    )


}

export default PrivateRoute<file_sep>import React, { setState, useState } from "react";
import { Col, Container, Form, Image, Control, InputGroup, Text, FormControl, Prepend } from "react-bootstrap";
import "./style.css";
import { Link, useLocation } from "react-router-dom";
import Axios from "axios";
import { Navigation } from "../Components/Navigation";
import jwt from "jsonwebtoken";
import Loading from "../Components/Loading";

const Content = () => {


  const TOKEN_KEY = "Auth";
  let token = localStorage.getItem(TOKEN_KEY);
  let myId = "";
  let salt = "<PASSWORD>";

  let name = useLocation().search.slice(6) || null
  // let name2 = useLocation().search.slice(6) || null

  const [data, SetData] = useState("");
  
  jwt.verify(token, salt, (err, decode) => {
    if(!err){
      myId = decode.id
    } else {
      console.log(err)
    }
  });

  const headers = {headers: {'auth' : token}}
  

  React.useEffect(() => {

    if(name){
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/profile/search?name=${name}`, headers)

      .then((res) => SetData(res.data.data))
      .catch((err) => console.log(err));
    } else {
      Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/profile?page=1&limit=4`, headers)

      .then((res) => SetData(res.data.data))
      .catch((err) => console.log(err));
    }

  }, []);

  console.log(data)

    return (
      <>
        <Container className="transfer-color">
          <div className="p-2">Search Receiver</div>

        
          <div className="p-2">
          <Form method="get">
            <Form.Group>
            <InputGroup>
            <InputGroup.Prepend>         
                <InputGroup.Text>
                  <Image src={require("../Assets/search.png")} />
                </InputGroup.Text>
                </InputGroup.Prepend>

              <FormControl className=" search-input" placeholder="Search receiver here" name='name'/>

               </InputGroup>
            </Form.Group>
            </Form>
            </div>

            { !data? (<Loading />) : (data.map(item => ( 

                <div className="p-2">
                  <Link path="/input">
                    <div className="transfer-color-sub nav-profile form-inline my-3 my-lg-0 pl-3 pt-3 pb-3">
                      <Image
                        className="mr-sm-2"
                        src={require("../Assets/picture.png")}
                      />
                      <ul className="navbar-nav mr-sm-0 text-color">
                       <li>{item.first_name} {item.last_name}</li>
                        <li>{item.phone ? (item.phone) : ("+62")}</li>
                      </ul>
                    </div>
                  </Link>
                </div>

            )))}
          
        </Container>
      </>
    );
  
}

const transfer = (props) => {
  return (
    <>
      <section class="my-5 container">
        <div class="row">
          <Col lg={3}>
            <Navigation {...props} />
          </Col>
          <Col>
            <Content />
          </Col>
        </div>
      </section>
    </>
  );
};

export default transfer
<file_sep>import React, { Component } from "react";
import { Container, Row, Col, Nav, Image, Media } from "react-bootstrap";
import "./style.css";
import { Link } from "react-router-dom";
import Axios from "axios";

class dashboardHistory extends Component {
  state = {
    data: [],
  }

  componentDidMount = () => {
    Axios.get("http://localhost:2000/transfer")
    .then((res) => {
      this.setState({ data: res.data.data });
      console.log(res.data)
    })
  }

  render() {
    return (
      <Container className="dashboard-color-history mt-4">
        <Container className="pt-3">
        <Row>
            <Col>Transaction History</Col>
          </Row>

          <Row>
          <Col>This Week</Col>
          </Row>

        </Container>
        {this.state.data.map((data,index) => {
                     return (
        <Container key={data.id} className="pt-3">
          <Row>
            <Col>
              <Nav className="nav-profile form-inline my-3 my-lg-0 pr-5">
                <Image
                  className="mr-sm-2"
                  src={require("../../../Assets/picture.png")}
                />
                <Media.Body className="ml-2 mr-2">
                  <ul className="navbar-nav mr-sm-0">
                     <li className="text-style">{data.first_name}{data.lasst_name}</li>
                    <li>Transfer</li>
                  </ul>
                </Media.Body>
              </Nav>
            </Col>
            <p className="mr-2">{data.amount}</p>
          </Row>
        </Container>
                     )}
        )}

      </Container>
    );
  }
}

export default dashboardHistory;
<file_sep>import ProfileAddPhone from "./phone.js"

export default ProfileAddPhone;<file_sep>import React, { useState } from "react";
import Axios from "axios";
import { useHistory } from "react-router-dom";
import { Container } from "react-bootstrap";
import qs from "qs";
import { Image } from "react-bootstrap";
import "./style.css";

const Register = () => {
  const [firstName, setFirstName] = useState("");
  const [laststName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [pin, setPin] = useState("");
  // const [onRefresh, setOnRefresh] = useState(false);
  // const [notRefresh, setNotRefresh] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();

    const reqBody = {
      first_name: firstName,
      last_name: laststName,
      email: email,
      password: <PASSWORD>,
      pin: pin,
    };

    const type = {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    };

    Axios.post(
      `${process.env.REACT_APP_URL_BACKEND}/api/v1/register`,
      qs.stringify(reqBody),
      type
    )

      .then((res) => {
        alert("data Berhasil di Input");
        window.location.reload(false);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div
            className="bg-1 col-sm-12 col-lg-6 "
            style={{ background: "rgba(99, 121, 244, 1)" }}
          >
            <Container fluid>
              <div className="d-flex flex-column">
                <div className="p-2">
                  <p className="h3 text-logo">Zwallet</p>
                </div>
                <div className="p-2 d-sm-none d-md-block ">
                  <Image
                    src={require("../Assets/phone.png")}
                    className="img-phone"
                  />
                  {/* <Image src={require("../Assets/line.png")} className="img-line"/> */}
                </div>
                <div className="p-2 text-left">
                  <p>App that Covering Banking Needs.</p>
                  <p>
                    Zwallet is an application that focussing in banking needs
                    for all users in the world. Always updated and always
                    following world trends. 5000+ users registered in Zwallet
                    everyday with worldwide users coverage.
                  </p>
                </div>
              </div>
            </Container>
          </div>

          <div className="col">
            <div className="d-flex flex-column">
              <div className="p-2">
                <h4 className="text-description2">
                  {" "}
                  Start Accessing Banking Needs <br /> With All Devices and All
                  Platforms <br /> With 30.000+ Users
                </h4>
              </div>
              <div className="p-2">
                <p className="text-description3">
                  Transfering money is eassier than ever, you can access <br />
                  Zwallet wherever you are. Desktop, laptop, mobile phone?{" "}
                  <br /> we cover all of that for you!
                </p>
              </div>

              <form onSubmit={(e) => onSubmit(e)} encType="multipart/form-data">
                <div className="p-2 d-flex justify-content-center">
                  <div className="d-flex flex-column">
                    {/* First Name:{" "}
                <input
                  type="text"
                  required
                  onChange={(e) => setFirstName(e.target.value)}
                />
                Last Name:{" "}
                <input
                  type="text"
                  required
                  onChange={(e) => setLastName(e.target.value)}
                />
                Email:{" "}
                <input
                  type="text"
                  required
                  onChange={(e) => setEmail(e.target.value)}
                />
                Password:{" "}
                <input
                  type="<PASSWORD>"
                  required
                  onChange={(e) => setPassword(e.target.value)}
                /> */}

                    <div className="p-3">
                      <div className="input-login input-group">
                        <Image
                          src={require("../Assets/mail.png")}
                          className="img-mail"
                        />
                        <label>
                          <input
                            className="form-control border-0"
                            type="text"
                            required
                            onChange={(e) => setFirstName(e.target.value)}
                            placeHolder="Input Name"
                          />
                        </label>
                      </div>
                    </div>

                    <div className="p-3">
                      <div className="input-login input-group">
                        <Image
                          src={require("../Assets/mail.png")}
                          className="img-mail"
                        />
                        <label>
                          <input
                            className="form-control border-0"
                            type="text"
                            required
                            onChange={(e) => setEmail(e.target.value)}
                            placeHolder="Input Email"
                          />
                        </label>
                      </div>
                    </div>

                    <div className="p-3">
                      <div className="input-login input-group">
                        <Image
                          src={require("../Assets/mail.png")}
                          className="img-mail"
                        />
                        <label>
                          <input
                            className="form-control border-0"
                            type="text"
                            required
                            onChange={(e) => setPassword(e.target.value)}
                            placeHolder="Input Password"
                          />
                        </label>
                      </div>
                    </div>

                    <div className="p-3">
                      <div className="input-login input-group">
                        <Image
                          src={require("../Assets/mail.png")}
                          className="img-mail"
                        />
                        <label>
                          <input
                            className="form-control border-0"
                            type="text"
                            required
                            onChange={(e) => setPin(e.target.value)}
                            placeHolder="Input Pin"
                          />
                        </label>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="p-2">
                  <div className="btn-login">
                    <button
                      className="btn btn-lg btn-block btn-login"
                      onClick={(e) => onSubmit(e)}
                    >
                      Register
                    </button>
                  </div>
                </div>
              </form>

              <div className="p-2 d-flex justify-content-center">
                <p className="text-signup">
                  Don’t have an account? <a href=""> Let’s Sign Up</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Register;
<file_sep>import React, { useState } from "react";
import { Container, Row, Image } from "react-bootstrap";
import "./style.css";
import { Link } from "react-router-dom";
import TransferConfirmation from "../Confirmation"
import Axios from 'axios'

const Transfer = (props) => {

  const[aboutId] = useState(props.location.state)
  const [data, SetData] = useState({data: [] });

  React.useEffect(() => {
    Axios.get(`http://localhost:2000/transfer/id/${aboutId}`)
      .then((res) => {
        SetData(res.data);
        console.log(res.data.data)
      })
      .catch((err) => console.log(err.message));
  }, );

  return (
    <>
    {data.data.map(item => ( 
      <Container className="transfer-color-success mt-4">
        <Row className="justify-content-center">
          <Image
            className="img-success mt-1"
            src={require("../../../Assets/transfer-success.png")}
          />
        </Row>
        <div className="d-flex flex-column">
          <div className="p-1">
            <div className="d-flex flex-column mt-3">

              <div className="p-1 transfer-color-sub mb-2">
                <div className="d-flex flex-column">
                  <div className="p-1">Amount</div>
                  <div className="p-1 text-style">{item.amount}</div>
                </div>
              </div>

              <div className="p-1 transfer-color-sub mb-2">
                <div className="d-flex flex-column">
                  <div className="p-1">Balance Left</div>
                  <div className="p-1 text-style">{item.balance}</div>
                </div>
              </div>

              <div className="p-1 transfer-color-sub  mb-2">
                <div className="d-flex flex-column">
                  <div className="p-1">Date & Time</div>
                  <div className="p-1 text-style">{item.date}</div>
                </div>
              </div>

              <div className="p-1 transfer-color-sub ">
                <div className="d-flex flex-column">
                  <div className="p-1">Notes</div>
                  <div className="p-1 text-style">{item.notes}</div>
                </div>
              </div>
            </div>
          </div>

          <div className="p-1">
            <div className="d-flex flex-column">
              <div className="p-2 text-style">Transfer To</div>
              <div className="p-2 transfer-color-sub">
                <div className="p-1 tr-box">
                  <div className="nav-profile form-inline my-3 my-lg-0">
                    <Image
                      className="mr-sm-1"
                      src={require("../../../Assets/picture.png")}
                    />
                    <ul className="navbar-nav mr-sm-0 ml-2">
                      <li className="text-style">{item.first_name} {item.last_name}</li>
                      <li>{item.phone}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="p-1 mt-2">
              <Row className="d-flex justify-content-end align-items-end mb-3 mr-4">
                
                  <button className="btn-share mr-2">
                    <Image src={require("../../../Assets/share.png")} />
                  </button>
                
                  <button className="btn-download-success mr-2">
                    <Image src={require("../../../Assets/download.png")} />
                    <span className="text-download">Download PDF</span>
                  </button>
                
                  <a href="dashboard.html">
                    <button className="btn-continue-success text-back-success">Back To Home</button>
                  </a>                
              </Row>            
          </div>

        </div>
      </Container>
      ))}
    </>
  );
};

export default Transfer;
<file_sep>import TransferInput from "./transferInput.js"

export default TransferInput<file_sep>import React, { Component } from "react";
import { Navbar, Nav, Image, Media } from "react-bootstrap";
import Axios from "axios";
import "./headerStyle.css";
import { withRouter } from "react-router";
import jwt from "jsonwebtoken";

const HeaderNav = (props) => {

    const TOKEN_KEY = "Auth";
    let role_id = "";
    let myId = "";
    
    let token = localStorage.getItem(TOKEN_KEY);
    let salt = "<PASSWORD>";
    
    const headers = {headers: {'auth' : token}}
    
    jwt.verify(token, salt, (err, decode) => {
      if(!err){
        myId = decode.id
      } else {
        console.log(err)
      }
    });

    const [data, SetData] =   React.useState("");

    React.useEffect(() => {
      Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/profile/id/${myId}`, headers)
        .then((res) => SetData(res.data.data[0]))
        .catch((err) => console.log(err));
    }, []);

    if(props.location.pathname === "/login" || props.location.pathname === "/register" 
    || props.location.pathname === "/landing" || props.location.pathname === "/login/forgot"){
    return false
    } else {

  return (
    <>
      <Navbar className="headerStyle">
        <Navbar.Brand className="pl-5 ">
          <div className="text-logo">Zwallet</div>
        </Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Navbar.Text className="borderless">
            <Nav className="nav-profile form-inline my-3 my-lg-0 pr-5">
              <Image src={require("../../Assets/picture.png")} />
                  <Media.Body className="ml-2 mr-2">
                    <p>
                      {data.first_name} {data.last_name}
                    </p>
                    <p>{data.phone? (data.phone) : ("+62")}</p>
                  </Media.Body>
              <Image
                className="mb-3 pl-4"
                src={require("../../Assets/bell.png")}
              />
            </Nav>
          </Navbar.Text>
        </Navbar.Collapse>
      </Navbar>
    </>
  )
  }
};

export default withRouter(HeaderNav);
<file_sep>import React, { useState } from "react";
import Axios from "axios";
import { Container, Row, Image } from "react-bootstrap";
import  "./style.css";
import { Link } from "react-router-dom";
import transfer from "../../transfer.js"
import qs from 'qs'

const TransferInput = (props) => {

  const[aboutId] = useState(props.location.state)
  const [data, SetData] = useState({data: [] });
  const [data2, SetData2] = useState({data: [] });
  const [data3, SetData3] = useState({data: [] });
  const [date, SetDate] = useState();
  const [notes, setNotes] = useState("")
  const [amount, setAmount] = useState("")

  React.useEffect(() => {
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}profile/${aboutId}`)
      .then((res) => {
        SetData(res.data);
      })
      .catch((err) => console.log(err.message));
  }, []);

  React.useEffect(() => {
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}profile/1`)
      .then((res) => {
        SetData2(res.data);
      })
      .catch((err) => console.log(err.message));
  }, []);

  const onSubmit = () => {

    Axios({
    method: 'post', 
    url: `${process.env.REACT_APP_URL_BACKEND}transfer`,
    data: qs.stringify({
      id_sender: 1,
      id_receiver: aboutId,
      amount: amount,
      notes: notes,
      date: date,
    }) .then((res) => {
      SetData3(res.data);
    }),
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  })
    .then((res) => {
      alert('Success')
    })
    .catch((err) => console.log(err.message));
  
  }

  console.log(SetData3)

  return (
    
    <>
      <Container className="transfer-color mt-4"> 
        <div className="d-flex flex-column">
          <div className="p-1"> Transfer Money </div>
          <div className="p-1 mb-4">
            <div className="transfer-color-sub p-1 tr-box">
            {data.data.map(item => ( 
              <div className="nav-profile form-inline my-3 my-lg-0 pt-2 pb-2 pl-2">
                <Image
                  className="mr-sm-1"
                  src={require("../../../Assets/picture.png")}
                />
                <ul className="navbar-nav mr-sm-0 text-history ml-3">
                  <li>{item.first_name} {item.last_name}</li>
                  <li>{item.phone}</li>
                </ul>
              </div>
))}
            </div>

            <div className="p-1 mt-4">
              Type the amount you want to transfer and then <br /> press
              continue to the next steps.
            </div>

            <div className="p-1">
              <div className="d-flex justify-content-center">
                <div className="p-1">
                  <input onChange={(e) => setAmount(e.target.value)} 
                    type="text"
                    placeholder="0.00"
                    className="input-money"
                  />
                  {data2.data.map(item => ( 

                  <div className="p-1 text-avail">{item.balance} Available</div>

                  ))}
                  <div>
                    <Image src={require("../../../Assets/pen.png")} />
                    <input onChange={(e) => setNotes(e.target.value)} 
                      className="text text-tr-hs input-notes"
                      placeholder="Add some notes"
                    />
                    <section>
                      <hr size="30px" />
                    </section>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {data2.data.map(item => ( 
        <Container className="d-flex justify-content-end">
          <Link to = {{pathname: "/confirmation", state: item.id}} onClick={() => onSubmit()}>
              <button className="btn-continue-input text-btn-input mr-3">
                Continue
              </button>

          </Link>
        </Container>
        ))}
        </div>
      </Container>
    </>
  )
};

export default TransferInput;
<file_sep>import React, { useState } from "react";
import { Container, Row, Col, Image } from "react-bootstrap";
import "./style.css";
import { Route, Redirect, Link } from 'react-router-dom'
import Axios from "axios";
import qs from 'qs'
import { createPortal } from "react-dom";

const LoginPage = (props) => {

    const TOKEN_KEY = "Auth";
    // let url = qs.parse(window.location.search.replace("?" , ""))
    // let em = (url).email
    // let pw = (url).password

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    // const loading = false
    
  const Login = (e) => {
    
  // if(localStorage.getItem(TOKEN_KEY)) {
  //   window.location.reload(false)
  //   e.preventDefault()
  // }


    // setTimeout(function(){window.location = $this.attr('href'); }, 4000);

    Axios({
      method: "post",
      url: `${process.env.REACT_APP_URL_BACKEND}/api/v1/login`,
      data: qs.stringify({
        email: email,
        password: <PASSWORD>
      }),
      headers: {
        "content-type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    })
      .then((res) => (
      localStorage.setItem(TOKEN_KEY, res.data.token)),
      e.preventDefault(),
      )
      .catch((err) => console.log(err.message))

      function load (){
        localStorage.getItem(TOKEN_KEY) ? window.location.reload(false) : alert('Email / Passeord Invalid')
      }

      window.setTimeout(load ,2000)
      
  }

  return (
    <>
      <div className="container-fluid">

        <div className="row">
        
       
          <div className="bg-1 col-sm-12 col-lg-6 " style={{background: "rgba(99, 121, 244, 1)"}}>
          <Container fluid > 
            <div className="d-flex flex-column">
              <div className="p-2">
                <p className="h3 text-logo">
                  Zwallet
                </p>
              </div>
              <div className="p-2 d-sm-none d-md-block ">
                <Image src={require("../Assets/phone.png")} className="img-phone"/>
                {/* <Image src={require("../Assets/line.png")} className="img-line"/> */}
              </div>
              <div className="p-2 text-left">
                <p>App that Covering Banking Needs.</p>
                <p>
                  Zwallet is an application that focussing in banking needs for
                  all users in the world. Always updated and always following
                  world trends. 5000+ users registered in Zwallet everyday with
                  worldwide users coverage.
                </p>
              </div>
            </div>
            </Container>
          </div>
          

          <div className="col">
            <div className="d-flex flex-column">
              <div className="p-2">
                <h4 className="text-description2">
                  {" "}
                  Start Accessing Banking Needs <br /> With All Devices and All
                  Platforms <br /> With 30.000+ Users
                </h4>
              </div>
              <div className="p-2">
                <p className="text-description3">
                  Transfering money is eassier than ever, you can access <br />
                  Zwallet wherever you are. Desktop, laptop, mobile phone?{" "}
                  <br /> we cover all of that for you!
                </p>
              </div>

              <form className="margin" onSubmit={(e) => Login(e)} encType="multipart/form-data">

                <div className="p-2 d-flex justify-content-center">
                  <div className="d-flex flex-column">

                    <div className="p-3">
                      <div className="input-login input-group">
                        <Image src={require("../Assets/mail.png")} className="img-mail"/>
                        <label>
                          <input type="text" className="form-control border-0 InputEmail1"
										placeholder="Enter your email" onChange={(e) => setEmail(e.target.value)}/>
                        </label>
                      </div>
                    </div>

                    <div className="p-3">

                      <div className="input-login input-group">
                        <Image src={require("../Assets/lock.png")} className="img-mail" />
                        <label>
                          <input placeholder="Enter your password" type="text" className="form-control border-0" onChange={(e) => setPassword(e.target.value)} />
                        </label>
                        <section>
                          <Image src={require("../Assets/eye.png")} />
                        </section>
                      </div>

                      <a href="/login/forgot">
                      <div className="d-flex justify-content-end">
                        Forgot Password?
                      </div>
                      </a>

                    </div>
                  </div>
                </div>

              <div className="p-2">
                <div className="btn-login"> 
                  <button type="submit" className="btn btn-lg btn-block btn-login">Login</button>
                  </div>
              </div>

              </form>

              <div className="p-2 d-flex justify-content-center">
                <p className="text-signup">
                  Don’t have an account? <a href="/register"> Let’s Sign Up</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );

};

export default LoginPage;
<file_sep>import Transfer from "./transfer.js"

export default Transfer<file_sep>import Navigation from "./navigation.js"

export{
    Navigation
}<file_sep>import Pin from "./pin.js"

export default Pin;<file_sep>import React from "react";
import { Card } from "react-bootstrap";
import "./footerStyle.css";
import { withRouter } from "react-router";

const footer = (props) => {
  if(props.location.pathname === "/login" || props.location.pathname === "/register" 
  || props.location.pathname === "/landing" || props.location.pathname === "/login/forgot"){
    return false
  } else {

  return (
    <Card.Body className="footer-color">
      <div className="row ml-5">
        <div className="col-lg-5 col-sm-6 text">
          {" "}
          2020 Zwallet. All right reserved.
        </div>
        <div className="col-lg-4 col-sm-3 text">+62 5637 8882 9901</div>
        <div className="col-lg-3 col-sm-3 text"><EMAIL></div>
      </div>
    </Card.Body>
  );
  }
}

export default withRouter (footer);
<file_sep>import TransferSuccess from "./transferSuccess.js"


export default TransferSuccess;<file_sep>import { Container, Row, Col} from "react-bootstrap";
import "./style.css";
import { Link } from "react-router-dom";
import React, { useState } from "react";
import Axios from "axios";
import { Navigation } from "../../../Components/Navigation";
import jwt from "jsonwebtoken";

const Content = (props) => {

const TOKEN_KEY = "Auth";
let token = localStorage.getItem(TOKEN_KEY);
let salt = "<PASSWORD>";
const headers = {headers: {'auth' : token}}
let myId = "";

const [data, SetData] = useState({data: [] });

  jwt.verify(token, salt, (err, decode) => {
    if(!err){
      myId = decode.id
    } else {
      console.log(err)
    }
  });

  React.useEffect(() => {
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/profile/id/${myId}`, headers)
      .then((res) => {
        SetData(res.data);
        console.log(res.data.data)
      })
      .catch((err) => console.log(err.message));
  });

  return (
    <>
    {data.data.map(item => ( 

   
      <Container className="transfer-color-confirmation mt-4">
        <div className="d-flex flex-column pb-5">
          <div className="p-1 mb-3">
            <div className="d-flex flex-column">
              <div className="p-2 text-style mb-3">Personal Information</div>
              <p className="ml-1">
                We got your personal information from the sign up <br />{" "}
                proccess. If you want to make changes on <br /> your
                information, contact our support.
              </p>
            </div>
          </div>

          <div className="p-1">
            <div className="d-flex flex-column">
              <div className="p-1 text-style"></div>

              <div className="p-1 transfer-color-sub mb-3">
                <div className="d-flex flex-column">
                  <div className="p-1">First Name</div>
                  <div className="p-1 text-style">{item.first_name}</div>
                </div>
              </div>

              <div className="p-1 transfer-color-sub  mb-3">
                <div className="d-flex flex-column">
                  <div className="p-1">Last Name</div>
                  <div className="p-1 text-style">{item.last_name}</div>
                </div>
              </div>

              <div className="p-1 transfer-color-sub  mb-3">
                <div className="d-flex flex-column">
                  <div className="p-1">Verifed E-mail</div>
                  <div className="p-1 text-style">{item.email}</div>
                </div>
              </div>

              <div className="p-1 transfer-color-sub ">
                  <Row>
                    <Col md={10}>
                      <div className="d-flex flex-column">
                        <div className="p-1">Phone Number</div>
                        <div className="p-1 text-style">
                        {item.phone}
                        </div>
                      </div>
                    </Col>
                    <Link to="/phone">
                    <Col>Manage</Col>
                    </Link>
                  </Row>
              </div>

            </div>
          </div>
        </div>
      </Container>
       ))}
    </>
  );
};

const ProfilePersonal = (props) => {
  return (
    <>
      <section class="my-5 container">
        <div class="row">
          <Col lg={3}>
            <Navigation {...props} />
          </Col>
          <Col>
            <Content/>
          </Col>
        </div>
      </section>
    </>
  );
};

export default ProfilePersonal;
<file_sep>import Login from './Login'
import Forgot from './Login/Page/Forgot'
import Dashboard from './Dashboard'
import DashboardHistory from './Dashboard/Page/History'
import Transfer from './Transfer'
import TransferInput from './Transfer/Page/Input'
import TransferConfirmation from './Transfer/Page/Confirmation'
import TransferSuccess from './Transfer/Page/Success'
import Topup from './Topup'
import Profile from './Profile'
import ProfilePersonal from './Profile/Page/Personal'
import ProfilePassword from './Profile/Page/Password'
import ProfileAddPhone from './Profile/Page/Phone'
import Pin from './Profile/Page/Pin'
import Admin from './Admin'
import Register from './Register'
import Landing from './Landing'





export {
    Dashboard,
    Transfer,
    Topup,
    Profile,
    TransferInput,
    TransferConfirmation,
    TransferSuccess,
    ProfilePersonal,
    ProfilePassword,
    ProfileAddPhone,
    Pin,
    DashboardHistory,
    Login,
    Admin,
    Register,
    Landing,
    Forgot
}<file_sep>import React, { Component, useState } from "react";
import { Container, Row, Col } from "react-bootstrap";
import "./style.css";
import Axios from "axios";
import { Navigation } from "../Components/Navigation";
import jwt from "jsonwebtoken";

const Content = (props) => {

const TOKEN_KEY = "Auth";
let role_id = "";
let myId = "";

let token = localStorage.getItem(TOKEN_KEY);
let salt = "<PASSWORD>";

const headers = {headers: {'auth' : token}}

jwt.verify(token, salt, (err, decode) => {
  if(!err){
    myId = decode.id
  } else {
    console.log(err)
  }
});

  const [data, SetData] =   useState({data: [] });

    React.useEffect(() => {
      Axios.get(`${process.env.REACT_APP_URL_BACKEND}/api/v1/topup`, headers)
        .then((res) => SetData(res.data))
        .catch((err) => console.log(err));
    }, []);

  return (
    <>
      <Container className="topup-color">
        <p className="ml-3 pt-4">How To Top Up</p>
        {data.data.map(item => (
        <Col className="pb-1">
          <Col className="topup-color-sub-topup mb-2">
            <Row className="align-items-center">
            <Col md={1}>{item.number}</Col>
            <Col>{item.step}</Col>
            </Row>
          </Col>
        </Col>
        ))}
      </Container>
    </>
  );
};

const topup = (props) => {
  return (
    <>
      <section class="my-5 container">
        <div class="row">
          <Col lg={3}>
            <Navigation {...props} />
          </Col>
          <Col>
            <Content />
          </Col>
        </div>
      </section>
    </>
  );
};

export default topup;
<file_sep>import React, { Component } from "react";
import {
  Container,
  Row,
  Image,
  Button,
  Modal,
  Col,
  ModalDialog,
} from "react-bootstrap";
import "./style.css";
import { Link } from "react-router-dom";
import Axios from "axios";
import TransferInput from "../Input/transferInput.js";

class TransferConfirmation extends React.Component {
  constructor(props) {
    super(props);
    this.aboutId = this.props.location.state;
  }

  componentDidMount() {
    Axios.get(`${process.env.REACT_APP_URL_BACKEND}transfer/id/${this.aboutId}`)
    .then((res) => {
        this.setState({ data: res.data.data });
      }
    );

    Axios.get(`${process.env.REACT_APP_URL_BACKEND}profile/1`)
    .then((res) => {
      this.setState({ data2: res.data.data });
    });
  }

  state = {
    data: [],
    data2: [],
  };

  render() {
    const closeModal = () => {
      this.setState({ show: false });
    };

    console.log(this.aboutId)
    
    return (
      <>
        
            <Container className="transfer-color-confirmation mt-4">
              <div className="d-flex flex-column">
              {this.state.data.map((item, index) => {
                return ( 
                <div className="p-1">
                  <div className="d-flex flex-column">
                    <div className="p-2 text-style">Transfer To</div>
                    <div className="p-2 transfer-color-sub">
                      <div className="p-1 tr-box">
                        <div className="nav-profile form-inline my-3 my-lg-0">
                          <Image
                            className="mr-sm-1"
                            src={require("../../../Assets/picture.png")}
                          />
                          <ul className="navbar-nav mr-sm-0 ml-2">
                            <li className="text-style">{item.first_name}</li>
                            <li>{item.phone}</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )})}
                <div className="p-1">
                  <div className="d-flex flex-column">
                    <div className="p-1 text-style">Details</div>

              {this.state.data.map((item, index) => {
                return ( 

                    <div className="p-1 transfer-color-sub mb-3">
                      <div className="d-flex flex-column">
                        <div className="p-1">Amount</div>
                        <div className="p-1 text-style">{item.amount}</div>
                      </div>
                    </div>

                )})}
                {this.state.data2.map((item, index) => {
                return ( 
                    <div className="p-1 transfer-color-sub  mb-3">
                      <div className="d-flex flex-column">
                        <div className="p-1">Balance Left</div>
                        <div className="p-1 text-style">{item.balance}</div>
                      </div>
                    </div>
                )})}

{this.state.data.map((item, index) => {
                return ( 
                <div>
                    <div className="p-1 transfer-color-sub  mb-3">
                      <div className="d-flex flex-column">
                        <div className="p-1">Date & Time</div>
                        <div className="p-1 text-style">{item.date}</div>
                      </div>
                    </div>
                    <div className="p-1 transfer-color-sub ">
                      <div className="d-flex flex-column">
                        <div className="p-1">Notes</div>
                        <div className="p-1 text-style">{item.notes}</div>
                      </div>
                    </div>
                  </div>
)})}
                </div>
                  <Container className="d-flex justify-content-end">
                    <Row>
                      <Button onClick={() => this.setState({ show: true })}>
                        Continue
                      </Button>
                    </Row>
                  </Container>
                </div>
              </div>
            </Container>
          
        <Modal show={this.state.show} onHide={() => closeModal()}>
          <Modal.Header closeButton>
            <Modal.Title>Enter PIN to Transfer</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>
              Enter your 6 digits PIN for confirmation to <br /> continue
              transferring money.{" "}
            </p>
            <Container>
              <Row className="justify-content-center">
                <Col>
                  <input
                    className="form-control input-modal"
                    type="text"
                    placeholder="_"
                  />
                </Col>

                <Col>
                  <input
                    className="form-control input-modal"
                    type="text"
                    placeholder="_"
                  />
                </Col>

                <Col>
                  <input
                    className="form-control input-modal"
                    type="text"
                    placeholder="_"
                  />
                </Col>

                <Col>
                  <input
                    className="form-control input-modal"
                    type="text"
                    placeholder="_"
                  />
                </Col>

                <Col>
                  <input
                    className="form-control input-modal"
                    type="text"
                    placeholder="_"
                  />
                </Col>
              </Row>
            </Container>
          </Modal.Body>
          <Modal.Footer>
            {this.state.data.map((item, index) => {
              return (
                <Link to={{ pathname: "/success", state: item.id }}>
                  <Button variant="primary" onClick={() => closeModal()}>
                    Save Changes
                  </Button>
                </Link>
              );
            })}
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

export default TransferConfirmation;
<file_sep>import React, { useState } from "react";
import { Container, Row, Col, Image } from "react-bootstrap";
import "./style.css";
import Axios from "axios";
import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
import qs from 'qs'
import { Navigation } from "../../../Components/Navigation";
import jwt from "jsonwebtoken";


const Content = () => {

  const TOKEN_KEY = "Auth";
  let role_id = "";
  let myId = "";
  
  let token = localStorage.getItem(TOKEN_KEY);
  let salt = "<PASSWORD>";
  
  jwt.verify(token, salt, (err, decode) => {
    if(!err){
      myId = decode.id
    } else {
      console.log(err)
    }
  });

const [password, setPassword] = useState("")

  const onSubmit = () => {

    Axios({
    method: 'patch', 
    url: `${process.env.REACT_APP_URL_BACKEND}/api/v1/profile/id/${myId}`,
    data: qs.stringify({
      password: <PASSWORD>
    }),
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      'auth' : token
    }
  })
    .then((res) => {

      alert('data Berhasil di ubah')
    })
    .catch((err) => console.log(err.message));
  
  }
  return (
    <>
      <Container className="transfer-color-confirmation mt-4">
        <div className="d-flex flex-column pb-5">
          <div className="p-1 mb-3">
            <div className="d-flex flex-column">
              <div className="p-2 text-style mb-3">Change Password</div>
              <p className="ml-1">
                You must enter your current password and then <br /> type your
                new password twice.
              </p>
            </div>
          </div>

          <div className="p-1">
            <div className="d-flex flex-column">
              <div className="p-1">
                <Container className="margin-menu pb-3">

                <Row className="d-flex justify-content-center mb-5">
                    <div className="d-flex justify-content-center">
                      <Image src={require("../../../Assets/lock.png")}/>
                      <input className="form border-0 input-pw ml-2"placeholder="Current password"/>
                      <section>
                      <Image src={require("../../../Assets/eye.png")}/>
                      </section>
                    </div>
                  </Row>

                  <Row className="d-flex justify-content-center mb-5">
                    <div className="d-flex justify-content-center">
                      <Image src={require("../../../Assets/lock.png")}/>
                      <input onChange={(e) => setPassword(e.target.value)} className="form border-0 input-pw ml-2"placeholder="New password"/>
                      <section>
                      <Image src={require("../../../Assets/eye.png")}/>
                      </section>
                    </div>
                  </Row>

                  <Row className="d-flex justify-content-center mb-5">
                    <div className="d-flex justify-content-center">
                      <Image src={require("../../../Assets/lock.png")}/>
                      <input className="form border-0 input-pw ml-2"placeholder="Repeat your password"/>
                      <section>
                      <Image src={require("../../../Assets/eye.png")}/>
                      </section>
                    </div>
                  </Row>
                  <Link>
                  <Row onClick={() => onSubmit()} className="justify-content-md-center mt-5">
                    <Col md={6} className="btn-menu-password">
                      <p className="mt-2 text-style">Change Password</p>
                    </Col>
                  </Row>
                  </Link>
                </Container>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </>   
  );
  
};

const ProfilePassword = (props) => {
  return (
    <>
      <section class="my-5 container">
        <div class="row">
          <Col lg={3}>
            <Navigation {...props} />
          </Col>
          <Col>
            <Content/>
          </Col>
        </div>
      </section>
    </>
  );
};

export default ProfilePassword;
