├── src
    ├── assets
    │   ├── product1.png
    │   ├── product2.png
    │   ├── DumbMerch.png
    │   ├── blank-profile.png
    │   └── empty.svg
    ├── fakeData
    │   ├── category.js
    │   ├── transaction.js
    │   ├── contact.js
    │   └── product.js
    ├── reportWebVitals.js
    ├── config
    │   └── api.js
    ├── components
    │   ├── card
    │   │   └── ProductCard.js
    │   ├── form
    │   │   └── CheckBox.js
    │   ├── modal
    │   │   └── DeleteData.js
    │   ├── complain
    │   │   ├── Contact.js
    │   │   └── Chat.js
    │   ├── Navbar.js
    │   ├── NavbarAdmin.js
    │   └── auth
    │   │   ├── Login.js
    │   │   └── Register.js
    ├── context
    │   └── userContext.js
    ├── index.js
    ├── pages
    │   ├── Auth.js
    │   ├── Product.js
    │   ├── AddCategoryAdmin.js
    │   ├── UpdateCategoryAdmin.js
    │   ├── DetailProduct.js
    │   ├── Complain.js
    │   ├── ComplainAdmin.js
    │   ├── CategoryAdmin.js
    │   ├── AddProductAdmin.js
    │   ├── Profile.js
    │   ├── ProductAdmin.js
    │   └── UpdateProductAdmin.js
    ├── App.js
    └── index.css
├── .gitignore
├── package.json
└── public
    └── index.html


/src/assets/product1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kevinputra01/FrontEnd-Dumbmerch/HEAD/src/assets/product1.png


--------------------------------------------------------------------------------
/src/assets/product2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kevinputra01/FrontEnd-Dumbmerch/HEAD/src/assets/product2.png


--------------------------------------------------------------------------------
/src/assets/DumbMerch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kevinputra01/FrontEnd-Dumbmerch/HEAD/src/assets/DumbMerch.png


--------------------------------------------------------------------------------
/src/assets/blank-profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kevinputra01/FrontEnd-Dumbmerch/HEAD/src/assets/blank-profile.png


--------------------------------------------------------------------------------
/src/fakeData/category.js:
--------------------------------------------------------------------------------
 1 | let dataCategory = [
 2 |     {
 3 |         id: 1,
 4 |         name: 'Mouse'
 5 |     },
 6 |     {
 7 |         id: 2,
 8 |         name: 'Keyboard'
 9 |     },
10 |     {
11 |         id: 3,
12 |         name: 'Bag'
13 |     },
14 |     {
15 |         id: 4,
16 |         name: 'Stationary'
17 |     },
18 | ]
19 | 
20 | export default dataCategory


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/config/api.js:
--------------------------------------------------------------------------------
 1 | export const API = () => {
 2 |   const baseUrl = "https://be-dumbmerch.herokuapp.com/api/v1" || "http://localhost:5000/api/v1";
 3 | 
 4 |   const executeAPI = async (endpoint, config) => {
 5 |     const response = await fetch(baseUrl + endpoint, config);
 6 |     const data = await response.json();
 7 |     return data;
 8 |   };
 9 | 
10 |   return {
11 |     get: executeAPI,
12 |     post: executeAPI,
13 |     patch: executeAPI,
14 |     delete: executeAPI,
15 |   };
16 | };
17 | 


--------------------------------------------------------------------------------
/src/components/card/ProductCard.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | import convertRupiah from "rupiah-format";
 5 | 
 6 | export default function ProductCard({ item, index }) {
 7 |   return (
 8 |     <Link
 9 |       to={`/product/` + item.id}
10 |       style={{ textDecoration: "none" }}
11 |       key={index}
12 |     >
13 |       <div className="card-product mt-3">
14 |         <img src={item.image} className="img-fluid img-rounded" />
15 |         <div className="p-2">
16 |           <div className="text-header-product-item">{item.name}</div>
17 |           <div className="text-product-item">
18 |             {convertRupiah.convert(item.price)}
19 |           </div>
20 |           <div className="text-product-item">Stock : {item.qty}</div>
21 |         </div>
22 |       </div>
23 |     </Link>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/form/CheckBox.js:
--------------------------------------------------------------------------------
 1 | import React, { createElement, useState, useEffect } from "react";
 2 | 
 3 | export default function CheckBox(props) {
 4 |   const { value, handleChangeCategoryId, categoryId } = props;
 5 | 
 6 |   const [isChecked, setIsChecked] = useState();
 7 | 
 8 |   const getIsChecked = () => {
 9 |     if (categoryId?.length != 0) {
10 |       categoryId?.every((item) => {
11 |         if (item == value) {
12 |           setIsChecked(true);
13 |           return false;
14 |         } else {
15 |           setIsChecked(false);
16 |           return true;
17 |         }
18 |       });
19 |     } else {
20 |       setIsChecked(false);
21 |     }
22 |   };
23 | 
24 |   useEffect(() => {
25 |     getIsChecked();
26 |   }, [categoryId]);
27 | 
28 |   return createElement("input", {
29 |     type: "checkbox",
30 |     checked: isChecked,
31 |     value: value,
32 |     onClick: handleChangeCategoryId,
33 |   });
34 | }
35 | 


--------------------------------------------------------------------------------
/src/context/userContext.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useReducer } from "react";
 2 | 
 3 | export const UserContext = createContext();
 4 | 
 5 | const initialState = {
 6 |   isLogin: false,
 7 |   user: {},
 8 | };
 9 | 
10 | const reducer = (state, action) => {
11 |   const { type, payload } = action;
12 | 
13 |   switch (type) {
14 |     case "USER_SUCCESS":
15 |     case "LOGIN_SUCCESS":
16 |       localStorage.setItem("token", payload.token);
17 |       return {
18 |         isLogin: true,
19 |         user: payload,
20 |       };
21 |     case "AUTH_ERROR":
22 |     case "LOGOUT":
23 |       localStorage.removeItem("token");
24 |       return {
25 |         isLogin: false,
26 |         user: {},
27 |       };
28 |     default:
29 |       throw new Error();
30 |   }
31 | };
32 | 
33 | export const UserContextProvider = ({ children }) => {
34 |   const [state, dispatch] = useReducer(reducer, initialState);
35 | 
36 |   return (
37 |     <UserContext.Provider value={[state, dispatch]}>
38 |       {children}
39 |     </UserContext.Provider>
40 |   );
41 | };
42 | 


--------------------------------------------------------------------------------
/src/components/modal/DeleteData.js:
--------------------------------------------------------------------------------
 1 | import { Modal, Button } from 'react-bootstrap'
 2 | 
 3 | export default function DeleteData({ show, handleClose, setConfirmDelete }) {
 4 | 
 5 |     const handleDelete = () => {
 6 |         setConfirmDelete(true)
 7 |     }
 8 | 
 9 |     return (
10 |         <Modal show={show} onHide={handleClose} centered>
11 |             <Modal.Body className="text-dark">
12 |                 <div style={{fontSize: '20px', fontWeight: '900'}}>
13 |                     Delete Data
14 |                 </div>
15 |                 <div style={{fontSize: '16px', fontWeight: '500'}} className="mt-2">
16 |                     Are you sure you want to delete this data?
17 |                 </div>
18 |                 <div className="text-end mt-5">
19 |                     <Button onClick={handleDelete} size="sm" className="btn-success me-2" style={{width: '135px'}}>Yes</Button>
20 |                     <Button onClick={handleClose} size="sm" className="btn-danger" style={{width: '135px'}}>No</Button>
21 |                 </div>
22 |             </Modal.Body>
23 |         </Modal>
24 |     )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/fakeData/transaction.js:
--------------------------------------------------------------------------------
 1 | const dataTransaction = [
 2 |     {
 3 |         id: 1,
 4 |         name: 'Mouse',
 5 |         date: new Date(),
 6 |         price: 500000,
 7 |         subtotal: 500000,
 8 |         img: 'https://images.unsplash.com/photo-1605773527852-c546a8584ea3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80',
 9 |     },
10 |     {
11 |         id: 2,
12 |         name: 'Keyboard',
13 |         date: new Date(),
14 |         price: 700000,
15 |         subtotal: 700000,
16 |         img: 'https://images.unsplash.com/photo-1573643808568-4a3c26f3a06b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGtleWJvYXJkfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
17 |     },
18 |     {
19 |         id: 3,
20 |         name: 'Monitor',
21 |         date: new Date(),
22 |         price: 2300000,
23 |         subtotal: 2300000,
24 |         img: 'https://images.unsplash.com/photo-1619953942547-233eab5a70d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=658&q=80',
25 |     },
26 | ]
27 | 
28 | export default dataTransaction


--------------------------------------------------------------------------------
/src/components/complain/Contact.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import default_profile from "../../assets/blank-profile.png"
 4 | 
 5 | export default function Contact({ dataContact, clickContact, contact }) {
 6 |   return (
 7 |     <>
 8 |       {dataContact.length > 0 && (
 9 |         <>
10 |           {dataContact.map((item) => (
11 |             <div
12 |               key={item.id}
13 |               className={`contact mt-3 p-2 ${
14 |                 contact?.id === item?.id && "contact-active"
15 |               }`}
16 |               onClick={() => {
17 |                 clickContact(item);
18 |               }}
19 |             >
20 |               <img
21 |                 src={item.profile?.image || default_profile}
22 |                 className="rounded-circle me-2 img-contact"
23 |                 alt="user avatar"
24 |               />
25 |               <div className="ps-1 text-contact d-flex flex-column justify-content-around">
26 |                 <p className="mb-0">{item.name}</p>
27 |                 <p className="text-contact-chat mt-1 mb-0">
28 |                   {item.message}
29 |                 </p>
30 |               </div>
31 |             </div>
32 |           ))}
33 |         </>
34 |       )}
35 |     </>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import { BrowserRouter as Router } from "react-router-dom";
 4 | // Init QueryClient and QueryClientProvider
 5 | import { QueryClient, QueryClientProvider } from "react-query";
 6 | import "./index.css";
 7 | import App from "./App";
 8 | import reportWebVitals from "./reportWebVitals";
 9 | 
10 | import "bootstrap/dist/css/bootstrap.min.css";
11 | import { UserContextProvider } from "./context/userContext";
12 | 
13 | // favicon
14 | import Favicon from "./assets/DumbMerch.png";
15 | const favicon = document.getElementById("idFavicon");
16 | favicon.setAttribute("href", Favicon);
17 | 
18 | // Init Client
19 | const client = new QueryClient();
20 | 
21 | ReactDOM.render(
22 |   <React.StrictMode>
23 |     <UserContextProvider>
24 |       <QueryClientProvider client={client}>
25 |         <Router>
26 |           <App />
27 |         </Router>
28 |       </QueryClientProvider>
29 |     </UserContextProvider>
30 |   </React.StrictMode>,
31 |   document.getElementById("root")
32 | );
33 | 
34 | // If you want to start measuring performance in your app, pass a function
35 | // to log results (for example: reportWebVitals(console.log))
36 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
37 | reportWebVitals();
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "axios": "^0.21.1",
10 |     "bootstrap": "^5.0.2",
11 |     "dateformat": "^4.5.1",
12 |     "react": "^17.0.2",
13 |     "react-bootstrap": "^1.6.1",
14 |     "react-dom": "^17.0.2",
15 |     "react-masonry-css": "^1.0.16",
16 |     "react-query": "^3.19.1",
17 |     "react-router-dom": "^5.2.0",
18 |     "react-scripts": "4.0.3",
19 |     "react-show-more-text": "^1.4.6",
20 |     "rupiah-format": "^1.0.0",
21 |     "socket.io-client": "^4.1.3",
22 |     "web-vitals": "^1.1.2"
23 |   },
24 |   "scripts": {
25 |     "start": "react-scripts start",
26 |     "build": "react-scripts build",
27 |     "test": "react-scripts test",
28 |     "eject": "react-scripts eject"
29 |   },
30 |   "eslintConfig": {
31 |     "extends": [
32 |       "react-app",
33 |       "react-app/jest"
34 |     ]
35 |   },
36 |   "browserslist": {
37 |     "production": [
38 |       ">0.2%",
39 |       "not dead",
40 |       "not op_mini all"
41 |     ],
42 |     "development": [
43 |       "last 1 chrome version",
44 |       "last 1 firefox version",
45 |       "last 1 safari version"
46 |     ]
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/fakeData/contact.js:
--------------------------------------------------------------------------------
 1 | const dataContact = [
 2 |   {
 3 |     id: 1,
 4 |     name: "Customer 1",
 5 |     chat: "Yes, Is there anything I can help",
 6 |     img: "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHVzZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
 7 |   },
 8 |   {
 9 |     id: 2,
10 |     name: "Customer 2",
11 |     chat: "Hello World",
12 |     img: "https://images.unsplash.com/photo-1604607055958-4def78942d6e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjZ8fHVzZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
13 |   },
14 |   {
15 |     id: 3,
16 |     name: "Customer 3",
17 |     chat: "Hello World Everyone",
18 |     img: "https://images.unsplash.com/photo-1599110906885-b024c90c2773?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzB8fHVzZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
19 |   },
20 |   {
21 |     id: 4,
22 |     name: "Customer 4",
23 |     chat: "I want complain",
24 |     img: "https://images.unsplash.com/photo-1489980557514-251d61e3eeb6?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fHVzZXJ8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
25 |   },
26 |   {
27 |     id: 5,
28 |     name: "Customer 5",
29 |     chat: "Hello Admin",
30 |     img: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80",
31 |   },
32 | ];
33 | 
34 | export default dataContact;
35 | 


--------------------------------------------------------------------------------
/src/components/complain/Chat.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import default_profile from '../../assets/blank-profile.png'
 4 | 
 5 | export default function Chat({ contact, user, messages, sendMessage }) {
 6 |   return (
 7 |     <>
 8 |       {contact ? (
 9 |         <>
10 |           <div id="chat-messages" style={{ height: "80vh" }} className="overflow-auto px-3 py-2">
11 |           {messages.map((item, index) => (
12 |               <div key={index}>
13 |                 <div className={`d-flex py-1 ${item.idSender === user.id ? "justify-content-end": "justify-content-start"}`}>
14 |                   {item.idSender !== user.id && (
15 |                     <img src={contact.profile?.image || default_profile} className="rounded-circle me-2 img-chat" alt="bubble avatar" />
16 |                   )}
17 |                   <div
18 |                     className={ item.idSender === user.id ? "chat-me" : "chat-other"}
19 |                   >
20 |                     {item.message}
21 |                   </div>
22 |                 </div>
23 |               </div>
24 |             ))}
25 |           </div>
26 |           <div style={{ height: '6vh' }}className="px-3">
27 |             <input 
28 |               placeholder="Send Message" 
29 |               className="input-message px-4" 
30 |               onKeyPress={sendMessage} />
31 |           </div>
32 |         </>
33 |       ) : (
34 |         <div
35 |           style={{ height: "89.5vh" }}
36 |           className="h4 d-flex justify-content-center align-items-center"
37 |         >
38 |           No Message
39 |         </div>
40 |       )}
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import { Container, Navbar as NavbarComp, Nav, NavDropdown } from 'react-bootstrap'
 3 | import {
 4 |     Link,
 5 |     useHistory
 6 | } from "react-router-dom"
 7 | 
 8 | import { UserContext } from '../context/userContext'
 9 | 
10 | import ImgDumbMerch from '../assets/DumbMerch.png'
11 | 
12 | export default function Navbar(props) {
13 |     const [state, dispatch] = useContext(UserContext)
14 | 
15 |     let history = useHistory()
16 | 
17 |     const logout = () => {
18 |         console.log(state)
19 |         dispatch({
20 |             type: "LOGOUT"
21 |         })
22 |         history.push("/auth")
23 |     }
24 | 
25 |     return (
26 |         <NavbarComp expand="lg">
27 |             <Container>
28 |                 <NavbarComp.Brand as={Link} to="/">
29 |                     <img src={ImgDumbMerch} className="img-fluid" style={{ width: '60px', height: '60px' }} alt="brand"/>
30 |                 </NavbarComp.Brand>
31 |                 <NavbarComp.Toggle aria-controls="basic-navbar-nav" />
32 |                 <NavbarComp.Collapse id="basic-navbar-nav">
33 |                     <Nav className="ms-auto">
34 |                         <Nav.Link as={Link} to="/complain" className={props?.title == 'Complain' ? `text-navbar-active` : `text-navbar`}>Complain</Nav.Link>
35 |                         <Nav.Link as={Link} to="/profile" className={props?.title == 'Profile' ? `text-navbar-active` : `text-navbar`}>Profile</Nav.Link>
36 |                         <Nav.Link onClick={logout} className="text-navbar">Logout</Nav.Link>
37 |                     </Nav>
38 |                 </NavbarComp.Collapse>
39 |             </Container>
40 |         </NavbarComp>
41 |     )
42 | }
43 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" id="idFavicon" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <!--
18 |       Notice the use of %PUBLIC_URL% in the tags above.
19 |       It will be replaced with the URL of the `public` folder during the build.
20 |       Only files inside the `public` folder can be referenced from the HTML.
21 | 
22 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
23 |       work correctly both with client-side routing and a non-root public URL.
24 |       Learn how to configure a non-root public URL by running `npm run build`.
25 |     -->
26 |     <title>React App</title>
27 |   </head>
28 |   <body>
29 |     <noscript>You need to enable JavaScript to run this app.</noscript>
30 |     <div id="root"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/src/components/NavbarAdmin.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from 'react'
 2 | import { Container, Navbar as NavbarComp, Nav, NavDropdown } from 'react-bootstrap'
 3 | import {
 4 |     Link,
 5 |     useHistory
 6 | } from "react-router-dom"
 7 | 
 8 | import { UserContext } from '../context/userContext'
 9 | 
10 | import ImgDumbMerch from '../assets/DumbMerch.png'
11 | 
12 | export default function NavbarAdmin(props) {
13 |     const [state, dispatch] = useContext(UserContext)
14 | 
15 |     let history = useHistory()
16 | 
17 |     const logout = () => {
18 |         console.log(state)
19 |         dispatch({
20 |             type: "LOGOUT"
21 |         })
22 |         history.push("/auth")
23 |     }
24 | 
25 |     return (
26 |         <NavbarComp expand="lg">
27 |             <Container>
28 |                 <NavbarComp.Brand as={Link} to="/complain-admin">
29 |                     <img src={ImgDumbMerch} className="img-fluid" style={{ width: '60px', height: '60px' }} alt="brand"/>
30 |                 </NavbarComp.Brand>
31 |                 <NavbarComp.Toggle aria-controls="basic-navbar-nav" />
32 |                 <NavbarComp.Collapse id="basic-navbar-nav">
33 |                     <Nav className="ms-auto">
34 |                         <Nav.Link as={Link} to="/complain-admin" className={props?.title == 'Complain admin' ? `text-navbar-active` : `text-navbar`}>Complain</Nav.Link>
35 |                         <Nav.Link as={Link} to="/category-admin" className={props?.title == 'Category admin' ? `text-navbar-active` : `text-navbar`}>Category</Nav.Link>
36 |                         <Nav.Link as={Link} to="/product-admin" className={props?.title == 'Product admin' ? `text-navbar-active` : `text-navbar`}>Product</Nav.Link>
37 |                         <Nav.Link onClick={logout} className="text-navbar">Logout</Nav.Link>
38 |                     </Nav>
39 |                 </NavbarComp.Collapse>
40 |             </Container>
41 |         </NavbarComp>
42 |     )
43 | }
44 | 


--------------------------------------------------------------------------------
/src/pages/Auth.js:
--------------------------------------------------------------------------------
 1 | import { useContext, useState } from "react";
 2 | import { Container, Row, Col } from "react-bootstrap";
 3 | import { useHistory } from "react-router-dom";
 4 | 
 5 | import { UserContext } from "../context/userContext";
 6 | 
 7 | import ImgDumbMerch from "../assets/DumbMerch.png";
 8 | 
 9 | import Login from "../components/auth/Login";
10 | import Register from "../components/auth/Register";
11 | 
12 | export default function Auth() {
13 |   let history = useHistory();
14 | 
15 |   const [state] = useContext(UserContext);
16 | 
17 |   console.log(state);
18 | 
19 |   const [isRegister, setIsRegister] = useState(false);
20 | 
21 |   const switchLogin = () => {
22 |     setIsRegister(false);
23 |   };
24 | 
25 |   const switchRegister = () => {
26 |     setIsRegister(true);
27 |   };
28 | 
29 |   return (
30 |     <div className="bg-black">
31 |       <Container>
32 |         <Row className="vh-100 d-flex align-items-center">
33 |           <Col md="6">
34 |             <img
35 |               src={ImgDumbMerch}
36 |               className="img-fluid"
37 |               style={{ width: "264px", height: "264px" }}
38 |             />
39 |             <div className="text-auth-header mt-4">Easy, Fast and Reliable</div>
40 |             <p className="text-auth-parag mt-3">
41 |               Go shopping for merchandise, just go to dumb merch <br />{" "}
42 |               shopping. the biggest merchandise in <b>Indonesia</b>
43 |             </p>
44 |             <div className="mt-5">
45 |               <button onClick={switchLogin} className="btn btn-login px-5">
46 |                 Login
47 |               </button>
48 |               <button
49 |                 onClick={switchRegister}
50 |                 className="btn btn-register px-5"
51 |               >
52 |                 Register
53 |               </button>
54 |             </div>
55 |           </Col>
56 |           <Col md="6">{isRegister ? <Register /> : <Login />}</Col>
57 |         </Row>
58 |       </Container>
59 |     </div>
60 |   );
61 | }
62 | 


--------------------------------------------------------------------------------
/src/pages/Product.js:
--------------------------------------------------------------------------------
 1 | import { useContext, useState, useEffect } from "react";
 2 | import { useHistory } from "react-router-dom";
 3 | import Masonry from "react-masonry-css";
 4 | import { Container, Row, Col } from "react-bootstrap";
 5 | 
 6 | import { UserContext } from "../context/userContext";
 7 | 
 8 | import Navbar from "../components/Navbar";
 9 | import ProductCard from "../components/card/ProductCard";
10 | 
11 | import imgEmpty from "../assets/empty.svg";
12 | 
13 | // Import useQuery
14 | import { useQuery } from "react-query";
15 | 
16 | // API config
17 | import { API } from "../config/api";
18 | 
19 | export default function Product() {
20 |   let api = API();
21 | 
22 |   const title = "Shop";
23 |   document.title = "DumbMerch | " + title;
24 | 
25 |   // Fetching product data from database
26 |   let { data: products, refetch } = useQuery("productsCache", async () => {
27 |     const config = {
28 |       method: "GET",
29 |       headers: {
30 |         Authorization: "Basic " + localStorage.token,
31 |       },
32 |     };
33 |     const response = await api.get("/products", config);
34 |     return response.data;
35 |   });
36 | 
37 |   const breakpointColumnsObj = {
38 |     default: 6,
39 |     1100: 4,
40 |     700: 3,
41 |     500: 2,
42 |   };
43 | 
44 |   return (
45 |     <div>
46 |       <Navbar title={title} />
47 |       <Container className="mt-5">
48 |         <Row>
49 |           <Col>
50 |             <div className="text-header-product">Product</div>
51 |           </Col>
52 |         </Row>
53 |         <Row className="my-4">
54 |           {products?.length != 0 ? (
55 |             <Masonry
56 |               breakpointCols={breakpointColumnsObj}
57 |               className="my-masonry-grid"
58 |               columnClassName="my-masonry-grid_column"
59 |             >
60 |               {products?.map((item, index) => (
61 |                 <ProductCard item={item} index={index} />
62 |               ))}
63 |             </Masonry>
64 |           ) : (
65 |             <Col>
66 |               <div className="text-center pt-5">
67 |                 <img
68 |                   src={imgEmpty}
69 |                   className="img-fluid"
70 |                   style={{ width: "40%" }}
71 |                 />
72 |                 <div className="mt-3">No data product</div>
73 |               </div>
74 |             </Col>
75 |           )}
76 |         </Row>
77 |       </Container>
78 |     </div>
79 |   );
80 | }
81 | 


--------------------------------------------------------------------------------
/src/pages/AddCategoryAdmin.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Container, Row, Col, Button } from "react-bootstrap";
 3 | import { useHistory } from "react-router";
 4 | 
 5 | import NavbarAdmin from "../components/NavbarAdmin";
 6 | 
 7 | import dataCategory from "../fakeData/category";
 8 | 
 9 | // Import useMutation
10 | import { useMutation } from "react-query";
11 | 
12 | // Import API config
13 | import { API } from "../config/api";
14 | 
15 | export default function AddCategoryAdmin() {
16 |   console.clear();
17 | 
18 |   const title = "Category admin";
19 |   document.title = "DumbMerch | " + title;
20 | 
21 |   let history = useHistory();
22 |   let api = API();
23 | 
24 |   const [category, setCategory] = useState("");
25 | 
26 |   const handleChange = (e) => {
27 |     setCategory(e.target.value);
28 |   };
29 | 
30 |   const handleSubmit = useMutation(async (e) => {
31 |     try {
32 |       e.preventDefault();
33 | 
34 |       // Data body
35 |       const body = JSON.stringify({ name: category });
36 | 
37 |       // Configuration
38 |       const config = {
39 |         method: "POST",
40 |         headers: {
41 |           "Content-type": "application/json",
42 |         },
43 |         body,
44 |       };
45 |       console.log(config);
46 | 
47 |       // Insert category data
48 |       const response = await api.post("/category", config);
49 | 
50 |       console.log(response);
51 | 
52 |       history.push("/category-admin");
53 |     } catch (error) {
54 |       console.log(error);
55 |     }
56 |   });
57 | 
58 |   return (
59 |     <>
60 |       <NavbarAdmin title={title} />
61 |       <Container className="py-5">
62 |         <Row>
63 |           <Col xs="12">
64 |             <div className="text-header-category mb-4">Add Category</div>
65 |           </Col>
66 |           <Col xs="12">
67 |             <form onSubmit={(e) => handleSubmit.mutate(e)}>
68 |               <input
69 |                 onChange={handleChange}
70 |                 placeholder="category"
71 |                 value={category}
72 |                 name="category"
73 |                 className="input-edit-category mt-4"
74 |               />
75 |               <div className="d-grid gap-2 mt-4">
76 |                 <Button type="submit" variant="success" size="md">
77 |                   Add
78 |                 </Button>
79 |               </div>
80 |             </form>
81 |           </Col>
82 |         </Row>
83 |       </Container>
84 |     </>
85 |   );
86 | }
87 | 


--------------------------------------------------------------------------------
/src/pages/UpdateCategoryAdmin.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { Container, Row, Col, Button } from "react-bootstrap";
 3 | import { useParams, useHistory } from "react-router";
 4 | 
 5 | import NavbarAdmin from "../components/NavbarAdmin";
 6 | 
 7 | import dataCategory from "../fakeData/category";
 8 | 
 9 | // Import useQuery and useMutation
10 | import { useQuery, useMutation } from "react-query";
11 | 
12 | // Get API config
13 | import { API } from "../config/api";
14 | 
15 | export default function UpdateCategoryAdmin() {
16 |   const title = "Category admin";
17 |   document.title = "DumbMerch | " + title;
18 | 
19 |   let history = useHistory();
20 |   let api = API();
21 |   const { id } = useParams();
22 | 
23 |   const [category, setCategory] = useState({ name: "" });
24 | 
25 |   // Fetching category data by id from database
26 |   let { refetch } = useQuery("categoryCache", async () => {
27 |     const response = await api.get("/category/" + id);
28 |     setCategory({ name: response.data.name });
29 |   });
30 | 
31 |   const handleChange = (e) => {
32 |     setCategory({
33 |       ...category,
34 |       name: e.target.value,
35 |     });
36 |   };
37 | 
38 |   const handleSubmit = useMutation(async (e) => {
39 |     try {
40 |       e.preventDefault();
41 | 
42 |       // Data body
43 |       const body = JSON.stringify(category);
44 | 
45 |       // Configuration
46 |       const config = {
47 |         method: "PATCH",
48 |         headers: {
49 |           "Content-type": "application/json",
50 |         },
51 |         body,
52 |       };
53 | 
54 |       // Insert category data
55 |       const response = await api.patch("/category/" + id, config);
56 | 
57 |       history.push("/category-admin");
58 |     } catch (error) {
59 |       console.log(error);
60 |     }
61 |   });
62 | 
63 |   return (
64 |     <>
65 |       <NavbarAdmin title={title} />
66 |       <Container className="py-5">
67 |         <Row>
68 |           <Col xs="12">
69 |             <div className="text-header-category mb-4">Edit Category</div>
70 |           </Col>
71 |           <Col xs="12">
72 |             <form onSubmit={(e) => handleSubmit.mutate(e)}>
73 |               <input
74 |                 onChange={handleChange}
75 |                 value={category.name}
76 |                 placeholder="category"
77 |                 className="input-edit-category mt-4"
78 |               />
79 |               <div className="d-grid gap-2 mt-4">
80 |                 <Button type="submit" variant="success" size="md">
81 |                   Save
82 |                 </Button>
83 |               </div>
84 |             </form>
85 |           </Col>
86 |         </Row>
87 |       </Container>
88 |     </>
89 |   );
90 | }
91 | 


--------------------------------------------------------------------------------
/src/fakeData/product.js:
--------------------------------------------------------------------------------
 1 | const dataProduct = [
 2 |     {
 3 |         id: 1,
 4 |         name: 'Mouse',
 5 |         price: '500000',
 6 |         stock: 600,
 7 |         url: 'https://images.unsplash.com/photo-1605773527852-c546a8584ea3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80',
 8 |         desc: 'Mouse Wireless Alytech AL - Y5D, hadir dengan desain 3 tombol mouse yang ringan dan mudah dibawa. Mouse ini menggunakan frekuensi radio 2.4GHz (bekerja hingga jarak 10m) dan fitur sensor canggih optik pelacakan dengan penerima USB yang kecil. Mouse ini didukung oleh 1x baterai AA (hingga 12 bulan hidup baterai). mendukung sistem operasi Windows 7,8, 10 keatas, Mac OS X 10.8 atau yang lebih baru dan sistem operasi Chrome OS.'
 9 |     },
10 |     {
11 |         id: 2,
12 |         name: 'Keyboard',
13 |         price: '700000',
14 |         stock: 300,
15 |         url: 'https://images.unsplash.com/photo-1573643808568-4a3c26f3a06b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGtleWJvYXJkfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
16 |         desc: 'Mouse Wireless Alytech AL - Y5D, hadir dengan desain 3 tombol mouse yang ringan dan mudah dibawa. Mouse ini menggunakan frekuensi radio 2.4GHz (bekerja hingga jarak 10m) dan fitur sensor canggih optik pelacakan dengan penerima USB yang kecil. Mouse ini didukung oleh 1x baterai AA (hingga 12 bulan hidup baterai). mendukung sistem operasi Windows 7,8, 10 keatas, Mac OS X 10.8 atau yang lebih baru dan sistem operasi Chrome OS.'
17 |     },
18 |     {
19 |         id: 3,
20 |         name: 'Monitor',
21 |         price: '2300000',
22 |         stock: 250,
23 |         url: 'https://images.unsplash.com/photo-1619953942547-233eab5a70d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=658&q=80',
24 |         desc: 'Mouse Wireless Alytech AL - Y5D, hadir dengan desain 3 tombol mouse yang ringan dan mudah dibawa. Mouse ini menggunakan frekuensi radio 2.4GHz (bekerja hingga jarak 10m) dan fitur sensor canggih optik pelacakan dengan penerima USB yang kecil. Mouse ini didukung oleh 1x baterai AA (hingga 12 bulan hidup baterai). mendukung sistem operasi Windows 7,8, 10 keatas, Mac OS X 10.8 atau yang lebih baru dan sistem operasi Chrome OS.'
25 |     },
26 |     {
27 |         id: 4,
28 |         name: 'Drone',
29 |         price: '9500000',
30 |         stock: 25,
31 |         url: 'https://images.unsplash.com/photo-1555009306-9e3c5b6a66e3?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzJ8fGRyb25lfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
32 |         desc: 'Mouse Wireless Alytech AL - Y5D, hadir dengan desain 3 tombol mouse yang ringan dan mudah dibawa. Mouse ini menggunakan frekuensi radio 2.4GHz (bekerja hingga jarak 10m) dan fitur sensor canggih optik pelacakan dengan penerima USB yang kecil. Mouse ini didukung oleh 1x baterai AA (hingga 12 bulan hidup baterai). mendukung sistem operasi Windows 7,8, 10 keatas, Mac OS X 10.8 atau yang lebih baru dan sistem operasi Chrome OS.'
33 |     }
34 | ]
35 | 
36 | export default dataProduct


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { useContext, useState, useEffect } from "react";
 2 | import { Switch, Route, useHistory } from "react-router-dom";
 3 | import { UserContext } from "./context/userContext";
 4 | 
 5 | import Auth from "./pages/Auth";
 6 | import Product from "./pages/Product";
 7 | import DetailProduct from "./pages/DetailProduct";
 8 | import Complain from "./pages/Complain";
 9 | import Profile from "./pages/Profile";
10 | import ComplainAdmin from "./pages/ComplainAdmin";
11 | import CategoryAdmin from "./pages/CategoryAdmin";
12 | import ProductAdmin from "./pages/ProductAdmin";
13 | import UpdateCategoryAdmin from "./pages/UpdateCategoryAdmin";
14 | import AddCategoryAdmin from "./pages/AddCategoryAdmin";
15 | import AddProductAdmin from "./pages/AddProductAdmin";
16 | import UpdateProductAdmin from "./pages/UpdateProductAdmin";
17 | 
18 | import { API } from "./config/api";
19 | 
20 | function App() {
21 |   let api = API();
22 |   let history = useHistory();
23 |   const [state, dispatch] = useContext(UserContext);
24 | 
25 |   useEffect(() => {
26 |     // Redirect Auth
27 |     if (state.isLogin == false) {
28 |       history.push("/auth");
29 |     } else {
30 |       if (state.user.status == "admin") {
31 |         history.push("/complain-admin");
32 |         // history.push("/complain-admin");
33 |       } else if (state.user.status == "customer") {
34 |         history.push("/");
35 |       }
36 |     }
37 |   }, [state]);
38 | 
39 |   const checkUser = async () => {
40 |     try {
41 |       const config = {
42 |         method: "GET",
43 |         headers: {
44 |           Authorization: "Basic " + localStorage.token,
45 |         },
46 |       };
47 |       const response = await api.get("/check-auth", config);
48 | 
49 |       // If the token incorrect
50 |       if (response.status === "failed") {
51 |         return dispatch({
52 |           type: "AUTH_ERROR",
53 |         });
54 |       }
55 | 
56 |       // // Get user data
57 |       let payload = response.data.user;
58 |       // // Get token from local storage
59 |       payload.token = localStorage.token;
60 | 
61 |       // // Send data to useContext
62 |       dispatch({
63 |         type: "USER_SUCCESS",
64 |         payload,
65 |       });
66 |     } catch (error) {
67 |       console.log(error);
68 |     }
69 |   };
70 | 
71 |   useEffect(() => {
72 |     checkUser();
73 |   }, []);
74 | 
75 |   return (
76 |     <Switch>
77 |       <Route exact path="/" component={Product} />
78 |       <Route path="/auth" component={Auth} />
79 |       <Route path="/product/:id" component={DetailProduct} />
80 |       <Route path="/complain" component={Complain} />
81 |       <Route path="/profile" component={Profile} />
82 |       <Route path="/complain-admin" component={ComplainAdmin} />
83 |       <Route path="/category-admin" component={CategoryAdmin} />
84 |       <Route path="/edit-category/:id" component={UpdateCategoryAdmin} />
85 |       <Route path="/add-category" component={AddCategoryAdmin} />
86 |       <Route path="/product-admin" component={ProductAdmin} />
87 |       <Route path="/add-product" component={AddProductAdmin} />
88 |       <Route path="/edit-product/:id" component={UpdateProductAdmin} />
89 |     </Switch>
90 |   );
91 | }
92 | 
93 | export default App;
94 | 


--------------------------------------------------------------------------------
/src/components/auth/Login.js:
--------------------------------------------------------------------------------
  1 | import { useContext, useState } from "react";
  2 | import { UserContext } from "../../context/userContext";
  3 | import { useHistory } from "react-router-dom";
  4 | import { Alert } from "react-bootstrap";
  5 | 
  6 | // Import useMutation
  7 | import { useMutation } from "react-query";
  8 | 
  9 | // Import API config
 10 | import { API } from "../../config/api";
 11 | 
 12 | export default function Login() {
 13 |   const title = "Login";
 14 |   document.title = "DumbMerch | " + title;
 15 | 
 16 |   let history = useHistory();
 17 |   let api = API();
 18 | 
 19 |   const [state, dispatch] = useContext(UserContext);
 20 | 
 21 |   const [message, setMessage] = useState(null);
 22 |   const [form, setForm] = useState({
 23 |     email: "",
 24 |     password: "",
 25 |   });
 26 | 
 27 |   const { email, password } = form;
 28 | 
 29 |   const handleChange = (e) => {
 30 |     setForm({
 31 |       ...form,
 32 |       [e.target.name]: e.target.value,
 33 |     });
 34 |   };
 35 | 
 36 |   const handleSubmit = useMutation(async (e) => {
 37 |     try {
 38 |       e.preventDefault();
 39 | 
 40 |       // Data body
 41 |       const body = JSON.stringify(form);
 42 | 
 43 |       // Configuration
 44 |       const config = {
 45 |         method: "POST",
 46 |         headers: {
 47 |           "Content-Type": "application/json",
 48 |         },
 49 |         body: body,
 50 |       };
 51 | 
 52 |       // Insert data for login process
 53 |       const response = await api.post("/login", config);
 54 | 
 55 |       console.log(response);
 56 | 
 57 |       // Checking process
 58 |       if (response.status == "success") {
 59 |         // Send data to useContext
 60 |         dispatch({
 61 |           type: "LOGIN_SUCCESS",
 62 |           payload: response.data,
 63 |         });
 64 | 
 65 |         // Status check
 66 |         if (response.data.status == "admin") {
 67 |           history.push("/complain-admin");
 68 |         } else {
 69 |           history.push("/");
 70 |         }
 71 | 
 72 |         const alert = (
 73 |           <Alert variant="success" className="py-1">
 74 |             Login success
 75 |           </Alert>
 76 |         );
 77 |         setMessage(alert);
 78 |       } else {
 79 |         const alert = (
 80 |           <Alert variant="danger" className="py-1">
 81 |             Login failed
 82 |           </Alert>
 83 |         );
 84 |         setMessage(alert);
 85 |       }
 86 |     } catch (error) {
 87 |       const alert = (
 88 |         <Alert variant="danger" className="py-1">
 89 |           Login failed
 90 |         </Alert>
 91 |       );
 92 |       setMessage(alert);
 93 |       console.log(error);
 94 |     }
 95 |   });
 96 | 
 97 |   return (
 98 |     <div className="d-flex justify-content-center">
 99 |       <div className="card-auth p-4">
100 |         <div
101 |           style={{ fontSize: "36px", lineHeight: "49px", fontWeight: "700" }}
102 |           className="mb-3"
103 |         >
104 |           Login
105 |         </div>
106 |         {message && message}
107 |         <form onSubmit={(e) => handleSubmit.mutate(e)}>
108 |           <div className="mt-3 form">
109 |             <input
110 |               type="email"
111 |               placeholder="Email"
112 |               value={email}
113 |               name="email"
114 |               onChange={handleChange}
115 |               className="px-3 py-2 mt-3"
116 |             />
117 |             <input
118 |               type="password"
119 |               placeholder="Password"
120 |               value={password}
121 |               name="password"
122 |               onChange={handleChange}
123 |               className="px-3 py-2 mt-3"
124 |             />
125 |           </div>
126 |           <div className="d-grid gap-2 mt-5">
127 |             <button className="btn btn-login">Login</button>
128 |           </div>
129 |         </form>
130 |       </div>
131 |     </div>
132 |   );
133 | }
134 | 


--------------------------------------------------------------------------------
/src/components/auth/Register.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState } from "react";
  2 | import { UserContext } from "../../context/userContext";
  3 | import { useHistory } from "react-router-dom";
  4 | import { Alert } from "react-bootstrap";
  5 | 
  6 | import { useMutation } from "react-query";
  7 | 
  8 | import { API } from "../../config/api";
  9 | 
 10 | export default function Register() {
 11 |   const title = "Register";
 12 |   document.title = "DumbMerch | " + title;
 13 | 
 14 |   let history = useHistory();
 15 |   let api = API();
 16 | 
 17 |   const [state, dispatch] = useContext(UserContext);
 18 | 
 19 |   const [message, setMessage] = useState(null);
 20 |   const [form, setForm] = useState({
 21 |     name: "",
 22 |     email: "",
 23 |     password: "",
 24 |   });
 25 | 
 26 |   const { name, email, password } = form;
 27 | 
 28 |   const handleChange = (e) => {
 29 |     setForm({
 30 |       ...form,
 31 |       [e.target.name]: e.target.value,
 32 |     });
 33 |   };
 34 | 
 35 |   const handleSubmit = useMutation(async (e) => {
 36 |     try {
 37 |       e.preventDefault();
 38 | 
 39 |       // Data body
 40 |       const body = JSON.stringify(form);
 41 | 
 42 |       // Configuration Content-type
 43 |       const config = {
 44 |         method: "POST",
 45 |         headers: {
 46 |           "Content-Type": "application/json",
 47 |         },
 48 |         body: body,
 49 |       };
 50 | 
 51 |       // Insert data user to database
 52 |       const response = await api.post("/register", config);
 53 | 
 54 |       console.log(response);
 55 | 
 56 |       // Notification
 57 |       if (response.status == "success") {
 58 |         const alert = (
 59 |           <Alert variant="success" className="py-1">
 60 |             Success
 61 |           </Alert>
 62 |         );
 63 |         setMessage(alert);
 64 |         setForm({
 65 |           name: "",
 66 |           email: "",
 67 |           password: "",
 68 |         });
 69 |       } else {
 70 |         const alert = (
 71 |           <Alert variant="danger" className="py-1">
 72 |             Failed
 73 |           </Alert>
 74 |         );
 75 |         setMessage(alert);
 76 |       }
 77 |     } catch (error) {
 78 |       const alert = (
 79 |         <Alert variant="danger" className="py-1">
 80 |           Failed
 81 |         </Alert>
 82 |       );
 83 |       setMessage(alert);
 84 |       console.log(error);
 85 |     }
 86 |   });
 87 | 
 88 |   return (
 89 |     <div className="d-flex justify-content-center">
 90 |       <div className="card-auth p-4">
 91 |         <div
 92 |           style={{ fontSize: "36px", lineHeight: "49px", fontWeight: "700" }}
 93 |           className="mb-2"
 94 |         >
 95 |           Register
 96 |         </div>
 97 |         {message && message}
 98 |         <form onSubmit={(e) => handleSubmit.mutate(e)}>
 99 |           <div className="mt-3 form">
100 |             <input
101 |               type="text"
102 |               placeholder="Name"
103 |               value={name}
104 |               name="name"
105 |               onChange={handleChange}
106 |               className="px-3 py-2"
107 |             />
108 |             <input
109 |               type="email"
110 |               placeholder="Email"
111 |               value={email}
112 |               name="email"
113 |               onChange={handleChange}
114 |               className="px-3 py-2 mt-3"
115 |             />
116 |             <input
117 |               type="password"
118 |               placeholder="Password"
119 |               value={password}
120 |               name="password"
121 |               onChange={handleChange}
122 |               className="px-3 py-2 mt-3"
123 |             />
124 |           </div>
125 |           <div className="d-grid gap-2 mt-5">
126 |             <button type="submit" className="btn btn-login">
127 |               Register
128 |             </button>
129 |           </div>
130 |         </form>
131 |       </div>
132 |     </div>
133 |   );
134 | }
135 | 


--------------------------------------------------------------------------------
/src/pages/DetailProduct.js:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { useParams, useHistory } from "react-router-dom";
  3 | import { Container, Row, Col } from "react-bootstrap";
  4 | import convertRupiah from "rupiah-format";
  5 | 
  6 | import Navbar from "../components/Navbar";
  7 | 
  8 | import dataProduct from "../fakeData/product";
  9 | 
 10 | // Import useQuery and useMutation
 11 | import { useQuery, useMutation } from "react-query";
 12 | 
 13 | // API config
 14 | import { API } from "../config/api";
 15 | 
 16 | export default function DetailProduct() {
 17 |   let history = useHistory();
 18 |   let { id } = useParams();
 19 |   let api = API();
 20 | 
 21 |   // Fetching product data from database
 22 |   let { data: product, refetch } = useQuery("Cache", async () => {
 23 |     const config = {
 24 |       method: "GET",
 25 |       headers: {
 26 |         Authorization: "Basic " + localStorage.token,
 27 |       },
 28 |     };
 29 |     const response = await api.get("/product/" + id, config);
 30 |     return response.data;
 31 |   });
 32 | 
 33 |   useEffect(() => {
 34 |     //change this to the script source you want to load, for example this is snap.js sandbox env
 35 |     const midtransScriptUrl = "https://app.sandbox.midtrans.com/snap/snap.js";
 36 |     //change this according to your client-key
 37 |     const myMidtransClientKey = "SB-Mid-client-omo-P8HmHl_eNjFP";
 38 | 
 39 |     let scriptTag = document.createElement("script");
 40 |     scriptTag.src = midtransScriptUrl;
 41 |     // optional if you want to set script attribute
 42 |     // for example snap.js have data-client-key attribute
 43 |     scriptTag.setAttribute("data-client-key", myMidtransClientKey);
 44 | 
 45 |     document.body.appendChild(scriptTag);
 46 |     return () => {
 47 |       document.body.removeChild(scriptTag);
 48 |     };
 49 |   }, []);
 50 | 
 51 |   const handleBuy = useMutation(async () => {
 52 |     try {
 53 |       // Get data from product
 54 |       const data = {
 55 |         idProduct: product.id,
 56 |         idSeller: product.user.id,
 57 |         price: product.price,
 58 |       };
 59 | 
 60 |       // Data body
 61 |       const body = JSON.stringify(data);
 62 | 
 63 |       // Configuration
 64 |       const config = {
 65 |         method: "POST",
 66 |         headers: {
 67 |           Authorization: "Basic " + localStorage.token,
 68 |           "Content-type": "application/json",
 69 |         },
 70 |         body,
 71 |       };
 72 | 
 73 |       // Insert transaction data
 74 |       const response = await api.post("/transaction", config);
 75 |       console.log(response);
 76 |       const token = response.payment.token;
 77 | 
 78 |       window.snap.pay(token, {
 79 |         onSuccess: function (result) {
 80 |           console.log(result);
 81 |           history.push("/profile");
 82 |         },
 83 |         onPending: function (result) {
 84 |           console.log(result);
 85 |           history.push("/profile");
 86 |         },
 87 |         onError: function (result) {
 88 |           console.log(result);
 89 |         },
 90 |         onClose: function () {
 91 |           alert("you closed the popup without finishing the payment");
 92 |         },
 93 |       });
 94 |     } catch (error) {
 95 |       console.log(error);
 96 |     }
 97 |   });
 98 | 
 99 |   return (
100 |     <div>
101 |       <Navbar />
102 |       <Container className="py-5">
103 |         <Row>
104 |           <Col md="2"></Col>
105 |           <Col md="3">
106 |             <img src={product?.image} className="img-fluid" />
107 |           </Col>
108 |           <Col md="5">
109 |             <div className="text-header-product-detail">{product?.name}</div>
110 |             <div className="text-content-product-detail">
111 |               Stock : {product?.qty}
112 |             </div>
113 |             <p className="text-content-product-detail mt-4">{product?.desc}</p>
114 |             <div className="text-price-product-detail text-end mt-4">
115 |               {convertRupiah.convert(product?.price)}
116 |             </div>
117 |             <div className="d-grid gap-2 mt-5">
118 |               <button
119 |                 onClick={() => handleBuy.mutate()}
120 |                 className="btn btn-buy"
121 |               >
122 |                 Buy
123 |               </button>
124 |             </div>
125 |           </Col>
126 |         </Row>
127 |       </Container>
128 |     </div>
129 |   );
130 | }
131 | 


--------------------------------------------------------------------------------
/src/pages/Complain.js:
--------------------------------------------------------------------------------
  1 | // import useContext hook
  2 | import React, { useState, useEffect, useContext } from "react";
  3 | import { Container, Row, Col } from "react-bootstrap";
  4 | 
  5 | import Navbar from "../components/Navbar";
  6 | 
  7 | import Contact from "../components/complain/Contact";
  8 | 
  9 | // import chat component
 10 | import Chat from "../components/complain/Chat";
 11 | 
 12 | // import user context
 13 | import { UserContext } from "../context/userContext";
 14 | 
 15 | // import socket.io-client
 16 | import { io } from "socket.io-client";
 17 | 
 18 | // initial variable outside socket
 19 | let socket;
 20 | export default function Complain() {
 21 |   const [contact, setContact] = useState(null);
 22 |   const [contacts, setContacts] = useState([]);
 23 |   // create messages state
 24 |   const [messages, setMessages] = useState([]);
 25 | 
 26 |   const title = "Complain admin";
 27 |   document.title = "DumbMerch | " + title;
 28 | 
 29 |   // consume user context
 30 |   const [state] = useContext(UserContext);
 31 | 
 32 |   useEffect(() => {
 33 |     socket = io("http://localhost:5000", {
 34 |       auth: {
 35 |         token: localStorage.getItem("token"),
 36 |       },
 37 |       query: {
 38 |         id: state.user.id,
 39 |       },
 40 |     });
 41 | 
 42 |     // define corresponding socket listener
 43 |     socket.on("new message", () => {
 44 |       console.log("contact", contact);
 45 |       console.log("triggered", contact?.id);
 46 |       socket.emit("load messages", contact?.id);
 47 |     });
 48 | 
 49 |     // listen error sent from server
 50 |     socket.on("connect_error", (err) => {
 51 |       console.error(err.message); // not authorized
 52 |     });
 53 |     loadContact();
 54 |     loadMessages();
 55 | 
 56 |     return () => {
 57 |       socket.disconnect();
 58 |     };
 59 |   }, [messages]);
 60 | 
 61 |   const loadContact = () => {
 62 |     // emit event load admin contact
 63 |     socket.emit("load admin contact");
 64 |     // listen event to get admin contact
 65 |     socket.on("admin contact", async (data) => {
 66 |       // manipulate data to add message property with the newest message
 67 |       const dataContact = {
 68 |         ...data,
 69 |         message:
 70 |           messages.length > 0
 71 |             ? messages[messages.length - 1].message
 72 |             : "Click here to start message",
 73 |       };
 74 |       setContacts([dataContact]);
 75 |     });
 76 |   };
 77 | 
 78 |   // used for active style when click contact
 79 |   const onClickContact = (data) => {
 80 |     setContact(data);
 81 |     // emit event load messages
 82 |     socket.emit("load messages", data.id);
 83 |   };
 84 | 
 85 |   const loadMessages = (value) => {
 86 |     // define listener on event "messages"
 87 |     socket.on("messages", async (data) => {
 88 |       // get data messages
 89 |       if (data.length > 0) {
 90 |         const dataMessages = data.map((item) => ({
 91 |           idSender: item.sender.id,
 92 |           message: item.message,
 93 |         }));
 94 |         console.log(dataMessages);
 95 |         setMessages(dataMessages);
 96 |       }
 97 |       const chatMessagesElm = document.getElementById("chat-messages");
 98 |       chatMessagesElm.scrollTop = chatMessagesElm?.scrollHeight;
 99 |     });
100 |   };
101 |   const onSendMessage = (e) => {
102 |     // listen only enter key event press
103 |     if (e.key === "Enter") {
104 |       const data = {
105 |         idRecipient: contact.id,
106 |         message: e.target.value,
107 |       };
108 | 
109 |       //emit event send message
110 |       socket.emit("send message", data);
111 |       e.target.value = "";
112 |     }
113 |   };
114 | 
115 |   return (
116 |     <>
117 |       <Navbar title={title} />
118 |       <Container fluid style={{ height: "89.5vh" }}>
119 |         <Row>
120 |           <Col
121 |             md={3}
122 |             style={{ height: "89.5vh" }}
123 |             className="px-3 border-end border-dark overflow-auto"
124 |           >
125 |             <Contact
126 |               dataContact={contacts}
127 |               clickContact={onClickContact}
128 |               contact={contact}
129 |             />
130 |           </Col>
131 |           <Col md={9} style={{ maxHeight: "89.5vh" }} className="px-0">
132 |             <Chat
133 |               contact={contact}
134 |               messages={messages}
135 |               user={state.user}
136 |               sendMessage={onSendMessage}
137 |             />
138 |           </Col>
139 |         </Row>
140 |       </Container>
141 |     </>
142 |   );
143 | }
144 | 


--------------------------------------------------------------------------------
/src/pages/ComplainAdmin.js:
--------------------------------------------------------------------------------
  1 | // import useContext hook
  2 | import React, { useState, useEffect, useContext } from 'react'
  3 | import { Container, Row, Col } from 'react-bootstrap'
  4 | 
  5 | import NavbarAdmin from '../components/NavbarAdmin'
  6 | 
  7 | import Contact from '../components/complain/Contact'
  8 | // import chat component 
  9 | import Chat from '../components/complain/Chat'
 10 | 
 11 | // import user context
 12 | import { UserContext } from '../context/userContext'
 13 | 
 14 | // import socket.io-client 
 15 | import {io} from 'socket.io-client'
 16 | 
 17 | // initial variable outside socket
 18 | let socket
 19 | export default function ComplainAdmin() {
 20 |     const [contact, setContact] = useState(null)
 21 |     const [contacts, setContacts] = useState([])
 22 |     // create messages state
 23 |     const [messages, setMessages] = useState([])
 24 | 
 25 |     const title = "Complain admin"
 26 |     document.title = 'DumbMerch | ' + title
 27 | 
 28 |     // consume user context
 29 |     const [state] = useContext(UserContext)
 30 | 
 31 |     useEffect(() =>{
 32 |         socket = io('http://localhost:5000', {
 33 |             auth: {
 34 |                 token: localStorage.getItem('token')
 35 |             },
 36 |             query: {
 37 |                 id: state.user.id
 38 |             }
 39 |         })
 40 | 
 41 |         // define listener for every updated message
 42 |         socket.on("new message", () => {
 43 |             console.log("contact", contact)
 44 |             socket.emit("load messages", contact?.id)
 45 |         })
 46 | 
 47 |         loadContacts()
 48 |         loadMessages()
 49 | 
 50 |         return () => {
 51 |             socket.disconnect()
 52 |         }
 53 |     }, [messages])
 54 | 
 55 |     const loadContacts = () => {
 56 |         socket.emit("load customer contacts")
 57 |         socket.on("customer contacts", (data) => {
 58 |             // filter just customers which have sent a message
 59 |             let dataContacts = data.filter(item => (item.status !== "admin") && (item.recipientMessage.length > 0 || item.senderMessage.length > 0))
 60 |             
 61 |             // manipulate customers to add message property with the newest message
 62 |             dataContacts = dataContacts.map((item) => ({
 63 |                 ...item,
 64 |                 message: item.senderMessage.length > 0 ? item.senderMessage[item.senderMessage.length -1].message : "Click here to start message"
 65 |             }))
 66 |             setContacts(dataContacts)
 67 |         })
 68 |     }
 69 | 
 70 |     // used for active style when click contact
 71 |     const onClickContact = (data) => {
 72 |         setContact(data)
 73 |         // emit event load messages
 74 |         socket.emit("load messages", data.id)
 75 |     }
 76 | 
 77 |     const loadMessages = (value) => {
 78 |         // define listener on event "messages"
 79 |         socket.on("messages", (data) => {
 80 |             // get data messages
 81 |             if (data.length > 0) {
 82 |                 const dataMessages = data.map((item) => ({
 83 |                     idSender: item.sender.id,
 84 |                     message: item.message,
 85 |                 }))
 86 |                 setMessages(dataMessages)
 87 |             }
 88 |             loadContacts()
 89 |             const chatMessagesElm = document.getElementById("chat-messages");
 90 |             chatMessagesElm.scrollTop = chatMessagesElm?.scrollHeight;
 91 |         })
 92 |     }
 93 | 
 94 |     const onSendMessage = (e) => {
 95 |         // listen only enter key event press
 96 |         if(e.key === 'Enter') {
 97 |             const data = {
 98 |                 idRecipient: contact.id,
 99 |                 message: e.target.value
100 |             }
101 | 
102 |             //emit event send message
103 |             socket.emit("send message", data)
104 |             e.target.value = ""
105 |         }
106 |     }
107 | 
108 |     return (
109 |         <>
110 |             <NavbarAdmin title={title} />
111 |             <Container fluid style={{height: '89.5vh'}}>
112 |                 <Row>
113 |                     <Col md={3} style={{height: '89.5vh'}} className="px-3 border-end border-dark overflow-auto">
114 |                         <Contact dataContact={contacts} clickContact={onClickContact} contact={contact}/>
115 |                     </Col>
116 |                     <Col md={9} style={{maxHeight: '89.5vh'}} className="px-0">
117 |                         <Chat contact={contact} messages={messages} user={state.user} sendMessage={onSendMessage}/>
118 |                     </Col>
119 |                 </Row>
120 |             </Container>
121 |         </>
122 |     )
123 | }
124 | 


--------------------------------------------------------------------------------
/src/pages/CategoryAdmin.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Container, Row, Col, Table, Button } from "react-bootstrap";
  3 | import { useHistory } from "react-router";
  4 | 
  5 | import NavbarAdmin from "../components/NavbarAdmin";
  6 | import DeleteData from "../components/modal/DeleteData";
  7 | 
  8 | import dataCategory from "../fakeData/category";
  9 | 
 10 | import imgEmpty from "../assets/empty.svg";
 11 | 
 12 | // Import useQuery and useMutation
 13 | import { useQuery, useMutation } from "react-query";
 14 | 
 15 | // Get API config
 16 | import { API } from "../config/api";
 17 | 
 18 | export default function CategoryAdmin() {
 19 |   const title = "Category admin";
 20 |   document.title = "DumbMerch | " + title;
 21 | 
 22 |   let history = useHistory();
 23 |   let api = API();
 24 | 
 25 |   // Variabel for delete category data
 26 |   const [idDelete, setIdDelete] = useState(null);
 27 |   const [confirmDelete, setConfirmDelete] = useState(null);
 28 | 
 29 |   const [show, setShow] = useState(false);
 30 |   const handleClose = () => setShow(false);
 31 |   const handleShow = () => setShow(true);
 32 | 
 33 |   // Fetching categories data from database
 34 |   let { data: categories, refetch } = useQuery("categoriesCache", async () => {
 35 |     const response = await api.get("/categories");
 36 |     return response.data;
 37 |   });
 38 | 
 39 |   const handleEdit = (id) => {
 40 |     history.push(`edit-category/${id}`);
 41 |   };
 42 | 
 43 |   // For get id category & show modal confirm delete data
 44 |   const handleDelete = (id) => {
 45 |     setIdDelete(id);
 46 |     handleShow();
 47 |   };
 48 | 
 49 |   // If confirm is true, execute delete data
 50 |   const deleteById = useMutation(async (id) => {
 51 |     try {
 52 |       const config = {
 53 |         method: "DELETE",
 54 |         headers: {
 55 |           Authorization: "Basic " + localStorage.token,
 56 |         },
 57 |       };
 58 |       await api.delete(`/category/${id}`, config);
 59 |       refetch();
 60 |     } catch (error) {
 61 |       console.log(error);
 62 |     }
 63 |   });
 64 | 
 65 |   useEffect(() => {
 66 |     if (confirmDelete) {
 67 |       // Close modal confirm delete data
 68 |       handleClose();
 69 |       // execute delete data by id function
 70 |       deleteById.mutate(idDelete);
 71 |       setConfirmDelete(null);
 72 |     }
 73 |   }, [confirmDelete]);
 74 | 
 75 |   const addCategory = () => {
 76 |     history.push("/add-category");
 77 |   };
 78 | 
 79 |   return (
 80 |     <>
 81 |       <NavbarAdmin title={title} />
 82 | 
 83 |       <Container className="py-5">
 84 |         <Row>
 85 |           <Col>
 86 |             <div className="text-header-category mb-4">List Category</div>
 87 |           </Col>
 88 |           <Col className="text-end">
 89 |             <Button
 90 |               onClick={addCategory}
 91 |               className="btn-dark"
 92 |               style={{ width: "100px" }}
 93 |             >
 94 |               Add
 95 |             </Button>
 96 |           </Col>
 97 |           <Col xs="12">
 98 |             {categories?.length != 0 ? (
 99 |               <Table striped hover size="lg" variant="dark">
100 |                 <thead>
101 |                   <tr>
102 |                     <th>No</th>
103 |                     <th>Category Name</th>
104 |                     <th>Action</th>
105 |                   </tr>
106 |                 </thead>
107 |                 <tbody>
108 |                   {categories?.map((item, index) => (
109 |                     <tr>
110 |                       <td width="10%" className="align-middle">
111 |                         {index + 1}
112 |                       </td>
113 |                       <td width="60%" className="align-middle">
114 |                         {item.name}
115 |                       </td>
116 |                       <td width="30%">
117 |                         <Button
118 |                           onClick={() => {
119 |                             handleEdit(item.id);
120 |                           }}
121 |                           className="btn-sm btn-success me-2"
122 |                           style={{ width: "135px" }}
123 |                         >
124 |                           Edit
125 |                         </Button>
126 |                         <Button
127 |                           onClick={() => {
128 |                             handleDelete(item.id);
129 |                           }}
130 |                           className="btn-sm btn-danger"
131 |                           style={{ width: "135px" }}
132 |                         >
133 |                           Delete
134 |                         </Button>
135 |                       </td>
136 |                     </tr>
137 |                   ))}
138 |                 </tbody>
139 |               </Table>
140 |             ) : (
141 |               <div className="text-center pt-5">
142 |                 <img
143 |                   src={imgEmpty}
144 |                   className="img-fluid"
145 |                   style={{ width: "40%" }}
146 |                 />
147 |                 <div className="mt-3">No data category</div>
148 |               </div>
149 |             )}
150 |           </Col>
151 |         </Row>
152 |       </Container>
153 |       <DeleteData
154 |         setConfirmDelete={setConfirmDelete}
155 |         show={show}
156 |         handleClose={handleClose}
157 |       />
158 |     </>
159 |   );
160 | }
161 | 


--------------------------------------------------------------------------------
/src/pages/AddProductAdmin.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Container, Row, Col, Button } from "react-bootstrap";
  3 | import { useHistory } from "react-router";
  4 | 
  5 | import NavbarAdmin from "../components/NavbarAdmin";
  6 | 
  7 | // Import useQuery & useMutation
  8 | import { useQuery, useMutation } from "react-query";
  9 | 
 10 | // Import API config
 11 | import { API } from "../config/api";
 12 | 
 13 | export default function AddProductAdmin() {
 14 |   const title = "Product admin";
 15 |   document.title = "DumbMerch | " + title;
 16 | 
 17 |   let history = useHistory();
 18 |   let api = API();
 19 | 
 20 |   // const [categories, setCategories] = useState([]); //Store all category data
 21 |   const [categoryId, setCategoryId] = useState([]); //Save the selected category id
 22 |   const [preview, setPreview] = useState(null); //For image preview
 23 |   const [form, setForm] = useState({
 24 |     image: "",
 25 |     name: "",
 26 |     desc: "",
 27 |     price: "",
 28 |     qty: "",
 29 |   }); //Store product data
 30 | 
 31 |   // Fetching category data
 32 |   let { data: categories, refetch } = useQuery("categoriesCache", async () => {
 33 |     const response = await api.get("/categories");
 34 |     return response.data;
 35 |   });
 36 | 
 37 |   // For handle if category selected
 38 |   const handleChangeCategoryId = (e) => {
 39 |     const id = e.target.value;
 40 |     const checked = e.target.checked;
 41 | 
 42 |     if (checked == true) {
 43 |       // Save category id if checked
 44 |       setCategoryId([...categoryId, parseInt(id)]);
 45 |     } else {
 46 |       // Delete category id from variable if unchecked
 47 |       let newCategoryId = categoryId.filter((categoryIdItem) => {
 48 |         return categoryIdItem != id;
 49 |       });
 50 |       setCategoryId(newCategoryId);
 51 |     }
 52 |   };
 53 | 
 54 |   // Handle change data on form
 55 |   const handleChange = (e) => {
 56 |     setForm({
 57 |       ...form,
 58 |       [e.target.name]:
 59 |         e.target.type === "file" ? e.target.files : e.target.value,
 60 |     });
 61 | 
 62 |     // Create image url for preview
 63 |     if (e.target.type === "file") {
 64 |       let url = URL.createObjectURL(e.target.files[0]);
 65 |       setPreview(url);
 66 |     }
 67 |   };
 68 | 
 69 |   const handleSubmit = useMutation(async (e) => {
 70 |     try {
 71 |       e.preventDefault();
 72 | 
 73 |       // Store data with FormData as object
 74 |       const formData = new FormData();
 75 |       formData.set("image", form?.image[0], form?.image[0]?.name);
 76 |       formData.set("name", form.name);
 77 |       formData.set("desc", form.desc);
 78 |       formData.set("price", form.price);
 79 |       formData.set("qty", form.qty);
 80 |       formData.set("categoryId", categoryId);
 81 | 
 82 |       // Configuration
 83 |       const config = {
 84 |         method: "POST",
 85 |         headers: {
 86 |           Authorization: "Basic " + localStorage.token,
 87 |         },
 88 |         body: formData,
 89 |       };
 90 | 
 91 |       // Insert product data
 92 |       const response = await api.post("/product", config);
 93 | 
 94 |       history.push("/product-admin");
 95 |     } catch (error) {
 96 |       console.log(error);
 97 |     }
 98 |   });
 99 | 
100 |   return (
101 |     <>
102 |       <NavbarAdmin title={title} />
103 |       <Container className="py-5">
104 |         <Row>
105 |           <Col xs="12">
106 |             <div className="text-header-category mb-4">Add Product</div>
107 |           </Col>
108 |           <Col xs="12">
109 |             <form onSubmit={(e) => handleSubmit.mutate(e)}>
110 |               {preview && (
111 |                 <div>
112 |                   <img
113 |                     src={preview}
114 |                     style={{
115 |                       maxWidth: "150px",
116 |                       maxHeight: "150px",
117 |                       objectFit: "cover",
118 |                     }}
119 |                   />
120 |                 </div>
121 |               )}
122 |               <input
123 |                 type="file"
124 |                 id="upload"
125 |                 name="image"
126 |                 hidden
127 |                 onChange={handleChange}
128 |               />
129 |               <label for="upload" className="label-file-add-product">
130 |                 Upload file
131 |               </label>
132 |               <input
133 |                 type="text"
134 |                 placeholder="Product Name"
135 |                 name="name"
136 |                 onChange={handleChange}
137 |                 className="input-edit-category mt-4"
138 |               />
139 |               <textarea
140 |                 placeholder="Product Desc"
141 |                 name="desc"
142 |                 onChange={handleChange}
143 |                 className="input-edit-category mt-4"
144 |                 style={{ height: "130px" }}
145 |               ></textarea>
146 |               <input
147 |                 type="number"
148 |                 placeholder="Price (Rp.)"
149 |                 name="price"
150 |                 onChange={handleChange}
151 |                 className="input-edit-category mt-4"
152 |               />
153 |               <input
154 |                 type="number"
155 |                 placeholder="Stock"
156 |                 name="qty"
157 |                 onChange={handleChange}
158 |                 className="input-edit-category mt-4"
159 |               />
160 |               <div className="card-form-input mt-4 px-2 py-1 pb-2">
161 |                 <div
162 |                   className="text-secondary mb-1"
163 |                   style={{ fontSize: "15px" }}
164 |                 >
165 |                   Category
166 |                 </div>
167 |                 {categories?.map((item) => (
168 |                   <label class="checkbox-inline me-4">
169 |                     <input
170 |                       type="checkbox"
171 |                       value={item.id}
172 |                       onClick={handleChangeCategoryId}
173 |                     />{" "}
174 |                     {item.name}
175 |                   </label>
176 |                 ))}
177 |               </div>
178 | 
179 |               <div className="d-grid gap-2 mt-4">
180 |                 <Button type="submit" variant="success" size="md">
181 |                   Add
182 |                 </Button>
183 |               </div>
184 |             </form>
185 |           </Col>
186 |         </Row>
187 |       </Container>
188 |     </>
189 |   );
190 | }
191 | 


--------------------------------------------------------------------------------
/src/pages/Profile.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useState, useEffect } from "react";
  2 | import { Container, Row, Col } from "react-bootstrap";
  3 | import dateFormat from "dateformat";
  4 | import convertRupiah from "rupiah-format";
  5 | 
  6 | import Navbar from "../components/Navbar";
  7 | 
  8 | import imgDumbMerch from "../assets/DumbMerch.png";
  9 | 
 10 | import { UserContext } from "../context/userContext";
 11 | import dataTransaction from "../fakeData/transaction";
 12 | 
 13 | import imgBlank from "../assets/blank-profile.png";
 14 | 
 15 | // Import useQuery
 16 | import { useQuery } from "react-query";
 17 | 
 18 | // API config
 19 | import { API } from "../config/api";
 20 | 
 21 | export default function Profile() {
 22 |   const title = "Profile";
 23 |   document.title = "DumbMerch | " + title;
 24 | 
 25 |   let api = API();
 26 | 
 27 |   const [state] = useContext(UserContext);
 28 | 
 29 |   // Fetching profile data from database
 30 |   let { data: profile, refetch: profileRefetch } = useQuery(
 31 |     "profileCache",
 32 |     async () => {
 33 |       const config = {
 34 |         method: "GET",
 35 |         headers: {
 36 |           Authorization: "Basic " + localStorage.token,
 37 |         },
 38 |       };
 39 |       const response = await api.get("/profile", config);
 40 |       return response.data;
 41 |     }
 42 |   );
 43 | 
 44 |   // Fetching transactions data from database
 45 |   let { data: transactions, refetch: transactionsRefetch } = useQuery(
 46 |     "transactionsCache",
 47 |     async () => {
 48 |       const config = {
 49 |         method: "GET",
 50 |         headers: {
 51 |           Authorization: "Basic " + localStorage.token,
 52 |         },
 53 |       };
 54 |       const response = await api.get("/transactions", config);
 55 |       return response.data;
 56 |     }
 57 |   );
 58 | 
 59 |   return (
 60 |     <>
 61 |       <Navbar title={title} />
 62 |       <Container className="my-5">
 63 |         <Row>
 64 |           <Col md="6">
 65 |             <div className="text-header-product mb-4">My Profile</div>
 66 |             <Row>
 67 |               <Col md="6">
 68 |                 <img
 69 |                   src={profile?.image ? profile.image : imgBlank}
 70 |                   className="img-fluid rounded"
 71 |                   alt="profile"
 72 |                 />
 73 |               </Col>
 74 |               <Col md="6">
 75 |                 <div className="profile-header">Name</div>
 76 |                 <div className="profile-content">{state.user.name}</div>
 77 | 
 78 |                 <div className="profile-header">Email</div>
 79 |                 <div className="profile-content">{state.user.email}</div>
 80 | 
 81 |                 <div className="profile-header">Phone</div>
 82 |                 <div className="profile-content">
 83 |                   {profile?.phone ? profile?.phone : "-"}
 84 |                 </div>
 85 | 
 86 |                 <div className="profile-header">Gender</div>
 87 |                 <div className="profile-content">
 88 |                   {profile?.gender ? profile?.gender : "-"}
 89 |                 </div>
 90 | 
 91 |                 <div className="profile-header">Address</div>
 92 |                 <div className="profile-content">
 93 |                   {profile?.address ? profile?.address : "-"}
 94 |                 </div>
 95 |               </Col>
 96 |             </Row>
 97 |           </Col>
 98 |           <Col md="6">
 99 |             <div className="text-header-product mb-4">My Transaction</div>
100 |             {transactions?.length != 0 ? (
101 |               <>
102 |                 {transactions?.map((item) => (
103 |                   <div style={{ background: "#303030" }} className="p-2 mb-1">
104 |                     <Container fluid className="px-1">
105 |                       <Row>
106 |                         <Col xs="3">
107 |                           <img
108 |                             src={item.product.image}
109 |                             alt="img"
110 |                             className="img-fluid"
111 |                             style={{
112 |                               height: "120px",
113 |                               width: "170px",
114 |                               objectFit: "cover",
115 |                             }}
116 |                           />
117 |                         </Col>
118 |                         <Col xs="6">
119 |                           <div
120 |                             style={{
121 |                               fontSize: "18px",
122 |                               color: "#F74D4D",
123 |                               fontWeight: "500",
124 |                               lineHeight: "19px",
125 |                             }}
126 |                           >
127 |                             {item.product.name}
128 |                           </div>
129 |                           <div
130 |                             className="mt-2"
131 |                             style={{
132 |                               fontSize: "14px",
133 |                               color: "#F74D4D",
134 |                               fontWeight: "300",
135 |                               lineHeight: "19px",
136 |                             }}
137 |                           >
138 |                             {dateFormat(
139 |                               item.createdAt,
140 |                               "dddd, d mmmm yyyy, HH:MM "
141 |                             )}
142 |                             WIB
143 |                           </div>
144 | 
145 |                           <div
146 |                             className="mt-3"
147 |                             style={{
148 |                               fontSize: "14px",
149 |                               fontWeight: "300",
150 |                             }}
151 |                           >
152 |                             Price : {convertRupiah.convert(item.price)}
153 |                           </div>
154 | 
155 |                           <div
156 |                             className="mt-3"
157 |                             style={{
158 |                               fontSize: "14px",
159 |                               fontWeight: "700",
160 |                             }}
161 |                           >
162 |                             Sub Total : {convertRupiah.convert(item.price)}
163 |                           </div>
164 |                         </Col>
165 |                         <Col xs="3">
166 |                           <div
167 |                             className={`status-transaction-${item.status} rounded h-100 d-flex align-items-center justify-content-center`}
168 |                           >
169 |                             {item.status}
170 |                           </div>
171 |                         </Col>
172 |                       </Row>
173 |                     </Container>
174 |                   </div>
175 |                 ))}
176 |               </>
177 |             ) : (
178 |               <div className="no-data-transaction">No transaction</div>
179 |             )}
180 |           </Col>
181 |         </Row>
182 |       </Container>
183 |     </>
184 |   );
185 | }
186 | 


--------------------------------------------------------------------------------
/src/pages/ProductAdmin.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Container, Row, Col, Table, Button } from "react-bootstrap";
  3 | import { useHistory } from "react-router";
  4 | import ShowMoreText from "react-show-more-text";
  5 | import rupiahFormat from "rupiah-format";
  6 | 
  7 | import NavbarAdmin from "../components/NavbarAdmin";
  8 | import DeleteData from "../components/modal/DeleteData";
  9 | 
 10 | import imgEmpty from "../assets/empty.svg";
 11 | 
 12 | import dataProduct from "../fakeData/product";
 13 | 
 14 | // Import useQuery and useMutation
 15 | import { useQuery, useMutation } from "react-query";
 16 | 
 17 | // API config
 18 | import { API } from "../config/api";
 19 | 
 20 | export default function ProductAdmin() {
 21 |   let history = useHistory();
 22 |   let api = API();
 23 | 
 24 |   // Variabel for delete product data
 25 |   const [idDelete, setIdDelete] = useState(null);
 26 |   const [confirmDelete, setConfirmDelete] = useState(null);
 27 | 
 28 |   // Modal Confirm delete data
 29 |   const [show, setShow] = useState(false);
 30 |   const handleClose = () => setShow(false);
 31 |   const handleShow = () => setShow(true);
 32 | 
 33 |   const title = "Product admin";
 34 |   document.title = "DumbMerch | " + title;
 35 | 
 36 |   // Fetching product data from database
 37 |   let { data: products, refetch } = useQuery("productsCache", async () => {
 38 |     const config = {
 39 |       method: "GET",
 40 |       headers: {
 41 |         Authorization: "Basic " + localStorage.token,
 42 |       },
 43 |     };
 44 |     const response = await api.get("/products", config);
 45 |     return response.data;
 46 |   });
 47 | 
 48 |   const addProduct = () => {
 49 |     history.push("/add-product");
 50 |   };
 51 | 
 52 |   const handleEdit = (id) => {
 53 |     history.push("/edit-product/" + id);
 54 |   };
 55 | 
 56 |   // For get id product & show modal confirm delete data
 57 |   const handleDelete = (id) => {
 58 |     setIdDelete(id);
 59 |     handleShow();
 60 |   };
 61 | 
 62 |   // If confirm is true, execute delete data
 63 |   const deleteById = useMutation(async (id) => {
 64 |     try {
 65 |       const config = {
 66 |         method: "DELETE",
 67 |         headers: {
 68 |           Authorization: "Basic " + localStorage.token,
 69 |         },
 70 |       };
 71 |       await api.delete(`/product/${id}`, config);
 72 |       refetch();
 73 |     } catch (error) {
 74 |       console.log(error);
 75 |     }
 76 |   });
 77 | 
 78 |   useEffect(() => {
 79 |     if (confirmDelete) {
 80 |       // Close modal confirm delete data
 81 |       handleClose();
 82 |       // execute delete data by id function
 83 |       deleteById.mutate(idDelete);
 84 |       setConfirmDelete(null);
 85 |     }
 86 |   }, [confirmDelete]);
 87 | 
 88 |   return (
 89 |     <>
 90 |       <NavbarAdmin title={title} />
 91 | 
 92 |       <Container className="py-5">
 93 |         <Row>
 94 |           <Col xs="6">
 95 |             <div className="text-header-category mb-4">List Product</div>
 96 |           </Col>
 97 |           <Col xs="6" className="text-end">
 98 |             <Button
 99 |               onClick={addProduct}
100 |               className="btn-dark"
101 |               style={{ width: "100px" }}
102 |             >
103 |               Add
104 |             </Button>
105 |           </Col>
106 |           <Col xs="12">
107 |             {products?.length != 0 ? (
108 |               <Table striped hover size="lg" variant="dark">
109 |                 <thead>
110 |                   <tr>
111 |                     <th width="1%" className="text-center">
112 |                       No
113 |                     </th>
114 |                     <th>Photo</th>
115 |                     <th>Product Name</th>
116 |                     <th>Product Desc</th>
117 |                     <th>Price</th>
118 |                     <th>Qty</th>
119 |                     <th>Action</th>
120 |                   </tr>
121 |                 </thead>
122 |                 <tbody>
123 |                   {products?.map((item, index) => (
124 |                     <tr>
125 |                       <td className="align-middle text-center">{index + 1}</td>
126 |                       <td className="align-middle">
127 |                         <img
128 |                           src={item.image}
129 |                           style={{
130 |                             width: "80px",
131 |                             height: "80px",
132 |                             objectFit: "cover",
133 |                           }}
134 |                         />
135 |                       </td>
136 |                       <td className="align-middle">{item.name}</td>
137 |                       <td className="align-middle">
138 |                         <ShowMoreText
139 |                           /* Default options */
140 |                           lines={1}
141 |                           more="show"
142 |                           less="hide"
143 |                           className="content-css"
144 |                           anchorClass="my-anchor-css-class"
145 |                           expanded={false}
146 |                           width={280}
147 |                         >
148 |                           {item.desc}
149 |                         </ShowMoreText>
150 |                       </td>
151 |                       <td className="align-middle">
152 |                         {rupiahFormat.convert(item.price)}
153 |                       </td>
154 |                       <td className="align-middle">{item.qty}</td>
155 |                       <td className="align-middle">
156 |                         <Button
157 |                           onClick={() => {
158 |                             handleEdit(item.id);
159 |                           }}
160 |                           className="btn-sm btn-success me-2"
161 |                           style={{ width: "135px" }}
162 |                         >
163 |                           Edit
164 |                         </Button>
165 |                         <Button
166 |                           onClick={() => {
167 |                             handleDelete(item.id);
168 |                           }}
169 |                           className="btn-sm btn-danger"
170 |                           style={{ width: "135px" }}
171 |                         >
172 |                           Delete
173 |                         </Button>
174 |                       </td>
175 |                     </tr>
176 |                   ))}
177 |                 </tbody>
178 |               </Table>
179 |             ) : (
180 |               <div className="text-center pt-5">
181 |                 <img
182 |                   src={imgEmpty}
183 |                   className="img-fluid"
184 |                   style={{ width: "40%" }}
185 |                 />
186 |                 <div className="mt-3">No data product</div>
187 |               </div>
188 |             )}
189 |           </Col>
190 |         </Row>
191 |       </Container>
192 |       <DeleteData
193 |         setConfirmDelete={setConfirmDelete}
194 |         show={show}
195 |         handleClose={handleClose}
196 |       />
197 |     </>
198 |   );
199 | }
200 | 


--------------------------------------------------------------------------------
/src/pages/UpdateProductAdmin.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, createElement } from "react";
  2 | import { Container, Row, Col, Button } from "react-bootstrap";
  3 | import { useParams, useHistory } from "react-router";
  4 | 
  5 | import NavbarAdmin from "../components/NavbarAdmin";
  6 | import CheckBox from "../components/form/CheckBox";
  7 | 
  8 | import dataProduct from "../fakeData/product";
  9 | 
 10 | // Import useQuery and useMutation
 11 | import { useQuery, useMutation } from "react-query";
 12 | 
 13 | // Get API config
 14 | import { API } from "../config/api";
 15 | 
 16 | export default function UpdateProductAdmin() {
 17 |   const title = "Product admin";
 18 |   document.title = "DumbMerch | " + title;
 19 | 
 20 |   let history = useHistory();
 21 |   let api = API();
 22 |   const { id } = useParams();
 23 | 
 24 |   const [categories, setCategories] = useState([]); //Store all category data
 25 |   const [categoryId, setCategoryId] = useState([]); //Save the selected category id
 26 |   const [preview, setPreview] = useState(null); //For image preview
 27 |   const [product, setProduct] = useState({}); //Store product data
 28 |   const [form, setForm] = useState({
 29 |     image: "",
 30 |     name: "",
 31 |     desc: "",
 32 |     price: "",
 33 |     qty: "",
 34 |   }); //Store product data
 35 | 
 36 |   // Fetching detail product data by id from database
 37 |   let { productRefetch } = useQuery("productCache", async () => {
 38 |     const config = {
 39 |       headers: {
 40 |         Authorization: "Basic " + localStorage.token,
 41 |       },
 42 |     };
 43 |     const response = await api.get("/product/" + id, config);
 44 |     setForm({
 45 |       name: response.data.name,
 46 |       desc: response.data.desc,
 47 |       price: response.data.price,
 48 |       qty: response.data.qty,
 49 |       image: response.data.image,
 50 |     });
 51 |     setProduct(response.data);
 52 |   });
 53 | 
 54 |   // Fetching category data
 55 |   let { categoriesRefetch } = useQuery("categoriesCache", async () => {
 56 |     const response = await api.get("/categories");
 57 |     setCategories(response.data);
 58 |   });
 59 | 
 60 |   // For handle if category selected
 61 |   const handleChangeCategoryId = (e) => {
 62 |     const id = e.target.value;
 63 |     const checked = e.target.checked;
 64 | 
 65 |     if (checked == true) {
 66 |       // Save category id if checked
 67 |       setCategoryId([...categoryId, parseInt(id)]);
 68 |     } else {
 69 |       // Delete category id from variable if unchecked
 70 |       let newCategoryId = categoryId.filter((categoryIdItem) => {
 71 |         return categoryIdItem != id;
 72 |       });
 73 |       setCategoryId(newCategoryId);
 74 |     }
 75 |   };
 76 | 
 77 |   // Handle change data on form
 78 |   const handleChange = (e) => {
 79 |     setForm({
 80 |       ...form,
 81 |       [e.target.name]:
 82 |         e.target.type === "file" ? e.target.files : e.target.value,
 83 |     });
 84 | 
 85 |     // Create image url for preview
 86 |     if (e.target.type === "file") {
 87 |       setPreview(e.target.files);
 88 |     }
 89 |   };
 90 | 
 91 |   const handleSubmit = useMutation(async (e) => {
 92 |     try {
 93 |       e.preventDefault();
 94 | 
 95 |       // Store data with FormData as object
 96 |       const formData = new FormData();
 97 |       if (preview) {
 98 |         formData.set("image", preview[0], preview[0]?.name);
 99 |       }
100 |       formData.set("name", form.name);
101 |       formData.set("desc", form.desc);
102 |       formData.set("price", form.price);
103 |       formData.set("qty", form.qty);
104 |       formData.set("categoryId", categoryId);
105 | 
106 |       // Configuration
107 |       const config = {
108 |         method: "PATCH",
109 |         headers: {
110 |           Authorization: "Basic " + localStorage.token,
111 |         },
112 |         body: formData,
113 |       };
114 | 
115 |       // Insert product data
116 |       const response = await api.patch("/product/" + product.id, config);
117 | 
118 |       history.push("/product-admin");
119 |     } catch (error) {
120 |       console.log(error);
121 |     }
122 |   });
123 | 
124 |   useEffect(() => {
125 |     const newCategoryId = product?.categories?.map((item) => {
126 |       return item.id;
127 |     });
128 | 
129 |     setCategoryId(newCategoryId);
130 |   }, [product]);
131 | 
132 |   return (
133 |     <>
134 |       <NavbarAdmin title={title} />
135 |       <Container className="py-5">
136 |         <Row>
137 |           <Col xs="12">
138 |             <div className="text-header-category mb-4">Update Product</div>
139 |           </Col>
140 |           <Col xs="12">
141 |             <form onSubmit={(e) => handleSubmit.mutate(e)}>
142 |               {!preview ? (
143 |                 <div>
144 |                   <img
145 |                     src={form.image}
146 |                     style={{
147 |                       maxWidth: "150px",
148 |                       maxHeight: "150px",
149 |                       objectFit: "cover",
150 |                     }}
151 |                   />
152 |                 </div>
153 |               ) : (
154 |                 <div>
155 |                   <img
156 |                     src={URL.createObjectURL(preview[0])}
157 |                     style={{
158 |                       maxWidth: "150px",
159 |                       maxHeight: "150px",
160 |                       objectFit: "cover",
161 |                     }}
162 |                   />
163 |                 </div>
164 |               )}
165 |               <input
166 |                 type="file"
167 |                 id="upload"
168 |                 name="image"
169 |                 hidden
170 |                 onChange={handleChange}
171 |               />
172 |               <label for="upload" className="label-file-add-product">
173 |                 Upload file
174 |               </label>
175 |               <input
176 |                 type="text"
177 |                 placeholder="Product Name"
178 |                 name="name"
179 |                 onChange={handleChange}
180 |                 value={form.name}
181 |                 className="input-edit-category mt-4"
182 |               />
183 |               <textarea
184 |                 placeholder="Product Desc"
185 |                 name="desc"
186 |                 onChange={handleChange}
187 |                 value={form.desc}
188 |                 className="input-edit-category mt-4"
189 |                 style={{ height: "130px" }}
190 |               ></textarea>
191 |               <input
192 |                 type="number"
193 |                 placeholder="Price (Rp.)"
194 |                 name="price"
195 |                 onChange={handleChange}
196 |                 value={form.price}
197 |                 className="input-edit-category mt-4"
198 |               />
199 |               <input
200 |                 type="number"
201 |                 placeholder="Stock"
202 |                 name="qty"
203 |                 onChange={handleChange}
204 |                 value={form.qty}
205 |                 className="input-edit-category mt-4"
206 |               />
207 | 
208 |               <div className="card-form-input mt-4 px-2 py-1 pb-2">
209 |                 <div
210 |                   className="text-secondary mb-1"
211 |                   style={{ fontSize: "15px" }}
212 |                 >
213 |                   Category
214 |                 </div>
215 |                 {product &&
216 |                   categories.map((item) => (
217 |                     <label class="checkbox-inline me-4">
218 |                       <CheckBox
219 |                         categoryId={categoryId}
220 |                         value={item.id}
221 |                         handleChangeCategoryId={handleChangeCategoryId}
222 |                       />
223 |                       <span className="ms-2">{item.name}</span>
224 |                     </label>
225 |                   ))}
226 |               </div>
227 | 
228 |               <div className="d-grid gap-2 mt-4">
229 |                 <Button type="submit" variant="success" size="md">
230 |                   Save
231 |                 </Button>
232 |               </div>
233 |             </form>
234 |           </Col>
235 |         </Row>
236 |       </Container>
237 |     </>
238 |   );
239 | }
240 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-color: #0b0b0b !important;
  3 |   color: #ffffff !important;
  4 | }
  5 | 
  6 | /* SCROLLBAR */
  7 | /* width */
  8 | ::-webkit-scrollbar {
  9 |   width: 5px;
 10 | }
 11 | 
 12 | /* Track */
 13 | ::-webkit-scrollbar-track {
 14 |   background: #f1f1f100;
 15 | }
 16 | 
 17 | /* Handle */
 18 | ::-webkit-scrollbar-thumb {
 19 |   background: #888;
 20 | }
 21 | 
 22 | /* Handle on hover */
 23 | ::-webkit-scrollbar-thumb:hover {
 24 |   background: #555;
 25 | }
 26 | 
 27 | /* END SCROLLBAR */
 28 | 
 29 | .bg-black {
 30 |   background-color: #0b0b0b;
 31 |   color: #ffffff;
 32 | }
 33 | 
 34 | .text-auth-header {
 35 |   font-style: normal;
 36 |   font-weight: 400;
 37 |   font-size: 56px;
 38 |   line-height: 76px;
 39 | }
 40 | 
 41 | .text-auth-parag {
 42 |   font-family: Avenir;
 43 |   font-style: normal;
 44 |   font-weight: normal;
 45 |   font-size: 18px;
 46 |   line-height: 25px;
 47 | 
 48 |   color: #6a6a6a;
 49 | }
 50 | 
 51 | .btn-login {
 52 |   background: #f74d4d !important;
 53 |   border-radius: 5px !important;
 54 | 
 55 |   font-style: normal !important;
 56 |   font-weight: 700 !important;
 57 |   font-size: 18px !important;
 58 |   line-height: 25px !important;
 59 | 
 60 |   color: #ffffff !important;
 61 | }
 62 | 
 63 | .btn-login:hover {
 64 |   background: #d11111 !important;
 65 | }
 66 | 
 67 | .btn-login:active {
 68 |   background: #861313 !important;
 69 | }
 70 | 
 71 | .btn-register {
 72 |   font-style: normal !important;
 73 |   font-weight: 800 !important;
 74 |   font-size: 18px !important;
 75 |   line-height: 25px !important;
 76 | 
 77 |   color: #b7b7b7 !important;
 78 | }
 79 | 
 80 | .btn-register:hover {
 81 |   color: #e6e6e6 !important;
 82 | }
 83 | 
 84 | .btn-register:active {
 85 |   color: #b7b7b7 !important;
 86 | }
 87 | 
 88 | input:focus,
 89 | button:focus,
 90 | textarea:focus {
 91 |   box-shadow: none !important;
 92 |   outline: none !important;
 93 | }
 94 | 
 95 | .card-auth {
 96 |   background: #181818;
 97 |   border-radius: 10px;
 98 |   max-width: 416px;
 99 | }
100 | 
101 | .form input {
102 |   background: rgba(210, 210, 210, 0.25);
103 |   border: 2px solid #bcbcbc;
104 |   box-sizing: border-box;
105 |   border-radius: 5px;
106 |   width: 100%;
107 |   color: #ffffff;
108 | }
109 | 
110 | .text-navbar {
111 |   font-weight: 700 !important;
112 |   font-size: 18px !important;
113 |   line-height: 25px !important;
114 |   color: #ffffff !important;
115 | }
116 | 
117 | .text-navbar-active {
118 |   font-weight: 700 !important;
119 |   font-size: 18px !important;
120 |   line-height: 25px !important;
121 |   color: #f74d4d !important;
122 | }
123 | 
124 | .text-header-product {
125 |   font-weight: 700;
126 |   font-size: 24px;
127 |   line-height: 33px;
128 |   color: #f74d4d;
129 | }
130 | 
131 | .card-product {
132 |   background: #212121;
133 |   border-radius: 5px;
134 | }
135 | 
136 | .card-product:hover {
137 |   box-shadow: 0px 0px 10px #3d3d3d;
138 | }
139 | 
140 | .text-header-product-item {
141 |   font-weight: 600;
142 |   font-size: 18px;
143 |   line-height: 25px;
144 |   color: #f74d4d;
145 | }
146 | 
147 | .text-product-item {
148 |   font-style: normal;
149 |   font-weight: normal;
150 |   font-size: 14px;
151 |   line-height: 19px;
152 |   color: #ffffff;
153 |   margin-top: 5px;
154 | }
155 | 
156 | .img-rounded {
157 |   border-radius: 5px 5px 0 0;
158 | }
159 | 
160 | /* Masonry */
161 | .my-masonry-grid {
162 |   display: -webkit-box; /* Not needed if autoprefixing */
163 |   display: -ms-flexbox; /* Not needed if autoprefixing */
164 |   display: flex;
165 |   margin-left: -10px; /* gutter size offset */
166 |   width: auto;
167 | }
168 | .my-masonry-grid_column {
169 |   padding-left: 10px; /* gutter size */
170 |   background-clip: padding-box;
171 | }
172 | 
173 | .my-masonry-grid_column > div {
174 |   /* change div to reference your elements you put in <Masonry> */
175 |   /* background: grey; */
176 |   margin-bottom: 30px;
177 | }
178 | 
179 | .text-header-product-detail {
180 |   font-style: normal;
181 |   font-weight: 500;
182 |   font-size: 48px;
183 |   line-height: 66px;
184 |   color: #f74d4d;
185 | }
186 | 
187 | .text-content-product-detail {
188 |   font-style: normal;
189 |   font-weight: normal;
190 |   font-size: 18px;
191 |   line-height: 25px;
192 |   color: #ffffff;
193 | }
194 | 
195 | .text-price-product-detail {
196 |   font-style: normal;
197 |   font-weight: 500;
198 |   font-size: 24px;
199 |   line-height: 33px;
200 |   color: #f74d4d;
201 | }
202 | 
203 | .btn-buy {
204 |   background: #f74d4d !important;
205 |   border-radius: 5px !important;
206 |   font-style: normal !important;
207 |   font-weight: 500 !important;
208 |   font-size: 18px !important;
209 |   line-height: 22px !important;
210 |   color: #ffffff !important;
211 | }
212 | 
213 | .btn-buy:hover {
214 |   background: #ce3030 !important;
215 | }
216 | 
217 | .btn-buy:active {
218 |   background: #701919 !important;
219 | }
220 | 
221 | .img-contact {
222 |   width: 50px !important;
223 |   height: 50px !important;
224 |   object-fit: cover !important;
225 | }
226 | 
227 | .img-chat {
228 |   width: 40px !important;
229 |   height: 40px !important;
230 |   object-fit: cover !important;
231 | }
232 | 
233 | .text-contact {
234 |   font-size: 14px;
235 | }
236 | 
237 | .text-contact-chat {
238 |   color: #ababab;
239 | }
240 | 
241 | .contact {
242 |   display: flex;
243 |   align-items: center;
244 | }
245 | .contact img {
246 |   flex-grow: 0;
247 |   flex-shrink: 0;
248 | }
249 | 
250 | .contact ul {
251 |   list-style-type: none;
252 | }
253 | 
254 | .contact:hover {
255 |   background-color: #212121;
256 |   transition: 0.5s;
257 |   border-radius: 5px;
258 |   cursor: pointer;
259 | }
260 | 
261 | .contact:active {
262 |   background-color: #3d3d3d;
263 |   transition: 0.3s;
264 | }
265 | 
266 | .contact-active {
267 |   background-color: #212121;
268 |   border-radius: 5px;
269 | }
270 | 
271 | .input-message {
272 |   width: 100%;
273 |   height: 90%;
274 |   background: rgba(171, 171, 171, 0.15);
275 |   border: none;
276 |   color: #ffffff;
277 | }
278 | 
279 | .chat-me {
280 |   position: relative;
281 |   background: #262626;
282 |   border-radius: 5px;
283 |   padding: 10px;
284 |   font-weight: 500;
285 |   font-size: 16px;
286 |   line-height: 22px;
287 |   max-width: 400px;
288 | }
289 | 
290 | .chat-me::before {
291 |   content: "";
292 |   position: absolute;
293 |   top: 8px;
294 |   right: -15px;
295 |   border-top: 15px solid transparent;
296 |   border-left: 20px solid #262626;
297 |   border-bottom: 15px solid transparent;
298 | }
299 | .chat-other {
300 |   position: relative;
301 |   background: #575757;
302 |   border-radius: 5px;
303 |   margin-left: 10px;
304 |   padding: 10px;
305 |   font-weight: 500;
306 |   font-size: 16px;
307 |   line-height: 22px;
308 |   max-width: 400px;
309 | }
310 | 
311 | .chat-other::before {
312 |   content: "";
313 |   position: absolute;
314 |   top: 8px;
315 |   left: -15px;
316 |   border-top: 15px solid transparent;
317 |   border-right: 20px solid #575757;
318 |   border-bottom: 15px solid transparent;
319 | }
320 | .profile-header {
321 |   font-style: normal;
322 |   font-weight: 600;
323 |   font-size: 18px;
324 |   line-height: 25px;
325 |   color: #f74d4d;
326 |   margin-bottom: 6px;
327 | }
328 | 
329 | .profile-content {
330 |   font-style: normal;
331 |   font-weight: normal;
332 |   font-size: 18px;
333 |   line-height: 25px;
334 |   color: #ffffff;
335 |   margin-bottom: 27px;
336 | }
337 | 
338 | .text-header-category {
339 |   font-style: normal;
340 |   font-weight: 600;
341 |   font-size: 24px;
342 |   line-height: 33px;
343 |   color: #ffffff;
344 | }
345 | 
346 | .input-edit-category {
347 |   width: 100%;
348 |   background: rgba(210, 210, 210, 0.25);
349 |   border: 2px solid #bcbcbc;
350 |   box-sizing: border-box;
351 |   border-radius: 5px;
352 |   padding: 5px 10px;
353 |   color: #ffffff;
354 | }
355 | 
356 | .label-file-add-product {
357 |   background: #f74d4d;
358 |   color: white;
359 |   padding: 0.5rem 1rem;
360 |   font-family: sans-serif;
361 |   border-radius: 0.3rem;
362 |   cursor: pointer;
363 |   margin-top: 1rem;
364 | }
365 | 
366 | .card-form-input {
367 |   background: rgba(210, 210, 210, 0.25);
368 |   border: 2px solid #bcbcbc;
369 |   box-sizing: border-box;
370 |   border-radius: 5px;
371 | }
372 | 
373 | .status-transaction-success {
374 |   background-color: #268d37b0;
375 | }
376 | 
377 | .status-transaction-pending {
378 |   background-color: #8b8d265b;
379 | }
380 | 
381 | .status-transaction-failed {
382 |   background-color: #8d26265b;
383 | }
384 | 


--------------------------------------------------------------------------------
/src/assets/empty.svg:
--------------------------------------------------------------------------------
1 | <svg id="9af98f83-10c5-4067-bc84-20554b2827d8" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1009.54" height="789.93" viewBox="0 0 1009.54 789.93"><defs><linearGradient id="07c62293-c0d3-4921-8e06-4e39241449cd" x1="318.22" y1="488.45" x2="630.35" y2="488.45" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>empty</title><ellipse cx="354.13" cy="741.27" rx="176.1" ry="33.36" fill="#d00d00" opacity="0.1"/><path d="M681.78,166.43c-64.72-2.24-126.36-23.14-185.22-46S379.4,72.25,316.23,60.14C275.6,52.35,229.13,51.24,196.4,73c-31.51,21-41.69,57.15-47.16,90.72-4.12,25.26-6.54,51.85,4.74,75.5,7.84,16.42,21.74,30.22,31.36,45.95,33.47,54.72,9.81,122.2-26.45,175.63-17,25.06-36.75,49-49.88,75.65S89.81,593.74,101.3,621c11.38,27,38.51,47.24,67.9,61.49,59.69,28.95,130,37.23,198.61,41.93,151.83,10.38,304.46,5.89,456.69,1.38,56.34-1.66,112.92-3.35,168.34-12.06,30.78-4.84,62.55-12.52,84.9-31.06,28.36-23.53,35.39-63.37,16.38-92.87-31.88-49.5-120-61.79-142.31-114.9-12.26-29.24.33-61.8,18.16-88.91,38.24-58.17,102.33-109.2,105.7-175.68,2.32-45.66-28.49-91.39-76.13-113-49.93-22.65-119.18-19.8-156,17.69C805.59,153.57,738.93,168.42,681.78,166.43Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M630.35,416.77l-30.63-20.65h0l15.45-23-80.9-6.45L505.2,389.15l-36.39-20.4-30.35,3.65-.36-8a225.78,225.78,0,0,0-2.51-24.9c.13-2.5.22-5.37.21-8.49,0-13.15-1.78-30.58-9.6-42.2L428,272.63,413.4,255.38a110.37,110.37,0,0,1,8-13.46c.5-.72,1-1.42,1.54-2.1,18.95-1.37,33.9-16.95,33.9-36,0-.88,0-1.76-.1-2.63,0-.35-.07-.71-.11-1.06,1.85,1,3.72,2,5.59,3,.35.5.75,1,1.19,1.59l0,0,.09.11.56.69.18.21c.2.24.41.47.62.71l.14.16c.53.59,1.09,1.19,1.69,1.78a1.8,1.8,0,0,1,.2.19l.75.7.21.19c.64.57,1.32,1.12,2,1.64l.22.16.86.59.28.18c.33.2.67.41,1,.6l.12.07c.39.21.79.41,1.19.6l.2.08q.51.22,1,.42l.31.11c.35.12.69.23,1.05.33l.22.06c.44.11.88.2,1.33.27h.05a10.88,10.88,0,0,0,1.28.13h.29a11,11,0,0,0,1.15,0h.25a11.85,11.85,0,0,0,1.43-.17,15.78,15.78,0,0,0,6.3-2.26,5.5,5.5,0,0,0,1.28-1.19c2-2.62-.2-5.49-.2-5.49h0c-.78-1.86-5.84-3.17-5.84-3.17s-16-6.68-16-12-4-32.92-45.29-39.23c0,0-26.86-1.51-34.41,12.87l-.16,1.68c-2.22,1.39-4.06,4.18-6.25,5a10.21,10.21,0,0,0-2.71,1l0-.19h0a2.58,2.58,0,0,0-.61.79,8,8,0,0,0-.83,3,11.3,11.3,0,0,1-1.31,3.63,8.07,8.07,0,0,1-.6.92h0l-.17.27a7.3,7.3,0,0,0,3.4-.55,16.93,16.93,0,0,1-1,4,3.32,3.32,0,0,0,3.08-1.84l0-.08.13-.18a8.44,8.44,0,0,0,.62-1.45l-.11.12c.2-.65.38-1.31.6-1.95a3.06,3.06,0,0,1,.49-1,2.42,2.42,0,0,1,2.07-.69l-.41,8.67h.18a11.83,11.83,0,0,1-.88,1.82c-1.42,2.3-4,3.87-4.95,6.39a9.4,9.4,0,0,0-.46,3.78c0,.75.09,1.51.15,2.26v-.06c.14,2,.18,3.9-.9,5.51-.74,1.1-1.93,1.93-2.34,3.18a3.1,3.1,0,0,0-.15,1.08,12.13,12.13,0,0,0,.68,3.21.14.14,0,0,0,0-.06,4.88,4.88,0,0,1,.17,2.36c-.45,2-2.88,3.67-2.76,5.58a2.15,2.15,0,0,0,.11.74,4.05,4.05,0,0,0,2.26,2,8.8,8.8,0,0,0,5.08,1.12,6.68,6.68,0,0,0,1.9-.65c-.7,1.61-1.42,3.2-2.15,4.71-.11.24-.23.48-.35.72,0,0-6.18-4.13-9.69,4.29a18.68,18.68,0,0,0-2.17,5.64,13.42,13.42,0,0,1-.74,2.32,14.93,14.93,0,0,1-6.68,6c-7.16,3.28-36.08,39.35-36.59,48.69a54.49,54.49,0,0,1-1.84,10.78,64.15,64.15,0,0,0-1.72,25.49,48.77,48.77,0,0,0,1.77,8.13c3.07,9.33,5.12,26.74,5.12,26.74l3.32,30.22a86,86,0,0,0,.54,12.49c-3.39,3.87-17,20-11.8,24.39,4,3.46,11,2.89,14.93,2.18-3.31,8.19-8.52,22.43-9.21,32.21-1,14.47,1.71,33.64,6,41s18.59,26.24,18.59,26.24-.67,25.9,4.44,35.31,7.17,28.93,7.17,28.93,4.77,16.48,2.38,22.54,4.43,11.1-2.73,15.13-16.32,94.86-16.32,94.86-3.69,59.53,0,62.56a3.75,3.75,0,0,0,.63.37v20s-2.56,4.2,7.85,5.05c7.13.57,27.34,1.86,39.33,2.61l9.29.58s22,4.38,31.72,0,26.95-4.28,24.39-15.85a32.92,32.92,0,0,0-1.36-4.63c-2.81-7.18-7.58-8-16.37-10-.51-.11-1-.21-1.45-.29-9.26-1.61-12.3,2.7-17.49-2.91-4.51-4.85-18.87-10.28-23.76-12,.12-.36.27-.71.39-1.08a7.32,7.32,0,0,1-3.71-1.81l13.25.84,7.89.49s18.7,3.73,27,0,22.9-3.63,20.72-13.46a28.21,28.21,0,0,0-1.15-3.94c-2.39-6.1-6.45-6.77-13.92-8.46-.43-.09-.83-.18-1.23-.25-7.87-1.37-10.45,2.29-14.86-2.47-3.78-4.06-15.71-8.61-20-10.16,0-2.22-3-5.38-4.89-8.55-2.22-3.7,1.88-16.65,1.88-16.65L411,658.74a10.38,10.38,0,0,1,2.8-.8s10.58-10.1,8.19-20.86a69.13,69.13,0,0,1-.76-9.83c3.48-3.23,8.27-8,9.63-10.94,2.22-4.79,0-28,0-28V499.56l17.7,1.79L464.62,503l4.89.5,16.06,1.62,36.91,3.73,33.26-6.3,14.39-2.72,29.59-5.6V421.83ZM386.74,176.86l-2.06-.22C385.36,176.67,386.08,176.8,386.74,176.86Z" transform="translate(-95.23 -55.03)" fill="url(#07c62293-c0d3-4921-8e06-4e39241449cd)"/><path d="M558.56,463.78c-10,14.31-45.95,6.73-45.95,6.73l-27.86-26.07L481,440.91l6.29-13.36s2,.55,5.43,1.53C510.73,434.31,567,451.75,558.56,463.78Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M492.7,429.08c-1.23,4.28-4.6,10.69-7.95,15.36L481,440.91l6.29-13.36S489.31,428.1,492.7,429.08Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M397.15,278.42s-25.68,11.39-24.42,39.36a461.14,461.14,0,0,0,5.88,53.76s-5.25,42.09,16.61,52.94,42.09,19.77,42.09,19.77,34.2,3.68,38.45,5.2,17.53-21.72,15.08-25.34S457,412.9,453,406.86s-13.25-9.77-13.25-9.77-9.55-5.78-10.2-11,1.87-9.11,2.51-11.4,2.26-24.4,2.26-24.4S445.1,271.59,397.15,278.42Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M414.1,370.39s-35.23,5.9-31.82,18.23C382.28,388.62,395.07,375.31,414.1,370.39Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M414.37,375.38S395,391.19,398.79,392,414.37,375.38,414.37,375.38Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M423.68,380.89s-5.19,10.63-2,9.91S423.68,380.89,423.68,380.89Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M494,430.21l-2.14-.61c.61-2,.78-3.62.28-4.37-2.45-3.62-33.82-11.2-37.81-17.25s-13.25-9.77-13.25-9.77-9.55-5.78-10.2-11,1.87-9.11,2.51-11.4,2.26-24.41,2.26-24.41,10.75-78.69-37.2-71.86c0,0-25.68,11.4-24.43,39.37a459.85,459.85,0,0,0,5.89,53.76s-5.25,42.09,16.61,52.94,42.09,19.77,42.09,19.77,34.19,3.67,38.45,5.2c1.61.58,4.52-2.41,7.37-6.52l1.62,1.51,27.86,26.06s35.95,7.59,45.95-6.72C568.31,452.87,512.05,435.43,494,430.21Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M382.37,173.44a8.5,8.5,0,0,0-2.77,1.07c-1,.83-1,2.25-1.25,3.49a11.48,11.48,0,0,1-2,4.78,7.19,7.19,0,0,0,3.33-.55,17.14,17.14,0,0,1-1,4,3.24,3.24,0,0,0,3-1.83,19.26,19.26,0,0,0,1.25-3.51,2.89,2.89,0,0,1,.48-1c.92-1.09,2.63-.6,4.05-.46a6.65,6.65,0,0,0,6.08-2.92c1.51-2.29,1.6-8.15-2-8.77C387.78,167.12,385.44,172.3,382.37,173.44Z" transform="translate(-95.23 -55.03)" fill="#965d7b"/><g opacity="0.1"><path d="M379.5,175.74c.09-.49.15-1,.26-1.49h0c-.95.83-1,2.24-1.25,3.49a11,11,0,0,1-.59,2.11A11.46,11.46,0,0,0,379.5,175.74Z" transform="translate(-95.23 -55.03)"/><path d="M379.82,184a16.63,16.63,0,0,0,1-4,7.16,7.16,0,0,1-3.17.55,11.57,11.57,0,0,1-1.15,2,7.12,7.12,0,0,0,3.32-.54,16.63,16.63,0,0,1-1,4,3.25,3.25,0,0,0,3-1.83,7.46,7.46,0,0,0,.6-1.43A3,3,0,0,1,379.82,184Z" transform="translate(-95.23 -55.03)"/><path d="M388.6,177.2c-1.42-.14-3.14-.63-4.06.46a3.09,3.09,0,0,0-.48,1c-.09.26-.17.53-.24.8.95-.75,2.49-.35,3.78-.22a6.68,6.68,0,0,0,6.08-2.92,5.54,5.54,0,0,0,.67-1.57A6.66,6.66,0,0,1,388.6,177.2Z" transform="translate(-95.23 -55.03)"/></g><polygon points="317.24 201 332.49 219.34 330.5 237.85 312.07 209 317.24 201" fill="#dce6f2"/><polygon points="332.48 219.34 330.61 236.75 330.49 237.85 313.86 211.81 312.07 209 312.59 208.19 317.23 201 318.26 202.24 332.48 219.34" opacity="0.1"/><path d="M435.63,231.2c-5.16,1.48-10.09,6.56-14.38,12.73a108.65,108.65,0,0,0-7.76,13.34c-1.41,2.82-2.65,5.53-3.68,7.89l-.72,1.68c-1.74,4.11-2.71,6.86-2.71,6.86S366.88,244,373.13,242c2.1-.67,4.86-5.17,7.59-10.84l.34-.72c1.73-3.64,3.43-7.7,4.94-11.52,3.09-7.85,5.38-14.67,5.38-14.67S451.38,226.7,435.63,231.2Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M459.26,202.58s9.12,16.5,21.37,14.25,7.21-8.86,7.21-8.86Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M441.59,773.73c-8.08,3.69-26.35,0-26.35,0l-7.7-.48c-10-.64-26.74-1.72-32.66-2.2-8.64-.71-6.52-4.25-6.52-4.25V745.41l41.92-10.62s16.57,5.67,21.11,10.62c4.31,4.72,6.83,1.09,14.52,2.45.38.07.78.15,1.2.25,7.3,1.67,11.26,2.33,13.6,8.38a28.1,28.1,0,0,1,1.13,3.9C464,770.13,449.66,770.06,441.59,773.73Z" transform="translate(-95.23 -55.03)" fill="#a36468"/><path d="M460.71,756.49a31.34,31.34,0,0,1-4.72,2.42c-5.5,2.51-10.73,5.57-16.29,7.94s-11.55,4.06-17.57,3.61c-3.15-.23-6.37-1-9.38-.1a21.66,21.66,0,0,0-5.21,2.89c-10-.64-26.74-1.72-32.66-2.2-8.64-.71-6.52-4.25-6.52-4.25v-2.5c.31,0,.66-.09,1.06-.12a18.88,18.88,0,0,1,6.1.91c4.34,1.18,8.66,2.34,13,3.5a10.27,10.27,0,0,1,5-6.38,15.94,15.94,0,0,1,8.06-1.85c6.73.09,13.1,3.28,19.82,3.6a10.92,10.92,0,0,0,5.49-.92c.92-.46,1.73-1.13,2.63-1.64a19.2,19.2,0,0,1,4.53-1.53A99.76,99.76,0,0,0,447,755.69c1.2-.47,2.6-1.32,2.44-2.6-.21-1.7-2.88-1.9-3.58-3.46a2,2,0,0,1,.08-1.77c.38.07.78.15,1.2.25C454.41,749.78,458.37,750.44,460.71,756.49Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M433.05,820.53c-9.5,4.34-31,0-31,0L393,820c-11.72-.75-31.46-2-38.43-2.59-10.17-.84-7.67-5-7.67-5V787.2l49.33-12.5s19.5,6.67,24.84,12.5c5.07,5.55,8,1.28,17.09,2.88.45.08.92.18,1.41.29,8.59,2,13.25,2.75,16,9.87a32.1,32.1,0,0,1,1.33,4.59C459.38,816.29,442.55,816.2,433.05,820.53Z" transform="translate(-95.23 -55.03)" fill="#a36468"/><path d="M455.55,800.24a37.23,37.23,0,0,1-5.55,2.85c-6.47,2.95-12.63,6.55-19.17,9.34s-13.59,4.77-20.68,4.25c-3.7-.27-7.49-1.2-11-.12A25.5,25.5,0,0,0,393,820c-11.72-.75-31.46-2-38.43-2.59-10.17-.84-7.67-5-7.67-5v-2.94a12.5,12.5,0,0,1,1.25-.14,21.94,21.94,0,0,1,7.18,1.07l15.29,4.12a12.1,12.1,0,0,1,5.93-7.51,18.66,18.66,0,0,1,9.49-2.18c7.92.11,15.41,3.86,23.32,4.24A12.91,12.91,0,0,0,415.8,808c1.09-.55,2-1.34,3.1-1.93a21.75,21.75,0,0,1,5.33-1.8,119.69,119.69,0,0,0,15.16-4.92c1.41-.56,3.06-1.56,2.87-3.06-.25-2-3.39-2.24-4.22-4.08a2.41,2.41,0,0,1,.1-2.08c.45.08.92.18,1.41.29C448.14,792.34,452.8,793.12,455.55,800.24Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M411.55,647.54l-2.67,62.83s-4,12.83-1.83,16.5,5.83,7.33,4.5,9.5S394.22,762,389.05,753s-10.27-48-10.27-48l4.77-48.17Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M423.13,491l7.42,9.92V587.2s2.17,23,0,27.75-13.17,14.25-13.17,14.25l-9.25-47.5,2-50.25Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M411.55,647.54l-2.67,62.83s-4,12.83-1.83,16.5,5.83,7.33,4.5,9.5S394.22,762,389.05,753s-10.27-48-10.27-48l4.77-48.17Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M423.13,491l7.42,9.92V587.2s2.17,23,0,27.75-13.17,14.25-13.17,14.25l-9.25-47.5,2-50.25Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M430.55,454.2v46.67l-8.33,36.33s-2.67,87.67-.34,98.33-8,20.67-8,20.67-6,.67-6,5.33-10,18-10,18l.33,26s4.34,48.67-2.33,58,2.33,10.67,2.33,10.67c-8.33,27.33-48.33,21-51.94,18s0-62,0-62,8.94-90,15.94-94,.34-9,2.67-15-2.33-22.33-2.33-22.33-2-19.34-7-28.67-4.34-35-4.34-35-14-18.67-18.16-26-6.84-26.33-5.84-40.67c.68-9.69,5.77-23.8,9-31.92,1.55-3.89,2.67-6.41,2.67-6.41l.95.25,54.62,14.3Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M435.63,231.2c-5.16,1.48-10.09,6.56-14.38,12.73l-1.12,0a35.72,35.72,0,0,1-31-17.93,35.18,35.18,0,0,1-3.14-7.15c3.09-7.85,5.38-14.67,5.38-14.67S451.38,226.7,435.63,231.2Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M455.88,206.2A35.75,35.75,0,1,1,389,188.68a34.93,34.93,0,0,1,3.78-5.46A36.18,36.18,0,0,1,401,176a35.75,35.75,0,0,1,54.83,27.58C455.85,204.46,455.88,205.33,455.88,206.2Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M425.84,291.78l-.12,1.1-16.63-26c-1.74,4.11-2.71,6.86-2.71,6.86S366.88,244,373.13,242c2.1-.67,4.86-5.17,7.59-10.84l.34-.72c2.9,8.64,19.75,25.91,26.76,32.83.81.8,1.48,1.46,2,1.94l1.07,1,.56.56C414,269.4,424.76,281,425.84,291.78Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M438.27,380l-1.82,58.57L436.13,449s-21.56-2-41.68-4.2c-16.2-1.77-31.47-3.68-33.82-4.8-3-1.41-9.43-2.5-14.5-3.19-3.92-.53-7-.81-7-.81s-1.15.34-2.92.66c-3.86.7-10.64,1.27-14.59-2.16-5.05-4.39,8.22-20.34,11.53-24.17l.73-.83-1.25-11.55L329.38,368s-2-17.25-5-26.5a48.88,48.88,0,0,1-1.73-8.05,64.48,64.48,0,0,1,1.68-25.26,55.08,55.08,0,0,0,1.8-10.69c.5-9.25,28.75-45,35.75-48.25a14.84,14.84,0,0,0,7.16-7.14,13.64,13.64,0,0,0,1.09-3.11c3-13,10.59-7.84,10.59-7.84,1.83,10.17,30.16,37.09,30.16,37.09l.56.56c2.81,2.88,15.33,16.4,14.44,27.94a33.87,33.87,0,0,0,1.89,12.64,213.75,213.75,0,0,1,9.85,56Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M398.13,310.45s-7,17-12.25,19.75S400.63,336,398.13,310.45Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M403.38,342.2s-16,2-16,5S403.38,342.2,403.38,342.2Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M420.13,361.7s-23.25,49.5-29.75,51S420.13,361.7,420.13,361.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M410.44,270.76l-19.23,8.36L368,244.06a13.64,13.64,0,0,0,1.09-3.11c3-13,10.59-7.84,10.59-7.84,1.83,10.17,30.16,37.09,30.16,37.09Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M411.44,268.76l-19.23,8.36L369,242.06a13.64,13.64,0,0,0,1.09-3.11c3-13,10.59-7.84,10.59-7.84,1.83,10.17,30.16,37.09,30.16,37.09Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M436.13,449s-21.56-2-41.68-4.2l36.1,9.45v11c-1.58,1.43-2.95,2.17-3.84,1.79-4.16-1.75-38.11-7.25-38.11-7.25s-19.72-10-41-22a16.43,16.43,0,0,1-1.5-.94,23.64,23.64,0,0,1-6.3-6.31c-3.93-5.69-5.85-13-6.68-20.17a87.22,87.22,0,0,1-.52-12.38A101.51,101.51,0,0,1,333.88,384a460.08,460.08,0,0,1-3-54c.25-28,26.5-38,26.5-38,48.25-4.25,33.29,73.75,33.29,73.75s-2.79,22-3.55,24.25-3.49,6-3.12,11.25,9.59,11.53,9.59,11.53,9,4.22,12.71,10.47c2.7,4.61,20.24,10.86,30.15,15.32Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M452.29,184a11.32,11.32,0,0,1-1,4.78,29.55,29.55,0,0,1-1.78,3.56,16.4,16.4,0,0,1-4.38,5.44c-2.31,1.65-5.23,2.11-8,2.78s-5.65,1.74-7.23,4.1a14.34,14.34,0,0,0-1.69,4.9,10.54,10.54,0,0,1-2,4.74,3.93,3.93,0,0,1-4.68,1.12,4.73,4.73,0,0,1-1.81-2.33c-1.14-2.57-1.43-5.42-1.89-8.19s-1.11-5.62-2.81-7.85-4.71-3.7-7.38-2.83a7.11,7.11,0,0,0-4,3.88,22.24,22.24,0,0,0-1.51,5.52q-1.86,10.18-4.39,20.24a1.86,1.86,0,0,1-.33.76,1.44,1.44,0,0,1-1,.42c-2.24.3-4.39-1.27-6.65-1.1a3.82,3.82,0,0,0-.69.11,35.73,35.73,0,0,1,3.61-40.8l.18-.05a10.78,10.78,0,0,0,4-2.52,42.22,42.22,0,0,0,4-4.63l.8-1a45.61,45.61,0,0,1,7.8-7.41,8,8,0,0,1,2.66-1.44,7.88,7.88,0,0,1,2.52-.08,63.57,63.57,0,0,0,10.41.39,66.79,66.79,0,0,1,7.31-.74c6.33.18,11.73,4.65,15.73,9.55C450.24,177.83,452.16,180.72,452.29,184Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M384.33,189.63c-1.39,2.28-3.9,3.83-4.84,6.33-1.38,3.63.95,8.15-1.19,11.39-.71,1.09-1.88,1.9-2.28,3.15-.68,2.11,1.18,4.36.7,6.53s-3.34,4-2.58,6.12a4,4,0,0,0,2.2,2,8.6,8.6,0,0,0,5,1.11c2.73-.45,4.76-3.13,7.53-3.33,2.25-.16,4.4,1.4,6.64,1.11a1.5,1.5,0,0,0,1-.43,1.73,1.73,0,0,0,.33-.76q2.52-10.05,4.4-20.24a21.8,21.8,0,0,1,1.5-5.52,7.17,7.17,0,0,1,4-3.88c2.67-.86,5.67.6,7.38,2.83s2.36,5.08,2.82,7.85.75,5.62,1.88,8.19a4.78,4.78,0,0,0,1.82,2.34c1.5.87,3.52.18,4.67-1.12a10.43,10.43,0,0,0,2-4.75,14.28,14.28,0,0,1,1.69-4.89c1.58-2.36,4.47-3.43,7.23-4.1s5.67-1.14,8-2.79a16.46,16.46,0,0,0,4.38-5.43c1.48-2.58,2.86-5.38,2.74-8.35-.13-3.24-2.05-6.13-4.1-8.65-4-4.9-9.41-9.37-15.74-9.54a62.2,62.2,0,0,0-7.31.74,62.57,62.57,0,0,1-10.41-.4,8.18,8.18,0,0,0-2.52.09,7.54,7.54,0,0,0-2.65,1.44,45.63,45.63,0,0,0-7.81,7.4,57.31,57.31,0,0,1-4.82,5.6,10.85,10.85,0,0,1-4,2.53c-1,.28-2,.08-2.95.39C386.09,183.52,385.7,187.37,384.33,189.63Z" transform="translate(-95.23 -55.03)" fill="#965d7b"/><path d="M480.63,216.82c-8,1.47-14.63-5-18.3-9.72a39.22,39.22,0,0,1-3.07-4.52l27.46,5.18,1.11.21S492.88,214.58,480.63,216.82Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><g opacity="0.1"><path d="M376.72,214.17a8.33,8.33,0,0,0-.58-3.84c0,.1-.09.2-.12.3-.43,1.34.15,2.73.52,4.12A3,3,0,0,0,376.72,214.17Z" transform="translate(-95.23 -55.03)"/><path d="M379.1,197.8a22.22,22.22,0,0,0,.08,4.15A22.28,22.28,0,0,0,379.1,197.8Z" transform="translate(-95.23 -55.03)"/><path d="M448.55,188.45a16.4,16.4,0,0,1-4.38,5.44c-2.31,1.65-5.22,2.11-8,2.78s-5.65,1.74-7.23,4.1a14.41,14.41,0,0,0-1.69,4.9,10.47,10.47,0,0,1-2,4.75c-1.15,1.3-3.17,2-4.67,1.12a4.78,4.78,0,0,1-1.82-2.34c-1.13-2.57-1.43-5.41-1.88-8.19s-1.12-5.62-2.82-7.85-4.71-3.7-7.38-2.83a7.14,7.14,0,0,0-4,3.88,21.8,21.8,0,0,0-1.5,5.52q-1.87,10.19-4.4,20.24a1.73,1.73,0,0,1-.33.76,1.5,1.5,0,0,1-1,.43c-2.24.29-4.39-1.27-6.64-1.11-2.77.2-4.8,2.88-7.53,3.32a8.45,8.45,0,0,1-5-1.11,5.35,5.35,0,0,1-1.83-1.3,2.7,2.7,0,0,0-.37,2.33,3.9,3.9,0,0,0,2.2,2,8.45,8.45,0,0,0,5,1.11c2.73-.44,4.76-3.12,7.53-3.32,2.25-.16,4.4,1.4,6.64,1.11a1.5,1.5,0,0,0,1-.43,1.73,1.73,0,0,0,.33-.76q2.52-10,4.4-20.24a21.8,21.8,0,0,1,1.5-5.52,7.14,7.14,0,0,1,4-3.88c2.67-.87,5.67.6,7.38,2.83s2.36,5.08,2.82,7.85.75,5.62,1.88,8.19a4.78,4.78,0,0,0,1.82,2.34c1.5.87,3.52.18,4.67-1.12a10.47,10.47,0,0,0,2-4.75,14.41,14.41,0,0,1,1.69-4.9c1.58-2.36,4.47-3.42,7.23-4.1s5.67-1.13,8-2.78a16.4,16.4,0,0,0,4.38-5.44c1.48-2.57,2.86-5.37,2.74-8.34a10.74,10.74,0,0,0-.12-1.14A19.65,19.65,0,0,1,448.55,188.45Z" transform="translate(-95.23 -55.03)"/></g><path d="M451.33,188.75a35.33,35.33,0,0,1,4.45,14.85c-8.91-5-17.29-10.49-21.52-12.4-7.37-3.33-34.93-2.83-45.29-2.52a34.93,34.93,0,0,1,3.78-5.46A36.18,36.18,0,0,1,401,176a35.77,35.77,0,0,1,50.38,12.73Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M483.13,212.58c-4.81,1.48-12.66-1.38-20.8-5.48a39.22,39.22,0,0,1-3.07-4.52l27.46,5.18C488.54,209,489,210.77,483.13,212.58Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M422.26,154.08s-26.25-1.5-33.63,12.75l-1.19,12.63-2-.22-.4,8.59s40.12-1.75,49.25,2.37,37.5,24.88,48.87,21.38-1-6.75-1-6.75S466.51,198.2,466.51,193,462.63,160.33,422.26,154.08Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M371.63,622.28s16.75,16.25,24,15C395.63,637.28,375.13,635.53,371.63,622.28Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M368.13,629.81s1.5,8.36,5.5,7.54S368.13,629.81,368.13,629.81Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M394.38,769.53s-23.78,18.5-19.77,19S394.38,769.53,394.38,769.53Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><polygon points="330.96 347.33 407.96 334.8 407.96 407.7 334.8 403.87 330.96 347.33" fill="#d00d00"/><polygon points="330.96 347.33 407.96 334.8 407.96 407.7 334.8 403.87 330.96 347.33" opacity="0.05"/><polygon points="407.96 334.8 500.3 341.71 495.19 405.15 407.96 407.7 407.96 334.8" fill="#d00d00"/><polygon points="407.96 334.8 500.3 341.71 495.19 405.15 407.96 407.7 407.96 334.8" opacity="0.1"/><polygon points="436.35 312.55 407.96 334.8 500.3 341.71 515.39 318.94 436.35 312.55" fill="#d00d00"/><polygon points="303.08 323.03 372.4 314.59 407.96 334.8 330.96 347.33 303.08 323.03" fill="#d00d00"/><polygon points="424.84 353.73 424.84 453.4 388.77 449.7 373.08 448.1 368.3 447.6 352.62 445.99 330.96 443.77 330.96 347.33 407.95 352.57 424.84 353.73" fill="#d00d00"/><polygon points="500.3 341.71 500.3 438.91 471.39 444.46 457.33 447.16 424.84 453.4 424.84 353.73 500.3 341.71" fill="#d00d00"/><polygon points="500.3 341.71 500.3 438.91 471.39 444.46 457.33 447.16 424.84 453.4 424.84 353.73 500.3 341.71" opacity="0.05"/><polygon points="303.08 368.31 330.96 347.33 424.84 353.73 411.02 377.01 303.08 368.31" fill="#d00d00"/><polygon points="303.08 368.31 330.96 347.33 424.84 353.73 411.02 377.01 303.08 368.31" fill="#fff" opacity="0.1"/><polygon points="500.3 341.71 424.84 353.73 449.4 375.73 530.23 362.17 500.3 341.71" fill="#d00d00"/><polygon points="500.3 341.71 424.84 353.73 449.4 375.73 530.23 362.17 500.3 341.71" fill="#fff" opacity="0.1"/><polygon points="471.39 444.46 457.33 447.16 457.33 426.39 470.5 423.07 471.39 444.46" fill="#fff" opacity="0.1"/><polygon points="388.77 435.96 388.77 449.7 373.08 448.1 373.08 435.96 388.77 435.96" fill="#fff" opacity="0.1"/><polygon points="368.3 440.29 368.3 447.6 352.62 445.99 352.62 440.29 368.3 440.29" fill="#fff" opacity="0.1"/><path d="M510.63,483.7c-10.75,13.75-46.25,4.25-46.25,4.25L438,460.43l-3.58-3.73,7-13s2,.66,5.34,1.82C464.44,451.7,519.68,472.13,510.63,483.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M509.63,481.7c-10.75,13.75-46.25,4.25-46.25,4.25L437,458.43l-3.58-3.73,7-13s2,.66,5.34,1.82C463.44,449.7,518.68,470.13,509.63,481.7Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M445.72,443.52c-1.46,4.2-5.17,10.42-8.76,14.91l-3.58-3.73,7-13S442.39,442.36,445.72,443.52Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M358.38,288s-26.25,10-26.5,38a460.08,460.08,0,0,0,3,54s-7.5,41.75,13.75,53.75,41,22,41,22,33.95,5.5,38.12,7.25,18.66-20.75,16.41-24.5-33.16-13-36.83-19.25-12.71-10.46-12.71-10.46-9.22-6.29-9.59-11.54,2.35-9,3.12-11.25,3.56-24.25,3.56-24.25S406.63,283.7,358.38,288Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M370.38,380.7s-35.5,4-32.75,16.5C337.63,397.2,351.12,384.59,370.38,380.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M370.38,385.7s-20.15,14.75-16.45,15.75S370.38,385.7,370.38,385.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M379.38,391.7s-5.75,10.34-2.5,9.8S379.38,391.7,379.38,391.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M749,167.42s-38-2.29-33.56,24.37c0,0-.89,4.71,3.38,6.85,0,0,.07-2,3.9-1.31a17.51,17.51,0,0,0,4.13.2,8.57,8.57,0,0,0,5.06-2.09h0s10.69-4.41,14.85-21.89c0,0,3.08-3.82,3-4.8l-6.42,2.75s2.19,4.63.46,8.48c0,0-.2-8.31-1.44-8.12-.25,0-3.33,1.61-3.33,1.61s3.77,8.06.92,13.93c0,0,1.08-9.94-2.1-13.35l-4.52,2.64s4.41,8.33,1.42,15.13c0,0,.77-10.43-2.37-14.49l-4.1,3.19s4.15,8.22,1.62,13.86c0,0-.33-12.14-2.51-13.06,0,0-3.58,3.16-4.12,4.46,0,0,2.83,6,1.07,9.11,0,0-1.08-8.09-2-8.13,0,0-3.57,5.36-3.94,9a19.46,19.46,0,0,1,3.07-9.54,10.71,10.71,0,0,0-5.46,2.83s.55-3.79,6.34-4.12c0,0,3-4.07,3.74-4.32,0,0-5.76-.48-9.25,1.07,0,0,3.07-3.57,10.31-2l4-3.3s-7.58-1-10.8.11c0,0,3.7-3.16,11.89-.86l4.4-2.63s-6.46-1.4-10.31-.89c0,0,4.06-2.19,11.6.18l3.15-1.41s-4.74-.93-6.12-1.08-1.46-.53-1.46-.53a16.36,16.36,0,0,1,8.89,1S749.14,167.84,749,167.42Z" transform="translate(-95.23 -55.03)" fill="#d00d00"/><path d="M864.46,300.76s-38-2.29-33.56,24.37c0,0-.89,4.71,3.38,6.85,0,0,.07-2,3.91-1.31a17.51,17.51,0,0,0,4.13.2,8.56,8.56,0,0,0,5-2.08h0s10.7-4.42,14.86-21.9c0,0,3.07-3.81,2.95-4.79l-6.42,2.74s2.19,4.63.47,8.48c0,0-.21-8.31-1.44-8.12-.25,0-3.34,1.61-3.34,1.61s3.78,8.07.93,13.93c0,0,1.08-9.94-2.11-13.35L848.75,310s4.41,8.33,1.42,15.13c0,0,.77-10.43-2.37-14.49l-4.09,3.2s4.14,8.21,1.62,13.85c0,0-.33-12.14-2.51-13.06,0,0-3.58,3.16-4.13,4.46,0,0,2.84,6,1.08,9.11,0,0-1.08-8.09-2-8.13,0,0-3.57,5.36-3.94,9a19.52,19.52,0,0,1,3.08-9.54,10.76,10.76,0,0,0-5.47,2.83s.56-3.79,6.35-4.12c0,0,2.95-4.07,3.74-4.32,0,0-5.76-.48-9.25,1.07,0,0,3.07-3.57,10.3-1.95l4-3.3s-7.59-1-10.8.11c0,0,3.7-3.16,11.89-.86l4.4-2.63s-6.47-1.39-10.32-.89c0,0,4.07-2.19,11.61.18l3.15-1.41s-4.74-.93-6.13-1.08-1.46-.53-1.46-.53a16.39,16.39,0,0,1,8.9,1S864.58,301.18,864.46,300.76Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M633.61,277.09s8.75-37.09-18.29-37.22c0,0-4.49-1.68-7.32,2.16,0,0,1.93.41.62,4.07a17.8,17.8,0,0,0-.9,4,8.59,8.59,0,0,0,1.19,5.33h0s2.53,11.3,19,18.38c0,0,3.24,3.68,4.22,3.72l-1.6-6.79s-4.94,1.37-8.44-1c0,0,8.23,1.21,8.24,0,0-.25-1-3.56-1-3.56s-8.59,2.34-13.89-1.47c0,0,9.61,2.76,13.52.21L627.16,260s-9,2.93-15.16-1.18c0,0,10.15,2.54,14.69.14l-2.45-4.58s-8.8,2.68-13.93-.77c0,0,12,1.74,13.3-.24,0,0-2.5-4.07-3.69-4.83,0,0-6.36,1.78-9.16-.49,0,0,8.15.31,8.34-.55,0,0-4.67-4.43-8.23-5.43a19.6,19.6,0,0,1,8.89,4.66,10.79,10.79,0,0,0-1.86-5.87s3.64,1.2,3,7c0,0,3.5,3.6,3.61,4.42,0,0,1.45-5.59.52-9.3,0,0,3,3.64.17,10.49l2.56,4.55s2.32-7.3,1.73-10.66c0,0,2.49,4.18-1.18,11.86l1.85,4.79s2.47-6.14,2.63-10c0,0,1.47,4.38-2.16,11.41l.86,3.34s1.72-4.51,2.1-5.85.77-1.35.77-1.35a16.38,16.38,0,0,1-2.49,8.6S633.18,277.14,633.61,277.09Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M550.39,289.73s-30.52-22.83-41.43,1.9c0,0-3.33,3.45-.94,7.58,0,0,1.14-1.61,4,1.06a17.51,17.51,0,0,0,3.34,2.44,8.58,8.58,0,0,0,5.37,1h0s11.36,2.19,24.44-10.12c0,0,4.67-1.5,5.11-2.38L543.39,290s-.72,5.07-4.27,7.34c0,0,4.39-7.06,3.25-7.57-.23-.11-3.67-.5-3.67-.5s-1.28,8.82-6.88,12.15c0,0,6.37-7.71,5.58-12.31l-5.23-.28s-.89,9.39-7.13,13.43c0,0,6.37-8.29,6-13.41l-5.18.42s-1.05,9.13-6.26,12.45c0,0,6.39-10.32,5.08-12.28,0,0-4.73.67-5.9,1.45,0,0-.91,6.54-4.11,8.2,0,0,3.55-7.35,2.83-7.86,0,0-5.93,2.51-8.26,5.37a19.53,19.53,0,0,1,7.82-6.28,10.77,10.77,0,0,0-6.12-.64s2.54-2.86,7.56.05c0,0,4.7-1.77,5.5-1.55,0,0-4.55-3.57-8.32-4.19,0,0,4.54-1.3,9.69,4l5.19-.53s-5.77-5-9.08-5.84c0,0,4.83-.61,10.4,5.81l5.12.23s-4.63-4.72-8.12-6.42c0,0,4.59.4,9.59,6.53l3.41.55s-3.45-3.38-4.53-4.26-.93-1.25-.93-1.25a16.43,16.43,0,0,1,6.89,5.72S550.26,290.14,550.39,289.73Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M652,77.62s-30.52-22.84-41.43,1.9c0,0-3.33,3.45-.94,7.58,0,0,1.14-1.61,4,1.06a17.79,17.79,0,0,0,3.35,2.43,8.57,8.57,0,0,0,5.37,1h0s11.36,2.19,24.44-10.13c0,0,4.67-1.49,5.1-2.38L645,77.89s-.71,5.07-4.27,7.34c0,0,4.4-7.06,3.26-7.57-.23-.11-3.67-.5-3.67-.5S639,86,633.4,89.31c0,0,6.36-7.71,5.58-12.31l-5.23-.28s-.9,9.39-7.13,13.42c0,0,6.37-8.29,6-13.41l-5.17.42s-1.06,9.14-6.27,12.46c0,0,6.4-10.32,5.09-12.28,0,0-4.73.67-5.9,1.45,0,0-.91,6.54-4.11,8.2,0,0,3.55-7.35,2.83-7.87,0,0-5.93,2.52-8.26,5.38a19.44,19.44,0,0,1,7.82-6.28,10.7,10.7,0,0,0-6.13-.64s2.55-2.86,7.57.05c0,0,4.7-1.78,5.5-1.55,0,0-4.55-3.57-8.32-4.2,0,0,4.53-1.29,9.68,4l5.19-.53s-5.76-5-9.08-5.85c0,0,4.83-.6,10.41,5.82l5.12.22s-4.63-4.72-8.13-6.41c0,0,4.6.4,9.6,6.53l3.4.55S640,72.86,638.92,72s-.93-1.24-.93-1.24a16.4,16.4,0,0,1,6.89,5.72S651.83,78,652,77.62Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M768.62,106.55s-12.2-36.11-35.21-21.92c0,0-4.7,1-5.07,5.71,0,0,1.85-.68,2.67,3.12a18,18,0,0,0,1.37,3.91,8.66,8.66,0,0,0,3.84,3.89h0s8.12,8.25,25.88,5.52c0,0,4.69,1.42,5.55.93l-5-4.91s-3.46,3.77-7.68,3.62c0,0,7.63-3.32,7-4.39-.13-.21-2.74-2.48-2.74-2.48s-6.06,6.53-12.56,6.1c0,0,9.61-2.74,11.57-7l-4.14-3.19s-6.06,7.22-13.49,7c0,0,10-3.21,12.53-7.65l-4.5-2.59s-6,6.93-12.22,6.71c0,0,11.12-4.87,11.15-7.23,0,0-4.27-2.13-5.68-2.15,0,0-4.46,4.87-8,4.43,0,0,7.08-4.05,6.78-4.88,0,0-6.3-1.29-9.85-.25a19.49,19.49,0,0,1,10-.75,10.79,10.79,0,0,0-4.69-4s3.72-.91,6.21,4.33c0,0,4.88,1.21,5.4,1.84,0,0-1.72-5.51-4.47-8.17,0,0,4.47,1.51,5.69,8.82l4.58,2.5s-1.89-7.41-4.17-10c0,0,4.33,2.24,5.27,10.69l4.1,3.09s-1.14-6.52-3.06-9.9c0,0,3.56,2.94,4.2,10.83l2.49,2.38s-.92-4.74-1.3-6.08S761,93,761,93a16.49,16.49,0,0,1,2.43,8.62S768.27,106.81,768.62,106.55Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M689,108.33S651.1,104.11,654.23,131c0,0-1.13,4.66,3,7,0,0,.17-2,4-1.1a18.4,18.4,0,0,0,4.12.41,8.6,8.6,0,0,0,5.15-1.83h0s10.91-3.87,16-21.12c0,0,3.26-3.65,3.19-4.64l-6.55,2.42s2,4.73,0,8.49c0,0,.21-8.31-1-8.18-.25,0-3.41,1.44-3.41,1.44s3.36,8.25.22,14c0,0,1.58-9.88-1.43-13.44l-4.65,2.4s4,8.55.65,15.19c0,0,1.3-10.38-1.63-14.59l-4.25,3s3.72,8.41.91,13.92c0,0,.29-12.14-1.84-13.17,0,0-3.74,3-4.35,4.24,0,0,2.53,6.1.62,9.15,0,0-.67-8.13-1.55-8.21,0,0-3.84,5.17-4.4,8.82a19.47,19.47,0,0,1,3.56-9.38,10.76,10.76,0,0,0-5.6,2.55s.74-3.75,6.54-3.79c0,0,3.15-3.91,4-4.12,0,0-5.73-.77-9.3.6,0,0,3.25-3.42,10.39-1.43l4.21-3.09S663.22,115,660,116c0,0,3.86-3,11.92-.25l4.53-2.41s-6.39-1.72-10.26-1.41c0,0,4.17-2,11.58.77l3.22-1.25s-4.69-1.17-6.07-1.39-1.43-.6-1.43-.6a16.45,16.45,0,0,1,8.84,1.44S689.07,108.75,689,108.33Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M1020.6,402.5s-37.88-4.22-34.75,22.64c0,0-1.13,4.66,3,7,0,0,.17-2,4-1.11a17.3,17.3,0,0,0,4.12.41,8.53,8.53,0,0,0,5.15-1.83h0s10.91-3.87,15.95-21.11c0,0,3.26-3.66,3.19-4.64l-6.55,2.41s2,4.74,0,8.5c0,0,.21-8.32-1-8.18-.25,0-3.41,1.43-3.41,1.43s3.36,8.25.22,14c0,0,1.58-9.87-1.43-13.44l-4.65,2.41s4,8.55.66,15.19c0,0,1.29-10.38-1.64-14.6l-4.25,3s3.72,8.41.91,13.91c0,0,.29-12.14-1.84-13.16,0,0-3.73,3-4.35,4.24,0,0,2.54,6.1.62,9.15,0,0-.67-8.13-1.55-8.21,0,0-3.84,5.17-4.4,8.82a19.47,19.47,0,0,1,3.56-9.38,10.67,10.67,0,0,0-5.6,2.55s.74-3.76,6.54-3.8c0,0,3.16-3.91,4-4.11,0,0-5.73-.78-9.3.59,0,0,3.25-3.41,10.4-1.42l4.2-3.09s-7.52-1.42-10.79-.44c0,0,3.86-3,11.92-.26l4.53-2.4s-6.39-1.72-10.26-1.41c0,0,4.17-2,11.58.77l3.22-1.26s-4.69-1.17-6.07-1.38-1.43-.6-1.43-.6a16.39,16.39,0,0,1,8.84,1.43S1020.7,402.93,1020.6,402.5Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M1078.51,437.88s-37.88-4.21-34.75,22.64c0,0-1.12,4.66,3,7,0,0,.17-2,4-1.1a17.65,17.65,0,0,0,4.11.4A8.64,8.64,0,0,0,1060,465h0s10.9-3.87,15.94-21.12c0,0,3.27-3.65,3.19-4.64l-6.55,2.41s2,4.74,0,8.5c0,0,.21-8.31-1-8.18-.25,0-3.41,1.43-3.41,1.43s3.36,8.25.22,14c0,0,1.58-9.87-1.43-13.43l-4.65,2.4s4,8.55.66,15.19c0,0,1.29-10.38-1.64-14.59l-4.25,3s3.72,8.41.92,13.92c0,0,.28-12.15-1.85-13.17,0,0-3.73,3-4.35,4.24,0,0,2.54,6.1.62,9.15,0,0-.67-8.13-1.55-8.21,0,0-3.84,5.17-4.39,8.82a19.52,19.52,0,0,1,3.55-9.38,10.76,10.76,0,0,0-5.6,2.55s.75-3.76,6.55-3.79c0,0,3.15-3.91,4-4.12,0,0-5.73-.77-9.3.6,0,0,3.25-3.42,10.4-1.43l4.2-3.09s-7.52-1.42-10.79-.44c0,0,3.86-3,11.92-.25l4.53-2.41s-6.39-1.72-10.26-1.41c0,0,4.17-2,11.58.77l3.22-1.25s-4.69-1.17-6.06-1.39-1.44-.6-1.44-.6a16.45,16.45,0,0,1,8.84,1.44S1078.61,438.31,1078.51,437.88Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M949.94,139.87s-30.52-22.83-41.43,1.9c0,0-3.33,3.45-.94,7.58,0,0,1.14-1.61,4,1.06a17.51,17.51,0,0,0,3.34,2.44,8.59,8.59,0,0,0,5.37,1h0s11.36,2.19,24.45-10.12c0,0,4.66-1.5,5.1-2.38l-6.87-1.24s-.72,5.07-4.27,7.34c0,0,4.39-7.06,3.25-7.57-.23-.11-3.66-.5-3.66-.5s-1.29,8.82-6.89,12.15c0,0,6.37-7.71,5.58-12.31l-5.23-.28s-.89,9.39-7.13,13.43c0,0,6.38-8.29,6-13.41l-5.18.42s-1,9.13-6.26,12.45c0,0,6.4-10.32,5.08-12.28,0,0-4.73.67-5.9,1.45,0,0-.9,6.54-4.1,8.2,0,0,3.54-7.35,2.82-7.86,0,0-5.93,2.51-8.26,5.37a19.53,19.53,0,0,1,7.82-6.28,10.77,10.77,0,0,0-6.12-.64s2.55-2.86,7.57.05c0,0,4.69-1.77,5.49-1.55,0,0-4.55-3.57-8.32-4.19,0,0,4.54-1.3,9.69,4l5.19-.53s-5.76-5-9.08-5.84c0,0,4.83-.61,10.4,5.81l5.13.23s-4.64-4.72-8.13-6.42c0,0,4.6.4,9.59,6.53l3.41.55s-3.45-3.38-4.53-4.26S936,133,936,133a16.44,16.44,0,0,1,6.88,5.72S949.81,140.28,949.94,139.87Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M973.52,304.69S963,268.06,939.34,281.21c0,0-4.74.73-5.33,5.47,0,0,1.88-.59,2.53,3.24a17.73,17.73,0,0,0,1.2,4A8.59,8.59,0,0,0,941.4,298h0s7.74,8.6,25.6,6.68c0,0,4.62,1.62,5.5,1.18l-4.73-5.14s-3.63,3.62-7.83,3.28c0,0,7.76-3,7.16-4.07-.12-.22-2.62-2.61-2.62-2.61s-6.34,6.26-12.82,5.53c0,0,9.73-2.3,11.87-6.44l-4-3.38s-6.38,6.94-13.79,6.4c0,0,10.08-2.77,12.86-7.08l-4.38-2.79s-6.35,6.65-12.51,6.15c0,0,11.33-4.37,11.47-6.72,0,0-4.18-2.32-5.59-2.4,0,0-4.67,4.66-8.22,4.06,0,0,7.26-3.73,7-4.57,0,0-6.24-1.57-9.83-.7a19.51,19.51,0,0,1,10-.29,10.73,10.73,0,0,0-4.5-4.2s3.76-.75,6,4.6c0,0,4.81,1.42,5.31,2.08,0,0-1.47-5.59-4.1-8.36,0,0,4.4,1.7,5.29,9.06l4.46,2.71s-1.56-7.5-3.72-10.14c0,0,4.22,2.43,4.79,10.91l4,3.27s-.85-6.56-2.61-10c0,0,3.43,3.1,3.71,11l2.38,2.5s-.7-4.78-1-6.14,0-1.55,0-1.55a16.39,16.39,0,0,1,2.05,8.72S973.16,304.93,973.52,304.69Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M739.1,387.23s-20.43-32.18-39.4-12.92c0,0-4.34,2-3.58,6.75,0,0,1.65-1.1,3.35,2.4a17.12,17.12,0,0,0,2.26,3.46,8.54,8.54,0,0,0,4.65,2.88h0s9.85,6.08,26.45-.8c0,0,4.89.26,5.61-.41l-6-3.6s-2.47,4.5-6.6,5.35c0,0,6.62-5,5.73-5.92-.17-.18-3.25-1.76-3.25-1.76s-4.33,7.78-10.75,8.91c0,0,8.69-4.95,9.59-9.53l-4.79-2.11s-4.17,8.45-11.43,10c0,0,8.9-5.49,10.35-10.41l-5-1.44s-4.22,8.17-10.27,9.42c0,0,9.64-7.38,9.11-9.68,0,0-4.66-1.05-6-.73,0,0-3.17,5.79-6.75,6.21,0,0,5.92-5.62,5.43-6.36,0,0-6.43.25-9.63,2.1a19.46,19.46,0,0,1,9.54-3.1,10.73,10.73,0,0,0-5.49-2.77s3.39-1.77,7,2.73c0,0,5,0,5.69.5,0,0-3-5-6.29-6.87,0,0,4.7.4,7.62,7.21l5.05,1.34s-3.61-6.75-6.42-8.68c0,0,4.73,1.14,7.66,9.13l4.72,2s-2.66-6.05-5.33-8.88c0,0,4.16,2,6.65,9.51l3,1.73s-2-4.39-2.71-5.6-.43-1.49-.43-1.49a16.4,16.4,0,0,1,4.41,7.79S738.83,387.57,739.1,387.23Z" transform="translate(-95.23 -55.03)" fill="#d00d00" opacity="0.1"/><path d="M873.37,222.81s-19.43-32.79-39-14.13c0,0-4.4,1.9-3.78,6.64,0,0,1.67-1.06,3.27,2.49a17.28,17.28,0,0,0,2.15,3.54,8.49,8.49,0,0,0,4.56,3h0s9.65,6.38,26.46,0c0,0,4.88.41,5.62-.24l-5.87-3.78s-2.6,4.41-6.76,5.14c0,0,6.77-4.83,5.92-5.74-.18-.19-3.2-1.87-3.2-1.87s-4.57,7.65-11,8.58c0,0,8.84-4.68,9.87-9.22L856.89,215s-4.43,8.33-11.74,9.66c0,0,9.07-5.21,10.67-10.08l-4.94-1.6s-4.48,8-10.56,9.1c0,0,9.86-7.08,9.4-9.39,0,0-4.62-1.2-6-.92,0,0-3.35,5.69-6.94,6,0,0,6.09-5.42,5.63-6.18,0,0-6.44.05-9.69,1.8a19.52,19.52,0,0,1,9.63-2.8,10.75,10.75,0,0,0-5.41-2.94s3.45-1.67,7,2.94c0,0,5,.17,5.67.68,0,0-2.83-5-6.07-7.06,0,0,4.68.54,7.39,7.44l5,1.5s-3.39-6.86-6.15-8.88c0,0,4.7,1.29,7.38,9.36l4.65,2.17s-2.47-6.13-5-9c0,0,4.09,2.13,6.36,9.71l2.93,1.82s-1.88-4.45-2.54-5.68-.38-1.5-.38-1.5a16.43,16.43,0,0,1,4.17,7.92S873.08,223.14,873.37,222.81Z" transform="translate(-95.23 -55.03)" fill="#d00d00"/><path d="M750.44,291.76s1-38.1-25.47-32.73c0,0-4.74-.73-6.74,3.61,0,0,2,0,1.44,3.85a17.56,17.56,0,0,0-.06,4.14,8.55,8.55,0,0,0,2.25,5h0s4.77,10.54,22.38,14.12c0,0,3.91,2.95,4.89,2.79l-3-6.32s-4.55,2.34-8.46.75c0,0,8.3-.49,8.07-1.71,0-.25-1.72-3.29-1.72-3.29s-7.94,4.05-13.89,1.39c0,0,10,.75,13.27-2.54l-2.79-4.43s-8.18,4.68-15.08,1.92c0,0,10.45.42,14.41-2.85l-3.33-4s-8.07,4.42-13.79,2.08c0,0,12.12-.73,13-2.94,0,0-3.28-3.47-4.6-4,0,0-5.86,3-9.06,1.38,0,0,8-1.34,8.05-2.23,0,0-5.47-3.39-9.16-3.64a19.47,19.47,0,0,1,9.65,2.76,10.75,10.75,0,0,0-3-5.37s3.81.43,4.33,6.2c0,0,4.17,2.82,4.44,3.6,0,0,.29-5.77-1.38-9.21,0,0,3.68,2.95,2.3,10.23l3.43,3.94s.78-7.62-.47-10.79c0,0,3.28,3.59,1.26,11.85l2.77,4.31s1.18-6.51.55-10.34c0,0,2.32,4,.2,11.61l1.52,3.1s.77-4.77.87-6.16.48-1.48.48-1.48a16.42,16.42,0,0,1-.69,8.93S750,291.89,750.44,291.76Z" transform="translate(-95.23 -55.03)" fill="#d00d00"/><ellipse cx="698.97" cy="716.3" rx="26.93" ry="4.55" fill="#d00d00" opacity="0.1"/><ellipse cx="600.8" cy="785.38" rx="26.93" ry="4.55" fill="#d00d00" opacity="0.1"/><ellipse cx="93.14" cy="749.99" rx="26.93" ry="4.55" fill="#d00d00" opacity="0.1"/><ellipse cx="805.06" cy="780.83" rx="26.93" ry="4.55" fill="#d00d00" opacity="0.1"/><ellipse cx="833.1" cy="723.1" rx="40.21" ry="6.8" fill="#d00d00"/><path d="M945,767a11.61,11.61,0,0,0,3.83-5.78c.5-2.3-.48-5.05-2.67-5.89-2.46-.94-5.09.76-7.09,2.48s-4.27,3.69-6.88,3.33a10.5,10.5,0,0,0,3.24-9.81,4.11,4.11,0,0,0-.9-2c-1.37-1.46-3.84-.83-5.48.32-5.2,3.66-6.65,10.72-6.68,17.08-.52-2.29-.08-4.68-.09-7s-.66-5-2.65-6.22a7.91,7.91,0,0,0-4-1c-2.34-.08-4.95.15-6.54,1.86-2,2.12-1.47,5.69.25,8s4.35,3.8,6.77,5.42a15.13,15.13,0,0,1,4.84,4.61,4.7,4.7,0,0,1,.35.82h14.66A40.44,40.44,0,0,0,945,767Z" transform="translate(-95.23 -55.03)" fill="#d00d00"/><path d="M170.29,783.87s15.35-.47,20-3.77,23.63-7.23,24.78-1.94,23.08,26.29,5.74,26.43-40.29-2.7-44.91-5.52S170.29,783.87,170.29,783.87Z" transform="translate(-95.23 -55.03)" fill="#a8a8a8"/><path d="M221.1,802.75c-17.34.14-40.29-2.7-44.91-5.52-3.52-2.14-4.92-9.83-5.39-13.38l-.51,0s1,12.39,5.59,15.2,27.57,5.66,44.91,5.52c5,0,6.73-1.82,6.64-4.46C226.73,801.72,224.82,802.72,221.1,802.75Z" transform="translate(-95.23 -55.03)" opacity="0.2"/></svg>


--------------------------------------------------------------------------------