├── .gitignore ├── 1.PNG ├── 1.jpg ├── 10.PNG ├── 2.PNG ├── 3.PNG ├── 4.PNG ├── 5.PNG ├── 6.png ├── 7.png ├── README.md ├── ca.jpg ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── si.jpg ├── src ├── App.js ├── App.sass ├── assets │ ├── Rented.png │ ├── client.png │ ├── h2.png │ ├── h3.svg │ ├── host.png │ └── q.svg ├── components │ ├── about.js │ ├── admin │ │ ├── adminHome.js │ │ ├── adminLayout.js │ │ ├── adminPosts.js │ │ └── adminUsers.js │ ├── agent │ │ ├── agentHome.js │ │ └── agentLayout.js │ ├── auth │ │ ├── forget.js │ │ ├── login.js │ │ ├── reset.js │ │ ├── signup_client.js │ │ └── signup_host.js │ ├── client │ │ └── profile.js │ ├── host │ │ ├── dashboardCopoments │ │ │ ├── Posts.js │ │ │ └── Slider │ │ │ │ └── BtnSlider.js │ │ ├── hostHome.js │ │ ├── hostLayout.js │ │ ├── hostPosts.js │ │ └── reservations.js │ ├── products │ │ ├── details.js │ │ └── search.js │ └── utilities │ │ └── Navbar.js ├── config │ └── fbConfig.js ├── index.js ├── state │ ├── auth_slice.js │ └── store.js └── styles │ ├── Admin.sass │ ├── Slider.sass │ ├── _variables.sass │ ├── dashboardCompoments │ ├── Dashboard.sass │ └── Posts.sass │ ├── details.sass │ ├── login.sass │ ├── navbar.sass │ ├── profile.sass │ ├── search.sass │ └── signup.sass └── tailwind.config.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 | -------------------------------------------------------------------------------- /1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/1.PNG -------------------------------------------------------------------------------- /1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/1.jpg -------------------------------------------------------------------------------- /10.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/10.PNG -------------------------------------------------------------------------------- /2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/2.PNG -------------------------------------------------------------------------------- /3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/3.PNG -------------------------------------------------------------------------------- /4.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/4.PNG -------------------------------------------------------------------------------- /5.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/5.PNG -------------------------------------------------------------------------------- /6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/6.png -------------------------------------------------------------------------------- /7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/7.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | RENTED 3 | === 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ## Summary : 17 | #### RENTED is a web app created to be a link between people searching for appartements to rent, and hosts. it provides confidential solutions to make renting easier then ever, created with the mern stack . 18 | 19 | [View project specifications !](https://www.canva.com/design/DAFDhx_rEnk/vQuHlD6T1Fswz2f0AcIeBw/view?utm_content=DAFDhx_rEnk&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) 20 | 21 | [Get the backend Code !]( https://github.com/Merzouk-Ilyes/Projet-2CS-Back) 22 | 23 | 24 | 25 | ## How use this app as a developer 26 | 27 | ## Using Docker 28 | 1. git clone the repo 29 | 2. run docker compose-up 30 | 31 | ### Old way 32 | 1. git clone 33 | 2. npm install for all the repositories 34 | 3. run all project repos 35 | 4. run the reduis server (use wsl for windows) 36 | 37 | if you have any question don't hesitate to ask :+1: 38 | 39 | User story 40 | --- 41 | 42 | ```gherkin= 43 | As a client, I can serve the website. 44 | As a client, I can reserve an appartement 45 | As a client, I can search appartements 46 | As a client, I can view or cancel my reservations 47 | As a client, I can upgrade to host 48 | 49 | ``` 50 | ```gherkin= 51 | As a host, I can post new locations 52 | As a host, I can accept or refuse reservation requests 53 | As a host, I can review my posts hystory 54 | As a host, I can report a client 55 | 56 | 57 | ``` 58 | ```gherkin= 59 | As an admin, I can manage accounts , validate or delete accounts 60 | As an admin, I can view my daily , weekly and monthly statistics. 61 | As an admin, I can assign post to agents and verify posts. 62 | 63 | ``` 64 | 65 | ### general use case diagram : 66 | 67 | 68 | 69 | 70 | 71 | ## architecture schema 72 | we used microservices in this project , Microservices refer to both an architecture and a software development approach that consists of breaking down applications into the simplest elements, independent of each other. 73 | 74 | 75 | 76 | 77 | ## Our recomendations 78 | we used a js library that uses the KNN algorithme for a Collaborative Filtering Recommendation system 79 | 80 | 81 | 82 | 83 | 84 | Used Technology 85 | --- 86 | 87 | 88 | ![](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) 89 | ![](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white) 90 | ![](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white) 91 | 92 | ![](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white) 93 | ![](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white) 94 | ![](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white) 95 | ![](https://img.shields.io/badge/Docker-2CA5E0?style=for-the-badge&logo=docker&logoColor=white) 96 | ![](https://img.shields.io/badge/Spring_Boot-F2F4F9?style=for-the-badge&logo=spring-boot) 97 | 98 | 99 | 100 | 101 | availble roles 102 | --- 103 | 1. client 104 | 2. host 105 | 3. agent 106 | 4. admin 107 | 108 | Rented provides 109 | --- 110 | - reservation gesture 111 | - accounts gesture 112 | - posts gesture 113 | - recommendation gesture 114 | 115 | --- 116 | --- 117 | If you liked the repo then kindly support it by giving it a star ⭐ and share in your circles so more people can benefit from the effort. 118 | 119 | ## Contributions Welcome 120 | [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](#) 121 | 122 | If you find any bug in the code or have any improvements in mind then feel free to generate a pull request. 123 | 124 | ## Issues 125 | 126 | [![GitHub Issues](https://img.shields.io/github/issues/Merzouk-Ilyes/Projet-2CS-Front.svg?style=flat&label=Issues&maxAge=2592000)](https://github.com/Merzouk-Ilyes/Projet-2CS-Front/issues) 127 | 128 | If you face any issue, you can create a new issue in the Issues Tab and I will be glad to help you out. 129 | 130 | 131 | 132 | 133 | ## Contributors 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /ca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/ca.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/react": "^1.8.7", 7 | "@emotion/react": "^11.8.2", 8 | "@emotion/styled": "^11.8.1", 9 | "@iconscout/react-unicons": "^1.1.6", 10 | "@reduxjs/toolkit": "^1.8.1", 11 | "@testing-library/jest-dom": "^5.16.3", 12 | "@testing-library/react": "^12.1.4", 13 | "@testing-library/user-event": "^13.5.0", 14 | "axios": "^0.26.1", 15 | "date-fns": "^2.28.0", 16 | "firebase": "^9.8.1", 17 | "framer-motion": "^6.2.8", 18 | "moment": "^2.29.3", 19 | "node-sass": "^7.0.1", 20 | "react": "^17.0.2", 21 | "react-custom-checkbox": "^2.0.1", 22 | "react-date-range": "^1.4.0", 23 | "react-dom": "^17.0.2", 24 | "react-icons": "^4.3.1", 25 | "react-loading-skeleton": "^3.1.0", 26 | "react-redux": "^7.2.8", 27 | "react-router-dom": "^6.2.2", 28 | "react-scripts": "5.0.0", 29 | "react-toastify": "^8.2.0", 30 | "reactstrap": "^9.0.2", 31 | "web-vitals": "^2.1.4" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test", 37 | "eject": "react-scripts eject" 38 | }, 39 | "eslintConfig": { 40 | "extends": [ 41 | "react-app", 42 | "react-app/jest" 43 | ] 44 | }, 45 | "browserslist": { 46 | "production": [ 47 | ">0.2%", 48 | "not dead", 49 | "not op_mini all" 50 | ], 51 | "development": [ 52 | "last 1 chrome version", 53 | "last 1 firefox version", 54 | "last 1 safari version" 55 | ] 56 | }, 57 | "devDependencies": { 58 | "autoprefixer": "^10.4.7", 59 | "postcss": "^8.4.13", 60 | "tailwindcss": "^3.0.24" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 22 | 23 | 32 | 33 | 34 | 38 | React App 39 | 40 | 41 | 42 |
43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /si.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/si.jpg -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.sass'; 2 | 3 | 4 | function App() { 5 | return ( 6 |
7 | Landing page 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/App.sass: -------------------------------------------------------------------------------- 1 | @tailwind base 2 | @tailwind components 3 | @tailwind utilities 4 | html,* 5 | box-sizing: border-box 6 | margin: 0 7 | padding: 0 8 | text-decoration: none 9 | font-family: 'Raleway', sans-serif; -------------------------------------------------------------------------------- /src/assets/Rented.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/src/assets/Rented.png -------------------------------------------------------------------------------- /src/assets/client.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/src/assets/client.png -------------------------------------------------------------------------------- /src/assets/h2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/src/assets/h2.png -------------------------------------------------------------------------------- /src/assets/host.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Merzouk-Ilyes/Projet-2CS-Front/d2b7a01b5865f5800757c1d51da754a2e2974871/src/assets/host.png -------------------------------------------------------------------------------- /src/components/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function About() { 4 | return ( 5 |
About
6 | ) 7 | } 8 | 9 | export default About -------------------------------------------------------------------------------- /src/components/admin/adminHome.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SidebarWithHeader from "./adminLayout" 3 | 4 | function Admin() { 5 | return ( 6 | 7 | 8 |

admin

9 | 10 | ); 11 | } 12 | 13 | export default Admin; 14 | -------------------------------------------------------------------------------- /src/components/admin/adminLayout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | IconButton, 4 | Avatar, 5 | Box, 6 | CloseButton, 7 | Flex, 8 | HStack, 9 | VStack, 10 | Icon, 11 | useColorModeValue, 12 | Link, 13 | Drawer, 14 | DrawerContent, 15 | Text, 16 | useDisclosure, 17 | BoxProps, 18 | FlexProps, 19 | Menu, 20 | MenuButton, 21 | MenuDivider, 22 | MenuItem, 23 | MenuList, 24 | } from "@chakra-ui/react"; 25 | import { FiHome, FiMenu, FiChevronDown,FiUsers } from "react-icons/fi"; 26 | import { 27 | BsCalendarCheck, 28 | BsBell, 29 | BsPatchCheck, 30 | BsPatchExclamation, 31 | } from "react-icons/bs"; 32 | import { BiTimeFive } from "react-icons/bi"; 33 | import { Link as reactRouter } from "react-router-dom"; 34 | import { MdPublic } from "react-icons/md"; 35 | import logo from "../../assets/Rented.png"; 36 | 37 | const LinkItems = [ 38 | { name: "Home", icon: FiHome, path: "/admin" }, 39 | { name: "Posts", icon: MdPublic, path: "/admin/posts" }, 40 | { name: "Users", icon: FiUsers, path: "/admin/users" }, 41 | ]; 42 | 43 | export default function SidebarWithHeader({ children }) { 44 | const { isOpen, onOpen, onClose } = useDisclosure(); 45 | return ( 46 | 47 | onClose} 49 | display={{ base: "none", md: "block" }} 50 | /> 51 | 60 | 61 | 62 | 63 | 64 | {/* mobilenav */} 65 | 66 | 67 | {children} 68 | 69 | 70 | ); 71 | } 72 | 73 | const SidebarContent = ({ onClose, ...rest }) => { 74 | return ( 75 | 85 | 86 |
87 | RENTED 88 |
89 | 90 | 91 | {LinkItems.map((link) => ( 92 | 93 | {link.name} 94 | 95 | ))} 96 | 97 | ); 98 | }; 99 | 100 | const NavItem = ({ icon, children, path, ...rest }) => { 101 | return ( 102 | 108 | 121 | {icon && ( 122 | 130 | )} 131 | {children} 132 | 133 | 134 | ); 135 | }; 136 | 137 | const MobileNav = ({ onOpen, ...rest }) => { 138 | return ( 139 | 150 | } 156 | /> 157 | 158 |
159 | RENTED 160 |
161 | 162 | 163 | 164 | 165 | } 170 | variant="ghost" 171 | transition="all 0.3s" 172 | /> 173 | 174 | {/* 178 | 182 | 186 | */} 190 | 191 | 192 | 193 | 194 | 199 | 200 | 201 | 207 | Merzouk ilyes reda 208 | 209 | Admin 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 221 | Profile 222 | Settings 223 | Billing 224 | 225 | Sign out 226 | 227 | 228 | 229 | 230 | 231 | ); 232 | }; 233 | 234 | const NotificationItem = ({ notif, iconType }) => { 235 | if (iconType == 1) { 236 | return ( 237 | 238 | 239 | {notif} 240 | 241 | ); 242 | } else if (iconType == 2) { 243 | return ( 244 | 245 | 246 | {notif} 247 | 248 | ); 249 | } else if (iconType == 3) { 250 | return ( 251 | 252 | 253 | {notif} 254 | 255 | ); 256 | } else if (iconType == 4) { 257 | return ( 258 | 259 | 260 | {notif} 261 | 262 | ); 263 | } else 264 | return ( 265 | 266 | 267 | {notif} 268 | 269 | ); 270 | }; 271 | -------------------------------------------------------------------------------- /src/components/admin/adminUsers.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import SidebarWithHeader from "./adminLayout"; 3 | import { 4 | Menu, 5 | MenuButton, 6 | MenuList, 7 | MenuItem, 8 | IconButton, 9 | Avatar, 10 | Button, 11 | Modal, 12 | ModalOverlay, 13 | ModalContent, 14 | ModalHeader, 15 | ModalFooter, 16 | ModalBody, 17 | ModalCloseButton, 18 | useDisclosure, 19 | Spinner, 20 | } from "@chakra-ui/react"; 21 | import {HiOutlineIdentification} from "react-icons/hi" 22 | import { BsThreeDotsVertical } from "react-icons/bs"; 23 | import { AiOutlineDelete, AiOutlineThunderbolt } from "react-icons/ai"; 24 | import { GrValidate } from "react-icons/gr"; 25 | import axios from "axios"; 26 | import { toast } from "react-toastify"; 27 | 28 | function AdminUsers() { 29 | const [users, setUsers] = useState([]); 30 | const [loading, setLoading] = useState(true); 31 | const url = "http://localhost:8000/accounts"; 32 | useEffect(() => { 33 | getUsers(); 34 | }, []); 35 | const getUsers = () => { 36 | axios 37 | .get(url) 38 | .then((response) => { 39 | const users = response.data; 40 | setUsers(users); 41 | setLoading(false); 42 | console.log("users =>" + JSON.stringify(users[0].emailVerified)); 43 | }) 44 | .catch((err) => { 45 | console.log(err); 46 | }); 47 | }; 48 | 49 | return ( 50 | 51 |
52 |
53 |

Users

54 |
55 |
56 | 57 | 58 | 59 | 62 | 65 | 68 | 71 | 74 | 77 | 78 | 79 | 80 | 81 | {loading ? ( 82 | 83 | 86 | 87 | ) : ( 88 | users.map((users, i) => ( 89 | 99 | )) 100 | )} 101 | 102 |
60 | User 61 | 63 | Email 64 | 66 | Phone number 67 | 69 | Role 70 | 72 | Email Verified 73 | 75 | Account verified 76 |
84 | 85 |
103 |
104 |
105 |
106 |
107 | 108 | ); 109 | } 110 | 111 | export default AdminUsers; 112 | 113 | const TableItem = ({ 114 | name, 115 | email, 116 | type, 117 | emailVerified, 118 | accountVerified, 119 | phone,idUser 120 | }) => { 121 | var role = "Client"; 122 | if (type == 0) { 123 | role = "Admin"; 124 | } else if (type == 1) { 125 | role = "Agent"; 126 | } else if (type == 2) { 127 | role = "Client"; 128 | } else if (type == 3) { 129 | role = "Host"; 130 | } 131 | 132 | return ( 133 | 134 | 135 |
136 |
137 | 138 |
139 |
140 |

{name}

141 |
142 |
143 | 144 | 145 |

{email}

146 | 147 | 148 |

{phone}

149 | 150 | 151 |

{role}

152 | 153 | 154 |

155 | 156 |

157 | 158 | 159 |

160 | 161 |

162 | 163 | 164 | 165 | 166 | } 170 | variant="ghost" 171 | fontSize={20} 172 | /> 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | ); 183 | }; 184 | const DetailsMenuItem = ({id}) => { 185 | const { isOpen, onOpen, onClose } = useDisclosure(); 186 | const url = "http://localhost:8000/validateAccount"; 187 | const validateAccount = () => { 188 | axios 189 | .post(url,{id:id}) 190 | .then((response) => { 191 | console.log(response); 192 | onClose(); 193 | toast.success("Account is verified !"); 194 | setTimeout(() => { 195 | window.location.reload(false); 196 | }, 2500); 197 | 198 | 199 | }) 200 | .catch((err) => { 201 | console.log(err); 202 | }); 203 | }; 204 | 205 | return ( 206 | } fontSize={18}> 207 | Validate Account 208 | 209 | 210 | 211 | Validate 212 | 213 | Are you sure you want to validate this account? 214 | 215 | 216 | 224 | 232 | 233 | 234 | 235 | 236 | ); 237 | }; 238 | const SeeId = () => { 239 | const { isOpen, onOpen, onClose } = useDisclosure(); 240 | 241 | 242 | return ( 243 | } fontSize={18}> 244 | Verify ID 245 | 246 | 247 | 248 | Validate 249 | 250 | Are you sure you want to validate this account? 251 | 252 | 253 | 261 | 269 | 270 | 271 | 272 | 273 | ); 274 | }; 275 | 276 | const DeleteMenuItem = () => { 277 | const { isOpen, onOpen, onClose } = useDisclosure(); 278 | 279 | return ( 280 | } 283 | fontSize={18} 284 | > 285 | Delete 286 | 287 | 288 | 289 | Delete 290 | 291 | Are you sure you want to delete this? 292 | 293 | 294 | 302 | 305 | 306 | 307 | 308 | 309 | ); 310 | }; 311 | 312 | const Status = ({ status }) => { 313 | var bgColor; 314 | var color; 315 | if (status) { 316 | bgColor = "bg-green-200"; 317 | color = "text-green-900"; 318 | } else { 319 | bgColor = "bg-red-200"; 320 | color = "text-red-900"; 321 | } 322 | return ( 323 | 326 | 330 | {status ? "Verified" : "Not Verified"} 331 | 332 | ); 333 | }; 334 | -------------------------------------------------------------------------------- /src/components/agent/agentHome.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import SidebarWithHeader from "./agentLayout"; 3 | import { 4 | Badge, 5 | Button, 6 | Center, 7 | Flex, 8 | Heading, 9 | Image, 10 | Stack, 11 | Text, 12 | useDisclosure, 13 | Drawer, 14 | DrawerBody, 15 | DrawerHeader, 16 | DrawerOverlay, 17 | DrawerContent, 18 | DrawerCloseButton, 19 | Box, 20 | Container, 21 | VStack, 22 | SimpleGrid, 23 | StackDivider, 24 | List, 25 | ListItem, 26 | Textarea, 27 | Modal, 28 | ModalOverlay, 29 | ModalContent, 30 | ModalHeader, 31 | ModalFooter, 32 | ModalBody, 33 | Input, 34 | } from "@chakra-ui/react"; 35 | import { BsCheck2Circle, BsSnow } from "react-icons/bs"; 36 | import { FaCouch, FaWifi } from "react-icons/fa"; 37 | import { MdKitchen, MdOutlineElectricalServices } from "react-icons/md"; 38 | import { BiWater } from "react-icons/bi"; 39 | import axios from "axios"; 40 | // import { Page, Text as pdfText, View, Document, StyleSheet ,PDFDownloadLink} from '@react-pdf/renderer'; 41 | 42 | function AgentHome() { 43 | const [posts, setPosts] = useState([]); 44 | const url = "http://localhost:8001/findAllPosts"; 45 | 46 | useEffect(() => { 47 | getPosts(); 48 | }, []); 49 | const getPosts = () => { 50 | axios 51 | .get(url) 52 | .then((response) => { 53 | const posts = response.data.result; 54 | setPosts(posts); 55 | console.log("posts =>" + posts); 56 | }) 57 | .catch((err) => { 58 | console.log(err); 59 | }); 60 | }; 61 | return ( 62 | 63 |

Posts

64 |
65 | {posts.map((post, i) => ( 66 | 78 | ))} 79 |
80 | 81 | ); 82 | } 83 | 84 | export default AgentHome; 85 | 86 | function AgentPostCard({ 87 | imageUrl, 88 | title, 89 | price, 90 | baths, 91 | beds, 92 | rating, 93 | verified, 94 | space, 95 | city, 96 | }) { 97 | const { isOpen, onOpen, onClose } = useDisclosure(); 98 | return ( 99 |
100 | 110 | 111 | 112 | 113 | 121 | 122 | {title} 123 | {verified ? ( 124 | 132 | 133 | 134 | ) : ( 135 | "" 136 | )} 137 | 138 | 139 | {city} 140 | 141 | 142 | {beds} BEDS • {baths} BATHS •{space} M°2 143 | 144 | 145 | 146 | $ {price}/ night 147 | 148 | 149 | 150 | 168 | 181 | 182 | 183 |
184 | ); 185 | } 186 | 187 | function DetailsDrawer({ 188 | onClose, 189 | isOpen, 190 | imageUrl, 191 | title, 192 | price, 193 | baths, 194 | beds, 195 | rating, 196 | verified, 197 | space, 198 | city, 199 | }) { 200 | return ( 201 | 202 | 203 | 204 | 205 | 206 | 207 | 218 | 219 | 220 | 221 | ); 222 | } 223 | 224 | function DetailsDrawerData({ 225 | imageUrl, 226 | title, 227 | price, 228 | baths, 229 | beds, 230 | rating, 231 | verified, 232 | space, 233 | city, 234 | }) { 235 | const { isOpen, onOpen, onClose } = useDisclosure(); 236 | const {isOpen: isFOpen,onOpen: onFOpen,onClose: onFClose } = useDisclosure(); 237 | 238 | return ( 239 | 240 | 245 | 246 | {"product 255 | 256 | 257 | 258 | 263 | {title} 264 | 265 | 266 | ${price} /NIGHT 267 | 268 | 269 | 270 | } 274 | > 275 | 276 | 277 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed 278 | diam nonumy eirmod tempor invidunt ut labore 279 | 280 | 281 | 282 | 289 | Features 290 | 291 | 292 | 293 | 294 | 295 |  Water 296 | 297 | 298 |  Gas {" "} 299 | 300 | 301 |   302 | Electricity {" "} 303 | 304 | 305 | 306 | 307 | {" "} 308 |  Furniture 309 | 310 | 311 |  Wifi {" "} 312 | 313 | 314 |  Air conditioning 315 | 316 | 317 | 318 | 319 | 320 | 327 | Post Details 328 | 329 | 330 | 331 | 332 | 333 | Local type: 334 | {" "} 335 | Villa 336 | 337 | 338 | 339 | City: 340 | {" "} 341 | {city} 342 | 343 | 344 | 345 | Street: 346 | {" "} 347 | Oran 348 | 349 | 350 | 351 | Number of beds: 352 | {" "} 353 | {beds} 354 | 355 | 356 | 357 | Number of baths: 358 | {" "} 359 | {baths} 360 | 361 | 362 | 363 | Space: 364 | {" "} 365 | {space} M°2 366 | 367 | 368 | 369 | Rating: 370 | {" "} 371 | {rating} 372 | 373 | 374 | 375 | 376 |
377 | {/* } fileName="agent.pdf"> 378 | {({ blob, url, loading, error }) => 379 | loading ? 'Loading document...' : 'Download now!' 380 | } 381 | */} 382 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 412 | 413 | 414 | 415 | 416 | 417 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 |