├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── common ├── banner │ ├── banner.js │ └── icons.js └── components │ ├── textField │ ├── TextField.js │ └── index.js │ └── textFormGroup │ ├── TextFormGroup.js │ └── index.js ├── components ├── Anchortag.js ├── Button.js ├── PageHeader.js ├── admin │ ├── ProfilePage.js │ ├── settings │ │ ├── PasswordResetForm.js │ │ ├── RoleForm.js │ │ ├── RoleList.js │ │ ├── UserForm.js │ │ ├── UserList.js │ │ └── UserView.js │ └── shop │ │ ├── ShopForm.js │ │ ├── ShopList.js │ │ └── ShopView.js ├── alerts │ └── Primary.js ├── auth │ ├── LoginForm.js │ ├── PasswordResetForm.js │ ├── PasswordResetVerifyForm.js │ └── RegistrationForm.js ├── customer │ ├── EmployeeForm.js │ ├── EmployeeList.js │ ├── EmployeeView.js │ ├── InvoiceForm.js │ ├── InvoiceList.js │ ├── PeoductCategoryList.js │ ├── ProductCategoryForm.js │ ├── ProductCategoryView.js │ ├── ProductForm.js │ ├── ProductList.js │ ├── ProductView.js │ ├── ShopEdit.js │ └── ShopView.js ├── input │ ├── InputFormGroup.js │ ├── InputPassword.js │ ├── InputPasswordGroup.js │ ├── InputText.js │ ├── SelectFormGroup.js │ ├── SelectInput.js │ ├── TextArea.js │ └── TextAreaFormGroup.js ├── navigation │ ├── HeaderNavbar.js │ └── NavListTag.js ├── profile │ ├── PasswordReset.js │ └── Profile.js └── table │ ├── SearchDataTable.js │ ├── SearchTableActionTd.js │ ├── SearchTableHead.js │ ├── Table.js │ ├── TableHead.js │ ├── TdTag.js │ └── ThTag.js ├── index.css ├── index.js ├── logo.svg ├── pages ├── AuthPage.js ├── HomePage.js ├── NotFound.js ├── admin │ ├── RootPage.js │ ├── settings │ │ └── SettingsPage.js │ └── shop │ │ └── AdminShopPage.js └── customer │ ├── Dashboard.js │ ├── RootPage.js │ ├── profile │ └── ProfileBasePage.js │ └── shop │ └── CustomerShopePage.js ├── reportWebVitals.js ├── setupTests.js └── style ├── admin.css └── auth.css /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | 4 | ## Available URLs 5 | * For admin: `http://localhost:3000/admin/` 6 | * For customer: `http://localhost:3000` 7 | * Login: `http://localhost:3000/login` 8 | * Register: `http://localhost:3000/registration` 9 | 10 | ## Available Scripts 11 | 12 | In the project directory, you can run: 13 | 14 | ### `npm start` 15 | 16 | Runs the app in the development mode.\ 17 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 18 | 19 | The page will reload if you make edits.\ 20 | You will also see any lint errors in the console. 21 | 22 | ### `npm test` 23 | 24 | Launches the test runner in the interactive watch mode.\ 25 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 26 | 27 | ### `npm run build` 28 | 29 | Builds the app for production to the `build` folder.\ 30 | It correctly bundles React in production mode and optimizes the build for the best performance. 31 | 32 | The build is minified and the filenames include the hashes.\ 33 | Your app is ready to be deployed! 34 | 35 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "inventory-react-ui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.6.2", 7 | "@testing-library/jest-dom": "^5.14.1", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "bootstrap": "^4.2.0", 11 | "prop-types": "^15.7.2", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-redux": "^7.2.6", 15 | "react-router-dom": "^5.3.0", 16 | "react-scripts": "^1.1.5", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhapartex/inventory-react-ui/3cffa32dddb045b1207174faeb127ed4e9d225b1/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Inventory System 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhapartex/inventory-react-ui/3cffa32dddb045b1207174faeb127ed4e9d225b1/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhapartex/inventory-react-ui/3cffa32dddb045b1207174faeb127ed4e9d225b1/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/farhapartex/inventory-react-ui/3cffa32dddb045b1207174faeb127ed4e9d225b1/src/App.css -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import React, {useState} from "react"; 3 | import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom" 4 | import HomePage from "./pages/HomePage"; 5 | import NotFoundPage from "./pages/NotFound"; 6 | import AuthPage from "./pages/AuthPage"; 7 | import RootPage from "./pages/admin/RootPage"; 8 | import CustomerRootPage from "./pages/customer/RootPage"; 9 | 10 | 11 | function App() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {/* Admin Routers */} 25 | 26 | 27 | 28 | 29 |
30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/common/banner/banner.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import PropTypes from "prop-types"; 3 | import { ErrorSvg, WarringSvg, InfoSvg, SuccessSvg, ExitSvg } from "./icons"; 4 | 5 | class Banner extends Component{ 6 | static propTypes = { 7 | type: PropTypes.oneOf(["error", "warning", "info", "success"]).isRequired, 8 | onClose: PropTypes.func, 9 | icon: PropTypes.node, 10 | message: PropTypes.string 11 | }; 12 | 13 | static defaultProps = { 14 | onClose: () => {}, 15 | icon: null, 16 | message: "" 17 | }; 18 | 19 | types = { 20 | "error": {icon: , exitButton: , className: "alert alert-danger"}, 21 | "warning": {icon: , exitButton: , className: "alert alert-warning"}, 22 | "info": {icon: , exitButton: , className: "alert alert-info"}, 23 | "success": {icon: , exitButton: , className: "alert alert-success"}, 24 | } 25 | 26 | 27 | 28 | render(){ 29 | const { type, onClose, icon, message } = this.props; 30 | const banner = this.types[type]; 31 | 32 | return ( 33 |
34 | {message} 35 | 38 |
39 | ) 40 | } 41 | } 42 | 43 | export default Banner; -------------------------------------------------------------------------------- /src/common/banner/icons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export const ErrorSvg = () => { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | }; 11 | 12 | export const WarringSvg = ({ display = 'block', width = 22, height = 23 }) => { 13 | return ( 14 | 15 | 16 | 17 | ) 18 | }; 19 | 20 | export const InfoSvg = () => { 21 | return ( 22 | 23 | 24 | 25 | ) 26 | } 27 | 28 | export const SuccessSvg = () => { 29 | return ( 30 | 31 | 32 | 33 | ) 34 | } 35 | 36 | export const ExitSvg = (props) => { 37 | const { color } = props; 38 | return ( 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | ExitSvg.propTypes = { 46 | color: PropTypes.string.isRequired 47 | } 48 | 49 | 50 | export default ErrorSvg 51 | -------------------------------------------------------------------------------- /src/common/components/textField/TextField.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | 5 | class TextField extends Component{ 6 | static propType = { 7 | inputType: PropTypes.string, 8 | id: PropTypes.string, 9 | className : PropTypes.string, 10 | placeholder: PropTypes.string, 11 | value: PropTypes.string, 12 | onChange: PropTypes.func 13 | } 14 | 15 | static defaultProps = { 16 | inputType: "text", 17 | id: "", 18 | className: "form-control", 19 | placeholder: "", 20 | value: "", 21 | onChange: () => {} 22 | } 23 | 24 | 25 | render(){ 26 | const {inputType, id, className, placeholder, value, onChange} = this.props; 27 | 28 | return 29 | } 30 | } 31 | 32 | export default TextField; -------------------------------------------------------------------------------- /src/common/components/textField/index.js: -------------------------------------------------------------------------------- 1 | import TextField from "./TextField"; 2 | 3 | export default TextField; -------------------------------------------------------------------------------- /src/common/components/textFormGroup/TextFormGroup.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import PropTypes from "prop-types"; 3 | import TextField from "../textField"; 4 | 5 | 6 | class TextFormGroup extends Component{ 7 | static propType = { 8 | inputType: PropTypes.string, 9 | id: PropTypes.string, 10 | inputClassName : PropTypes.string, 11 | placeholder: PropTypes.string, 12 | value: PropTypes.string, 13 | onChange: PropTypes.func, 14 | label: PropTypes.string, 15 | labelClassName: PropTypes.string 16 | } 17 | 18 | static defaultProps = { 19 | inputType: "text", 20 | id: "", 21 | inputClassName: "form-control", 22 | placeholder: "", 23 | value: "", 24 | onChange: () => {}, 25 | label: "", 26 | labelClassName: "" 27 | } 28 | 29 | render(){ 30 | const {inputType, id, inputClassName, placeholder, value, onChange, label, labelClassName} = this.props; 31 | 32 | return ( 33 |
34 | {label && } 35 | 36 |
37 | ) 38 | } 39 | } 40 | 41 | export default TextFormGroup; -------------------------------------------------------------------------------- /src/common/components/textFormGroup/index.js: -------------------------------------------------------------------------------- 1 | import TextFormGroup from "./TextFormGroup"; 2 | 3 | export default TextFormGroup; -------------------------------------------------------------------------------- /src/components/Anchortag.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | 5 | class AnchorTag extends Component{ 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | render(){ 11 | return ( 12 | {this.props.itemValue} 13 | ) 14 | 15 | } 16 | } 17 | 18 | export default AnchorTag; -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | 3 | 4 | class Button extends Component{ 5 | constructor(props){ 6 | super(props); 7 | } 8 | 9 | 10 | render(){ 11 | return 12 | } 13 | } 14 | 15 | 16 | Button.defaultProps = { 17 | dataToggle: "", 18 | dataTarget: "" 19 | } 20 | 21 | export default Button; -------------------------------------------------------------------------------- /src/components/PageHeader.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | 3 | 4 | class PageHeader extends Component{ 5 | constructor(props){ 6 | super(props); 7 | } 8 | 9 | 10 | render(){ 11 | return ( 12 |
13 |

{this.props.headerText}

14 |
15 | ) 16 | } 17 | } 18 | 19 | export default PageHeader; -------------------------------------------------------------------------------- /src/components/admin/ProfilePage.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../style/admin.css"; 3 | 4 | 5 | class ProfilePage extends Component{ 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | 11 | render(){ 12 | return ( 13 |
14 |
15 |

Personal Profile

16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 | 42 | 48 |
49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 | ) 70 | } 71 | } 72 | 73 | export default ProfilePage; -------------------------------------------------------------------------------- /src/components/admin/settings/PasswordResetForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | 4 | 5 | class PasswordResetForm extends Component{ 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | 11 | render(){ 12 | return ( 13 |
14 |
15 |

Password Reset

16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 |
52 | ) 53 | } 54 | } 55 | 56 | export default PasswordResetForm; -------------------------------------------------------------------------------- /src/components/admin/settings/RoleForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | 5 | 6 | class RoleForm extends Component{ 7 | constructor(props){ 8 | super(props); 9 | } 10 | 11 | 12 | render(){ 13 | return ( 14 |
15 |
16 | 17 |

Create Role

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 |
Access Permissions
31 |
32 | 33 |
34 |
35 |
36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 | 61 | 62 |
63 |
64 | 65 | 66 |
67 |
68 | 69 | 70 |
71 |
72 | 73 |
74 |
75 | 76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 | 84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 |
92 | 93 |
94 | 95 |
96 |
97 | 98 | 99 |
100 |
101 |
102 |
103 | 104 | 105 |
106 |
107 | 108 |
109 | ) 110 | } 111 | } 112 | 113 | export default RoleForm; -------------------------------------------------------------------------------- /src/components/admin/settings/RoleList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | import Table from "../../../components/table/Table"; 5 | 6 | 7 | class RoleList extends Component{ 8 | constructor(props){ 9 | super(props); 10 | this.columnList = ["ID", "Name", "Permissions", "Assign User", "Status", "Action"]; 11 | this.tableData = [ 12 | {"id": 1, "role": "Super Admin", "permissions": 105, "users": 10, "status": "Active"}, 13 | {"id": 2, "role": "Moderator", "permissions": 25, "users": 60, "status": "Active"}, 14 | {"id": 3, "role": "Editor", "permissions": 15, "users": 6, "status": "Active"} 15 | ] 16 | } 17 | 18 | 19 | render(){ 20 | return ( 21 |
22 |
23 | 24 |

Role Management

25 |
26 |
27 |
28 | ) 29 | } 30 | } 31 | 32 | export default RoleList; -------------------------------------------------------------------------------- /src/components/admin/settings/UserForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | 5 | 6 | class UserForm extends Component{ 7 | constructor(props){ 8 | super(props); 9 | } 10 | 11 | 12 | render(){ 13 | return ( 14 |
15 |
16 | 17 |

Create User

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 | 50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |
61 | 62 |
63 |
64 | 65 |
66 | ) 67 | } 68 | } 69 | 70 | export default UserForm; -------------------------------------------------------------------------------- /src/components/admin/settings/UserList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | import Table from "../../../components/table/Table"; 5 | 6 | 7 | class UserList extends Component{ 8 | constructor(props){ 9 | super(props); 10 | this.columnList = ["ID", "Name", "Email", "Role", "Status", "Action"]; 11 | this.tableData = [ 12 | {"id": 1, "name": "Md Nazmul Hasan", "email": "hasan08sust@gmail.com", "role": "Super Admin", "status": "Active"}, 13 | {"id": 2, "name": "Farzana Yesmin", "email": "farzana.26@gmail.com", "role": "Admin", "status": "Active"}, 14 | {"id": 3, "name": "Irfan Ahmed Nabil", "email": "nabil.irfan91@gmail.com", "role": "Editor", "status": "Active"}, 15 | ] 16 | } 17 | 18 | 19 | render(){ 20 | return ( 21 |
22 |
23 | 24 |

System User

25 |
26 |
27 |
28 | ) 29 | } 30 | } 31 | 32 | export default UserList; -------------------------------------------------------------------------------- /src/components/admin/settings/UserView.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | 5 | 6 | class UserView extends Component{ 7 | constructor(props){ 8 | super(props); 9 | } 10 | 11 | 12 | render(){ 13 | return ( 14 |
15 |
16 | 17 |

User Details

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 | 45 |
46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 |
55 | 56 | 57 |
58 |
59 | 60 |
61 |
62 | 63 |
64 |
65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 | ) 73 | } 74 | } 75 | 76 | export default UserView; -------------------------------------------------------------------------------- /src/components/admin/shop/ShopForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "../../../style/admin.css"; 4 | import AnchorTag from "../../../components/Anchortag"; 5 | 6 | 7 | class ShopForm extends Component{ 8 | constructor(props){ 9 | super(props); 10 | } 11 | 12 | 13 | render(){ 14 | return ( 15 |
16 |
17 | 18 |

Create Shop

19 |
20 |
21 |
22 |
23 |
24 |
25 |

Shop Owner Information

26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 |
46 |

Shop Information

47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 | ) 69 | } 70 | } 71 | 72 | export default ShopForm; -------------------------------------------------------------------------------- /src/components/admin/shop/ShopList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | import Table from "../../../components/table/Table"; 5 | 6 | 7 | class ShopList extends Component{ 8 | constructor(props){ 9 | super(props); 10 | this.columnList = ["ID", "Name", "Owner", "Employee", "Status", "Action"]; 11 | this.tableData = [ 12 | {"id": 1, "name": "Sixads Cor.", "owner": "hasan08sust@gmail.com", "employee": "50", "status": "Active"}, 13 | {"id": 2, "name": "Digital IT", "owner": "farzana.26@gmail.com", "employee": "0", "status": "Active"}, 14 | ] 15 | } 16 | 17 | 18 | render(){ 19 | return ( 20 |
21 |
22 | 23 |

Shop List

24 |
25 |
26 |
27 | ) 28 | } 29 | } 30 | 31 | export default ShopList; -------------------------------------------------------------------------------- /src/components/admin/shop/ShopView.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import "../../../style/admin.css"; 3 | import AnchorTag from "../../../components/Anchortag"; 4 | 5 | 6 | class ShopView extends Component{ 7 | constructor(props){ 8 | super(props); 9 | } 10 | 11 | 12 | render(){ 13 | return ( 14 |
15 |
16 | 17 |

Shop Details

18 |
19 |
20 |
21 |
22 |
23 |
24 |

Shop Owner Information

25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 | 52 |
53 |

Shop Information

54 |
55 |
56 |
57 | 58 | 59 |
60 |
61 |
62 |
63 | 64 | 65 |
66 |
67 |
68 |
69 | 70 | 71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 | 91 |
92 | ) 93 | } 94 | } 95 | 96 | export default ShopView; -------------------------------------------------------------------------------- /src/components/alerts/Primary.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | 3 | 4 | class PrimaryAlert extends Component{ 5 | constructor(props){ 6 | super(props); 7 | 8 | } 9 | 10 | render(){ 11 | return ( 12 |
{this.props.alertMessage}
13 | ) 14 | } 15 | } 16 | 17 | export default PrimaryAlert; -------------------------------------------------------------------------------- /src/components/auth/LoginForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | 5 | class LoginForm extends Component{ 6 | 7 | render(){ 8 | return ( 9 |
10 |
11 |
12 |

User Login

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 |
25 |
26 |

Forgot password? Click to Reset

27 |
28 |
29 |

New user? Click to Register

30 |
31 |
32 |
33 | ) 34 | } 35 | } 36 | 37 | export default LoginForm; -------------------------------------------------------------------------------- /src/components/auth/PasswordResetForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | 5 | class PasswordResetForm extends Component{ 6 | 7 | render(){ 8 | return ( 9 |
10 |
11 |
12 |

Password Reset

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 |
25 |
26 |

Back to Login. Login

27 |
28 |
29 |
30 | ) 31 | } 32 | } 33 | 34 | export default PasswordResetForm; -------------------------------------------------------------------------------- /src/components/auth/PasswordResetVerifyForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | 5 | class PasswordResetVerifyForm extends Component{ 6 | 7 | render(){ 8 | return ( 9 |
10 |
11 |
12 |

Account Verify

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 |

Back to Login. Login

23 |
24 |
25 |
26 | ) 27 | } 28 | } 29 | 30 | export default PasswordResetVerifyForm; -------------------------------------------------------------------------------- /src/components/auth/RegistrationForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | 5 | class RegistrationForm extends Component{ 6 | 7 | render(){ 8 | return ( 9 |
10 |
11 |
12 |

User Registration

13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |
38 |

Already user? Click to Login

39 |
40 |
41 |
42 | ) 43 | } 44 | } 45 | 46 | export default RegistrationForm; -------------------------------------------------------------------------------- /src/components/customer/EmployeeForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import InputFormGroup from "../input/InputFormGroup"; 4 | import SelectFormGroup from "../input/SelectFormGroup"; 5 | 6 | 7 | class EmployeeForm extends Component{ 8 | constructor(props){ 9 | super(props); 10 | this.role = [ 11 | { 12 | "id": 1, 13 | "name": "Sales" 14 | }, 15 | { 16 | "id": 2, 17 | "name": "Editor" 18 | } 19 | ] 20 | } 21 | 22 | 23 | render(){ 24 | return ( 25 |
26 |
27 | 28 |

Create Employee

29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 | 47 | 48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 | ) 62 | } 63 | } 64 | 65 | export default EmployeeForm; -------------------------------------------------------------------------------- /src/components/customer/EmployeeList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import InputFormGroup from "../../components/input/InputFormGroup"; 4 | import SelectFormGroup from "../../components/input/SelectFormGroup"; 5 | import Table from "../../components/table/Table"; 6 | 7 | 8 | class EmployeeList extends Component{ 9 | constructor(props){ 10 | super(props); 11 | this.columnList = ["ID", "Name", "Email", "Role", "Status", "Joined At", "Action"]; 12 | this.tableData = [ 13 | {"id": 1, "name": "Farhan Chowdhury", "email": "farhan.chowdhury@gmail.com", "role": "Sales", "status": "Active", "joined_at": "20th August, 2021"}, 14 | {"id": 2, "name": "David Moree", "email": "david.moree.987@gmail.com", "role": "Sales", "status": "Active", "joined_at": "30th August, 2021"}, 15 | ] 16 | 17 | this.roleData = [ 18 | {"id": 1, "name": "Admin"}, 19 | {"id": 2, "name": "Sales"}, 20 | {"id": 3, "name": "Editor"} 21 | ] 22 | } 23 | 24 | 25 | render(){ 26 | return ( 27 |
28 |
29 | 30 |

Employee List

31 |
32 |
33 |
34 |

Search Box

35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 | ) 55 | } 56 | } 57 | 58 | export default EmployeeList; -------------------------------------------------------------------------------- /src/components/customer/EmployeeView.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | 4 | 5 | class EmployeeView extends Component{ 6 | constructor(props){ 7 | super(props); 8 | this.productDetails = "PERFECT GIFT IDEA: Works on wet, tion and is not a product defect." 9 | } 10 | 11 | 12 | render(){ 13 | return ( 14 |
15 |
16 |

Employee Details

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 | 50 |
51 |
52 |
53 |
54 | 55 | 56 |
57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 | ) 72 | } 73 | } 74 | 75 | export default EmployeeView; -------------------------------------------------------------------------------- /src/components/customer/InvoiceForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import Button from "../Button"; 4 | import InputFormGroup from "../input/InputFormGroup"; 5 | import SelectFormGroup from "../input/SelectFormGroup"; 6 | import SearchDataTable from "../table/SearchDataTable"; 7 | import Table from "../table/Table"; 8 | 9 | 10 | class InvoiceForm extends Component{ 11 | constructor(props){ 12 | super(props); 13 | this.productCategory = [ 14 | { 15 | "id": 1, 16 | "name": "Computer Accessories" 17 | }, 18 | { 19 | "id": 2, 20 | "name": "Kitchen & Dining" 21 | }, 22 | { 23 | "id": 2, 24 | "name": "Watch & Sunglasses" 25 | } 26 | ] 27 | this.columnList = ["ID", "Name", "Stock", "Price", "Action"]; 28 | this.tableData = [ 29 | {"id": 1, "name": "USB 2.0 to Sata 7+15 Pin 2.5 Converter ..", "stock": 20, "price": "238.00"}, 30 | {"id": 2, "name": "FANTECH VX7 CRYPTO GAMING MOUSE ..", "stock": 20, "price": "980.00"}, 31 | {"id": 3, "name": "Cake decoration turntable - 28cm and 3 pieces set ..", "stock": 20, "price": "305.00"}, 32 | {"id": 4, "name": "Stylish White Sunglasses ..", "stock": 20, "price": "139.00"}, 33 | ] 34 | 35 | this.invoiceColumnList = ["ID", "Name", "Quantity", "Price", "Sub total"]; 36 | this.invoiceTableData = [ 37 | {"id": 1, "name": "USB 2.0 to Sata 7+15 Pin 2.5 Converter ..", "quantity": 1, "price": "238.00", "subtotal": 2000}, 38 | {"id": 2, "name": "FANTECH VX7 CRYPTO GAMING MOUSE ..", "quantity": 2, "price": "980.00", "subtotal": 2000}, 39 | {"id": 3, "name": "Cake decoration turntable - 28cm and 3 pieces set ..", "quantity": 1, "price": "305.00", "subtotal": 2000}, 40 | {"id": 4, "name": "Stylish White Sunglasses ..", "quantity": 4, "price": "139.00", "subtotal": 2000}, 41 | ] 42 | } 43 | 44 | 45 | render(){ 46 | return ( 47 |
48 |
49 | 50 |

Create Invoice

51 |
52 |
53 |
54 |
55 |
56 |
57 |
59 |
60 |
61 |
62 |
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
Total25785.00
76 |
77 |
78 | {/* Modal */} 79 | 114 | 115 |
116 |
117 |
118 | ) 119 | } 120 | } 121 | 122 | export default InvoiceForm; -------------------------------------------------------------------------------- /src/components/customer/InvoiceList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import Table from "../../components/table/Table"; 4 | import InputFormGroup from "../input/InputFormGroup"; 5 | 6 | 7 | class InvoiceList extends Component{ 8 | constructor(props){ 9 | super(props); 10 | this.columnList = ["ID", "Customer", "Invoice ID", "Total", "Paid", "Date", "Action"]; 11 | this.tableData = [ 12 | {"id": 1, "customer": "Md Nazmul Hasan", "invoice_id": "201256", "total": "238.00", "is_paid": "Yes", "date": "20th July, 2021"}, 13 | {"id": 2, "customer": "Farzana Yesmin", "invoice_id": "201256", "total": "980.00", "is_paid": "Yes", "date": "8th July, 2021"}, 14 | {"id": 3, "customer": "Amit Shah", "invoice_id": "201256", "total": "305.00", "is_paid": "Yes", "date": "11th May, 2021"}, 15 | {"id": 4, "customer": "Md Farhan Kabir", "invoice_id": "201256", "total": "139.00", "is_paid": "No", "date": "1st April, 2021"}, 16 | ] 17 | } 18 | 19 | 20 | render(){ 21 | return ( 22 |
23 |
24 | 25 |

Invoice List

26 |
27 |
28 |
29 |

Search Invoice

30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 | ) 46 | } 47 | } 48 | 49 | export default InvoiceList; -------------------------------------------------------------------------------- /src/components/customer/PeoductCategoryList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import Table from "../../components/table/Table"; 4 | 5 | 6 | class ProductCategoryList extends Component{ 7 | constructor(props){ 8 | super(props); 9 | this.columnList = ["ID", "Name", "Total Product", "Action"]; 10 | this.tableData = [ 11 | {"id": 1, "name": "Electronic Accessories", "total_products": "12"}, 12 | {"id": 2, "name": "Clothing", "total_products": "30"}, 13 | {"id": 3, "name": "Health & Beauty", "total_products": "30"}, 14 | {"id": 4, "name": "Home & Lifestyle", "total_products": "30"} 15 | ] 16 | } 17 | 18 | 19 | render(){ 20 | return ( 21 |
22 |
23 | 24 |

Product Category List

25 |
26 |
27 |
28 | ) 29 | } 30 | } 31 | 32 | export default ProductCategoryList; -------------------------------------------------------------------------------- /src/components/customer/ProductCategoryForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | 4 | 5 | class ProductCategoryForm extends Component{ 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | 11 | render(){ 12 | return ( 13 |
14 |
15 | 16 |

Create Product Category

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 | ) 43 | } 44 | } 45 | 46 | export default ProductCategoryForm; -------------------------------------------------------------------------------- /src/components/customer/ProductCategoryView.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | 4 | 5 | class ProductCategoryView extends Component{ 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | 11 | render(){ 12 | return ( 13 |
14 |
15 |

Product Category Details

16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 | ) 53 | } 54 | } 55 | 56 | export default ProductCategoryView; -------------------------------------------------------------------------------- /src/components/customer/ProductForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import InputFormGroup from "../input/InputFormGroup"; 4 | import TextAreaFormGroup from "../input/TextAreaFormGroup"; 5 | import SelectFormGroup from "../input/SelectFormGroup"; 6 | 7 | 8 | class ProductForm extends Component{ 9 | constructor(props){ 10 | super(props); 11 | this.productCategory = [ 12 | { 13 | "id": 1, 14 | "name": "Computer Accessories" 15 | }, 16 | { 17 | "id": 2, 18 | "name": "Kitchen & Dining" 19 | }, 20 | { 21 | "id": 2, 22 | "name": "Watch & Sunglasses" 23 | } 24 | ] 25 | } 26 | 27 | 28 | render(){ 29 | return ( 30 |
31 |
32 | 33 |

Create Product

34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 | 59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 |
67 |
68 | 69 | 70 |
71 |
72 |
73 |
74 | 75 |
76 |
77 | 78 |
79 | ) 80 | } 81 | } 82 | 83 | export default ProductForm; -------------------------------------------------------------------------------- /src/components/customer/ProductList.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | import Table from "../../components/table/Table"; 4 | import InputFormGroup from "../../components/input/InputFormGroup"; 5 | import SelectFormGroup from "../../components/input/SelectFormGroup"; 6 | 7 | 8 | class ProductList extends Component{ 9 | constructor(props){ 10 | super(props); 11 | this.columnList = ["ID", "Name", "Category", "Price", "Stock Amount", "Action"]; 12 | this.tableData = [ 13 | {"id": 1, "name": "USB 2.0 to Sata 7+15 Pin 2.5 Converter ..", "category": "Computer Accessories", "price": "238.00", "stock": 20}, 14 | {"id": 2, "name": "FANTECH VX7 CRYPTO GAMING MOUSE ..", "category": "Computer & Laptop", "price": "980.00", "stock": 34}, 15 | {"id": 3, "name": "Cake decoration turntable - 28cm and 3 pieces set ..", "category": "Kitchen & Dining", "price": "305.00", "stock": 14}, 16 | {"id": 4, "name": "Stylish White Sunglasses ..", "category": "Watch & Sunglasses", "price": "139.00", "stock": 40}, 17 | ] 18 | 19 | this.selectData = [ 20 | {"id": 1, "name": "Electronic Accessories"}, 21 | {"id": 2, "name": "Health & Beauty"}, 22 | {"id": 3, "name": "Home & Lifestyle"} 23 | ] 24 | } 25 | 26 | 27 | render(){ 28 | return ( 29 |
30 |
31 | 32 |

Product List

33 |
34 |
35 |
36 |

Search Box

37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 |
55 | ) 56 | } 57 | } 58 | 59 | export default ProductList; -------------------------------------------------------------------------------- /src/components/customer/ProductView.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import AnchorTag from "../../components/Anchortag"; 3 | 4 | 5 | class ProductView extends Component{ 6 | constructor(props){ 7 | super(props); 8 | this.productDetails = "PERFECT GIFT IDEA: Works on wet, dry, Long, short, thick, curly, and straight hair. Perfect gift for Valentines Day, Mother's Day, Thanksgiving, Christmas, Anniversary and Birthday to your girlfriend, wife, mom, sister and friends. NOTE: Paddle brush is designed to have one missing pin on the bottom of the cushion. This is to help with air circulation and is not a product defect." 9 | } 10 | 11 | 12 | render(){ 13 | return ( 14 |
15 |
16 |

Product Details

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 | 12 | } 13 | } 14 | 15 | TextArea.defaultProps = { 16 | rows: 3, 17 | cols: 10 18 | } 19 | 20 | export default TextArea; -------------------------------------------------------------------------------- /src/components/input/TextAreaFormGroup.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import TextArea from "./TextArea"; 3 | 4 | 5 | class TextAreaFormGroup extends Component{ 6 | constructor(props){ 7 | super(props); 8 | } 9 | 10 | 11 | render(){ 12 | return ( 13 |
14 | 15 |