├── .gitignore ├── README.md ├── backend.rar ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── img │ ├── airpod.jpg │ ├── ali.jpg │ ├── bag.jpg │ ├── deli.jpeg │ ├── headphone.jpg │ ├── iphone-black.jpg │ ├── iphone-purple.jpg │ ├── laptop.jpg │ ├── lazer.jpg │ ├── macbook.jpg │ ├── milad.jpg │ ├── oil.jpg │ ├── perfume.jpg │ ├── profile.jpg │ ├── profilee.jpg │ ├── qab.jpg │ ├── qabiphon.jpg │ ├── shampo.jpg │ ├── sharger.jpg │ └── shis.jpg ├── index.html ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── Components ├── AddNewProduct │ ├── AddNewProduct.css │ └── AddNewProduct.jsx ├── CommentTextModal │ ├── CommentTextModal.css │ └── CommentTextModal.jsx ├── DeleteModal │ ├── DeleteModal.css │ └── DeleteModal.jsx ├── Detailes │ ├── DetailsModal.css │ └── DetailsModal.jsx ├── EditModal │ ├── EditModal.css │ └── EditModal.jsx ├── Error │ ├── Error.css │ └── Error.jsx ├── Header │ ├── Header.css │ └── Header.jsx ├── Loader │ ├── Loader.css │ └── Loader.jsx ├── ProductTable │ ├── ProductTable.css │ └── ProductTable.jsx └── SideBar │ ├── SideBar.css │ └── SideBar.jsx ├── cms.css ├── custom.css ├── font └── Vazir.ttf ├── index.css ├── index.js ├── page ├── Comments │ ├── Comments.css │ └── Comments.jsx ├── Offs │ ├── Offs.css │ └── Offs.jsx ├── Orders │ ├── Orders.css │ └── Orders.jsx ├── Products │ ├── Products.css │ └── Products.jsx └── Users │ ├── Users.css │ └── Users.jsx ├── reset.css ├── routes.js └── setupTests.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /backend.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/backend.rar -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cms", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "bootstrap": "^5.2.3", 10 | "react": "^18.2.0", 11 | "react-bootstrap": "^2.7.0", 12 | "react-dom": "^18.2.0", 13 | "react-icons": "^4.7.1", 14 | "react-router-dom": "^6.5.0", 15 | "react-scripts": "5.0.1", 16 | "react-toastify": "^9.1.1", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/favicon.ico -------------------------------------------------------------------------------- /public/img/airpod.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/airpod.jpg -------------------------------------------------------------------------------- /public/img/ali.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/ali.jpg -------------------------------------------------------------------------------- /public/img/bag.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/bag.jpg -------------------------------------------------------------------------------- /public/img/deli.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/deli.jpeg -------------------------------------------------------------------------------- /public/img/headphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/headphone.jpg -------------------------------------------------------------------------------- /public/img/iphone-black.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/iphone-black.jpg -------------------------------------------------------------------------------- /public/img/iphone-purple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/iphone-purple.jpg -------------------------------------------------------------------------------- /public/img/laptop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/laptop.jpg -------------------------------------------------------------------------------- /public/img/lazer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/lazer.jpg -------------------------------------------------------------------------------- /public/img/macbook.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/macbook.jpg -------------------------------------------------------------------------------- /public/img/milad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/milad.jpg -------------------------------------------------------------------------------- /public/img/oil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/oil.jpg -------------------------------------------------------------------------------- /public/img/perfume.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/perfume.jpg -------------------------------------------------------------------------------- /public/img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/profile.jpg -------------------------------------------------------------------------------- /public/img/profilee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/profilee.jpg -------------------------------------------------------------------------------- /public/img/qab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/qab.jpg -------------------------------------------------------------------------------- /public/img/qabiphon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/qabiphon.jpg -------------------------------------------------------------------------------- /public/img/shampo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/shampo.jpg -------------------------------------------------------------------------------- /public/img/sharger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/sharger.jpg -------------------------------------------------------------------------------- /public/img/shis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/public/img/shis.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | React App 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | display: flex; 3 | } 4 | 5 | .main { 6 | flex: 5; 7 | padding: 20px; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useRoutes } from 'react-router-dom'; 3 | import './App.css' 4 | import Header from './Components/Header/Header'; 5 | import SideBar from "./Components/SideBar/SideBar"; 6 | import router from './routes'; 7 | 8 | 9 | export default function App() { 10 | 11 | const routes = useRoutes(router) 12 | return ( 13 |
14 | 15 |
16 |
17 | 18 | {routes} 19 |
20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/Components/AddNewProduct/AddNewProduct.css: -------------------------------------------------------------------------------- 1 | .product-main { 2 | margin-top: 3.4rem; 3 | } 4 | .products-title { 5 | font-size: 1.2rem; 6 | font-weight: 600; 7 | } 8 | .add-product-form { 9 | margin-top: 1.8rem; 10 | background-color: var(--color-white); 11 | display: flex; 12 | flex-direction: column; 13 | align-items: flex-end; 14 | padding: 20px; 15 | border-radius: 20px; 16 | } 17 | .add-products-from-wrap { 18 | width: 100%; 19 | display: grid; 20 | grid-template-columns: 1fr 1fr; 21 | gap: 10px 15px; 22 | } 23 | .add-products-from-group { 24 | display: flex; 25 | align-items: center; 26 | column-gap: 10px; 27 | background-color: var(--color-white-50); 28 | border-radius: 15px; 29 | padding: 0 15px; 30 | 31 | } 32 | .add-products-input { 33 | border: none; 34 | outline: none; 35 | background: unset; 36 | padding: 8px 0; 37 | font-size: 0.9rem; 38 | width: 100%; 39 | } 40 | 41 | .add-products-btn { 42 | border: none; 43 | background-color: var(--color-purple); 44 | margin-top: 20px; 45 | padding: 10px 15px; 46 | font-size: 1rem; 47 | color: var(--color-white); 48 | border-radius: 20px; 49 | } 50 | -------------------------------------------------------------------------------- /src/Components/AddNewProduct/AddNewProduct.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import './AddNewProduct.css' 3 | import { AiOutlineDollar } from 'react-icons/ai' 4 | import { BsCursorText, BsBag } from 'react-icons/bs' 5 | import { HiOutlineArrowTrendingUp } from 'react-icons/hi2' 6 | import { TfiWrite } from 'react-icons/tfi' 7 | import { VscSymbolColor } from 'react-icons/vsc' 8 | import { IoImageOutline } from 'react-icons/io5' 9 | 10 | 11 | 12 | 13 | export default function ({ getAllProducts, errorNotify,successNotify }) { 14 | 15 | const [newProudctTitle, setNewProductTitle] = useState("") 16 | const [newProudctPrice, setNewProductPrice] = useState("") 17 | const [newProudctCount, setNewProductCount] = useState("") 18 | const [newProudctImg, setNewProductImg] = useState("") 19 | const [newProudctPopularity, setNewProductPopularity] = useState("") 20 | const [newProudctSale, setNewProductSale] = useState("") 21 | const [newProudctColors, setNewProductColors] = useState("") 22 | 23 | 24 | const addNewProduct = (e) => { 25 | e.preventDefault() 26 | const newProduct = { 27 | title: newProudctTitle, 28 | price: newProudctPrice, 29 | count: newProudctCount, 30 | img: newProudctImg, 31 | popularity: newProudctPopularity, 32 | sale: newProudctSale, 33 | colors: newProudctColors, 34 | } 35 | 36 | 37 | fetch('http://localhost:8000/api/products/', { 38 | method: 'POST', 39 | headers: { 40 | 'Content-type': 'application/json' 41 | }, 42 | body: JSON.stringify(newProduct) 43 | }).then(res => { 44 | getAllProducts() 45 | emptyInput() 46 | successNotify("ثبت محصول موفقیت امیز بود") 47 | }).catch(err =>{ 48 | errorNotify("ثبت محصول موفقیت امیز نبود") 49 | }) 50 | } 51 | 52 | const emptyInput = () => { 53 | setNewProductTitle("") 54 | setNewProductPrice("") 55 | setNewProductCount("") 56 | setNewProductImg("") 57 | setNewProductPopularity("") 58 | setNewProductSale("") 59 | } 60 | 61 | return ( 62 |
63 |

افزودن محصولات جدید

64 |
65 | 66 |
67 |
68 | 69 | setNewProductTitle(e.target.value)} 74 | /> 75 |
76 |
77 | 78 | setNewProductPrice(e.target.value)} 83 | /> 84 |
85 |
86 | 87 | setNewProductCount(e.target.value)} 92 | /> 93 |
94 |
95 | 96 | setNewProductImg(e.target.value)} 101 | /> 102 |
103 |
104 | 105 | setNewProductPopularity(e.target.value)} 110 | /> 111 |
112 |
113 | 114 | 115 | setNewProductSale(e.target.value)} 120 | /> 121 |
122 |
123 | 124 | setNewProductColors(e.target.value)} 129 | /> 130 |
131 | 132 |
133 | 134 |
135 |
136 | ) 137 | } 138 | -------------------------------------------------------------------------------- /src/Components/CommentTextModal/CommentTextModal.css: -------------------------------------------------------------------------------- 1 | .text-modal { 2 | width: 500px; 3 | text-align: center; 4 | line-height: 1.5; 5 | position: relative; 6 | padding: 1.6rem; 7 | background-color: var(--color-white); 8 | font-size: 1rem; 9 | border-radius: 10px; 10 | box-shadow: rgba(149, 157, 165, 0.2) 0 8px 23px; 11 | } 12 | 13 | .text-modal-btns { 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | margin-top: 50px; 18 | } 19 | 20 | .text-btn { 21 | width: 100%; 22 | font-size: 1rem; 23 | font-weight: 500; 24 | padding: 15px 0; 25 | border: none; 26 | border-radius: 5px; 27 | } 28 | 29 | .text-btn.text-close { 30 | color: #fff; 31 | background-color: var(--color-purple); 32 | border-radius: 30px; 33 | } 34 | -------------------------------------------------------------------------------- /src/Components/CommentTextModal/CommentTextModal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './CommentTextModal.css' 4 | export default function CommentTextModal({ cloesCommentModal,commentUser }) { 5 | return ReactDOM.createPortal( 6 |
7 |
8 |

{commentUser}

9 |
10 | 11 |
12 |
13 |
, document.getElementById('modals-parent') 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/Components/DeleteModal/DeleteModal.css: -------------------------------------------------------------------------------- 1 | .delete-modal h1 { 2 | font-size: 1.3rem; 3 | } 4 | 5 | .delete-modal-btns { 6 | display: flex; 7 | gap: 10px; 8 | margin-top: 30px; 9 | } 10 | 11 | .delete-btn { 12 | width: 100%; 13 | font-size: 1.1rem; 14 | font-weight: 600; 15 | padding: .7rem .8rem; 16 | border: none; 17 | border-radius: 5px; 18 | } 19 | 20 | .delete-modal-accept-btn { 21 | background-color: var(--color-purple); 22 | color: #fff; 23 | } 24 | .delete-modal-reject-btn { 25 | background-color: var(--color-white); 26 | border: 2px solid var(--color-purple); 27 | } 28 | 29 | @keyframes show { 30 | 0%{opacity: 0;} 31 | 100%{opacity: 1;} 32 | } -------------------------------------------------------------------------------- /src/Components/DeleteModal/DeleteModal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './DeleteModal.css' 4 | 5 | 6 | export default function DeleteModal({submitModal, canselModal , title}) { 7 | return ReactDOM.createPortal( 8 |
9 |
10 |

{title}

11 |
12 | 13 | 14 |
15 |
16 |
17 | , document.getElementById('modals-parent') 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/Components/Detailes/DetailsModal.css: -------------------------------------------------------------------------------- 1 | .details-modal { 2 | position: relative; 3 | padding: 1.6rem; 4 | background-color: var(--color-white); 5 | font-size: 1rem; 6 | border-radius: 10px; 7 | box-shadow: rgba(149,157,165,0.2) 0 8px 23px; 8 | } 9 | 10 | .details-modal-btns { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | margin-top: 20px; 15 | } 16 | 17 | .details-btn { 18 | width: 100%; 19 | font-size: 1rem; 20 | font-weight: 500; 21 | padding: 15px 0; 22 | border: none; 23 | border-radius: 5px; 24 | } 25 | 26 | .details-btn.detail-close { 27 | color: #fff; 28 | background-color: var(--color-purple); 29 | border-radius: 30px; 30 | } 31 | -------------------------------------------------------------------------------- /src/Components/Detailes/DetailsModal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './DetailsModal.css' 3 | 4 | export default function DetailsModal({ closeBtn, children }) { 5 | return ( 6 |
7 |
8 | 9 | {children} 10 | 11 |
12 | 13 |
14 |
15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/Components/EditModal/EditModal.css: -------------------------------------------------------------------------------- 1 | .edit-modal-form{ 2 | width: 400px; 3 | background-color: var(--color-white); 4 | border-radius: 10px; 5 | padding: 1.5rem; 6 | 7 | } 8 | .edit-modal-form h1{ 9 | text-align: center; 10 | font-size: 1.1rem; 11 | margin-bottom: 1.5rem; 12 | } 13 | .edit-modal-btns { 14 | display: flex; 15 | gap: 10px; 16 | margin-top: 30px; 17 | } 18 | 19 | .edit-btn { 20 | width: 100%; 21 | font-size: 1.1rem; 22 | font-weight: 500; 23 | padding: .7rem .6rem; 24 | border: none; 25 | border-radius: 30px; 26 | } 27 | 28 | .edit-modal-confirm-btn { 29 | background-color: var(--color-purple); 30 | color: var(--color-white); 31 | } 32 | .edit-modal-reject-btn { 33 | background-color: var(--color-white); 34 | border: 3px solid var(--color-purple); 35 | } 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/Components/EditModal/EditModal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './EditModal.css' 3 | export default function EditModal({ children, onClose, onSubmit }) { 4 | return ( 5 |
6 |
7 |

اطلاعات جدید را وارد نمایید

8 | 9 | 10 | {children} 11 | 12 |
13 | 14 | 15 |
16 |
17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/Components/Error/Error.css: -------------------------------------------------------------------------------- 1 | .cms-empty-error{ 2 | box-shadow: rgba(149, 157, 165, 0.587) 0 8px 23px; 3 | /* background-color: #f82153a1; */ 4 | background-color: #f82121df; 5 | font-size: 1.2rem; 6 | border-radius: 5px; 7 | margin-top: 5rem; 8 | padding: 1.3rem; 9 | color: var(--color-white); 10 | text-align: center; 11 | } -------------------------------------------------------------------------------- /src/Components/Error/Error.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Error.css' 3 | export default function Error({msg}) { 4 | return ( 5 |
6 |

{msg}

7 | 8 |
9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /src/Components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .header{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-between; 5 | } 6 | .admin-profile{ 7 | display: flex; 8 | column-gap: 20px; 9 | align-items: center; 10 | } 11 | .admin-profile img{ 12 | width: 50px; 13 | height: 50px; 14 | border-radius: 50%; 15 | object-fit: cover; 16 | 17 | } 18 | .admin-profile div { 19 | display: flex; 20 | flex-direction: column; 21 | row-gap: 5px; 22 | } 23 | .admin-profile div h2{ 24 | font-size: 1rem; 25 | font-weight: 600; 26 | } 27 | .admin-profile div h3{ 28 | color: #858585; 29 | font-size: .8rem; 30 | } 31 | .header-left-section{ 32 | display: flex; 33 | column-gap: 17px; 34 | } 35 | .search-Box{ 36 | background-color: var(--color-white); 37 | display: flex; 38 | width: 350px; 39 | height:39px; 40 | border-radius: 15px; 41 | align-items: center; 42 | justify-content: space-between; 43 | padding: 0 6px 0 6px; 44 | box-shadow: rgba(149,157,165,0.2) 0 8px 23px; 45 | } 46 | .search-Box input{ 47 | outline: none; 48 | background: none; 49 | border: none; 50 | width: 100%; 51 | padding: 10px 20px; 52 | font-size: 1rem; 53 | 54 | } 55 | 56 | .search-Box button{ 57 | border: none; 58 | background-color: var( --color-purple); 59 | display: flex; 60 | font-size: .8rem; 61 | border-radius:20px ; 62 | color: var(--color-white); 63 | padding: 9px 0; 64 | width: 135px; 65 | justify-content: center; 66 | } 67 | .header-left-icon{ 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | padding: 10px; 72 | border: none; 73 | border-radius: 50px; 74 | background-color: var(--color-purple); 75 | color: var(--color-white); 76 | width: 40px; 77 | height: 40px; 78 | box-shadow: rgba(149,157,165,0.2) 0 8px 23px; 79 | font-size: 2rem; 80 | font-weight: 900 81 | } -------------------------------------------------------------------------------- /src/Components/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {IoMdNotifications} from 'react-icons/io' 3 | import {BsFillBrightnessHighFill} from 'react-icons/bs' 4 | import './Header.css' 5 | export default function Header() { 6 | return ( 7 |
8 |
9 | 10 |
11 |

روشنک روشنی

12 |

برنامه نویس فرانت اند

13 |
14 |
15 | 16 |
17 |
18 | 19 | 20 |
21 | 22 | 23 | 24 |
25 |
26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /src/Components/Loader/Loader.css: -------------------------------------------------------------------------------- 1 | .loader-container { 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | background-color: var(--color-white); 11 | } 12 | 13 | .loader { 14 | width: 48px; 15 | height: 48px; 16 | border-radius: 50%; 17 | display: inline-block; 18 | border-top: 3px solid var(--color-purple); 19 | border-right: 3px solid transparent; 20 | box-sizing: border-box; 21 | animation: rotation 1s linear infinite; 22 | } 23 | 24 | @keyframes rotation { 25 | 0% { 26 | transform: rotate(0deg); 27 | } 28 | 100% { 29 | transform: rotate(360deg); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/Components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Loader.css' 3 | export default function Loader() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /src/Components/ProductTable/ProductTable.css: -------------------------------------------------------------------------------- 1 | .products-table { 2 | margin-top: 3rem; 3 | width: 100%; 4 | padding: 15px; 5 | background-color: var(--color-white); 6 | border-radius: 10px; 7 | text-align: center; 8 | position: relative; 9 | } 10 | 11 | .products-table td { 12 | text-align: center; 13 | vertical-align: middle; 14 | } 15 | 16 | .product-table-img { 17 | width: 85px; 18 | object-fit: cover; 19 | border-radius: 20px; 20 | } 21 | 22 | .product-table-btn { 23 | border: none; 24 | border-radius: 20px; 25 | background-color: var(--color-purple); 26 | color: var(--color-white); 27 | font-size: 0.8rem; 28 | padding: 0.7rem 1.2rem; 29 | margin-left: 1rem; 30 | text-align: center; 31 | } 32 | 33 | /* styles childeran editModal */ 34 | 35 | .edit--product--form_grop { 36 | width: 100%; 37 | margin-top: 1rem; 38 | padding: 8px 20px; 39 | display: flex; 40 | align-items: center; 41 | column-gap: 10px; 42 | background-color: var(--color-white-50); 43 | border-radius: 30px; 44 | } 45 | .edit--product_input { 46 | width: 100%; 47 | border: none; 48 | outline: none; 49 | background-color: unset; 50 | font-size: 0.9rem; 51 | } 52 | -------------------------------------------------------------------------------- /src/Components/ProductTable/ProductTable.jsx: -------------------------------------------------------------------------------- 1 | import React, { Children, useState, useEffect } from 'react' 2 | import { AiOutlineDollar } from 'react-icons/ai' 3 | import DeleteModal from '../DeleteModal/DeleteModal' 4 | import DetailsModal from '../Detailes/DetailsModal' 5 | import EditModal from '../EditModal/EditModal' 6 | import Error from '../Error/Error' 7 | import Loader from '../Loader/Loader' 8 | 9 | import './ProductTable.css' 10 | 11 | export default function ProductTable({ allProducts, isInProgress, getAllProducts, errorNotify, successNotify }) { 12 | const [isShowDeleteModal, setIsShowDeleteModal] = useState(false) 13 | const [isShowDetailsModal, setIsShowDetailsModal] = useState(false) 14 | const [isShowEditModal, setIsShowEditModal] = useState(false) 15 | const [mainProductInfo, setMainProductInfo] = useState({}) 16 | const [productID, setproductID] = useState(null) 17 | 18 | const [proudctNewTitle, setProductNewTitle] = useState("") 19 | const [proudctNewPrice, setProductNewPrice] = useState("") 20 | const [proudctNewCount, setProductNewCount] = useState("") 21 | const [proudctNewImg, setproductNewImg] = useState("") 22 | const [proudctNewPopularity, setProductNewPopularity] = useState("") 23 | const [proudctNewSale, setProductNewSale] = useState("") 24 | const [proudctNewColors, setProductNewColors] = useState("") 25 | 26 | 27 | 28 | //* Delete Modal Actions 29 | const deleteModalCalncelAction = () => { 30 | setIsShowDeleteModal(false) 31 | } 32 | 33 | const deleteModalConfirmAction = () => { 34 | // delete product with API 35 | console.log(productID); 36 | fetch(`http://localhost:8000/api/products/${productID}`, { 37 | method: 'DELETE' 38 | }).then((res) => res.json()) 39 | .then((result) => { 40 | setIsShowDeleteModal(false) 41 | getAllProducts() 42 | successNotify('حذف محصول موفقیت آمیز بود') 43 | }).catch(error => { 44 | errorNotify('حذف محصول موفقیت آمیز نبود') 45 | }) 46 | } 47 | 48 | //* Details Modal Actions 49 | const detailsModalClose = () => { 50 | setIsShowDetailsModal(false) 51 | } 52 | 53 | //* Edit Modal Actions 54 | const updateProductInfos = (e) => { 55 | e.preventDefault() 56 | const productNewInformation = { 57 | title: proudctNewTitle, 58 | price: proudctNewPrice, 59 | count: proudctNewCount, 60 | img: proudctNewImg, 61 | popularity: proudctNewPopularity, 62 | sale: proudctNewSale, 63 | colors: proudctNewColors, 64 | } 65 | fetch(`http://localhost:8000/api/products/${productID}`, { 66 | method: 'PUT', 67 | headers: { 68 | 'Content-type': 'application/json' 69 | }, 70 | body: JSON.stringify(productNewInformation) 71 | }).then((res) => res.json()) 72 | .then((result) => { 73 | getAllProducts() 74 | setIsShowEditModal(false) 75 | successNotify('تغییر اطلاعات موفقیت آمیز بود') 76 | }).catch(error => { 77 | errorNotify('تغییر اطلاعات موفقیت آمیز نبود') 78 | }) 79 | 80 | 81 | 82 | } 83 | const editModalClose = (e) => { 84 | e.preventDefault() 85 | setIsShowEditModal(false) 86 | } 87 | return ( 88 | <> 89 |
90 | { 91 | isInProgress ? ( 92 | 93 | ) : ( 94 | <> 95 | { 96 | allProducts.length ? ( 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | { 108 | allProducts.map((item) => ( 109 | 110 | 113 | 114 | 115 | 116 | 137 | 138 | )) 139 | } 140 | 141 | 142 | 143 |
عکساسمقیمتموجودی
111 | 112 | {item.title}{item.price}{item.count} 117 | 121 | 125 | 136 |
144 | ) : ( 145 | 146 | ) 147 | } 148 | 149 | {isShowDeleteModal && 150 | 155 | } 156 | 157 | {isShowDetailsModal && ( 158 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 |
محبوبیتفروشرنگ بندی
{mainProductInfo.popularity}{mainProductInfo.sale}{mainProductInfo.colors}
177 | 178 | )} 179 | { 180 | isShowEditModal && 181 | 185 | {/*Children*/} 186 |
187 | 188 | 189 | 190 | setProductNewTitle(e.target.value)} 195 | /> 196 |
197 |
198 | 199 | 200 | 201 | setProductNewPrice(e.target.value)} 207 | /> 208 |
209 |
210 | 211 | 212 | 213 | setProductNewCount(e.target.value)} 219 | /> 220 |
221 |
222 | 223 | 224 | 225 | setproductNewImg(e.target.value)} 231 | /> 232 |
233 |
234 | 235 | 236 | 237 | setProductNewPopularity(e.target.value)} 243 | /> 244 |
245 |
246 | 247 | 248 | 249 | setProductNewSale(e.target.value)} 255 | /> 256 |
257 |
258 | 259 | 260 | 261 | setProductNewColors(e.target.value)} 267 | /> 268 |
269 | 270 | } 271 | 272 | ) 273 | } 274 |
275 | 276 | 277 | ) 278 | } 279 | -------------------------------------------------------------------------------- /src/Components/SideBar/SideBar.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --item-height: 41.59px; 3 | } 4 | 5 | .sideBar { 6 | position: sticky; 7 | top: 0; 8 | right: 0; 9 | background-color: var(--color-purple); 10 | flex: 1; 11 | height: 100vh; 12 | } 13 | .sideBar-title { 14 | font-size: 1.2rem; 15 | color: var(--color-white); 16 | padding: 15px; 17 | text-align: right; 18 | font-weight: 600; 19 | margin: 1rem 0; 20 | } 21 | .sideBar-links { 22 | margin-top: 0.5rem; 23 | position: relative; 24 | } 25 | .sideBar-links li { 26 | position: relative; 27 | padding: 0.8rem; 28 | } 29 | .sideBar-links li a { 30 | width: 100%; 31 | text-decoration: none; 32 | color: var(--color-white); 33 | display: flex; 34 | justify-content: right; 35 | align-items: center; 36 | gap: 8px; 37 | font-size: 1rem; 38 | padding-right: .3rem; 39 | } 40 | .sideBar-links li.active { 41 | background-color: #bbaed9c8; 42 | border-radius: 2px; 43 | } 44 | 45 | /* * Line Animation */ 46 | 47 | .sideBar-links .underline { 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | width: 3px; 52 | height: 41.59px; 53 | background: #ded5f5fb; 54 | transition: all 0.3s; 55 | } 56 | 57 | /* Active */ 58 | .sideBar-links li:nth-child(1).active ~ .underline { 59 | transform: translateY(0); 60 | } 61 | .sideBar-links li:nth-child(2).active ~ .underline { 62 | transform: translateY(var(--item-height)); 63 | } 64 | .sideBar-links li:nth-child(3).active ~ .underline { 65 | transform: translateY(calc(var(--item-height) * 2)); 66 | } 67 | .sideBar-links li:nth-child(4).active ~ .underline { 68 | transform: translateY(calc(var(--item-height) * 3)); 69 | } 70 | .sideBar-links li:nth-child(5).active ~ .underline { 71 | transform: translateY(calc(var(--item-height) * 4)); 72 | } 73 | .sideBar-links li:nth-child(6).active ~ .underline { 74 | transform: translateY(calc(var(--item-height) * 5)); 75 | } 76 | 77 | /* Hover */ 78 | .sideBar-links li:nth-child(1):hover ~ .underline { 79 | transform: translateY(0); 80 | } 81 | .sideBar-links li:nth-child(2):hover ~ .underline { 82 | transform: translateY(var(--item-height)); 83 | } 84 | .sideBar-links li:nth-child(3):hover ~ .underline { 85 | transform: translateY(calc(var(--item-height) * 2)); 86 | } 87 | .sideBar-links li:nth-child(4):hover ~ .underline { 88 | transform: translateY(calc(var(--item-height) * 3)); 89 | } 90 | .sideBar-links li:nth-child(5):hover ~ .underline { 91 | transform: translateY(calc(var(--item-height) * 4)); 92 | } 93 | .sideBar-links li:nth-child(6):hover ~ .underline { 94 | transform: translateY(calc(var(--item-height) * 5)); 95 | } 96 | -------------------------------------------------------------------------------- /src/Components/SideBar/SideBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './SideBar.css' 3 | import { AiFillHome } from 'react-icons/ai' 4 | import { BsFillCartCheckFill, BsBagCheckFill } from 'react-icons/bs' 5 | import { MdInsertComment } from 'react-icons/md' 6 | import { HiUsers } from 'react-icons/hi' 7 | import { IoPricetags } from 'react-icons/io5' 8 | import { Link } from 'react-router-dom' 9 | 10 | export default function SideBar() { 11 | return ( 12 |
13 |

به داشبورد خوش آمدید!

14 | 15 | 61 |
62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /src/cms.css: -------------------------------------------------------------------------------- 1 | .modal-parent { 2 | width: 100%; 3 | height: 100vh; 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | z-index: 2; 8 | background-color: rgba(0, 0, 0, 0.5); 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | .show-modal { 14 | animation: show 0.4s linear 0s 1; 15 | } 16 | 17 | .delete-modal { 18 | background-color: var(--color-white); 19 | padding: 50px; 20 | text-align: center; 21 | border-radius: 10px; 22 | box-shadow: 1px 1px 38px 12px #545454d8; 23 | } 24 | .cms-main{ 25 | margin-top: 3rem; 26 | padding: 1.2rem; 27 | border-radius: 25px; 28 | } 29 | .cms-table { 30 | margin-top: 1.5rem; 31 | width: 100%; 32 | } 33 | .cms-table tr { 34 | text-align: center; 35 | border-bottom: 1px solid #ddd; 36 | } 37 | .cms-table th, 38 | .cms-table td { 39 | padding: 20px; 40 | } 41 | -------------------------------------------------------------------------------- /src/custom.css: -------------------------------------------------------------------------------- 1 | @import "./reset.css"; 2 | 3 | @font-face { 4 | font-family: Vazir; 5 | src: url(./font/Vazir.ttf); 6 | } 7 | 8 | 9 | 10 | :root{ 11 | --color-white: #ffff; 12 | --color-white-50: #F4F6FF; 13 | --color-purple : #6C4AB6 14 | } 15 | 16 | *, 17 | body, 18 | html { 19 | font-family: Vazir !important; 20 | 21 | } 22 | body{ 23 | background-color: var(--color-white-50) !important; 24 | direction: rtl; 25 | } -------------------------------------------------------------------------------- /src/font/Vazir.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/src/font/Vazir.ttf -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/src/index.css -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import 'bootstrap/dist/css/bootstrap.min.css' 5 | import './index.css'; 6 | import "./custom.css" 7 | import "./cms.css" 8 | import { BrowserRouter } from 'react-router-dom'; 9 | 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); -------------------------------------------------------------------------------- /src/page/Comments/Comments.css: -------------------------------------------------------------------------------- 1 | .comments-table { 2 | margin-top: 3rem; 3 | width: 100%; 4 | padding: 15px 0; 5 | background-color: var(--color-white); 6 | border-radius: 10px; 7 | text-align: center; 8 | position: relative; 9 | } 10 | 11 | .comments-table table { 12 | width: 100%; 13 | } 14 | 15 | .comments-table td, 16 | th { 17 | text-align: center; 18 | vertical-align: middle; 19 | padding: 25px !important; 20 | } 21 | 22 | .comments-table tr { 23 | border-bottom: 1px solid #d9d7d7; 24 | } 25 | 26 | .btn-comments { 27 | color: #fff; 28 | background-color: var(--color-purple); 29 | border-radius: 30px; 30 | font-size: 0.9rem; 31 | font-weight: 500; 32 | padding: 10px 14px; 33 | border: none; 34 | border-radius: 25px; 35 | margin: 0 5px; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/page/Comments/Comments.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import CommentTextModal from '../../Components/CommentTextModal/CommentTextModal' 3 | import DeleteModal from '../../Components/DeleteModal/DeleteModal' 4 | import EditModal from '../../Components/EditModal/EditModal' 5 | import Error from '../../Components/Error/Error' 6 | import Loader from '../../Components/Loader/Loader' 7 | import { ToastContainer, toast } from 'react-toastify'; 8 | import { AiOutlineDollar } from 'react-icons/ai' 9 | import 'react-toastify/dist/ReactToastify.css'; 10 | import './Comments.css' 11 | 12 | 13 | export default function Comments() { 14 | 15 | const [allComments, setAllComments] = useState([]) 16 | const [isInProgress, setIsInProgress] = useState(true) 17 | const [isShowCommentModal, setIsShowCommentModal] = useState(false) 18 | const [mainComment, setMainComment] = useState('') 19 | const [isShowDeleteModal, setIsShowDeleteModal] = useState(false) 20 | const [commentID, setCommentID] = useState(null) 21 | const [isShowEditModal, setIsShowEditModal] = useState(false) 22 | const [commentNewText, setCommentNewText] = useState('') 23 | const [acceptCommentModal, setAcceptCommentModal] = useState(false) 24 | const [rejectCommentModal, setRejectCommentModal] = useState(false) 25 | 26 | useEffect(() => { 27 | getData() 28 | }, []) 29 | 30 | const getData = () => { 31 | setIsInProgress(true) 32 | fetch("http://localhost:8000/api/comments/") 33 | .then(res => res.json()) 34 | .then(commnt => { 35 | setAllComments(commnt) 36 | setIsInProgress(false) 37 | }) 38 | } 39 | 40 | // comment text modal actions 41 | 42 | const cloesCommentModal = () => setIsShowCommentModal(false) 43 | 44 | // delete comment actions 45 | const deleteModalConfirmAction = () => { 46 | fetch(`http://localhost:8000/api/comments/${commentID}`, { 47 | method: 'DELETE' 48 | }).then(res => { 49 | console.log(res) 50 | getData() 51 | successNotify('کامنت با موفقیت حذف شد') 52 | }).catch(err => { 53 | errorNotify('حذف کامنت موفقیت آمیز نبود') 54 | }) 55 | setIsShowDeleteModal(false) 56 | } 57 | 58 | const deleteModalCalncelAction = () => setIsShowDeleteModal(false) 59 | 60 | // edit modal action 61 | const updateCommentText = (e) => { 62 | e.preventDefault() 63 | let newCommentText = { 64 | body: commentNewText 65 | } 66 | 67 | fetch(`http://localhost:8000/api/comments/${commentID}`, { 68 | method: 'PUT', 69 | headers: { 70 | 'Content-type': 'application/json' 71 | }, 72 | body: JSON.stringify(newCommentText) 73 | }).then(res => { 74 | console.log(res) 75 | getData() 76 | successNotify('متن کامنت با موفقیت تغییر کرد') 77 | setIsShowEditModal(false) 78 | }).catch(err => { 79 | errorNotify('تغییر متن کامنت موفقیت آمیز نبود') 80 | }) 81 | 82 | setCommentNewText('') 83 | } 84 | const editModalCalncelAction = () => setIsShowEditModal(false) 85 | 86 | 87 | 88 | //Accept Modall 89 | const acceptModalConfirmAction = () => { 90 | console.log('modal accept'); 91 | fetch(`http://localhost:8000/api/comments/accept/${commentID}`, { 92 | method: 'POST' 93 | }).then(res => { 94 | console.log(res); 95 | getData() 96 | successNotify(" متن کامنت با موفقیت تایید شد") 97 | setAcceptCommentModal(false) 98 | }).catch(err => { 99 | errorNotify("تایید متن کامنت موفقیت امیز نبود ") 100 | }) 101 | } 102 | const acceptModalCalncelAction = () => setAcceptCommentModal(false) 103 | 104 | //reject Modal 105 | 106 | 107 | const rejectModalConfirmAction = () => { 108 | console.log('modal accept'); 109 | fetch(`http://localhost:8000/api/comments/reject/${commentID}`, { 110 | method: 'POST' 111 | }).then(res => { 112 | console.log(res); 113 | getData() 114 | successNotify(" متن کامنت با موفقیت رد شد") 115 | setRejectCommentModal(false) 116 | }).catch(err => { 117 | errorNotify("رد متن کامنت موفقیت امیز نبود") 118 | }) 119 | } 120 | const rejectModalCalncelAction = () => setRejectCommentModal(false) 121 | 122 | 123 | //* notify toast 124 | const successNotify = (toastMessage) => toast.success(toastMessage, { 125 | position: "bottom-right", 126 | autoClose: 5000, 127 | hideProgressBar: false, 128 | closeOnClick: true, 129 | pauseOnHover: true, 130 | draggable: true, 131 | progress: undefined, 132 | theme: "light", 133 | }); 134 | const errorNotify = (toastMessage) => toast.error(toastMessage, { 135 | position: "bottom-right", 136 | autoClose: 5000, 137 | hideProgressBar: false, 138 | closeOnClick: true, 139 | pauseOnHover: true, 140 | draggable: true, 141 | progress: undefined, 142 | theme: "light", 143 | }) 144 | return ( 145 | <> 146 |

لیست کامنت ها

147 |
148 | { 149 | isInProgress && 150 | } 151 | { 152 | allComments.length ? ( 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | { 166 | allComments.map((item) => ( 167 | 168 | 169 | 170 | 171 | 178 | 179 | 180 | 205 | 206 | )) 207 | } 208 | 209 |
نام کاربرمحصول کامنتتاریخساعت
{item.userID}{item.productID}{item.date}{item.hour} 181 | 185 | 189 | 190 | { 191 | item.isAccept === 0 ? ( 192 | 196 | ) : ( 197 | 201 | ) 202 | } 203 | 204 |
210 | ) : ( 211 | 212 | 213 | ) 214 | } 215 |
216 | { 217 | isShowCommentModal && ( 218 | 221 | 222 | ) 223 | 224 | } 225 | { 226 | isShowDeleteModal && ( 227 | 231 | ) 232 | } 233 | { 234 | isShowEditModal && ( 235 | 236 |
237 | 238 | 239 | 240 | setCommentNewText(e.target.value)} 245 | /> 246 |
247 | 248 | ) 249 | } 250 | { 251 | acceptCommentModal && ( 252 | 256 | ) 257 | } 258 | { 259 | rejectCommentModal && ( 260 | 264 | 265 | ) 266 | } 267 | 268 | 280 | 281 | ) 282 | } 283 | -------------------------------------------------------------------------------- /src/page/Offs/Offs.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/src/page/Offs/Offs.css -------------------------------------------------------------------------------- /src/page/Offs/Offs.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Error from '../../Components/Error/Error' 3 | export default function Offs() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /src/page/Orders/Orders.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/src/page/Orders/Orders.css -------------------------------------------------------------------------------- /src/page/Orders/Orders.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Error from '../../Components/Error/Error' 3 | export default function Orders() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /src/page/Products/Products.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roshana01/cms-react/5e762e8d83023267c891535ff051f071a97db0b6/src/page/Products/Products.css -------------------------------------------------------------------------------- /src/page/Products/Products.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import AddNewProduct from '../../Components/AddNewProduct/AddNewProduct' 3 | import Error from '../../Components/Error/Error' 4 | import ProductTable from '../../Components/ProductTable/ProductTable' 5 | import { ToastContainer, toast } from 'react-toastify'; 6 | import 'react-toastify/dist/ReactToastify.css'; 7 | 8 | 9 | export default function Products() { 10 | const [allProducts, setAllProduct] = useState([]) 11 | const [isInProgress, setIsInProgress] = useState(true) 12 | 13 | 14 | useEffect(() => { 15 | getAllProducts() 16 | }, []); 17 | 18 | const getAllProducts = () => { 19 | 20 | setIsInProgress(true) 21 | fetch('http://localhost:8000/api/products/') 22 | .then((res) => res.json()) 23 | .then((prodauct) => { 24 | setAllProduct(prodauct.reverse()) 25 | setIsInProgress(false) 26 | 27 | }) 28 | } 29 | 30 | //* notify toast 31 | const successNotify = (toastMessage) => toast.success(toastMessage, { 32 | position: "bottom-right", 33 | autoClose: 5000, 34 | hideProgressBar: false, 35 | closeOnClick: true, 36 | pauseOnHover: true, 37 | draggable: true, 38 | progress: undefined, 39 | theme: "light", 40 | }); 41 | const errorNotify = (toastMessage) => toast.error(toastMessage, { 42 | position: "bottom-right", 43 | autoClose: 5000, 44 | hideProgressBar: false, 45 | closeOnClick: true, 46 | pauseOnHover: true, 47 | draggable: true, 48 | progress: undefined, 49 | theme: "light", 50 | }); 51 | return ( 52 | <> 53 | 58 | 65 | 77 | 78 | ) 79 | } 80 | -------------------------------------------------------------------------------- /src/page/Users/Users.css: -------------------------------------------------------------------------------- 1 | .users-table { 2 | margin-top: 2.5rem; 3 | width: 100%; 4 | padding: 15px 0; 5 | background-color: var(--color-white); 6 | border-radius: 10px; 7 | text-align: center; 8 | position: relative; 9 | } 10 | .user-title { 11 | font-size: 1.4rem; 12 | margin-top: 3rem; 13 | font-weight: 600; 14 | } 15 | .users-table table { 16 | width: 100%; 17 | } 18 | 19 | .users-table td, 20 | th { 21 | text-align: center; 22 | vertical-align: middle; 23 | padding: 25px !important; 24 | } 25 | 26 | .comments-table tr { 27 | border-bottom: 1px solid #d9d7d7; 28 | } 29 | 30 | .btn-users { 31 | color: #fff; 32 | background-color: var(--color-purple); 33 | border-radius: 30px; 34 | font-size: 0.9rem; 35 | font-weight: 500; 36 | padding: 10px 14px; 37 | border: none; 38 | border-radius: 25px; 39 | margin: 0 5px; 40 | } 41 | -------------------------------------------------------------------------------- /src/page/Users/Users.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import DeleteModal from '../../Components/DeleteModal/DeleteModal' 3 | import Error from '../../Components/Error/Error' 4 | import Loader from '../../Components/Loader/Loader' 5 | import { ToastContainer, toast } from 'react-toastify'; 6 | import 'react-toastify/dist/ReactToastify.css'; 7 | 8 | import './Users.css' 9 | 10 | export default function Users() { 11 | 12 | const [user, setUser] = useState([]) 13 | const [isInProgress, setIsInProgress] = useState([]) 14 | const [isShowdeleteUserModal, setIsShowDeleteUserModal] = useState(false) 15 | const [userID, setUserID] = useState(null) 16 | useEffect(() => { 17 | getData() 18 | }, []) 19 | 20 | const getData = () => { 21 | setIsInProgress(true) 22 | 23 | fetch('http://localhost:8000/api/users/') 24 | .then(res => res.json()) 25 | .then(users => { 26 | console.log(users); 27 | setUser(users) 28 | setIsInProgress(false) 29 | }) 30 | 31 | } 32 | 33 | // delet user 34 | const deletUserModalCalncelAction = () => setIsShowDeleteUserModal(false) 35 | const deletUserModalConfirmAction = () => { 36 | 37 | 38 | fetch(`http://localhost:8000/api/users/${userID}`, { 39 | method: 'DELETE' 40 | }).then(res => { 41 | console.log(res) 42 | getData() 43 | successNotify('کاربر با موفقیت حذف شد') 44 | setIsShowDeleteUserModal(false) 45 | }).catch(err => { 46 | errorNotify('حذف کاربر موفقیت آمیز نبود') 47 | }) 48 | } 49 | 50 | //* notify toast 51 | const successNotify = (toastMessage) => toast.success(toastMessage, { 52 | position: "bottom-right", 53 | autoClose: 5000, 54 | hideProgressBar: false, 55 | closeOnClick: true, 56 | pauseOnHover: true, 57 | draggable: true, 58 | progress: undefined, 59 | theme: "light", 60 | }); 61 | const errorNotify = (toastMessage) => toast.error(toastMessage, { 62 | position: "bottom-right", 63 | autoClose: 5000, 64 | hideProgressBar: false, 65 | closeOnClick: true, 66 | pauseOnHover: true, 67 | draggable: true, 68 | progress: undefined, 69 | theme: "light", 70 | }) 71 | 72 | return ( 73 | <> 74 | 75 |

لیست کاربران

76 |
77 | { 78 | isInProgress && 79 | } 80 | { 81 | user.length ? ( 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | { 94 | user.map((user) => ( 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 110 | 111 | )) 112 | } 113 | 114 | 115 |
نام و نام خانواگییوزر نیمرمز عبورشماره تماسایمیل
{user.firsname} {user.lastname}{user.username}{user.password}{user.phone}{user.email} 103 | 107 | 108 | 109 |
116 | ) : ( 117 | 118 | 119 | ) 120 | } 121 |
122 | 123 | 124 | { 125 | isShowdeleteUserModal && ( 126 | 127 | < DeleteModal 128 | title={'ایا از حذف کاربر اطمینان دارید؟'} 129 | submitModal={deletUserModalConfirmAction} 130 | canselModal={deletUserModalCalncelAction} 131 | /> 132 | ) 133 | } 134 | 146 | 147 | ) 148 | } 149 | -------------------------------------------------------------------------------- /src/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import Comments from './page/Comments/Comments'; 2 | import Offs from './page/Offs/Offs'; 3 | import Orders from './page/Orders/Orders'; 4 | import Products from './page/Products/Products'; 5 | import Users from './page/Users/Users'; 6 | 7 | const routes = [ 8 | { path: '/products', element: }, 9 | { path: '/comments', element: }, 10 | { path: '/users', element: }, 11 | { path: '/orders', element: }, 12 | { path: '/offs', element: }, 13 | ] 14 | 15 | export default routes -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------