├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.css ├── App.jsx ├── assets │ ├── icons │ │ ├── Activity.svg │ │ ├── ActivityWhite.svg │ │ ├── Arrow.svg │ │ ├── Calendar.svg │ │ ├── CalendarWhite.svg │ │ ├── Chat.svg │ │ ├── Folder.svg │ │ ├── FolderP.svg │ │ ├── FolderWhite.svg │ │ ├── Form.png │ │ ├── Graph.svg │ │ ├── GraphWhite.svg │ │ ├── HomeB.svg │ │ ├── HomePic.svg │ │ ├── LogoSombre.svg │ │ ├── Notification.svg │ │ ├── RightArrow.svg │ │ ├── add.svg │ │ ├── addGreen.svg │ │ ├── arrowLR.svg │ │ ├── arrowP.svg │ │ ├── bluecaree.svg │ │ ├── menu.svg │ │ ├── overview.svg │ │ ├── overviewWhite.svg │ │ ├── pinkcaree.svg │ │ ├── projectPic.svg │ │ ├── search.svg │ │ ├── timer.svg │ │ └── video.svg │ └── images │ │ ├── ProfileB.png │ │ ├── ProjectX.png │ │ ├── admin.png │ │ ├── foldertop.png │ │ ├── foldertop.svg │ │ ├── logo.svg │ │ ├── microsoft.svg │ │ ├── noteLine.svg │ │ └── signup.svg ├── components │ ├── CreateProject.jsx │ ├── CreateWorker.jsx │ ├── FixedNavBar.jsx │ ├── Navbar.jsx │ ├── SideBar.jsx │ └── navbar.css ├── index.css ├── main.jsx ├── pages │ ├── Collaboration.jsx │ ├── Home.jsx │ ├── Login.jsx │ ├── SignUp.jsx │ ├── businessOwner │ │ ├── Activity.jsx │ │ ├── AdminChat.jsx │ │ ├── AdminMain.jsx │ │ ├── AdminOverview.jsx │ │ ├── Analytics.jsx │ │ ├── Calender.jsx │ │ ├── ProjectDetails.jsx │ │ ├── Todo.jsx │ │ ├── components │ │ │ ├── CollaborationCard.jsx │ │ │ ├── FolderCard.jsx │ │ │ ├── ProjectCard.jsx │ │ │ ├── ProjectProgress.jsx │ │ │ ├── Task.jsx │ │ │ └── TaskBar.jsx │ │ └── profileB.jsx │ └── workers │ │ └── workerProfile.jsx ├── redux │ ├── slices │ │ ├── authSlice.js │ │ ├── businessSlice.js │ │ └── projectSlice.js │ └── store.js ├── toasts.jsx └── utils │ └── request.js ├── tailwind.config.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Vite + React 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "inno", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@aldabil/react-scheduler": "^2.7.26", 14 | "@emotion/react": "^11.11.1", 15 | "@emotion/styled": "^11.11.0", 16 | "@mui/material": "^5.15.0", 17 | "@mui/x-charts": "^6.18.3", 18 | "@mui/x-date-pickers": "^6.18.5", 19 | "@reduxjs/toolkit": "^2.0.1", 20 | "aos": "^2.3.4", 21 | "axios": "^1.6.2", 22 | "dayjs": "^1.11.10", 23 | "framer-motion": "^10.16.16", 24 | "react": "^18.2.0", 25 | "react-dom": "^18.2.0", 26 | "react-icons": "^4.12.0", 27 | "react-redux": "^9.0.4", 28 | "react-router-dom": "^6.21.0", 29 | "react-toastify": "^9.1.3", 30 | "redux": "^5.0.0" 31 | }, 32 | "devDependencies": { 33 | "@types/react": "^18.2.43", 34 | "@types/react-dom": "^18.2.17", 35 | "@vitejs/plugin-react": "^4.2.1", 36 | "autoprefixer": "^10.4.16", 37 | "eslint": "^8.55.0", 38 | "eslint-plugin-react": "^7.33.2", 39 | "eslint-plugin-react-hooks": "^4.6.0", 40 | "eslint-plugin-react-refresh": "^0.4.5", 41 | "postcss": "^8.4.32", 42 | "tailwindcss": "^3.3.6", 43 | "vite": "^5.0.8" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .halfTransition { 6 | transition: all 0.6s ease-in-out; 7 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState, useEffect } from 'react' 3 | import { Routes, Route, Navigate , BrowserRouter} from "react-router-dom"; 4 | import './App.css' 5 | import Login from './pages/Login'; 6 | import Home from './pages/Home'; 7 | import SignUp from './pages/SignUp'; 8 | import AdminMain from './pages/businessOwner/AdminMain'; 9 | import Calender from './pages/businessOwner/Calender'; 10 | import AOS from 'aos'; 11 | import 'aos/dist/aos.css'; 12 | import AdminChat from './pages/businessOwner/AdminChat'; 13 | import 'react-toastify/dist/ReactToastify.css'; 14 | import { ToastContainer } from 'react-toastify'; 15 | import Activity from './pages/businessOwner/Activity'; 16 | import Collaboration from './pages/Collaboration' 17 | import Analytics from './pages/businessOwner/Analytics'; 18 | import ProfileB from './pages/businessOwner/profileB'; 19 | import ProjectDetails from './pages/businessOwner/ProjectDetails'; 20 | import { useDispatch, useSelector } from 'react-redux'; 21 | import { GetBusiness , getWorker } from './redux/slices/businessSlice'; 22 | import { fetchProjects } from './redux/slices/projectSlice' 23 | import CreateProject from './components/CreateProject'; 24 | import CreateWorker from './components/CreateWorker'; 25 | 26 | function App() { 27 | useEffect(() => { 28 | AOS.init({ 29 | duration: 1000, // Set the duration of animations (in milliseconds) 30 | once: true, // Only trigger the animation once 31 | }); 32 | }, []); 33 | const routes = [ 34 | { 35 | path : "/", 36 | element : 37 | }, 38 | { 39 | path : "/login", 40 | element : 41 | }, 42 | { 43 | path : "/signup", 44 | element : 45 | }, 46 | { 47 | path : "/admin", 48 | element : 49 | }, { 50 | path : "/analytics", 51 | element : 52 | }, 53 | { 54 | path : "/projectdetails", 55 | element : 56 | }, 57 | { 58 | path : "/profile", 59 | element : 60 | }, 61 | { 62 | path : "/calender", 63 | element : 64 | }, 65 | { 66 | path : "/collaboration", 67 | element : 68 | }, 69 | { 70 | path : "/adminChat", 71 | element : 72 | }, 73 | { 74 | path : "/activity", 75 | element : 76 | } 77 | ] 78 | const dispatch = useDispatch() 79 | const business = useSelector(state => state.business.business) 80 | const workers = useSelector(state => state.business.workers) 81 | const projects = useSelector(state => state.projects.projects) 82 | useEffect(()=>{ 83 | if(!business){ 84 | dispatch(GetBusiness()) 85 | } 86 | },[]) 87 | useEffect(()=>{ 88 | if(business && !workers){ 89 | dispatch(getWorker(business._id)) 90 | } 91 | },[business]) 92 | useEffect(()=>{ 93 | if(business && !projects){ 94 | console.log('normalmo takhdem') 95 | dispatch(fetchProjects(business._id)) 96 | } 97 | },[business]) 98 | const [showCP , setShowCP] = useState(true) ; const showCPHandler = (B) => {setShowCP(B)} 99 | const [showCW , setShowCW] = useState(false) ; const showCWHandler = (B) => {setShowCW(B)} 100 | return ( 101 | 102 | 103 | 104 | 105 | 106 | { 107 | routes.map((route,i)=>{ 108 | return ( 109 | 110 | ) 111 | }) 112 | } 113 | 114 | 115 | ); 116 | } 117 | 118 | export default App 119 | -------------------------------------------------------------------------------- /src/assets/icons/Activity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/ActivityWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/Arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/Calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/CalendarWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/icons/Chat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/Folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/FolderP.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/FolderWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/Form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aceiny/collabOn-frontend/e200352c7b7061f9a4afe7031bc61911495d8332/src/assets/icons/Form.png -------------------------------------------------------------------------------- /src/assets/icons/Graph.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/GraphWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/HomeB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /src/assets/icons/LogoSombre.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/icons/Notification.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/icons/RightArrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/addGreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/arrowLR.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/arrowP.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/bluecaree.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/overview.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/overviewWhite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/pinkcaree.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/timer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icons/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/ProfileB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aceiny/collabOn-frontend/e200352c7b7061f9a4afe7031bc61911495d8332/src/assets/images/ProfileB.png -------------------------------------------------------------------------------- /src/assets/images/ProjectX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aceiny/collabOn-frontend/e200352c7b7061f9a4afe7031bc61911495d8332/src/assets/images/ProjectX.png -------------------------------------------------------------------------------- /src/assets/images/admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aceiny/collabOn-frontend/e200352c7b7061f9a4afe7031bc61911495d8332/src/assets/images/admin.png -------------------------------------------------------------------------------- /src/assets/images/foldertop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aceiny/collabOn-frontend/e200352c7b7061f9a4afe7031bc61911495d8332/src/assets/images/foldertop.png -------------------------------------------------------------------------------- /src/assets/images/foldertop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/images/microsoft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/noteLine.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/images/signup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /src/components/CreateProject.jsx: -------------------------------------------------------------------------------- 1 | import React , {useState , useEffect} from 'react' 2 | import arrow from '../assets/icons/Arrow.svg' 3 | import { useDispatch } from 'react-redux'; 4 | import { createProject } from '../redux/slices/projectSlice'; 5 | const CreateProject = ({show , handler}) => { 6 | const dispatch = useDispatch() 7 | const [name, setName] = useState('') ; const NameHandler = (e) => { setName(e.target.value) } 8 | const [description, setDescription] = useState('') ; const DescriptionHandler = (e) => { setDescription(e.target.value) } 9 | const [projectLeader, setProjectLeader] = useState('') ; const ProjectLeaderHandler = (e) => { setProjectLeader(e.target.value) } 10 | const tags = ["tag1"] 11 | const [budget, setBudget] = useState('') ; const BudgetHandler = (e) => { setBudget(e.target.value) } 12 | const createProjectHandler = () => { 13 | dispatch(createProject({name , description , projectLeader , tags , budget})) 14 | } 15 | useEffect(() => { 16 | const handleOutsideClick = (e) => { 17 | if (show && !e.target.closest('.cpCard')) { 18 | handler(false); 19 | } 20 | }; 21 | 22 | document.addEventListener('click', handleOutsideClick); 23 | 24 | return () => { 25 | document.removeEventListener('click', handleOutsideClick); 26 | }; 27 | }, [show, handler]); 28 | return ( 29 |
30 |
31 |

Create a New project

32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | ) 43 | } 44 | 45 | export default CreateProject -------------------------------------------------------------------------------- /src/components/CreateWorker.jsx: -------------------------------------------------------------------------------- 1 | import React , {useState,useEffect} from 'react' 2 | import arrow from '../assets/icons/Arrow.svg' 3 | import { useDispatch, useSelector } from 'react-redux'; 4 | import { createWorker } from '../redux/slices/businessSlice'; 5 | const CreateWorker = ({show , handler}) => { 6 | const dispatch = useDispatch() 7 | const [name, setName] = useState('') ; const NameHandler = (e) => { setName(e.target.value) } 8 | const [email, setEmail] = useState('') ; const EmailHandler = (e) => { setEmail(e.target.value) } 9 | const [password, setPassword] = useState('') ; const PasswordHandler = (e) => { setPassword(e.target.value) } 10 | const business = useSelector(state => state.business.business) 11 | const createWorkerHandler = () => { 12 | console.log({name , email , password , business : business._id }) 13 | dispatch(createWorker({name , email , password , business : business._id })) 14 | } 15 | useEffect(() => { 16 | const handleOutsideClick = (e) => { 17 | if (show && !e.target.closest('.cwCard')) { 18 | handler(false); 19 | } 20 | }; 21 | 22 | document.addEventListener('click', handleOutsideClick); 23 | 24 | return () => { 25 | document.removeEventListener('click', handleOutsideClick); 26 | }; 27 | }, [show, handler]); 28 | return ( 29 |
30 |
31 |

Create a New worker

32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 |
40 |
41 | ) 42 | } 43 | 44 | export default CreateWorker -------------------------------------------------------------------------------- /src/components/FixedNavBar.jsx: -------------------------------------------------------------------------------- 1 | import search from '../assets/icons/search.svg' 2 | import notification from '../assets/icons/Notification.svg' 3 | import chat from '../assets/icons/Chat.svg' 4 | import adminPic from '../assets/images/admin.png' 5 | import { Link } from 'react-router-dom' 6 | const FixedNavBar = () => { 7 | return ( 8 |
9 |
10 | 11 | 12 |
13 |
14 | 20 | 23 |
24 | 25 |
26 |

i wanna sleep

27 |

bytebyte@estin.dz

28 |
29 |
30 |
31 |
32 | ); 33 | } 34 | 35 | export default FixedNavBar; -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Link } from "react-router-dom"; 3 | import logo from "../assets/icons/LogoSombre.svg"; 4 | const Navbar = () => { 5 | 6 | return ( 7 | <> 8 | 9 | {" "} 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default Navbar -------------------------------------------------------------------------------- /src/components/SideBar.jsx: -------------------------------------------------------------------------------- 1 | import { Link, useLocation } from "react-router-dom"; 2 | import logo from "../assets/images/logo.svg"; 3 | import overview from "../assets/icons/overview.svg"; 4 | import calender from "../assets/icons/Calendar.svg"; 5 | import analytics from "../assets/icons/Graph.svg"; 6 | import activity from "../assets/icons/Activity.svg"; 7 | import projectsIcon from "../assets/icons/Folder.svg"; 8 | import overviewWhite from "../assets/icons/overviewWhite.svg"; 9 | import calenderWhite from "../assets/icons/CalendarWhite.svg"; 10 | import analyticsWhite from "../assets/icons/GraphWhite.svg"; 11 | import activityWhite from "../assets/icons/ActivityWhite.svg"; 12 | import projectsIconWhite from "../assets/icons/FolderWhite.svg"; 13 | import './navbar.css' 14 | 15 | const SideBar = () => { 16 | const {pathname} = useLocation() 17 | const projectsArr = ["project1", "project2", "project3"]; 18 | const routes = [ 19 | { 20 | name : "overview", 21 | image : overview, 22 | focusImage : overviewWhite, 23 | path : "/admin" 24 | }, 25 | { 26 | name : "Calender", 27 | image : calender, 28 | focusImage : calenderWhite, 29 | path : "/calender" 30 | }, 31 | { 32 | name : "Analytics", 33 | image : analytics, 34 | focusImage : analyticsWhite, 35 | path : "/analytics" 36 | }, 37 | { 38 | name : "Activity", 39 | image : activity, 40 | focusImage : activityWhite, 41 | path : "/activity" 42 | }, 43 | { 44 | name : "collaboration", 45 | image : projectsIcon, 46 | focusImage : projectsIconWhite, 47 | path : "/collaboration" 48 | }, 49 | ] 50 | return ( 51 |
52 | 53 |
54 |
    55 | { 56 | routes.map((route,i)=>{ 57 | return ( 58 | 59 | {route.name} 60 | {route.name} 61 | 62 | ) 63 | }) 64 | } 65 |
66 |
67 |
68 |

Projects

69 |
    70 | {projectsArr.map((project) => ( 71 |
  • 72 |
    73 | {project} 74 |
    • 75 | ))} 76 |
77 |
78 | 81 |
82 | ); 83 | }; 84 | 85 | export default SideBar; 86 | /*{ 87 | name : "Projects", 88 | image : projectsIcon, 89 | focusImage : projectsIconWhite, 90 | path : "/projects" 91 | },*/ -------------------------------------------------------------------------------- /src/components/navbar.css: -------------------------------------------------------------------------------- 1 | .active{ 2 | padding: 1rem ; 3 | background-color:#50C878 ; 4 | border-radius: 0.5rem; 5 | color: white; 6 | 7 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | *{ 6 | font-family: 'Poppins'; 7 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | import { BrowserRouter } from 'react-router-dom' 6 | import { Provider } from 'react-redux' 7 | import store from './redux/store.js' 8 | 9 | ReactDOM.createRoot(document.getElementById("root")).render( 10 | 11 | 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /src/pages/Collaboration.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SideBar from '../components/SideBar' 3 | import FixedNavBar from '../components/FixedNavBar' 4 | import CollaborationCard from './businessOwner/components/CollaborationCard' 5 | const Collaboration = () => { 6 | return ( 7 |
8 | 9 | 10 |
11 |
12 |

New Project

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | ) 25 | } 26 | 27 | export default Collaboration -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from '../components/Navbar'; 3 | import { Link } from 'react-router-dom'; 4 | import home from "../assets/icons/HomeB.svg"; 5 | 6 | 7 | const Home = () => { 8 | return ( 9 |
10 | 11 |
12 | 17 |
18 |
19 | 22 | 25 |
26 |
27 |
28 |
29 | ); 30 | } 31 | 32 | export default Home -------------------------------------------------------------------------------- /src/pages/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { login } from "../redux/slices/authSlice"; 3 | import { useDispatch } from "react-redux"; 4 | import { Toast } from "../toasts" 5 | const Login = () => { 6 | const dispatch = useDispatch(); 7 | // State to manage user input 8 | const [email, setEmail] = useState(""); 9 | const [password, setPassword] = useState(""); 10 | 11 | // Function to handle form submission 12 | const handleLogin = (e) => { 13 | e.preventDefault(); 14 | if(email === "" || password === ""){ 15 | Toast("Please fill all fields","error") 16 | return 17 | } 18 | dispatch(login({ email, password })); 19 | }; 20 | 21 | return ( 22 |
23 |

Login

24 |
25 | 26 | setEmail(e.target.value)} 31 | required 32 | /> 33 | 34 | 35 | setPassword(e.target.value)} 40 | required 41 | /> 42 | 43 | 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default Login; 50 | -------------------------------------------------------------------------------- /src/pages/SignUp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Navbar from "../components/Navbar"; 3 | import pic from "../assets/icons/Form.png"; 4 | import arrow from "../assets/icons/Arrow.svg" 5 | import rightarrow from "../assets/icons/RightArrow.svg"; 6 | import { useNavigate } from "react-router-dom"; 7 | import { useDispatch, useSelector } from "react-redux"; 8 | import { signup } from "../redux/slices/authSlice"; 9 | import { CreateBusiness } from "../redux/slices/businessSlice"; 10 | const SignUp = () => { 11 | const navigate=useNavigate() 12 | const dispatch = useDispatch(); 13 | // Separate states for name, email, and password 14 | const handleButtonClick = () => { 15 | 16 | }; 17 | const [businessType, setBusinessType] = useState(""); 18 | 19 | const handleBusinessTypeChange = (e) => { 20 | setBusinessType(e.target.value); 21 | }; 22 | 23 | const [description,setDescription]=useState("") 24 | const [name, setName] = useState(""); 25 | const [email, setEmail] = useState(""); 26 | const [company, setCompany] = useState(""); 27 | const [password, setPassword] = useState(""); 28 | const [currentStep, setCurrentStep] = useState(1); 29 | const [companysize, setCompanysize] = useState(""); 30 | 31 | // Event handler for company size change 32 | const handleCompanysizeChange = (e) => { 33 | setCompanysize(e.target.value); 34 | }; 35 | // Event handlers for input changes 36 | const handleNameChange = (e) => { 37 | setName(e.target.value); 38 | }; 39 | 40 | const handleEmailChange = (e) => { 41 | setEmail(e.target.value); 42 | }; 43 | const handleDescriptionChange = (e) => { 44 | setDescription(e.target.value); 45 | }; 46 | const handleCompanyChange = (e) => { 47 | setCompany(e.target.value); 48 | }; 49 | 50 | const handlePasswordChange = (e) => { 51 | setPassword(e.target.value); 52 | }; 53 | 54 | // Form submission handler 55 | 56 | // Function to handle the "Next" button click 57 | const handleNextClick = () => { 58 | setCurrentStep(currentStep + 1); 59 | }; 60 | //handler signup 61 | const handleSubmit = (e) => { 62 | e.preventDefault(); 63 | // Perform signup logic here using name, email, and password 64 | dispatch(signup({ name, email, password , role : "owner" })); 65 | }; 66 | 67 | const user = useSelector((state)=>state.auth.user) 68 | const token = localStorage.getItem("token") 69 | const handleBusiness = () =>{ 70 | if(company == "" || description == "" || businessType == "" || companysize == "") console.log("zbi") 71 | dispatch(CreateBusiness({name:company,description,industry : businessType,CompanySize : companysize , owner : user._id})) 72 | } 73 | useEffect(()=>{ 74 | if(user){ 75 | handleBusiness() 76 | } 77 | },[user]) 78 | return ( 79 |
80 |
81 | 82 |
83 | 84 |
85 |
86 |
87 | 92 |
93 | {currentStep === 1 && "Unlock Collaborative Success"} 94 | {currentStep === 2 && "Step 2: "} 95 |
96 |
97 | 98 | {currentStep === 1 && ( 99 | <> 100 | 101 | 109 | 110 | 118 | 119 | 127 | 134 | 135 | )} 136 | {currentStep === 2 && ( 137 | <> 138 | 139 | 147 | 148 | 156 | 157 | 165 | 166 | 178 | 185 | 186 | )} 187 |
188 |
189 |
190 | ); 191 | }; 192 | 193 | export default SignUp; 194 | -------------------------------------------------------------------------------- /src/pages/businessOwner/Activity.jsx: -------------------------------------------------------------------------------- 1 | import FixedNavBar from "../../components/FixedNavBar"; 2 | import SideBar from "../../components/SideBar"; 3 | import Task from "./components/Task"; 4 | import noteLine from "../../assets/images/noteLine.svg"; 5 | 6 | const Activity = () => { 7 | return ( 8 |
9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 |
17 |
18 | todo list 19 |
20 |
21 |
22 |
23 | ); 24 | }; 25 | 26 | export default Activity; 27 | 28 | const Tasks = () => { 29 | return ( 30 |
31 | 37 | 43 | 49 |
50 | ); 51 | }; 52 | 53 | const Notes = () => { 54 | return ( 55 |
56 |
57 | Project done 58 | 10 59 |
60 |
61 | 62 |

63 | 10 + more
64 | from last week 65 |

66 |
67 |
68 | ); 69 | }; 70 | -------------------------------------------------------------------------------- /src/pages/businessOwner/AdminChat.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import image from "../../assets/images/microsoft.svg"; 3 | import FixedNavBar from "../../components/FixedNavBar"; 4 | import SideBar from "../../components/SideBar"; 5 | const AdminChat = () => { 6 | const [sentMessage, setSentMessage] = useState("") 7 | const handelChange = (e) => { 8 | setSentMessage(e.target.value) 9 | } 10 | const messageArr = [ 11 | { name: "Microsoft", followers: "3M" }, 12 | { name: "Google", followers: "2M" }, 13 | { name: "Apple", followers: "1M" }, 14 | ]; 15 | const msg = "hey lil nigga" 16 | return ( 17 |
18 | 19 | 20 |
21 |
22 |
23 |
    24 |
  • 25 | All 26 |
    • 27 |
  • Requests
    • 28 |
  • 29 | Collaborations 30 |
    • 31 |
  • Calls
    • 32 |
  • Meets
    • 33 |
34 |
35 | {messageArr.map((message) => ( 36 |
37 | 38 |
39 |

{message.name}

40 |

{message.followers}

41 |
42 |
43 | ))} 44 |
45 |
46 |
47 |
48 | 49 |
50 |

{messageArr[0].name}

51 |

{messageArr[0].followers}

52 |
53 | 54 |
55 |
56 | 57 | 58 | 59 |
60 |
61 |
62 |
63 |
64 | ); 65 | }; 66 | 67 | export default AdminChat; 68 | 69 | 70 | const Message = ({msg, sender }) => { 71 | return ( 72 |
{msg}
73 | ); 74 | } -------------------------------------------------------------------------------- /src/pages/businessOwner/AdminMain.jsx: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from "react-router-dom"; 2 | import FixedNavBar from "../../components/FixedNavBar"; 3 | import SideBar from "../../components/SideBar"; 4 | import AdminOverview from "./AdminOverview"; 5 | import Calender from "./Calender"; 6 | import AdminChat from "./AdminChat"; 7 | 8 | const AdminMain = () => { 9 | return ( 10 |
11 | 12 | 13 |
14 | 15 |
16 |
17 | ); 18 | }; 19 | 20 | export default AdminMain; 21 | -------------------------------------------------------------------------------- /src/pages/businessOwner/AdminOverview.jsx: -------------------------------------------------------------------------------- 1 | import ProjectCard from "./components/ProjectCard"; 2 | import ProjectsProgress from "./components/ProjectProgress"; 3 | import TaskBar from "./components/TaskBar"; 4 | import { useEffect } from "react"; 5 | 6 | const AdminOverview = () => { 7 | 8 | const projectsArray = [ 9 | { 10 | projectNmae: "project 1", 11 | projectId: "1", 12 | projectOverview: "this is the overview of the project", 13 | deadline: "12/12/2021", 14 | projectState: "ongoing", 15 | }, 16 | { 17 | projectNmae: "project 2", 18 | projectId: "2", 19 | projectOverview: "this is the overview of the project", 20 | deadline: "12/12/2021", 21 | projectState: "ongoing", 22 | }, 23 | { 24 | projectNmae: "project 3", 25 | projectId: "3", 26 | projectOverview: "this is the overview of the project", 27 | deadline: "12/12/2021", 28 | projectState: "ongoing", 29 | }, 30 | { 31 | projectNmae: "project 4", 32 | projectId: "4", 33 | projectOverview: "this is the overview of the project", 34 | deadline: "12/12/2021", 35 | projectState: "ongoing", 36 | }, 37 | { 38 | projectNmae: "project 5", 39 | projectId: "5", 40 | projectOverview: "this is the overview of the project", 41 | deadline: "12/12/2021", 42 | projectState: "ongoing", 43 | }, 44 | { 45 | projectNmae: "project 6", 46 | projectId: "6", 47 | projectOverview: "this is the overview of the project", 48 | deadline: "12/12/2021", 49 | projectState: "ongoing", 50 | }, 51 | ]; 52 | return
53 | 54 | 55 | 56 |
57 | 58 | {projectsArray.map((project)=>( 59 | 60 | ))} 61 |
62 | 63 |
; 64 | }; 65 | 66 | export default AdminOverview; 67 | -------------------------------------------------------------------------------- /src/pages/businessOwner/Analytics.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LuUsers } from "react-icons/lu"; 3 | import { BarChart } from '@mui/x-charts/BarChart'; 4 | import { Route, Routes } from "react-router-dom"; 5 | import FixedNavBar from "../../components/FixedNavBar"; 6 | import SideBar from "../../components/SideBar"; 7 | import AdminOverview from "./AdminOverview"; 8 | import Calender from "./Calender"; 9 | import { LineChart } from "@mui/x-charts/LineChart"; 10 | 11 | const Analytics = () => { 12 | return ( 13 | <> 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
452
22 |
23 | 27 |
28 |
29 |
Total Employees
30 |
31 | 32 | + 33 | {" "} 34 | 2 new employees added! 35 |
36 |
37 |
38 |
39 |
452
40 |
41 | 45 |
46 |
47 |
Total Employees
48 |
49 | + 2 new 50 | employees added! 51 |
52 |
53 |
54 |
55 |
452
56 |
57 | 61 |
62 |
63 |
Total Employees
64 |
65 | + 2 new 66 | employees added! 67 |
68 |
69 |
70 |
71 |
452
72 |
73 | 77 |
78 |
79 |
Total Employees
80 |
81 | + 2 new 82 | employees added! 83 |
84 |
85 |
86 |
87 |
88 | 99 |
100 |
102 | 108 |
109 | 110 |
111 | 112 | ); 113 | }; 114 | 115 | export default Analytics; 116 | -------------------------------------------------------------------------------- /src/pages/businessOwner/Calender.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import dayjs from "dayjs"; 3 | import { DemoContainer, DemoItem } from "@mui/x-date-pickers/internals/demo"; 4 | import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; 5 | import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; 6 | import { DateCalendar } from "@mui/x-date-pickers/DateCalendar"; 7 | 8 | import Button from "@mui/material/Button"; 9 | import SideBar from "../../components/SideBar"; 10 | import FixedNavBar from "../../components/FixedNavBar"; 11 | 12 | import { Scheduler } from "@aldabil/react-scheduler"; 13 | 14 | const Calender = () => { 15 | return ( 16 |
17 | 18 | 19 | 20 |
21 |
22 | 39 |
40 | {/*
41 |
42 | 46 | {" "} 50 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
*/} 72 |
73 |
74 | ); 75 | }; 76 | 77 | export default Calender; 78 | -------------------------------------------------------------------------------- /src/pages/businessOwner/ProjectDetails.jsx: -------------------------------------------------------------------------------- 1 | 2 | import SideBar from "../../components/SideBar"; 3 | import FixedNavBar from "../../components/FixedNavBar"; 4 | import { BsArrowReturnRight } from "react-icons/bs"; 5 | import { HiFolderOpen } from "react-icons/hi2"; 6 | import arrow from "../../assets/icons/arrowP.svg" 7 | import arrowLR from "../../assets/icons/arrowLR.svg"; 8 | import folder from "../../assets/icons/FolderP.svg"; 9 | import pcaree from "../../assets/icons/pinkcaree.svg"; 10 | import bcaree from "../../assets/icons/bluecaree.svg"; 11 | import projectpic from "../../assets/icons/projectPic.svg"; 12 | const ProjectDetails = () => { 13 | return ( 14 |
15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |

Cloth

24 |
25 |
26 |
27 | 28 | 29 |

Projects

30 | 31 | 32 |

Team projects

33 | 34 | 35 |

Fashion

36 |
37 |
38 | 39 |
40 |
41 |
42 |
43 | {" "} 44 |
Project name
45 |

46 | dev project and hh 47 |

48 |
49 |
CREATED AT 2023/02/15
50 |
51 |
52 |
53 |
54 |

Overview

55 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, earum. Mollitia saepe at autem suscipit! 56 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi quaerat, odio iure nam facilis excepturi. 57 |

58 |
59 |
60 |
61 |
62 | ); 63 | }; 64 | 65 | export default ProjectDetails; 66 | -------------------------------------------------------------------------------- /src/pages/businessOwner/Todo.jsx: -------------------------------------------------------------------------------- 1 | const TodoList = () => { 2 | const tasks = [] 3 | 4 | return ( 5 |
6 | {tasks.map(task =>( 7 | 8 | ))} 9 | 10 |
11 | ); 12 | } 13 | const miniTask = ({taskContent, taskDate})=>{ 14 | return( 15 |
16 |
17 | 18 | 19 |
20 |

21 |
22 | ) 23 | } 24 | 25 | export default TodoList; -------------------------------------------------------------------------------- /src/pages/businessOwner/components/CollaborationCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const CollaborationCard = () => { 4 | return ( 5 |
6 |
7 | 8 |
9 |
10 |
11 |
12 |
13 |

Cloth

14 |

Small and consices headlin

15 |
16 |
17 |
18 |
19 |
20 | Profitable 21 |
22 | 23 |
24 |
25 |
26 |
27 | ) 28 | } 29 | 30 | export default CollaborationCard -------------------------------------------------------------------------------- /src/pages/businessOwner/components/FolderCard.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import top from '../../../assets/images/foldertop.svg' 3 | 4 | const FolderCard = () => { 5 | return ( 6 |
7 | 8 |

Folder

9 |
10 |

April 12

11 |
12 |
13 | ) 14 | } 15 | 16 | export default FolderCard -------------------------------------------------------------------------------- /src/pages/businessOwner/components/ProjectCard.jsx: -------------------------------------------------------------------------------- 1 | import timer from '../../../assets/icons/timer.svg' 2 | const ProjectCard = ({projectName , projectState, projectOverview, deadline, key} ) => { 3 | return ( 4 |
5 |
6 |

{projectName }

7 | {projectState} 8 |
9 |

{projectOverview}

10 |
11 | 12 |

deadline : {deadline}

13 |
14 |
15 | ); 16 | } 17 | 18 | export default ProjectCard; -------------------------------------------------------------------------------- /src/pages/businessOwner/components/ProjectProgress.jsx: -------------------------------------------------------------------------------- 1 | import projectX from "../../../assets/images/ProjectX.png"; 2 | import profilePic from "../../../assets/images/admin.png"; 3 | import addIcon from "../../../assets/icons/add.svg"; 4 | const ProjectsProgress = () => { 5 | const projectsArr = ["project1", "project2", "project3"]; 6 | return ( 7 |
11 | {projectsArr.map((project, index) => ( 12 |
13 |
14 | 15 |
16 |

ProjectX

17 | 18 |
19 |
20 | 21 |

43% Complete

22 |
23 | 24 | 29 | 32 |
33 |
34 | ))} 35 |
36 | ); 37 | }; 38 | 39 | export default ProjectsProgress; 40 | -------------------------------------------------------------------------------- /src/pages/businessOwner/components/Task.jsx: -------------------------------------------------------------------------------- 1 | import addGreeen from "../../../assets/icons/addGreen.svg" 2 | const Task = ({ color, name, number, add }) => { 3 | return ( 4 |
9 |
10 |

{name}

11 | 12 | {number} 13 | 14 |
15 | {add ? () : " "} 16 |
17 | ); 18 | }; 19 | 20 | export default Task; 21 | -------------------------------------------------------------------------------- /src/pages/businessOwner/components/TaskBar.jsx: -------------------------------------------------------------------------------- 1 | import addGreeen from "../../../assets/icons/addGreen.svg" 2 | import Task from "./Task"; 3 | const TaskBar = () => { 4 | return ( 5 |
6 | 7 | 8 | 9 |
10 | ); 11 | } 12 | 13 | export default TaskBar; -------------------------------------------------------------------------------- /src/pages/businessOwner/profileB.jsx: -------------------------------------------------------------------------------- 1 | import FixedNavBar from "../../components/FixedNavBar"; 2 | import SideBar from "../../components/SideBar"; 3 | import { FaArrowLeft } from "react-icons/fa"; 4 | import adminPic from "../../assets/images/ProfileB.png"; 5 | 6 | const ProfileB = () => { 7 | return ( 8 |
9 | 10 | 11 | 12 |
13 |
14 | 15 |
Profile settings
16 |
17 |
18 |
19 | Mohamed ali
20 | johndoe@example.com 21 |
22 |
Business owner
23 |
24 |
25 |
26 |
27 |
28 | {" "} 29 | 30 |
31 |
32 |
33 | 34 | + 35 | {" "} 36 | Add a new picture 37 |
38 |
39 | 40 | - 41 | {" "} 42 | Delete picture 43 |
44 |
45 |
46 |
47 | 50 | 53 |
54 |
55 |
56 | 59 | 62 |
63 |
64 |
65 |
66 | ); 67 | }; 68 | 69 | export default ProfileB; 70 | -------------------------------------------------------------------------------- /src/pages/workers/workerProfile.jsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aceiny/collabOn-frontend/e200352c7b7061f9a4afe7031bc61911495d8332/src/pages/workers/workerProfile.jsx -------------------------------------------------------------------------------- /src/redux/slices/authSlice.js: -------------------------------------------------------------------------------- 1 | import {createAsyncThunk, createSlice} from '@reduxjs/toolkit'; 2 | import axios from 'axios'; 3 | const api = "https://aceiny.tech:3033" 4 | 5 | const initialState = { 6 | status: 'idle', 7 | error: null, 8 | token: null, 9 | isAuthenticated: localStorage.getItem('token') ? true : false, 10 | isAuthenticating: false, 11 | } 12 | 13 | export const login = createAsyncThunk( 14 | 'auth/login', 15 | async (data) => { 16 | try { 17 | const response = await axios.post(`${api}/auth/login`, data) 18 | return response 19 | }catch(err){ 20 | return err.response 21 | } 22 | } 23 | ) 24 | export const signup = createAsyncThunk( 25 | 'auth/signup', 26 | async (data) => { 27 | try { 28 | const response = await axios.post(`${api}/auth/signup`, data) 29 | return response 30 | }catch(err){ 31 | console.log(err.response) 32 | return err.response 33 | } 34 | } 35 | ) 36 | const authSlice = createSlice({ 37 | name : 'auth', 38 | initialState, 39 | reducers: { 40 | logout(state, action){ 41 | state.isAuthenticated = false 42 | state.user = null 43 | state.token = null 44 | } 45 | }, 46 | extraReducers: (builder) => { 47 | builder 48 | .addCase(login.pending, (state, action) => { 49 | state.isAuthenticating = true 50 | }) 51 | .addCase(login.fulfilled, (state, action) => { 52 | state.isAuthenticating = false 53 | if (action.payload.status === 200) { 54 | state.isAuthenticated = true 55 | localStorage.setItem('token', action.payload.data.token) 56 | state.token = action.payload.data.token 57 | } else { 58 | state.isAuthenticated = false 59 | state.user = null 60 | state.token = null 61 | } 62 | }) 63 | .addCase(signup.pending, (state, action) => { 64 | state.isAuthenticating = true 65 | }) 66 | .addCase(signup.fulfilled, (state, action) => { 67 | state.isAuthenticating = false 68 | if (action.payload.status === 200) { 69 | console.log(action.payload) 70 | state.isAuthenticated = true 71 | localStorage.setItem('token', action.payload.data.token) 72 | state.token = action.payload.data.data 73 | console.log(action.payload.data.user) 74 | state.user = action.payload.data.user 75 | } else { 76 | console.log(action.payload , 'failed') 77 | state.isAuthenticated = false 78 | state.user = null 79 | state.token = null 80 | } 81 | }) 82 | 83 | } 84 | }) 85 | 86 | export const {logout} = authSlice.actions 87 | export default authSlice.reducer -------------------------------------------------------------------------------- /src/redux/slices/businessSlice.js: -------------------------------------------------------------------------------- 1 | import { createAsyncThunk , createSlice } from "@reduxjs/toolkit"; 2 | import axios from "axios"; 3 | import { Toast } from "../../toasts"; 4 | const api = "https://aceiny.tech:3033" 5 | 6 | const initialState = { 7 | business : null, 8 | pendingBusiness : false, 9 | workers : null 10 | } 11 | 12 | export const CreateBusiness = createAsyncThunk( 13 | 'business/create', 14 | async (data) => { 15 | try { 16 | const response = await axios.post(`${api}/business/create`, data) 17 | return response 18 | }catch(err){ 19 | return err.response 20 | } 21 | } 22 | ) 23 | export const GetBusiness = createAsyncThunk( 24 | 'business/get', 25 | async (data) => { 26 | try { 27 | const response = await axios.get(`${api}/business/`, {headers: {token: localStorage.getItem('token')}}) 28 | return response 29 | }catch(err){ 30 | return err.response 31 | } 32 | } 33 | 34 | ) 35 | export const getWorker = createAsyncThunk( 36 | 'business/getWorkers', 37 | async (id) => { 38 | try { 39 | const response = await axios.get(`${api}/business/workers/${id}`, ) 40 | return response 41 | }catch(err){ 42 | return err.response 43 | } 44 | } 45 | ) 46 | export const createWorker = createAsyncThunk( 47 | 'business/createWorker', 48 | async (data) => { 49 | try { 50 | const response = await axios.post(`${api}/business/worker/create`, data) 51 | return response 52 | }catch(err){ 53 | return err.response 54 | } 55 | } 56 | ) 57 | const businessSlice = createSlice( 58 | { 59 | name : 'business', 60 | initialState, 61 | reducers : { 62 | 63 | }, 64 | extraReducers : (builder) => { 65 | builder 66 | .addCase(CreateBusiness.pending, (state, action) => { 67 | state.pendingBusiness = true 68 | }) 69 | .addCase(CreateBusiness.fulfilled, (state, action) => { 70 | state.pendingBusiness = false 71 | if (action.payload.status === 200) { 72 | state.business = action.payload.data 73 | Toast("welcome enjoy the stay","success") 74 | }else { 75 | Toast("something Went wrong","error") 76 | } 77 | }) 78 | .addCase(GetBusiness.pending, (state, action) => { 79 | state.pendingBusiness = true 80 | }) 81 | .addCase(GetBusiness.fulfilled, (state, action) => { 82 | state.pendingBusiness = false 83 | console.log(action.payload) 84 | if (action.payload.status === 200) { 85 | state.business = action.payload.data.data 86 | }else { 87 | //else logique 88 | } 89 | }) 90 | .addCase(createWorker.pending, (state, action) => { 91 | state.pendingBusiness = true 92 | }) 93 | .addCase(createWorker.fulfilled, (state, action) => { 94 | state.pendingBusiness = false 95 | console.log(action.payload) 96 | if (action.payload.status === 200) { 97 | state.business = action.payload.data 98 | Toast('worker created','success') 99 | }else { 100 | //else logique 101 | } 102 | }) 103 | .addCase(getWorker.pending, (state, action) => { 104 | state.pendingBusiness = true 105 | }) 106 | .addCase(getWorker.fulfilled, (state, action) => { 107 | state.pendingBusiness = false 108 | console.log(action.payload) 109 | if (action.payload.status === 200) { 110 | state.workers = action.payload.data.data 111 | }else { 112 | //else logique 113 | } 114 | }) 115 | 116 | } 117 | } 118 | ) 119 | export default businessSlice.reducer -------------------------------------------------------------------------------- /src/redux/slices/projectSlice.js: -------------------------------------------------------------------------------- 1 | import {createAsyncThunk, createSlice} from '@reduxjs/toolkit'; 2 | import axios from 'axios'; 3 | import { Toast } from '../../toasts'; 4 | const api = "https://aceiny.tech:3033" 5 | 6 | const initialState = { 7 | projects : null, 8 | fetchinProjects : false 9 | } 10 | export const createProject = createAsyncThunk( 11 | 'project/createProject', 12 | async (data) => { 13 | try { 14 | const response = await axios.post(`${api}/projects/create`, data , {headers: {token: localStorage.getItem('token')}}) 15 | return response 16 | }catch(err){ 17 | return err.response 18 | } 19 | } 20 | 21 | ) 22 | export const fetchProjects = createAsyncThunk( 23 | 'project/fetchProjects', 24 | async (id) => { 25 | try { 26 | const response = await axios.get(`${api}/projects/business/${id}`, {headers: {token: localStorage.getItem('token')}}) 27 | return response 28 | }catch(err){ 29 | return err.response 30 | } 31 | } 32 | ) 33 | const projectSlice = createSlice({ 34 | name : 'project', 35 | initialState, 36 | reducers: { 37 | 38 | }, 39 | extraReducers: (builder) => { 40 | builder 41 | .addCase(fetchProjects.pending, (state, action) => { 42 | state.fetchinProjects = true 43 | }) 44 | .addCase(fetchProjects.fulfilled, (state, action) => { 45 | console.log(action.payload) 46 | state.fetchinProjects = false 47 | state.projects = action.payload.data.data 48 | 49 | }) 50 | .addCase(createProject.pending, (state, action) => { 51 | state.fetchinProjects = true 52 | }) 53 | .addCase(createProject.fulfilled, (state, action) => { 54 | state.fetchinProjects = false 55 | if(action.payload.status === 200){ 56 | Toast('Project Created Successfully','success') 57 | } 58 | else { 59 | Toast('Error Creating Project','error') 60 | } 61 | }) 62 | } 63 | }) 64 | 65 | export default projectSlice.reducer -------------------------------------------------------------------------------- /src/redux/store.js: -------------------------------------------------------------------------------- 1 | import {configureStore} from "@reduxjs/toolkit" 2 | import authReducer from "./slices/authSlice" 3 | import businessReducer from './slices/businessSlice' 4 | import projectReducer from './slices/projectSlice' 5 | const store =configureStore({ 6 | reducer:{ 7 | auth:authReducer, 8 | business:businessReducer, 9 | projects:projectReducer 10 | } 11 | }) 12 | export default store -------------------------------------------------------------------------------- /src/toasts.jsx: -------------------------------------------------------------------------------- 1 | import { toast } from "react-toastify" 2 | 3 | export const Toast = (message,type) => { 4 | if(type === 'success'){ 5 | return toast.success(message, { 6 | position: "top-center", 7 | autoClose: 5000, 8 | hideProgressBar: false, 9 | closeOnClick: true, 10 | pauseOnHover: true, 11 | draggable: true, 12 | progress: undefined, 13 | theme: "light", 14 | }); 15 | } 16 | if(type === 'error'){ 17 | return toast.error(message, { 18 | position: "top-center", 19 | autoClose: 5000, 20 | hideProgressBar: false, 21 | closeOnClick: true, 22 | pauseOnHover: true, 23 | draggable: true, 24 | progress: undefined, 25 | theme: "light", 26 | }); 27 | } 28 | if(type === 'info'){ 29 | return toast.info(message, { 30 | position: "top-center", 31 | autoClose: 5000, 32 | hideProgressBar: false, 33 | closeOnClick: true, 34 | pauseOnHover: true, 35 | draggable: true, 36 | progress: undefined, 37 | theme: "light", 38 | }); 39 | } 40 | } -------------------------------------------------------------------------------- /src/utils/request.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const request = axios.create({ 4 | baseURL: "http://localhost:8000", 5 | }); 6 | export default request -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: { 6 | colors: { 7 | "primaryGreen": "#50C878", 8 | "sombre": "#333333", 9 | "input":"#F1E6E6" 10 | 11 | }, 12 | fontFamily: { 13 | poppins: ["Poppins", "sans"], 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | }; 19 | -------------------------------------------------------------------------------- /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 | }) 8 | --------------------------------------------------------------------------------