Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
7b5e338e19 |
@@ -1,15 +1,9 @@
|
||||
SKIP_PREFLIGHT_CHECK=true
|
||||
REACT_APP_NODE_ENV="development"
|
||||
REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
|
||||
REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
|
||||
REACT_APP_MAIN_API="https://devapi.mermsemr.com"
|
||||
REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
|
||||
REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
|
||||
|
||||
# login footer links
|
||||
REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
|
||||
REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
|
||||
REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
|
||||
REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
|
||||
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
|
||||
REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
|
||||
|
||||
# Inactivity timeout/logout AT 10MINS
|
||||
REACT_APP_TIMEOUT=600000
|
||||
|
||||
+3
-10
@@ -1,16 +1,9 @@
|
||||
SKIP_PREFLIGHT_CHECK=true
|
||||
REACT_APP_NODE_ENV="development"
|
||||
REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
|
||||
REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
|
||||
REACT_APP_MAIN_API="https://devapi.mermsemr.com"
|
||||
REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
|
||||
REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
|
||||
|
||||
# login footer links
|
||||
REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
|
||||
REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
|
||||
REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
|
||||
REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
|
||||
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
|
||||
REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
|
||||
|
||||
# Inactivity timeout/logout AT 10MINS
|
||||
REACT_APP_TIMEOUT=600000
|
||||
|
||||
|
||||
+1
-8
@@ -1,15 +1,8 @@
|
||||
SKIP_PREFLIGHT_CHECK=true
|
||||
REACT_APP_NODE_ENV="production"
|
||||
REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
|
||||
REACT_APP_MAIN_API="https://devapi.mermsemr.com"
|
||||
REACT_APP_MAIN_API="https://api.mermsemr.com"
|
||||
REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
|
||||
REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
|
||||
|
||||
# login footer links
|
||||
REACT_APP_HOME_LINK='https://www.mermsemr.com/'
|
||||
REACT_APP_ABOUT_LINK='https://www.mermsemr.com/about'
|
||||
REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
|
||||
REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
|
||||
|
||||
# Inactivity timeout/logout AT 10MINS
|
||||
REACT_APP_TIMEOUT=600000
|
||||
@@ -1,15 +0,0 @@
|
||||
SKIP_PREFLIGHT_CHECK=true
|
||||
REACT_APP_NODE_ENV="development"
|
||||
REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
|
||||
REACT_APP_MAIN_API="https://devapi.mermsemr.com"
|
||||
REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
|
||||
REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
|
||||
|
||||
# login footer links
|
||||
REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
|
||||
REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
|
||||
REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
|
||||
REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
|
||||
|
||||
# Inactivity timeout/logout AT 10MINS
|
||||
REACT_APP_TIMEOUT=600000
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
version: '3'
|
||||
services:
|
||||
merms-panel:
|
||||
image: registry.chiefsoft.net/merms-panel-reactjs:latest
|
||||
# image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/Dockerfile
|
||||
@@ -20,7 +20,7 @@ services:
|
||||
extra_hosts:
|
||||
- api.mermsemr.com:10.10.33.15
|
||||
- devapi.mermsemr.com:10.10.33.15
|
||||
- devsocket.mermsemr.com:10.10.33.15
|
||||
- dev-socket.mermsemr.com:10.10.33.15
|
||||
- socket.mermsemr.com:10.10.33.15
|
||||
- dev-media.mermsemr.com:10.10.33.15
|
||||
- media.mermsemr.com:10.10.33.15
|
||||
|
||||
+1
-2
@@ -33,8 +33,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start -e .env.development",
|
||||
"build": "react-scripts start -e .env.development",
|
||||
"build_real": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
|
||||
"build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 8.6 KiB |
+1
-40
@@ -1,5 +1,5 @@
|
||||
.custom-bg {
|
||||
background-image: url('./assets/bg/bg_2.jpg') !important;
|
||||
background-image: url('./assets/bg/bg_1.jpg') !important;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -8,43 +8,4 @@
|
||||
background-image: url('./assets/bg/signup_bg.jpg') !important;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.register{
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.login-links{
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-links a {
|
||||
font-size: 14px;
|
||||
padding: 0px 20px;
|
||||
border-right: 2px solid #6c757d;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-links a:nth-of-type(1){
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.login-links a:last-child{
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
button{
|
||||
font-size: 1rem!important;
|
||||
font-weight: 700!important;
|
||||
}
|
||||
|
||||
.font-600 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.accordion-button, .accordion-button:not(.collapsed) {
|
||||
background-color: transparent!important;
|
||||
}
|
||||
+11
-16
@@ -1,28 +1,23 @@
|
||||
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
|
||||
import { Provider } from 'react-redux';
|
||||
import store from './store/store'
|
||||
import AppRouters from './AppRouters';
|
||||
|
||||
import './App.css';
|
||||
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 3,
|
||||
// refetchOnMount: false,
|
||||
staleTime: 10*60*1000 // can also be a number in millisecond
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
function App() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 3,
|
||||
// refetchOnMount: false,
|
||||
staleTime: 3000
|
||||
},
|
||||
},
|
||||
})
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Provider store={store}>
|
||||
<AppRouters />
|
||||
</Provider>
|
||||
<AppRouters />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
+20
-32
@@ -2,7 +2,6 @@ import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
import UserExist from './component/authorization/UserExist';
|
||||
import AuthLayout from './component/auth/AuthLayout';
|
||||
import BearerToken from './component/authorization/BearerToken';
|
||||
import siteLinks from './links/siteLinks';
|
||||
|
||||
import LoginPage from './views/LoginPage';
|
||||
@@ -18,43 +17,32 @@ import SettingsPage from './views/SettingsPage'
|
||||
import ProductPage from './views/ProductPage'
|
||||
import SocketIOContextProvider from './component/context/SocketIOContext';
|
||||
import CSignupPage from './views/CSignupPage';
|
||||
import HelpPage from './views/HelpPage';
|
||||
import SubscriptionPage from './views/SubscriptionPage';
|
||||
import OnboardPage from "./views/OnboardPage";
|
||||
import AccPWDResetPage from './views/AccPWDResetPage';
|
||||
|
||||
|
||||
function AppRouters() {
|
||||
return (
|
||||
<div className="">
|
||||
<Routes>
|
||||
<Route element={<BearerToken />}>
|
||||
{/* auth routes wrapper */}
|
||||
<Route element={<AuthLayout />}>
|
||||
<Route path={siteLinks.home} element={<LoginPage />} />
|
||||
<Route path={siteLinks.login} element={<LoginPage />} />
|
||||
<Route path={siteLinks.signup} element={<SignupPage />} />
|
||||
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
|
||||
<Route path={siteLinks.csignup} element={<CSignupPage />} />
|
||||
<Route path={siteLinks.accreset} element={<AccPWDResetPage />} />
|
||||
<Route path={siteLinks.error} element={<LoginPage />} />
|
||||
</Route>
|
||||
{/* auth routes wrapper */}
|
||||
<Route element={<AuthLayout />}>
|
||||
<Route path={siteLinks.home} element={<LoginPage />} />
|
||||
<Route path={siteLinks.login} element={<LoginPage />} />
|
||||
<Route path={siteLinks.signup} element={<SignupPage />} />
|
||||
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
|
||||
<Route path={siteLinks.csignup} element={<CSignupPage />} />
|
||||
<Route path={siteLinks.error} element={<LoginPage />} />
|
||||
</Route>
|
||||
|
||||
{/* protected routes */}
|
||||
<Route element={<SocketIOContextProvider />}>
|
||||
<Route element={<UserExist />}>
|
||||
<Route path={siteLinks.dash} element={<HomePage />} />
|
||||
<Route path={siteLinks.product} element={<ProductPage />} />
|
||||
<Route path={siteLinks.reports} element={<ReportsPage />} />
|
||||
<Route path={siteLinks.comments} element={<CommentsPage />} />
|
||||
<Route path={siteLinks.contacts} element={<ContactsPage />} />
|
||||
<Route path={siteLinks.user} element={<UserPage />} />
|
||||
<Route path={siteLinks.subscription} element={<SubscriptionPage />} />
|
||||
<Route path={siteLinks.onboard} element={<OnboardPage />} />
|
||||
<Route path={siteLinks.calendar} element={<CalendarPage />} />
|
||||
<Route path={siteLinks.settings} element={<SettingsPage />} />
|
||||
<Route path={siteLinks.help} element={<HelpPage />} />
|
||||
</Route>
|
||||
{/* protected routes */}
|
||||
<Route element={<SocketIOContextProvider />}>
|
||||
<Route element={<UserExist />}>
|
||||
<Route path={siteLinks.dash} element={<HomePage />} />
|
||||
<Route path={siteLinks.product} element={<ProductPage />} />
|
||||
<Route path={siteLinks.reports} element={<ReportsPage />} />
|
||||
<Route path={siteLinks.comments} element={<CommentsPage />} />
|
||||
<Route path={siteLinks.contacts} element={<ContactsPage />} />
|
||||
<Route path={siteLinks.user} element={<UserPage />} />
|
||||
<Route path={siteLinks.calendar} element={<CalendarPage />} />
|
||||
<Route path={siteLinks.settings} element={<SettingsPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 390 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 995 B |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,221 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useDispatch } from 'react-redux'
|
||||
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { completePWDReset, verifyResetToken } from '../../services/services';
|
||||
import { updateUserDetails } from '../../store/UserDetails'
|
||||
|
||||
import { IoMdArrowDropdown } from "react-icons/io";
|
||||
import getImage from '../../utils/getImage';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
password: Yup.string().required("Password is required"),
|
||||
confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
password: '',
|
||||
confirmpassword: '',
|
||||
};
|
||||
|
||||
export default function AccPWDReset() {
|
||||
|
||||
const {token} = useParams()
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [user, setUser] = useState(null)
|
||||
|
||||
// API to verify email link
|
||||
const verifyLink = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return verifyResetToken(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
// console.log('res', res)
|
||||
if(res.data.resultCode != '0'){
|
||||
throw({message: res?.data?.resultDescription})
|
||||
}
|
||||
// setUser({user:'testaccount', ...res.data})
|
||||
setUser(res.data)
|
||||
},
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
// }
|
||||
})
|
||||
|
||||
const resetPWD = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return completePWDReset(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
throw({message: res?.data?.resultDescription})
|
||||
}
|
||||
// const {token, room, uid} = res?.data
|
||||
// if(!token || !room){
|
||||
// throw({message: 'something went wrong, try again!'})
|
||||
// }
|
||||
// localStorage.setItem('token', token)
|
||||
// localStorage.setItem('room', room)
|
||||
// localStorage.setItem('uid', uid)
|
||||
// dispatch(updateUserDetails({ ...res?.data }));
|
||||
// navigate('/dash') // later add redux to dispatch state
|
||||
},
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
// }
|
||||
})
|
||||
|
||||
const handleCompletePWDReset = (values) => {
|
||||
let reqData = {
|
||||
reset_token: token,
|
||||
// reset_uid: "4733e96b-7031-4684-bec3-f63da4417707",
|
||||
reset_uid: "",
|
||||
new_password: values.password,
|
||||
}
|
||||
resetPWD.mutate(reqData)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
if(!token){
|
||||
return navigate(siteLinks.login, {replace: true})
|
||||
}
|
||||
verifyLink.mutate({reset_token: token})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
{(verifyLink.isSuccess && !resetPWD.isSuccess) && <p>Complete your password reset</p>}
|
||||
<div
|
||||
>
|
||||
<div className='mt-2'>
|
||||
<div className="row">
|
||||
{resetPWD.isSuccess ?
|
||||
<>
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
|
||||
<h4 className='p-4 text-black'>Your password reset is completed</h4>
|
||||
<img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Go <Link to={siteLinks.home}> Back</Link></p>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
{verifyLink.isPending ?
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-center align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||
<div className="col-12 d-flex flex-column justify-content-center align-items-center">
|
||||
<p className='text-black'>loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: verifyLink.isSuccess ?
|
||||
<div className='col-12'>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleCompletePWDReset}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2'>
|
||||
<div className="row">
|
||||
<>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label`}>Username: {user?.user}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||
<input type="password" name='password' className="form-control" placeholder="password" value={props.values.password} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label`}>Confirm Password* <span className={`${(props.errors.confirmpassword && props.touched.confirmpassword) && 'text-danger'}`}>{(props.errors.confirmpassword && props.touched.confirmpassword) && props.errors.confirmpassword}</span></label>
|
||||
<input type="password" name='confirmpassword' className="form-control" placeholder="confirmpassword" value={props.values.confirmpassword} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{resetPWD.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{resetPWD.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{resetPWD.isPending ? 'loading...' : 'reset password'}</button>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
: verifyLink.error ?
|
||||
<>
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#E9D0DD'}}>
|
||||
<h4 className='p-4 text-black'>Unable to continue password reset. Please start again</h4>
|
||||
<img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Go <Link to={siteLinks.home}> Back</Link></p>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
null
|
||||
}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +1,11 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useDispatch } from 'react-redux'
|
||||
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { completeRegistration, verifyEmail } from '../../services/services';
|
||||
import { updateUserDetails } from '../../store/UserDetails'
|
||||
|
||||
import { IoMdArrowDropdown } from "react-icons/io";
|
||||
|
||||
@@ -30,8 +28,6 @@ const validationSchema = Yup.object().shape({
|
||||
export default function CSignup() {
|
||||
|
||||
const {jwt} = useParams()
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
@@ -55,19 +51,15 @@ export default function CSignup() {
|
||||
return completeRegistration(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
throw({message: res?.data?.resultDescription})
|
||||
const {token, room} = res?.data?.data
|
||||
if(token){
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('room', room)
|
||||
// const data = {token}
|
||||
// dispatch(updateUserDetails({ ...data }));
|
||||
navigate('/dash') // later add redux to dispatch state
|
||||
}
|
||||
const {token, room, uid} = res?.data
|
||||
if(!token || !room){
|
||||
throw({message: 'something went wrong, try again!'})
|
||||
}
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('room', room)
|
||||
localStorage.setItem('uid', uid)
|
||||
dispatch(updateUserDetails({ ...res?.data }));
|
||||
navigate('/dash') // later add redux to dispatch state
|
||||
},
|
||||
}
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
// }
|
||||
@@ -78,7 +70,7 @@ export default function CSignup() {
|
||||
country : values.country,
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
verify_link: jwt
|
||||
verify_link: user.verify_link
|
||||
}
|
||||
cSignup.mutate(reqData)
|
||||
}
|
||||
@@ -94,10 +86,10 @@ export default function CSignup() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="bg-white custom-bg">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1 h-100-vh">
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
@@ -204,7 +196,7 @@ export default function CSignup() {
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-center">
|
||||
<Link to={siteLinks.signup} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
|
||||
<Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
|
||||
</div>
|
||||
|
||||
<div className="col-12 mt-3 text-center">
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function ExtFooter() {
|
||||
return <div className="login-links">
|
||||
<a href={process.env.REACT_APP_HOME_LINK}>Home</a>
|
||||
<a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
|
||||
<a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
|
||||
<a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
|
||||
</div>
|
||||
}
|
||||
@@ -7,7 +7,6 @@ import { Link } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { recoverPWD } from '../../services/services';
|
||||
import getImage from '../../utils/getImage';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
username: Yup.string()
|
||||
@@ -18,7 +17,7 @@ const validationSchema = Yup.object().shape({
|
||||
// )
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Email is required"),
|
||||
.required("Username is required"),
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
@@ -44,14 +43,14 @@ export default function Forgetpwd2() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="bg-white">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1h" style={{maxWidth: '520px'}}>
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
{!mutation.isSuccess && <p>Please enter your username.</p>}
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="login p-50">
|
||||
<h1 className="mb-2">Recover Password</h1>
|
||||
<p>Please enter your username.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
@@ -82,9 +81,8 @@ export default function Forgetpwd2() {
|
||||
</>
|
||||
:
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||
<h4 className='p-4 text-black'>Check your email to continue password reset.</h4>
|
||||
<img className='' style={{width: '150px'}} src={getImage('reset-password.png')} alt='reset-icon' />
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,13 +98,13 @@ export default function Forgetpwd2() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useDispatch } from 'react-redux'
|
||||
|
||||
// import LoginImg from '../../assets/bg/login.svg'
|
||||
|
||||
@@ -14,17 +14,14 @@ import IOSDownload from '../../assets/img/download/apple.jpg'
|
||||
|
||||
export default function Login() {
|
||||
|
||||
const { userDetails: { token, room }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
let loggedIn = token && room ? true : false; // variable to determine if user is logged in
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [fields, setFields] = useState({
|
||||
username: '',
|
||||
username: localStorage.getItem('username') || '',
|
||||
password: '',
|
||||
remember: false
|
||||
remember: localStorage.getItem('username') ? true : false
|
||||
})
|
||||
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
@@ -40,25 +37,20 @@ export default function Login() {
|
||||
throw new Error('Please provide all fields marked *')
|
||||
}
|
||||
rememberMe(fields.remember) // FUNCTION TO SAVE USERNAME OF THE USER TO LOCAL STORAGE
|
||||
delete fields.remember // REMOVING REMEMBER FROM THE PAYLOAD
|
||||
return loginUser(fields)
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.error_message){
|
||||
throw({message: res?.data?.error_message})
|
||||
const {token, room} = res?.data?.data
|
||||
if(token){
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('room', room)
|
||||
// const data = {token}
|
||||
// dispatch(updateUserDetails({ ...data }));
|
||||
navigate('/dash') // later add redux to dispatch state
|
||||
}
|
||||
const {token, room, uid} = res?.data
|
||||
if(!token || !room){
|
||||
throw({message: 'something went wrong, try again!'})
|
||||
}
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('room', room)
|
||||
localStorage.setItem('uid', uid)
|
||||
dispatch(updateUserDetails({ ...res?.data }));
|
||||
navigate('/dash') // later add redux to dispatch state
|
||||
}
|
||||
})
|
||||
|
||||
@@ -70,22 +62,16 @@ export default function Login() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{ // NAVIGATES USER TO HOME PAGE IF USER IS ACTIVE
|
||||
if(loggedIn){
|
||||
navigate(siteLinks.dash)
|
||||
}
|
||||
},[])
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="vh-100 custom-bg">
|
||||
<div className="bg-white">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register px-5 pt-5 pb-3">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="login p-50">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome back, please login to your account.</p>
|
||||
<form className="mt-3 mt-sm-5">
|
||||
@@ -93,19 +79,19 @@ export default function Login() {
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label text-black fw-bold">User Name*</label>
|
||||
<input maxLength={55} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
|
||||
<input name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label text-black fw-bold">Password*</label>
|
||||
<input maxLength={55} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
|
||||
<input name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="d-block d-sm-flex align-items-center">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" id="gridCheck" name='remember' checked={fields.remember || false} onChange={handleChange} disabled={!fields.username ? true : false} />
|
||||
<input className="form-check-input" type="checkbox" id="gridCheck" name='remember' checked={fields.remember} onChange={handleChange} disabled={!fields.username ? true : false} />
|
||||
<label className="form-check-label text-black" htmlFor="gridCheck">
|
||||
Remember Me
|
||||
</label>
|
||||
@@ -124,7 +110,7 @@ export default function Login() {
|
||||
<button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
|
||||
</div>
|
||||
<div className="col-12 mt-3">
|
||||
<p>Don't have an account ?<Link to={siteLinks.signup}><span style={{fontWeight: 'bolder'}}>Sign Up</span></Link></p>
|
||||
<p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -133,7 +119,7 @@ export default function Login() {
|
||||
<div className="app-store-icons-wrap text-center">
|
||||
<a className="icon google"
|
||||
href='#' >
|
||||
<img src={IOSDownload} className='w-80 h-auto' alt='IOS Download' />
|
||||
<img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,29 +127,21 @@ export default function Login() {
|
||||
<div className="col-6">
|
||||
<div className="app-store-icons-wrap text-center">
|
||||
<a className="icon apple" href='#'>
|
||||
<img src={GoogleDownload} className='w-80 h-auto' alt='IOS Download' />
|
||||
<img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="login-links">
|
||||
<a href={process.env.REACT_APP_HOME_LINK}>Home</a>
|
||||
<a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
|
||||
<a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
|
||||
<a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,6 @@ import { Link } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { signUpUser } from '../../services/services';
|
||||
import getImage from '../../utils/getImage';
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
@@ -50,7 +49,6 @@ export default function Signup2() {
|
||||
const signUp = (values) => {
|
||||
// helpers.resetForm()
|
||||
// console.log('values', values, helpers)
|
||||
delete values.isChecked
|
||||
mutation.mutate(values)
|
||||
}
|
||||
|
||||
@@ -58,105 +56,104 @@ export default function Signup2() {
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
<div className="app-contant">
|
||||
<div className="vh-100 bg-white custom-bg">
|
||||
<div className="bg-white">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters justify-content-center">
|
||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-4 align-self-center order-2 order-sm-1" style={{maxWidth: '520px'}}>
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
{!mutation.isSuccess ?
|
||||
<>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||
</div>
|
||||
|
||||
{mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{backgroundColor: '#F2FAF7'}}>
|
||||
<h4 className='p-4 text-black' style={{marginBottom: '-30px'}}>Check your email to continue.</h4>
|
||||
<img className='' style={{width: '200px'}} src={getImage('check-mail.png')} alt='mail-alert' />
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
{!mutation.isSuccess ?
|
||||
<>
|
||||
<div className="col-12 col-sm-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||
<div className="col-12 col-sm-6">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||
</div>
|
||||
|
||||
{mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<div className='col-12'>
|
||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||
<h4 className='p-4 text-black'>Check your email to continue.</h4>
|
||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||
<div className="row align-items-center h-100">
|
||||
<div className="col-7 mx-auto ">
|
||||
<img className="img-fluid" src={LoginImg} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import {useEffect} from 'react'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import MainLoaderBS from '../loaders/MainLoaderBS'
|
||||
|
||||
import { userToken } from '../../services/services'
|
||||
|
||||
export default function BearerToken() {
|
||||
const bearerToken = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return userToken(fields)
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error)
|
||||
// window.location.reload(true)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
throw({message: 'Something went wrong'})
|
||||
}
|
||||
const {access_token, refresh_token} = res?.data?.data
|
||||
if(access_token){
|
||||
localStorage.setItem('access_token', access_token)
|
||||
}else{
|
||||
throw({message: 'Something went wrong'})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(()=>{
|
||||
let reqData = {
|
||||
"username": "user",
|
||||
"password": "password"
|
||||
}
|
||||
bearerToken.mutate(reqData)
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
{bearerToken.isPending ?
|
||||
<MainLoaderBS />
|
||||
:
|
||||
<Outlet />
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,15 +1,13 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Outlet, useNavigate } from 'react-router-dom'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
|
||||
import { updateUserDetails } from "../../store/UserDetails";
|
||||
import { userInfo } from '../../services/services'
|
||||
import MainLoaderBS from '../loaders/MainLoaderBS'
|
||||
import Layout from '../layout/Layout'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
|
||||
import debounceFunction from '../../utils/debounceFunction'
|
||||
import { accountDashboard } from '../../services/services';
|
||||
import { SocketContextValues } from '../context/SocketIOContext';
|
||||
|
||||
|
||||
@@ -25,9 +23,9 @@ export default function UserExist() {
|
||||
|
||||
const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN
|
||||
|
||||
const { userDetails: { token, room }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
const { userDetails: { lastname }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
let loggedIn = token && room ? true : false; // variable to determine if user is logged in
|
||||
let loggedIn = lastname ? true : false; // variable to determine if user is logged in
|
||||
// console.log('loggedIn', loggedIn)
|
||||
|
||||
// Function to log the user out
|
||||
@@ -42,31 +40,6 @@ export default function UserExist() {
|
||||
debounceFunction(setLastActivityTime(Date.now()), 1000)
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getUser = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return userInfo(fields)
|
||||
},
|
||||
onError: (error) => {
|
||||
navigate(siteLinks.login)
|
||||
setLoading(false)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
const {token, room, uid} = res?.data
|
||||
if(!token || !room){
|
||||
navigate(siteLinks.login)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('room', room)
|
||||
localStorage.setItem('uid', uid)
|
||||
dispatch(updateUserDetails({ ...res?.data }));
|
||||
setLoading(false)
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setTimeout(()=>{
|
||||
if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){
|
||||
@@ -88,21 +61,37 @@ export default function UserExist() {
|
||||
window.removeEventListener(event, resetTimer);
|
||||
})
|
||||
}
|
||||
},[lastActivityTime])
|
||||
|
||||
},[lastActivityTime])
|
||||
|
||||
useEffect(()=>{
|
||||
let token = localStorage.getItem('token') // USER TOKEN
|
||||
let uid = localStorage.getItem('uid') // USER UID
|
||||
if(token && loggedIn){
|
||||
accountDashboard().then(res => {
|
||||
const {dash_data} = res?.data
|
||||
setLoading(false)
|
||||
}else if(token && uid && !loggedIn){
|
||||
const reqData = {token, uid}
|
||||
getUser.mutate(reqData)
|
||||
}else{
|
||||
dispatch(updateUserDetails({ ...dash_data }));
|
||||
}).catch(err => {
|
||||
navigate(siteLinks.login)
|
||||
setLoading(false)
|
||||
}
|
||||
})
|
||||
},[])
|
||||
|
||||
|
||||
// useEffect(()=>{
|
||||
// let token = localStorage.getItem('token')
|
||||
// const timer = setTimeout(()=>{
|
||||
// if(token && loggedIn){
|
||||
// setLoading(false)
|
||||
// }else if(token && !loggedIn){
|
||||
// const data = {token}
|
||||
// dispatch(updateUserDetails({ ...data }));
|
||||
// setLoading(false)
|
||||
// // dispatch(updateUserDetails({ ...res.data }));
|
||||
// }else{
|
||||
// navigate('auth/login')
|
||||
// }
|
||||
// },1000)
|
||||
|
||||
// return () => clearTimeout(timer)
|
||||
// },[])
|
||||
|
||||
useEffect(()=>{
|
||||
if(localStorage.getItem('room')){
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||||
|
||||
import React, { useCallback, useState } from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import EventCalendar from "./EventCalendar";
|
||||
import ExternalDraggable from "./ExternalDraggable";
|
||||
|
||||
import { getCalendarEvents } from '../../services/services'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
|
||||
|
||||
export default function Calendar(){
|
||||
|
||||
@@ -16,46 +11,14 @@ export default function Calendar(){
|
||||
// setDraggedEvent(event)
|
||||
// }
|
||||
|
||||
// const {data, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.calendar_events,
|
||||
// queryFn: () => getCalendarEvents()
|
||||
// })
|
||||
const events = [
|
||||
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
|
||||
{id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
|
||||
{id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
|
||||
{id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
|
||||
]
|
||||
|
||||
// const calendarEvents = useMutation({
|
||||
// mutationFn: (reqData) => {
|
||||
// return getCalendarEvents(reqData)
|
||||
// },
|
||||
// onError: (error) => {
|
||||
// console.log(error)
|
||||
// },
|
||||
// onSuccess: (res) => {
|
||||
// if(res?.data?.resultCode != '0'){
|
||||
// throw({message: 'Something went wrong'})
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// useEffect(()=>{
|
||||
// let reqData = {
|
||||
// token: localStorage.getItem('token'), // USER TOKEN
|
||||
// uid: localStorage.getItem('uid') // USER UID
|
||||
// }
|
||||
// calendarEvents.mutate(reqData)
|
||||
// },[])
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.calendar_events,
|
||||
queryFn: () => getCalendarEvents(reqData)
|
||||
})
|
||||
|
||||
const receievedEvents = data?.data
|
||||
const category = receievedEvents?.category //EVENT CATEGORIES FROM API
|
||||
const eventList = receievedEvents?.list //EVENT LIST FROM API
|
||||
|
||||
const [activeCategory, setActiveCategory] = useState('1')
|
||||
const [dummyEvents, setDummyEvents] = useState(events)
|
||||
|
||||
const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
|
||||
|
||||
@@ -70,14 +33,11 @@ export default function Calendar(){
|
||||
const handleAddNewEvent = () => {
|
||||
if(newEvent.title && newEvent.color){
|
||||
const eventToAdd = {...newEvent}
|
||||
// setDefaultCategory(prev => ([...prev, eventToAdd]))
|
||||
setDummyEvents(prev => ([...prev, eventToAdd]))
|
||||
setNewEvent({title: '', color: ''})
|
||||
}
|
||||
}
|
||||
|
||||
const handleActiveCategory = (id) => {
|
||||
setActiveCategory(id)
|
||||
}
|
||||
|
||||
return(
|
||||
<>
|
||||
@@ -87,92 +47,45 @@ export default function Calendar(){
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Events</h4>
|
||||
<h4 className="card-title">Event Calendar</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<div className="col-xl-3">
|
||||
|
||||
{/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
|
||||
<div className="col-xl-3">
|
||||
<div id="external-events">
|
||||
<button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
|
||||
Add New Event
|
||||
</button>
|
||||
<p className="mt-3">
|
||||
Drag and drop your event or click in the calendar.
|
||||
</p> */}
|
||||
|
||||
{category?.map((item, index) => {
|
||||
let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
|
||||
let circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
|
||||
return (
|
||||
// <div key={index} className={`fc-event ${color}`} data-color={`${color}`}
|
||||
// // draggable={false}
|
||||
// // onDragStart={() =>
|
||||
// // handleDragStart({...item})
|
||||
// // }
|
||||
// >
|
||||
// <span>{item.description}</span>
|
||||
// </div>
|
||||
|
||||
// <div key={index} className={`form-check ${color}`}>
|
||||
// <input className="form-check-input" type="radio" value={item.cid}
|
||||
// id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
|
||||
// <label className={`w-100 form-check-label`} htmlFor={item.cid}>
|
||||
// {item.description}
|
||||
// </label>
|
||||
// </div>
|
||||
|
||||
<div key={index} className={`form-check ${color}`} onClick={() => handleActiveCategory(item.cid)} style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className={`fa fa-circle-o pr-4 ${item.cid == activeCategory ? circleColor : 'text-light'}`}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>{item?.description}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
|
||||
{/* <div id="external-events">
|
||||
<ExternalDraggable category={category} />
|
||||
</div> */}
|
||||
|
||||
{/* <div className="form-check">
|
||||
</p>
|
||||
{/* {dummyEvents.map((item, index) => (
|
||||
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`}
|
||||
draggable="true"
|
||||
onDragStart={() =>
|
||||
handleDragStart({...item})
|
||||
}
|
||||
>
|
||||
<span></span> {item.title}
|
||||
</div>
|
||||
))} */}
|
||||
<ExternalDraggable dummyEvents={dummyEvents} />
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" value={removeAfterDrop}
|
||||
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
|
||||
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
|
||||
<label className="form-check-label" htmlFor="defaultCheck1">
|
||||
Remove After Drop
|
||||
</label>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="col-xl-9">
|
||||
<div className="event-calendar">
|
||||
<EventCalendar
|
||||
removeAfterDrop={removeAfterDrop}
|
||||
eventList={eventList}
|
||||
activeCategory={activeCategory}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
<div className="col-xl-9">
|
||||
<div className="event-calendar">
|
||||
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
|
||||
<EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { formatDate } from '@fullcalendar/core';
|
||||
import FullCalendar from '@fullcalendar/react';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
@@ -6,9 +6,9 @@ import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
||||
|
||||
export default function EventCalendar({removeAfterDrop, eventList, activeCategory}) {
|
||||
export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
|
||||
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||
const [currentEvents, setCurrentEvents] = useState([]);
|
||||
const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
|
||||
|
||||
function handleWeekendsToggle() {
|
||||
setWeekendsVisible(!weekendsVisible);
|
||||
@@ -51,9 +51,9 @@ export default function EventCalendar({removeAfterDrop, eventList, activeCategor
|
||||
...event
|
||||
}
|
||||
setCurrentEvents(prev => ([...prev, newEvent]))
|
||||
// if(removeAfterDrop){
|
||||
// setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
|
||||
// }
|
||||
if(removeAfterDrop){
|
||||
setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,20 +78,13 @@ export default function EventCalendar({removeAfterDrop, eventList, activeCategor
|
||||
// setCurrentEvents(events);
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
// let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
|
||||
let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
|
||||
// console.log('newEventList', newEventList)
|
||||
setCurrentEvents(newEventList)
|
||||
},[activeCategory])
|
||||
|
||||
return (
|
||||
<div className="demo-app">
|
||||
<div className="demo-app-main">
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
headerToolbar={{
|
||||
left: 'prev,next,today',
|
||||
left: 'prev next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
||||
}}
|
||||
@@ -103,18 +96,17 @@ export default function EventCalendar({removeAfterDrop, eventList, activeCategor
|
||||
weekends={weekendsVisible}
|
||||
// initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
|
||||
events={currentEvents}
|
||||
select={handleDateSelect}
|
||||
eventContent={renderEventContent} // custom render function
|
||||
eventsSet={handleEvents} // called after events are initialized/added/changed/removed
|
||||
// select={handleDateSelect}
|
||||
// eventClick={handleEventClick}
|
||||
eventsSet={handleEvents} // called after events are initialized/added/changed/removed
|
||||
/* you can update a remote database when these fire:
|
||||
eventAdd={function(){}}
|
||||
eventChange={function(){}}
|
||||
eventRemove={function(){}}
|
||||
*/
|
||||
|
||||
// eventBackgroundColor='purple'
|
||||
// eventRemove={removeEvent}
|
||||
eventRemove={removeEvent}
|
||||
droppable= {true} // this allows things to be dropped onto the calendar
|
||||
drop={onDrop}
|
||||
/>
|
||||
|
||||
@@ -1,16 +1,9 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { Draggable } from "@fullcalendar/interaction";
|
||||
|
||||
const ExternalDraggable = ({category}) => {
|
||||
const ExternalDraggable = ({dummyEvents}) => {
|
||||
const eventContainerRef = useRef(null);
|
||||
|
||||
const events = [
|
||||
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
|
||||
{id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
|
||||
{id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
|
||||
{id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
// Make the external events draggable
|
||||
const draggable = new Draggable(eventContainerRef.current, {
|
||||
@@ -28,15 +21,11 @@ const ExternalDraggable = ({category}) => {
|
||||
|
||||
return (
|
||||
<div ref={eventContainerRef} className="external-events">
|
||||
{category && category.map((item, index) => {
|
||||
let color = index % 4 === 0 ? 'fc-event-success' : index % 3 === 0 ? 'fc-event-danger' : index % 2 === 0 ? 'fc-event-warning' : 'fc-event-primary'
|
||||
return (
|
||||
<div key={item?.cid || index} className={`fc-event ${color}`} data-color={`${color}`} >
|
||||
{item.description}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
{dummyEvents.map((item, index) => (
|
||||
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} >
|
||||
{item.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,19 +2,19 @@ let eventGuid = 0;
|
||||
let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
|
||||
|
||||
export const INITIAL_EVENTS = [
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'All-day event',
|
||||
start: new Date('2025-01-19'),
|
||||
end: new Date('2025-01-20'),
|
||||
// color: 'blue'
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: 'Timed event',
|
||||
start: todayStr + 'T12:00:00',
|
||||
// color: 'red'
|
||||
},
|
||||
// {
|
||||
// id: createEventId(),
|
||||
// title: 'All-day event',
|
||||
// start: new Date('2025-01-19'),
|
||||
// end: new Date('2025-01-20'),
|
||||
// // color: 'blue'
|
||||
// },
|
||||
// {
|
||||
// id: createEventId(),
|
||||
// title: 'Timed event',
|
||||
// start: todayStr + 'T12:00:00',
|
||||
// // color: 'red'
|
||||
// },
|
||||
];
|
||||
|
||||
export function createEventId() {
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function Comments(){
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
|
||||
+326
-272
@@ -1,300 +1,354 @@
|
||||
"use client"
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { contactData } from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import getCustomTime from "../../utils/getCustomTime";
|
||||
|
||||
export default function Contacts(){
|
||||
|
||||
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.contacts,
|
||||
// queryFn: () => contactData()
|
||||
// })
|
||||
|
||||
const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
|
||||
|
||||
const [activeContactUID, setActiveContactUID] = useState('')
|
||||
const [activeDetail, setActiveDetail] = useState([])
|
||||
|
||||
const [filteredContactData, setFiltererdContactData] = useState([])
|
||||
|
||||
|
||||
const getContactData = useMutation({
|
||||
mutationFn: (reqData) => {
|
||||
return contactData(reqData)
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
throw({message: 'Something went wrong'})
|
||||
}
|
||||
setFiltererdContactData(res?.data?.contacts)
|
||||
}
|
||||
})
|
||||
|
||||
const changeActiveUID = (uid) => {
|
||||
setActiveContactUID(uid)
|
||||
let detail = contactsData.filter(item => item.uid == uid)
|
||||
setActiveDetail(detail)
|
||||
}
|
||||
|
||||
const changeActiveCategoryUID = (id) => {
|
||||
let filteredConData = []
|
||||
setActiveCategoryUID(id)
|
||||
if(id == '0'){
|
||||
filteredConData = contactsData
|
||||
}else{
|
||||
filteredConData = contactsData.filter(item => item.category == id)
|
||||
}
|
||||
setFiltererdContactData(filteredConData)
|
||||
changeActiveUID(filteredConData[0]?.uid)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
getContactData.mutate(reqData)
|
||||
},[])
|
||||
|
||||
const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS
|
||||
const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY
|
||||
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
|
||||
{getContactData?.isPending ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: getContactData?.error ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{getContactData?.error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row">
|
||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics mail-contant">
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||
<div className="mail-sidebar">
|
||||
<div className="row justify-content-center">
|
||||
<div className="d-none col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Replied Mail</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>All</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{contactsCategory && contactsCategory.map(item => (
|
||||
<li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`A00000${item?.cid}`)} style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == `A00000${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>{item?.description}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Work</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-plus pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Add Category</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics mail-contant">
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||
<div className="mail-sidebar">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
{/*<div className="form-group pt-3">*/}
|
||||
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
|
||||
{/* <i className="fa fa-search"></i>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{contactsData && filteredContactData?.map((contact, index)=> {
|
||||
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
|
||||
return (
|
||||
<div key={contact?.uid} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||
<a href="#">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>{contact?.sender}</p>
|
||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||
<p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">{contact?.title}</h5>
|
||||
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p>
|
||||
<p className="d-xl-none">
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
{new Date(contact?.added).toDateString()}
|
||||
{/* {getCustomTime(contact.added)} */}
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">0+</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Replied Mail</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Personal</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Work</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-plus pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Add Category</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
||||
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
|
||||
</div>
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
{/*<div className="form-group pt-3">*/}
|
||||
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
|
||||
{/* <i className="fa fa-search"></i>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>{activeContactUID ? activeDetail[0]?.title : filteredContactData[0]?.title}</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Martin smith</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/02.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>DutcaPatrick</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Mobile app Designer </h5>
|
||||
<p>Very nice template, lots of pages and good documentation.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>m_morsch</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Landing page Designer</h5>
|
||||
<p>Excellent and at a great price... thank you very much!</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/04.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>AnnaHorno</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Re-Design ios app</h5>
|
||||
<p>Solved my theme problem in 10 minutes. We thank you.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/05.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Wdcorbitt</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Mobil UX/UI Designer</h5>
|
||||
<p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/06.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Anne Smith</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
|
||||
<p>Mentor has so many features and layouts. Its a great choice.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/07.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Paul Flavius</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/08.jpg" className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Sara Lisbon</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">UI Designer</h5>
|
||||
<p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/09.jpg" className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Annahorno</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p>
|
||||
{/* <p className="my-4">hey adminjon...</p>
|
||||
<p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
|
||||
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
|
||||
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
|
||||
{/*<div className="my-5">*/}
|
||||
{/* <p>Have lovely Day,</p>*/}
|
||||
{/* <p>adminjon</p>*/}
|
||||
{/*</div>*/}
|
||||
<h4 className="mb-0">Dutca Patrick</h4>
|
||||
<p>30 Min ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>Landing page Designer...</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="my-4">hey adminjon...</p>
|
||||
<p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
|
||||
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
|
||||
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
|
||||
{/*<div className="my-5">*/}
|
||||
{/* <p>Have lovely Day,</p>*/}
|
||||
{/* <p>adminjon</p>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-light mail-f px-4 py-3">
|
||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||||
<p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
|
||||
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
|
||||
<div className="bg-light mail-f px-4 py-3">
|
||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||||
<p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
|
||||
<a href="javascript:void(0)" className="text-primary"><i className="fa fa-microphone"></i></a>
|
||||
</div>
|
||||
<div className="collapse" id="editer">
|
||||
<div className="form-group">
|
||||
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
|
||||
</div>
|
||||
<div className="collapse" id="editer">
|
||||
<div className="form-group">
|
||||
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="collapse" id="forward">
|
||||
<div className="form-group">
|
||||
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
|
||||
</div>
|
||||
<div className="collapse" id="forward">
|
||||
<div className="form-group">
|
||||
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between py-2">
|
||||
<div>
|
||||
{/*<ul className="nav">*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
|
||||
{/*</ul>*/}
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between py-2">
|
||||
<div>
|
||||
{/*<ul className="nav">*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
|
||||
{/*</ul>*/}
|
||||
</div>
|
||||
<div>
|
||||
{/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
|
||||
</div>
|
||||
<div>
|
||||
{/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -303,7 +357,7 @@ export default function Contacts(){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
|
||||
|
||||
export default function HelpCom(){
|
||||
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Frequesntly Asked Questions' paths={['Dashboard', 'Help']} />
|
||||
{/*<div className="row">*/}
|
||||
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<div className="row account-contant">
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-lg-15" style={{backgroundColor:"#f9f9fb"}}>
|
||||
|
||||
<p className="mb-4">First, a disclaimer – the entire process of writing a blog post often takes more than a couple of hours, even if you can type eighty words as per minute and your writing skills are sharp.</p>
|
||||
<div className="row">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{['a', 'b', 'c', 'd'].map((item, index)=>{
|
||||
return (
|
||||
<div className="accordion-item">
|
||||
<h2 className="accordion-header">
|
||||
<button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target={`#${item}`} aria-expanded="true" aria-controls="collapseOne">
|
||||
{`Accordion Item ${item} 1`}
|
||||
</button>
|
||||
</h2>
|
||||
<div id={item} className={`accordion-collapse collapse ${index == 0 && 'show'}`} data-bs-parent="#accordionExample">
|
||||
<div className="accordion-body">
|
||||
<strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the accordion-body, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,22 +1,29 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { productsData } from '../../services/services'
|
||||
import React from 'react'
|
||||
import { productData } from '../../services/services'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
import productPath from "../../utils/productpath";
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
|
||||
|
||||
export default function Products() {
|
||||
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.products,
|
||||
queryFn: () => productsData(reqData)
|
||||
queryKey: queryKeys.product,
|
||||
queryFn: () => productData()
|
||||
})
|
||||
const products = data?.data?.products_data // PRODUCTS DATA
|
||||
/*
|
||||
{
|
||||
"banner": "p1.jpg",
|
||||
"description": "Your personal professional web presence",
|
||||
"id": 1,
|
||||
"name": "Personal Website",
|
||||
"product_id": "A000001",
|
||||
"product_uid": "e92282b4-3ee1-4026-92ac-12cfd214b43a",
|
||||
"status": 5,
|
||||
"status_text": "Activate Now"
|
||||
},
|
||||
*/
|
||||
//const products = data?.data?.products_list?.products
|
||||
const products = data?.data?.products_list
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -36,17 +43,17 @@ export default function Products() {
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
<p className='text-danger'>{error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row m-b-20">
|
||||
{products && products.map((product, index) => (
|
||||
<div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
|
||||
<div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
|
||||
<Link to={productPath(product?.product_id)} >
|
||||
<div className={`d-flex align-items-center extraProductCard ${product?.icon_style}`} >
|
||||
<div className="d-flex align-items-center extraProductCard">
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className={`fa ${product?.product_icon} text-primary`}></i>
|
||||
<i className="fa fa-cart-plus text-primary"></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>{product?.status_text}</p>
|
||||
|
||||
@@ -2,22 +2,15 @@ import React from 'react'
|
||||
import { productsURL } from '../../services/services'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
import getImage from '../../utils/getImage'
|
||||
|
||||
export default function ProductsURL() {
|
||||
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
const {data:data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.product_url,
|
||||
queryFn: () => productsURL(reqData)
|
||||
queryFn: () => productsURL()
|
||||
})
|
||||
|
||||
const urlData = data?.data?.products_data
|
||||
// console.log('data', urlData)
|
||||
const urlData = data?.data?.url_data?.url
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -60,28 +53,29 @@ export default function ProductsURL() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{urlData && urlData.map((item, index) => {
|
||||
let statusColor = item?.status === '1' ? 'badge-success-inverse' : item?.status === '6' ? 'badge-success-inverse' : item?.status == '7' ? 'badge-danger-inverse' : 'badge-info-inverse'
|
||||
let statusText = item?.status === '1' ? 'Preparing' : item?.status === '6' ? 'Provisioning' : item?.status == '7' ? 'Ready' : 'Started'
|
||||
let statusColor = item?.status === 'Preparing' ? 'badge-success-inverse' : item?.status === 'Active' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
|
||||
let productUrl = '/product/'+ item?.product_id
|
||||
let externalUrl= item?.url_protocol +"://"+ item?.internal_url;
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{Number(item?.id).toString().padStart(6,'0')}</td>
|
||||
<td>
|
||||
<a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> - {item?.description}
|
||||
</td>
|
||||
<td>{Number(item?.no) + Number(index)}</td>
|
||||
<td>{item?.description} - <a href={productUrl} target='_blank'>{item?.url}</a></td>
|
||||
|
||||
<td><span className={`badge ${statusColor}`}>{statusText}</span></td>
|
||||
{/* <td><a className="mr-3" href={productUrl}><i className="fe fe-edit"></i></a></td> */}
|
||||
<td>
|
||||
<a className="mr-3" href={productUrl}>
|
||||
<img src={getImage('arrow-next.png')} alt='next' />
|
||||
</a>
|
||||
</td>
|
||||
<td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
|
||||
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Price</th>
|
||||
<th>In stock</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function RecentActions() {
|
||||
queryFn: () => recentActions()
|
||||
})
|
||||
|
||||
const actionData = dataAction?.data?.recent_actions
|
||||
const actionData = dataAction?.data?.action_data
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -43,7 +43,7 @@ export default function RecentActions() {
|
||||
<div className="d-xxs-flex align-items-center">
|
||||
<div className="total-sales">
|
||||
<p>Last Update</p>
|
||||
<h3>{dataAction?.data?.last_update}</h3>
|
||||
<h3>{dataAction?.data?.action_data?.last_update}</h3>
|
||||
</div>
|
||||
<div className="mb-3 mb-sm-0 ml-auto">
|
||||
{/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/}
|
||||
@@ -62,19 +62,19 @@ export default function RecentActions() {
|
||||
<div className="row no-gutters">
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Initial</p>
|
||||
<h4>{dataAction?.data?.initial}</h4>
|
||||
<h4>{actionData?.initial}</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Processing</p>
|
||||
<h4>{dataAction?.data?.processing}</h4>
|
||||
<h4>{actionData?.processing}</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Verifying</p>
|
||||
<h4>{dataAction?.data?.verifying}</h4>
|
||||
<h4>{actionData?.verifying}</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Completed</p>
|
||||
<h4>{dataAction?.data?.completed}</h4>
|
||||
<h4>{actionData?.completed}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive m-t-20">
|
||||
@@ -89,16 +89,16 @@ export default function RecentActions() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-muted">
|
||||
{actionData && actionData?.map((action, index) => {
|
||||
{actionData && actionData?.actions.map((action, index) => {
|
||||
let bgColor = action?.status == '5' ? 'badge-success-inverse' : action?.status == '3' ? 'badge-info-inverse' : action?.status == '0' ? 'badge-warning-inverse' : 'badge-primary-inverse'
|
||||
let text = action?.status == '5' ? 'completed' : action?.status == '3' ? 'verifying' : action?.status == '0' ? 'processing' : 'processing'
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{action?.id}</td>
|
||||
<td>{action?.action_label}</td>
|
||||
<td>{new Date(action?.added).toDateString()}</td>
|
||||
<td>{action?.no}</td>
|
||||
<td>{action?.description}</td>
|
||||
<td>{new Date(action?.date).toDateString()}</td>
|
||||
<td>
|
||||
<label className={`badge mb-0 ${bgColor}`}>{action?.status_description}</label>
|
||||
<label className={`badge mb-0 ${bgColor}`}>{text}</label>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
|
||||
@@ -1,40 +1,16 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import React from 'react'
|
||||
import { topBar } from '../../services/services'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
|
||||
export default function TopBar() {
|
||||
|
||||
// const topBarData = useMutation({
|
||||
// mutationFn: (reqData) => {
|
||||
// return topBar(reqData)
|
||||
// },
|
||||
// onError: (error) => {
|
||||
// console.log(error)
|
||||
// },
|
||||
// onSuccess: (res) => {
|
||||
// if(res?.data?.resultCode != '0'){
|
||||
// throw({message: 'Something went wrong'})
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// useEffect(()=>{
|
||||
// let reqData = {
|
||||
// token: localStorage.getItem('token'), // USER TOKEN
|
||||
// uid: localStorage.getItem('uid') // USER UID
|
||||
// }
|
||||
// topBarData.mutate(reqData)
|
||||
// },[])
|
||||
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
const {data:topBarData, isFetching, isError, error} = useQuery({
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.topBar,
|
||||
queryFn: () => topBar(reqData)
|
||||
queryFn: () => topBar()
|
||||
})
|
||||
const data = topBarData?.data?.top_bar // top bar data
|
||||
|
||||
const topData = data?.data?.bar_data?.top_bar
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -46,7 +22,7 @@ export default function TopBar() {
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError?
|
||||
: isError ?
|
||||
<div className="col-12">
|
||||
<div className="card p-4">
|
||||
<p className='text-danger'>{error.message}</p>
|
||||
@@ -54,11 +30,11 @@ export default function TopBar() {
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
{data && data?.map((item, index)=>{
|
||||
{topData && topData?.map((item, index)=>{
|
||||
let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
|
||||
return (
|
||||
<div key={item.id + index} className="col-sm-6 col-xxl-3">
|
||||
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `}>
|
||||
<div className="card card-statistics ecommerce-contant overflow-h">
|
||||
<div className="card-body p-0">
|
||||
<div className="d-flex m-b-0 ecommerce-contant-text h-100">
|
||||
<div className="w-100">
|
||||
@@ -68,7 +44,9 @@ export default function TopBar() {
|
||||
<small className="d-block">{item?.data_span}</small>
|
||||
</div>
|
||||
<div className="col text-right">
|
||||
<h5 className="text-muted mb-0"><a href={item?.link}>{item?.description}</a></h5>
|
||||
<h5 className="text-muted mb-0">{item?.description}</h5>
|
||||
<strong className={`${textColor} m-t-5`}><i
|
||||
className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apexchart-wrapper">
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import React from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { topBar } from '../../services/services'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
|
||||
export default function TopBar() {
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.topBar,
|
||||
queryFn: () => topBar()
|
||||
})
|
||||
|
||||
const topData = data?.data?.bar_data?.top_bar
|
||||
console.log('topData', topData)
|
||||
|
||||
return (
|
||||
<>
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="col-12">
|
||||
<div className="card p-4">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="col-12">
|
||||
<div className="card p-4">
|
||||
<p className='text-danger'>{error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
{topData && topData?.map((item, index)=>{
|
||||
let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
|
||||
return (
|
||||
<div key={item.id + index} className="col-sm-6 col-xxl-3">
|
||||
<div className="card card-statistics ecommerce-contant overflow-h">
|
||||
<div className="card-body p-0">
|
||||
<div className="d-flex m-b-0 ecommerce-contant-text h-100">
|
||||
<div className="w-100">
|
||||
<div className="row p-3">
|
||||
<div className="col">
|
||||
<h3 className="mb-0">{item?.value || 0}</h3>
|
||||
<small className="d-block">{item?.data_span}</small>
|
||||
</div>
|
||||
<div className="col text-right">
|
||||
<h5 className="text-muted mb-0">{item?.description}</h5>
|
||||
<strong className={`${textColor} m-t-5`}><i
|
||||
className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apexchart-wrapper">
|
||||
<div id="ecommercedemo3" className="chart-fit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -2,13 +2,11 @@ import React from "react";
|
||||
|
||||
export default function UserFooter(){
|
||||
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
return <>
|
||||
<footer className="footer">
|
||||
<div className="row">
|
||||
<div className="col-12 col-sm-6 text-center text-sm-left">
|
||||
<p>© Copyright {year}. All rights reserved.</p>
|
||||
<p>© Copyright 2024. All rights reserved.</p>
|
||||
</div>
|
||||
<div className="col col-sm-6 ml-sm-auto text-center text-sm-right">
|
||||
<p>A division of <i className="fa fa-key text-danger mx-1"></i> autoMedSys A.I.</p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useRef } from "react";
|
||||
import React from "react";
|
||||
import getImage from "../../../utils/getImage";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import siteLinks from "../../../links/siteLinks";
|
||||
|
||||
@@ -9,8 +9,6 @@ export default function UserHeader(){
|
||||
|
||||
const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
|
||||
|
||||
const nav_menu = useRef(null)
|
||||
|
||||
const toggleSidebar = (e) => {
|
||||
e.preventDefault()
|
||||
document.body.classList.toggle('sidebar-toggled')
|
||||
@@ -34,19 +32,14 @@ export default function UserHeader(){
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
const toggleMenu = (e) => {
|
||||
// e.preventDefault()
|
||||
nav_menu.current.classList.toggle('show')
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="app-header top-bar">
|
||||
<nav className="navbar navbar-expand-md">
|
||||
<div className="navbar-header d-flex align-items-center">
|
||||
<a href="#" onClick={toggleSidebar} className="mobile-toggle"><i className="ti ti-align-right"></i></a>
|
||||
<a className="navbar-brand" href="/dash">
|
||||
<img src={getImage('logo-pink.png')} className="img-fluid logo-desktop" alt="logo"/>
|
||||
<img src={getImage('logo-pink.png')} className="img-fluid logo-mobile" alt="logo"/>
|
||||
<img src={getImage('logo-light.png')} className="img-fluid logo-desktop" alt="logo"/>
|
||||
<img src={getImage('logo-icon.png')} className="img-fluid logo-mobile" alt="logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<button onClick={removeSidebar} className="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
@@ -73,16 +66,16 @@ export default function UserHeader(){
|
||||
|
||||
<ul className="navbar-nav nav-right ml-auto">
|
||||
<li className="nav-item user-profile">
|
||||
<a onClick={toggleMenu} href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
|
||||
<img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
|
||||
<a href="#" className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown">
|
||||
<img src={getImage('avtar/02.jpg')} alt="avtar-img" />
|
||||
<span className="bg-success user-status"></span>
|
||||
</a>
|
||||
<div ref={nav_menu} onClick={toggleMenu} className="dropdown-menu animated fadeIn">
|
||||
<div className="dropdown-menu animated fadeIn">
|
||||
<div className="bg-gradient px-4 py-3">
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="mr-1">
|
||||
{/* <h4 className="text-white mb-0 font-600">{userDetails?.username}</h4> */}
|
||||
<p className="text-white font-600">{userDetails.username}</p>
|
||||
<h5 className="text-white mb-0">{userDetails?.firstname} {userDetails?.lastname}</h5>
|
||||
<small className="text-white">{userDetails.email}</small>
|
||||
</div>
|
||||
<a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Logout"> <i
|
||||
@@ -90,35 +83,31 @@ export default function UserHeader(){
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.subscription}>
|
||||
<i className="fa fa-user pr-2 text-success"></i> Subscription</Link>
|
||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.contacts}>
|
||||
<i className="fa fa-envelope pr-2 text-primary"></i> Contacts
|
||||
<a className="dropdown-item d-flex nav-link" href="#">
|
||||
<i className="fa fa-user pr-2 text-success"></i> Profile</a>
|
||||
<a className="dropdown-item d-flex nav-link" href="#">
|
||||
<i className="fa fa-envelope pr-2 text-primary"></i> Inbox
|
||||
<span className="badge badge-primary ml-auto">6</span>
|
||||
</Link>
|
||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.settings}>
|
||||
</a>
|
||||
<a className="dropdown-item d-flex nav-link" href="#">
|
||||
<i className=" ti ti-settings pr-2 text-info"></i> Settings
|
||||
</Link>
|
||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.help}>
|
||||
<i className="fa fa-compass pr-2 text-warning"></i>
|
||||
Need help?
|
||||
</Link>
|
||||
|
||||
{/*<div className="row mt-2">*/}
|
||||
{/* <div className="col">*/}
|
||||
{/* <a className="bg-light p-3 text-center d-block" href="#">*/}
|
||||
{/* <i className="fe fe-mail font-20 text-primary"></i>*/}
|
||||
{/* <span className="d-block font-13 mt-2">My messages</span>*/}
|
||||
{/* </a>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="col">*/}
|
||||
{/* <a className="bg-light p-3 text-center d-block" href="#">*/}
|
||||
{/* <i className="fe fe-plus font-20 text-primary"></i>*/}
|
||||
{/* <span className="d-block font-13 mt-2">Compose new</span>*/}
|
||||
{/* </a>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
</a>
|
||||
<a className="dropdown-item d-flex nav-link" href="#">
|
||||
<i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
|
||||
<div className="row mt-2">
|
||||
<div className="col">
|
||||
<a className="bg-light p-3 text-center d-block" href="#">
|
||||
<i className="fe fe-mail font-20 text-primary"></i>
|
||||
<span className="d-block font-13 mt-2">My messages</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col">
|
||||
<a className="bg-light p-3 text-center d-block" href="#">
|
||||
<i className="fe fe-plus font-20 text-primary"></i>
|
||||
<span className="d-block font-13 mt-2">Compose new</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function UserMenu() {
|
||||
<li className="nav-static-title">Panel</li>
|
||||
<li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
|
||||
<Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
<i className="nav-icon ti ti-home"></i>
|
||||
<i className="nav-icon ti ti-rocket"></i>
|
||||
<div className='d-flex gap-2 justify-content-between align-items-center'>
|
||||
<span className="nav-title">Dashboard</span>
|
||||
<IoIosArrowDown />
|
||||
@@ -48,7 +48,7 @@ export default function UserMenu() {
|
||||
</div>
|
||||
</Link>
|
||||
<ul id="collapseTwo" className="collapse" aria-labelledby="headingTwo" data-bs-parent="#sidebarNav">
|
||||
<li className={`${pathname == siteLinks.subscription ? 'active' : ''}`}><Link to={siteLinks.subscription}>Subscription</Link></li>
|
||||
<li className={`${pathname == siteLinks.user ? 'active' : ''}`}><Link to={siteLinks.user}>Users</Link></li>
|
||||
<li className={`${pathname == siteLinks.settings ? 'active' : ''}`}><Link to={siteLinks.settings}>Settings</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from 'react'
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
export default function Onboard() {
|
||||
|
||||
const pricingFields ={
|
||||
starter: { name: 'Starter', price: 5.99, active: true },
|
||||
basic: { name: 'Basic', price: 12.99, active: true },
|
||||
premium: { name: 'Premium', price: 20.00, active: true },
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
|
||||
|
||||
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>Current Subscription(s)</h5>
|
||||
<h2 className="text-primary pt-3">Basic</h2>
|
||||
{/*<p className="text-primary pb-3">/ Monthly</p>*/}
|
||||
{/*<ul className="py-2">*/}
|
||||
{/* <li>post jobs</li>*/}
|
||||
{/* <li>advanced instructors search</li>*/}
|
||||
{/* <li>invite candidates</li>*/}
|
||||
{/* <li>post events</li>*/}
|
||||
{/* <li>cancel any time</li>*/}
|
||||
{/*</ul>*/}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<>
|
||||
{Object.entries(pricingFields)?.map(([key, value]) => (
|
||||
|
||||
<div key={key} className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>{value.name}</h5>
|
||||
<h2 className="text-primary pt-3">${value.price}</h2>
|
||||
<p className="text-primary pb-3">/ Monthly</p>
|
||||
<ul className="py-2">
|
||||
<li>post jobs</li>
|
||||
<li>advanced instructors search</li>
|
||||
<li>invite candidates</li>
|
||||
<li>post events</li>
|
||||
<li>cancel any time</li>
|
||||
</ul>
|
||||
<div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go {value.name}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</>
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,162 +1,140 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import React from "react";
|
||||
import getImage from "../../utils/getImage";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import GeneralTab from "./settingsTab/GeneralTab";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { productRefreshSite } from "../../services/services";
|
||||
|
||||
|
||||
export default function ProductActive({productData}){
|
||||
const iframe = useRef()
|
||||
|
||||
const dataFields ={
|
||||
site_title: { name: 'Title', controls: 'TEXT', active: true },
|
||||
site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
|
||||
site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
|
||||
site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
|
||||
site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
|
||||
}
|
||||
|
||||
const socialFields ={
|
||||
facebook: { name: 'Facebook', controls: 'TEXT', active: true },
|
||||
twitter: { name: 'Twitter', controls: 'TEXT', active: true },
|
||||
youtube: { name: 'Youtube', controls: 'TEXT', active: true },
|
||||
}
|
||||
|
||||
const homeFields ={
|
||||
banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
|
||||
banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
|
||||
}
|
||||
|
||||
const footerFields ={
|
||||
footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
|
||||
}
|
||||
|
||||
const aboutFields ={
|
||||
about_description: { name: 'About us', controls: 'TEXTAREA', active: true },
|
||||
}
|
||||
|
||||
const templateData = {
|
||||
template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
|
||||
template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
|
||||
template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
|
||||
template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
|
||||
template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
|
||||
template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
|
||||
template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
|
||||
template_9 : { title: 'Template Name-9', template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
|
||||
}
|
||||
|
||||
const settingsObject = {
|
||||
settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
|
||||
home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false, data: homeFields},
|
||||
footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
|
||||
about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
|
||||
contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: {} },
|
||||
social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
|
||||
template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
|
||||
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
|
||||
};
|
||||
|
||||
|
||||
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
|
||||
|
||||
const refresh = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return productRefreshSite(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
iframe.current.src += ''
|
||||
}
|
||||
})
|
||||
|
||||
const handleRefresh = () => {
|
||||
const reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData.product_id,
|
||||
subscription_uid: productData.subscription_uid
|
||||
}
|
||||
refresh.mutate(reqData)
|
||||
}
|
||||
let externalUrl= 'https://'+productData?.internal_url
|
||||
export default function ProductActive(){
|
||||
|
||||
return(
|
||||
<>
|
||||
{/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
|
||||
<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />
|
||||
{/*<div className="row">*/}
|
||||
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<div className="row account-contant">
|
||||
<>
|
||||
<div className="row tabs-contant">
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading d-flex justify-content-between">
|
||||
<h4 className="card-title">{externalUrl}</h4>
|
||||
<button type="button" onClick={()=>iframe.current.src += ''} className="btn">
|
||||
<img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
|
||||
</button>
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-xl-3 pb-xl-0 pb-5 border-right">
|
||||
<div className="page-account-profil pt-5">
|
||||
<div className="profile-img text-center rounded-circle">
|
||||
<div className="pt-5">
|
||||
<div className="bg-img m-auto">
|
||||
<img src={getImage('widget/01.jpg')} className="img-fluid"
|
||||
alt="users-avatar" />
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">Product Short Name</h4>
|
||||
<p>last Update : 00:00:0000</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
|
||||
</div>
|
||||
<div className="p-4 ml-auto">
|
||||
<button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title"> Site Settings </h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<li key={key} className="nav-item">
|
||||
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
|
||||
id={key} data-bs-toggle="pill"
|
||||
// data-bs-target={`#${value.controls}`}
|
||||
type="button" role="tab"
|
||||
// aria-controls={value.controls}
|
||||
// aria-selected="true"
|
||||
onClick={()=>setActiveTab(value.controls)}
|
||||
>
|
||||
{value.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<>
|
||||
{Object.entries(settingsObject).map(([key, value]) => (
|
||||
<div key={key} className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
|
||||
// id={value.controls} role="tabpanel"
|
||||
// aria-labelledby={key}
|
||||
>
|
||||
<GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
|
||||
<div className="col-xl-5 col-md-6 col-12 border-t border-right">
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Edit Your Product Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4 col-md-6 border-t col-12">
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Your External Link</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<label htmlFor="fb">Facebook URL:</label>
|
||||
<input type="text" className="form-control" id="fb"
|
||||
value="https://www.facebook.com/" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="tr">Twitter URL:</label>
|
||||
<input type="text" className="form-control" id="tr"
|
||||
value="https://twitter.com/" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="br">Blogger URL:</label>
|
||||
<input type="text" className="form-control" id="br"
|
||||
value="https://www.blogger.com" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="go">Google+ URL:</label>
|
||||
<input type="text" className="form-control" id="go"
|
||||
value="https://plus.google.com/discover" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="li">LinkedIn URL:</label>
|
||||
<input type="text" className="form-control" id="li"
|
||||
value="https://in.linkedin.com/" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="we">Website URL:</label>
|
||||
<input type="text" className="form-control" id="we"
|
||||
value="https://yourwebsite.com" />
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Save & Update</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,34 +1,39 @@
|
||||
import React, {useState} from "react";
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
// import getImage from "../../utils/getImage";
|
||||
import ProductStart from "./ProductStart";
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import {MyProductData} from "../../services/services";
|
||||
import {MyProductData, productData} from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import ProductActive from "./ProductActive";
|
||||
import ProductProvision from "./ProductProvision";
|
||||
import {productConst} from "../../constants/products";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
|
||||
export default function ProductFactory(){
|
||||
const location = useLocation();
|
||||
const pathname = location.pathname;
|
||||
const [productStatus, setProductStatus] = useState(0);
|
||||
|
||||
//productConst.PRODUCT_ACTIVE
|
||||
|
||||
|
||||
// Split the pathname by '/' and get the last element
|
||||
const productID = pathname.split('/').pop();
|
||||
const lastPart = pathname.split('/').pop();
|
||||
// console.log(lastPart)
|
||||
|
||||
let reqData = {
|
||||
product_id : productID,
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.product_page,
|
||||
queryFn: () => MyProductData(reqData),
|
||||
staleTime: 0
|
||||
queryKey: queryKeys.product,
|
||||
queryFn: () => MyProductData(lastPart)
|
||||
})
|
||||
|
||||
const myproduct_data = data?.data?.myproduct?.myproudct // PRODUCT DETAILS
|
||||
|
||||
|
||||
const myproduct_data = data?.data?.myproduct_data
|
||||
//setProductStatus(myproduct_data?.status)
|
||||
|
||||
const product_name = myproduct_data?.product_name;
|
||||
|
||||
const product_status = myproduct_data?.status;
|
||||
|
||||
return(
|
||||
@@ -46,23 +51,24 @@ export default function ProductFactory(){
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
<p className='text-danger'>{error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
{(product_status <= productConst.PRODUCT_AVAILABLE)?
|
||||
<ProductStart productData={myproduct_data} />
|
||||
:<></> }
|
||||
:
|
||||
<div>
|
||||
{(product_status <= productConst.PRODUCT_AVAILABLE)?
|
||||
<ProductStart productData={myproduct_data} />
|
||||
:<></> }
|
||||
|
||||
{(product_status === productConst.PRODUCT_PROVISIONING)?
|
||||
<ProductProvision productData={myproduct_data} />
|
||||
:<></> }
|
||||
{(product_status === productConst.PRODUCT_PROVISIONING)?
|
||||
<ProductProvision productData={myproduct_data} />
|
||||
:<></> }
|
||||
|
||||
{(product_status === productConst.PRODUCT_ACTIVE)?
|
||||
<ProductActive productData={myproduct_data} />
|
||||
:<></> }
|
||||
</div>
|
||||
{(product_status === productConst.PRODUCT_ACTIVE)?
|
||||
<ProductActive productData={myproduct_data} />
|
||||
:<></> }
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -12,20 +12,14 @@ export default function ProductProvision(props){
|
||||
const productTitle = props?.productData?.title;
|
||||
const productDescription = props?.productData?.description;
|
||||
const productID = props?.productData?.product_id
|
||||
const productUID = props?.productData?.product_uid
|
||||
const productSubUID = props?.productData?.product_subscription_uid
|
||||
|
||||
const reqData = {
|
||||
product_id : productID,
|
||||
product_subscription_uid: productSubUID
|
||||
}
|
||||
|
||||
const {data:provision, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.myproduct_provision,
|
||||
queryFn: () => productProvision(reqData)
|
||||
queryFn: () => productProvision(productID)
|
||||
})
|
||||
|
||||
const provisionData = provision?.data
|
||||
const provisionData = provision?.data?.provision
|
||||
|
||||
useEffect(()=>{
|
||||
joinRoom(productSubUID); // provision subscription room
|
||||
@@ -60,7 +54,7 @@ export default function ProductProvision(props){
|
||||
<div className="card-body">
|
||||
<div className="progress">
|
||||
<div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div>
|
||||
aria-valuenow={`${provisionData.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData.percent_completed}%`}} ></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,9 +104,11 @@ export default function ProductProvision(props){
|
||||
<div className="card card-statistics ">
|
||||
<h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
|
||||
<img className="card-img-top" src={getImage('widget/working.jpg')} alt="Card image cap" />
|
||||
{/* <div className="card-body">
|
||||
<div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
|
||||
</div> */}
|
||||
<div className="card-body">
|
||||
<p>
|
||||
{productDescription}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import {useNavigate} from 'react-router-dom'
|
||||
import getImage from "../../utils/getImage";
|
||||
import { Modal } from "bootstrap";
|
||||
// import { Modal } from "bootstrap";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { subscribe } from '../../services/services'
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
@@ -9,28 +8,24 @@ import queryKeys from "../../services/queryKeys";
|
||||
export default function ProductStart(props){
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({status:false, message: ''})
|
||||
|
||||
const product_uid = props?.productData?.product_uid;
|
||||
const product_id = props?.productData?.product_id;
|
||||
const productBanner = `product/${props.productData?.banner}`;
|
||||
const productTitle = props?.productData?.title;
|
||||
const productDescription = props?.productData?.description;
|
||||
const promotion_text = props?.productData?.promotion_text;
|
||||
const product_status = props?.productData?.status;
|
||||
const saleText = props?.productData?.sale_text;
|
||||
const productBanner = "product/"+props.productData?.banner;
|
||||
const productTitle = props.productData?.title;
|
||||
const productDescription = props.productData?.description;
|
||||
const promotion_text = props.productData?.promotion_text;
|
||||
const product_status = props.productData?.status;
|
||||
const modalRef = useRef()
|
||||
|
||||
const modalRef = useRef(null)
|
||||
|
||||
const invalidate = () => {
|
||||
// queryClient.refetchQueries({
|
||||
// queryKey: [...queryKeys.product],
|
||||
// // type: 'active',
|
||||
// // exact: true,
|
||||
// })
|
||||
queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] })
|
||||
queryClient.invalidateQueries({ queryKey: [...queryKeys.product_page] })
|
||||
const refetch = () => {
|
||||
queryClient.refetchQueries({
|
||||
queryKey: [...queryKeys.product],
|
||||
// type: 'active',
|
||||
// exact: true,
|
||||
})
|
||||
}
|
||||
|
||||
const mutation = useMutation({
|
||||
@@ -43,12 +38,9 @@ export default function ProductStart(props){
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
setRequestStatus({status:true, message:'successful'})
|
||||
navigate(`/product/${product_id}`, {replace: true}) //'/product/'+ product_id
|
||||
dismissModal()
|
||||
console.log(res)
|
||||
},
|
||||
onSettled: () => {
|
||||
invalidate() // Invalidates selected queries
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({status:false, message:''})
|
||||
},4000)
|
||||
@@ -59,22 +51,6 @@ export default function ProductStart(props){
|
||||
mutation.mutate({product_id: product_id})
|
||||
}
|
||||
|
||||
const dismissModal = () => {
|
||||
const body = document.querySelector('body')
|
||||
body.removeAttribute('style')
|
||||
// body.classList.toggle('modal-open')
|
||||
|
||||
const modalBackdrop = document.querySelectorAll('.modal-backdrop')
|
||||
modalBackdrop.forEach(item => {
|
||||
if (item) {
|
||||
item.remove();
|
||||
}
|
||||
})
|
||||
|
||||
const modal = Modal.getInstance(modalRef.current);
|
||||
modal && modal.hide();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
@@ -83,8 +59,7 @@ export default function ProductStart(props){
|
||||
<img className="card-img-top" src={getImage(productBanner)} alt="Card image cap" />
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">{productTitle}</h4>
|
||||
<div className="card-text" dangerouslySetInnerHTML={{__html: productDescription}}/>
|
||||
{/* <p className="card-text">{productDescription}</p> */}
|
||||
<p className="card-text">{productDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,12 +110,21 @@ export default function ProductStart(props){
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
|
||||
<button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="" dangerouslySetInnerHTML={{__html: saleText}}/>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
|
||||
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
|
||||
eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
|
||||
</p>
|
||||
<p>
|
||||
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia
|
||||
bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque
|
||||
nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor
|
||||
fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
|
||||
</p>
|
||||
{/* {mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
@@ -162,7 +146,7 @@ export default function ProductStart(props){
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
||||
<button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,278 +0,0 @@
|
||||
import React from "react";
|
||||
import getImage from "../../utils/getImage";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
|
||||
|
||||
export default function ProductActive(){
|
||||
|
||||
return(
|
||||
<>
|
||||
{/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
|
||||
{/*<div className="row">*/}
|
||||
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<div className="row account-contant">
|
||||
<>
|
||||
|
||||
|
||||
<div className="row tabs-contant">
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">https://25681.devprov.mermsemr.com/</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<iframe style={{borderWidth: '0px;'}} src="https://25681.devprov.mermsemr.com/" width="100%" height="600" title="https://25681.devprov.mermsemr.com"></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title"> Site Settings </h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link active show" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">General</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Home Page</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="profile-09-tab" data-toggle="tab" href="#profile-09" role="tab" aria-controls="profile-09" aria-selected="false"> Footer </a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="portfolio-09-tab" data-toggle="tab" href="#portfolio-09" role="tab" aria-controls="portfolio-09" aria-selected="false">About Page </a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="contact-09-tab" data-toggle="tab" href="#contact-09" role="tab" aria-controls="contact-09" aria-selected="false"> Contact Page</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Socials</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true">Template</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" id="home-09-tab" data-toggle="tab" href="#home-09" role="tab" aria-controls="home-09" aria-selected="true"> Color Scheme</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane fade active show" id="home-09" role="tabpanel" aria-labelledby="home-09-tab">
|
||||
|
||||
<div className="page-account-form">
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="tab-pane fade" id="profile-09" role="tabpanel" aria-labelledby="profile-09-tab">
|
||||
<div className="page-account-form">
|
||||
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-pane fade" id="portfolio-09" role="tabpanel" aria-labelledby="portfolio-09-tab">
|
||||
<p>
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Edit Your Product Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</p> </div>
|
||||
<div className="tab-pane fade" id="contact-09" role="tabpanel" aria-labelledby="contact-09-tab">
|
||||
<p>
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Edit Your Product Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import React, {memo, useState} from 'react'
|
||||
import SiteTemplateSelector from './SiteTemplateSelector';
|
||||
|
||||
const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
|
||||
console.log("Page data == ", data)
|
||||
|
||||
const fieldData = {}
|
||||
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
||||
fieldData[value.name] = ''
|
||||
})
|
||||
const [fields, setFields] = useState(fieldData)
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setFields(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log('formInfo', fields)
|
||||
}
|
||||
|
||||
if (isCustom === true){
|
||||
return <SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0" style={{ minHeight: '500px'}}>
|
||||
|
||||
<form id='tab_form'>
|
||||
<div className="form-row">
|
||||
<>
|
||||
{Object.entries(data)?.map(([key, value]) => (
|
||||
<div key={key} className="form-group col-md-12">
|
||||
<label htmlFor="name1">{value.name}</label>
|
||||
{value.controls == 'TEXT' ?
|
||||
<input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
|
||||
:value.controls == 'TEXTAREA' ?
|
||||
<textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
<div className="form-group col-md-12" style={{textAlign:'right'}}>
|
||||
<button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export default GeneralTab
|
||||
@@ -1,33 +0,0 @@
|
||||
import React, {memo} from 'react'
|
||||
import getImage from "../../../utils/getImage";
|
||||
|
||||
const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
|
||||
console.log("Page data == ", data)
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0">
|
||||
<div className="row">
|
||||
<>
|
||||
{Object.entries(data)?.map(([key, value]) => (
|
||||
<div key={key} className="col-xl-6 col-sm-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body">
|
||||
<div className="text-center p-2">
|
||||
<div className="mb-2">
|
||||
<img src={getImage(value.banner)} alt={value.title} />
|
||||
</div>
|
||||
<h4 className="mb-0">{value.title}</h4>
|
||||
<a href="javascript:void(0)" className="btn btn-light">Activate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
export default SiteTemplateSelector
|
||||
@@ -15,7 +15,7 @@ export default function Settings(){
|
||||
<div className="row account-contant">
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-0" style={{backgroundColor:"#f9f9fb"}}>
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-xl-3 pb-xl-0 pb-5 border-right">
|
||||
<div className="page-account-profil pt-5">
|
||||
@@ -62,9 +62,9 @@ export default function Settings(){
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
</button>
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <button className="btn btn-danger">Delete</button>*/}
|
||||
{/*</div>*/}
|
||||
<div>
|
||||
<button className="btn btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,25 +77,15 @@ export default function Settings(){
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">First Name</label>
|
||||
<label htmlFor="name1">Full Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice" />
|
||||
value="Alice Williams" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Last Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Williams" />
|
||||
<label htmlFor="title1">Title</label>
|
||||
<input type="text" className="form-control" id="title1"
|
||||
value="Marketing expert" />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Account Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="This is the best hospital name" />
|
||||
</div>
|
||||
{/*<div className="form-group col-md-12">*/}
|
||||
{/* <label htmlFor="title1">Email</label>*/}
|
||||
{/* <input type="text" className="form-control" id="title1"*/}
|
||||
{/* value="email@email.com" />*/}
|
||||
{/*</div>*/}
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
@@ -118,47 +108,135 @@ export default function Settings(){
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
|
||||
</div>
|
||||
|
||||
{/*<div className="form-row">*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState3">City</label>*/}
|
||||
{/* <select id="inputState3" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">London</option>*/}
|
||||
{/* <option>Montreal</option>*/}
|
||||
{/* <option>Delhi</option>*/}
|
||||
{/* <option>Tokyo</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState4">State</label>*/}
|
||||
{/* <select id="inputState4" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">England</option>*/}
|
||||
{/* <option>California</option>*/}
|
||||
{/* <option>Texas</option>*/}
|
||||
{/* <option>Scotland</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputZip">Zip</label>*/}
|
||||
{/* <input type="text" className="form-control" id="inputZip"*/}
|
||||
{/* value="EC1A 1BB" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="form-group">*/}
|
||||
{/* <div className="form-check">*/}
|
||||
{/* <input className="form-check-input" type="checkbox"*/}
|
||||
{/* id="gridCheck" />*/}
|
||||
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
||||
{/* I agree to receive email notification.*/}
|
||||
{/* </label>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div style={{textAlign:"right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Profile
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<div className="col-12">
|
||||
<label className="mb-1">Birthday</label>
|
||||
</div>
|
||||
<div className="form-group col-md-4">
|
||||
<select id="inputState" className="form-control">
|
||||
<option>Date</option>
|
||||
<option>01</option>
|
||||
<option>02</option>
|
||||
<option>03</option>
|
||||
<option>04</option>
|
||||
<option>05</option>
|
||||
<option>06</option>
|
||||
<option>07</option>
|
||||
<option>08</option>
|
||||
<option>09</option>
|
||||
<option>10</option>
|
||||
<option selected="">11</option>
|
||||
<option>12</option>
|
||||
<option>13</option>
|
||||
<option>14</option>
|
||||
<option>15</option>
|
||||
<option>16</option>
|
||||
<option>17</option>
|
||||
<option>18</option>
|
||||
<option>19</option>
|
||||
<option>20</option>
|
||||
<option>21</option>
|
||||
<option>22</option>
|
||||
<option>23</option>
|
||||
<option>24</option>
|
||||
<option>25</option>
|
||||
<option>26</option>
|
||||
<option>27</option>
|
||||
<option>28</option>
|
||||
<option>29</option>
|
||||
<option>30</option>
|
||||
<option>31</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group col-md-4">
|
||||
<select id="inputState1" className="form-control">
|
||||
<option>Month</option>
|
||||
<option>January</option>
|
||||
<option>February</option>
|
||||
<option>March</option>
|
||||
<option>April</option>
|
||||
<option selected="">May</option>
|
||||
<option>June</option>
|
||||
<option>July</option>
|
||||
<option>August</option>
|
||||
<option>September</option>
|
||||
<option>October</option>
|
||||
<option>November</option>
|
||||
<option>December</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-md-4">
|
||||
<select id="inputState2" className="form-control">
|
||||
<option>Year</option>
|
||||
<option>1984</option>
|
||||
<option>1985</option>
|
||||
<option>1986</option>
|
||||
<option>1987</option>
|
||||
<option>1988</option>
|
||||
<option>1989</option>
|
||||
<option>1990</option>
|
||||
<option>1991</option>
|
||||
<option>1992</option>
|
||||
<option>1993</option>
|
||||
<option selected="">1994</option>
|
||||
<option>1995</option>
|
||||
<option>1996</option>
|
||||
<option>1997</option>
|
||||
<option>1998</option>
|
||||
<option>1999</option>
|
||||
<option>2000</option>
|
||||
<option>2001</option>
|
||||
<option>2002</option>
|
||||
<option>2003</option>
|
||||
<option>2004</option>
|
||||
<option>2005</option>
|
||||
<option>2006</option>
|
||||
<option>2007</option>
|
||||
<option>2008</option>
|
||||
<option>2009</option>
|
||||
<option>2010</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-4">
|
||||
<label htmlFor="inputState3">City</label>
|
||||
<select id="inputState3" className="form-control">
|
||||
<option>Choose...</option>
|
||||
<option selected="">London</option>
|
||||
<option>Montreal</option>
|
||||
<option>Delhi</option>
|
||||
<option>Tokyo</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group col-md-4">
|
||||
<label htmlFor="inputState4">State</label>
|
||||
<select id="inputState4" className="form-control">
|
||||
<option>Choose...</option>
|
||||
<option selected="">England</option>
|
||||
<option>California</option>
|
||||
<option>Texas</option>
|
||||
<option>Scotland</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group col-md-4">
|
||||
<label htmlFor="inputZip">Zip</label>
|
||||
<input type="text" className="form-control" id="inputZip"
|
||||
value="EC1A 1BB" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox"
|
||||
id="gridCheck" />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I agree to receive email notification.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Update Information
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,10 +282,7 @@ export default function Settings(){
|
||||
<input type="text" className="form-control" id="we"
|
||||
value="https://yourwebsite.com" />
|
||||
</div>
|
||||
<div style={{textAlign:"right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Links</button>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">Save & Update</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from 'react'
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
export default function Subscription() {
|
||||
|
||||
const pricingFields ={
|
||||
starter: { name: 'Starter', price: 5.99, active: true },
|
||||
basic: { name: 'Basic', price: 12.99, active: true },
|
||||
premium: { name: 'Premium', price: 20.00, active: true },
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Subscription' paths={['Dashboard', 'Subscription']} />
|
||||
|
||||
|
||||
|
||||
<div className="row">
|
||||
<div className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>Current Subscription(s)</h5>
|
||||
<h2 className="text-primary pt-3">Basic</h2>
|
||||
{/*<p className="text-primary pb-3">/ Monthly</p>*/}
|
||||
{/*<ul className="py-2">*/}
|
||||
{/* <li>post jobs</li>*/}
|
||||
{/* <li>advanced instructors search</li>*/}
|
||||
{/* <li>invite candidates</li>*/}
|
||||
{/* <li>post events</li>*/}
|
||||
{/* <li>cancel any time</li>*/}
|
||||
{/*</ul>*/}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<>
|
||||
{Object.entries(pricingFields)?.map(([key, value]) => (
|
||||
|
||||
<div key={key} className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>{value.name}</h5>
|
||||
<h2 className="text-primary pt-3">${value.price}</h2>
|
||||
<p className="text-primary pb-3">/ Monthly</p>
|
||||
<ul className="py-2">
|
||||
<li>post jobs</li>
|
||||
<li>advanced instructors search</li>
|
||||
<li>invite candidates</li>
|
||||
<li>post events</li>
|
||||
<li>cancel any time</li>
|
||||
</ul>
|
||||
<div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go {value.name}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</>
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
+166
-166
@@ -53,172 +53,172 @@ export default function Users(){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
|
||||
{/* <div className="card card-statistics contact-contant">*/}
|
||||
{/* <div className="card-body py-4">*/}
|
||||
{/* <div className="d-flex align-items-center">*/}
|
||||
{/* <div className="bg-img">*/}
|
||||
{/* <img src="assets/img/avtar/02.jpg" alt="" className="img-fluid" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="ml-3">*/}
|
||||
{/* <h4 className="mb-0">Samuel Woods</h4>*/}
|
||||
{/* <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>026-123-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>80-1230-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>Samuel.Woods@gmail.com</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
|
||||
{/* <div className="card card-statistics contact-contant">*/}
|
||||
{/* <div className="card-body py-4">*/}
|
||||
{/* <div className="d-flex align-items-center">*/}
|
||||
{/* <div className="bg-img">*/}
|
||||
{/* <img src="assets/img/avtar/03.jpg" alt="" className="img-fluid" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="ml-3">*/}
|
||||
{/* <h4 className="mb-0">Garettdon</h4>*/}
|
||||
{/* <p><span className="badge badge-primary-inverse px-2 py-1 mt-1">Office</span></p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>026-123-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>80-1230-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>Garettdon@gmail.com</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
|
||||
{/* <div className="card card-statistics contact-contant">*/}
|
||||
{/* <div className="card-body py-4">*/}
|
||||
{/* <div className="d-flex align-items-center">*/}
|
||||
{/* <div className="bg-img">*/}
|
||||
{/* <img src="assets/img/avtar/04.jpg" alt="" className="img-fluid" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="ml-3">*/}
|
||||
{/* <h4 className="mb-0">Garynice</h4>*/}
|
||||
{/* <p><span className="badge badge-warning-inverse px-2 py-1 mt-1">Home</span></p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>026-123-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>80-1230-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>Garynice@gmail.com</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
|
||||
{/* <div className="card card-statistics contact-contant">*/}
|
||||
{/* <div className="card-body py-4">*/}
|
||||
{/* <div className="d-flex align-items-center">*/}
|
||||
{/* <div className="bg-img">*/}
|
||||
{/* <img src="assets/img/avtar/05.jpg" alt="" className="img-fluid" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="ml-3">*/}
|
||||
{/* <h4 className="mb-0">Andrew nico</h4>*/}
|
||||
{/* <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>026-123-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>80-1230-8546</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <ul className="nav">*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
|
||||
{/* </li>*/}
|
||||
{/* <li className="nav-item">*/}
|
||||
{/* <p>Andrew.nico@gmail.com</p>*/}
|
||||
{/* </li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="col-xxl-3 col-xl-4 col-sm-6">
|
||||
<div className="card card-statistics contact-contant">
|
||||
<div className="card-body py-4">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/02.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Samuel Woods</h4>
|
||||
<p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon">
|
||||
<div className="img-icon"><i className="fa fa-mobile"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>026-123-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-phone"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>80-1230-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-envelope-o"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>Samuel.Woods@gmail.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-3 col-xl-4 col-sm-6">
|
||||
<div className="card card-statistics contact-contant">
|
||||
<div className="card-body py-4">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/03.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Garettdon</h4>
|
||||
<p><span className="badge badge-primary-inverse px-2 py-1 mt-1">Office</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-mobile"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>026-123-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-phone"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>80-1230-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-envelope-o"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>Garettdon@gmail.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-3 col-xl-4 col-sm-6">
|
||||
<div className="card card-statistics contact-contant">
|
||||
<div className="card-body py-4">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/04.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Garynice</h4>
|
||||
<p><span className="badge badge-warning-inverse px-2 py-1 mt-1">Home</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-mobile"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>026-123-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-phone"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>80-1230-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-envelope-o"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>Garynice@gmail.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-3 col-xl-4 col-sm-6">
|
||||
<div className="card card-statistics contact-contant">
|
||||
<div className="card-body py-4">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/05.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Andrew nico</h4>
|
||||
<p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-mobile"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>026-123-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-phone"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>80-1230-8546</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav">
|
||||
<li className="nav-item">
|
||||
<div className="img-icon"><i className="fa fa-envelope-o"></i></div>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<p>Andrew.nico@gmail.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-3 col-xl-4 col-sm-6">
|
||||
<div className="card card-statistics contact-contant">
|
||||
<div className="card-body py-4">
|
||||
|
||||
@@ -31,14 +31,13 @@
|
||||
.fc-event {
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
// cursor: move;
|
||||
cursor: move;
|
||||
font-size: 13px;
|
||||
margin: 5px 0px;
|
||||
padding: 10px 10px 10px 40px;
|
||||
text-align: left;
|
||||
position:relative;
|
||||
&:before {
|
||||
display: none;
|
||||
content:'';
|
||||
position:absolute;
|
||||
width:15px;
|
||||
@@ -50,9 +49,6 @@
|
||||
&-primary {
|
||||
@include hex-rgba($primary, 0.2);
|
||||
color:$primary;
|
||||
& label {
|
||||
color:$primary;
|
||||
}
|
||||
&:before {
|
||||
@include hex-rgba($primary, 0.8);
|
||||
}
|
||||
@@ -63,9 +59,6 @@
|
||||
&-warning {
|
||||
@include hex-rgba($warning, 0.2);
|
||||
color:$warning;
|
||||
& label {
|
||||
color:$warning;
|
||||
}
|
||||
&:before {
|
||||
@include hex-rgba($warning, 0.8);
|
||||
}
|
||||
@@ -76,9 +69,6 @@
|
||||
&-danger {
|
||||
@include hex-rgba($danger, 0.2);
|
||||
color:$danger;
|
||||
& label {
|
||||
color:$danger;
|
||||
}
|
||||
&:before {
|
||||
@include hex-rgba($danger, 0.8);
|
||||
}
|
||||
@@ -89,9 +79,6 @@
|
||||
&-success {
|
||||
@include hex-rgba($success, 0.2);
|
||||
color:$success;
|
||||
& label {
|
||||
color:$success;
|
||||
}
|
||||
&:before {
|
||||
@include hex-rgba($success, 0.8);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
}
|
||||
.mail-msg{
|
||||
max-height: 747px;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
@include laptop {
|
||||
max-height: 450px;
|
||||
@@ -85,13 +85,7 @@
|
||||
}
|
||||
|
||||
.mail-contant .mail-f{
|
||||
position: relative;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
@include desktop {
|
||||
position: absolute;
|
||||
}
|
||||
@include desktop-lg {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -588,16 +588,11 @@
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.show{
|
||||
margin-top: 0!important;
|
||||
visibility: visible!important;
|
||||
opacity: 1!important;
|
||||
.show + .dropdown-menu{
|
||||
margin-top: 0;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
// .show + .dropdown-menu{
|
||||
// margin-top: 0;
|
||||
// visibility: visible;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// .show {
|
||||
// .dropdown-menu{
|
||||
// margin-top: 0;
|
||||
|
||||
@@ -10,7 +10,6 @@ body {
|
||||
outline:0;
|
||||
background:$body;
|
||||
color:$muted;
|
||||
font-weight: $font-regular;
|
||||
&.sidebar-mini {
|
||||
.app-main {
|
||||
padding-left:$sidebar-mini;
|
||||
|
||||
@@ -39,7 +39,8 @@ h6 {
|
||||
|
||||
p {
|
||||
color: $muted;
|
||||
font-size: $font-18;
|
||||
font-weight: $font-regular;
|
||||
font-size: $font-base;
|
||||
line-height: $line-md;
|
||||
}
|
||||
a {
|
||||
|
||||
@@ -35,13 +35,13 @@ $container-max-widths: (
|
||||
|
||||
// Colors
|
||||
$body : #f9f9fb;
|
||||
$primary : #148399; //#8E54E9;
|
||||
$primary : #8E54E9;
|
||||
$primary2 : #4776E6;
|
||||
$secondary : #a1a1a1;
|
||||
$light-gray : #eceef3;
|
||||
$dark-gray : #2c2e3e;
|
||||
$darker-gray : #333333;
|
||||
$muted : #6c757d; //#a6a9b7;
|
||||
$muted : #a6a9b7;
|
||||
$info : #45aaf2;
|
||||
$danger : #e3324c;
|
||||
$cyan : #2bcbba;
|
||||
@@ -75,7 +75,7 @@ $behance : #053eff;
|
||||
$whatsapp : #4FCE5D;
|
||||
|
||||
// Font family
|
||||
$font-primary : 'Plus Jakarta Sans', sans-serif;
|
||||
$font-primary : 'Roboto', sans-serif;
|
||||
|
||||
//Font size
|
||||
|
||||
|
||||
+3
-28
@@ -90,18 +90,7 @@ $today-highlight-bg: #fcf8e3;
|
||||
$btn-bg: #8e54e9;
|
||||
$btn-border: #8e54e9;
|
||||
$event-padding: 10px;
|
||||
.manage{
|
||||
background-color:lightgreen !important;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
.creating{
|
||||
background-color: lightyellow !important;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
.billing{
|
||||
background-color: darkgoldenrod;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extraProductCard{
|
||||
background-color: aliceblue;
|
||||
border-radius: 5px;
|
||||
@@ -149,28 +138,14 @@ $event-padding: 10px;
|
||||
|
||||
.fc-today-button.fc-button,
|
||||
.fc-timeGridWeek-button.fc-button-active, .fc-timeGridDay-button.fc-button-active, .fc-dayGridMonth-button.fc-button-active{
|
||||
color: #fff !important;
|
||||
color: #fff!important;
|
||||
border: none;
|
||||
background-color: #8E54E9 !important;
|
||||
background-color: #8E54E9!important;
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
.fc-h-event,
|
||||
.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,
|
||||
.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event{
|
||||
padding: 10px 2px !important;
|
||||
background-color: #3788d8 !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-popover{
|
||||
overflow-y: auto !important;
|
||||
// height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.fc .fc-more-popover .fc-popover-body {
|
||||
overflow-y: auto;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
/* END OF CALENDER STYLE */
|
||||
+5
-3
@@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
// import './index.css';
|
||||
// import { Provider } from 'react-redux';
|
||||
// import store from './store/store'
|
||||
import { Provider } from 'react-redux';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import store from './store/store'
|
||||
|
||||
import App from './App';
|
||||
//import reportWebVitals from './reportWebVitals';
|
||||
@@ -17,7 +17,9 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
@@ -1,22 +1,18 @@
|
||||
const siteLinks = {
|
||||
error: '*',
|
||||
help: '/help',
|
||||
home: '/',
|
||||
dash: '/dash',
|
||||
product: '/product/*',
|
||||
contacts: '/contacts',
|
||||
comments: '/comments',
|
||||
reports: '/reports',
|
||||
subscription: '/subscription',
|
||||
onboard: '/subscription',
|
||||
user: '/user',
|
||||
calendar: '/calendar',
|
||||
settings: '/settings',
|
||||
login: '/auth/login',
|
||||
signup: '/auth/signup',
|
||||
forgetpwd: '/auth/forgetpwd',
|
||||
csignup: '/csignup/:jwt',
|
||||
accreset: '/accreset/:token'
|
||||
csignup: '/csignup/:jwt'
|
||||
}
|
||||
|
||||
export default siteLinks
|
||||
@@ -1,15 +1,10 @@
|
||||
const queryKeys = {
|
||||
user_details: ['user_details'],
|
||||
product_url: ['product_url'],
|
||||
products: ['product-data'],
|
||||
myproduct_provision: ['myproduct_provision'],
|
||||
product_page: ['product_page'],
|
||||
recentAction: ['recent-action'],
|
||||
|
||||
dashboard: ['dashboard'],
|
||||
topBar: ['top-bar'],
|
||||
calendar_events: ['calendar_events'],
|
||||
contacts: ['contacts']
|
||||
recentAction: ['recent-action'],
|
||||
product: ['product-data'],
|
||||
product_url: ['product_url'],
|
||||
myproduct_provision: ['myproduct_provision']
|
||||
}
|
||||
|
||||
export default queryKeys
|
||||
+43
-124
@@ -4,13 +4,12 @@ import axios from "axios"
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
config.headers = {
|
||||
Accept: "application/json",
|
||||
// Accept: "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
// "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
|
||||
// "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
|
||||
// "Content-Type": "application/json;charset=UTF-8",
|
||||
'Authorization': (localStorage && localStorage.getItem('access_token')) ? `Bearer ${localStorage.getItem('access_token')}` : '',
|
||||
// 'uuid': 'dummy'
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
};
|
||||
// config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
|
||||
// config.baseURL = process.env.REACT_APP_MAIN_API
|
||||
@@ -26,7 +25,7 @@ const postAuxEnd = (path, postData, media=false) => {
|
||||
return axios.post(`${basePath}${path}`, postData).then(res => {
|
||||
return res
|
||||
}).catch(err => {
|
||||
throw new Error(err.response.data.msg);
|
||||
throw new Error(err.response.data.message);
|
||||
})
|
||||
}
|
||||
|
||||
@@ -43,123 +42,20 @@ const getAuxEnd = (path, reqData= null) => {
|
||||
})
|
||||
}
|
||||
|
||||
// FUNCTION TO AUTHORIZE USER IN
|
||||
export const userToken = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/Authorize', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO LOGIN USER IN
|
||||
export const loginUser = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/Login', postData, false)
|
||||
return postAuxEnd('/panel/auth/login', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET USER INFO DATA
|
||||
export const userInfo = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/account', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD TOP BAR SECTION
|
||||
export const topBar = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/bar`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PRODUCT BY ID
|
||||
export const MyProductData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/myproduct/dash`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET CALENDAR EVENTS
|
||||
export const getCalendarEvents = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/calendar`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
||||
export const contactData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/contacts`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
|
||||
export const productsURL = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/products/url`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
||||
export const productsData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/products`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO REFRESH SITE
|
||||
export const productRefreshSite = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/products/refresh`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
|
||||
export const recentActions = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
//return getAuxEnd(`/panel/account/actions`)
|
||||
return postAuxEnd(`/panel/account/actions`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO VERIFY RESET TOKEN
|
||||
export const verifyResetToken = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/auth/resetverify', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO COMPLETE PASSWORD RESET
|
||||
export const completePWDReset = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/auth/resetcomplete', postData, false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// FUNCTION TO REGISTER USER
|
||||
export const signUpUser = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/Register', postData, false)
|
||||
return postAuxEnd('/panel/auth/register', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO VERIFY EMAIL
|
||||
@@ -167,7 +63,7 @@ export const verifyEmail = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/Register/verify', postData, false)
|
||||
return postAuxEnd('/panel/auth/register/verify', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO COMPLETE REGISTRATION
|
||||
@@ -175,17 +71,15 @@ export const completeRegistration = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/Register/complete', postData, false)
|
||||
return postAuxEnd('/panel/auth/register/complete', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO SUBSCRIBE
|
||||
export const subscribe = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd(`/panel/myproduct/subscription`, postData, false)
|
||||
return postAuxEnd('/panel/myproduct/subscription', postData, false)
|
||||
}
|
||||
|
||||
|
||||
@@ -197,14 +91,39 @@ export const recoverPWD = (reqData) => {
|
||||
return postAuxEnd('/panel/auth/reset', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET MY PRODUCT PROVISION DATA
|
||||
export const productProvision = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
return postAuxEnd(`/panel/myproduct/provision`, postData, false)
|
||||
// return getAuxEnd(`/panel/myproduct/provision`, postData)
|
||||
// FUNCTION TO GET DASHBOARD DATA
|
||||
export const accountDashboard = () => {
|
||||
return getAuxEnd(`/panel/account/dash`)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD TOP BAR SECTION
|
||||
export const topBar = () => {
|
||||
return getAuxEnd(`/panel/account/bar`)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
|
||||
export const recentActions = () => {
|
||||
return getAuxEnd(`/panel/account/actions`)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET MY PRODUCT PROVISION DATA
|
||||
export const productProvision = (productID) => {
|
||||
const reqData = { product_id : productID}
|
||||
return getAuxEnd(`/panel/myproduct/provision`,reqData)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
||||
export const productData = () => {
|
||||
return getAuxEnd(`/panel/account/products`)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
|
||||
export const productsURL = () => {
|
||||
return getAuxEnd(`/panel/account/products/url`)
|
||||
}
|
||||
|
||||
export const MyProductData = (productID) => {
|
||||
const reqData = { product_id : productID}
|
||||
//console.log(reqData)
|
||||
return getAuxEnd(`/panel/myproduct/dash`,reqData)
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
function getCustomTime(dateStr) {
|
||||
let date = new Date(dateStr);
|
||||
|
||||
if(isNaN(date)){
|
||||
return '00:00'
|
||||
}
|
||||
const hours = date.getHours()
|
||||
const minutes = date.getMinutes()
|
||||
|
||||
return `${hours}:${minutes} ${hours >= 12 ? 'PM' : 'AM'}`
|
||||
}
|
||||
|
||||
export default getCustomTime
|
||||
@@ -1,6 +1,6 @@
|
||||
let getImage = (location) => {
|
||||
if (!location) {
|
||||
return require(`../assets/img/logo-pink.png`);
|
||||
return require(`../assets/img/logo.png`);
|
||||
} else {
|
||||
return require(`../assets/img/${location}`);
|
||||
}
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import AccPWDReset from '../component/auth/AccPWDReset'
|
||||
|
||||
export default function AccPWDResetPage() {
|
||||
return (
|
||||
<AccPWDReset />
|
||||
)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import HelpCom from '../component/help/HelpCom'
|
||||
|
||||
export default function HelpPage() {
|
||||
return (
|
||||
<HelpCom />
|
||||
)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
import Onboard from '../component/onboard/Onboard';
|
||||
|
||||
|
||||
export default function OnboardPage(){
|
||||
return <Onboard />
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
import Subscription from '../component/subscription/Subscription';
|
||||
|
||||
|
||||
export default function SubscriptionPage(){
|
||||
return <Subscription />
|
||||
}
|
||||
Reference in New Issue
Block a user