├── public
    ├── _redirects
    ├── images
    │   ├── bg.jpeg
    │   ├── jym.png
    │   ├── Scout.jpg
    │   ├── goly.png
    │   ├── img 1.jpeg
    │   ├── img 2.jpg
    │   ├── img 3.jpg
    │   ├── img 7.jpeg
    │   ├── img8.jpeg
    │   ├── logo.png
    │   ├── player.jpg
    │   ├── scout.png
    │   ├── bg home.jpg
    │   ├── bglogin.jpeg
    │   ├── images.jpeg
    │   ├── player 2.jpg
    │   ├── recovery.png
    │   ├── training.png
    │   ├── trining.png
    │   ├── playerdata.jpg
    │   ├── playerlogin.jpg
    │   ├── Scout-DESKTOP-1B4TDEO.jpg
    │   ├── undraw_junior_soccer_6sop.png
    │   └── undraw_junior_soccer_6sop (1).png
    └── vite.svg
├── src
    ├── index.css
    ├── main.jsx
    ├── config
    │   └── Instance.js
    ├── page
    │   ├── HomePage.jsx
    │   ├── LoginPage.jsx
    │   ├── SignupPage.jsx
    │   ├── RegisterPage.jsx
    │   ├── ChatPage.jsx
    │   ├── PlayerPage.jsx
    │   ├── ProfilePage.jsx
    │   ├── SelectedPlayerPage.jsx
    │   ├── searchPage.jsx
    │   └── waitingPage.jsx
    ├── pagenation.css
    ├── App.jsx
    ├── helpers
    │   └── validate.js
    ├── assets
    │   └── react.svg
    ├── components
    │   ├── auth
    │   │   ├── Login.jsx
    │   │   └── Signup.jsx
    │   ├── layout
    │   │   ├── Navbar.jsx
    │   │   └── Footer.jsx
    │   ├── Player.jsx
    │   ├── SelectedPlayer.jsx
    │   ├── SinglePage.jsx
    │   ├── Notification.jsx
    │   ├── AllPlayers.jsx
    │   ├── Search.jsx
    │   ├── Home.jsx
    │   ├── Chat.jsx
    │   ├── Profile.jsx
    │   └── RegisterScout.jsx
    └── error
    │   └── errorPage.jsx
├── postcss.config.cjs
├── tailwind.config.cjs
├── vite.config.js
├── .gitignore
├── index.html
├── package.json
├── ProtectedRoutes.jsx
└── README.md


/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/public/images/bg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/bg.jpeg


--------------------------------------------------------------------------------
/public/images/jym.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/jym.png


--------------------------------------------------------------------------------
/public/images/Scout.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/Scout.jpg


--------------------------------------------------------------------------------
/public/images/goly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/goly.png


--------------------------------------------------------------------------------
/public/images/img 1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/img 1.jpeg


--------------------------------------------------------------------------------
/public/images/img 2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/img 2.jpg


--------------------------------------------------------------------------------
/public/images/img 3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/img 3.jpg


--------------------------------------------------------------------------------
/public/images/img 7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/img 7.jpeg


--------------------------------------------------------------------------------
/public/images/img8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/img8.jpeg


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/player.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/player.jpg


--------------------------------------------------------------------------------
/public/images/scout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/scout.png


--------------------------------------------------------------------------------
/public/images/bg home.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/bg home.jpg


--------------------------------------------------------------------------------
/public/images/bglogin.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/bglogin.jpeg


--------------------------------------------------------------------------------
/public/images/images.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/images.jpeg


--------------------------------------------------------------------------------
/public/images/player 2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/player 2.jpg


--------------------------------------------------------------------------------
/public/images/recovery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/recovery.png


--------------------------------------------------------------------------------
/public/images/training.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/training.png


--------------------------------------------------------------------------------
/public/images/trining.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/trining.png


--------------------------------------------------------------------------------
/public/images/playerdata.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/playerdata.jpg


--------------------------------------------------------------------------------
/public/images/playerlogin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/playerlogin.jpg


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/images/Scout-DESKTOP-1B4TDEO.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/Scout-DESKTOP-1B4TDEO.jpg


--------------------------------------------------------------------------------
/public/images/undraw_junior_soccer_6sop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/undraw_junior_soccer_6sop.png


--------------------------------------------------------------------------------
/public/images/undraw_junior_soccer_6sop (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AjmalDevala/FotWeb-Scout/HEAD/public/images/undraw_junior_soccer_6sop (1).png


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 | 
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |     <App />
8 | )
9 | 


--------------------------------------------------------------------------------
/src/config/Instance.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | const Instance = axios.create({
 4 |   baseURL: "https://fotweb.evotym.site/api",
 5 |     // baseURL: "http://localhost:7007/api",
 6 | });
 7 | 
 8 | 
 9 | 
10 | export default Instance;


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   server:{
 8 |     port:7009
 9 |   }
10 | })
11 |  


--------------------------------------------------------------------------------
/src/page/HomePage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Home from '../components/Home'
 3 | import Footer from '../components/layout/Footer'
 4 | 
 5 | function HomePage() {
 6 |   return (
 7 |     <div>
 8 |       <Home/>
 9 |       <Footer/>
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default HomePage
15 | 


--------------------------------------------------------------------------------
/src/page/LoginPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Login from '../components/auth/Login'
 3 | import Footer from '../components/layout/Footer'
 4 | 
 5 | const LoginPage = () => {
 6 |   return (
 7 |     <div>
 8 |       <Login/>
 9 |       <Footer/>
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default LoginPage
15 | 


--------------------------------------------------------------------------------
/src/page/SignupPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import SignUp from '../components/auth/Signup'
 3 | import Footer from '../components/layout/Footer'
 4 | 
 5 | const SignupPage = () => {
 6 |   return (
 7 |     <div>
 8 |       <SignUp/>
 9 |       <Footer/>
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default SignupPage
15 | 


--------------------------------------------------------------------------------
/src/page/RegisterPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Footer from '../components/layout/Footer'
 3 | import RegisterScout from '../components/RegisterScout'
 4 | 
 5 | function RegisterPage() {
 6 |   return (
 7 |     <div>
 8 |       <RegisterScout/>
 9 |       <Footer/>
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default RegisterPage
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/page/ChatPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Chat from '../components/Chat'
 3 | import Footer from '../components/layout/Footer'
 4 | import Navbar from '../components/layout/Navbar'
 5 | 
 6 | function ChatPage() {
 7 |   return (
 8 |     <div>
 9 |     <Navbar/>
10 |       <Chat/>
11 |       <Footer/>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default ChatPage
17 | 


--------------------------------------------------------------------------------
/src/page/PlayerPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navbar from '../components/layout/Navbar'
 3 | import Player from '../components/Player'
 4 | import Footer from '../components/layout/Footer'
 5 | 
 6 | function PlayerPage() {
 7 |   return (
 8 |     <div>
 9 |         <Navbar/>
10 |       <Player/>
11 |       <Footer/>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default PlayerPage
17 | 


--------------------------------------------------------------------------------
/src/page/ProfilePage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navbar from '../components/layout/Navbar'
 3 | import Profile from '../components/Profile'
 4 | import Footer from '../components/layout/Footer'
 5 | 
 6 | function ProfilePage() {
 7 |   return (
 8 |     <div>
 9 |         <Navbar/>
10 |       <Profile />
11 |       <Footer/>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default ProfilePage
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Scout</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/page/SelectedPlayerPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navbar from '../components/layout/Navbar'
 3 | import SelectedPlayer from '../components/SelectedPlayer'
 4 | import Footer from '../components/layout/Footer'
 5 | 
 6 | function SelectedPlayerPage() {
 7 |   return (
 8 |     <div>
 9 |         <Navbar/>
10 |       <SelectedPlayer/>
11 |       <Footer/>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default SelectedPlayerPage
17 | 


--------------------------------------------------------------------------------
/src/page/searchPage.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from "react";
 2 | import Footer from "../components/layout/Footer";
 3 | import Navbar from "../components/layout/Navbar";
 4 | import Search from "../components/Search";
 5 | 
 6 | function searchPage() {
 7 |   const scoutId = localStorage.getItem("scoutId");
 8 | 
 9 |   useEffect
10 |   return (
11 |     <div>
12 |       <Navbar />
13 |       <Search />
14 |       <Footer/>
15 |     </div>
16 |   );
17 | }
18 | 
19 | export default searchPage;
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scout",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^1.3.2",
13 |     "dateformat": "^5.0.3",
14 |     "formik": "^2.2.9",
15 |     "moment": "^2.29.4",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0",
18 |     "react-hot-toast": "^2.4.0",
19 |     "react-input-emoji": "^4.3.0",
20 |     "react-paginate": "^8.1.4",
21 |     "react-router-dom": "^6.8.1",
22 |     "socket.io-client": "^4.6.1"
23 |   },
24 |   "devDependencies": {
25 |     "@types/react": "^18.0.26",
26 |     "@types/react-dom": "^18.0.9",
27 |     "@vitejs/plugin-react": "^3.0.0",
28 |     "autoprefixer": "^10.4.13",
29 |     "postcss": "^8.4.21",
30 |     "tailwindcss": "^3.2.7",
31 |     "vite": "^4.0.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/ProtectedRoutes.jsx:
--------------------------------------------------------------------------------
 1 | import axios from "axios"
 2 | import { Navigate } from "react-router-dom"
 3 | import Instance from "./src/config/Instance"
 4 | 
 5 | const protectedRoutes = ({ children }) => {
 6 |     const token = localStorage.getItem("token")
 7 |     if(token){
 8 |         Instance
 9 |         .get("/scout/verifyScout",
10 |         {headers : {
11 |           Authorization : "Bearer " + localStorage.getItem("token"),
12 |       }})
13 |         .then((response) => { 
14 |           const scout = response.data.scout
15 |           if(scout.status === "Pending"){
16 |             localStorage.clear()
17 |             window.location.reload()
18 |             return <Navigate to = {"/"} replace = {true}></Navigate>
19 | 
20 |           }else{
21 |             return children
22 |           }
23 |         })
24 |        
25 |     }else{
26 | 
27 |         return <Navigate to = {"/"} replace = {true}></Navigate>
28 |     }
29 | 
30 |    return children
31 |     
32 | }
33 | 
34 | export default protectedRoutes


--------------------------------------------------------------------------------
/src/pagenation.css:
--------------------------------------------------------------------------------
 1 | .pagination {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   margin-top: 10px;
 5 |   margin-bottom: 10px
 6 | }
 7 | 
 8 | .page-link {
 9 |   background-color: #fff;
10 |   border: 1px solid #e2e8f0;
11 |   color: #4a5568;
12 |   padding: 0.5rem 0.75rem;
13 |   margin: 0 0.25rem;
14 |   border-radius: 0.25rem;
15 |   transition: all 0.3s ease-in-out;
16 |   font-weight: bold;
17 |   font-size: 0.875rem;
18 | }
19 | 
20 | .page-link:hover {
21 |   background-color: #edf2f7;
22 |   border-color: #cbd5e0;
23 | }
24 | 
25 | .active {
26 |   background-color: #4a5568;
27 |   color: #fff;
28 |   border-color: #4a5568;
29 | }
30 | 
31 | .disabled {
32 |   color: #a0aec0;
33 |   pointer-events: none;
34 | }
35 | 
36 | .previous,
37 | .next {
38 |   background-color: #fff;
39 |   border: 1px solid #e2e8f0;
40 |   color: #4a5568;
41 |   padding: 0.5rem 0.75rem;
42 |   margin: 0 0.25rem;
43 |   border-radius: 0.25rem;
44 |   transition: all 0.3s ease-in-out;
45 |   font-weight: bold;
46 |   font-size: 0.875rem;
47 | }
48 | 
49 | .previous:hover,
50 | .next:hover {
51 |   background-color: #edf2f7;
52 |   border-color: #cbd5e0;
53 | }
54 | 
55 | .previous:focus,
56 | .next:focus {
57 |   outline: none;
58 | }


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/page/waitingPage.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { useEffect } from "react";
 3 | import { toast, Toaster } from "react-hot-toast";
 4 | import { useNavigate } from "react-router-dom";
 5 | import Instance from "../config/Instance";
 6 | 
 7 | const waitingPage = () => {
 8 |   const navigate = useNavigate();
 9 |   const token = localStorage.getItem("token");
10 |   useEffect(() => {
11 |     showProfile();
12 |   }, []);
13 |   const showProfile = async () => {
14 |     await Instance
15 |       .get("/scout/showProfile", {
16 |         headers: { Authorization: `Bearer ${token} ` },
17 |       })
18 |       .then((response) => {
19 |         if (response.data.scout.status == "Pending") {
20 |           toast.loading("We are processing your request...");
21 |           setTimeout(function () {
22 |             toast.dismiss();
23 |           }, 30000);
24 |         }else{
25 |             navigate("/home");
26 |         }
27 |       })
28 |       .catch((error) => {
29 |         toast.error(error.response.data.error);
30 |       });
31 |   };
32 | 
33 |   return (
34 |     <div
35 |       className="flex flex-col items-center justify-center h-screen"
36 |       style={{
37 |         backgroundImage: "url('https://wallpaperaccess.com/full/16676.jpg')",
38 |       }}
39 |     >
40 |       <Toaster position="top-center"></Toaster>
41 |       <h1 className="text-4xl font-bold mb-4 text-white">Please Wait</h1>
42 |       <p className="text-xl mb-8 text-white">
43 |         We are processing your request...
44 |       </p>
45 |       <button
46 |         onClick={() => showProfile()}
47 |         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
48 |       >
49 |         Next Process
50 |       </button>
51 |     </div>
52 |   );
53 | };
54 | 
55 | export default waitingPage;
56 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter, Route, Routes } from "react-router-dom";
 2 | import AllPlayers from "./components/AllPlayers";
 3 | import Notification from "./components/Notification";
 4 | import SinglePage from "./components/SinglePage";
 5 | import ErrorPage from "./error/errorPage";
 6 | import ChatPage from "./page/ChatPage";
 7 | import HomePage from "./page/HomePage";
 8 | import LoginPage from "./page/LoginPage";
 9 | import PlayerPage from "./page/PlayerPage";
10 | import ProfilePage from "./page/ProfilePage";
11 | import RegisterPage from "./page/RegisterPage";
12 | import SelectedPlayerPage from "./page/SelectedPlayerPage";
13 | import SignupPage from "./page/SignupPage";
14 | import WaitingPage from "./page/waitingPage";
15 | import ProtectedRoutes from '../ProtectedRoutes'
16 | import SearchPage from "./page/searchPage";
17 | 
18 | function App() {
19 |   return (
20 |     <BrowserRouter>
21 |       <Routes>
22 |         {/* player pages */}
23 | 
24 |         <Route path="/" element={<LoginPage />} />
25 |         <Route path="/signup" element={<SignupPage />} />
26 |         <Route path="/register" element={<RegisterPage />} />
27 |         <Route path="/waiting" element={<WaitingPage />} />
28 |         <Route path="/home" element={<ProtectedRoutes><HomePage /></ProtectedRoutes>} />
29 |         <Route path="/chat" element={<ProtectedRoutes><ChatPage /></ProtectedRoutes>} />
30 |         <Route path="/profile" element={<ProtectedRoutes><ProfilePage /></ProtectedRoutes>} />
31 |         <Route path="/player" element={<ProtectedRoutes><PlayerPage /></ProtectedRoutes>} />
32 |         <Route path="/selectedplayer" element={<ProtectedRoutes><SelectedPlayerPage /></ProtectedRoutes>} />
33 |         <Route path="/singlePage" element={<ProtectedRoutes><SinglePage /></ProtectedRoutes>} />
34 |         <Route path="/search" element={<ProtectedRoutes><SearchPage /></ProtectedRoutes>} />
35 |         <Route path="/all" element={<ProtectedRoutes><AllPlayers /></ProtectedRoutes>} />
36 |         <Route path="/notification" element={<Notification />} />
37 | 
38 |         {/* erro Page */}
39 |         <Route path="*" element={<ErrorPage />} />
40 |       </Routes>
41 |     </BrowserRouter>
42 |   );
43 | }
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/src/helpers/validate.js:
--------------------------------------------------------------------------------
 1 | import { toast } from "react-hot-toast";
 2 | 
 3 | 
 4 | 
 5 | 
 6 | export async function siginupValidation(values) {
 7 |     let error = {}
 8 | 
 9 |     if (!values.fullname) {
10 |         return error.fullname = toast.error('UserName Required....🤔!');
11 |     } else if (!values.email) {
12 |         return error.email = toast.error('Email Required....😒!');
13 |     } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/i.test(values.email)) {
14 |         return error.email = toast.error('Invalid email....!');
15 |     } else if (!values.phone) {
16 |         return error.phone = toast.error('phone Required....🙌!');
17 |     } else if (values.phone.length < 9) {
18 |         return error.phone = toast.error('phone number error...!📞')
19 |     } else if (!values.password) {
20 |         return error.password = toast.error('password Required....🙌!');
21 |     } else if (values.password.length < 4) {
22 |         return error.password = toast.error('password must be more than 4! characters')
23 |     }
24 | 
25 | 
26 | }
27 | 
28 | export  async function loginValidation(values){
29 |     let error= {}
30 |     if(!values.email){
31 |         return error.email =toast.error('Email Required....😒!');
32 |     }else if(!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/i.test(values.email)){
33 |         return  error.email =toast.error('Invalid email....!');
34 |     }else if (!values.password) {
35 |         return error.password = toast.error('password Required....🙌!');
36 |     }
37 | }
38 | 
39 | 
40 | // ** validate full name**
41 | function fullnameVerify(error = {}, values) {
42 |     if (!values.fullname) {
43 |         error.fullname = toast.error('UserName Required....🤔!');
44 |     }
45 |     return error;
46 | }
47 | //  emailvalidation 
48 | function emailVerify(error = {}, values) {
49 |     if (!values.email) {
50 |         error.email = toast.error('Email Required....😒!');
51 |     } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/i.test(values.email)) {
52 |         error.email = toast.error('Invalid email....!');
53 | 
54 |     }
55 |     return error;
56 | }
57 | // passwordvalidation
58 | function passwordVerify(error = {}, values) {
59 |     if (!values.password) {
60 |         error.password = toast.error('password Required....🙌!');
61 |     } else if (values.password.length < 4) {
62 |         error.password = toast.error('password must be more than 4! characters')
63 |     }
64 |     return error;
65 | }
66 | 
67 | function phoneVerify(error = {}, values) {
68 |     if (!values.phone) {
69 |         error.phone = toast.error('phone Required....🙌!');
70 |     } else if (values.phone.length < 9) {
71 |         error.phone = toast.error('phone number error...!🤷‍♂️')
72 |     }
73 |     return error;
74 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🚀 Project Scout
 2 | 
 3 | ## 👋 Hello There! I'm Ajmal Devala
 4 | 
 5 | [![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?style=for-the-badge&logo=linkedin)](https://www.linkedin.com/in/ajmal-devala/)
 6 | [![GitHub](https://img.shields.io/badge/GitHub-black?style=for-the-badge&logo=github)](https://github.com/AjmalDevala/)
 7 | [![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:ajmaldevala@gmail.com)
 8 | 
 9 | ## 📋 Project Overview
10 | 
11 | **Scout** is a modern, responsive web application built with React, designed to provide a seamless and intuitive user experience.
12 | 
13 | ## 🛠 Tech Arsenal
14 | 
15 | ### Frontend Frameworks
16 | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
17 | ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)
18 | 
19 | ### Styling & Design
20 | ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
21 | ![PostCSS](https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white)
22 | 
23 | ### State Management & Utilities
24 | ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white)
25 | ![Socket.IO](https://img.shields.io/badge/Socket.IO-010101?style=for-the-badge&logo=socket.io&logoColor=white)
26 | 
27 | ## 🚀 Quick Start
28 | 
29 | ### Prerequisites
30 | - Node.js 16+
31 | - npm or Yarn
32 | 
33 | ### Installation
34 | ```bash
35 | # Clone the repository
36 | git clone https://github.com/AjmalDevala/FotWeb-Scout.git
37 | 
38 | # Navigate to project directory
39 | cd FotWeb-Scout
40 | 
41 | # Install dependencies
42 | npm install
43 | 
44 | # Start development server
45 | npm run dev
46 | ```
47 | 
48 | ## 🌟 Project Features
49 | 
50 | - 🔥 Hot Reloading with Vite
51 | - 🎨 Responsive Design with Tailwind CSS
52 | - 🔌 Real-time Communication with Socket.IO
53 | - 📱 Mobile-First Approach
54 | 
55 | ## 📂 Project Structure
56 | 
57 | ```
58 | FotWeb-Scout/
59 | │
60 | ├── src/
61 | │   ├── components/    # Reusable UI Components
62 | │   ├── pages/         # Page Components
63 | │   ├── hooks/         # Custom React Hooks
64 | │   ├── services/      # API & Service Configurations
65 | │   └── utils/         # Utility Functions
66 | │
67 | ├── public/            # Static Assets
68 | └── vite.config.js     # Vite Configuration
69 | ```
70 | 
71 | ## 🤝 Contributing
72 | 
73 | 1. Fork the Repository
74 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
75 | 3. Commit Changes (`git commit -m 'Add some AmazingFeature'`)
76 | 4. Push to Branch (`git push origin feature/AmazingFeature`)
77 | 5. Open a Pull Request
78 | 
79 | ## 📜 License
80 | 
81 | Distributed under the MIT License. See `LICENSE` for more details.
82 | 
83 | ## 📞 Contact Me
84 | 
85 | - **Email**: [ajmaldevala@gmail.com](mailto:ajmaldevala@gmail.com)
86 | - **LinkedIn**: [Ajmal Devala](https://www.linkedin.com/in/ajmal-devala/)
87 | - **GitHub**: [AjmalDevala](https://github.com/AjmalDevala/)
88 | 
89 | ---
90 | 
91 | **Made with ❤️ by Ajmal Devala**
92 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/auth/Login.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | import { toast, Toaster } from "react-hot-toast";
  4 | import { useFormik } from "formik";
  5 | import { loginValidation } from "../../helpers/validate";
  6 | import Instance from "../../config/Instance";
  7 | 
  8 | function Login() {
  9 |   const navigate = useNavigate();
 10 |   const Formik = useFormik({
 11 |     initialValues: {
 12 |       email: "",
 13 |       password: "",
 14 |     },
 15 |     validate: loginValidation,
 16 |     validateOnBlur: false,
 17 |     validateOnChange: false,
 18 |     onSubmit: async (values) => {
 19 |       await Instance.post("/scout/scoutLogin", { values })
 20 |         .then((res) => {
 21 |           let { token } = res.data;
 22 |           const scout=res.data.scout.status
 23 |           localStorage.setItem("token", token);
 24 |           localStorage.setItem("fullname", res.data.scout.fullname);
 25 |           localStorage.setItem("scoutId", res.data.scout._id);
 26 |           if(scout=="Pending"){
 27 |               navigate("/register");
 28 |           }else{
 29 |               navigate("/home",{replace:true});
 30 |           }
 31 |         })
 32 |         .catch((error) => {
 33 |           console.log(error);
 34 |           toast.error(error.response.data.error);
 35 |         });
 36 |     },
 37 |   });
 38 | 
 39 |   return (
 40 |     <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 bg-[url('/images/playerlogin.jpg')] ">
 41 |       <Toaster position="top-center"></Toaster>
 42 |       <div className="mx-auto max-w-lg">
 43 |         <h1 className="text-center text-2xl font-bold text-blue-900 sm:text-3xl">
 44 |           Get started today
 45 |         </h1>
 46 |         
 47 | 
 48 |         <form
 49 |           className="mt-6 mb-0 space-y-4 rounded-lg p-8 shadow-2xl"
 50 |           onClick={Formik.handleSubmit}
 51 |           >
 52 |           <p className="text-lg font-medium">Sign in to your account</p>
 53 | 
 54 |           <div>
 55 |             <label for="email" className="text-sm font-medium">
 56 |               Email
 57 |             </label>
 58 | 
 59 |             <div className="relative mt-1">
 60 |               <input
 61 |                 {...Formik.getFieldProps("email")}
 62 |                 type="email"
 63 |                 id="email"
 64 |                 className="w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm"
 65 |                 placeholder="Enter email"
 66 |               />
 67 | 
 68 |               <span className="absolute inset-y-0 right-4 inline-flex items-center">
 69 |                 <svg
 70 |                   xmlns="http://www.w3.org/2000/svg"
 71 |                   className="h-5 w-5 text-gray-400"
 72 |                   fill="none"
 73 |                   viewBox="0 0 24 24"
 74 |                   stroke="currentColor"
 75 |                 >
 76 |                   <path
 77 |                     stroke-linecap="round"
 78 |                     stroke-linejoin="round"
 79 |                     stroke-width="2"
 80 |                     d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
 81 |                   />
 82 |                 </svg>
 83 |               </span>
 84 |             </div>
 85 |           </div>
 86 | 
 87 |           <div>
 88 |             <label for="password" className="text-sm font-medium">
 89 |               Password
 90 |             </label>
 91 | 
 92 |             <div className="relative mt-1">
 93 |               <input
 94 |                 {...Formik.getFieldProps("password")}
 95 |                 type="password"
 96 |                 id="password"
 97 |                 className="w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm"
 98 |                 placeholder="Enter password"
 99 |               />
100 | 
101 |               <span className="absolute inset-y-0 right-4 inline-flex items-center">
102 |                 <svg
103 |                   xmlns="http://www.w3.org/2000/svg"
104 |                   className="h-5 w-5 text-gray-400"
105 |                   fill="none"
106 |                   viewBox="0 0 24 24"
107 |                   stroke="currentColor"
108 |                 >
109 |                   <path
110 |                     stroke-linecap="round"
111 |                     stroke-linejoin="round"
112 |                     stroke-width="2"
113 |                     d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
114 |                   />
115 |                   <path
116 |                     stroke-linecap="round"
117 |                     stroke-linejoin="round"
118 |                     stroke-width="2"
119 |                     d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
120 |                   />
121 |                 </svg>
122 |               </span>
123 |             </div>
124 |           </div>
125 | 
126 |           <button
127 |             type="submit"
128 |             className="block w-full rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white"
129 |           >
130 |             Sign in
131 |           </button>
132 | 
133 |           <p className="text-center text-sm text-gray-500">
134 |             No account?
135 |             <a
136 |               onClick={() => {
137 |                 navigate("/signup");
138 |               }}
139 |               className="underline"
140 |               href=""
141 |             >
142 |               Sign up
143 |             </a>
144 |           </p>
145 |         </form>
146 |       </div>
147 |     </div>
148 |   );
149 | }
150 | 
151 | export default Login;
152 | 


--------------------------------------------------------------------------------
/src/components/auth/Signup.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Navigate, useNavigate } from "react-router-dom";
  3 | import { toast, Toaster } from "react-hot-toast";
  4 | import { useFormik } from "formik";
  5 | import  {siginupValidation} from "../../helpers/validate";
  6 | import Instance from "../../config/Instance";
  7 | function SignUp() {
  8 |   const navigate = useNavigate();
  9 |   const Formik = useFormik({
 10 |     initialValues: {
 11 |       fullname: "",
 12 |       email: "",
 13 |       phone:"",
 14 |       password: "",
 15 |     },
 16 |     validate :siginupValidation,
 17 |     validateOnBlur: false,
 18 |     validateOnChange: false,
 19 |     onSubmit: async (values) => {
 20 |       await Instance.post('/scout/scoutSignup',{values}).then((res)=>{
 21 |         navigate('/')
 22 |       }).catch((error)=>{
 23 |         console.log(error)
 24 |         toast.error(error.response.data.error)
 25 |       })
 26 |     },
 27 |   });
 28 |   return (
 29 |     <div>
 30 |      
 31 |         <Toaster position="top-center" ></Toaster>
 32 |       <body class="antialiased bg-gradient-to-br from-green-100 to-white">
 33 |         <div class="container px-6 mx-auto">
 34 |           <div class="flex flex-col text-center md:text-left md:flex-row h-screen justify-evenly md:items-center">
 35 |             <div class="flex flex-col w-full">
 36 |               <div>
 37 |                 <svg
 38 |                   class="w-20 h-20 mx-auto md:float-left fill-stroke text-gray-800"
 39 |                   fill="none"
 40 |                   stroke="currentColor"
 41 |                   viewBox="0 0 24 24"
 42 |                   xmlns="/images/goly.png"
 43 |                 >
 44 |                   <path
 45 |                     stroke-linecap="round"
 46 |                     stroke-linejoin="round"
 47 |                     stroke-width="2"
 48 |                     d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
 49 |                   ></path>
 50 |                 </svg>
 51 |               </div>
 52 |               <h1 class="text-5xl text-gray-800 font-bold">
 53 |                 {" "}
 54 |                 Your journey starts here
 55 |               </h1>
 56 |               <p class="w-5/12 mx-auto md:mx-0 text-gray-500">
 57 |                 We Never Stop Dreaming Big{" "}
 58 |               </p>
 59 |             </div>
 60 |             <div class="w-full md:w-full lg:w-9/12 mx-auto md:mx-0">
 61 |               <div class="bg-white p-10 flex flex-col w-full shadow-xl rounded-xl">
 62 |                 <h2 class="text-2xl font-bold text-gray-800 text-left mb-5">
 63 |                 Sign Up
 64 |                 </h2>
 65 |                 <form  class="w-full" onSubmit={Formik.handleSubmit}>
 66 |                   <div id="input" class="flex flex-col w-full my-5">
 67 |                     <label for="username" class="text-gray-500 mb-2">
 68 |                       Username
 69 |                     </label>
 70 |                     <input
 71 |                     {...Formik.getFieldProps('fullname')}
 72 |                       type="fullname"
 73 |                       id="fullname"
 74 |                       placeholder="Please insert your username"
 75 |                       class="appearance-none border-2 border-gray-100 rounded-lg px-4 py-3 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:shadow-lg"
 76 |                     />
 77 |                   </div>
 78 |                   <div id="input" class="flex flex-col w-full my-5">
 79 |                     <label for="email" class="text-gray-500 mb-2">
 80 |                       Enter Email
 81 |                     </label>
 82 |                     <input
 83 |                     {...Formik.getFieldProps('email')}
 84 |                       type="email"
 85 |                       id="email"
 86 |                       placeholder="Please insert your Email"
 87 |                       class="appearance-none border-2 border-gray-100 rounded-lg px-4 py-3 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:shadow-lg"
 88 |                     />
 89 |                   </div>
 90 |                   <div id="input" class="flex flex-col w-full my-5">
 91 |                     <label for="phone" class="text-gray-500 mb-2">
 92 |                      Phone Number
 93 |                     </label>
 94 |                     <input
 95 |                     {...Formik.getFieldProps('phone')}
 96 |                       type="phone"
 97 |                       id="phone"
 98 |                       placeholder="Please insert your phone number"
 99 |                       class="appearance-none border-2 border-gray-100 rounded-lg px-4 py-3 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:shadow-lg"
100 |                     />
101 |                   </div>
102 |                   <div id="input" class="flex flex-col w-full my-5">
103 |                     <label for="password" class="text-gray-500 mb-2">
104 |                       Password
105 |                     </label>
106 |                     <input
107 |                     {...Formik.getFieldProps('password')}
108 |                       type="password"
109 |                       id="password"
110 |                       placeholder="Please insert your password"
111 |                       class="appearance-none border-2 border-gray-100 rounded-lg px-4 py-3 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:shadow-lg"
112 |                     />
113 |                   </div>
114 |                   <div id="button" class="flex flex-col w-full my-5">
115 |                     <button
116 |                       type="submit  "
117 |                       class="w-full py-4 bg-green-600/50 hover:translate-x-3.5 rounded-lg text-green-100" 
118 |                     >
119 |                         Sign Up
120 |                     </button>
121 |                     <div class="flex justify-evenly mt-5">
122 |                       {/* <a
123 |                         href="#"
124 |                         class="w-full text-center font-medium text-gray-500"
125 |                       >
126 |                         Recover password!
127 |                       </a> */}
128 |                       <a
129 |                         href=""
130 |                         onClick={()=>{navigate('/')}}
131 |                         class="w-full text-center font-medium text-gray-500" 
132 |                       >
133 |                         alredy  have an account
134 |                       </a>
135 |                     </div>
136 |                   </div>
137 |                 </form>
138 |               </div>
139 |             </div>
140 |           </div>
141 |         </div>
142 |       </body>
143 |     </div>
144 |   );
145 | }
146 | 
147 | export default SignUp;
148 | 


--------------------------------------------------------------------------------
/src/components/layout/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | 
  4 | const Navbar = () => {
  5 |   const navigate = useNavigate();
  6 |   return (
  7 |     <div>
  8 |       <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
  9 |         <div class="container flex flex-wrap items-center justify-between mx-auto">
 10 |           <a class="flex items-center">
 11 |             <img
 12 |               onClick={() => {
 13 |                 navigate("/home");
 14 |               }}
 15 |               src="/images/logo.png"
 16 |               class="h-6 mr-3 sm:h-9"
 17 |               alt="Flowbite Logo"
 18 |             />
 19 |             <span
 20 |               onClick={() => {
 21 |                 navigate("/home");
 22 |               }}
 23 |               class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
 24 |             >
 25 |               Fot-Web
 26 |             </span>
 27 |           </a>
 28 |           <div class="flex md:order-2">
 29 |             <button
 30 |               type="button"
 31 |               data-collapse-toggle="navbar-search"
 32 |               aria-controls="navbar-search"
 33 |               aria-expanded="false"
 34 |               class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
 35 |             >
 36 |               <svg
 37 |                 class="w-5 h-5"
 38 |                 aria-hidden="true"
 39 |                 fill="currentColor"
 40 |                 viewBox="0 0 20 20"
 41 |                 xmlns="http://www.w3.org/2000/svg"
 42 |               >
 43 |                 <path
 44 |                   fill-rule="evenodd"
 45 |                   d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
 46 |                   clip-rule="evenodd"
 47 |                 ></path>
 48 |               </svg>
 49 |               <span class="sr-only">Search</span>
 50 |             </button>
 51 |             <div class="relative hidden md:block">
 52 |               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
 53 |                 <svg
 54 |                   class="w-5 h-5 text-gray-500"
 55 |                   aria-hidden="true"
 56 |                   fill="currentColor"
 57 |                   viewBox="0 0 20 20"
 58 |                   xmlns="http://www.w3.org/2000/svg"
 59 |                 >
 60 |                   <path
 61 |                     fill-rule="evenodd"
 62 |                     d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
 63 |                     clip-rule="evenodd"
 64 |                   ></path>
 65 |                 </svg>
 66 |                 <span class="sr-only">Search icon</span>
 67 |               </div>
 68 |               <input
 69 |                 type="text"
 70 |                 id="search-navbar"
 71 |                 class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
 72 |                 placeholder="Search..."
 73 |               />
 74 |             </div>
 75 |             <button
 76 |               data-collapse-toggle="navbar-search"
 77 |               type="button"
 78 |               class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
 79 |               aria-controls="navbar-search"
 80 |               aria-expanded="false"
 81 |             >
 82 |               <span class="sr-only">Open menu</span>
 83 |               <svg
 84 |                 class="w-6 h-6"
 85 |                 aria-hidden="true"
 86 |                 fill="currentColor"
 87 |                 viewBox="0 0 20 20"
 88 |                 xmlns="http://www.w3.org/2000/svg"
 89 |               >
 90 |                 <path
 91 |                   fill-rule="evenodd"
 92 |                   d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
 93 |                   clip-rule="evenodd"
 94 |                 ></path>
 95 |               </svg>
 96 |             </button>
 97 |           </div>
 98 |           <div
 99 |             class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
100 |             id="navbar-search"
101 |           >
102 |             <div class="relative mt-3 md:hidden">
103 |               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
104 |                 <svg
105 |                   class="w-5 h-5 text-gray-500"
106 |                   aria-hidden="true"
107 |                   fill="currentColor"
108 |                   viewBox="0 0 20 20"
109 |                   xmlns="http://www.w3.org/2000/svg"
110 |                 >
111 |                   <path
112 |                     fill-rule="evenodd"
113 |                     d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
114 |                     clip-rule="evenodd"
115 |                   ></path>
116 |                 </svg>
117 |               </div>
118 |               <input
119 |                 type="text"
120 |                 id="search-navbar"
121 |                 class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
122 |                 placeholder="Search..."
123 |               />
124 |             </div>
125 | 
126 |             <ul class="flex   flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
127 |               <li>
128 |                 <a
129 |                   onClick={() => {
130 |                     navigate("/home");
131 |                   }}
132 |                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
133 |                 >
134 |                   Home
135 |                 </a>
136 |               </li>
137 |             </ul>
138 |             <ul class="flex   flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
139 |               <li>
140 |               
141 |                 <button onClick={() => {
142 |                     localStorage.clear();
143 |                     navigate("/");
144 |                   }} class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
145 |                   Logout
146 |                 </button>
147 |               </li>
148 |             </ul>
149 |           </div>
150 |         </div>
151 |       </nav>
152 |     </div>
153 |   );
154 | };
155 | 
156 | export default Navbar;
157 | 


--------------------------------------------------------------------------------
/src/components/layout/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | const Footer=()=> {
  4 |   return (
  5 |     <div>
  6 |     <footer aria-label="Site Footer" class="bg-gray-100">
  7 |   <div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
  8 |     <div class="flex justify-center text-teal-600">
  9 |     <img className='h-14' src="/images/logo.png " alt="" />
 10 |     </div>
 11 | 
 12 |     <p class="mx-auto mt-1 max-w-md text-center leading-relaxed text-gray-500">
 13 |     As a football Scout, I believe I have a responsibility to lead by example and remain in excellent physical health for the benefit of the players...
 14 |     </p>
 15 | 
 16 |     <nav aria-label="Footer Nav" class="mt-6">
 17 |       <ul class="flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12">
 18 |         <li>
 19 |           <a class="text-gray-700 transition hover:text-gray-700/75" href="/">
 20 |             About
 21 |           </a>
 22 |         </li>
 23 | 
 24 |         <li>
 25 |           <a class="text-gray-700 transition hover:text-gray-700/75" href="/">
 26 |             Careers
 27 |           </a>
 28 |         </li>
 29 | 
 30 |         <li>
 31 |           <a class="text-gray-700 transition hover:text-gray-700/75" href="/">
 32 |             History
 33 |           </a>
 34 |         </li>
 35 | 
 36 |         <li>
 37 |           <a class="text-gray-700 transition hover:text-gray-700/75" href="/">
 38 |             Services
 39 |           </a>
 40 |         </li>
 41 | 
 42 |         <li>
 43 |           <a class="text-gray-700 transition hover:text-gray-700/75" href="/">
 44 |             Projects
 45 |           </a>
 46 |         </li>
 47 | 
 48 |         <li>
 49 |           <a class="text-gray-700 transition hover:text-gray-700/75" href="/">
 50 |             Blog
 51 |           </a>
 52 |         </li>
 53 |       </ul>
 54 |     </nav>
 55 | 
 56 |     <ul class="mt-12 flex justify-center gap-6 md:gap-8">
 57 |       <li>
 58 |         <a
 59 |           href="/"
 60 |           rel="noreferrer"
 61 |           target="_blank"
 62 |           class="text-gray-700 transition hover:text-gray-700/75"
 63 |         >
 64 |           <span class="sr-only">Facebook</span>
 65 |           <svg
 66 |             class="h-6 w-6"
 67 |             fill="currentColor"
 68 |             viewBox="0 0 24 24"
 69 |             aria-hidden="true"
 70 |           >
 71 |             <path
 72 |               fill-rule="evenodd"
 73 |               d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
 74 |               clip-rule="evenodd"
 75 |             />
 76 |           </svg>
 77 |         </a>
 78 |       </li>
 79 | 
 80 |       <li>
 81 |         <a
 82 |           href="/"
 83 |           rel="noreferrer"
 84 |           target="_blank"
 85 |           class="text-gray-700 transition hover:text-gray-700/75"
 86 |         >
 87 |           <span class="sr-only">Instagram</span>
 88 |           <svg
 89 |             class="h-6 w-6"
 90 |             fill="currentColor"
 91 |             viewBox="0 0 24 24"
 92 |             aria-hidden="true"
 93 |           >
 94 |             <path
 95 |               fill-rule="evenodd"
 96 |               d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
 97 |               clip-rule="evenodd"
 98 |             />
 99 |           </svg>
100 |         </a>
101 |       </li>
102 | 
103 |       <li>
104 |         <a
105 |           href="/"
106 |           rel="noreferrer"
107 |           target="_blank"
108 |           class="text-gray-700 transition hover:text-gray-700/75"
109 |         >
110 |           <span class="sr-only">Twitter</span>
111 |           <svg
112 |             class="h-6 w-6"
113 |             fill="currentColor"
114 |             viewBox="0 0 24 24"
115 |             aria-hidden="true"
116 |           >
117 |             <path
118 |               d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
119 |             />
120 |           </svg>
121 |         </a>
122 |       </li>
123 | 
124 |       <li>
125 |         <a
126 |           href="/"
127 |           rel="noreferrer"
128 |           target="_blank"
129 |           class="text-gray-700 transition hover:text-gray-700/75"
130 |         >
131 |           <span class="sr-only">GitHub</span>
132 |           <svg
133 |             class="h-6 w-6"
134 |             fill="currentColor"
135 |             viewBox="0 0 24 24"
136 |             aria-hidden="true"
137 |           >
138 |             <path
139 |               fill-rule="evenodd"
140 |               d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
141 |               clip-rule="evenodd"
142 |             />
143 |           </svg>
144 |         </a>
145 |       </li>
146 | 
147 |       <li>
148 |         <a
149 |           href="/"
150 |           rel="noreferrer"
151 |           target="_blank"
152 |           class="text-gray-700 transition hover:text-gray-700/75"
153 |         >
154 |           <span class="sr-only">Dribbble</span>
155 |           <svg
156 |             class="h-6 w-6"
157 |             fill="currentColor"
158 |             viewBox="0 0 24 24"
159 |             aria-hidden="true"
160 |           >
161 |             <path
162 |               fill-rule="evenodd"
163 |               d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
164 |               clip-rule="evenodd"
165 |             />
166 |           </svg>
167 |         </a>
168 |       </li>
169 |     </ul>
170 |   </div>
171 | </footer>
172 | 
173 |  </div>
174 | 
175 |   )
176 | }
177 | 
178 | export default Footer
179 | 


--------------------------------------------------------------------------------
/src/components/Player.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { toast, Toaster } from "react-hot-toast";
  3 | import { Link, useNavigate } from "react-router-dom";
  4 | import Instance from "../config/Instance";
  5 | import ReactPaginate from "react-paginate";
  6 | import "../pagenation.css"
  7 | 
  8 | function Player() {
  9 |   const scoutId = localStorage.getItem("scoutId");
 10 |   const token =localStorage.getItem("token")
 11 |   const [search, setSearch] = useState("");
 12 |   const [connectedPlayers, setConnectedPlayers] = useState([]);
 13 |   const [player, setPlayer] = useState([]);
 14 |   const [change, setChange] = useState(false);
 15 |   const navigate = useNavigate();
 16 | 
 17 |   //  Pagination......................
 18 |   const [currentPage, setCurrentPage] = useState(0);
 19 |   const [itemsPerPage, setItemsPerPage] = useState(8);
 20 |   const dataToRender = player.slice(
 21 |     currentPage * itemsPerPage,
 22 |     (currentPage + 1) * itemsPerPage
 23 |   );
 24 | 
 25 | 
 26 |   const handlePageChange = ({ selected }) => {
 27 |     setCurrentPage(selected);
 28 |   };
 29 | 
 30 |   const searchData = (player) => {
 31 |     return search === ""
 32 |       ? player
 33 |       : player.userId.fullname.toLowerCase().includes(search) ||
 34 |           player.position.toLowerCase().includes(search);
 35 |   };
 36 | 
 37 | 
 38 | 
 39 | 
 40 | 
 41 |   useEffect(() => {
 42 |     Instance.get("/admin/allplayer",{
 43 |       headers:{Authorization:`Bearer ${token}`}
 44 |     }).then((response) => {
 45 |       setPlayer(response.data.player);
 46 |       connected();
 47 |     });
 48 |   }, [change]);
 49 | 
 50 |   const connected = () => {
 51 |     Instance
 52 |       .get(`/admin/connectedPlayers`,{
 53 |         headers:{Authorization:`Bearer ${token}`},
 54 |       })
 55 |       .then((response) => {
 56 |         setConnectedPlayers(response.data.connectPlayer);
 57 |       });
 58 |   };
 59 | 
 60 |   const Connect = (id) => {
 61 |     Instance
 62 |       .post(
 63 |         `/scout/connectPlayer?userId=${id}`,{},{
 64 |           headers:{Authorization:`Bearer ${token}`}
 65 |         })
 66 |       .then((response) => {
 67 |         toast.success(response.data.msg);
 68 |         change === true ? setChange(false) : setChange(true);
 69 |       })
 70 |       .catch((error) => {
 71 |         if (error.response) {
 72 |           toast.error(error.response.data.error);
 73 |         } else {
 74 |           toast.error(error.message);
 75 |         }
 76 |       });
 77 |   };
 78 | 
 79 | 
 80 | 
 81 | 
 82 | 
 83 |   
 84 |   return (
 85 |     <div>
 86 |       <Toaster position="top-center"></Toaster>
 87 |       <link
 88 |         rel="stylesheet"
 89 |         href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css"
 90 |       />
 91 | 
 92 |       <div className="flex items-center justify-center min-h-screen bg-white ">
 93 |         <div className="flex flex-col">
 94 |           <div className="flex flex-col ">
 95 |             <div className="container max-w-7xl px-4">
 96 |               <div className="flex flex-wrap justify-center text-center ">
 97 |                 <div className="w-full lg:w-6/12 px-4">
 98 |                   <h1 className="text-gray-900 text-4xl font-bold mb-7">
 99 |                     Meet the players
100 |                   </h1>
101 |                   {/* <!-- Description --> */}
102 |                   <p className="text-gray-700 text-lg font-light">
103 |                     A player scout typically attends as many football matches as
104 |                     possible to evaluate targets first hand. Scouts who wish to
105 |                     identify promising young players typically attend
106 |                     lower-league club games,.
107 |                   </p>
108 |                   <p className="text-center text-bold">Connect and Message!</p>
109 |                 </div>
110 |               </div>
111 | 
112 |               <div className="flex justify-center">
113 |                 <form className="w-full max-w-md ">
114 |                   <div className="flex items-center border-b-2 border-teal-500 py-2">
115 |                     <input
116 |                       className="appearance-none bg-transparent border-none w-full text-black mr-3 py-1 px-2 leading-tight focus:outline-none"
117 |                       onChange={(e) => {
118 |                         let searchValue = e.target.value.toLocaleLowerCase();
119 |                         setSearch(searchValue);
120 |                       }}
121 |                       type="text"
122 |                       placeholder="Search..."
123 |                       aria-label="Search"
124 |                     />
125 |                     <button
126 |                       className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
127 |                       type="button"
128 |                     >
129 |                       Search
130 |                     </button>
131 |                   </div>
132 |                 </form>
133 |               </div>
134 | 
135 |               <div className="bg-white">
136 |                 <div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
137 |                   <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
138 |                     {dataToRender.filter(searchData).map((player) => (
139 |                       <div key={player?.id} className="group relative">
140 |                         <Link to={"/singlePage"} state={player?.userId._id}>
141 |                           <div className="min-h-80 aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:aspect-none lg:h-80">
142 |                             <img
143 |                               src={player?.profileUrl}
144 |                               alt="add"
145 |                               className="h-full w-full object-cover object-center lg:h-full lg:w-full sm:h-full sm:w-full md:w-full md:h-full"
146 |                             />
147 |                           </div>
148 |                         </Link>
149 |                         <p className="mt-1 text-xl text-blue-600 flex justify-center">
150 |                           {player?.position}
151 |                         </p>
152 |                         <div className="mt-4 flex justify-between">
153 |                           <div>
154 |                             <h3 className="text-lg text-bold text-">
155 |                               {player?.userId.fullname}
156 |                             </h3>
157 |                             <h4 className="text-base text-neutral-900">
158 |                               Age:
159 |                               {player?.age}
160 |                             </h4>
161 |                           </div>
162 |                           <p className="text-sm font-medium text-gray-900">
163 |                             {player?.nationality}
164 |                           </p>
165 |                         </div>
166 |                         <div className="flex justify-center">
167 |                           {connectedPlayers.includes(player.userId._id) ? (
168 |                             <button
169 |                               onClick={() => navigate("/chat")}
170 |                               className="mx-auto lg:mx-0 hover:none bg-emerald-200 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
171 |                             >
172 |                               Message
173 |                             </button>
174 |                           ) : (
175 |                             <button
176 |                               onClick={() => Connect(player.userId._id)}
177 |                               className="mx-auto lg:mx-0 hover:none bg-emerald-200 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
178 |                             >
179 |                               Connect!
180 |                             </button>
181 |                           )}
182 |                         </div>
183 |                       </div>
184 |                     ))}
185 |                   </div>
186 |                 </div>
187 |               </div>
188 |             </div>
189 |           </div>
190 |         </div>
191 |       </div>
192 |       <ReactPaginate
193 |         pageCount={Math.ceil(player.length / itemsPerPage)}
194 |         marginPagesDisplayed={2}
195 |         pageRangeDisplayed={5}
196 |         onPageChange={handlePageChange}
197 |         containerClassName="pagination"
198 |         activeClassName="active"
199 |         previousLabel="Previous"
200 |         nextLabel="Next"
201 |         pageLinkClassName="page-link"
202 |         previousLinkClassName="page-link"
203 |         nextLinkClassName="page-link"
204 |         disabledClassName="disabled"
205 |       />
206 |     </div>
207 |   );
208 | }
209 | 
210 | export default Player;
211 | 


--------------------------------------------------------------------------------
/src/components/SelectedPlayer.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { toast, Toaster } from "react-hot-toast";
  3 | import { Link } from "react-router-dom";
  4 | import Instance from "../config/Instance";
  5 | 
  6 | function SelectedPlayer() {
  7 |   const [search, setSearch] = useState("");
  8 |   const [Connectedplayer, setConnectedplayer] = useState([]);
  9 |   const [change, setChange] = useState(false);
 10 |   
 11 |   const searchData = (Connectedplayer) => {
 12 |     return search === ""
 13 |       ? Connectedplayer
 14 |       : Connectedplayer.fullname.toLowerCase().includes(search);
 15 |   };
 16 | 
 17 |   useEffect(() => {
 18 |     const token = localStorage.getItem("token");
 19 |     const connected = async () => {
 20 |       const { data } = await Instance.post(
 21 |         "/admin/connectedUsers",
 22 |         {},
 23 |         {
 24 |           headers: { Authorization: `Bearer ${token}` },
 25 |         }
 26 |       );
 27 |       setConnectedplayer(data.connectedPlayers);
 28 |       console.log(setConnectedplayer);
 29 |       setScoutCount(data.connectedPlayers.length);
 30 |     };
 31 |     connected();
 32 |   }, [change]);
 33 | 
 34 |   const remove = (userId) => {
 35 |     const token = localStorage.getItem("token");
 36 |     Instance
 37 |       .post(`/admin/removeUser/${userId}`,{},
 38 |         {
 39 |           headers: { Authorization: `Bearer ${token}` },
 40 |         }
 41 |       )
 42 |       .then((response) => {
 43 |         change === true ? setChange(false) : setChange(true);
 44 |         toast.success(response.data.msg);
 45 |       });
 46 |   };
 47 | 
 48 | 
 49 |   return (
 50 |     <div>
 51 |       <Toaster></Toaster>
 52 |       <body class="antialiased font-sans bg-gray-200">
 53 |         <div class="container mx-auto px-4 sm:px-8">
 54 |           <div class="py-8">
 55 |             <div>
 56 |               <h2 class="text-2xl font-semibold leading-tight">Users</h2>
 57 |             </div>
 58 |             <div class="my-2 flex sm:flex-row flex-col">
 59 |               <div class="flex flex-row mb-1 sm:mb-0">
 60 |                 <div class="relative">
 61 |                   <select class="appearance-none h-full rounded-r border-t sm:rounded-r-none sm:border-r-0 border-r border-b block w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500">
 62 |                     <option>All</option>
 63 |                     <option>Inactive</option>
 64 |                   </select>
 65 |                   <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
 66 |                     <svg
 67 |                       class="fill-current h-4 w-4"
 68 |                       xmlns="http://www.w3.org/2000/svg"
 69 |                       viewBox="0 0 20 20"
 70 |                     >
 71 |                       <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
 72 |                     </svg>
 73 |                   </div>
 74 |                 </div>
 75 |               </div>
 76 |               <div class="block relative">
 77 |                 <span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
 78 |                   <svg
 79 |                     viewBox="0 0 24 24"
 80 |                     class="h-4 w-4 fill-current text-gray-500"
 81 |                   >
 82 |                     <path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"></path>
 83 |                   </svg>
 84 |                 </span>
 85 |                 <input
 86 |                   onChange={(e) => {
 87 |                     let searchValue = e.target.value.toLocaleLowerCase();
 88 |                     setSearch(searchValue);
 89 |                   }}
 90 |                   placeholder="Search"
 91 |                   class="appearance-none rounded-r rounded-l sm:rounded-l-none border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none"
 92 |                 />
 93 |               </div>
 94 |             </div>
 95 |             <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
 96 |               <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
 97 |                 <table class="min-w-full leading-normal">
 98 |                   <thead>
 99 |                     <tr>
100 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
101 |                         Player
102 |                       </th>
103 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
104 |                         Player
105 |                       </th>
106 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
107 |                         Email
108 |                       </th>
109 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
110 |                         phone Number
111 |                       </th>
112 | 
113 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
114 |                         Action
115 |                       </th>
116 |                     </tr>
117 |                   </thead>
118 |                   <tbody>
119 |                     {Connectedplayer.filter(searchData).map((data) => (
120 |                       <tr>
121 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
122 |                           <div class="flex items-center">
123 |                             <Link
124 |                               to="/singlePage"
125 |                               state={data._id}
126 |                               class="ml-3"
127 |                             >
128 |                               <span class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight">
129 |                                 <span
130 |                                   aria-hidden
131 |                                   class="absolute inset-0  bg-orange-200  opacity-50 rounded-md"
132 |                                 ></span>
133 |                                 <span class="relative">{data.fullname}</span>
134 |                               </span>
135 |                             </Link>
136 |                           </div>
137 |                         </td>
138 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
139 |                           <p class="text-gray-900 whitespace-no-wrap">
140 |                             {data.fullname}
141 |                           </p>
142 |                         </td>
143 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
144 |                           <p class="text-gray-900 whitespace-no-wrap">
145 |                             {data.email}
146 |                           </p>
147 |                         </td>
148 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
149 |                           <p class="text-green-600 font-bold">{data.phone}</p>
150 |                         </td>
151 | 
152 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
153 |                           <button
154 |                             onClick={() => remove(data._id)}
155 |                             class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
156 |                           >
157 |                             <span
158 |                               aria-hidden
159 |                               class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
160 |                             ></span>
161 |                             <span class="relative">Remove</span>
162 |                           </button>
163 |                         </td>
164 |                       </tr>
165 |                     ))}
166 |                   </tbody>
167 |                 </table>
168 |                 <div class="px-5 py-5 bg-white border-t flex flex-col xs:flex-row items-center xs:justify-between          ">
169 |                   <div class="inline-flex mt-2 xs:mt-0">
170 |                     <button class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-l">
171 |                       Prev
172 |                     </button>
173 |                     <button class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-r">
174 |                       Next
175 |                     </button>
176 |                   </div>
177 |                 </div>
178 |               </div>
179 |             </div>
180 |           </div>
181 |         </div>
182 |       </body>
183 |     </div>
184 |   );
185 | }
186 | 
187 | export default SelectedPlayer;
188 | 


--------------------------------------------------------------------------------
/src/components/SinglePage.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { useLocation, useNavigate } from "react-router-dom";
  3 | import Instance from "../config/Instance";
  4 | import Navbar from "./layout/Navbar";
  5 | 
  6 | function SinglePage() {
  7 |   const navigate = useNavigate();
  8 |   const location = useLocation();
  9 |   const playerId = location?.state;
 10 |   const token = localStorage.getItem("token");
 11 |   const [player, setPlayer] = useState([]);
 12 |   const [gallery, setGallery] = useState([]);
 13 |   useEffect(() => {
 14 |     Instance.get(`/scout/singlePlayer/${playerId}`, {
 15 |       headers: { Authorization: `Bearer ${token}` },
 16 |     }).then((response) => {
 17 |       setPlayer(response.data.player);
 18 |       setGallery(response.data.gallery);
 19 |     });
 20 |   }, []);
 21 | 
 22 |   return (
 23 |     <div>
 24 |       <Navbar />
 25 |       <div className="container mx-auto my-20">
 26 |         <div className="bg-white relative shadow rounded-lg w-5/6 md:w-5/6  lg:w-4/6 xl:w-3/6 mx-auto">
 27 |           <div className="flex justify-center">
 28 |             <img
 29 |               src={player?.profileUrl}
 30 |               alt="som"
 31 |               className="object-fill mx-auto  -top-20 w-52 h-44 shadow-md border-4 border-white transition duration-200 transform hover:scale-110"
 32 |             />
 33 |           </div>
 34 | 
 35 |           <div className="mt-7">
 36 |             <h1 className="font-bold text-center text-3xl text-gray-900">
 37 |               {player.userId?.fullname}
 38 |             </h1>
 39 |             <p className="text-center text-sm text-gray-400 font-medium">
 40 |               {player?.position}
 41 |             </p>
 42 |             <div className="my-5 px-6">
 43 |               <a
 44 |                 href="#"
 45 |                 className="text-gray-200 block rounded-lg text-center font-medium leading-6 px-6 py-3 bg-gray-900 hover:bg-black hover:text-white"
 46 |               >
 47 |                 Connect with{" "}
 48 |                 <span className="font-bold">@{player.userId?.fullname}</span>
 49 |               </a>
 50 |             </div>
 51 | 
 52 |             <div className="w-full">
 53 |               <h3 className="font-medium text-gray-900 text-left px-6">
 54 |                 Recent activites
 55 |               </h3>
 56 |               <div className="mt-5 w-full flex flex-col items-center overflow-hidden text-sm">
 57 |                 <a
 58 |                   href="#"
 59 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150"
 60 |                 >
 61 |                   <img
 62 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
 63 |                     alt=""
 64 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
 65 |                   />
 66 |                   Player Position :
 67 |                   <span className="text-gray-500 font-medium  ml-2">
 68 |                     {player?.position}
 69 |                   </span>
 70 |                 </a>
 71 | 
 72 |                 <a
 73 |                   href="#"
 74 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150"
 75 |                 >
 76 |                   <img
 77 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
 78 |                     alt=""
 79 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
 80 |                   />
 81 |                   player currentTeam :
 82 |                   <span className="text-gray-500 text-base font-bold  ml-2">
 83 |                     {player?.currentTeam}
 84 |                   </span>
 85 |                 </a>
 86 | 
 87 |                 <a
 88 |                   href="#"
 89 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150"
 90 |                 >
 91 |                   <img
 92 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
 93 |                     alt=""
 94 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
 95 |                   />
 96 |                   Player Age :<span className="font-bold">{player?.age}</span>
 97 |                 </a>
 98 |                 <a
 99 |                   href="#"
100 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150"
101 |                 >
102 |                   <img
103 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
104 |                     alt=""
105 |                     className="rounded-full  h-6 shadow-md inline-block mr-2"
106 |                   />
107 |                   Player height :
108 |                   <span className="font-bold">{player?.height} cm</span>
109 |                   <a className="ml-4">
110 |                     {" "}
111 |                     Player Foot :
112 |                     <span className="font-bold ml-4 ">{player?.foot} </span>
113 |                   </a>
114 |                 </a>
115 | 
116 |                 <a
117 |                   href="#"
118 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150"
119 |                 >
120 |                   <img
121 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
122 |                     alt=""
123 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
124 |                   />
125 |                   player country :-
126 |                   <span className="text-gray-500 text-xs">
127 |                     {player?.nationality}
128 |                   </span>
129 |                 </a>
130 | 
131 |                 <a
132 |                   href="#"
133 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150 overflow-hidden"
134 |                 >
135 |                   <img
136 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
137 |                     alt=""
138 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
139 |                   />
140 |                   player past Team :-
141 |                   <span className="text-gray-500 text-xs">
142 |                     {player?.previousTeam}
143 |                   </span>
144 |                 </a>
145 |                 <a
146 |                   href="#"
147 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150 overflow-hidden"
148 |                 >
149 |                   <img
150 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
151 |                     alt=""
152 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
153 |                   />
154 |                   player Awards :-
155 |                   <span className="text-gray-500 font-bold text-base">
156 |                     {player?.awards}
157 |                   </span>
158 |                 </a>
159 |                 <a
160 |                   href="#"
161 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150 overflow-hidden"
162 |                 >
163 |                   <img
164 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
165 |                     alt=""
166 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
167 |                   />
168 |                   player Language :-
169 |                   <span className="text-gray-500 text-xs">
170 |                     {player?.language}
171 |                   </span>
172 |                 </a>
173 |                 <a
174 |                   href="#"
175 |                   className="w-full border-t border-gray-100 text-gray-600 py-4 pl-6 pr-3  block hover:bg-gray-100 transition duration-150 overflow-hidden"
176 |                 >
177 |                   <img
178 |                     src="https://avatars0.githubusercontent.com/u/35900628?v=4"
179 |                     alt=""
180 |                     className="rounded-full h-6 shadow-md inline-block mr-2"
181 |                   />
182 |                   player profile updated :-
183 |                   <span className="text-gray-500 text-xs">
184 |                     {player?.userId?.updatedAt}
185 |                   </span>
186 |                 </a>
187 |               </div>
188 |             </div>
189 |           </div>
190 |         </div>
191 |         <div role="main" class="flex flex-col items-center justify-center mt-7">
192 |           <h1 class="text-4xl font-semibold leading-9 text-center text-gray-800 dark:text-gray-50">
193 |             Player gallery
194 |           </h1>
195 |         </div>
196 | 
197 |         <div className="relative overflow-x-scroll mt-4  flex flex-col min-w-0 mb-6 break-words bg-white rounded-2xl bg-clip-border m-auto p-auto border-0 shadow-2xl">
198 |           <div className="flex   pb-10 hide-scroll-bar mt-4">
199 |             {gallery && gallery.map((item) => (
200 |               <div className="flex flex-nowrap md:ml-20 ml-10 hide-scroll-bar">
201 |                 {item.imageUrl.map((url, index) => (
202 |                   <div class="flex flex-col  ">
203 |                     <div class="flex flex-grow">
204 |                       <div class="max-w-md bg-gray-100 shadow-xl transform transition hover:scale-95 duration-300 ease-in-out rounded-xl p-6 mr-5">
205 |                         <div class="relative   w-[20vw]  h-[50vh] ">
206 |                           <img
207 |                             src={url}
208 |                             alt="Just a flower"
209 |                             class="object-cover  w-[40vw]  h-[50vh]"
210 |                           />
211 |                         </div>
212 |                       </div>
213 |                     </div>
214 |                   </div>
215 |                 ))}
216 |               </div>
217 |             ))}
218 |           </div>
219 |         </div>
220 |       </div>
221 |     </div>
222 |   );
223 | }
224 | 
225 | export default SinglePage;
226 | 


--------------------------------------------------------------------------------
/src/components/Notification.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { Link } from "react-router-dom";
  3 | import Instance from "../config/Instance";
  4 | 
  5 | function Notification() {
  6 |   const token = localStorage.getItem("token");
  7 |   const [users, setUsers] = useState([]);
  8 |   console.log(users);
  9 |   useEffect(() => {
 10 |     Instance
 11 |       .get("/admin/connectedPlayers",{
 12 |           headers: { Authorization: `Bearer ${token}` },
 13 |         }).then((response) => {
 14 |         const allUsers = response.data.connectPlayer;
 15 |         setUsers(allUsers);
 16 |       })
 17 |       .catch((error) => {
 18 |         console.log(error);
 19 |         if (error.response) {
 20 |           toast.error(error.response.data.error);
 21 |         } else {
 22 |           toast.error(error.message);
 23 |         }
 24 |       });
 25 |   }, []);
 26 |   return (
 27 |     <div>
 28 |       <body class="antialiased font-sans bg-gray-200">
 29 |         <div class="container mx-auto px-4 sm:px-8">
 30 |           <div class="py-8">
 31 |             <div>
 32 |               <h2 class="text-2xl font-semibold leading-tight">Users</h2>
 33 |             </div>
 34 |             <div class="my-2 flex sm:flex-row flex-col">
 35 |               <div class="flex flex-row mb-1 sm:mb-0">
 36 |                 <div class="relative">
 37 |                   <select class="appearance-none h-full rounded-l border block  w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
 38 |                     <option>5</option>
 39 |                     <option>10</option>
 40 |                     <option>20</option>
 41 |                   </select>
 42 |                   <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
 43 |                     <svg
 44 |                       class="fill-current h-4 w-4"
 45 |                       xmlns="http://www.w3.org/2000/svg"
 46 |                       viewBox="0 0 20 20"
 47 |                     >
 48 |                       <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
 49 |                     </svg>
 50 |                   </div>
 51 |                 </div>
 52 |                 <div class="relative">
 53 |                   <select class="appearance-none h-full rounded-r border-t sm:rounded-r-none sm:border-r-0 border-r border-b block w-full bg-white border-gray-400 text-gray-700 py-2 px-4 pr-8 leading-tight focus:outline-none focus:border-l focus:border-r focus:bg-white focus:border-gray-500">
 54 |                     <option>All</option>
 55 |                     <option>Active</option>
 56 |                     <option>Inactive</option>
 57 |                   </select>
 58 |                   <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
 59 |                     <svg
 60 |                       class="fill-current h-4 w-4"
 61 |                       xmlns="http://www.w3.org/2000/svg"
 62 |                       viewBox="0 0 20 20"
 63 |                     >
 64 |                       <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
 65 |                     </svg>
 66 |                   </div>
 67 |                 </div>
 68 |               </div>
 69 |               <div class="block relative">
 70 |                 <span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
 71 |                   <svg
 72 |                     viewBox="0 0 24 24"
 73 |                     class="h-4 w-4 fill-current text-gray-500"
 74 |                   >
 75 |                     <path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z"></path>
 76 |                   </svg>
 77 |                 </span>
 78 |                 <input
 79 |                   placeholder="Search"
 80 |                   class="appearance-none rounded-r rounded-l sm:rounded-l-none border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none"
 81 |                 />
 82 |               </div>
 83 |             </div>
 84 |             <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
 85 |               <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
 86 |                 <table class="min-w-full leading-normal">
 87 |                   <thead>
 88 |                     <tr>
 89 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
 90 |                         User
 91 |                       </th>
 92 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
 93 |                         Profession
 94 |                       </th>
 95 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
 96 |                         Joined at
 97 |                       </th>
 98 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
 99 |                         Total Renting
100 |                       </th>
101 |                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
102 |                         Status
103 |                       </th>
104 |                     </tr>
105 |                   </thead>
106 |                   <tbody>
107 |                     {users.map((data, index) => (
108 |                       <tr>
109 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
110 |                           <div class="flex items-center">
111 |                             <div class="flex-shrink-0 w-10 h-10">
112 |                               <img
113 |                                 class="w-full h-full rounded-full"
114 |                                 src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
115 |                                 alt=""
116 |                               />
117 |                             </div>
118 | 
119 |                             <Link
120 |                               to="/userProfile"
121 |                               state={data._id}
122 |                               class="ml-3"
123 |                             >
124 |                               <span class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight">
125 |                                 <span
126 |                                   aria-hidden
127 |                                   class="absolute inset-0  bg-orange-200  opacity-50 rounded-md"
128 |                                 ></span>
129 |                                 <span class="relative">{data.name}</span>
130 |                               </span>
131 |                             </Link>
132 |                           </div>
133 |                         </td>
134 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
135 |                           <p class="text-gray-900 whitespace-no-wrap">
136 |                             {data.profession}
137 |                           </p>
138 |                         </td>
139 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
140 |                           <p class="text-gray-900 whitespace-no-wrap">
141 |                             {data.joined}
142 |                           </p>
143 |                         </td>
144 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center">
145 |                           <p class="text-green-600 font-bold">
146 |                             {data.rentings}
147 |                           </p>
148 |                         </td>
149 |                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
150 |                           {data.status == "Unblocked" && (
151 |                             <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
152 |                               <span
153 |                                 aria-hidden
154 |                                 class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
155 |                               ></span>
156 |                               <span class="relative">Active</span>
157 |                             </span>
158 |                           )}
159 | 
160 |                           {data.status == "Blocked" && (
161 |                             <span class="relative   inline-block px-3 py-1 font-semibold text-red-900 leading-tight">
162 |                               <span
163 |                                 aria-hidden
164 |                                 class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
165 |                               ></span>
166 |                               <span class="relative">Inactive</span>
167 |                             </span>
168 |                           )}
169 |                         </td>
170 |                       </tr>
171 |                     ))}
172 |                   </tbody>
173 |                 </table>
174 |                 <div class="px-5 py-5 bg-white border-t flex flex-col xs:flex-row items-center xs:justify-between          ">
175 |                   <span class="text-xs xs:text-sm text-gray-900">
176 |                     Showing 1 to 4 of 50 Entries
177 |                   </span>
178 |                   <div class="inline-flex mt-2 xs:mt-0">
179 |                     <button class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-l">
180 |                       Prev
181 |                     </button>
182 |                     <button class="text-sm bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded-r">
183 |                       Next
184 |                     </button>
185 |                   </div>
186 |                 </div>
187 |               </div>
188 |             </div>
189 |           </div>
190 |         </div>
191 |       </body>
192 |     </div>
193 |   );
194 | }
195 | 
196 | export default Notification;
197 | 


--------------------------------------------------------------------------------
/src/components/AllPlayers.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { toast, Toaster } from "react-hot-toast";
  3 | import { Link } from "react-router-dom";
  4 | import Instance from "../config/Instance";
  5 | 
  6 | function AllPlayers() {
  7 |   const [search, setSearch] = useState("");
  8 |   const searchData = (player) => {
  9 |     return search === ""
 10 |       ? player
 11 |       : player.userId.fullname.toLowerCase().includes(search) ||
 12 |           player.position.toLowerCase().includes(search);
 13 |   };
 14 | 
 15 |   const [player, setPlayer] = useState([]);
 16 |   useEffect(() => {
 17 |     Instance.get("/admin/allplayer").then((response) => {
 18 |       setPlayer(response.data.player);
 19 |     });
 20 |   }, []);
 21 | 
 22 |   const Connect = (id) => {
 23 |     const scoutId = localStorage.getItem("scoutId");
 24 |     Instance
 25 |       .post(`scout/connectPlayer?scoutId=${scoutId}&userId=${id}`
 26 |       )
 27 |       .then((response) => {
 28 |         toast.success(response.data.msg);
 29 |       })
 30 |       .catch((error) => {
 31 |         if (error.response) {
 32 |           toast.error(error.response.data.error);
 33 |         } else {
 34 |           toast.error(error.message);
 35 |         }
 36 |       });
 37 |   };
 38 |   return (
 39 |     <div>
 40 |       <div className="flex justify-center">
 41 |         <form className="w-full max-w-md ">
 42 |           <div className="flex items-center border-b-2 border-teal-500 py-2">
 43 |             <input
 44 |               className="appearance-none bg-transparent border-none w-full text-black mr-3 py-1 px-2 leading-tight focus:outline-none"
 45 |               onChange={(e) => {
 46 |                 let searchValue = e.target.value.toLocaleLowerCase();
 47 |                 setSearch(searchValue);
 48 |               }}
 49 |               type="text"
 50 |               placeholder="Search..."
 51 |               aria-label="Search"
 52 |             />
 53 |             <button
 54 |               className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
 55 |               type="button"
 56 |             >
 57 |               Search
 58 |             </button>
 59 |           </div>
 60 |         </form>
 61 |       </div>
 62 |       {/* //newnew */}
 63 |       <div className="relative  mt-4 w-5/6 flex flex-col min-w-0 mb-6 break-words bg-orange-300/60 rounded-2xl bg-clip-border m-auto p-auto border-0 shadow-2xl">
 64 |         <div className="flex overflow-x-scroll pb-10 hide-scroll-bar mt-4">
 65 |           <div className="flex flex-nowrap md:ml-20 ml-10 hide-scroll-bar">
 66 | 
 67 |             {player.filter(searchData).map((player) => (
 68 |               <div class="max-w-md w-72 bg-gray-100 shadow-xl transform transition hover:scale-95 duration-300 ease-in-out rounded-xl p-6 mr-5">
 69 |                 <div class="flex flex-col ">
 70 |                   <div class="">
 71 |                     <div class="relative h-62 w-full mb-3">
 72 |                       <img
 73 |                         src={player.profileUrl}
 74 |                         alt="Just a flower"
 75 |                         class=" w-96   object-  rounded-2xl"
 76 |                       />
 77 |                     </div>
 78 |                     <div class="flex-auto justify-evenly">
 79 |                       <div class="flex flex-wrap ">
 80 |                         <div class="w-full flex-none text-sm flex items-center text-gray-600">
 81 |                           <h1 class="text-gray-800 whitespace-nowrap  font-semibold">
 82 |                             {player.userId.fullname}
 83 |                           </h1>
 84 |                         </div>
 85 |                         <div class="flex items-center w-full justify-between min-w-0 ">
 86 |                           <h1 class="mb-4 text-base font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-xl">
 87 |                             <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">
 88 |                               {player.position}
 89 |                             </span>{" "}
 90 |                           </h1>
 91 |                           <h1 class="mb-4 text-base font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-xl">
 92 |                             <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600/30 from-sky-400">
 93 |                               {player.age}
 94 |                             </span>{" "}
 95 |                           </h1>
 96 |                         </div>
 97 |                       </div>
 98 |                       <div class="text-xl text-black font-bold mt-1"></div>
 99 |                       <div class="flex space-x-2 text-sm font-medium justify-start mt-3">
100 |                         <Link to={"/singlePage"} state={player?.userId._id}>
101 |                           <button class="transition ease-in duration-300 inline-flex items-center text-sm font-medium mb-2 md:mb-0 bg-gradient-to-r from-slate-900 to-slate-700 px-5 py-2 hover:shadow-lg tracking-wider text-white rounded-lg hover:bg-gray-900 ">
102 |                             <span>View More</span>
103 |                           </button>
104 |                         </Link>
105 |                       </div>
106 |                     </div>
107 |                   </div>
108 |                 </div>
109 |               </div>
110 |             ))}
111 |           </div>
112 |            </div>
113 |         </div>
114 | 
115 | 
116 |        
117 | 
118 |       <div className="relative  mt-4 w-5/6 flex flex-col min-w-0 mb-6 break-words bg-orange-300/60 rounded-2xl bg-clip-border m-auto p-auto border-0 shadow-2xl">
119 |         <h1>heder</h1>
120 |         <div className="flex overflow-x-scroll pb-10 hide-scroll-bar mt-4">
121 |           <div className="flex flex-nowrap md:ml-20 ml-10 hide-scroll-bar">
122 |             <div class="max-w-md w-72 bg-gray-100 shadow-xl transform transition hover:scale-95 duration-300 ease-in-out rounded-xl p-6 mr-5">
123 |               <div class="flex flex-col ">
124 |                 <div class="">
125 |                   <div class="relative h-62 w-full mb-3">
126 |                     <img
127 |                       src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
128 |                       alt="Just a flower"
129 |                       class=" w-96   object-  rounded-2xl"
130 |                     />
131 |                   </div>
132 |                   <div class="flex-auto justify-evenly">
133 |                     <div class="flex flex-wrap ">
134 |                       <div class="w-full flex-none text-sm flex items-center text-gray-600">
135 |                         <h1 class="text-gray-800 whitespace-nowrap mr-3 font-semibold">
136 |                           4.60
137 |                         </h1>
138 |                       </div>
139 |                       <div class="flex items-center w-full justify-between min-w-0 ">
140 |                         <h1 class="text-lg mr-auto cursor-pointer text-black hover:text-gray-700 font-semibold truncate mb-1">
141 |                           Lorem ipsum is placeholder text commonly used in the
142 |                           graphick
143 |                         </h1>
144 |                       </div>
145 |                     </div>
146 |                     <div class="text-xl text-black font-bold mt-1"></div>
147 |                     <div class="flex space-x-2 text-sm font-medium justify-start mt-3">
148 |                       <button class="transition ease-in duration-300 inline-flex items-center text-sm font-medium mb-2 md:mb-0 bg-gradient-to-r from-slate-900 to-slate-700 px-5 py-2 hover:shadow-lg tracking-wider text-white rounded-lg hover:bg-gray-900 ">
149 |                         <span>View</span>
150 |                       </button>
151 |                     </div>
152 |                   </div>
153 |                 </div>
154 |               </div>
155 |             </div>
156 |           </div>
157 |         </div>
158 |       </div>
159 |       
160 |       <div className="relative  mt-4 w-5/6 flex flex-col min-w-0 mb-6 break-words bg-orange-300/60 rounded-2xl bg-clip-border m-auto p-auto border-0 shadow-2xl">
161 |         <h1>heder</h1>
162 |         <div className="flex overflow-x-scroll pb-10 hide-scroll-bar mt-4">
163 |           <div className="flex flex-nowrap md:ml-20 ml-10 hide-scroll-bar">
164 |             <div class="max-w-md w-72 bg-gray-100 shadow-xl transform transition hover:scale-95 duration-300 ease-in-out rounded-xl p-6 mr-5">
165 |               <div class="flex flex-col ">
166 |                 <div class="">
167 |                   <div class="relative h-62 w-full mb-3">
168 |                     <img
169 |                       src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
170 |                       alt="Just a flower"
171 |                       class=" w-96   object-  rounded-2xl"
172 |                     />
173 |                   </div>
174 |                   <div class="flex-auto justify-evenly">
175 |                     <div class="flex flex-wrap ">
176 |                       <div class="w-full flex-none text-sm flex items-center text-gray-600">
177 |                         <h1 class="text-gray-800 whitespace-nowrap mr-3 font-semibold">
178 |                           4.60
179 |                         </h1>
180 |                       </div>
181 |                       <div class="flex items-center w-full justify-between min-w-0 ">
182 |                         <h1 class="text-lg mr-auto cursor-pointer text-black hover:text-gray-700 font-semibold truncate mb-1">
183 |                           Lorem ipsum is placeholder text commonly used in the
184 |                           graphick
185 |                         </h1>
186 |                       </div>
187 |                     </div>
188 |                     <div class="text-xl text-black font-bold mt-1"></div>
189 |                     <div class="flex space-x-2 text-sm font-medium justify-start mt-3">
190 |                       <button class="transition ease-in duration-300 inline-flex items-center text-sm font-medium mb-2 md:mb-0 bg-gradient-to-r from-slate-900 to-slate-700 px-5 py-2 hover:shadow-lg tracking-wider text-white rounded-lg hover:bg-gray-900 ">
191 |                         <span>View</span>
192 |                       </button>
193 |                     </div>
194 |                   </div>
195 |                 </div>
196 |               </div>
197 |             </div>
198 |           </div>
199 |         </div>
200 |       </div>
201 | 
202 |     </div>
203 |   );
204 | }
205 | 
206 | export default AllPlayers;
207 | 


--------------------------------------------------------------------------------
/src/components/Search.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { toast, Toaster } from "react-hot-toast";
  3 | import { Link, useNavigate,  } from "react-router-dom";
  4 | import Instance from "../config/Instance";
  5 | import Navbar from "./layout/Navbar";
  6 | import ReactPaginate from "react-paginate";
  7 | import "../pagenation.css"
  8 | 
  9 | 
 10 | function Search() {
 11 |   const [search, setSearch] = useState("");
 12 |   const [connectedPlayers, setConnectedPlayers] = useState([]);
 13 |   const [player, setPlayer] = useState([]);
 14 |   const [tempPlayer, setTempPlayer] = useState([]);
 15 |   const [change, setChange] = useState(false);
 16 |   const scoutId = localStorage.getItem("scoutId");
 17 |   const token = localStorage.getItem("token");
 18 |   const navigate =useNavigate()
 19 | 
 20 |  //  Pagination......................
 21 |  const [currentPage, setCurrentPage] = useState(0);
 22 |  const [itemsPerPage, setItemsPerPage] = useState(8);
 23 |  const dataToRender = tempPlayer.slice(
 24 |    currentPage * itemsPerPage,
 25 |    (currentPage + 1) * itemsPerPage
 26 |  );
 27 | 
 28 |  const handlePageChange = ({ selected }) => {
 29 |   setCurrentPage(selected);
 30 | };
 31 | 
 32 | 
 33 |   const searchData = (player) => {
 34 |     return search === ""
 35 |       ? player
 36 |       : player.userId.fullname.toLowerCase().includes(search) ||
 37 |           player.position.toLowerCase().includes(search) ||
 38 |           player.age.toString().includes(search.toLowerCase());
 39 |   };
 40 | 
 41 |   
 42 |   const filterByPosition = (category) => {
 43 |     let filtered = player.filter((data) => data.position === category);
 44 |     setTempPlayer(filtered);
 45 |   };
 46 |   const filterByAge = (age) => {
 47 |     let filtered = player.filter((data) => data.age <= age);
 48 |     setTempPlayer(filtered);
 49 |   };
 50 |   const filterByAgeup = (age) => {
 51 |     let filtered = player.filter((data) => data.age > age);
 52 |     setTempPlayer(filtered);
 53 |   };
 54 |   const all = () => {
 55 |     setTempPlayer(player);
 56 |   };
 57 |   useEffect(() => {
 58 |     const token = localStorage.getItem("token");
 59 |     Instance.get("/admin/allplayer", {
 60 |       headers: { Authorization: `Bearer ${token}` },
 61 |     }).then((response) => {
 62 |       setPlayer(response.data.player);
 63 |       setTempPlayer(response.data.player);
 64 |       connected();
 65 |     });
 66 |   }, [change]);
 67 | 
 68 |   const connected = () => {
 69 |     Instance
 70 |       .get(
 71 |         `/admin/connectedPlayers`,{
 72 |           headers:{Authorization: `Bearer ${token}`}
 73 |         }
 74 |       )
 75 |       .then((response) => {
 76 |         console.log(response.data.connectPlayer);
 77 |         setConnectedPlayers(response.data.connectPlayer);
 78 |       });
 79 |   };
 80 | 
 81 |   const Connect = (id) => {
 82 |     change === true ? setChange(false) : setChange(true);
 83 |     Instance
 84 |       .post(
 85 |         `/scout/connectPlayer?userId=${id}`,{},{
 86 |           headers:{Authorization :  `Bearer ${token}`}
 87 |         })
 88 |       .then((response) => {
 89 |         toast.success(response.data.msg);
 90 |       })
 91 |       .catch((error) => {
 92 |         toast.error(error.response.data.error);
 93 |       });
 94 |   };
 95 | 
 96 |   return (
 97 |     <div>
 98 |       <Toaster position="top-center"></Toaster>
 99 |       <link
100 |         rel="stylesheet"
101 |         href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css"
102 |       />
103 | 
104 |       <div className="flex items-center justify-center min-h-screen bg-white ">
105 |         <div className="flex flex-col">
106 |           <div className="flex flex-col ">
107 |             <div className="container max-w-7xl px-4">
108 |               <div className="flex justify-center">
109 |                 <form className="w-full max-w-md ">
110 |                   <div className="flex items-center border-b-2 border-teal-500 py-2">
111 |                     <input
112 |                       className="appearance-none bg-transparent border-none w-full text-black mr-3 py-1 px-2 leading-tight focus:outline-none"
113 |                       onChange={(e) => {
114 |                         let searchValue = e.target.value.toLocaleLowerCase();
115 |                         setSearch(searchValue);
116 |                       }}
117 |                       type="text"
118 |                       placeholder="Search..."
119 |                       aria-label="Search"
120 |                     />
121 |                     <button
122 |                       className="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"
123 |                       type="button"
124 |                     >
125 |                       Search
126 |                     </button>
127 |                   </div>
128 |                 </form>
129 |               </div>
130 | 
131 |               <div className=" flex justify-center gap-3  ">
132 |                 <button
133 |                   onClick={() => all()}
134 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
135 |                 >
136 |                   All Players
137 |                 </button>
138 |                 <button
139 |                   onClick={() => filterByPosition("Winger")}
140 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
141 |                 >
142 |                   Winger
143 |                 </button>
144 |                 <button
145 |                   onClick={() => filterByPosition("Full-back")}
146 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
147 |                 >
148 |                   Fullback
149 |                 </button>
150 |                 <button
151 |                   onClick={() => filterByPosition("Forward")}
152 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
153 |                 >
154 |                   Foreword
155 |                 </button>
156 |                 <button
157 |                   onClick={() => filterByPosition("Central Midfielder")}
158 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
159 |                 >
160 |                   Midfielders
161 |                 </button>
162 |                 <button
163 |                   onClick={() => filterByAgeup(25)}
164 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
165 |                 >
166 |                   Age above-25
167 |                 </button>
168 |                 <button
169 |                   onClick={() => filterByAge(25)}
170 |                   className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
171 |                 >
172 |                   Age below-25
173 |                 </button>
174 |               </div>
175 | 
176 |               <div className="bg-white">
177 |                 <div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
178 |                   <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
179 |                     {dataToRender.filter(searchData).map((player) => (
180 |                       <div key={player?.id} className="group relative ">
181 |                         <Link to={"/singlePage"} state={player?.userId._id}>
182 |                           <div className="min-h-80 aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:aspect-none lg:h-80">
183 |                             <img
184 |                               src={player?.profileUrl}
185 |                               alt="add"
186 |                               className="h-full w-full object-cover object-center lg:h-full lg:w-full sm:h-full sm:w-full md:w-full md:h-full"
187 |                             />
188 |                           </div>
189 |                         </Link>
190 |                         <div class="flex items-center w-full justify-center min-w-0  mt-2">
191 |                           <h1 class=" text-base font-extrabold text-gray-900 dark:text-white md:text-xl lg:text-xl sm:text-base">
192 |                             <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">
193 |                               {player.position}
194 |                             </span>{" "}
195 |                           </h1>
196 |                         </div>
197 | 
198 |                         <div className="mt-4 flex justify-between">
199 |                           <div>
200 |                             <h3 className="text-lg text-bold text-">
201 |                               {player?.userId.fullname}
202 |                             </h3>
203 |                             <h4 className="text-base text-neutral-900">
204 |                               Age:
205 |                               {player?.age}
206 |                             </h4>
207 |                           </div>
208 |                           <p className="text-sm font-medium text-gray-900">
209 |                             {player?.nationality}
210 |                           </p>
211 |                         </div>
212 | 
213 |                         <div className="flex justify-center">
214 |                           {connectedPlayers.includes(player.userId._id) ? (
215 |                             <button onClick={()=>navigate('/chat')}  className="mx-auto lg:mx-0 hover:none bg-emerald-200 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
216 |                               Message
217 |                             </button>
218 |                           ) : (
219 |                             <button
220 |                               onClick={() => Connect(player.userId._id)}
221 |                               className="mx-auto lg:mx-0 hover:none bg-emerald-200 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
222 |                             >
223 |                               Connect!
224 |                             </button>
225 |                           )}
226 |                         </div>
227 |                       </div>
228 |                     ))}
229 |                   </div>
230 |                 </div>
231 |               </div>
232 |             </div>
233 |           </div>
234 |         </div>
235 |       </div>
236 |       <ReactPaginate
237 |         pageCount={Math.ceil(tempPlayer.length / itemsPerPage)}
238 |         marginPagesDisplayed={2}
239 |         pageRangeDisplayed={5}
240 |         onPageChange={handlePageChange}
241 |         containerClassName="pagination"
242 |         activeClassName="active"
243 |         previousLabel="Previous"
244 |         nextLabel="Next"
245 |         pageLinkClassName="page-link"
246 |         previousLinkClassName="page-link"
247 |         nextLinkClassName="page-link"
248 |         disabledClassName="disabled"
249 |       />
250 |     </div>
251 |   );
252 | }
253 | 
254 | export default Search;
255 | 


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { toast, Toaster } from "react-hot-toast";
  3 | import { useNavigate } from "react-router-dom";
  4 | 
  5 | function Home() {
  6 |   const navigate = useNavigate();
  7 |   // toast.success('WelCome',{duration: 6000})
  8 | 
  9 |   return (
 10 |     <div>
 11 |       <Toaster position="top-center"></Toaster>
 12 |       {/* <!-- component --> */}
 13 |       <div
 14 |         id="services"
 15 |         class="section relative pt-20 pb-8 md:pt-16 md:pb-0 bg-white"
 16 |       >
 17 |         <div class="container xl:max-w-6xl mx-auto px-4">
 18 |           {/* <!-- Heading start --> */}
 19 |           <header class="text-center mx-auto mb-12 lg:px-20">
 20 |             <h2 class="text-2xl leading-normal mb-2 font-bold text-black">
 21 |               What We Do
 22 |             </h2>
 23 | 
 24 |             <p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">
 25 |               Designed to make scouting easier{" "}
 26 |             </p>
 27 |           </header>
 28 |           {/* <!-- End heading --> */}
 29 |           {/* <!-- row --> */}
 30 |           <div class="flex flex-wrap  flex-row -mx-4 text-center">
 31 |             <div
 32 |               class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp"
 33 |               data-wow-duration="1s"
 34 |               style={{
 35 |                 visibility:
 36 |                   "visible; animation-duration: 1s; animation-name: fadeInUp;",
 37 |               }}
 38 |               onClick={() => {
 39 |                 navigate("/search");
 40 |               }}
 41 |             >
 42 |               {/* <!-- service block --> */}
 43 |               <div class="py-8 px-12 mb-12 bg-gray-50 border-b  hover:bg-cyan-300  border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-4">
 44 |                 <div class="inline-block text-gray-900 mb-4">
 45 |                   {/* <!-- icon --> */}
 46 |                   <svg
 47 |                     xmlns="http://www.w3.org/2000/svg"
 48 |                     width="2rem"
 49 |                     height="2rem"
 50 |                     fill="currentColor"
 51 |                     class="bi bi-search"
 52 |                     viewBox="0 0 16 16"
 53 |                   >
 54 |                     <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
 55 |                   </svg>
 56 |                 </div>
 57 |                 <h3 class="text-lg leading-normal mb-2 font-semibold text-black">
 58 |                   Search Player
 59 |                 </h3>
 60 |                 <p class="text-gray-500">
 61 |                   This is a wider card with supporting text below as a natural
 62 |                   content.
 63 |                 </p>
 64 |               </div>
 65 |               {/* <!-- end service block --> */}
 66 |             </div>
 67 |             <div
 68 |               class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp"
 69 |               data-wow-duration="1s"
 70 |               data-wow-delay=".1s"
 71 |               style={{
 72 |                 visibility:
 73 |                   "visible; animation-duration: 1s; animation-delay: 0.1s; animation-name: fadeInUp;",
 74 |               }}
 75 |               onClick={() => {
 76 |                 navigate("/chat");
 77 |               }}
 78 |             >
 79 |               {/* <!-- service block --> */}
 80 |               <div class="py-8 px-12 mb-12 bg-gray-50 border-b  hover:bg-cyan-300  border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
 81 |                 <div class="inline-block text-gray-900 mb-4">
 82 |                   {/* <!-- icon --> */}
 83 |                   <svg
 84 |                     xmlns="http://www.w3.org/2000/svg"
 85 |                     width="2rem"
 86 |                     height="2rem"
 87 |                     fill="currentColor"
 88 |                     class="bi bi-chat-square-dots"
 89 |                     viewBox="0 0 16 16"
 90 |                   >
 91 |                     <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
 92 |                     <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
 93 |                   </svg>
 94 |                 </div>
 95 |                 <h3 class="text-lg leading-normal mb-2 font-semibold text-black">
 96 |                   Player Chat
 97 |                 </h3>
 98 |                 <p class="text-gray-500">
 99 |                   This is a wider card with supporting text below as a natural
100 |                   content.
101 |                 </p>
102 |               </div>
103 |               {/* <!-- end service block --> */}
104 |             </div>
105 |             <div
106 |               class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp"
107 |               data-wow-duration="1s"
108 |               data-wow-delay=".3s"
109 |               style={{
110 |                 visibility:
111 |                   " visible; animation-duration: 1s; animation-delay: 0.3s; animation-name: fadeInUp;",
112 |               }}
113 |               onClick={() => {
114 |                 navigate("/player");
115 |               }}
116 |             >
117 |               {/* <!-- service block --> */}
118 |               <div class="py-8 px-12 mb-12 bg-gray-50 border-b  hover:bg-cyan-300  border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
119 |                 <div class="inline-block text-gray-900 mb-4">
120 |                   {/* <!-- icon --> */}
121 |                   <svg
122 |                     xmlns="http://www.w3.org/2000/svg"
123 |                     width="2rem"
124 |                     height="2rem"
125 |                     fill="currentColor"
126 |                     class="bi bi-badge-ad"
127 |                     viewBox="0 0 16 16"
128 |                   >
129 |                     <path d="M3.7 11l.47-1.542h2.004L6.644 11h1.261L5.901 5.001H4.513L2.5 11h1.2zm1.503-4.852l.734 2.426H4.416l.734-2.426h.053zm4.759.128c-1.059 0-1.753.765-1.753 2.043v.695c0 1.279.685 2.043 1.74 2.043.677 0 1.222-.33 1.367-.804h.057V11h1.138V4.685h-1.16v2.36h-.053c-.18-.475-.68-.77-1.336-.77zm.387.923c.58 0 1.002.44 1.002 1.138v.602c0 .76-.396 1.2-.984 1.2-.598 0-.972-.449-.972-1.248v-.453c0-.795.37-1.24.954-1.24z"></path>
130 |                     <path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"></path>
131 |                   </svg>
132 |                 </div>
133 |                 <h3 class="text-lg leading-normal mb-2 font-semibold text-black">
134 |                   Player Profiles
135 |                 </h3>
136 |                 <p class="text-gray-500">
137 |                   This is a wider card with supporting text below as a natural
138 |                   content.
139 |                 </p>
140 |               </div>
141 |               {/* <!-- end service block --> */}
142 |             </div>
143 |             <div
144 |               class="flex-shrink px-4 max-w-full w-full  sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp"
145 |               data-wow-duration="1s"
146 |               style={{
147 |                 visibility:
148 |                   " visible; animation-duration: 1s; animation-name: fadeInUp;",
149 |               }}
150 |               onClick={() => {
151 |                 navigate("/profile");
152 |               }}
153 |             >
154 |               {/* <!-- service block --> */}
155 |               <div class="py-8 px-12 mb-12 bg-gray-50 border-b  hover:bg-cyan-300  border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
156 |                 <div class="inline-block text-gray-900 mb-4">
157 |                   {/* <!-- icon --> */}
158 |                   <svg
159 |                     xmlns="http://www.w3.org/2000/svg"
160 |                     width="2rem"
161 |                     height="2rem"
162 |                     fill="currentColor"
163 |                     class="bi bi-card-checklist"
164 |                     viewBox="0 0 16 16"
165 |                   >
166 |                     <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path>
167 |                     <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"></path>
168 |                   </svg>
169 |                 </div>
170 |                 <h3 class="text-lg leading-normal mb-2 font-semibold text-black">
171 |                   My Profile
172 |                 </h3>
173 |                 <p class="text-gray-500">
174 |                   This is a wider card with supporting text below as a natural
175 |                   content.
176 |                 </p>
177 |               </div>
178 |               {/* <!-- end service block --> */}
179 |             </div>
180 | 
181 |             <div
182 |               class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp"
183 |               data-wow-duration="1s"
184 |               data-wow-delay=".1s"
185 |               style={{
186 |                 visibility:
187 |                   " visible; animation-duration: 1s; animation-delay: 0.1s; animation-name: fadeInUp;",
188 |               }}
189 |               onClick={() => {
190 |                 navigate("/selectedplayer");
191 |               }}
192 |              >
193 |               {/* <!-- service block --> */}
194 |               <div class="py-8 px-12 mb-12 bg-gray-50 border-b  hover:bg-cyan-300  border-gray-100 transform transition duration-300 ease-in-out hover:-translate-y-2">
195 |                 <div class="inline-block text-gray-900 mb-4">
196 |                   {/* <!-- icon --> */}
197 |                   <svg
198 |                     xmlns="http://www.w3.org/2000/svg"
199 |                     width="2rem"
200 |                     height="2rem"
201 |                     fill="currentColor"
202 |                     class="bi bi-wallet2"
203 |                     viewBox="0 0 16 16"
204 |                   >
205 |                     <path d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"></path>
206 |                   </svg>
207 |                 </div>
208 |                 <h3 class="text-lg leading-normal mb-2 font-semibold text-black">
209 |                   Selected Players
210 |                 </h3>
211 |                 <p class="text-gray-500">
212 |                   This is a wider card with supporting text below as a natural
213 |                   content.
214 |                 </p>
215 |               </div>
216 |               {/* <!-- end service block --> */}
217 |             </div>
218 |             
219 |             
220 |             <div
221 |               class="flex-shrink px-4 max-w-full w-full sm:w-1/2 lg:w-1/3 lg:px-6 wow fadeInUp"
222 |               data-wow-duration="1s"
223 |               data-wow-delay=".3s"
224 |               style={{
225 |                 visibility:
226 |                   " visible; animation-duration: 1s; animation-delay: 0.3s; animation-name: fadeInUp;",
227 |               }}
228 |             >
229 |               {/* <!-- service block --> */}
230 |               {/*  */}
231 |               {/* <!-- end service block --> */}
232 |             </div>
233 |           </div>
234 |           {/* <!-- end row --> */}
235 |         </div>
236 |       </div>
237 |     </div>
238 |   );
239 | }
240 | 
241 | export default Home;
242 | 


--------------------------------------------------------------------------------
/src/components/Chat.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import { io } from "socket.io-client";
  3 | import InputEmoji from "react-input-emoji";
  4 | import Instance from "../config/Instance";
  5 | import dateFormat, { masks } from "dateformat";
  6 | 
  7 | function Chat() {
  8 | 
  9 |   const [connectedplayer, setConnectedplayer] = useState([]);
 10 |   const [count,setScoutCount]=useState("")
 11 |   const [message, setMessages] = useState([]);
 12 |   const [currentChat, setCurrentChat] = useState({});
 13 |   const [inputMessage, setInputMessage] = useState("");
 14 |   const [arrivalMessage, setArrivalMessage] = useState(null);
 15 |   const [read,setUnread]=useState('')
 16 |    
 17 |   const token = localStorage.getItem("token");
 18 |   const fullname = localStorage.getItem("fullname");
 19 |   const  scoutId  = localStorage.getItem("scoutId")
 20 |   const  userId = currentChat?._id
 21 |   const scrolRef = useRef();
 22 |   const socket = useRef();
 23 | 
 24 |   useEffect(() => {
 25 |     const token = localStorage.getItem("token");
 26 |     const connectedPlayer = async () => {
 27 |       const { data } = await Instance.post(
 28 |         "/admin/connectedUsers",
 29 |         {},
 30 |         {
 31 |           headers: { Authorization: `Bearer ${token}` },
 32 |         });
 33 |       setConnectedplayer(data.connectedPlayers)
 34 |       setScoutCount(data.connectedPlayers.length);
 35 |     };
 36 |     connectedPlayer();
 37 |   }, []);
 38 | 
 39 |   const handleSelect = (user) => {
 40 |     setCurrentChat(user);
 41 |   };
 42 | 
 43 |   useEffect(() => {
 44 |     const getMessages = async (userId) => {
 45 |       const  scoutId  = localStorage.getItem("scoutId")
 46 |       const token = localStorage.getItem("token");
 47 |       const { data } = await Instance.get(
 48 |         `/admin/getMessage/${scoutId}/${userId}`,{
 49 |           headers:{Authorization:`Bearer ${token}`}
 50 |         });
 51 |       setMessages(data);
 52 |     };
 53 |     getMessages(currentChat._id);
 54 |   }, [currentChat._id]);
 55 | 
 56 | 
 57 |   const UnreadMsg =async()=>{
 58 |     const { data } = await Instance.get(
 59 |       `/admin/scoutUnread`,{
 60 |         headers:{Authorization:`Bearer ${token}`}
 61 |       })
 62 |     setUnread(data.count)
 63 |   }
 64 | 
 65 | 
 66 |   useEffect(() => {
 67 |     scrolRef.current.scrollIntoView({ behavior: "smooth" });
 68 |   });
 69 | 
 70 |   useEffect(() => {
 71 |     if (currentChat !== "") {
 72 |       // socket.current = io("http://localhost:7007");
 73 |       socket.current = io("https://fotweb.evotym.site");
 74 |       socket.current.emit("addUser", scoutId);
 75 |       UnreadMsg();
 76 |     }
 77 |   }, [scoutId]);
 78 | 
 79 |   const sendmsg = async () => {
 80 |     const messages = {
 81 |       myself: true,
 82 |       message: inputMessage,
 83 |     };
 84 | 
 85 |     socket.current.emit("send-msg", {
 86 |       to: currentChat._id,
 87 |       message: inputMessage,
 88 |       type: "text",
 89 |     });
 90 | 
 91 |     let data = {
 92 |       to: currentChat._id,
 93 |       from: scoutId,
 94 |       message: inputMessage,
 95 |       type: "text",
 96 |     };
 97 | 
 98 |     await Instance.post("/admin/sendMessage", data, {
 99 |       headers: { Authorization: `Bearer ${token}` },
100 |     });
101 |     setMessages(message.concat(messages));
102 |     setInputMessage("")
103 |   };
104 | 
105 |   useEffect(() => {
106 |     if (socket.current) {
107 |       socket.current.on("msg-receive", (data) => {
108 |         setArrivalMessage({ myself: false, message:  data.message, type:data.type});
109 |       });
110 |     }
111 |   }, [arrivalMessage]);
112 | 
113 |   useEffect(() => {
114 |     arrivalMessage && setMessages((pre) => [...pre, arrivalMessage]);
115 |   }, [arrivalMessage]);
116 | 
117 |   return (
118 |     <div>
119 |       <div className="flex h-screen antialiased text-gray-800">
120 |         <div className="flex flex-row h-full w-full overflow-x-scroll">
121 |           <div className="flex flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0">
122 |             <div className="flex flex-row items-center justify-center h-10 w-full">
123 |               <div className="flex items-center justify-center rounded-2xl text-indigo-700 bg-indigo-100 h-10 w-10">
124 |                 <svg
125 |                   className="w-6 h-6"
126 |                   fill="none"
127 |                   stroke="currentColor"
128 |                   viewBox="0 0 24 24"
129 |                   xmlns="http://www.w3.org/2000/svg"
130 |                 >
131 |                   <path
132 |                     stroke-linecap="round"
133 |                     stroke-linejoin="round"
134 |                     stroke-width="2"
135 |                     d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
136 |                   ></path>
137 |                 </svg>
138 |               </div>
139 |               <div className="ml-2 font-bold text-2xl">Chat</div>
140 |             </div>
141 |             <div className="flex flex-col items-center bg-indigo-100 border border-gray-200 mt-4 w-full py-6 px-4 rounded-lg">
142 |               <div className="h-20 w-20 rounded-full border overflow-hidden">
143 |                 <img
144 |                   src="https://avatars3.githubusercontent.com/u/2763884?s=128"
145 |                   alt="Avatar"
146 |                   className="h-full w-full"
147 |                 />
148 |               </div>
149 |               <div className="text-sm font-semibold mt-2 online-dot">{currentChat.fullname} </div>
150 |               <div className="flex flex-row items-center justify-between text-xs">
151 |                 <span className="font-bold">Notificaion</span>
152 |                 <span className="flex items-center justify-center ml-1 bg-emerald-500 h-4 w-4 rounded-full">
153 |                   {read}
154 |                 </span>
155 |               </div>
156 |               <div className="flex flex-row items-center mt-3">
157 |                 <div className="flex flex-col justify-center h-4 w-8 bg-indigo-500 rounded-full">
158 |                   <div className="h-3 w-3 bg-white rounded-full self-end mr-1"></div>
159 |                 </div>
160 |                 <div className="leading-none ml-1 text-xs">Active</div>
161 |               </div>
162 |             </div>
163 |             <div className="flex flex-col mt-8">
164 |               <div className="flex flex-row items-center justify-between text-xs">
165 |                 <span className="font-bold">Active Conversations</span>
166 |                 <span className="flex items-center justify-center bg-gray-300 h-4 w-4 rounded-full">
167 |                   {count}
168 |                 </span>
169 |               </div>
170 | 
171 |               <div className="flex flex-col space-y-1 mt-4 -mx-2 h-48 overflow-y-auto">
172 |                 {connectedplayer.map((player) => (
173 |                   <button onClick={()=>handleSelect(player)} className="flex flex-row items-center hover:bg-gray-100 rounded-xl p-2">
174 |                     <div className="flex items-center justify-center h-8 w-8 bg-indigo-200 rounded-full">
175 |                       {player.fullname[0]}
176 |                     </div>
177 |                     <div className="ml-2 text-sm font-semibold">
178 |                       {player.fullname}
179 |                     </div>
180 |                   </button>
181 |                 ))}
182 |               </div>
183 |             </div>
184 |           </div>
185 |           <div className="flex flex-col flex-auto h-full p-6  min-w-[380px]">
186 |             <div className="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-gray-100 h-full p-4">
187 |               <div className="flex flex-col h-full overflow-x-auto mb-4">
188 |                 <div className="flex flex-col h-full">
189 |                   <div className="grid grid-cols-12 gap-y-2">
190 |                     {message.map((msg) =>
191 |                       msg.myself ? (
192 |                         <div
193 |                           key={msg._id}
194 |                           className="col-start-6 col-end-13 p-3 rounded-lg"
195 |                         >
196 |                           <div className="flex items-center justify-start flex-row-reverse">
197 |                           <div className="relative mr-3 text-sm bg-indigo-100 py-2 px-4 shadow rounded-xl">
198 |                               {msg?.type === "video" ? (
199 |                                 <video src={msg.message} controls></video>
200 |                               ) : msg.type === "image" ? (
201 |                                 <img  src={msg.message}></img>
202 |                               ) : (
203 |                                 <div className="text-base font-semibold">
204 |                                 {msg.message ? msg.message : ""}
205 |                               </div>
206 |                               )}
207 |                                 <div className=" flex justify-end">
208 |                                 <p className="text-xs text-slate-500">
209 |                                   {dateFormat(msg.createdAt, "shortTime")}
210 |                                 </p>
211 |                               </div>
212 |                             </div>
213 |                           </div>
214 |                         </div>
215 |                       ) : (
216 |                         <div
217 |                           key={msg._id}
218 |                           className="col-start-1 col-end-8 p-3 rounded-lg"
219 |                         >
220 |                           <div className="flex flex-row items-center">
221 |                           <div className="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl">
222 |                               {msg?.type === "video" ? (
223 |                                 <video src={msg.message} controls></video>
224 |                               ) : msg.type === "image" ? (
225 |                                 <img className="h-96" src={msg.message}></img>
226 |                               ) : (
227 |                                 <div className="text-base font-semibold">
228 |                                   {msg.message ? msg.message : ""}
229 |                                 </div>
230 |                               )}
231 |                               <div className=" flex justify-start">
232 |                                 <p className="text-xs text-slate-400">
233 |                                   {dateFormat(msg.createdAt, "shortTime")}
234 |                                 </p>
235 |                               </div>
236 |                             </div>
237 |                           </div>
238 |                         </div>
239 |                       )
240 |                     )}
241 |                     <div ref={scrolRef} />
242 |                   </div>
243 |                 </div>
244 |               </div>
245 |               <div className="flex flex-row items-center h-16 rounded-xl bg-white w-full px-4">
246 |                 <div className="flex-grow ml-4">
247 |                   <div className="relative w-full">
248 |                     <input
249 |                       onChange={(e) => setInputMessage(e.target.value)}
250 |                       type="text"
251 |                       value={inputMessage}
252 |                       className="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10"
253 |                     />
254 |                     <button className="absolute flex items-center justify-center h-full w-12 right-0 top-0 text-gray-400 hover:text-gray-600">
255 |                     <InputEmoji value={inputMessage} onChange={setInputMessage} />
256 |                     </button>
257 |                   </div>
258 |                 </div>
259 |                 <div className="ml-4">
260 |                   <button
261 |                     onClick={sendmsg}
262 |                     className="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
263 |                   >
264 |                     <span className="ml-2">
265 |                       <svg
266 |                         className="w-4 h-4 transform = rotate-45 -mt-px"
267 |                         fill="none"
268 |                         stroke="currentColor"
269 |                         viewBox="0 0 24 24"
270 |                         xmlns="http://www.w3.org/2000/svg"
271 |                       >
272 |                         <path
273 |                           stroke-linecap="round"
274 |                           stroke-linejoin="round"
275 |                           stroke-width="2"
276 |                           d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
277 |                         ></path>
278 |                       </svg>
279 |                     </span>
280 |                   </button>
281 |                 </div>
282 |               </div>
283 |             </div>
284 |           </div>
285 |         </div>
286 |       </div>
287 |     </div>
288 |   );
289 | }
290 | 
291 | export default Chat;
292 | 


--------------------------------------------------------------------------------
/src/components/Profile.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { toast, Toaster } from "react-hot-toast";
  3 | import moment from "moment";
  4 | import { useNavigate } from "react-router-dom";
  5 | import Instance from "../config/Instance";
  6 | function Profile() {
  7 |    const navigate = useNavigate()
  8 |   const token = localStorage.getItem("token");
  9 |   const [scout, setscout] = useState("");
 10 |   const [scoutData, setScoutData] = useState("");
 11 |   useEffect(() => {
 12 |     showProfile();
 13 |   }, []);
 14 |   const showProfile = async () => {
 15 |     await Instance
 16 |       .get("/scout/showProfile", {
 17 |         headers: { Authorization: `Bearer ${token} ` },
 18 |       })
 19 |       .then((res) => {
 20 |         setscout(res.data.scout);
 21 |         setScoutData(res.data.scoutData);
 22 |       })
 23 |       .catch((error) => {
 24 |         toast.error(error.response.data.error);
 25 |       });
 26 |   };
 27 |   return (
 28 |     <div class="h-full bg-gray-200 p-8">
 29 |       <Toaster position="top-center"></Toaster>
 30 |       <div class="bg-white rounded-lg shadow-xl pb-8">
 31 |         <div class="w-full h-[250px]">
 32 |           <img
 33 |             src="https://vojislavd.com/ta-template-demo/assets/img/profile-background.jpg"
 34 |             class="w-full h-full rounded-tl-lg rounded-tr-lg"
 35 |           />
 36 |         </div>
 37 |         <div>
 38 |           <button
 39 |             onClick={() => {
 40 |               navigate("/register");
 41 |             }}
 42 |             className="mx-auto lg:mx-0 bg-blue-500/40 text-gray-800 font-bold box-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline  transition hover:scale-105 duration-300 ease-in-out"
 43 |           >
 44 |             EDIT profile
 45 |           </button>
 46 |         </div>
 47 |         <div class="flex flex-col items-center -mt-32">
 48 |           <img
 49 |             src={scoutData?.profileUrl}
 50 |             alt="notget"
 51 |             class="w-40 border-4 border-white rounded-full"
 52 |           />
 53 |           <div class="flex items-center space-x-2 mt-2">
 54 |             <p class="text-2xl">{scout?.fullname}</p>
 55 |             {/* <span class="bg-blue-500 rounded-full p-1" title="Verified">
 56 |               <svg
 57 |                 xmlns="http://www.w3.org/2000/svg"
 58 |                 class="text-gray-100 h-2.5 w-2.5"
 59 |                 fill="none"
 60 |                 viewBox="0 0 24 24"
 61 |                 stroke="currentColor"
 62 |               >
 63 |                 <path
 64 |                   stroke-linecap="round"
 65 |                   stroke-linejoin="round"
 66 |                   stroke-width="4"
 67 |                   d="M5 13l4 4L19 7"
 68 |                 ></path>
 69 |               </svg>
 70 |             </span> */}
 71 |           </div>
 72 | 
 73 |           <p class="text-gray-700">Scout</p>
 74 |           <p class="text-sm text-gray-500">{scoutData?.nationality}</p>
 75 |         </div>
 76 | 
 77 |         <div class="my-4 flex flex-col 2xl:flex-row space-y-4 2xl:space-y-0 2xl:space-x-4">
 78 |           <div class="w-full 2xl:w-2/3">
 79 |             <h4 class="text-xl pl-6 text-gray-900 font-bold">
 80 |               Scout Personal Info
 81 |             </h4>
 82 |             <div class=" bg-white rounded-lg shadow-xl p-8">
 83 |               <ul class="mt-2 text-gray-700">
 84 |                 <li class="flex justify-between border-y py-2">
 85 |                   <span class="font-bold w-24">Full name:</span>
 86 |                   <span class="text-gray-700 pl-1">{scout?.fullname}</span>
 87 |                 </li>
 88 |                 <li class="flex justify-between border-b py-2">
 89 |                   <span class="font-bold w-24">Birthday:</span>
 90 |                   <span class="text-gray-700">
 91 |                     {moment(scoutData?.dateOfBirth).format("YYYY/DD/MM")}
 92 |                   </span>
 93 |                 </li>
 94 |                 <li class="flex justify-between border-b py-2">
 95 |                   <span class="font-bold w-24">Mobile:</span>
 96 |                   <span class="text-gray-700">{scout?.phone}</span>
 97 |                 </li>
 98 |                 <li class="flex justify-between border-b py-2">
 99 |                   <span class="font-bold w-24">Email:</span>
100 |                   <span class="text-gray-700">{scout?.email}</span>
101 |                 </li>
102 |                 <li class="flex justify-between border-b py-2">
103 |                   <span class="font-bold w-24">Location:</span>
104 |                   <span class="text-gray-700">{scoutData?.nationality}</span>
105 |                 </li>
106 |                 <li class="flex justify-between border-b py-2">
107 |                   <span class="font-bold w-24">Languages:</span>
108 |                   <span class="text-gray-700">{scoutData?.language}</span>
109 |                 </li>
110 |                 <li class="flex justify-between border-b py-2">
111 |                   <span class="font-bold w-24">Age:</span>
112 |                   <span class="text-gray-700">{scoutData?.age}</span>
113 |                 </li>
114 |                 <li class="flex justify-between border-b py-2">
115 |                   <span class="font-bold w-24">Experience:</span>
116 |                   <span class="text-gray-700 font-bold">
117 |                     {scoutData?.experience} years
118 |                   </span>
119 |                 </li>
120 |                 <li class="flex justify-between border-b py-2">
121 |                   <span class="font-bold w-24">CurrentClub: </span>
122 |                   <span class="text-gray-700">{scoutData?.currentClub}</span>
123 |                 </li>
124 |                 <li class="flex justify-between border-b py-2">
125 |                   <span class="font-bold w-24">PreviousClub:</span>
126 |                   <span class="text-gray-700">{scoutData?.pastClub}</span>
127 |                 </li>
128 |                 <li class="flex justify-between border-b py-2">
129 |                   <span class="font-bold w-24">Awards:</span>
130 |                   <span class="text-gray-700">{scoutData?.awards}</span>
131 |                 </li>
132 |                 <li class="flex justify-between border-b py-2">
133 |                   <span class="font-bold w-24">Joined:</span>
134 |                   <span class="text-gray-700">
135 |                     {moment(scoutData?.joinedAt).format("YYYY/MM/DD")}
136 |                   </span>
137 |                 </li>
138 |                 <li class="flex justify-between items-center border-b py-2 space-x-2">
139 |                   <span class="font-bold w-24">Elsewhere:</span>
140 |                   <a href="#" title="Facebook">
141 |                     <svg 
142 |                       class="w-5 h-5"
143 |                       id="Layer_1"
144 |                       data-name="Layer 1"
145 |                       xmlns="http://www.w3.org/2000/svg"
146 |                       viewBox="0 0 506.86 506.86"
147 |                     >
148 |                       <defs></defs>
149 |                       <path
150 |                         class="cls-1"
151 |                         d="M506.86,253.43C506.86,113.46,393.39,0,253.43,0S0,113.46,0,253.43C0,379.92,92.68,484.77,213.83,503.78V326.69H149.48V253.43h64.35V197.6c0-63.52,37.84-98.6,95.72-98.6,27.73,0,56.73,5,56.73,5v62.36H334.33c-31.49,0-41.3,19.54-41.3,39.58v47.54h70.28l-11.23,73.26H293V503.78C414.18,484.77,506.86,379.92,506.86,253.43Z"
152 |                       ></path>
153 |                       <path
154 |                         class="cls-2"
155 |                         d="M352.08,326.69l11.23-73.26H293V205.89c0-20,9.81-39.58,41.3-39.58h31.95V104s-29-5-56.73-5c-57.88,0-95.72,35.08-95.72,98.6v55.83H149.48v73.26h64.35V503.78a256.11,256.11,0,0,0,79.2,0V326.69Z"
156 |                       ></path>
157 |                     </svg>
158 |                   </a>
159 |                   <a href="#" title="Twitter">
160 |                     <svg
161 |                       class="w-5 h-5"
162 |                       xmlns="http://www.w3.org/2000/svg"
163 |                       viewBox="0 0 333333 333333"
164 |                       shape-rendering="geometricPrecision"
165 |                       text-rendering="geometricPrecision"
166 |                       image-rendering="optimizeQuality"
167 |                       fill-rule="evenodd"
168 |                       clip-rule="evenodd"
169 |                     >
170 |                       <path
171 |                         d="M166667 0c92048 0 166667 74619 166667 166667s-74619 166667-166667 166667S0 258715 0 166667 74619 0 166667 0zm90493 110539c-6654 2976-13822 4953-21307 5835 7669-4593 13533-11870 16333-20535-7168 4239-15133 7348-23574 9011-6787-7211-16426-11694-27105-11694-20504 0-37104 16610-37104 37101 0 2893 320 5722 949 8450-30852-1564-58204-16333-76513-38806-3285 5666-5022 12109-5022 18661v4c0 12866 6532 24246 16500 30882-6083-180-11804-1876-16828-4626v464c0 17993 12789 33007 29783 36400-3113 845-6400 1313-9786 1313-2398 0-4709-247-7007-665 4746 14736 18448 25478 34673 25791-12722 9967-28700 15902-46120 15902-3006 0-5935-184-8860-534 16466 10565 35972 16684 56928 16684 68271 0 105636-56577 105636-105632 0-1630-36-3209-104-4806 7251-5187 13538-11733 18514-19185l17-17-3 2z"
172 |                         fill="#1da1f2"
173 |                       ></path>
174 |                     </svg>
175 |                   </a>
176 |                   <a href="#" title="LinkedIn">
177 |                     <svg
178 |                       class="w-5 h-5"
179 |                       xmlns="http://www.w3.org/2000/svg"
180 |                       viewBox="0 0 333333 333333"
181 |                       shape-rendering="geometricPrecision"
182 |                       text-rendering="geometricPrecision"
183 |                       image-rendering="optimizeQuality"
184 |                       fill-rule="evenodd"
185 |                       clip-rule="evenodd"
186 |                     >
187 |                       <path
188 |                         d="M166667 0c92048 0 166667 74619 166667 166667s-74619 166667-166667 166667S0 258715 0 166667 74619 0 166667 0zm-18220 138885h28897v14814l418 1c4024-7220 13865-14814 28538-14814 30514-1 36157 18989 36157 43691v50320l-30136 1v-44607c0-10634-221-24322-15670-24322-15691 0-18096 11575-18096 23548v45382h-30109v-94013zm-20892-26114c0 8650-7020 15670-15670 15670s-15672-7020-15672-15670 7022-15670 15672-15670 15670 7020 15670 15670zm-31342 26114h31342v94013H96213v-94013z"
189 |                         fill="#0077b5"
190 |                       ></path>
191 |                     </svg>
192 |                   </a>
193 |                   <a href="#" title="Github">
194 |                     <svg
195 |                       class="w-5 h-5"
196 |                       xmlns="http://www.w3.org/2000/svg"
197 |                       width="0"
198 |                       height="0"
199 |                       shape-rendering="geometricPrecision"
200 |                       text-rendering="geometricPrecision"
201 |                       image-rendering="optimizeQuality"
202 |                       fill-rule="evenodd"
203 |                       clip-rule="evenodd"
204 |                       viewBox="0 0 640 640"
205 |                     >
206 |                       <path d="M319.988 7.973C143.293 7.973 0 151.242 0 327.96c0 141.392 91.678 261.298 218.826 303.63 16.004 2.964 21.886-6.957 21.886-15.414 0-7.63-.319-32.835-.449-59.552-89.032 19.359-107.8-37.772-107.8-37.772-14.552-36.993-35.529-46.831-35.529-46.831-29.032-19.879 2.209-19.442 2.209-19.442 32.126 2.245 49.04 32.954 49.04 32.954 28.56 48.922 74.883 34.76 93.131 26.598 2.882-20.681 11.15-34.807 20.315-42.803-71.08-8.067-145.797-35.516-145.797-158.14 0-34.926 12.52-63.485 32.965-85.88-3.33-8.078-14.291-40.606 3.083-84.674 0 0 26.87-8.61 88.029 32.8 25.512-7.075 52.878-10.642 80.056-10.76 27.2.118 54.614 3.673 80.162 10.76 61.076-41.386 87.922-32.8 87.922-32.8 17.398 44.08 6.485 76.631 3.154 84.675 20.516 22.394 32.93 50.953 32.93 85.879 0 122.907-74.883 149.93-146.117 157.856 11.481 9.921 21.733 29.398 21.733 59.233 0 42.792-.366 77.28-.366 87.804 0 8.516 5.764 18.473 21.992 15.354 127.076-42.354 218.637-162.274 218.637-303.582 0-176.695-143.269-319.988-320-319.988l-.023.107z"></path>
207 |                     </svg>
208 |                   </a>
209 |                 </li>
210 |               </ul>
211 |             </div>
212 |             {/*  */}
213 |           </div>
214 |           <div class="flex flex-col w-full 2xl:w-1/3">
215 |             <div class="flex-1 bg-white rounded-lg shadow-xl p-8">
216 |               <h4 class="text-xl text-gray-900 font-bold">About</h4>
217 |               <p class="mt-2 text-gray-700">
218 |                 Player scouts or physical scouts evaluate the talent of
219 |                 footballers with a view to signing them on a professional
220 |                 contract for their employers. Some scouts focus on discovering
221 |                 promising young players and future stars, others are employed to
222 |                 run the rule on potential signings. Smaller clubs might only
223 |                 scout within their own country region, while larger and richer
224 |                 clubs can have extensive international scouting networks
225 |               </p>
226 |             </div>
227 | 
228 |             <div class="flex justify-center items-center">
229 |             </div>
230 |           </div>
231 |         </div>
232 |       </div>
233 |     </div>
234 |   );
235 | }
236 | 
237 | export default Profile;
238 | 


--------------------------------------------------------------------------------
/src/components/RegisterScout.jsx:
--------------------------------------------------------------------------------
  1 | import axios from "axios";
  2 | import React, { useEffect, useState } from "react";
  3 | import { toast, Toaster } from "react-hot-toast";
  4 | import { useNavigate } from "react-router-dom";
  5 | import moment from "moment";
  6 | import Instance from "../config/Instance";
  7 | const token = localStorage.getItem("token");
  8 | 
  9 | function RegisterScout() {
 10 |   const [profile, setProfile] = useState("");
 11 |   const [profileUrl, setProfileUrl] = useState("");
 12 |   const [dateOfBirth, setDataofbirth] = useState("");
 13 |   const [age, setAge] = useState("");
 14 |   const [nationality, setNationality] = useState("");
 15 |   const [experience, setExperience] = useState("");
 16 |   const [currentClub, setCurrentClub] = useState("");
 17 |   const [pastClub, setPastclub] = useState("");
 18 |   const [language, setLanguage] = useState("");
 19 |   const [awards, setAwards] = useState("");
 20 |   const [address, setAddress] = useState("");
 21 |   const [description, setDescription] = useState("");
 22 |   useEffect(() => {
 23 |     showProfile();
 24 |   }, []);
 25 | 
 26 |   const showProfile = async () => {
 27 |     await Instance
 28 |       .get("/scout/showProfile", {
 29 |         headers: { Authorization: `Bearer ${token} ` },
 30 |       })
 31 |       .then((res) => {
 32 |         res.data.updation && toast.success("updation successful");
 33 |         setDataofbirth(res.data.scoutData.dateOfBirth);
 34 |         setAge(res.data.scoutData.age);
 35 |         setProfileUrl(res.data.scoutData.profileUrl);
 36 |         setNationality(res.data.scoutData.nationality);
 37 |         setExperience(res.data.scoutData.experience);
 38 |         setCurrentClub(res.data.scoutData.currentClub);
 39 |         setPastclub(res.data.scoutData.pastClub);
 40 |         setLanguage(res.data.scoutData.language);
 41 |         setAwards(res.data.scoutData.awards);
 42 |         setAddress(res.data.scoutData.address);
 43 |         setDescription(res.data.scoutData.description);
 44 |       })
 45 |       .catch((error) => {
 46 |         console.log(error);
 47 |         toast.error(error.response.data.error);
 48 |       });
 49 |   };
 50 | 
 51 |   //creating area
 52 | 
 53 |   const cloudAPI = "dqrsgqgot";
 54 |   const navigate = useNavigate();
 55 | 
 56 |   const handleUpload = async (e) => {
 57 |     e.preventDefault();
 58 |     const formData = new FormData();
 59 |     formData.append("file", profile);
 60 |     formData.append("upload_preset", "fotwebcloud");
 61 |     await axios
 62 |       .post(
 63 |         `https://api.cloudinary.com/v1_1/${cloudAPI}/image/upload`,
 64 |         formData
 65 |       )
 66 |       .then(async (res) => {
 67 |         const profileUrl = res.data.secure_url;
 68 |         const token = localStorage.getItem("token");
 69 |         await Instance
 70 |           .post(
 71 |             `/scout/scoutRegister`,
 72 |             {
 73 |               profileUrl,
 74 |               dateOfBirth,
 75 |               age,
 76 |               nationality,
 77 |               experience,
 78 |               currentClub,
 79 |               pastClub,
 80 |               language,
 81 |               awards,
 82 |               address,
 83 |               description,
 84 |             },
 85 |             { headers: { Authorization: `Bearer ${token}` } }
 86 |           )
 87 |           .then((response) => {
 88 |             if (response.data.scout.status=="Pending") {
 89 |               navigate("/waiting",{replace:true});
 90 |             }else{
 91 |               toast.success("Profile Added Successfully");
 92 |               navigate("/home")
 93 |             }
 94 |           })
 95 |           .catch((error) => {
 96 |             if (error.response) {
 97 |               toast.error(error.response.data.error);
 98 |             } else {
 99 |               toast.error(error.message);
100 |             }
101 |           });
102 |       });
103 |   };
104 |   return (
105 |     <div className="max-w-2xl mx-auto bg-white mt-3 mb-3 p-10 outline-double">
106 |       <Toaster position="top-center"></Toaster>
107 |       <h1 className="text-4xl text-opacity-10 ">Pleace fill the form</h1>
108 |       <p className="text-sm mt-2">
109 |         A football scout attends football matches on the behalf of clubs to
110 |         collect intelligence
111 |       </p>
112 |       <form onSubmit={handleUpload}>
113 |         <div className="grid gap-6 mb-6 lg:grid-cols-2">
114 |           <div>
115 |             <label className="block text-sm font-medium text-black">
116 |               Profile
117 |             </label>
118 |             <div className="mt-1 flex justify-center px-3  pb-4 border-2 border-gray-300 border-dashed rounded-md">
119 |               <div className="space-y-1 text-center">
120 |                 <div className="flex justify-center">
121 |                   <img
122 |                     class="w-20 border-4 border-white rounded-full"
123 |                     src={profileUrl}
124 |                     alt="Add"
125 |                   />
126 |                 </div>{" "}
127 |                 <div className="flex text-sm text-gray-600">
128 |                   <label
129 |                     for="file-upload"
130 |                     className="relative cursor-pointer bg-blackrounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
131 |                   >
132 |                     <span className="text-justify ">Upload a your photo</span>
133 |                     <input
134 |                       onChange={(e) => {
135 |                         setProfile(e.target.files[0]);
136 |                       }}
137 |                       id="file-upload"
138 |                       name="file-upload"
139 |                       type="file"
140 |                       className="sr-only"
141 |                       accept="image/x-png,image/gif,image/jpeg"
142 |                     />
143 |                   </label>
144 |                 </div>
145 |               </div>
146 |             </div>
147 |           </div>
148 | 
149 |   
150 |           {dateOfBirth.length >1 ? (
151 |                 
152 |                 <div>
153 |                   <label
154 |                     className="text-white dark:text-gray-200"
155 |                     htmlFor="passwordConfirmation"
156 |                   >
157 |                     Date of birth
158 |                   </label>
159 |                   <input
160 |                     value={dateOfBirth}
161 |                     onChange={(e) => {
162 |                       setDataofbirth(e.target.value);
163 |                     }}
164 |                     id=""
165 |                     type="text"
166 |                     className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
167 |                   />
168 |                 </div>
169 |               ) : (
170 |                 <div>
171 |                   <label
172 |                     className="text-white dark:text-gray-200"
173 |                     htmlFor="passwordConfirmation"
174 |                   >
175 |                     Date of birth
176 |                   </label>
177 |                   <input
178 |                     value={dateOfBirth}
179 |                     onChange={(e) => {
180 |                       setDataofbirth(e.target.value);
181 |                     }}
182 |                     id=""
183 |                     type="date"
184 |                     className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
185 |                   />
186 |                 </div>
187 |               )}
188 |           
189 |    
190 | 
191 | 
192 |           <div>
193 |             <label
194 |               for="age"
195 |               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
196 |             >
197 |               Age
198 |             </label>
199 |             <input
200 |               value={age}
201 |               onChange={(e) => {
202 |                 setAge(e.target.value);
203 |               }}
204 |               type="number"
205 |               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
206 |               required
207 |             />
208 |           </div>
209 |           <div>
210 |             <label
211 |               for="nationality"
212 |               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
213 |             >
214 |               Nationality
215 |             </label>
216 |             <input
217 |               value={nationality}
218 |               onChange={(e) => {
219 |                 setNationality(e.target.value);
220 |               }}
221 |               type="text"
222 |               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
223 |               required
224 |             />
225 |           </div>
226 |           <div>
227 |             <label
228 |               for="experience"
229 |               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
230 |             >
231 |               Scouting Experience
232 |             </label>
233 |             <input
234 |               value={experience}
235 |               onChange={(e) => {
236 |                 setExperience(e.target.value);
237 |               }}
238 |               type="number"
239 |               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
240 |               placeholder="years"
241 |               required
242 |             />
243 |           </div>
244 |           <div>
245 |             <label
246 |               for="website"
247 |               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
248 |             >
249 |               Current club
250 |             </label>
251 |             <input
252 |               value={currentClub}
253 |               onChange={(e) => {
254 |                 setCurrentClub(e.target.value);
255 |               }}
256 |               type="text"
257 |               id="website"
258 |               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
259 |               required
260 |             />
261 |           </div>
262 |           <div>
263 |             <label
264 |               for="past club"
265 |               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
266 |             >
267 |               Past Club
268 |             </label>
269 |             <input
270 |               value={pastClub}
271 |               onChange={(e) => {
272 |                 setPastclub(e.target.value);
273 |               }}
274 |               type="text"
275 |               id="visitors"
276 |               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
277 |               placeholder=""
278 |               required
279 |             />
280 |           </div>
281 |           <div>
282 |             <label
283 |               for="past club"
284 |               className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
285 |             >
286 |               Languages
287 |             </label>
288 |             <input
289 |               value={language}
290 |               onChange={(e) => {
291 |                 setLanguage(e.target.value);
292 |               }}
293 |               type="text"
294 |               id="visitors"
295 |               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
296 |               placeholder=""
297 |               required
298 |             />
299 |           </div>
300 |         </div>
301 |         <div className="mb-6">
302 |           <label
303 |             for="Awards"
304 |             className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
305 |           >
306 |             Awards
307 |           </label>
308 |           <input
309 |             value={awards}
310 |             onChange={(e) => {
311 |               setAwards(e.target.value);
312 |             }}
313 |             type="text"
314 |             className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
315 |             required
316 |           />
317 |         </div>
318 |         <div>
319 |           <label
320 |             className="text-dark dark:text-gray-200"
321 |             for="passwordConfirmation"
322 |           >
323 |             ADDRESS
324 |           </label>
325 |           <textarea
326 |             value={address}
327 |             onChange={(e) => {
328 |               setAddress(e.target.value);
329 |             }}
330 |             id="textarea"
331 |             type="textarea"
332 |             className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
333 |           ></textarea>
334 |         </div>
335 |         <div>
336 |           <label
337 |             className="text-dark dark:text-gray-200"
338 |             for="passwordConfirmation"
339 |           >
340 |             About you
341 |           </label>
342 |           <textarea
343 |             value={description}
344 |             onChange={(e) => {
345 |               setDescription(e.target.value);
346 |             }}
347 |             id="textarea"
348 |             type="textarea"
349 |             className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
350 |           ></textarea>
351 |         </div>
352 |         <div className="flex items-start mb-6"></div>
353 |         <button
354 |           type="submit"
355 |           className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
356 |         >
357 |           Submit
358 |         </button>
359 |         <div className="flex items-end mb-6"></div>
360 |       </form>
361 |       {/* <button
362 |         onClick={() => {
363 |           navigate("/home");
364 |         }}
365 |         className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
366 |       >
367 |         Skip
368 |       </button> */}
369 |     </div>
370 |   );
371 | }
372 | 
373 | export default RegisterScout;
374 | 


--------------------------------------------------------------------------------
/src/error/errorPage.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | function ErrorPage() {
  4 |   return (
  5 |     <div>
  6 |       {/* <!-- component --> */}
  7 | <section>
  8 | 
  9 | 	<div class="bg-black text-white">
 10 | 		<div class="flex h-screen">
 11 | 			<div class="m-auto text-center">
 12 | 				<div>
 13 | 					<svg width="631" height="379" viewBox="0 0 631 379" fill="none" xmlns="http://www.w3.org/2000/svg">
 14 | 						<g clip-path="url(#clip0)">
 15 | 							<path
 16 | 								d="M317.524 379C488.625 379 627.33 368.857 627.33 356.346C627.33 343.834 488.625 333.692 317.524 333.692C146.423 333.692 7.71875 343.834 7.71875 356.346C7.71875 368.857 146.423 379 317.524 379Z"
 17 | 								fill="#F2F2F2" />
 18 | 							<path
 19 | 								d="M305.65 108.342C255.175 108.342 218.934 144.112 218.934 227.575C218.934 322.166 255.175 347.205 305.65 347.205C356.126 347.205 394.526 319.781 394.526 227.575C394.526 129.009 356.126 108.342 305.65 108.342ZM305.982 315.807C271.021 315.807 252.757 293.152 252.757 227.636C252.757 169.827 271.769 139.342 306.73 139.342C341.691 139.342 360.703 159.367 360.703 227.636C360.703 291.5 340.943 315.807 305.982 315.807Z"
 20 | 								fill="#2F2E41" />
 21 | 							<path
 22 | 								d="M188.708 281.229H167.839V213.348C167.839 209.743 166.542 206.285 164.234 203.735C161.926 201.186 158.795 199.754 155.531 199.754H150.641C149.025 199.754 147.424 200.105 145.931 200.788C144.438 201.472 143.081 202.473 141.938 203.735C140.796 204.998 139.889 206.496 139.27 208.146C138.652 209.795 138.334 211.563 138.334 213.348V281.229H79.4676C78.2566 281.229 77.0661 280.884 76.0117 280.226C74.9573 279.568 74.0748 278.62 73.4497 277.474C72.8246 276.329 72.4783 275.024 72.4442 273.687C72.4101 272.35 72.6895 271.026 73.2552 269.843L135.558 139.594C136.335 137.97 136.806 136.189 136.942 134.358C137.079 132.528 136.878 130.686 136.352 128.944C135.826 127.201 134.986 125.595 133.883 124.221C132.779 122.847 131.435 121.734 129.932 120.95L126.254 119.032C123.398 117.542 120.133 117.322 117.134 118.417C114.136 119.513 111.633 121.839 110.144 124.916L34.1574 281.926C32.8635 284.6 32.1865 287.585 32.1865 290.616C32.1865 293.037 32.6182 295.434 33.4569 297.671C34.2956 299.907 35.5249 301.939 37.0746 303.651C38.6243 305.363 40.4641 306.721 42.4888 307.647C44.5136 308.573 46.6838 309.05 48.8754 309.05H138.334V351.974C138.334 354.114 138.715 356.233 139.457 358.21C140.198 360.187 141.285 361.983 142.655 363.496C144.024 365.009 145.651 366.21 147.441 367.029C149.23 367.848 151.149 368.269 153.086 368.269H153.086C155.024 368.269 156.942 367.848 158.732 367.029C160.522 366.21 162.148 365.009 163.518 363.496C164.888 361.983 165.974 360.187 166.716 358.21C167.457 356.233 167.839 354.114 167.839 351.974V309.05H188.708C192.049 309.05 195.252 307.585 197.614 304.976C199.975 302.367 201.302 298.829 201.302 295.14C201.302 291.45 199.975 287.912 197.614 285.304C195.252 282.695 192.049 281.229 188.708 281.229Z"
 23 | 								fill="#E7D040" />
 24 | 							<path
 25 | 								d="M575.157 281.229H554.287V213.348C554.287 209.743 552.99 206.285 550.682 203.735C548.374 201.186 545.244 199.754 541.98 199.754H537.089C535.473 199.754 533.873 200.105 532.379 200.788C530.886 201.472 529.529 202.473 528.387 203.735C527.244 204.998 526.337 206.496 525.719 208.146C525.1 209.795 524.782 211.563 524.782 213.348V281.229H465.916C464.705 281.229 463.514 280.884 462.46 280.226C461.406 279.568 460.523 278.62 459.898 277.474C459.273 276.329 458.926 275.024 458.892 273.687C458.858 272.35 459.138 271.026 459.703 269.843L522.007 139.594C522.783 137.97 523.254 136.189 523.391 134.358C523.527 132.528 523.326 130.686 522.8 128.944C522.275 127.201 521.435 125.595 520.331 124.221C519.228 122.847 517.883 121.734 516.38 120.95L512.702 119.032C509.846 117.542 506.581 117.322 503.583 118.417C500.584 119.513 498.081 121.839 496.593 124.916L420.606 281.926C419.312 284.6 418.635 287.585 418.635 290.616C418.635 295.505 420.393 300.194 423.523 303.651C426.653 307.108 430.897 309.05 435.324 309.05H524.782V351.974C524.782 356.296 526.336 360.44 529.103 363.496C531.869 366.552 535.622 368.269 539.534 368.269C543.447 368.269 547.199 366.552 549.966 363.496C552.733 360.44 554.287 356.296 554.287 351.974V309.05H575.157C578.497 309.05 581.7 307.585 584.062 304.976C586.423 302.367 587.75 298.829 587.75 295.14C587.75 291.45 586.423 287.912 584.062 285.304C581.7 282.695 578.497 281.229 575.157 281.229Z"
 26 | 								fill="#E7D040" />
 27 | 							<path
 28 | 								d="M194.466 273.28H173.597V205.399C173.597 203.614 173.278 201.846 172.66 200.197C172.041 198.547 171.135 197.049 169.992 195.786C168.849 194.524 167.492 193.523 165.999 192.84C164.506 192.156 162.905 191.805 161.289 191.805H156.399C153.135 191.805 150.004 193.237 147.696 195.786C145.388 198.336 144.091 201.794 144.091 205.399V273.28H85.2254C84.0144 273.28 82.8239 272.935 81.7695 272.277C80.7151 271.619 79.8326 270.671 79.2075 269.525C78.5825 268.38 78.2361 267.075 78.202 265.738C78.1679 264.401 78.4473 263.077 79.013 261.894L141.316 131.645C142.093 130.021 142.564 128.24 142.7 126.41C142.837 124.579 142.636 122.737 142.11 120.995C141.584 119.252 140.744 117.646 139.641 116.272C138.537 114.898 137.193 113.786 135.69 113.001L132.012 111.083C129.156 109.593 125.891 109.373 122.892 110.469C119.894 111.564 117.391 113.89 115.902 116.967L39.9153 273.977C38.6213 276.651 37.9443 279.636 37.9443 282.668V282.668C37.9443 287.556 39.7026 292.245 42.8324 295.702C45.9622 299.159 50.207 301.101 54.6332 301.101H144.091V344.025C144.091 346.165 144.473 348.284 145.214 350.261C145.956 352.238 147.042 354.034 148.412 355.547C149.782 357.061 151.409 358.261 153.198 359.08C154.988 359.899 156.907 360.32 158.844 360.32H158.844C162.757 360.32 166.509 358.603 169.276 355.547C172.042 352.492 173.597 348.347 173.597 344.025V301.101H194.466C196.12 301.101 197.758 300.742 199.286 300.042C200.814 299.343 202.202 298.319 203.371 297.027C204.541 295.735 205.468 294.202 206.101 292.514C206.734 290.827 207.06 289.018 207.06 287.191V287.191C207.06 285.364 206.734 283.555 206.101 281.868C205.468 280.18 204.541 278.646 203.371 277.355C202.202 276.063 200.814 275.038 199.286 274.339C197.758 273.64 196.12 273.28 194.466 273.28V273.28Z"
 29 | 								stroke="#3F3D56" stroke-miterlimit="10" />
 30 | 							<path
 31 | 								d="M585.951 273.28H565.081V205.399C565.081 201.794 563.784 198.336 561.476 195.786C559.168 193.237 556.038 191.805 552.773 191.805H547.883C546.267 191.805 544.667 192.156 543.173 192.84C541.68 193.523 540.323 194.524 539.181 195.786C538.038 197.049 537.131 198.547 536.513 200.197C535.894 201.846 535.576 203.614 535.576 205.399V273.28H476.71C475.499 273.28 474.308 272.935 473.254 272.277C472.2 271.619 471.317 270.671 470.692 269.525C470.067 268.38 469.72 267.075 469.686 265.738C469.652 264.401 469.932 263.077 470.497 261.894L532.8 131.645C533.577 130.021 534.048 128.24 534.185 126.41C534.321 124.579 534.12 122.737 533.594 120.995C533.069 119.252 532.228 117.646 531.125 116.272C530.021 114.898 528.677 113.786 527.174 113.001L523.496 111.083C520.64 109.593 517.375 109.373 514.377 110.469C511.378 111.564 508.875 113.89 507.386 116.967L431.4 273.977C430.106 276.651 429.429 279.636 429.429 282.668C429.429 287.556 431.187 292.245 434.317 295.702C437.447 299.159 441.691 301.101 446.118 301.101H535.576V344.025C535.576 348.347 537.13 352.492 539.897 355.547C542.663 358.603 546.416 360.32 550.328 360.32V360.32C554.241 360.32 557.993 358.603 560.76 355.547C563.527 352.492 565.081 348.347 565.081 344.025V301.101H585.951C587.604 301.101 589.242 300.742 590.77 300.042C592.298 299.343 593.686 298.319 594.856 297.027C596.025 295.735 596.953 294.202 597.586 292.514C598.219 290.827 598.544 289.018 598.544 287.191V287.191C598.544 283.502 597.217 279.963 594.856 277.355C592.494 274.746 589.291 273.28 585.951 273.28V273.28Z"
 32 | 								stroke="#3F3D56" stroke-miterlimit="10" />
 33 | 							<path
 34 | 								d="M317.165 101.188C266.689 101.188 230.448 136.958 230.448 220.421C230.448 315.012 266.689 340.051 317.165 340.051C367.641 340.051 406.041 312.627 406.041 220.421C406.041 121.855 367.641 101.188 317.165 101.188ZM317.497 308.653C282.536 308.653 264.271 285.998 264.271 220.482C264.271 162.673 283.284 132.188 318.245 132.188C353.205 132.188 372.218 152.213 372.218 220.482C372.218 284.346 352.457 308.653 317.497 308.653V308.653Z"
 35 | 								stroke="#3F3D56" stroke-miterlimit="10" />
 36 | 							<path
 37 | 								d="M276.705 20.2086C280.89 20.2086 284.282 16.4615 284.282 11.8394C284.282 7.21717 280.89 3.47015 276.705 3.47015C272.52 3.47015 269.128 7.21717 269.128 11.8394C269.128 16.4615 272.52 20.2086 276.705 20.2086Z"
 38 | 								fill="#2F2E41" />
 39 | 							<path
 40 | 								d="M295.186 60.8298C306.923 60.8298 316.439 47.2126 316.439 30.4149C316.439 13.6172 306.923 0 295.186 0C283.449 0 273.934 13.6172 273.934 30.4149C273.934 47.2126 283.449 60.8298 295.186 60.8298Z"
 41 | 								fill="#2F2E41" />
 42 | 							<path opacity="0.1"
 43 | 								d="M295.186 51.6441C284.54 51.6441 275.722 40.4404 274.175 25.822C274.014 27.3465 273.933 28.8801 273.934 30.4149C273.934 47.2126 283.449 60.8298 295.186 60.8298C306.923 60.8298 316.439 47.2126 316.439 30.4149C316.439 28.8801 316.358 27.3465 316.197 25.822C314.65 40.4404 305.833 51.6441 295.186 51.6441Z"
 44 | 								fill="black" />
 45 | 							<path
 46 | 								d="M338.432 119.486C337.976 121.558 336.008 123.217 333.829 124.376C329.247 126.813 323.595 127.541 318.112 127.785C316.714 127.879 315.311 127.85 313.916 127.699C311.214 127.41 308.679 126.123 306.722 124.046C306.582 123.945 306.467 123.807 306.389 123.644C306.311 123.482 306.271 123.3 306.274 123.116C306.276 122.931 306.321 122.751 306.404 122.591C306.487 122.431 306.605 122.297 306.747 122.201C309.666 118.66 314.536 116.488 319.443 114.925C323.163 113.739 329.651 110.669 333.708 111.083C337.639 111.485 339.009 116.87 338.432 119.486Z"
 47 | 								fill="#3F3D56" />
 48 | 							<path opacity="0.1"
 49 | 								d="M338.432 119.486C337.976 121.558 336.008 123.217 333.829 124.376C329.247 126.813 323.595 127.541 318.112 127.785C316.714 127.879 315.311 127.85 313.916 127.699C311.214 127.41 308.679 126.123 306.722 124.046C306.582 123.945 306.467 123.807 306.389 123.644C306.311 123.482 306.271 123.3 306.274 123.116C306.276 122.931 306.321 122.751 306.404 122.591C306.487 122.431 306.605 122.297 306.747 122.201C309.666 118.66 314.536 116.488 319.443 114.925C323.163 113.739 329.651 110.669 333.708 111.083C337.639 111.485 339.009 116.87 338.432 119.486Z"
 50 | 								fill="black" />
 51 | 							<path
 52 | 								d="M280.172 104.003C278.773 107.031 278.52 110.548 279.468 113.782C280.432 116.992 282.237 119.813 284.653 121.889C290.582 127.138 298.742 127.861 306.34 127.788C312.998 127.724 319.648 127.22 326.252 126.28C328.466 126.064 330.641 125.506 332.714 124.623C335.194 123.438 337.373 121.264 338.256 118.444C339.138 115.623 338.512 112.169 336.415 110.287C334.573 108.633 332.032 108.405 329.662 108.248L316.103 107.348C317.442 105.85 319.226 105.003 320.857 103.915C323.022 102.47 324.46 100.045 326.034 97.859C328.458 94.658 331.097 91.6619 333.926 88.8957C334.367 91.6919 335.969 93.9881 337.854 95.9174C339.738 97.8468 341.911 99.4 343.87 101.237C348.615 105.686 352.031 111.725 357.021 115.833C360.454 114.837 363.663 113.067 366.447 110.636L364.507 106.755C364.346 106.356 364.094 106.009 363.776 105.748C363.227 105.375 362.52 105.567 361.882 105.462C360.179 105.18 359.435 103.007 358.766 101.253C356.931 96.4387 353.417 92.7033 350.416 88.6657C348.201 85.6853 346.236 82.4885 344.545 79.1148C343.537 77.1027 342.614 75.0077 341.246 73.2743C339.878 71.5408 337.961 70.178 335.879 70.1731C334.039 70.1688 332.342 71.2003 330.761 72.238C325.944 75.3986 321.309 78.8865 316.883 82.6816C314.566 84.6678 312.265 86.7662 309.548 87.9842C308.404 88.4969 307.198 88.8473 306.1 89.4712C304.178 90.5639 302.719 92.4127 301.149 94.0538C295.547 99.9073 287.878 103.7 280.172 104.003Z"
 53 | 								fill="#3F3D56" />
 54 | 							<path
 55 | 								d="M308.525 62.3403C308.462 64.1296 308.118 65.893 307.507 67.5517C307.197 68.3789 306.737 69.1269 306.154 69.7488C305.571 70.3708 304.879 70.8535 304.12 71.1668C303.042 71.4858 301.911 71.5263 300.817 71.2851C299.863 71.175 298.943 70.829 298.126 70.2727C296.855 69.3072 296.221 67.5843 295.99 65.8982C295.759 64.2142 295.862 62.4934 295.715 60.7971C295.571 59.427 295.335 58.0706 295.009 56.7391C294.909 56.2961 294.807 55.8552 294.707 55.4143C294.609 54.9734 294.513 54.5325 294.425 54.0916C294.343 53.6772 294.268 53.2608 294.203 52.8423C294.149 52.4892 294.101 52.134 294.066 51.7768C294.034 50.7177 293.874 49.6682 293.591 48.6557C293.326 47.999 292.993 47.3779 292.601 46.8042C292.432 46.5389 292.27 46.2735 292.12 45.9979C291.687 45.2818 291.486 44.4251 291.549 43.5668C291.567 43.4341 291.596 43.3036 291.636 43.1769C291.651 43.1279 291.667 43.079 291.686 43.032C291.852 42.9821 292.005 42.8882 292.131 42.7583C292.257 42.6285 292.352 42.4667 292.408 42.2869C292.472 41.9007 292.442 41.5028 292.322 41.1336C292.183 40.6176 291.994 40.1199 291.758 39.6496C291.603 39.3393 291.076 38.78 291.072 38.4248C291.065 37.7103 292.329 37.1347 292.841 36.853C294.403 35.9887 296.146 35.5985 297.89 35.7221C299.008 35.8058 300.22 36.1855 300.837 37.2204C301.392 38.1533 301.318 39.3617 301.554 40.4456C301.579 40.6032 301.64 40.7513 301.73 40.8763C301.851 40.9977 302.002 41.0748 302.164 41.0968C302.438 41.1569 302.719 41.1694 302.996 41.1335H302.998C303.071 41.1271 303.144 41.1155 303.216 41.0988C303.648 41.0108 304.056 40.8162 304.41 40.5293C304.639 40.462 304.87 40.4068 305.103 40.364C305.112 40.3629 305.121 40.3609 305.13 40.3579C306.056 43.5851 306.176 47.045 306.934 50.3315C307.309 51.9665 307.847 53.5812 307.923 55.2632C307.928 55.3367 307.93 55.4122 307.932 55.4877C307.943 56.0287 307.904 56.5737 307.925 57.1126C307.932 57.3553 307.956 57.5969 307.999 57.8352C308.081 58.2185 308.185 58.5961 308.307 58.9661L308.313 58.9844C308.348 59.1028 308.381 59.2233 308.409 59.3437C308.429 59.4315 308.448 59.5172 308.462 59.605L308.464 59.6111C308.601 60.5131 308.622 61.432 308.525 62.3403Z"
 56 | 								fill="#FBBEBE" />
 57 | 							<path
 58 | 								d="M295.555 41.2336C301.577 41.2336 306.458 35.8416 306.458 29.1901C306.458 22.5387 301.577 17.1467 295.555 17.1467C289.533 17.1467 284.651 22.5387 284.651 29.1901C284.651 35.8416 289.533 41.2336 295.555 41.2336Z"
 59 | 								fill="#FBBEBE" />
 60 | 							<path
 61 | 								d="M364.779 94.8087C364.463 91.523 363.406 88.3773 361.704 85.6598C361.987 87.5173 362.27 89.3742 362.554 91.2304C362.201 91.3432 361.826 91.3398 361.475 91.2205C361.124 91.1012 360.812 90.8712 360.577 90.5588C360.118 89.9256 359.767 89.2056 359.54 88.4339C358.301 85.0372 356.682 81.8257 354.719 78.8746C347.777 78.2357 340.916 75.0574 334.811 71.3525C328.706 67.6497 322.991 63.2099 316.967 59.3499C315.922 58.6525 314.834 58.0386 313.71 57.5127C311.825 56.6778 309.709 56.2451 307.922 55.2632C307.802 55.1979 307.682 55.1285 307.564 55.0571C307.16 54.8145 306.778 54.5309 306.422 54.2099C306.229 54.0374 306.047 53.8519 305.875 53.6547C304.983 52.5089 304.276 51.2026 303.785 49.7926C302.826 47.4493 302.484 44.6221 301.526 42.2787C301.966 41.8245 302.461 41.4392 302.996 41.1336H302.997C303.075 41.0887 303.153 41.0458 303.232 41.005C303.611 40.8079 304.005 40.6488 304.409 40.5294C304.638 40.462 304.869 40.4069 305.102 40.364C305.112 40.363 305.121 40.3609 305.13 40.3579C306.21 40.1636 307.316 40.2602 308.355 40.6396C309.874 41.2071 311.155 42.34 312.432 43.4116C314.506 45.026 316.496 46.7693 318.392 48.6332C319.445 49.7477 320.406 50.9725 321.539 51.985C322.48 52.7875 323.473 53.514 324.509 54.1589C330.639 58.1924 336.769 62.2253 342.9 66.2575C344.976 67.6231 347.053 68.9887 349.082 70.4339C352.165 72.6303 355.136 75.0104 358.106 77.3885C359.856 78.7888 361.606 80.1898 363.355 81.5915C363.928 81.9958 364.432 82.5101 364.842 83.1102C365.204 83.7915 365.43 84.5511 365.502 85.3372C365.941 88.5132 365.693 91.7588 364.779 94.8087Z"
 62 | 								fill="#FBBEBE" />
 63 | 							<path
 64 | 								d="M311.229 71.3974C310.493 75.0411 307.159 77.2436 305.417 80.4443C303.251 84.4166 304.134 89.034 304.947 93.584C303.461 94.9986 301.975 96.4132 300.488 97.8278C299.667 98.6055 298.847 99.3873 297.963 100.075C296.675 101.028 295.329 101.882 293.935 102.631C292.619 103.378 291.303 104.126 289.987 104.874C288.764 105.634 287.468 106.241 286.123 106.683C283.53 107.418 280.777 106.903 278.212 106.052C277.909 105.964 277.618 105.833 277.347 105.662C277.187 105.557 277.047 105.417 276.936 105.252C276.684 104.751 276.592 104.17 276.676 103.605C276.936 98.8362 277.992 94.1678 279.043 89.5341C279.605 86.7542 280.361 84.0264 281.303 81.3751C282.228 79.1033 283.29 76.9033 284.484 74.79C285.801 72.1311 287.362 69.6284 289.141 67.321C290.007 66.4329 290.736 65.3946 291.299 64.2469C291.956 62.5934 291.702 60.6971 291.835 58.8967C291.937 57.544 292.262 56.2233 292.795 54.9999V54.9979C293.079 54.3389 293.422 53.7126 293.818 53.1281C293.998 53.5894 294.177 54.05 294.356 54.51C294.474 54.8121 294.591 55.1136 294.707 55.4143C294.859 55.8022 295.009 56.1886 295.158 56.5738C295.589 57.6801 296.019 58.7858 296.448 59.8908C296.912 61.2826 297.573 62.5841 298.407 63.7468C298.788 64.3421 299.302 64.8181 299.9 65.1283C300.497 65.4385 301.157 65.5722 301.815 65.5165C302.474 65.4608 303.107 65.2175 303.655 64.8103C304.203 64.4032 304.645 63.8461 304.94 63.1936C305.561 61.9755 306.011 60.6602 306.274 59.2927C306.639 57.6277 306.689 55.8975 306.422 54.21C305.977 50.9603 304.725 47.6412 303.816 44.6221C303.446 43.6155 303.232 42.5473 303.182 41.4622C303.184 41.3403 303.195 41.2188 303.216 41.0989C303.221 41.0683 303.227 41.0356 303.232 41.005C303.611 40.808 304.005 40.6488 304.409 40.5294C304.639 40.462 304.87 40.4069 305.102 40.364C305.903 45.1488 306.704 49.9335 307.507 54.7182C307.525 54.8305 307.546 54.9428 307.564 55.0571C307.679 55.743 307.795 56.4288 307.924 57.1126C308.041 57.7332 308.167 58.3517 308.307 58.9661L308.313 58.9845C308.361 59.1927 308.41 59.3989 308.462 59.605L308.464 59.6112C308.606 60.1746 308.765 60.7339 308.945 61.285C310.031 64.6061 311.925 67.9497 311.229 71.3974Z"
 65 | 								fill="#E7D040" />
 66 | 							<path
 67 | 								d="M355.479 122.602C355.445 123.304 355.568 124.005 355.838 124.642C356.52 126.019 358.157 126.332 359.574 126.461C367.851 127.213 376.177 126.932 384.397 125.626C384.843 125.592 385.276 125.444 385.661 125.193C386.829 124.288 386.109 122.082 384.833 121.376C383.557 120.67 382.042 120.84 380.642 120.534C379.251 120.147 377.927 119.513 376.72 118.655C373.881 116.853 371.083 114.975 368.326 113.019C366.685 111.855 364.748 110.613 362.899 111.303C357.892 113.174 355.446 116.637 355.479 122.602Z"
 68 | 								fill="#3F3D56" />
 69 | 							<path
 70 | 								d="M294.467 53.8364V53.8384C294.454 53.9242 294.441 54.0079 294.424 54.0916C294.404 54.2304 294.38 54.3712 294.356 54.51C294.127 55.8062 293.846 57.0963 293.522 58.3782C292.635 61.9198 291.447 65.4042 290.268 68.8377C287.104 78.0438 283.94 87.2506 280.775 96.458C279.976 98.7769 279.18 101.098 278.272 103.37C277.969 104.127 277.657 104.89 277.347 105.662C276.234 108.424 275.166 111.276 274.811 114.215C274.48 116.15 274.442 118.131 274.698 120.08C275.053 122.007 276.112 123.889 277.77 124.601C278.579 124.95 279.738 125.418 279.516 126.346C279.396 126.857 278.871 127.106 278.4 127.191C277.778 127.301 277.141 127.258 276.536 127.065C275.93 126.873 275.37 126.535 274.896 126.077C274.011 125.209 273.331 123.86 272.154 123.715C271.339 123.617 270.588 124.156 269.842 124.534C266.796 126.071 263.248 124.995 260.049 123.903C260.3 122.472 261.601 121.529 262.893 121.243C264.185 120.955 265.521 121.159 266.839 121.121C267.26 121.146 267.679 121.027 268.038 120.78C268.359 120.454 268.585 120.028 268.685 119.559C269.533 116.781 270.165 113.928 270.572 111.031C270.997 108.003 271.174 104.929 271.78 101.939C272.251 99.6057 272.98 97.346 273.604 95.0557C274.812 90.3401 275.804 85.5602 276.576 80.7342C276.966 78.7292 277.246 76.6998 277.413 74.6573C277.518 72.9631 277.468 71.2606 277.616 69.5725C277.864 67.3762 278.279 65.2069 278.856 63.0874C279.422 60.7747 279.987 58.4633 280.551 56.1532C281.388 52.7341 282.286 49.1823 284.408 46.5246C285.145 45.5889 286.048 44.8304 287.061 44.296C288.074 43.7616 289.176 43.4627 290.298 43.4178C290.718 43.4172 291.138 43.4672 291.549 43.5668C291.617 43.5851 291.685 43.6035 291.754 43.6239C292.202 43.7532 292.631 43.9497 293.031 44.2077C293.685 43.7484 294.018 43.9097 294.452 44.618C294.833 45.3676 295.012 46.2216 294.969 47.0798C295.006 49.3449 294.838 51.6083 294.467 53.8364Z"
 71 | 								fill="#FBBEBE" />
 72 | 							<path
 73 | 								d="M295.186 56.5431L295.158 56.5737L295.009 56.7391L293.523 58.3782L292.795 54.9999L290.298 43.4178C290.719 43.4172 291.138 43.4671 291.549 43.5668C291.567 43.4341 291.596 43.3035 291.636 43.1769L291.754 43.6239L292.6 46.8042L294.203 52.8423L294.467 53.8364V53.8384L295.186 56.5431Z"
 74 | 								fill="#E7D040" />
 75 | 							<path
 76 | 								d="M304.615 19.593C304.613 20.6655 304.421 21.7272 304.048 22.7174C303.675 23.7076 303.129 24.6069 302.441 25.3639C302.192 25.6394 301.925 25.8945 301.642 26.127C300.367 27.1889 298.814 27.7637 297.217 27.7645H288.351C286.392 27.7611 284.514 26.8992 283.129 25.3678C281.745 23.8365 280.968 21.761 280.968 19.597C280.968 17.4331 281.745 15.3575 283.129 13.8262C284.514 12.2949 286.392 11.4329 288.351 11.4296H297.217C299.176 11.4352 301.054 12.2968 302.44 13.8263C303.826 15.3558 304.608 17.429 304.615 19.593Z"
 77 | 								fill="#2F2E41" />
 78 | 							<path
 79 | 								d="M312.927 20.2086C317.111 20.2086 320.504 16.4615 320.504 11.8394C320.504 7.21717 317.111 3.47015 312.927 3.47015C308.742 3.47015 305.35 7.21717 305.35 11.8394C305.35 16.4615 308.742 20.2086 312.927 20.2086Z"
 80 | 								fill="#2F2E41" />
 81 | 							<path opacity="0.1"
 82 | 								d="M312.742 3.47015C312.649 3.47015 312.557 3.47423 312.465 3.47789C314.425 3.5566 316.281 4.472 317.642 6.03147C319.004 7.59095 319.765 9.67293 319.765 11.8394C319.765 14.0058 319.004 16.0878 317.642 17.6472C316.281 19.2067 314.425 20.1221 312.465 20.2008C312.557 20.2045 312.649 20.2086 312.742 20.2086C314.752 20.2086 316.679 19.3268 318.1 17.7573C319.521 16.1877 320.319 14.059 320.319 11.8394C320.319 9.61971 319.521 7.49097 318.1 5.92144C316.679 4.35191 314.752 3.47015 312.742 3.47015Z"
 83 | 								fill="black" />
 84 | 							<path opacity="0.1"
 85 | 								d="M276.705 3.47015C276.798 3.47015 276.89 3.47423 276.982 3.47789C275.022 3.5566 273.166 4.472 271.805 6.03147C270.443 7.59095 269.683 9.67293 269.683 11.8394C269.683 14.0058 270.443 16.0878 271.805 17.6472C273.166 19.2067 275.022 20.1221 276.982 20.2008C276.89 20.2045 276.798 20.2086 276.705 20.2086C274.697 20.2066 272.771 19.324 271.352 17.7547C269.932 16.1853 269.135 14.0577 269.135 11.8394C269.135 9.62099 269.932 7.49336 271.352 5.92404C272.771 4.35472 274.697 3.47211 276.705 3.47015Z"
 86 | 								fill="black" />
 87 | 							<path opacity="0.1"
 88 | 								d="M301.642 26.127C300.367 27.1889 298.814 27.7637 297.217 27.7645H288.351C286.754 27.7637 285.2 27.1889 283.925 26.127H301.642Z"
 89 | 								fill="black" />
 90 | 							<path
 91 | 								d="M358.896 86.7696C358.896 86.7696 360.806 92.8491 362.554 91.2304L361.16 83.2837L358.896 86.7696Z"
 92 | 								fill="#FBBEBE" />
 93 | 							<path
 94 | 								d="M591.34 272.169C593.119 272.883 595.024 273.131 596.905 272.894C598.786 272.656 600.591 271.939 602.178 270.8C603.765 269.66 605.091 268.129 606.051 266.327C607.011 264.525 607.579 262.501 607.711 260.415C607.842 258.329 607.532 256.238 606.807 254.306C606.082 252.375 604.96 250.656 603.531 249.285C602.101 247.914 600.403 246.929 598.57 246.406C596.737 245.884 594.819 245.839 592.968 246.275L593.274 253.224L590.297 247.269C587.376 248.785 585.119 251.52 584.023 254.873C583.633 256.048 583.397 257.277 583.32 258.525C583.132 261.453 583.813 264.369 585.26 266.831C586.708 269.293 588.842 271.167 591.34 272.169Z"
 95 | 								fill="#57B894" />
 96 | 							<path
 97 | 								d="M606.068 352.767C605.018 346.857 609.571 341.618 614.068 338.212C618.565 334.807 623.82 331.461 625.355 325.681C627.56 317.375 620.991 309.768 615.878 303.209C612.085 298.34 608.827 292.993 606.174 287.278C605.11 284.986 604.132 282.591 603.853 280.034C603.449 276.352 604.52 272.689 605.599 269.177C609.193 257.477 613.036 245.876 617.127 234.373"
 98 | 								stroke="#3F3D56" stroke-miterlimit="10" />
 99 | 							<path
100 | 								d="M591.843 270.379C593.622 271.094 595.527 271.342 597.408 271.105C599.289 270.867 601.094 270.15 602.681 269.011C604.268 267.871 605.594 266.34 606.554 264.538C607.514 262.736 608.082 260.712 608.213 258.626C608.345 256.54 608.035 254.449 607.31 252.517C606.585 250.586 605.463 248.867 604.034 247.496C602.604 246.125 600.906 245.14 599.073 244.617C597.24 244.095 595.322 244.05 593.471 244.486L593.777 251.435L590.8 245.479C587.879 246.996 585.622 249.731 584.526 253.084C584.136 254.259 583.9 255.488 583.823 256.736C583.635 259.664 584.316 262.58 585.763 265.042C587.211 267.504 589.345 269.378 591.843 270.379V270.379Z"
101 | 								stroke="#3F3D56" stroke-miterlimit="10" />
102 | 							<path
103 | 								d="M604.575 231.973C605.273 229.845 606.445 227.946 607.982 226.449C609.52 224.953 611.374 223.909 613.373 223.412L614.379 230.018L616.245 223.08C618.836 223.122 621.347 224.073 623.417 225.795C625.486 227.516 627.007 229.92 627.759 232.659C628.511 235.397 628.456 238.329 627.602 241.031C626.747 243.733 625.137 246.064 623.004 247.69C620.872 249.315 618.327 250.149 615.737 250.073C613.147 249.996 610.646 249.012 608.595 247.264C606.544 245.515 605.049 243.091 604.327 240.343C603.604 237.594 603.691 234.663 604.575 231.973H604.575Z"
104 | 								fill="#57B894" />
105 | 							<path
106 | 								d="M605.246 229.588C605.944 227.46 607.116 225.56 608.653 224.064C610.191 222.568 612.044 221.523 614.044 221.026L615.05 227.633L616.916 220.694C619.507 220.737 622.018 221.687 624.088 223.409C626.157 225.131 627.678 227.535 628.43 230.273C629.182 233.012 629.127 235.944 628.272 238.645C627.418 241.347 625.808 243.679 623.675 245.304C621.543 246.929 618.998 247.764 616.408 247.687C613.817 247.611 611.316 246.627 609.266 244.878C607.215 243.129 605.72 240.705 604.998 237.957C604.275 235.209 604.362 232.278 605.246 229.588H605.246Z"
107 | 								stroke="#3F3D56" stroke-miterlimit="10" />
108 | 							<path
109 | 								d="M613.732 303.342C616.554 304.473 619.653 304.417 622.44 303.186C625.227 301.954 627.506 299.633 628.842 296.665C630.179 293.697 630.481 290.289 629.689 287.091C628.897 283.893 627.068 281.129 624.55 279.325L623.116 284.657L622.1 277.973C622.089 277.968 622.079 277.963 622.068 277.96C620.559 277.354 618.957 277.083 617.353 277.161C615.749 277.24 614.174 277.666 612.719 278.417C611.265 279.168 609.958 280.228 608.874 281.537C607.791 282.846 606.951 284.377 606.404 286.045C605.856 287.712 605.611 289.482 605.683 291.254C605.755 293.026 606.143 294.764 606.823 296.371C607.504 297.977 608.464 299.42 609.65 300.616C610.835 301.812 612.222 302.739 613.732 303.342H613.732Z"
110 | 								fill="#57B894" />
111 | 							<path
112 | 								d="M614.314 300.926C617.136 302.057 620.235 302.001 623.022 300.769C625.809 299.538 628.088 297.217 629.424 294.249C630.761 291.28 631.063 287.873 630.271 284.675C629.479 281.477 627.65 278.713 625.132 276.909L623.698 282.241L622.682 275.557C622.672 275.551 622.661 275.547 622.65 275.544C621.141 274.938 619.539 274.666 617.935 274.745C616.331 274.823 614.756 275.25 613.301 276.001C611.847 276.752 610.54 277.812 609.456 279.121C608.373 280.429 607.533 281.961 606.986 283.628C606.438 285.296 606.193 287.066 606.265 288.837C606.337 290.609 606.725 292.348 607.405 293.954C608.086 295.561 609.046 297.003 610.232 298.2C611.417 299.396 612.804 300.322 614.314 300.926H614.314Z"
113 | 								stroke="#3F3D56" stroke-miterlimit="10" />
114 | 							<path
115 | 								d="M601.007 325.764C601.492 328.813 602.912 331.585 605.028 333.615C607.144 335.645 609.827 336.81 612.628 336.915C615.429 337.019 618.178 336.056 620.413 334.188C622.647 332.319 624.233 329.659 624.902 326.653C625.572 323.646 625.286 320.477 624.091 317.677C622.897 314.876 620.867 312.615 618.342 311.271C615.816 309.927 612.95 309.584 610.223 310.297C607.495 311.011 605.073 312.739 603.363 315.191L608.808 324.245L601.367 319.44C600.79 321.485 600.667 323.654 601.007 325.764Z"
116 | 								fill="#57B894" />
117 | 							<path
118 | 								d="M601.511 323.975C601.996 327.024 603.416 329.796 605.532 331.826C607.647 333.856 610.331 335.021 613.132 335.125C615.933 335.23 618.682 334.267 620.917 332.398C623.151 330.53 624.736 327.87 625.406 324.863C626.076 321.857 625.789 318.688 624.595 315.888C623.4 313.087 621.37 310.825 618.845 309.482C616.32 308.138 613.454 307.795 610.727 308.508C607.999 309.222 605.577 310.95 603.866 313.402L609.312 322.456L601.871 317.651C601.294 319.696 601.171 321.865 601.511 323.975V323.975Z"
119 | 								stroke="#3F3D56" stroke-miterlimit="10" />
120 | 							<path
121 | 								d="M5.28973 305.058C6.45865 305.527 7.71029 305.69 8.946 305.534C10.1817 305.378 11.3677 304.907 12.4105 304.159C13.4534 303.41 14.3245 302.404 14.9553 301.22C15.586 300.036 15.9592 298.706 16.0453 297.336C16.1315 295.965 15.9283 294.591 15.4517 293.322C14.9752 292.053 14.2383 290.924 13.2992 290.023C12.36 289.122 11.2443 288.475 10.04 288.132C8.83569 287.788 7.57565 287.759 6.35922 288.045L6.56024 292.611L4.60457 288.698C2.6852 289.694 1.20241 291.491 0.482041 293.695C0.226208 294.466 0.0706801 295.274 0.0200981 296.094C-0.103344 298.018 0.344308 299.934 1.29522 301.551C2.24612 303.169 3.64846 304.4 5.28973 305.058Z"
122 | 								fill="#57B894" />
123 | 							<path
124 | 								d="M14.967 358.013C14.2767 354.13 17.2681 350.687 20.2229 348.45C23.1778 346.212 26.6303 344.014 27.6385 340.217C29.0875 334.759 24.7715 329.762 21.4122 325.452C18.92 322.253 16.7797 318.74 15.0362 314.985C14.2783 313.51 13.762 311.899 13.5112 310.226C13.2463 307.807 13.9499 305.4 14.6587 303.092C17.0201 295.406 19.5448 287.783 22.2328 280.226"
125 | 								stroke="#3F3D56" stroke-miterlimit="10" />
126 | 							<path
127 | 								d="M5.62079 303.882C6.78971 304.352 8.04135 304.515 9.27706 304.359C10.5128 304.203 11.6988 303.732 12.7416 302.983C13.7844 302.234 14.6555 301.228 15.2863 300.044C15.9171 298.86 16.2902 297.531 16.3764 296.16C16.4625 294.789 16.2593 293.416 15.7828 292.147C15.3062 290.878 14.5693 289.748 13.6302 288.848C12.6911 287.947 11.5754 287.299 10.3711 286.956C9.16674 286.613 7.90671 286.583 6.69028 286.87L6.8913 291.436L4.93563 287.523C3.01626 288.519 1.53346 290.316 0.813095 292.519C0.557265 293.291 0.40174 294.099 0.351155 294.919C0.227705 296.842 0.675354 298.758 1.62626 300.376C2.57717 301.993 3.97952 303.224 5.62079 303.882V303.882Z"
128 | 								stroke="#3F3D56" stroke-miterlimit="10" />
129 | 							<path
130 | 								d="M13.9855 278.649C14.4442 277.251 15.2141 276.003 16.2243 275.02C17.2345 274.037 18.4524 273.35 19.7658 273.024L20.4271 277.364L21.653 272.806C23.3551 272.833 25.0052 273.458 26.365 274.589C27.7247 275.721 28.7238 277.3 29.2181 279.099C29.7123 280.898 29.676 282.825 29.1145 284.6C28.553 286.375 27.4953 287.907 26.0941 288.975C24.6929 290.043 23.0207 290.591 21.319 290.541C19.6173 290.49 17.9741 289.844 16.6267 288.695C15.2792 287.546 14.2972 285.953 13.8225 284.148C13.3477 282.342 13.4048 280.416 13.9855 278.649Z"
131 | 								fill="#57B894" />
132 | 							<path
133 | 								d="M14.4259 277.081C14.8846 275.683 15.6546 274.435 16.6647 273.452C17.6749 272.469 18.8928 271.783 20.2062 271.456L20.8675 275.797L22.0934 271.238C23.7955 271.266 25.4456 271.891 26.8054 273.022C28.1652 274.153 29.1643 275.733 29.6585 277.532C30.1527 279.331 30.1164 281.257 29.5549 283.032C28.9934 284.808 27.9357 286.34 26.5345 287.407C25.1333 288.475 23.4612 289.024 21.7595 288.973C20.0577 288.923 18.4145 288.277 17.0671 287.127C15.7196 285.978 14.7376 284.386 14.2629 282.58C13.7882 280.775 13.8453 278.849 14.4259 277.081V277.081Z"
134 | 								stroke="#3F3D56" stroke-miterlimit="10" />
135 | 							<path
136 | 								d="M20.0019 325.54C21.8557 326.282 23.8921 326.246 25.723 325.437C27.5539 324.628 29.0512 323.103 29.9296 321.152C30.8079 319.202 31.0059 316.963 30.4858 314.862C29.9657 312.761 28.7638 310.945 27.1093 309.76L26.1673 313.263L25.4993 308.871C25.4927 308.868 25.4859 308.865 25.4789 308.863C24.4873 308.465 23.4344 308.286 22.3804 308.337C21.3263 308.389 20.2917 308.669 19.3358 309.162C18.3798 309.656 17.5213 310.352 16.8091 311.212C16.097 312.072 15.5453 313.079 15.1855 314.174C14.8257 315.27 14.6648 316.433 14.7122 317.597C14.7595 318.761 15.0141 319.904 15.4614 320.959C15.9087 322.015 16.54 322.963 17.319 323.749C18.0981 324.534 19.0098 325.143 20.0019 325.54Z"
137 | 								fill="#57B894" />
138 | 							<path
139 | 								d="M20.3847 323.952C22.2385 324.695 24.2749 324.658 26.1058 323.849C27.9367 323.04 29.434 321.515 30.3124 319.565C31.1907 317.615 31.3887 315.376 30.8686 313.275C30.3485 311.174 29.1466 309.358 27.4921 308.172L26.5501 311.676L25.8822 307.284C25.8756 307.28 25.8687 307.278 25.8617 307.275C24.8704 306.878 23.8179 306.7 22.7644 306.753C21.7108 306.805 20.6769 307.085 19.7216 307.579C17.7923 308.575 16.3004 310.377 15.5741 312.589C14.8478 314.8 14.9466 317.24 15.8488 319.371C16.751 321.502 18.3826 323.15 20.3847 323.952V323.952Z"
140 | 								stroke="#3F3D56" stroke-miterlimit="10" />
141 | 							<path
142 | 								d="M11.6419 340.271C11.9607 342.274 12.8933 344.096 14.2835 345.429C15.6737 346.763 17.4369 347.529 19.2773 347.597C21.1177 347.666 22.9235 347.033 24.3918 345.805C25.86 344.578 26.9015 342.83 27.3416 340.855C27.7816 338.88 27.5934 336.798 26.8086 334.958C26.0237 333.118 24.6899 331.632 23.0309 330.749C21.3719 329.866 19.4886 329.64 17.6967 330.109C15.9049 330.578 14.3135 331.714 13.1895 333.325L16.7676 339.273L11.8786 336.116C11.4995 337.46 11.4183 338.885 11.6419 340.271Z"
143 | 								fill="#57B894" />
144 | 							<path
145 | 								d="M11.972 339.095C12.2907 341.099 13.2234 342.92 14.6136 344.254C16.0038 345.588 17.7669 346.353 19.6074 346.422C21.4478 346.49 23.2536 345.858 24.7218 344.63C26.1901 343.402 27.2316 341.654 27.6716 339.679C28.1117 337.704 27.9235 335.622 27.1386 333.782C26.3538 331.942 25.02 330.456 23.361 329.573C21.702 328.691 19.8186 328.465 18.0268 328.934C16.2349 329.403 14.6436 330.538 13.5196 332.149L17.0976 338.098L12.2086 334.94C11.8296 336.284 11.7484 337.709 11.972 339.095V339.095Z"
146 | 								stroke="#3F3D56" stroke-miterlimit="10" />
147 | 							<path
148 | 								d="M282.464 221.287C287.978 221.287 292.448 214.897 292.448 207.015C292.448 199.133 287.978 192.744 282.464 192.744C276.95 192.744 272.479 199.133 272.479 207.015C272.479 214.897 276.95 221.287 282.464 221.287Z"
149 | 								fill="#2F2E41" />
150 | 							<path
151 | 								d="M336.79 221.611C342.304 221.611 346.774 215.222 346.774 207.34C346.774 199.458 342.304 193.068 336.79 193.068C331.276 193.068 326.806 199.458 326.806 207.34C326.806 215.222 331.276 221.611 336.79 221.611Z"
152 | 								fill="#2F2E41" />
153 | 							<path
154 | 								d="M329.155 249.506C329.155 255.954 321.003 261.183 310.949 261.183C300.894 261.183 292.742 255.954 292.742 249.506C292.742 243.921 298.856 239.25 307.026 238.108C308.326 237.919 309.637 237.826 310.949 237.829C313.147 237.822 315.339 238.083 317.485 238.608C324.31 240.288 329.155 244.537 329.155 249.506Z"
155 | 								fill="#2F2E41" />
156 | 							<path
157 | 								d="M284.813 218.044C290.328 218.044 294.798 211.654 294.798 203.772C294.798 195.89 290.328 189.5 284.813 189.5C279.299 189.5 274.829 195.89 274.829 203.772C274.829 211.654 279.299 218.044 284.813 218.044Z"
158 | 								stroke="#3F3D56" stroke-miterlimit="10" />
159 | 							<path
160 | 								d="M339.139 218.368C344.653 218.368 349.123 211.978 349.123 204.096C349.123 196.214 344.653 189.824 339.139 189.824C333.624 189.824 329.154 196.214 329.154 204.096C329.154 211.978 333.624 218.368 339.139 218.368Z"
161 | 								stroke="#3F3D56" stroke-miterlimit="10" />
162 | 							<path
163 | 								d="M313.297 257.94C323.353 257.94 331.504 252.712 331.504 246.263C331.504 239.814 323.353 234.586 313.297 234.586C303.242 234.586 295.091 239.814 295.091 246.263C295.091 252.712 303.242 257.94 313.297 257.94Z"
164 | 								stroke="#3F3D56" stroke-miterlimit="10" />
165 | 							<path
166 | 								d="M317.702 239.581C317.707 240.397 317.43 241.184 316.927 241.781C316.689 242.068 316.401 242.297 316.079 242.454C315.758 242.611 315.411 242.693 315.059 242.695H309.186C308.462 242.667 307.778 242.324 307.283 241.74C306.788 241.157 306.522 240.38 306.543 239.581C306.54 238.948 306.708 238.329 307.025 237.803C308.324 237.601 309.636 237.501 310.948 237.505C313.149 237.497 315.343 237.776 317.485 238.335C317.63 238.731 317.704 239.154 317.702 239.581Z"
167 | 								fill="white" />
168 | 							<path
169 | 								d="M284.814 203.123C286.435 203.123 287.75 201.671 287.75 199.879C287.75 198.088 286.435 196.636 284.814 196.636C283.192 196.636 281.877 198.088 281.877 199.879C281.877 201.671 283.192 203.123 284.814 203.123Z"
170 | 								fill="white" />
171 | 							<path
172 | 								d="M339.433 203.123C341.054 203.123 342.369 201.671 342.369 199.879C342.369 198.088 341.054 196.636 339.433 196.636C337.811 196.636 336.496 198.088 336.496 199.879C336.496 201.671 337.811 203.123 339.433 203.123Z"
173 | 								fill="white" />
174 | 							<path opacity="0.3"
175 | 								d="M342.369 233.613C343.991 233.613 345.306 232.16 345.306 230.369C345.306 228.578 343.991 227.126 342.369 227.126C340.747 227.126 339.433 228.578 339.433 230.369C339.433 232.16 340.747 233.613 342.369 233.613Z"
176 | 								fill="#E7D040" />
177 | 							<path opacity="0.3"
178 | 								d="M270.718 233.613C272.34 233.613 273.654 232.16 273.654 230.369C273.654 228.578 272.34 227.126 270.718 227.126C269.096 227.126 267.781 228.578 267.781 230.369C267.781 232.16 269.096 233.613 270.718 233.613Z"
179 | 								fill="#E7D040" />
180 | 						</g>
181 | 						<defs>
182 | 							<clipPath id="clip0">
183 | 								<rect width="631" height="379" fill="white" />
184 | 							</clipPath>
185 | 						</defs>
186 | 					</svg>
187 | 
188 | 				</div>
189 | 				<p class="text-sm md:text-base text-yellow-300 p-2 mb-4">The stuff you were looking for doesn't exist
190 | 				</p>
191 | 				<a href="javascript:history.back()"
192 | 					class="bg-transparent hover:bg-yellow-300 text-yellow-300 hover:text-white rounded shadow hover:shadow-lg py-2 px-4 border border-yellow-300 hover:border-transparent">
193 | 					Retry</a>
194 | 			</div>
195 | 		</div>
196 | 	</div>
197 | </section>
198 |     </div>
199 |   )
200 | }
201 | 
202 | export default ErrorPage
203 | 


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