Merge branch 'master-bootstrap' of MERMS/MermsPanelReactJS into master
This commit is contained in:
Gogs
@@ -16,6 +16,7 @@ services:
|
||||
- ./:/usr/src/app
|
||||
- ./src/:/usr/src/app/src
|
||||
- ./run.sh:/usr/src/app/run.sh
|
||||
- ./node_modules/:/usr/src/app/node_modules
|
||||
extra_hosts:
|
||||
- api.mermsemr.com:10.10.33.15
|
||||
- devapi.mermsemr.com:10.10.33.15
|
||||
|
||||
+5
-2
@@ -3,6 +3,11 @@
|
||||
"version": "0.1.1",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fullcalendar/core": "^6.1.15",
|
||||
"@fullcalendar/daygrid": "^6.1.15",
|
||||
"@fullcalendar/interaction": "^6.1.15",
|
||||
"@fullcalendar/react": "^6.1.15",
|
||||
"@fullcalendar/timegrid": "^6.1.15",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@reduxjs/toolkit": "^2.4.0",
|
||||
"@tanstack/react-query": "^5.62.3",
|
||||
@@ -12,11 +17,9 @@
|
||||
"apexcharts": "^4.1.0",
|
||||
"axios": "^1.7.9",
|
||||
"bootstrap": "^5.3.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"formik": "^2.4.6",
|
||||
"react": "^18.3.1",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"react-big-calendar": "^1.17.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.4.0",
|
||||
"react-redux": "^9.1.2",
|
||||
|
||||
@@ -13,8 +13,19 @@
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>MERMS-Panel</title>
|
||||
</head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y9QSQFV003"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-Y9QSQFV003');
|
||||
</script>
|
||||
<body class="light-sidebar">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> -->
|
||||
</html>
|
||||
|
||||
+1
-1
@@ -6,6 +6,6 @@
|
||||
|
||||
.signup-bg {
|
||||
background-image: url('./assets/bg/signup_bg.jpg') !important;
|
||||
background-size: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
+155
-103
@@ -2,35 +2,27 @@ import React, { useEffect, useState } from 'react'
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
// import LoginImg from '../../assets/bg/login.svg'
|
||||
|
||||
import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { signUpUser } from '../../services/services';
|
||||
import { completeRegistration, verifyEmail } from '../../services/services';
|
||||
|
||||
import { IoMdArrowDropdown } from "react-icons/io";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email("Wrong email format")
|
||||
// .matches(
|
||||
// /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
||||
// "Invalid email format"
|
||||
// )
|
||||
.min(3, "Minimum 3 characters")
|
||||
country: Yup.string().required("Username is required"),
|
||||
username: Yup.string().min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Email is required"),
|
||||
.required("Username is required"),
|
||||
password: Yup.string().required("Password is required"),
|
||||
confirmpassword: Yup.string().required("Confirm Password is required").oneOf([Yup.ref('password')], 'Passwords must match')
|
||||
// lastname: Yup.string().required("Lastname is required"),
|
||||
// isChecked: Yup.bool().oneOf([true], "Please accept the terms & policy"), // use bool instead of boolean
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
country: '',
|
||||
confirmpassword: '',
|
||||
// lastname: '',
|
||||
// isChecked: false,
|
||||
};
|
||||
|
||||
export default function CSignup() {
|
||||
@@ -39,27 +31,56 @@ export default function CSignup() {
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const mutation = useMutation({
|
||||
const [user, setUser] = useState(null)
|
||||
|
||||
// API to verify email link
|
||||
const verifyLink = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return signUpUser(fields)
|
||||
return verifyEmail(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
console.log('res', res)
|
||||
}
|
||||
setUser(res.data)
|
||||
},
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
// }
|
||||
})
|
||||
|
||||
const CSignUp = (values) => {
|
||||
// helpers.resetForm()
|
||||
// console.log('values', values, helpers)
|
||||
// mutation.mutate(values)
|
||||
console.log('values', values)
|
||||
const cSignup = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return completeRegistration(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
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
|
||||
}
|
||||
}
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
// }
|
||||
})
|
||||
|
||||
const completeSignup = (values) => {
|
||||
let reqData = {
|
||||
country : values.country,
|
||||
username: values.username,
|
||||
password: values.password,
|
||||
verify_link: user.verify_link
|
||||
}
|
||||
cSignup.mutate(reqData)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
if(!jwt){
|
||||
return navigate(siteLinks.login, {replace: true})
|
||||
}
|
||||
})
|
||||
verifyLink.mutate({verify_link: jwt})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
@@ -72,87 +93,118 @@ export default function CSignup() {
|
||||
<div className="mt-5 d-flex">
|
||||
<div className="bg-white register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome, Enter your password.</p>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={CSignUp}
|
||||
{/* <p>Welcome, Enter your password.</p> */}
|
||||
<div
|
||||
>
|
||||
{(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">
|
||||
<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.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>
|
||||
|
||||
{/* <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...' : 'Continue'}</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 className='mt-2'>
|
||||
<div className="row">
|
||||
{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={completeSignup}
|
||||
>
|
||||
{(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`}>Email: {user?.user?.email}</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">
|
||||
<div className="form-group" data-select2-id="7">
|
||||
<label className={`text-black fw-bold control-label ${(props.errors.country && props.touched.country) && 'text-danger'}`}>Country*</label>
|
||||
<div className='position-relative'>
|
||||
<select className="js-basic-single form-control select2-hidden-accessible" name="country" data-select2-id="1" tabIndex="-1" aria-hidden="true" value={props.values.country} onChange={props.handleChange}>
|
||||
<option value="" data-select2-id="3">Select</option>
|
||||
{user?.country?.list && user?.country?.list?.map(item => (
|
||||
<option key={item.code} value={item.code} data-select2-id="3">{item?.description}</option>
|
||||
))}
|
||||
</select>
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
|
||||
</div>
|
||||
</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="username" 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-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>
|
||||
|
||||
{/* <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> */}
|
||||
|
||||
<div className="col-12 mt-3 text-center">
|
||||
<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">
|
||||
{/* <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p> */}
|
||||
<p>Ready our Privacy Statement</p>
|
||||
</div>
|
||||
{cSignup.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{cSignup.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">{cSignup.isPending ? 'loading...' : 'Continue'}</button>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
:
|
||||
<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-danger'>{verifyLink?.error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="col-12 mt-3 text-center">
|
||||
<Link to={siteLinks.login} className='text-primary' style={{color: '#6FCAEF'}}>Need help with logging in or signing up?</Link>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
|
||||
<div className="col-12 mt-3 text-center">
|
||||
<p>Read our Privacy Statement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,9 +118,7 @@ export default function Login() {
|
||||
<div className="col-6">
|
||||
<div className="app-store-icons-wrap text-center">
|
||||
<a className="icon google"
|
||||
href='#'
|
||||
// href="https://play.google.com/store/apps/details?id=com.mermsemr.providers" target="_blank"
|
||||
>
|
||||
href='#' >
|
||||
<img src={IOSDownload} className='w-100 h-auto' alt='IOS Download' />
|
||||
</a>
|
||||
</div>
|
||||
@@ -128,10 +126,7 @@ export default function Login() {
|
||||
|
||||
<div className="col-6">
|
||||
<div className="app-store-icons-wrap text-center">
|
||||
<a className="icon apple"
|
||||
href='#'
|
||||
// href="https://play.google.com/store/apps/details?id=com.mermsemr.providers" target="_blank"
|
||||
>
|
||||
<a className="icon apple" href='#'>
|
||||
<img src={GoogleDownload} className='w-100 h-auto' alt='IOS Download' />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,44 @@
|
||||
import React, { useCallback, useState } from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import EventCalendar from "./EventCalendar";
|
||||
import ExternalDraggable from "./ExternalDraggable";
|
||||
|
||||
|
||||
export default function Calendar(){
|
||||
|
||||
const [draggedEvent, setDraggedEvent] = useState('undroppable')
|
||||
const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
|
||||
// const [draggedEvent, setDraggedEvent] = useState('undroppable')
|
||||
// const handleDragStart = (event) => {
|
||||
// setDraggedEvent(event)
|
||||
// }
|
||||
|
||||
// const dummyEvents = [
|
||||
// {id: '1', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2024-12-18'), end: new Date('2024-12-18'), isAllDay: false, resource: ''},
|
||||
// {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2024-12-19'), end: new Date('2024-12-19'), isAllDay: false, resource: ''},
|
||||
// {id: '3', title: 'Client Call', color: 'fc-event-danger', start: new Date('2024-12-20'), end: new Date('2024-12-20'), isAllDay: false, resource: ''},
|
||||
// {id: '4', title: 'Interview', color: 'fc-event-success', start: new Date('2024-12-21'), end: new Date('2024-12-21'), isAllDay: false, resource: ''}
|
||||
// ]
|
||||
const dummyEvents = [
|
||||
{id: '1', title: 'Family Vacation', color: 'fc-event-primary', isAllDay: false},
|
||||
{id: '2', title: 'Meeting In Office', color: 'fc-event-warning', isAllDay: false},
|
||||
{id: '3', title: 'Client Call', color: 'fc-event-danger', isAllDay: false},
|
||||
{id: '4', title: 'Interview', color: 'fc-event-success', isAllDay: false}
|
||||
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 [dummyEvents, setDummyEvents] = useState(events)
|
||||
|
||||
const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
|
||||
|
||||
const [newEvent, setNewEvent] = useState({
|
||||
title: '', color: ''
|
||||
})
|
||||
|
||||
const handleEditEvent = ({target:{name,value}}) => {
|
||||
setNewEvent(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
const handleAddNewEvent = () => {
|
||||
if(newEvent.title && newEvent.color){
|
||||
const eventToAdd = {...newEvent}
|
||||
setDummyEvents(prev => ([...prev, eventToAdd]))
|
||||
setNewEvent({title: '', color: ''})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Calendar' paths={['Dashboard', 'Calendar']} />
|
||||
@@ -42,7 +60,7 @@ export default function Calendar(){
|
||||
<p className="mt-3">
|
||||
Drag and drop your event or click in the calendar.
|
||||
</p>
|
||||
{dummyEvents.map((item, index) => (
|
||||
{/* {dummyEvents.map((item, index) => (
|
||||
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`}
|
||||
draggable="true"
|
||||
onDragStart={() =>
|
||||
@@ -51,10 +69,11 @@ export default function Calendar(){
|
||||
>
|
||||
<span></span> {item.title}
|
||||
</div>
|
||||
))}
|
||||
))} */}
|
||||
<ExternalDraggable dummyEvents={dummyEvents} />
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" value=""
|
||||
id="defaultCheck1" />
|
||||
<input className="form-check-input" type="checkbox" value={removeAfterDrop}
|
||||
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
|
||||
<label className="form-check-label" htmlFor="defaultCheck1">
|
||||
Remove After Drop
|
||||
</label>
|
||||
@@ -63,7 +82,8 @@ export default function Calendar(){
|
||||
</div>
|
||||
<div className="col-xl-9">
|
||||
<div className="event-calendar">
|
||||
<EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} />
|
||||
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
|
||||
<EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,15 +107,16 @@ export default function Calendar(){
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<label>Event Name</label>
|
||||
<input type="email" className="form-control" id="eventname" />
|
||||
<input type="email" className="form-control" id="eventname" name='title' value={newEvent.title} onChange={handleEditEvent} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Choose Event Color</label>
|
||||
<select className="form-control">
|
||||
<option>Primary</option>
|
||||
<option>Warning</option>
|
||||
<option>Success</option>
|
||||
<option>Danger</option>
|
||||
<select className="form-control" name='color' value={newEvent.color} onChange={handleEditEvent}>
|
||||
<option value={''}>Select</option>
|
||||
<option value={'fc-event-primary'}>Primary</option>
|
||||
<option value={'fc-event-warning'}>Warning</option>
|
||||
<option value={'fc-event-success'}>Success</option>
|
||||
<option value={'fc-event-danger'}>Danger</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -103,7 +124,7 @@ export default function Calendar(){
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" className="btn btn-success">Save changes</button>
|
||||
<button type="button" className="btn btn-success" onClick={handleAddNewEvent}>Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,130 +1,125 @@
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { Calendar, dayjsLocalizer } from 'react-big-calendar'
|
||||
import dayjs from 'dayjs'
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { formatDate } from '@fullcalendar/core';
|
||||
import FullCalendar from '@fullcalendar/react';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import timeGridPlugin from '@fullcalendar/timegrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
||||
|
||||
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
||||
export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
|
||||
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||
const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
|
||||
|
||||
function handleWeekendsToggle() {
|
||||
setWeekendsVisible(!weekendsVisible);
|
||||
}
|
||||
|
||||
function handleDateSelect(selectInfo) {
|
||||
let title = prompt('Please enter a new title for your event');
|
||||
// let calendarApi = selectInfo.view.calendar;
|
||||
|
||||
// calendarApi.unselect(); // clear date selection
|
||||
|
||||
if (title) {
|
||||
// calendarApi.addEvent({
|
||||
// id: createEventId(),
|
||||
// title,
|
||||
// start: selectInfo.startStr,
|
||||
// end: selectInfo.endStr,
|
||||
// allDay: selectInfo.allDay,
|
||||
// });
|
||||
let newEvent = {
|
||||
id: createEventId(),
|
||||
title,
|
||||
start: selectInfo.startStr,
|
||||
end: selectInfo.endStr,
|
||||
allDay: selectInfo.allDay,
|
||||
}
|
||||
setCurrentEvents(prev => ([...prev, newEvent]))
|
||||
}
|
||||
}
|
||||
|
||||
const onDrop = (event) => {
|
||||
// console.log('event', event)
|
||||
if(event){
|
||||
let newEvent = {
|
||||
id: createEventId(),
|
||||
title: event.draggedEl.innerText,
|
||||
start: event.startStr,
|
||||
// end: event.endStr,
|
||||
allDay: event.allDay,
|
||||
...event
|
||||
}
|
||||
setCurrentEvents(prev => ([...prev, newEvent]))
|
||||
if(removeAfterDrop){
|
||||
setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const removeEvent = (event) => {
|
||||
let eventToRemove = event?.event?._def?.publicId
|
||||
let remainingEvent = currentEvents.filter(item => item.id != eventToRemove)
|
||||
setCurrentEvents(remainingEvent)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const localizer = dayjsLocalizer(dayjs)
|
||||
|
||||
const DnDCalendar = withDragAndDrop(Calendar)
|
||||
|
||||
export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
const myEventsList = []
|
||||
const [myEvents, setMyEvents] = useState(myEventsList)
|
||||
|
||||
const moveEvent = useCallback(
|
||||
({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
|
||||
// const { isAllDay } = event
|
||||
// if (!allDay && droppedOnAllDaySlot) {
|
||||
// event.allDay = true
|
||||
// }
|
||||
// if (allDay && !droppedOnAllDaySlot) {
|
||||
// event.allDay = false;
|
||||
// }
|
||||
|
||||
setMyEvents((prev) => {
|
||||
const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
return [...filtered, { ...existing, start, end, allDay: event.allDay }]
|
||||
})
|
||||
},
|
||||
[setMyEvents]
|
||||
)
|
||||
const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
|
||||
|
||||
|
||||
const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
|
||||
|
||||
const customOnDragOverFromOutside = useCallback(
|
||||
(dragEvent) => {
|
||||
// check for undroppable is specific to this example
|
||||
// and not part of API. This just demonstrates that
|
||||
// onDragOver can optionally be passed to conditionally
|
||||
// allow draggable items to be dropped on cal, based on
|
||||
// whether event.preventDefault is called
|
||||
if (draggedEvent !== 'undroppable') {
|
||||
console.log('preventDefault')
|
||||
dragEvent.preventDefault()
|
||||
}
|
||||
},
|
||||
[draggedEvent]
|
||||
function handleEventClick(clickInfo) {
|
||||
if (
|
||||
confirm(
|
||||
`Are you sure you want to delete the event '${clickInfo.event.title}'`
|
||||
)
|
||||
) {
|
||||
clickInfo.event.remove();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const eventPropGetter = useCallback(
|
||||
(event) => ({
|
||||
...(event.isDraggable
|
||||
? { className: 'isDraggable' }
|
||||
: { className: 'nonDraggable' }),
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
const newEvent = useCallback(
|
||||
(event) => {
|
||||
setMyEvents((prev) => {
|
||||
const idList = prev.map((item) => item.id)
|
||||
const newId = Math.max(...idList) + 1
|
||||
// return [...prev, { ...event, id: newId }]
|
||||
return [...prev, { ...event}]
|
||||
})
|
||||
},
|
||||
[setMyEvents]
|
||||
)
|
||||
|
||||
const onDropFromOutside = useCallback(
|
||||
({ start, end, allDay: isAllDay }) => {
|
||||
if (draggedEvent === 'undroppable') {
|
||||
setDraggedEvent(null)
|
||||
return
|
||||
}
|
||||
|
||||
const { title, id } = draggedEvent
|
||||
const event = {
|
||||
title: title,
|
||||
start,
|
||||
end,
|
||||
isAllDay,
|
||||
id
|
||||
}
|
||||
setDraggedEvent(null)
|
||||
newEvent(event)
|
||||
},
|
||||
[draggedEvent, setDraggedEvent, newEvent]
|
||||
)
|
||||
|
||||
const resizeEvent = useCallback(
|
||||
({ event, start, end }) => {
|
||||
setMyEvents((prev) => {
|
||||
const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
return [...filtered, { ...existing, start, end }]
|
||||
})
|
||||
},
|
||||
[setMyEvents]
|
||||
)
|
||||
function handleEvents(events) {
|
||||
// setCurrentEvents(events);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-100'>
|
||||
<DnDCalendar
|
||||
dragFromOutsideItem={
|
||||
displayDragItemInCell ? dragFromOutsideItem : null
|
||||
}
|
||||
eventPropGetter={eventPropGetter}
|
||||
// draggableAccessor="isDraggable"
|
||||
localizer={localizer}
|
||||
events={myEvents}
|
||||
startAccessor="start"
|
||||
endAccessor="end"
|
||||
style={{ height: 500 }}
|
||||
// onEventResize={resizeEvent}
|
||||
resizable
|
||||
onEventDrop={moveEvent}
|
||||
onDropFromOutside={onDropFromOutside}
|
||||
// onDragOverFromOutside={customOnDragOverFromOutside}
|
||||
<div className="demo-app">
|
||||
<div className="demo-app-main">
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
headerToolbar={{
|
||||
left: 'prev next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
||||
}}
|
||||
initialView="dayGridMonth"
|
||||
editable={true}
|
||||
selectable={true}
|
||||
selectMirror={true}
|
||||
dayMaxEvents={true}
|
||||
weekends={weekendsVisible}
|
||||
// initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
|
||||
events={currentEvents}
|
||||
select={handleDateSelect}
|
||||
eventContent={renderEventContent} // custom render function
|
||||
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(){}}
|
||||
*/
|
||||
|
||||
eventRemove={removeEvent}
|
||||
droppable= {true} // this allows things to be dropped onto the calendar
|
||||
drop={onDrop}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function renderEventContent(eventInfo) {
|
||||
return (
|
||||
<>
|
||||
{/* <b>{eventInfo.timeText}</b> */}
|
||||
<i>{eventInfo.event.title}</i>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
// import React, { useCallback, useState } from 'react'
|
||||
// import { Calendar, dayjsLocalizer } from 'react-big-calendar'
|
||||
// import dayjs from 'dayjs'
|
||||
|
||||
// import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
||||
|
||||
|
||||
|
||||
// const localizer = dayjsLocalizer(dayjs)
|
||||
|
||||
// const DnDCalendar = withDragAndDrop(Calendar)
|
||||
|
||||
// export default function EventCalendar({draggedEvent, setDraggedEvent}) {
|
||||
// const myEventsList = []
|
||||
// const [myEvents, setMyEvents] = useState(myEventsList)
|
||||
|
||||
// const moveEvent = useCallback(
|
||||
// ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
|
||||
// // const { isAllDay } = event
|
||||
// // if (!allDay && droppedOnAllDaySlot) {
|
||||
// // event.allDay = true
|
||||
// // }
|
||||
// // if (allDay && !droppedOnAllDaySlot) {
|
||||
// // event.allDay = false;
|
||||
// // }
|
||||
|
||||
// setMyEvents((prev) => {
|
||||
// const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
// const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
// return [...filtered, { ...existing, start, end, allDay: event.allDay }]
|
||||
// })
|
||||
// },
|
||||
// [setMyEvents]
|
||||
// )
|
||||
// const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
|
||||
|
||||
|
||||
// const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
|
||||
|
||||
// const customOnDragOverFromOutside = useCallback(
|
||||
// (dragEvent) => {
|
||||
// // check for undroppable is specific to this example
|
||||
// // and not part of API. This just demonstrates that
|
||||
// // onDragOver can optionally be passed to conditionally
|
||||
// // allow draggable items to be dropped on cal, based on
|
||||
// // whether event.preventDefault is called
|
||||
// if (draggedEvent !== 'undroppable') {
|
||||
// console.log('preventDefault')
|
||||
// dragEvent.preventDefault()
|
||||
// }
|
||||
// },
|
||||
// [draggedEvent]
|
||||
// )
|
||||
|
||||
|
||||
// const eventPropGetter = useCallback(
|
||||
// (event) => ({
|
||||
// ...(event.isDraggable
|
||||
// ? { className: 'isDraggable' }
|
||||
// : { className: 'nonDraggable' }),
|
||||
// }),
|
||||
// []
|
||||
// )
|
||||
|
||||
// const newEvent = useCallback(
|
||||
// (event) => {
|
||||
// setMyEvents((prev) => {
|
||||
// const idList = prev.map((item) => item.id)
|
||||
// const newId = Math.max(...idList) + 1
|
||||
// // return [...prev, { ...event, id: newId }]
|
||||
// return [...prev, { ...event}]
|
||||
// })
|
||||
// },
|
||||
// [setMyEvents]
|
||||
// )
|
||||
|
||||
// const onDropFromOutside = useCallback(
|
||||
// ({ start, end, allDay: isAllDay }) => {
|
||||
// if (draggedEvent === 'undroppable') {
|
||||
// setDraggedEvent(null)
|
||||
// return
|
||||
// }
|
||||
|
||||
// const { title, id } = draggedEvent
|
||||
// const event = {
|
||||
// title: title,
|
||||
// start,
|
||||
// end,
|
||||
// isAllDay,
|
||||
// id
|
||||
// }
|
||||
// setDraggedEvent(null)
|
||||
// newEvent(event)
|
||||
// },
|
||||
// [draggedEvent, setDraggedEvent, newEvent]
|
||||
// )
|
||||
|
||||
// const resizeEvent = useCallback(
|
||||
// ({ event, start, end }) => {
|
||||
// setMyEvents((prev) => {
|
||||
// const existing = prev.find((ev) => ev.id === event.id) ?? {}
|
||||
// const filtered = prev.filter((ev) => ev.id !== event.id)
|
||||
// return [...filtered, { ...existing, start, end }]
|
||||
// })
|
||||
// },
|
||||
// [setMyEvents]
|
||||
// )
|
||||
|
||||
// return (
|
||||
// <div className='w-100'>
|
||||
// <DnDCalendar
|
||||
// dragFromOutsideItem={
|
||||
// displayDragItemInCell ? dragFromOutsideItem : null
|
||||
// }
|
||||
// eventPropGetter={eventPropGetter}
|
||||
// // draggableAccessor="isDraggable"
|
||||
// localizer={localizer}
|
||||
// events={myEvents}
|
||||
// startAccessor="start"
|
||||
// endAccessor="end"
|
||||
// style={{ height: 500 }}
|
||||
// // onEventResize={resizeEvent}
|
||||
// resizable
|
||||
// onEventDrop={moveEvent}
|
||||
// onDropFromOutside={onDropFromOutside}
|
||||
// // onDragOverFromOutside={customOnDragOverFromOutside}
|
||||
// />
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
import React from 'react'
|
||||
|
||||
export default function EventCalendar() {
|
||||
return (
|
||||
<div>EventCalendar</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { Draggable } from "@fullcalendar/interaction";
|
||||
|
||||
const ExternalDraggable = ({dummyEvents}) => {
|
||||
const eventContainerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Make the external events draggable
|
||||
const draggable = new Draggable(eventContainerRef.current, {
|
||||
itemSelector: ".fc-event",
|
||||
eventData: (eventEl) => ({
|
||||
title: eventEl.innerText.trim(),
|
||||
}),
|
||||
});
|
||||
|
||||
// Cleanup the Draggable instance on unmount
|
||||
return () => {
|
||||
draggable.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={eventContainerRef} className="external-events">
|
||||
{dummyEvents.map((item, index) => (
|
||||
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} >
|
||||
{item.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExternalDraggable;
|
||||
@@ -0,0 +1,22 @@
|
||||
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'
|
||||
// },
|
||||
];
|
||||
|
||||
export function createEventId() {
|
||||
return String(eventGuid++);
|
||||
}
|
||||
@@ -49,6 +49,12 @@ export default function SocketIOContextProvider({children}) {
|
||||
})
|
||||
});
|
||||
|
||||
socket.on(socketOnEvents.refresh_provision, (data) => {
|
||||
queryClient.refetchQueries({ // refetches productProvision API call
|
||||
queryKey: [...queryKeys.myproduct_provision],
|
||||
})
|
||||
});
|
||||
|
||||
// client-side
|
||||
socket.on("connect", () => {
|
||||
console.log(socket.id);
|
||||
|
||||
@@ -5,5 +5,6 @@ export const socketEmitEvents = {
|
||||
|
||||
|
||||
export const socketOnEvents = {
|
||||
receive_message: 'receive_message'
|
||||
receive_message: 'receive_message',
|
||||
refresh_provision: 'refresh_provision_actions'
|
||||
}
|
||||
@@ -52,7 +52,7 @@ export default function HomeSections(){
|
||||
<div className="row">
|
||||
<ProductsURL />
|
||||
|
||||
<div className="col-xxl-4 m-b-30">
|
||||
<div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
|
||||
<div className="card card-statistics h-100 mb-0 panel_round_c3">
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-heading">
|
||||
|
||||
@@ -10,8 +10,20 @@ export default function Products() {
|
||||
queryKey: queryKeys.product,
|
||||
queryFn: () => productData()
|
||||
})
|
||||
|
||||
const products = data?.data?.products_data?.products
|
||||
/*
|
||||
{
|
||||
"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 (
|
||||
<>
|
||||
@@ -38,31 +50,20 @@ export default function Products() {
|
||||
<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 ">
|
||||
<Link to={productPath(product?.uid)} >
|
||||
<Link to={productPath(product?.product_id)} >
|
||||
<div className="d-flex align-items-center extraProductCard">
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className="fa fa-cart-plus text-primary"></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>{product?.status}</p>
|
||||
<h4>{product?.description}</h4>
|
||||
<p>{product?.status_text}</p>
|
||||
<h4>{product?.name}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
))}
|
||||
{/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
|
||||
{/* <div className="d-flex align-items-center">*/}
|
||||
{/* <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
|
||||
{/* <i className="fa fa-dollar text-primary"></i>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="report-details">*/}
|
||||
{/* <p>Annual Revenue</p>*/}
|
||||
{/* <h3>$40,516</h3>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
}
|
||||
<div className="apexchart-wrapper">
|
||||
|
||||
@@ -53,11 +53,12 @@ export default function ProductsURL() {
|
||||
</thead>
|
||||
<tbody>
|
||||
{urlData && urlData.map((item, index) => {
|
||||
let statusColor = item?.status == 'Active' ? 'badge-success-inverse' : item?.status == 'Updating' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
|
||||
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
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{Number(item?.no) + Number(index)}</td>
|
||||
<td>{item?.description} - <a href={item?.url} target='_blank'>{item?.url}</a></td>
|
||||
<td>{item?.description} - <a href={productUrl} target='_blank'>{item?.url}</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>
|
||||
|
||||
@@ -83,20 +83,22 @@ export default function RecentActions() {
|
||||
<tr>
|
||||
<th style={{width: '30px'}}>#.</th>
|
||||
<th>Description</th>
|
||||
<th style={{width: '100px'}}>Date</th>
|
||||
<th style={{width: '100px'}}>Status</th>
|
||||
{/* <th style={{width: '100px'}}>Date</th> */}
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-muted">
|
||||
{actionData && actionData?.actions.map((action, index) => {
|
||||
let bgColor = action?.status == 'completed' ? 'badge-success-inverse' : action?.status == 'verifying' ? 'badge-info-inverse' : action?.status == 'processing' ? 'badge-warning-inverse' : 'badge-primary-inverse'
|
||||
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?.no}</td>
|
||||
<td>{action?.description}</td>
|
||||
<td>{action?.date}</td>
|
||||
<td>{new Date(action?.date).toDateString()}</td>
|
||||
<td>
|
||||
<label className={`badge mb-0 ${bgColor}`}>{action?.status}</label>
|
||||
<label className={`badge mb-0 ${bgColor}`}>{text}</label>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
|
||||
@@ -11,7 +11,6 @@ export default function TopBar() {
|
||||
})
|
||||
|
||||
const topData = data?.data?.bar_data?.top_bar
|
||||
console.log('TOP', topData)
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function UserHeader(){
|
||||
const toggleSidebar = (e) => {
|
||||
e.preventDefault()
|
||||
document.body.classList.toggle('sidebar-toggled')
|
||||
document.querySelector('.navbar-collapse').classList.remove('show')
|
||||
}
|
||||
|
||||
const removeSidebar = (e) => {
|
||||
@@ -64,230 +65,12 @@ export default function UserHeader(){
|
||||
</ul>
|
||||
|
||||
<ul className="navbar-nav nav-right ml-auto">
|
||||
{/* <li className="nav-item dropdown">
|
||||
<a href="#" className="nav-link dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i className="ti ti-email"></i>
|
||||
</a>
|
||||
<div className="dropdown-menu extended animated fadeIn" aria-labelledby="dropdownMenuLink">
|
||||
<ul>
|
||||
<li className="dropdown-header bg-gradient p-4 text-white text-left">Messages
|
||||
<label className="label label-info label-round">6</label>
|
||||
<a href="#" className="float-right btn btn-square btn-inverse-light btn-xs m-0">
|
||||
<span className="font-13"> Mark all as read</span></a>
|
||||
</li>
|
||||
<li className="dropdown-body">
|
||||
<ul className="scrollbar scroll_dark max-h-240">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<img className="img-fluid" src="assets/img/avtar/03.jpg" alt="user3" />
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Brianing Leyon</p>
|
||||
<small>You will sail along until you...</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<img className="img-fluid" src="assets/img/avtar/01.jpg" alt="user" />
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Jimmyimg Leyon</p>
|
||||
<small>Okay</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<img className="img-fluid" src="assets/img/avtar/02.jpg" alt="user2" />
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Brainjon Leyon</p>
|
||||
<small>So, make the decision...</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<img className="img-fluid" src="assets/img/avtar/04.jpg" alt="user4" />
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Smithmin Leyon</p>
|
||||
<small>Thanks</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<img className="img-fluid" src="assets/img/avtar/05.jpg" alt="user5" />
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Jennyns Leyon</p>
|
||||
<small>How are you</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<img className="img-fluid" src="assets/img/avtar/06.jpg" alt="user6" />
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Demian Leyon</p>
|
||||
<small>I like your themes</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="dropdown-footer">
|
||||
<a className="font-13" href="#"> View All messages </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li> */}
|
||||
{/* <li className="nav-item dropdown">
|
||||
<a href="#" className="nav-link dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i className="fe fe-bell"></i>
|
||||
<span className="notify">
|
||||
<span className="blink"></span>
|
||||
<span className="dot"></span>
|
||||
</span>
|
||||
</a>
|
||||
<div className="dropdown-menu extended animated fadeIn" aria-labelledby="dropdownMenuLink">
|
||||
<ul>
|
||||
<li className="dropdown-header bg-gradient p-4 text-white text-left">Notifications
|
||||
<a href="#" className="float-right btn btn-square btn-inverse-light btn-xs m-0">
|
||||
<span className="font-13"> Clear all</span></a>
|
||||
</li>
|
||||
<li className="dropdown-body min-h-240 nicescroll">
|
||||
<ul className="scrollbar scroll_dark max-h-240">
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<div className="bg-type bg-type-md">
|
||||
<span>HY</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">New registered user</p>
|
||||
<small>Just now</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<div className="bg-type bg-type-md bg-success">
|
||||
<span>GM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">New invoice received</p>
|
||||
<small>22 min</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<div className="bg-type bg-type-md bg-danger">
|
||||
<span>FR</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Server error report</p>
|
||||
<small>7 min</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<div className="bg-type bg-type-md bg-info">
|
||||
<span>HT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Database report</p>
|
||||
<small>1 day</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<div className="notification d-flex flex-row align-items-center">
|
||||
<div className="notify-icon bg-img align-self-center">
|
||||
<div className="bg-type bg-type-md">
|
||||
<span>DE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notify-message">
|
||||
<p className="font-weight-bold">Order confirmation</p>
|
||||
<small>2 day</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="dropdown-footer">
|
||||
<a className="font-13" href="#"> View All Notifications
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li> */}
|
||||
{/* <li className="nav-item">
|
||||
<a className="nav-link search" href="#">
|
||||
<i className="ti ti-search"></i>
|
||||
</a>
|
||||
<div className="search-wrapper">
|
||||
<div className="close-btn">
|
||||
<i className="ti ti-close"></i>
|
||||
</div>
|
||||
<div className="search-content">
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<i className="ti ti-search magnifier"></i>
|
||||
<input type="text" className="form-control autocomplete" placeholder="Search Here"
|
||||
id="autocomplete-ajax" autoFocus="autofocus" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</li> */}
|
||||
<li className="nav-item user-profile">
|
||||
<a href="#" className="nav-link dropdown-toggle" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<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 className="dropdown-menu animated fadeIn" aria-labelledby="dropdownMenuLink">
|
||||
<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">
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
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="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="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,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, {useState} from "react";
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
// import getImage from "../../utils/getImage";
|
||||
@@ -6,25 +6,36 @@ import ProductStart from "./ProductStart";
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import {MyProductData, productData} from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import ProductActive from "./ProductActive";
|
||||
import ProductProvision from "./ProductProvision";
|
||||
import {productConst} from "../../constants/products";
|
||||
|
||||
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 lastPart = pathname.split('/').pop();
|
||||
console.log(lastPart)
|
||||
// console.log(lastPart)
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.product,
|
||||
queryFn: () => MyProductData(lastPart)
|
||||
})
|
||||
|
||||
|
||||
|
||||
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(
|
||||
<>
|
||||
<BreadcrumbComBS title={product_name} paths={['Dashboard', 'Product']} />
|
||||
@@ -45,7 +56,18 @@ export default function ProductFactory(){
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
<ProductStart productData={myproduct_data} />
|
||||
{(product_status <= productConst.PRODUCT_AVAILABLE)?
|
||||
<ProductStart productData={myproduct_data} />
|
||||
:<></> }
|
||||
|
||||
{(product_status === productConst.PRODUCT_PROVISIONING)?
|
||||
<ProductProvision productData={myproduct_data} />
|
||||
:<></> }
|
||||
|
||||
{(product_status === productConst.PRODUCT_ACTIVE)?
|
||||
<ProductActive productData={myproduct_data} />
|
||||
:<></> }
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
import { useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import { productProvision } from "../../services/services";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { SocketContextValues } from "../context/SocketIOContext";
|
||||
|
||||
|
||||
export default function ProductProvision(props){
|
||||
const {joinRoom} = SocketContextValues() // Destructures values from socket context
|
||||
|
||||
const productTitle = props?.productData?.title;
|
||||
const productDescription = props?.productData?.description;
|
||||
const productID = props?.productData?.product_id
|
||||
const productSubUID = props?.productData?.product_subscription_uid
|
||||
|
||||
const {data:provision, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.myproduct_provision,
|
||||
queryFn: () => productProvision(productID)
|
||||
})
|
||||
|
||||
const provisionData = provision?.data?.provision
|
||||
|
||||
useEffect(()=>{
|
||||
joinRoom(productSubUID); // provision subscription room
|
||||
},[])
|
||||
|
||||
return (
|
||||
<>
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Creating - {productTitle} </h4>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Progress Information</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="table-responsive">
|
||||
<table className="table table-info mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style={{width: '10px'}}>#</th>
|
||||
<th scope="col">Action</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{provisionData?.activities?.map(item => (
|
||||
<tr key={item.id}>
|
||||
<th scope="row">{item.id}</th>
|
||||
<td>{item.action}</td>
|
||||
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<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">
|
||||
<p>
|
||||
{productDescription}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,22 +1,54 @@
|
||||
import React, { useRef } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
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";
|
||||
|
||||
export default function ProductStart(props){
|
||||
|
||||
console.log(props)
|
||||
const productBanner = "product/"+props.productData.banner;
|
||||
const productTitle = props.productData.title;
|
||||
const productDescription = props.productData.description;
|
||||
const promotion_text = props.productData.promotion_text;
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
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 modalRef = useRef()
|
||||
|
||||
const hideModal = () => {
|
||||
// modalRef.current.hide()
|
||||
const refetch = () => {
|
||||
queryClient.refetchQueries({
|
||||
queryKey: [...queryKeys.product],
|
||||
// type: 'active',
|
||||
// exact: true,
|
||||
})
|
||||
}
|
||||
|
||||
// document.body.classList.remove('modal-open')
|
||||
// const modal = new Modal(document.querySelector('.modal'))
|
||||
// modal.hide()
|
||||
const mutation = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return subscribe(fields)
|
||||
},
|
||||
onError: (error) => {
|
||||
setRequestStatus({status:false, message:'failed, try again'})
|
||||
console.log('ERROR IS', error)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
setRequestStatus({status:true, message:'successful'})
|
||||
console.log(res)
|
||||
},
|
||||
onSettled: () => {
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({status:false, message:''})
|
||||
},4000)
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubscribe = () => {
|
||||
mutation.mutate({product_id: product_id})
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -32,25 +64,43 @@ export default function ProductStart(props){
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="card card-statistics mb-30 panel_round_c3">
|
||||
{/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Subscription</h4>
|
||||
<p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
|
||||
</div>
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item"><h4>{promotion_text}</h4></li>
|
||||
<li className="list-group-item">90 days free and 3.95/Month</li>
|
||||
<li className="list-group-item"></li>
|
||||
</ul>
|
||||
{/*<div className="card-body">*/}
|
||||
{/* <a href="javascript:void(0)" className="card-link">Card link</a>*/}
|
||||
{/* <a href="javascript:void(0)" className="card-link">Another link</a>*/}
|
||||
{/*</div>*/}
|
||||
<div className="subscribe-box">
|
||||
<button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Start Product</button>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
(product_status===1) ? <>
|
||||
<div className="card card-statistics mb-30 panel_coming_soon_c3">
|
||||
<>
|
||||
<img className="card-img-top" src={getImage('widget/coming-soon.jpg')} alt="Card image cap" />
|
||||
</>
|
||||
|
||||
<div className="card-body">
|
||||
<p className="card-text">Start with your goals in mind and then work possible. </p>
|
||||
</div>
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item"><h4>Coming soon!!!</h4></li>
|
||||
<li className="list-group-item"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</> : <>
|
||||
<div className="card card-statistics mb-30 panel_round_c3">
|
||||
{/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Subscription</h4>
|
||||
<p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
|
||||
</div>
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item"><h4>{promotion_text}</h4></li>
|
||||
<li className="list-group-item">90 days free and 3.95/Month</li>
|
||||
<li className="list-group-item"></li>
|
||||
</ul>
|
||||
{/*<div className="card-body">*/}
|
||||
{/* <a href="javascript:void(0)" className="card-link">Card link</a>*/}
|
||||
{/* <a href="javascript:void(0)" className="card-link">Another link</a>*/}
|
||||
{/*</div>*/}
|
||||
<div className="subscribe-box">
|
||||
<button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Start Subscription</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -59,8 +109,8 @@ export default function ProductStart(props){
|
||||
<div className="modal-dialog modal-dialog-centered" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title" id="verticalCenterTitle">Modal title</h5>
|
||||
<button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
|
||||
<button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -68,19 +118,36 @@ export default function ProductStart(props){
|
||||
<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,
|
||||
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 sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean
|
||||
lacinia bibendum nulla sed consectetur.
|
||||
</p>
|
||||
{/* {mutation.error &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{mutation.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{mutation.isSuccess &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className='text-success'>{'subscription is successful'}</p>
|
||||
</div>
|
||||
</>
|
||||
} */}
|
||||
{requestStatus.message && (
|
||||
<div className="col-12">
|
||||
<p className={`p-2 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.message}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" className="btn btn-success" onClick={hideModal}>Save changes</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>
|
||||
</div>
|
||||
|
||||
@@ -7,9 +7,292 @@ export default function Settings(){
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']} />
|
||||
<div className="row">
|
||||
<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>
|
||||
{/*<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-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="assets/img/avtar/01.jpg" className="img-fluid"
|
||||
alt="users-avatar" />
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">Alice Williams</h4>
|
||||
<p>Enthusiast</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-5 profile-counter">
|
||||
<ul className="nav justify-content-center text-center">
|
||||
<li className="nav-item border-right px-3">
|
||||
<div>
|
||||
<h4 className="mb-0">90</h4>
|
||||
<p>Post</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item border-right px-3">
|
||||
<div>
|
||||
<h4 className="mb-0">1.5K</h4>
|
||||
<p>Messages</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item px-3">
|
||||
<div>
|
||||
<h4 className="mb-0">4.4K</h4>
|
||||
<p>Members</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="profile-btn text-center">
|
||||
<div>
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button className="btn btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 Personal 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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -7,9 +7,511 @@ export default function Users(){
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Users' paths={['Dashboard', 'Users']} />
|
||||
<div className="row">
|
||||
<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>
|
||||
</div>
|
||||
<>
|
||||
{/*<div className="row">*/}
|
||||
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
{/*</div>*/}
|
||||
<div className="row">
|
||||
<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/01.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Lizzy Halfman</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>021-843-8478</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>40-1440-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>Lizzy.Halfman@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">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="bg-img">
|
||||
<img src="assets/img/avtar/06.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Michaelveld</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>Michaelveld@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/07.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Jimmy Falicon</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>Jimmy.Falicon@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/08.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Richardket</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>Richardket@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/09.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Jenny Smithnig</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>Jenny Smithnig@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/01.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Garettdon</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>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/02.jpg" alt="" className="img-fluid" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h4 className="mb-0">Lizzy Halfman</h4>
|
||||
<p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="nav text-center">
|
||||
<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>your@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">Brian Joedon</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-1205-8156</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>Brian.Joedon@gmail.com</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export const productConst = {
|
||||
PRODUCT_AVAILABLE: 5,
|
||||
PRODUCT_PROVISIONING: 6,
|
||||
PRODUCT_ACTIVE: 7,
|
||||
PRODUCT_DEACTIVATED: 9,
|
||||
};
|
||||
+25
-25
@@ -91,9 +91,6 @@ $btn-bg: #8e54e9;
|
||||
$btn-border: #8e54e9;
|
||||
$event-padding: 10px;
|
||||
|
||||
@import 'react-big-calendar/lib/sass/styles';
|
||||
@import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD
|
||||
|
||||
.extraProductCard{
|
||||
background-color: aliceblue;
|
||||
border-radius: 5px;
|
||||
@@ -104,7 +101,10 @@ $event-padding: 10px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.panel_coming_soon_c3{
|
||||
background-color: aliceblue;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.panel_round_c1{
|
||||
background-color: #e6f5f4;
|
||||
border-radius: 10px;
|
||||
@@ -122,30 +122,30 @@ $event-padding: 10px;
|
||||
|
||||
|
||||
/* CALENDER STYLE HERE */
|
||||
// .rbc-today{
|
||||
// background-color: '#fcf8e3' !important;
|
||||
// }
|
||||
.rbc-toolbar button {
|
||||
background: #eceef3;
|
||||
.fc-next-button.fc-button, .fc-prev-button.fc-button,
|
||||
.fc-timeGridWeek-button.fc-button, .fc-timeGridDay-button.fc-button, .fc-dayGridMonth-button.fc-button {
|
||||
background: #eceef3!important;
|
||||
border: none;
|
||||
color: #a6a9b7 !important;
|
||||
text-transform: capitalize;
|
||||
box-shadow: none!important;
|
||||
text-shadow: none!important;
|
||||
border-radius: 3px!important;
|
||||
margin: 0 3px!important;
|
||||
padding: 6px 12px!important;
|
||||
height: auto!important;
|
||||
text-transform: capitalize !important;
|
||||
// box-shadow: none!important;
|
||||
// text-shadow: none!important;
|
||||
// border-radius: 3px!important;
|
||||
// margin: 0 3px!important;
|
||||
// padding: 6px 12px!important;
|
||||
// height: auto!important;
|
||||
}
|
||||
.rbc-toolbar-label{
|
||||
color: black !important;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
// .rbc-month-view{
|
||||
// border: .5px solid #e8edf1!important;
|
||||
// }
|
||||
.rbc-toolbar button.rbc-active, .rbc-toolbar button:active, .rbc-toolbar button:hover{
|
||||
|
||||
.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;
|
||||
border: none;
|
||||
background-color: #8E54E9!important;
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
/* END OF CALENDER STYLE */
|
||||
@@ -3,7 +3,8 @@ const queryKeys = {
|
||||
topBar: ['top-bar'],
|
||||
recentAction: ['recent-action'],
|
||||
product: ['product-data'],
|
||||
product_url: ['product_url']
|
||||
product_url: ['product_url'],
|
||||
myproduct_provision: ['myproduct_provision']
|
||||
}
|
||||
|
||||
export default queryKeys
|
||||
@@ -58,6 +58,30 @@ export const signUpUser = (reqData) => {
|
||||
return postAuxEnd('/panel/auth/register', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO VERIFY EMAIL
|
||||
export const verifyEmail = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/auth/register/verify', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO COMPLETE REGISTRATION
|
||||
export const completeRegistration = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/auth/register/complete', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO SUBSCRIBE
|
||||
export const subscribe = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/panel/myproduct/subscription', postData, false)
|
||||
}
|
||||
|
||||
|
||||
// FUNCTION TO RESET USER PASSWORD
|
||||
export const recoverPWD = (reqData) => {
|
||||
@@ -82,6 +106,12 @@ 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`)
|
||||
|
||||
Reference in New Issue
Block a user