Documentation

MOPHY - React Redux Payment Admin Dashboard

MOPHY is a popular open source WebApp template for admin dashboards and admin panels. It’s responsive HTML template, which is based on the Bootstrap framework. It utilizes all of the Bootstrap components in design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.

• Skype: rahulxarma
• Gmail: dexignzone@gmail.com

Installing

Make sure if NODEJS is installed on your computer

Install npm :-
Run npm install command from your project directory. It will create 'node_module' folder in this all dependency files will be install with this command.

Run Project :-
Run npm start command from your project directory. With is command file will be compiled and it will be loaded on local server `http://localhost:5000`.

Production Build :-
Run npm run build Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Further help :-
To get more help on the React.js checkout React

Note: You can learn more in the Create React App Documentation. To learn React, check out the React Documentation.

<!-- START CONTENT -->
import React from 'react';
import Index from './jsx';
  function App() {
  render() {
    <div className="App">
	 <Index />
    </div>
}

export default App;
<!-- END CONTENT -->

1. Create page component src\jsx\pages\MyPage.js

import React from "react";

export function MyPage() {
  return(
   <h1>Hello!</h1>
  ) 
} 							
						

ThemeContext.js

import React, { createContext, useEffect, useState } from "react";
const ThemeContextProvider = (props) => {
    const [direction, setDirection] = useState({ value: "ltr", label: "LTR" });
    const directionPosition = [
        { value: "ltr", label: "LTR" },
        { value: "rtl", label: "RTL" },
    ];
    useEffect(() => {
        body.setAttribute("data-typography", "poppins");
        body.setAttribute("data-theme-version", "light");
        body.setAttribute("data-layout", "vertical");
        body.setAttribute("data-primary", "color_1");
        body.setAttribute("data-nav-headerbg", "color_1");
        body.setAttribute("data-headerbg", "color_1");
        body.setAttribute("data-sidebar-style", "overlay");
        body.setAttribute("data-sibebarbg", "color_1");
        body.setAttribute("data-primary", "color_1");
        body.setAttribute("data-sidebar-position", "fixed");
        body.setAttribute("data-header-position", "fixed");
        body.setAttribute("data-container", "wide");
        body.setAttribute("direction", "ltr");  // ltr, rtl

        resizeWindow();
        window.addEventListener("resize", resizeWindow);
        return () => window.removeEventListener("resize", resizeWindow);
      }, []);
      return (
        <ThemeContext.Provider
          value={{
            body,
          }}
    >
      {props.children}
    </ThemeContext.Provider>
  );
};

export default ThemeContextProvider;
                        

Redux Core :-
Run npm install redux command from your teminal to install Redux.

You can learn more in the Create a React Redux App Create a React Redux App.

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import showResults from './ShowResults';
import MaterialUiForm from './MaterialUiForm';
const ReduxForm = props => {
 return (
    <>	
        <div className="row justify-content-center">
            <div className="col-md-6">
                <MuiThemeProvider muiTheme={getMuiTheme()}>
                    <div className="card">
                        <div className="card-header">
                            <h4 className="card-title">Form</h4>
                        </div>
                        <div className="card-body">
                            <MaterialUiForm onSubmit={showResults} /> 
                        </div>
                    </div>
                </MuiThemeProvider>	
            </div>
             <div className="col-md-4" >
                <div className="card">
                    <div className="card-header">
                        <h4 className="card-title">Result</h4>
                    </div>
                    <div className="card-body">
                        <pre id="ReduxFormJSON">
                        </pre>
                    </div>
                </div>
            </div> 
        </div>		
    </>
 )
}
export default ReduxForm;
                                

{
  "firstName": "First Name",
  "lastName": "Last Name",
  "email": "example@gmail.com",
  "sex": "male",
  "favoriteColor": "00ff00",
  "employed": true,
  "notes": "this is validate redux form "
}
                                

For more information of redux form Click here

Redux Wizard Form

Code :-

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import WizardForm from "./WizardForm";

ReactDOM.render(
  <Provider store={store}>
    <div style={{ padding: 15 }}>
      <h2>Wizard Example</h2>
      <WizardForm onSubmit={showResults} />
      <Values form="wizard" />
    </div>
  </Provider>,
  document.getElementById("root");
);
                                

{
  "email": "Ram@gmail.com",
  "sex": "male",
  "favoriteColor": "Red",
  "employed": true,
  "notes": "this is a redux form wizard.."
}
                                

For more information of wizard form Click here

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

REGULAR SUPPORT : You have in template support if you face any issue with the usage of it then you can contact us on below Email ID.

EXTENDED SUPPORT : Development it is chargeable according to your requirement. For that you need to mail us your requirement on below Email ID.

COST OF SERVICE : Depends on the hours required. But as you are already using our template we have discounted rates for our template customer.

EXTENDED LICENSE : With the Extended Support we also include Extended License. So you save much more with your investment than you will with purchasing Regular License and later buying Extended one + Development cost.

You will get a quick reply from our team and feel free to contact us. We don’t charge for requirement discussion so don’t worry.

Contact Us : rahulxarma@gmail.com

Skype : rahulxarma