├── src ├── components │ ├── 404 │ │ └── 404.jsx │ ├── user │ │ ├── Navbar │ │ │ └── Navbar.css │ │ ├── categorylist.css │ │ ├── servicesPage │ │ │ └── ServicesPage.js │ │ ├── home │ │ │ ├── home.css │ │ │ ├── specialCards.jsx │ │ │ └── home.js │ │ ├── advt │ │ │ └── advt.jsx │ │ ├── Chat │ │ │ └── chatButton.jsx │ │ ├── Hero │ │ │ ├── hero.jsx │ │ │ └── hero.css │ │ ├── login │ │ │ ├── login.css │ │ │ ├── login.jsx │ │ │ └── Register.js │ │ ├── payment │ │ │ └── Payment.jsx │ │ ├── Categorylist.jsx │ │ ├── Ratings │ │ │ └── Ratings.jsx │ │ ├── Profile │ │ │ └── profile.jsx │ │ ├── Bookings │ │ │ ├── Bookings.jsx │ │ │ └── BookingDetails.jsx │ │ ├── singleservice │ │ │ └── SingleService.jsx │ │ ├── BookNow │ │ │ └── BookNow.jsx │ │ ├── ServiceCard │ │ │ └── ServiceCard.jsx │ │ ├── Footer │ │ │ └── Footer.jsx │ │ └── Checkouts │ │ │ ├── Address.jsx │ │ │ └── TimeShedule.jsx │ ├── admin │ │ ├── Support │ │ │ ├── Support.jsx │ │ │ ├── chatSidebar.jsx │ │ │ └── chat.jsx │ │ ├── Services │ │ │ ├── Services.css │ │ │ ├── addservice.css │ │ │ └── addServices.jsx │ │ ├── Dashboard │ │ │ ├── table.jsx │ │ │ ├── dashboard.jsx │ │ │ ├── chart.jsx │ │ │ ├── columnChart.jsx │ │ │ └── StatCard.jsx │ │ ├── Login │ │ │ ├── login.css │ │ │ └── login.js │ │ ├── Media │ │ │ ├── Banner.jsx │ │ │ ├── Advertisement.jsx │ │ │ ├── EditMedia │ │ │ │ ├── Advt.jsx │ │ │ │ ├── banner.jsx │ │ │ │ └── Cards.jsx │ │ │ └── MediaCards.jsx │ │ ├── City │ │ │ ├── addCity.jsx │ │ │ └── city.jsx │ │ ├── category │ │ │ ├── addCategory.jsx │ │ │ ├── editCategory.jsx │ │ │ └── Category.jsx │ │ ├── users │ │ │ └── users.jsx │ │ ├── Bookings │ │ │ └── bookings.jsx │ │ └── AdminNavbar │ │ │ └── AdminNavbar.jsx │ ├── Provider │ │ ├── register.css │ │ ├── Bookings │ │ │ ├── Upcoming.jsx │ │ │ ├── Completed.jsx │ │ │ ├── Requests.jsx │ │ │ └── BookingCards.jsx │ │ ├── dashboard.jsx │ │ ├── login.jsx │ │ ├── sidebar.jsx │ │ ├── Profile │ │ │ └── Profile.jsx │ │ └── Navbar.jsx │ ├── Loader.jsx │ └── comfirmations │ │ ├── Deleteservice.jsx │ │ ├── DeleteCategory.jsx │ │ ├── DeleteCity.jsx │ │ ├── BlockUser.jsx │ │ └── StartJobModal.jsx ├── config │ └── config.js ├── index.css ├── axios.js ├── redux │ ├── Slice │ │ ├── userSlice.js │ │ ├── serviceSlice.js │ │ ├── locationSlice.js │ │ ├── serviceEditSlice.js │ │ └── cartSlice.js │ └── Store.js ├── index.js ├── App.css ├── Auth │ ├── userAuth.jsx │ ├── adminAuth.jsx │ └── providerAuth.jsx ├── App.js ├── validateForm.js ├── Api │ ├── providerAPI.js │ └── userAPI.js └── Routes │ ├── providerRoute.jsx │ ├── adminRoute.jsx │ └── userRoute.jsx ├── public ├── _redirects ├── favicon.ico └── index.html ├── postcss.config.js ├── .env ├── tailwind.config.js ├── .gitignore ├── package.json └── README.md /src/components/user/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/admin/Support/Support.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | /admin/* /index.html 200 3 | /provider/* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhammedsouban/QuickServe-frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /src/config/config.js: -------------------------------------------------------------------------------- 1 | const BASE_URL = 'https://quickserve-backend-production.up.railway.app'; 2 | export default BASE_URL; 3 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | API_BASE_URL= '${BASE_URL}' 2 | RAZORPAY_API_KEY="rzp_test_FtVK05Td5kBCzd" 3 | RAZORPAY_API_SECRET='PEYuPWhyBGcmOWSl2MmWPpVW' -------------------------------------------------------------------------------- /src/components/user/categorylist.css: -------------------------------------------------------------------------------- 1 | .slick-prev:before { 2 | color: black; 3 | } 4 | .slick-next:before { 5 | color: black; 6 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | background-color: #E8F5FF; 7 | min-height: 100vh; 8 | } 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./src/**/*.{js,jsx,ts,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [ 8 | require('tailwind-scrollbar') 9 | ], 10 | }; -------------------------------------------------------------------------------- /src/components/admin/Services/Services.css: -------------------------------------------------------------------------------- 1 | .modal-overlay { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | background-color: rgba(0, 0, 0, 0.7); 8 | display: flex; 9 | z-index: 10; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /src/components/user/servicesPage/ServicesPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ServiceCard from '../ServiceCard/ServiceCard'; 3 | import CategorySlider from '../Categorylist' 4 | function ServicesPage() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ) 11 | } 12 | 13 | export default ServicesPage -------------------------------------------------------------------------------- /src/axios.js: -------------------------------------------------------------------------------- 1 | import BASE_URL from "./config/config"; 2 | 3 | import Axios from "axios"; 4 | 5 | const Axiosuser = Axios.create({ 6 | baseURL: BASE_URL, 7 | }); 8 | 9 | const Axiosadmin = Axios.create({ 10 | baseURL: `${BASE_URL}/admin/`, 11 | }); 12 | 13 | const AxiosProvider = Axios.create({ 14 | baseURL: `${BASE_URL}/provider/` 15 | }) 16 | 17 | export { Axiosuser, Axiosadmin, AxiosProvider }; -------------------------------------------------------------------------------- /src/components/404/404.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import BASE_URL from '../../config/config'; 3 | 4 | function Error() { 5 | return ( 6 |
7 | 12 |
13 | ); 14 | } 15 | 16 | export default Error; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /src/components/user/home/home.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | position: sticky; 4 | top: 0; 5 | justify-content: space-between; 6 | background: linear-gradient(45deg, #000235, #020073); 7 | } 8 | 9 | .sidebar { 10 | background: linear-gradient(180deg, #000235, #020073); 11 | /* width: 300px; */ 12 | 13 | } 14 | 15 | /* @media (max-width:400px){ 16 | .sidebar { 17 | width: 50px; 18 | 19 | } 20 | } */ 21 | -------------------------------------------------------------------------------- /src/components/Provider/register.css: -------------------------------------------------------------------------------- 1 | .Register-container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | overflow-y: scroll; 6 | background-color: #E8F5FF; 7 | height: 85vh; 8 | scrollbar-width: thin; 9 | scrollbar-color: transparent transparent; 10 | } 11 | 12 | .Register-center { 13 | width: 100%; 14 | max-width: 800px; 15 | padding: 2rem; 16 | height: 100%; 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/redux/Slice/userSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | data: [] 5 | }; 6 | 7 | const userSlice = createSlice({ 8 | name: "user", 9 | initialState, 10 | reducers: { 11 | userData: (state, action) => { 12 | const { field, value } = action.payload; 13 | state[field] = value; 14 | }, 15 | resetUserState: () => initialState 16 | } 17 | }); 18 | 19 | export const { userData, resetUserState } = userSlice.actions; 20 | export default userSlice.reducer; 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { Provider } from "react-redux"; 6 | import { PersistGate } from "redux-persist/integration/react"; 7 | import { store, persistor } from "./redux/Store"; 8 | 9 | const root = ReactDOM.createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /src/redux/Slice/serviceSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | servicename: "", 5 | category: "", 6 | description: "", 7 | serviceincludes: "", 8 | price: '', 9 | image: '' 10 | }; 11 | 12 | const serviceSlice = createSlice({ 13 | name: "service", 14 | initialState, 15 | reducers: { 16 | addService: (state, action) => { 17 | const { field, value } = action.payload; 18 | state[field] = value; 19 | }, 20 | }, 21 | }); 22 | 23 | export const { addService } = serviceSlice.actions; 24 | export default serviceSlice.reducer; 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | QuickServe 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/user/advt/advt.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom' 3 | import BASE_URL from '../../../config/config'; 4 | function Advt({ data }) { 5 | return ( 6 |
7 |
8 | 9 | advt 14 | 15 |
16 |
17 | ); 18 | } 19 | 20 | export default Advt; 21 | -------------------------------------------------------------------------------- /src/components/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThreeCircles } from 'react-loader-spinner'; 3 | 4 | const Loader = () => { 5 | return ( 6 |
7 |
8 | 15 |
16 |
17 | ); 18 | }; 19 | 20 | export default Loader; 21 | -------------------------------------------------------------------------------- /src/redux/Slice/locationSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | data: { 5 | city:'', 6 | data:[] 7 | } 8 | }; 9 | 10 | const locationSlice = createSlice({ 11 | name: "location", 12 | initialState, 13 | reducers: { 14 | Location: (state, action) => { 15 | const { field, value } = action.payload; 16 | state.data[field] = value; 17 | 18 | }, UpdateCity: (state, action) => { 19 | state.data = { ...state.data, city: action.payload }; 20 | } 21 | }, 22 | }); 23 | 24 | export const { Location,UpdateCity } = locationSlice.actions; 25 | export default locationSlice.reducer; 26 | -------------------------------------------------------------------------------- /src/components/user/Chat/chatButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3 | import { faComments } from '@fortawesome/free-solid-svg-icons'; 4 | import Chat from './chat'; 5 | 6 | const ChatButton = ({action}) => { 7 | return ( 8 | <> 9 |
10 | 13 |
14 | 15 | ); 16 | }; 17 | 18 | export default ChatButton; 19 | -------------------------------------------------------------------------------- /src/redux/Slice/serviceEditSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | servicename: "", 5 | category: "", 6 | description: "", 7 | serviceincludes: "", 8 | price: "", 9 | image: "", 10 | }; 11 | 12 | const serviceEditSlice = createSlice({ 13 | name: "editservice", 14 | initialState, 15 | reducers: { 16 | EditService: (state, action) => { 17 | const { field, value } = action.payload; 18 | state[field] = value; 19 | }, 20 | UpdateService: (state, action) => { 21 | return initialState; 22 | }, 23 | }, 24 | }); 25 | 26 | export const { EditService, UpdateService } = serviceEditSlice.actions; 27 | export default serviceEditSlice.reducer; 28 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/user/Hero/hero.jsx: -------------------------------------------------------------------------------- 1 | import './hero.css' 2 | 3 | import React from 'react' 4 | import BASE_URL from '../../../config/config' 5 | import { Link } from 'react-router-dom' 6 | function Hero({data}) { 7 | return ( 8 | <> 9 |
10 | 12 | 13 |
14 |

Bringing skilled Professionals To You

15 | 16 | 17 | 18 |
19 |
20 | 21 | ) 22 | } 23 | 24 | export default Hero -------------------------------------------------------------------------------- /src/Auth/userAuth.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { useLocation, Navigate, Outlet } from 'react-router-dom'; 3 | import Loader from '../components/Loader'; 4 | 5 | function UserAuth() { 6 | const user = localStorage.getItem("userToken"); 7 | const location = useLocation(); 8 | const [isLoading, setIsLoading] = useState(true); 9 | 10 | useEffect(() => { 11 | const timer = setTimeout(() => { 12 | setIsLoading(false); 13 | }, 1000); 14 | 15 | return () => clearTimeout(timer); 16 | }, []); 17 | 18 | if (isLoading) { 19 | return ; 20 | } else { 21 | return ( 22 | user ? 23 | : 24 | ); 25 | } 26 | } 27 | 28 | export default UserAuth -------------------------------------------------------------------------------- /src/Auth/adminAuth.jsx: -------------------------------------------------------------------------------- 1 | import { useLocation, Navigate, Outlet } from 'react-router-dom'; 2 | import { useState, useEffect } from 'react'; 3 | import Loader from '../components/Loader'; 4 | 5 | 6 | function AdminAuth() { 7 | const [isLoading, setIsLoading] = useState(true); 8 | const admin = localStorage.getItem("token"); 9 | const location = useLocation(); 10 | 11 | useEffect(() => { 12 | const timer = setTimeout(() => { 13 | setIsLoading(false); 14 | }, 1000); 15 | 16 | return () => clearTimeout(timer); 17 | }, []); 18 | 19 | if (isLoading) { 20 | return ; 21 | }else{ 22 | return ( 23 | admin ? 24 | : 25 | 26 | ); 27 | } 28 | 29 | } 30 | 31 | export default AdminAuth -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 2 | 3 | import "./App.css"; 4 | import ProviderRoute from "./Routes/providerRoute"; 5 | import UserRoute from "./Routes/userRoute"; 6 | import AdminRoute from "./Routes/adminRoute"; 7 | import { Toaster } from "react-hot-toast"; 8 | import Error from "./components/404/404"; 9 | 10 | function App() { 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | } /> 18 | } /> 19 | } /> 20 | {/* } /> */} 21 | 22 | 23 | 24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /src/Auth/providerAuth.jsx: -------------------------------------------------------------------------------- 1 | import { useLocation, Navigate, Outlet } from 'react-router-dom'; 2 | import Loader from '../components/Loader'; 3 | import { useEffect, useState } from 'react'; 4 | function ProviderAuth() { 5 | const provider = localStorage.getItem("ProviderToken"); 6 | const location = useLocation(); 7 | const [isLoading, setIsLoading] = useState(true); 8 | 9 | useEffect(() => { 10 | const timer = setTimeout(() => { 11 | setIsLoading(false); 12 | }, 1000); 13 | 14 | return () => clearTimeout(timer); 15 | }, []); 16 | 17 | if (isLoading) { 18 | return ; 19 | } else { 20 | return ( 21 | provider ? 22 | : 23 | 24 | ); 25 | } 26 | } 27 | 28 | export default ProviderAuth -------------------------------------------------------------------------------- /src/components/Provider/Bookings/Upcoming.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState,useEffect } from 'react' 2 | import BookingsCard from './BookingCards'; 3 | import { acceptRequest, bookingRequests, upcoming } from '../../../Api/providerAPI'; 4 | 5 | function Upcoming() { 6 | 7 | const headers = { Authorization: `Bearer ${localStorage.getItem('ProviderToken')}` }; 8 | 9 | const [booking, setBooking] = useState([]) 10 | const [action,setAction]=useState(false) 11 | useEffect(() => { 12 | upcoming(headers).then((res) => { 13 | setBooking(res.data); 14 | }); 15 | }, [action]); 16 | 17 | const handleAction=(()=>{ 18 | setAction(true) 19 | }) 20 | 21 | return ( 22 | <> 23 | 24 | 25 | ) 26 | } 27 | 28 | export default Upcoming -------------------------------------------------------------------------------- /src/validateForm.js: -------------------------------------------------------------------------------- 1 | export const validatePassword = (password) => { 2 | const uppercaseRegex = /[A-Z]/; 3 | const symbolRegex = /[!@#$%^&*()]/; 4 | const numberRegex = /[0-9]/; 5 | 6 | if (password.length < 6) { 7 | return false; 8 | } 9 | 10 | if (!uppercaseRegex.test(password)) { 11 | return false; 12 | } 13 | 14 | if (!symbolRegex.test(password)) { 15 | return false; 16 | } 17 | 18 | if (!numberRegex.test(password)) { 19 | return false; 20 | } 21 | 22 | return true; 23 | }; 24 | 25 | export const validateEmail = (email) => { 26 | const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 27 | return emailRegex.test(email); 28 | }; 29 | 30 | export const validateMobileNumber = (mobileNumber) => { 31 | const mobileRegex = /^\d{10}$/; 32 | return mobileRegex.test(mobileNumber); 33 | }; -------------------------------------------------------------------------------- /src/components/user/login/login.css: -------------------------------------------------------------------------------- 1 | .form{ 2 | background-color: white; 3 | border-radius: 5px; 4 | width: 550px; 5 | margin: 20px auto; 6 | padding: 20px; 7 | /* height: 600px; */ 8 | } 9 | 10 | .form-body{ 11 | text-align: left; 12 | padding: 20px 10px; 13 | } 14 | 15 | .form-body > *{ 16 | padding: 5px; 17 | } 18 | 19 | .form__label{ 20 | width: 40%; 21 | } 22 | 23 | .form_input{ 24 | width: 60%; 25 | } 26 | 27 | .footer{ 28 | text-align: center; 29 | } 30 | /* 31 | .Register-container { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | overflow-y: scroll; 36 | background-color: #fff; 37 | height: 100vh; 38 | scrollbar-width: thin; 39 | scrollbar-color: transparent transparent; 40 | } 41 | 42 | .Register-center { 43 | width: 100%; 44 | max-width: fit-content; 45 | padding: 2rem; 46 | height: 100%; 47 | } */ 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/components/Provider/Bookings/Completed.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState,useEffect } from 'react' 2 | import BookingsCard from './BookingCards'; 3 | import { acceptRequest, bookingRequests, completed, upcoming } from '../../../Api/providerAPI'; 4 | 5 | function Completed() { 6 | 7 | const headers = { Authorization: `Bearer ${localStorage.getItem('ProviderToken')}` }; 8 | 9 | const [booking, setBooking] = useState([]) 10 | useEffect(() => { 11 | completed(headers).then((res) => { 12 | setBooking(res.data); 13 | }); 14 | }, []); 15 | const handleAccept = ((services, booking) => { 16 | 17 | const data = { 18 | services: services, 19 | bookingId: booking 20 | } 21 | acceptRequest(data, headers) 22 | }) 23 | 24 | 25 | return ( 26 | <> 27 | 28 | 29 | ) 30 | } 31 | 32 | export default Completed -------------------------------------------------------------------------------- /src/redux/Store.js: -------------------------------------------------------------------------------- 1 | import { configureStore, combineReducers } from "@reduxjs/toolkit"; 2 | import { persistReducer, persistStore } from "redux-persist"; 3 | import storage from "redux-persist/lib/storage"; 4 | 5 | import userReducer from "./Slice/userSlice"; 6 | import serviceReducer from "./Slice/serviceSlice"; 7 | import ServiceEditReducer from "./Slice/serviceEditSlice"; 8 | import cartReducer from "./Slice/cartSlice"; 9 | import locationReducer from "./Slice/locationSlice"; 10 | const persistConfig = { 11 | key: "root", 12 | storage, 13 | whitelist: ["user","location"], 14 | }; 15 | 16 | const rootReducer = combineReducers({ 17 | service: serviceReducer, 18 | editservice: ServiceEditReducer, 19 | user: userReducer, 20 | cart:cartReducer, 21 | location:locationReducer 22 | }); 23 | 24 | const persistedReducer = persistReducer(persistConfig, rootReducer); 25 | 26 | const store = configureStore({ 27 | reducer: persistedReducer, 28 | }); 29 | 30 | const persistor = persistStore(store); 31 | 32 | export { store, persistor }; 33 | -------------------------------------------------------------------------------- /src/components/Provider/Bookings/Requests.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import BookingsCard from './BookingCards'; 3 | import { acceptRequest, bookingRequests } from '../../../Api/providerAPI'; 4 | import { toast } from 'react-hot-toast'; 5 | 6 | function Requests() { 7 | 8 | const headers = { Authorization: `Bearer ${localStorage.getItem('ProviderToken')}` }; 9 | 10 | const [booking, setBooking] = useState([]) 11 | const [action, setAction] = useState(false) 12 | useEffect(() => { 13 | bookingRequests(headers).then((res) => { 14 | setBooking(res.data); 15 | }); 16 | }, [action]); 17 | 18 | const handleAccept = ((services, booking) => { 19 | const data = { 20 | services: services, 21 | bookingId: booking 22 | } 23 | acceptRequest(data, headers).then((res) => { 24 | toast.success('Booking accepted Successfully') 25 | setAction(true) 26 | }) 27 | 28 | }) 29 | 30 | 31 | return ( 32 | <> 33 | 34 | 35 | ) 36 | } 37 | 38 | export default Requests -------------------------------------------------------------------------------- /src/components/user/home/specialCards.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | // import { StarIcon, HeartIcon } from '@heroicons/react/solid'; 4 | import BASE_URL from '../../../config/config'; 5 | 6 | const MyCard = ({ data }) => { 7 | return ( 8 | <> 9 |
10 |

{data?.title}

11 |
12 |
13 |
14 | {data?.images.length > 0 ? ( 15 | data.images.map((service) => ( 16 |
17 | Service 22 |
23 | )) 24 | ) : ( 25 | '' 26 | )} 27 |
28 |
29 | 30 | ); 31 | }; 32 | 33 | export default MyCard; 34 | -------------------------------------------------------------------------------- /src/components/user/Hero/hero.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | position: relative; 3 | height: 500px; 4 | } 5 | 6 | .hero img { 7 | object-fit: cover; 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | .hero-text { 13 | position: absolute; 14 | top: 50%; 15 | left: 30%; 16 | transform: translate(-30%, -50%); 17 | color: rgb(0, 0, 0); 18 | text-align: start; 19 | } 20 | 21 | .hero-text h1 { 22 | font-size: 48px; 23 | margin-bottom: 10px; 24 | width: 70%; 25 | } 26 | 27 | .hero-text button { 28 | display: inline-block; 29 | padding: 7px 40px; 30 | background-color: #000000; 31 | color: white; 32 | font-size: 20px; 33 | text-transform: uppercase; 34 | border-radius: 13px; 35 | transition: background-color 0.3s ease; 36 | } 37 | 38 | .hero-text a:hover { 39 | background-color: #ffffff; 40 | color: #000000; 41 | } 42 | 43 | /* Media Queries for Responsive Font Sizes */ 44 | 45 | @media (max-width: 915px) { 46 | .hero-text h1 { 47 | font-size: 36px; 48 | width: 80%; 49 | 50 | 51 | } 52 | 53 | .hero-text input { 54 | font-size: 16px; 55 | } 56 | } 57 | 58 | @media (max-width: 480px) { 59 | .hero-text h1 { 60 | font-size: 24px; 61 | width: 100%; 62 | } 63 | 64 | .hero-text input { 65 | font-size: 14px; 66 | } 67 | } -------------------------------------------------------------------------------- /src/components/admin/Support/chatSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | 3 | const Sidebar = ({ Users, selectuser }) => { 4 | 5 | const userSelect = (userId,username) => { 6 | selectuser(userId,username); 7 | }; 8 | 9 | return ( 10 |
11 |
12 |
    13 |
  • QuickServe
    • 14 |
  • Support Panel
    • 15 |
16 |
17 |
    18 | {Users && 19 | Users.map((item) => ( 20 |
  • userSelect(item._id,item.username)} 23 | className="flex items-center my-2 py-2 mr-2 rounded-r-lg bg-black text-white" 24 | > 25 | Profile 30 | {item.username} 31 |
    • 32 | ))} 33 |
34 |
35 | 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default Sidebar; 42 | -------------------------------------------------------------------------------- /src/Api/providerAPI.js: -------------------------------------------------------------------------------- 1 | import { AxiosProvider } from "../axios"; 2 | 3 | export const Register = async (formData) => { 4 | const res = await AxiosProvider.post('/register', formData) 5 | return res 6 | } 7 | export const Login = async (email, password) => { 8 | const res = await AxiosProvider.post('/login', { email, password }) 9 | return res 10 | } 11 | export const bookingRequests = async (headers) => { 12 | const res = await AxiosProvider.get('/bookingRequests', { headers }) 13 | return res 14 | } 15 | 16 | export const getProviderprofile = async (headers) => { 17 | const res = await AxiosProvider.get('/profile', { headers }) 18 | return res 19 | } 20 | export const acceptRequest = async (data, headers) => { 21 | const res = await AxiosProvider.put('/acceptBooking', { data }, { headers }) 22 | return res 23 | } 24 | 25 | export const upcoming = async (headers) => { 26 | const res = await AxiosProvider.get('/upcoming', { headers }) 27 | return res 28 | } 29 | 30 | export const completed = async (headers) => { 31 | const res = await AxiosProvider.get('/completed', { headers }) 32 | return res 33 | } 34 | 35 | export const startJob = async (data, headers) => { 36 | const res = await AxiosProvider.post('/start-job', { data }, { headers }) 37 | return res 38 | } 39 | 40 | export const providerDashboard = async (headers) => { 41 | const res = await AxiosProvider.get('/dashboard', { headers }) 42 | return res 43 | } -------------------------------------------------------------------------------- /src/components/user/home/home.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import "../../../components/user/home/home.css"; 3 | import Hero from "../Hero/hero"; 4 | import CategorySlider from "../Categorylist"; 5 | import MyCard from "./specialCards"; 6 | import Advt from "../advt/advt"; 7 | import { getMedia } from "../../../Api/userAPI"; 8 | import Loader from "../../Loader"; 9 | function Home() { 10 | const [media, setMedia] = useState(null); 11 | const [loading, setLoading] = useState(true); 12 | 13 | useEffect(() => { 14 | const fetchMedia = async () => { 15 | try { 16 | await getMedia().then(response => { 17 | setMedia(response.data); 18 | setLoading(false) 19 | }); 20 | } catch (error) { 21 | console.log(error); 22 | } 23 | }; 24 | 25 | fetchMedia(); 26 | }, []); 27 | 28 | return ( 29 | <> 30 | {loading ? 31 | 32 | :
33 | {media && ( 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 | )} 46 |
} 47 | 48 | ); 49 | } 50 | 51 | export default Home; 52 | -------------------------------------------------------------------------------- /src/components/admin/Dashboard/table.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import moment from 'moment'; 3 | 4 | const DashboardTable = ({ value }) => { 5 | 6 | return ( 7 |
8 |

Upcoming Bookings

9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {value && value.length > 0 ? ( 20 | value.map((booking) => ( 21 | 22 | {booking.services.map((service) => ( 23 | 26 | ))} 27 | {/* */} 28 | 29 | 30 | 31 | 32 | )) 33 | ) : ( 34 | 35 | 36 | 37 | )} 38 | 39 | 40 |
Service NameDateStart Time
24 | {service.serviceData.servicename} 25 | {booking.user}{moment(booking.date).format("MMMM Do, YYYY")}{booking.startTime}
No bookings found.
41 |
42 |
43 | ); 44 | }; 45 | 46 | export default DashboardTable; 47 | -------------------------------------------------------------------------------- /src/components/comfirmations/Deleteservice.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { deleteService } from '../../Api/AdminAPI'; 3 | 4 | function Deleteservice({open,serviceId}) { 5 | 6 | const close = () => { 7 | open(false); 8 | }; 9 | const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` }; 10 | const Delete = () => { 11 | deleteService(serviceId,headers).then((data)=>{ 12 | if (data) { 13 | open(false); 14 | } 15 | }) 16 | }; 17 | 18 | return ( 19 |
23 |
24 |
25 | Are you sure you want to delete SERVICE ? 26 |
27 |
28 | 34 | 40 |
41 |
42 |
43 | ) 44 | } 45 | 46 | export default Deleteservice -------------------------------------------------------------------------------- /src/redux/Slice/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | cartItems: [], 5 | }; 6 | 7 | export const cartSlice = createSlice({ 8 | name: "cart", 9 | initialState, 10 | reducers: { 11 | addCartItem: (state, action) => { 12 | action.payload.forEach((item) => { 13 | const existingItem = state.cartItems.find((cartItem) => cartItem._id === item._id); 14 | if (!existingItem) { 15 | const total = item.price * item.qty; 16 | state.cartItems.push({ ...item, qty: 1, total }); 17 | } 18 | }); 19 | }, 20 | deleteCartItem: (state, action) => { 21 | const index = state.cartItems.findIndex((el) => el._id === action.payload); 22 | if (index !== -1) { 23 | state.cartItems.splice(index, 1); 24 | } 25 | }, 26 | increaseQty: (state, action) => { 27 | const index = state.cartItems.findIndex((el) => el._id === action.payload); 28 | if (index !== -1) { 29 | state.cartItems[index].qty += 1; 30 | state.cartItems[index].total = state.cartItems[index].price * state.cartItems[index].qty; 31 | } 32 | }, 33 | decreaseQty: (state, action) => { 34 | const index = state.cartItems.findIndex((el) => el._id === action.payload); 35 | if (index !== -1 && state.cartItems[index].qty > 1) { 36 | state.cartItems[index].qty -= 1; 37 | state.cartItems[index].total = state.cartItems[index].price * state.cartItems[index].qty; 38 | } 39 | }, 40 | clearCart: (state, action) => { 41 | state.cartItems = []; 42 | }, 43 | }, 44 | }); 45 | 46 | export const { 47 | addCartItem, 48 | deleteCartItem, 49 | increaseQty, 50 | decreaseQty, 51 | clearCart, 52 | } = cartSlice.actions; 53 | 54 | export default cartSlice.reducer; 55 | -------------------------------------------------------------------------------- /src/components/admin/Dashboard/dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import StatCard from './StatCard'; 3 | import MainChart from './chart'; 4 | import ColumnChart from './columnChart'; 5 | import { AdminDashboard } from '../../../Api/AdminAPI'; 6 | import Loader from '../../Loader'; 7 | 8 | const Dashboard = () => { 9 | const [data, setData] = useState([]); 10 | const [mChartData, setMChartData] = useState(); 11 | const [CChartData, setCChartData] = useState(); 12 | const [loading, setLoading] = useState(true); 13 | 14 | 15 | const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` }; 16 | 17 | useEffect(() => { 18 | AdminDashboard(headers).then((res) => { 19 | setLoading(false) 20 | 21 | const { users, providers,totalBookings,earnings } = res.data; 22 | const namedData = [ 23 | { name: 'Earnings', count: earnings }, 24 | { name: 'Bookings', count: totalBookings }, 25 | { name: 'Users', count: users }, 26 | { name: 'Providers', count: providers } 27 | ]; 28 | setData(namedData); 29 | setMChartData(res.data.earningsByMonth) 30 | setCChartData(res.data.bookingsCountByMonth) 31 | }); 32 | }, []); 33 | 34 | return ( 35 | <> 36 |
37 | {loading ? 38 | :
39 |
40 |

Dashboard

41 | 42 |
43 |
44 | 45 | 46 |
47 |
} 48 |
49 | 50 | ); 51 | }; 52 | 53 | export default Dashboard; 54 | -------------------------------------------------------------------------------- /src/components/Provider/dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import StatCard from '../admin/Dashboard/StatCard' 3 | import MainChart from '../admin/Dashboard/chart' 4 | import DashboardTable from '../admin/Dashboard/table' 5 | import { providerDashboard, upcoming } from '../../Api/providerAPI' 6 | import Loader from '../Loader' 7 | function Dashboard() { 8 | const [data, setData] = useState([]); 9 | const [mChartData, setMChartData] = useState(); 10 | const [upcomingBookings, setUpcomingBookings] = useState([]) 11 | const [loading, setLoading] = useState(true); 12 | 13 | 14 | const headers = { Authorization: `Bearer ${localStorage.getItem('ProviderToken')}` }; 15 | 16 | useEffect(() => { 17 | providerDashboard(headers).then((res) => { 18 | setLoading(false) 19 | const { Upcoming, Requests, completed, earnings,earningsByMonth } = res.data; 20 | const namedData = [ 21 | { name: 'Earnings', count: earnings }, 22 | { name: 'Completed', count: completed }, 23 | { name: 'Upcomings', count: Upcoming }, 24 | { name: 'Requests', count: Requests }, 25 | ]; 26 | setData(namedData); 27 | setMChartData(earningsByMonth) 28 | upcoming(headers).then((res) => { 29 | setUpcomingBookings(res.data) 30 | }) 31 | 32 | }) 33 | }, []) 34 | 35 | return ( 36 | <> 37 |
38 | {loading ? 39 | :
40 |
41 | 42 |
43 |
44 | 45 | 46 |
47 |
} 48 |
49 | 50 | 51 | ) 52 | } 53 | 54 | export default Dashboard -------------------------------------------------------------------------------- /src/components/comfirmations/DeleteCategory.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { deleteCategory } from '../../Api/AdminAPI'; 3 | 4 | function DeleteCategory({ open, Id }) { 5 | 6 | const close = () => { 7 | open(false); 8 | }; 9 | const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` }; 10 | const Delete = () => { 11 | const res = deleteCategory(Id, headers) 12 | if (res) { 13 | open(false); 14 | } 15 | }; 16 | 17 | return ( 18 |
22 |
23 |
24 | Are you sure you want to delete Category ? 25 |
26 |
27 | 33 | 39 |
40 |
41 |
42 | ) 43 | } 44 | 45 | export default DeleteCategory -------------------------------------------------------------------------------- /src/Routes/providerRoute.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route, useLocation } from "react-router-dom"; 2 | import ProviderNavbar from "../components/Provider/Navbar"; 3 | import ProviderDashboard from "../components/Provider/dashboard"; 4 | import Profile from "../components/Provider/Profile/Profile"; 5 | import Requests from "../components/Provider/Bookings/Requests"; 6 | import Upcoming from "../components/Provider/Bookings/Upcoming"; 7 | import Completed from "../components/Provider/Bookings/Completed"; 8 | import ProviderLanding from "../components/Provider/home"; 9 | import ProviderLogin from "../components/Provider/login"; 10 | import ProviderAuth from "../Auth/providerAuth"; 11 | import Error from "../components/404/404"; 12 | 13 | function ProviderRoute() { 14 | const location = useLocation(); 15 | const excludeNavbarRoutes = ["/provider/login", "/provider/register"]; 16 | const shouldRenderNavbar = !excludeNavbarRoutes.includes(location.pathname); 17 | 18 | return ( 19 | <> 20 | {shouldRenderNavbar && } 21 |
22 | 23 | } /> 24 | } /> 25 | }> 26 | } /> 27 | } /> 28 | } /> 29 | } /> 30 | } /> 31 | 32 | } /> 33 | 34 | 35 |
36 | 37 | ); 38 | } 39 | 40 | export default ProviderRoute; 41 | -------------------------------------------------------------------------------- /src/components/comfirmations/DeleteCity.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {deleteCity } from '../../Api/AdminAPI'; 3 | import { toast } from 'react-hot-toast'; 4 | 5 | function DeleteCity({ open, cityId }) { 6 | 7 | const close = () => { 8 | open(false); 9 | }; 10 | const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` }; 11 | const Delete = () => { 12 | const res = deleteCity(cityId, headers) 13 | if (res) { 14 | toast.success('city deleted successfully') 15 | open(false); 16 | } 17 | }; 18 | 19 | return ( 20 |
24 |
25 |
26 | Are you sure you want to delete City ? 27 |
28 |
29 | 35 | 41 |
42 |
43 |
44 | ) 45 | } 46 | 47 | export default DeleteCity -------------------------------------------------------------------------------- /src/components/comfirmations/BlockUser.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { HandleUserblock} from '../../Api/AdminAPI'; 3 | 4 | function BlockUser({ open, userId, block }) { 5 | const close = () => { 6 | open(false); 7 | }; 8 | 9 | const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` }; 10 | const performAction = async () => { 11 | try { 12 | await HandleUserblock(userId,block, headers); 13 | open(false); 14 | } catch (error) { 15 | console.log(error); 16 | } 17 | }; 18 | 19 | return ( 20 |
24 |
25 |
26 | {block ? 'Are you sure you want to Unblock this user?' : 'Are you sure you want to Block this user?'} 27 |
28 |
29 | 35 | 41 |
42 |
43 |
44 | ); 45 | } 46 | 47 | 48 | export default BlockUser -------------------------------------------------------------------------------- /src/components/user/payment/Payment.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { useNavigate } from 'react-router-dom'; 3 | import toast from 'react-hot-toast'; 4 | const Payment = ({ shedule, payment, price, status }) => { 5 | 6 | const navigate = useNavigate() 7 | const options = { 8 | key: 'rzp_test_FtVK05Td5kBCzd', 9 | amount: price * 100, 10 | name: 'QuickServe', 11 | description: 'some description', 12 | image: 'https://cdn.razorpay.com/logos/7K3b6d18wHwKzL_medium.png', 13 | handler: function (response) { 14 | if (response) { 15 | toast.success('payment Successful'); 16 | payment() 17 | status() 18 | navigate('/bookings') 19 | } 20 | }, 21 | prefill: { 22 | name: '', 23 | contact: '', 24 | email: '', 25 | }, 26 | notes: { 27 | address: '', 28 | }, 29 | theme: { 30 | color: '#020073', 31 | hide_topbar: false, 32 | }, 33 | 34 | }; 35 | 36 | const openPayModal = () => { 37 | if (window.Razorpay) { 38 | const rzp1 = new window.Razorpay(options); 39 | rzp1.open(); 40 | } 41 | }; 42 | 43 | useEffect(() => { 44 | shedule(); 45 | const script = document.createElement('script'); 46 | script.src = 'https://checkout.razorpay.com/v1/checkout.js'; 47 | script.async = true; 48 | script.onload = openPayModal; 49 | document.body.appendChild(script); 50 | 51 | return () => { 52 | document.body.removeChild(script); 53 | payment(); 54 | }; 55 | }, []); 56 | 57 | return ( 58 | <> 59 |
60 |
61 | {/* Payment modal content */} 62 |
63 |
64 | 65 | ); 66 | }; 67 | 68 | export default Payment; 69 | -------------------------------------------------------------------------------- /src/Routes/adminRoute.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route, useLocation } from "react-router-dom"; 2 | import Services from "../components/admin/Services/Services"; 3 | import AdminNavbar from "../components/admin/AdminNavbar/AdminNavbar"; 4 | import Dashboard from "../components/admin/Dashboard/dashboard"; 5 | import ProviderCard from "../components/admin/Providers/ProviderList"; 6 | import Category from "../components/admin/category/Category"; 7 | import UserList from "../components/admin/users/users"; 8 | import City from "../components/admin/City/city"; 9 | import AdminLogin from '../components/admin/Login/login' 10 | import Bookings from "../components/admin/Bookings/bookings"; 11 | import Media from "../components/admin/Media/Media"; 12 | import AdminChat from "../components/admin/Support/chat"; 13 | import AdminAuth from "../Auth/adminAuth"; 14 | import Error from "../components/404/404"; 15 | 16 | function AdminRoute() { 17 | const location = useLocation(); 18 | const excludeNavbarRoutes = ["/admin/chat", "/admin/*", "/admin/login"]; 19 | 20 | const shouldRenderNavbar = !excludeNavbarRoutes.includes(location.pathname); 21 | 22 | return ( 23 | <> 24 | {shouldRenderNavbar && } 25 |
26 | 27 | } /> 28 | }> 29 | } /> 30 | } /> 31 | } /> 32 | } /> 33 | } /> 34 | } /> 35 | } /> 36 | } /> 37 | } /> 38 | 39 | } /> 40 | 41 | 42 |
43 | 44 | ); 45 | } 46 | 47 | export default AdminRoute; 48 | -------------------------------------------------------------------------------- /src/components/admin/Dashboard/chart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Chart from "react-apexcharts"; 3 | 4 | const MainChart = ({value}) => { 5 | const data = { 6 | series: [ 7 | { 8 | name: "Rupees", 9 | data: value, 10 | }, 11 | ], 12 | options: { 13 | chart: { 14 | type: "area", 15 | height: "auto", 16 | toolbar: { 17 | tools: { 18 | download: false, 19 | selection: false, 20 | zoom: false, 21 | zoomin: true, 22 | zoomout: true, 23 | pan: false, 24 | reset: true | '', 25 | }, 26 | }, 27 | }, 28 | fill: { 29 | colors: ["#1891c3"], 30 | type: "gradient", 31 | }, 32 | dataLabels: { 33 | enabled: false, 34 | }, 35 | stroke: { 36 | curve: "smooth", 37 | colors: ["#1891c3"], 38 | }, 39 | 40 | grid: { 41 | show: false, 42 | }, 43 | xaxis: { 44 | type: "month", 45 | categories: [ 46 | "Jan", 47 | "feb", 48 | "mar", 49 | "Apr", 50 | "May", 51 | "June", 52 | "July", 53 | "Aug", 54 | "Sep", 55 | "Oct", 56 | "Nov", 57 | "Dec" 58 | ], 59 | }, 60 | yaxis: { 61 | show: false, 62 | }, 63 | }, 64 | }; 65 | 66 | return ( 67 |
68 | 69 |
70 | ); 71 | }; 72 | 73 | export default MainChart; 74 | -------------------------------------------------------------------------------- /src/components/admin/Dashboard/columnChart.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Chart from "react-apexcharts"; 3 | 4 | const ColumnChart = ({value}) => { 5 | const data = { 6 | series: [ 7 | { 8 | name: "Bookings", 9 | data: value, 10 | }, 11 | ], 12 | options: { 13 | chart: { 14 | type: "area", 15 | height: "auto", 16 | toolbar: { 17 | tools: { 18 | download: false, 19 | selection: false, 20 | zoom: false, 21 | zoomin: true, 22 | zoomout: true, 23 | pan: false, 24 | reset: true | '', 25 | }, 26 | }, 27 | }, 28 | fill: { 29 | colors: ["#1891c3"], 30 | type: "gradient", 31 | }, 32 | dataLabels: { 33 | enabled: false, 34 | }, 35 | stroke: { 36 | curve: "smooth", 37 | colors: ["#1891c3"], 38 | }, 39 | 40 | grid: { 41 | show: false, 42 | }, 43 | xaxis: { 44 | type: "month", 45 | categories: [ 46 | "Jan", 47 | "feb", 48 | "mar", 49 | "Apr", 50 | "May", 51 | "June", 52 | "July", 53 | "Aug", 54 | "Sep", 55 | "Oct", 56 | "Nov", 57 | "Dec" 58 | ], 59 | }, 60 | yaxis: { 61 | show: false, 62 | }, 63 | }, 64 | }; 65 | 66 | return ( 67 |
68 | 69 |
70 | ); 71 | }; 72 | 73 | export default ColumnChart; 74 | -------------------------------------------------------------------------------- /src/components/user/Categorylist.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { Link } from 'react-router-dom' 3 | import Slider from 'react-slick'; 4 | import 'slick-carousel/slick/slick.css'; 5 | import 'slick-carousel/slick/slick-theme.css'; 6 | import './categorylist.css' 7 | import { getCategories } from '../../Api/AdminAPI'; 8 | import BASE_URL from '../../config/config'; 9 | const CategorySlider = () => { 10 | const [category, setCategory] = useState([]) 11 | 12 | useEffect(() => { 13 | getCategories().then((data) => { 14 | setCategory(data); 15 | }); 16 | }, []); 17 | 18 | const settings = { 19 | dots: false, 20 | arrows: true, 21 | infinite: true, 22 | speed: 500, 23 | slidesToShow: 4, 24 | slidesToScroll: 1, 25 | responsive: [ 26 | { 27 | breakpoint: 1024, 28 | settings: { 29 | slidesToShow: 4, 30 | }, 31 | }, 32 | { 33 | breakpoint: 768, 34 | settings: { 35 | slidesToShow: 3, 36 | arrows: true, 37 | }, 38 | }, 39 | { 40 | breakpoint: 480, 41 | settings: { 42 | slidesToShow: 2, 43 | arrows: true, 44 | }, 45 | }, 46 | ], 47 | }; 48 | 49 | return ( 50 |
51 |
52 | 53 | {category.map((category) => ( 54 |
55 | 56 |
57 | {category.categoryName} 62 |

{category.categoryName}

63 |
64 | 65 |
66 | ))} 67 | 68 |
69 |
70 | ); 71 | }; 72 | 73 | export default CategorySlider; 74 | -------------------------------------------------------------------------------- /src/components/admin/Login/login.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap'); 2 | 3 | 4 | .center1 { 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | background-color: #fff;; 10 | border-radius: 10px; 11 | box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.05); 12 | } 13 | 14 | .center1 h1 { 15 | text-align: center; 16 | padding: 20px 0; 17 | font-weight: 500; 18 | color: #000240; 19 | } 20 | 21 | .center1 form { 22 | padding: 0 40px; 23 | box-sizing: border-box; 24 | } 25 | 26 | form .txt_field1 { 27 | position: relative; 28 | background-color: #E8F5FF; 29 | border-radius: 10px; 30 | height: 50px; 31 | margin: 25px 0; 32 | } 33 | 34 | .txt_field1 input { 35 | width: 100%; 36 | padding: 5px 5px; 37 | height: 40px; 38 | font-size: 16px; 39 | border: none; 40 | background: none; 41 | outline: none; 42 | } 43 | .txt_field1 textarea { 44 | width: 100%; 45 | padding: 5px 5px; 46 | height: 40px; 47 | font-size: 16px; 48 | border: none; 49 | background: none; 50 | outline: none; 51 | } 52 | 53 | .txt_field1 label { 54 | position: absolute; 55 | top: 50%; 56 | left: 5px; 57 | color: #b5b6cb; 58 | transform: translateY(-50%); 59 | font-size: 16px; 60 | pointer-events: none; 61 | transition: .5s; 62 | } 63 | 64 | .txt_field1 span::before { 65 | content: ''; 66 | position: absolute; 67 | top: 40px; 68 | left: 0; 69 | width: 0%; 70 | height: 2px; 71 | background: #2691d9; 72 | transition: .5s; 73 | } 74 | 75 | .txt_field1 input:focus~label, 76 | .txt_field1 input:valid~label { 77 | top: -10px; 78 | color: rgb(30 58 138); 79 | } 80 | .txt_field1 textarea:focus~label, 81 | .txt_field1 textarea:valid~label { 82 | top: -10px; 83 | color: rgb(30 58 138); 84 | } 85 | .txt_field1 input:focus~span::before, 86 | .txt_field1 input:valid~span::before { 87 | width: 100%; 88 | } 89 | .txt_field1 textarea:focus~span::before, 90 | .txt_field1 textarea:valid~span::before { 91 | width: 100%; 92 | } 93 | 94 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.11.0", 7 | "@emotion/styled": "^11.11.0", 8 | "@fortawesome/free-regular-svg-icons": "^6.4.0", 9 | "@fortawesome/free-solid-svg-icons": "^6.4.0", 10 | "@fortawesome/react-fontawesome": "^0.2.0", 11 | "@heroicons/react": "^1.0.6", 12 | "@mui/material": "^5.13.2", 13 | "@mui/styled-engine-sc": "^5.12.0", 14 | "@react-google-maps/api": "^2.18.1", 15 | "@reduxjs/toolkit": "^1.9.5", 16 | "@testing-library/jest-dom": "^5.16.5", 17 | "@testing-library/react": "^13.4.0", 18 | "@testing-library/user-event": "^13.5.0", 19 | "apexcharts": "^3.41.0", 20 | "axios": "^1.3.5", 21 | "date-fns": "^2.30.0", 22 | "formik": "^2.2.9", 23 | "google-map-react": "^2.2.1", 24 | "leaflet": "^1.9.4", 25 | "moment": "^2.29.4", 26 | "react": "^18.2.0", 27 | "react-apexcharts": "^1.4.0", 28 | "react-autosuggest": "^10.1.0", 29 | "react-dom": "^18.2.0", 30 | "react-hot-toast": "^2.4.1", 31 | "react-icons": "^4.8.0", 32 | "react-leaflet": "^4.2.1", 33 | "react-loader-spinner": "^5.3.4", 34 | "react-places-autocomplete": "^7.3.0", 35 | "react-razorpay": "^1.2.0", 36 | "react-redux": "^8.0.5", 37 | "react-router-dom": "^6.10.0", 38 | "react-scripts": "5.0.1", 39 | "react-simple-star-rating": "^5.1.7", 40 | "react-slick": "^0.29.0", 41 | "react-spring": "^9.7.1", 42 | "react-spring-3d-carousel": "^1.3.4", 43 | "react-stars": "^2.2.5", 44 | "react-toastify": "^9.1.2", 45 | "redux": "^4.2.1", 46 | "redux-persist": "^6.0.0", 47 | "slick-carousel": "^1.8.1", 48 | "socket.io-client": "^4.6.2", 49 | "styled-components": "^5.3.10", 50 | "tailwind-scrollbar": "^3.0.4", 51 | "web-vitals": "^2.1.4" 52 | }, 53 | "scripts": { 54 | "start": "react-scripts start", 55 | "build": "react-scripts build", 56 | "test": "react-scripts test", 57 | "eject": "react-scripts eject" 58 | }, 59 | "eslintConfig": { 60 | "extends": [ 61 | "react-app", 62 | "react-app/jest" 63 | ] 64 | }, 65 | "browserslist": { 66 | "production": [ 67 | ">0.2%", 68 | "not dead", 69 | "not op_mini all" 70 | ], 71 | "development": [ 72 | "last 1 chrome version", 73 | "last 1 firefox version", 74 | "last 1 safari version" 75 | ] 76 | }, 77 | "devDependencies": { 78 | "autoprefixer": "^9.8.6", 79 | "postcss-cli": "^10.1.0", 80 | "tailwindcss": "^3.3.2" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/Routes/userRoute.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route } from "react-router-dom"; 2 | import Navbar from "../components/user/Navbar/Navbar"; 3 | import Cart from "../components/user/cart"; 4 | import UserLogin from "../components/user/login/login"; 5 | import Signup from "../components/user/login/Register"; 6 | import SingleService from "../components/user/singleservice/SingleService"; 7 | import ServicesPage from "../components/user/servicesPage/ServicesPage"; 8 | import Bookings from "../components/user/Bookings/Bookings"; 9 | import BookingDetail from "../components/user/Bookings/BookingDetails"; 10 | import UserAuth from "../Auth/userAuth"; 11 | import Profile from "../components/user/Profile/profile"; 12 | import Footer from "../components/user/Footer/Footer"; 13 | import Chat from "../components/user/Chat/chat"; 14 | import Home from "../components/user/home/home"; 15 | import ChatButton from "../components/user/Chat/chatButton"; 16 | import { useState } from "react"; 17 | import Error from "../components/404/404"; 18 | 19 | function UserRoute() { 20 | 21 | const [showchat, setShowChat] = useState(false) 22 | 23 | const handleChat = (() => { 24 | setShowChat(!showchat) 25 | }) 26 | return ( 27 | <> 28 | 29 |
30 | {showchat && } 31 | 32 | } /> 33 | } /> 34 | } /> 35 | } /> 36 | } /> 37 | } /> 38 | }> 39 | } /> 40 | 41 | } /> 42 | } /> 43 | } /> 44 | } /> 45 | 46 | } /> 47 | 48 |
49 | 50 | 51 |