Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
7b5e338e19 |
@@ -86,10 +86,10 @@ export default function CSignup() {
|
|||||||
<div className="app">
|
<div className="app">
|
||||||
<div className="app-wrap">
|
<div className="app-wrap">
|
||||||
<div className="app-contant">
|
<div className="app-contant">
|
||||||
<div className="vh-100 bg-white custom-bg">
|
<div className="bg-white custom-bg">
|
||||||
<div className="container-fluid p-0">
|
<div className="container-fluid p-0">
|
||||||
<div className="row no-gutters justify-content-center">
|
<div className="row no-gutters justify-content-center">
|
||||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1 h-100-vh">
|
||||||
<div className="mt-5 d-flex">
|
<div className="mt-5 d-flex">
|
||||||
<div className="bg-white register p-5">
|
<div className="bg-white register p-5">
|
||||||
<h1 className="mb-2">MERMS Panel</h1>
|
<h1 className="mb-2">MERMS Panel</h1>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ const validationSchema = Yup.object().shape({
|
|||||||
// )
|
// )
|
||||||
.min(3, "Minimum 3 characters")
|
.min(3, "Minimum 3 characters")
|
||||||
.max(50, "Maximum 50 characters")
|
.max(50, "Maximum 50 characters")
|
||||||
.required("Email is required"),
|
.required("Username is required"),
|
||||||
})
|
})
|
||||||
|
|
||||||
const initialValues = {
|
const initialValues = {
|
||||||
@@ -43,13 +43,13 @@ export default function Forgetpwd2() {
|
|||||||
<div className="app">
|
<div className="app">
|
||||||
<div className="app-wrap">
|
<div className="app-wrap">
|
||||||
<div className="app-contant">
|
<div className="app-contant">
|
||||||
<div className="vh-100 bg-white custom-bg">
|
<div className="bg-white">
|
||||||
<div className="container-fluid p-0">
|
<div className="container-fluid p-0">
|
||||||
<div className="row no-gutters justify-content-center">
|
<div className="row no-gutters">
|
||||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1h">
|
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||||
<div className="mt-5 d-flex">
|
<div className="d-flex align-items-center h-100-vh">
|
||||||
<div className="bg-white register p-5">
|
<div className="login p-50">
|
||||||
<h1 className="mb-2">MERMS Panel</h1>
|
<h1 className="mb-2">Recover Password</h1>
|
||||||
<p>Please enter your username.</p>
|
<p>Please enter your username.</p>
|
||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
@@ -98,13 +98,13 @@ export default function Forgetpwd2() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
<div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||||
<div className="row align-items-center h-100">
|
<div className="row align-items-center h-100">
|
||||||
<div className="col-7 mx-auto ">
|
<div className="col-7 mx-auto ">
|
||||||
<img className="img-fluid" src={LoginImg} alt="" />
|
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -66,12 +66,12 @@ export default function Login() {
|
|||||||
<div className="app">
|
<div className="app">
|
||||||
<div className="app-wrap">
|
<div className="app-wrap">
|
||||||
<div className="app-contant">
|
<div className="app-contant">
|
||||||
<div className="vh-100 custom-bg">
|
<div className="bg-white">
|
||||||
<div className="container-fluid p-0">
|
<div className="container-fluid p-0">
|
||||||
<div className="row no-gutters justify-content-center">
|
<div className="row no-gutters">
|
||||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||||
<div className="mt-5 d-flex">
|
<div className="d-flex align-items-center h-100-vh">
|
||||||
<div className="bg-white register p-5">
|
<div className="login p-50">
|
||||||
<h1 className="mb-2">MERMS Panel</h1>
|
<h1 className="mb-2">MERMS Panel</h1>
|
||||||
<p>Welcome back, please login to your account.</p>
|
<p>Welcome back, please login to your account.</p>
|
||||||
<form className="mt-3 mt-sm-5">
|
<form className="mt-3 mt-sm-5">
|
||||||
@@ -135,13 +135,13 @@ export default function Login() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
<div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||||
<div className="row align-items-center h-100">
|
<div className="row align-items-center h-100">
|
||||||
<div className="col-7 mx-auto ">
|
<div className="col-7 mx-auto ">
|
||||||
<img className="img-fluid" src={LoginImg} alt="" />
|
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -56,104 +56,104 @@ export default function Signup2() {
|
|||||||
<div className="app">
|
<div className="app">
|
||||||
<div className="app-wrap">
|
<div className="app-wrap">
|
||||||
<div className="app-contant">
|
<div className="app-contant">
|
||||||
<div className="vh-100 bg-white custom-bg">
|
<div className="bg-white">
|
||||||
<div className="container-fluid p-0">
|
<div className="container-fluid p-0">
|
||||||
<div className="row no-gutters justify-content-center">
|
<div className="row no-gutters">
|
||||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||||
<div className="mt-5 d-flex">
|
<div className="d-flex align-items-center h-100-vh">
|
||||||
<div className="bg-white register p-5">
|
<div className="register p-5">
|
||||||
<h1 className="mb-2">MERMS Panel</h1>
|
<h1 className="mb-2">MERMS Panel</h1>
|
||||||
<p>Welcome, Please create your account.</p>
|
<p>Welcome, Please create your account.</p>
|
||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
validationSchema={validationSchema}
|
validationSchema={validationSchema}
|
||||||
onSubmit={signUp}
|
onSubmit={signUp}
|
||||||
>
|
>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return (
|
return (
|
||||||
<Form className='mt-2 mt-sm-5'>
|
<Form className='mt-2 mt-sm-5'>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{!mutation.isSuccess ?
|
{!mutation.isSuccess ?
|
||||||
<>
|
<>
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-sm-6">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
<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} />
|
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<div className="form-group">
|
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
|
||||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="form-group">
|
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
|
||||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* <div className="col-12">
|
|
||||||
<div className="form-group">
|
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
|
||||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="form-group">
|
|
||||||
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
|
||||||
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="form-check">
|
|
||||||
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
|
||||||
<label className="form-check-label" htmlFor="gridCheck">
|
|
||||||
I accept terms & policy
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mutation.error &&
|
|
||||||
<>
|
|
||||||
<div className="col-12">
|
|
||||||
<p className='text-danger'>{mutation.error.message}</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div className="col-12 mt-3 text-end">
|
|
||||||
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
:
|
|
||||||
<div className='col-12'>
|
|
||||||
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
|
||||||
<h4 className='p-4 text-black'>Check your email to continue.</h4>
|
|
||||||
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
<div className="col-12 col-sm-6">
|
||||||
|
<div className="form-group">
|
||||||
|
<label className={`text-black fw-bold control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||||
|
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="form-group">
|
||||||
|
<label className={`text-black fw-bold control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||||
|
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="col-12">
|
||||||
|
<div className="form-group">
|
||||||
|
<label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||||
|
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="form-group">
|
||||||
|
<label className={`text-black fw-bold control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||||
|
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="form-check">
|
||||||
|
<input name='isChecked' className="form-check-input" type="checkbox" id="gridCheck" value={props.values.isChecked} onChange={props.handleChange} />
|
||||||
|
<label className="form-check-label" htmlFor="gridCheck">
|
||||||
|
I accept terms & policy
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<span className={`${(props.errors.isChecked && props.touched.isChecked) && 'text-danger'}`}>{props.errors.isChecked}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="col-12 mt-3">
|
{mutation.error &&
|
||||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
<>
|
||||||
|
<div className="col-12">
|
||||||
|
<p className='text-danger'>{mutation.error.message}</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="col-12 mt-3 text-end">
|
||||||
|
<button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
:
|
||||||
|
<div className='col-12'>
|
||||||
|
<div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
|
||||||
|
<h4 className='p-4 text-black'>Check your email to continue.</h4>
|
||||||
|
<Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="col-12 mt-3">
|
||||||
|
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</div>
|
||||||
);
|
</Form>
|
||||||
}}
|
);
|
||||||
</Formik>
|
}}
|
||||||
|
</Formik>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
||||||
|
<div className="row align-items-center h-100">
|
||||||
|
<div className="col-7 mx-auto ">
|
||||||
|
{/* <img className="img-fluid" src={LoginImg} alt="" /> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="signup-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
|
|
||||||
<div className="row align-items-center h-100">
|
|
||||||
<div className="col-7 mx-auto ">
|
|
||||||
<img className="img-fluid" src={LoginImg} alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,13 +1,8 @@
|
|||||||
import React, { useCallback, useState } from "react";
|
import React, { useCallback, useState } from "react";
|
||||||
import { useQuery } from '@tanstack/react-query'
|
|
||||||
|
|
||||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||||
import EventCalendar from "./EventCalendar";
|
import EventCalendar from "./EventCalendar";
|
||||||
import ExternalDraggable from "./ExternalDraggable";
|
import ExternalDraggable from "./ExternalDraggable";
|
||||||
|
|
||||||
import { getCalendarEvents } from '../../services/services'
|
|
||||||
import queryKeys from '../../services/queryKeys'
|
|
||||||
|
|
||||||
|
|
||||||
export default function Calendar(){
|
export default function Calendar(){
|
||||||
|
|
||||||
@@ -16,15 +11,6 @@ export default function Calendar(){
|
|||||||
// setDraggedEvent(event)
|
// setDraggedEvent(event)
|
||||||
// }
|
// }
|
||||||
|
|
||||||
const {data, isFetching, isError, error} = useQuery({
|
|
||||||
queryKey: queryKeys.calendar_events,
|
|
||||||
queryFn: () => getCalendarEvents()
|
|
||||||
})
|
|
||||||
|
|
||||||
const receievedEvents = data?.data?.bar_data
|
|
||||||
const category = receievedEvents?.category //EVENT CATEGORIES FROM API
|
|
||||||
const eventList = receievedEvents?.list //EVENT LIST FROM API
|
|
||||||
|
|
||||||
const events = [
|
const events = [
|
||||||
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
|
{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: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
|
||||||
@@ -66,56 +52,40 @@ export default function Calendar(){
|
|||||||
</div>
|
</div>
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{isFetching ?
|
<div className="col-xl-3">
|
||||||
<>
|
<div id="external-events">
|
||||||
<div className="col-12">
|
<button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
|
||||||
<p className='text-mute'>Loading...</p>
|
Add New Event
|
||||||
|
</button>
|
||||||
|
<p className="mt-3">
|
||||||
|
Drag and drop your event or click in the calendar.
|
||||||
|
</p>
|
||||||
|
{/* {dummyEvents.map((item, index) => (
|
||||||
|
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`}
|
||||||
|
draggable="true"
|
||||||
|
onDragStart={() =>
|
||||||
|
handleDragStart({...item})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span></span> {item.title}
|
||||||
|
</div>
|
||||||
|
))} */}
|
||||||
|
<ExternalDraggable dummyEvents={dummyEvents} />
|
||||||
|
<div className="form-check">
|
||||||
|
<input className="form-check-input" type="checkbox" value={removeAfterDrop}
|
||||||
|
id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
|
||||||
|
<label className="form-check-label" htmlFor="defaultCheck1">
|
||||||
|
Remove After Drop
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
: isError ?
|
|
||||||
<div className="col-12">
|
|
||||||
<p className='text-danger'>{error.message}</p>
|
|
||||||
</div>
|
</div>
|
||||||
:
|
<div className="col-xl-9">
|
||||||
<>
|
<div className="event-calendar">
|
||||||
<div className="col-xl-3">
|
{/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
|
||||||
<div id="external-events">
|
<EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
|
||||||
{/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
|
|
||||||
Add New Event
|
|
||||||
</button>
|
|
||||||
<p className="mt-3">
|
|
||||||
Drag and drop your event or click in the calendar.
|
|
||||||
</p> */}
|
|
||||||
{/* {dummyEvents.map((item, index) => (
|
|
||||||
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`}
|
|
||||||
draggable="true"
|
|
||||||
onDragStart={() =>
|
|
||||||
handleDragStart({...item})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span></span> {item.title}
|
|
||||||
</div>
|
|
||||||
))} */}
|
|
||||||
<ExternalDraggable category={category} />
|
|
||||||
{/* <div className="form-check">
|
|
||||||
<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>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-xl-9">
|
</div>
|
||||||
<div className="event-calendar">
|
|
||||||
<EventCalendar
|
|
||||||
removeAfterDrop={removeAfterDrop}
|
|
||||||
eventList={eventList}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useState } from 'react';
|
||||||
import { formatDate } from '@fullcalendar/core';
|
import { formatDate } from '@fullcalendar/core';
|
||||||
import FullCalendar from '@fullcalendar/react';
|
import FullCalendar from '@fullcalendar/react';
|
||||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||||
@@ -6,9 +6,9 @@ import timeGridPlugin from '@fullcalendar/timegrid';
|
|||||||
import interactionPlugin from '@fullcalendar/interaction';
|
import interactionPlugin from '@fullcalendar/interaction';
|
||||||
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
import { INITIAL_EVENTS, createEventId } from './event-utils';
|
||||||
|
|
||||||
export default function EventCalendar({removeAfterDrop, eventList}) {
|
export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
|
||||||
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
const [weekendsVisible, setWeekendsVisible] = useState(true);
|
||||||
const [currentEvents, setCurrentEvents] = useState([]);
|
const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
|
||||||
|
|
||||||
function handleWeekendsToggle() {
|
function handleWeekendsToggle() {
|
||||||
setWeekendsVisible(!weekendsVisible);
|
setWeekendsVisible(!weekendsVisible);
|
||||||
@@ -51,9 +51,9 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
|
|||||||
...event
|
...event
|
||||||
}
|
}
|
||||||
setCurrentEvents(prev => ([...prev, newEvent]))
|
setCurrentEvents(prev => ([...prev, newEvent]))
|
||||||
// if(removeAfterDrop){
|
if(removeAfterDrop){
|
||||||
// setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
|
setDummyEvents(prev => prev.filter(item => item.title != newEvent.title))
|
||||||
// }
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,18 +78,13 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
|
|||||||
// setCurrentEvents(events);
|
// setCurrentEvents(events);
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
let newEventList = eventList.map(item => ({...item, start: new Date(item?.start)}))
|
|
||||||
setCurrentEvents(newEventList)
|
|
||||||
},[eventList])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="demo-app">
|
<div className="demo-app">
|
||||||
<div className="demo-app-main">
|
<div className="demo-app-main">
|
||||||
<FullCalendar
|
<FullCalendar
|
||||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||||
headerToolbar={{
|
headerToolbar={{
|
||||||
left: 'prev,next,today',
|
left: 'prev next today',
|
||||||
center: 'title',
|
center: 'title',
|
||||||
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
right: 'dayGridMonth,timeGridWeek,timeGridDay',
|
||||||
}}
|
}}
|
||||||
@@ -101,18 +96,17 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
|
|||||||
weekends={weekendsVisible}
|
weekends={weekendsVisible}
|
||||||
// initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
|
// initialEvents={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
|
||||||
events={currentEvents}
|
events={currentEvents}
|
||||||
|
select={handleDateSelect}
|
||||||
eventContent={renderEventContent} // custom render function
|
eventContent={renderEventContent} // custom render function
|
||||||
eventsSet={handleEvents} // called after events are initialized/added/changed/removed
|
|
||||||
// select={handleDateSelect}
|
|
||||||
// eventClick={handleEventClick}
|
// eventClick={handleEventClick}
|
||||||
|
eventsSet={handleEvents} // called after events are initialized/added/changed/removed
|
||||||
/* you can update a remote database when these fire:
|
/* you can update a remote database when these fire:
|
||||||
eventAdd={function(){}}
|
eventAdd={function(){}}
|
||||||
eventChange={function(){}}
|
eventChange={function(){}}
|
||||||
eventRemove={function(){}}
|
eventRemove={function(){}}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// eventBackgroundColor='purple'
|
eventRemove={removeEvent}
|
||||||
// eventRemove={removeEvent}
|
|
||||||
droppable= {true} // this allows things to be dropped onto the calendar
|
droppable= {true} // this allows things to be dropped onto the calendar
|
||||||
drop={onDrop}
|
drop={onDrop}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,16 +1,9 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { Draggable } from "@fullcalendar/interaction";
|
import { Draggable } from "@fullcalendar/interaction";
|
||||||
|
|
||||||
const ExternalDraggable = ({category}) => {
|
const ExternalDraggable = ({dummyEvents}) => {
|
||||||
const eventContainerRef = useRef(null);
|
const eventContainerRef = useRef(null);
|
||||||
|
|
||||||
const events = [
|
|
||||||
{id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
|
|
||||||
{id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
|
|
||||||
{id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
|
|
||||||
{id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
|
|
||||||
]
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Make the external events draggable
|
// Make the external events draggable
|
||||||
const draggable = new Draggable(eventContainerRef.current, {
|
const draggable = new Draggable(eventContainerRef.current, {
|
||||||
@@ -28,15 +21,11 @@ const ExternalDraggable = ({category}) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={eventContainerRef} className="external-events">
|
<div ref={eventContainerRef} className="external-events">
|
||||||
{category && category.map((item, index) => {
|
{dummyEvents.map((item, index) => (
|
||||||
let color = index % 4 === 0 ? 'fc-event-success' : index % 3 === 0 ? 'fc-event-danger' : index % 2 === 0 ? 'fc-event-warning' : 'fc-event-primary'
|
<div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} >
|
||||||
return (
|
{item.title}
|
||||||
<div key={item?.cid || index} className={`fc-event ${color}`} data-color={`${color}`} >
|
</div>
|
||||||
{item.description}
|
))}
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,19 +2,19 @@ let eventGuid = 0;
|
|||||||
let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
|
let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
|
||||||
|
|
||||||
export const INITIAL_EVENTS = [
|
export const INITIAL_EVENTS = [
|
||||||
{
|
// {
|
||||||
id: createEventId(),
|
// id: createEventId(),
|
||||||
title: 'All-day event',
|
// title: 'All-day event',
|
||||||
start: new Date('2025-01-19'),
|
// start: new Date('2025-01-19'),
|
||||||
end: new Date('2025-01-20'),
|
// end: new Date('2025-01-20'),
|
||||||
// color: 'blue'
|
// // color: 'blue'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: createEventId(),
|
// id: createEventId(),
|
||||||
title: 'Timed event',
|
// title: 'Timed event',
|
||||||
start: todayStr + 'T12:00:00',
|
// start: todayStr + 'T12:00:00',
|
||||||
// color: 'red'
|
// // color: 'red'
|
||||||
},
|
// },
|
||||||
];
|
];
|
||||||
|
|
||||||
export function createEventId() {
|
export function createEventId() {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export default function Comments(){
|
|||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="text-center mail-sidebar-title px-4">
|
<div className="text-center mail-sidebar-title px-4">
|
||||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export default function Contacts(){
|
|||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="text-center mail-sidebar-title px-4">
|
<div className="text-center mail-sidebar-title px-4">
|
||||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import getImage from "../../../utils/getImage";
|
import getImage from "../../../utils/getImage";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import siteLinks from "../../../links/siteLinks";
|
import siteLinks from "../../../links/siteLinks";
|
||||||
|
|
||||||
@@ -83,33 +83,31 @@ export default function UserHeader(){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.user}>
|
<a className="dropdown-item d-flex nav-link" href="#">
|
||||||
<i className="fa fa-user pr-2 text-success"></i> Users</Link>
|
<i className="fa fa-user pr-2 text-success"></i> Profile</a>
|
||||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.contacts}>
|
<a className="dropdown-item d-flex nav-link" href="#">
|
||||||
<i className="fa fa-envelope pr-2 text-primary"></i> Contacts
|
<i className="fa fa-envelope pr-2 text-primary"></i> Inbox
|
||||||
<span className="badge badge-primary ml-auto">6</span>
|
<span className="badge badge-primary ml-auto">6</span>
|
||||||
</Link>
|
</a>
|
||||||
<Link className="dropdown-item d-flex nav-link" to={siteLinks.settings}>
|
<a className="dropdown-item d-flex nav-link" href="#">
|
||||||
<i className=" ti ti-settings pr-2 text-info"></i> Settings
|
<i className=" ti ti-settings pr-2 text-info"></i> Settings
|
||||||
</Link>
|
</a>
|
||||||
<a className="dropdown-item d-flex nav-link" href="#">
|
<a className="dropdown-item d-flex nav-link" href="#">
|
||||||
<i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
|
<i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
|
||||||
|
<div className="row mt-2">
|
||||||
{/*<div className="row mt-2">*/}
|
<div className="col">
|
||||||
{/* <div className="col">*/}
|
<a className="bg-light p-3 text-center d-block" href="#">
|
||||||
{/* <a className="bg-light p-3 text-center d-block" href="#">*/}
|
<i className="fe fe-mail font-20 text-primary"></i>
|
||||||
{/* <i className="fe fe-mail font-20 text-primary"></i>*/}
|
<span className="d-block font-13 mt-2">My messages</span>
|
||||||
{/* <span className="d-block font-13 mt-2">My messages</span>*/}
|
</a>
|
||||||
{/* </a>*/}
|
</div>
|
||||||
{/* </div>*/}
|
<div className="col">
|
||||||
{/* <div className="col">*/}
|
<a className="bg-light p-3 text-center d-block" href="#">
|
||||||
{/* <a className="bg-light p-3 text-center d-block" href="#">*/}
|
<i className="fe fe-plus font-20 text-primary"></i>
|
||||||
{/* <i className="fe fe-plus font-20 text-primary"></i>*/}
|
<span className="d-block font-13 mt-2">Compose new</span>
|
||||||
{/* <span className="d-block font-13 mt-2">Compose new</span>*/}
|
</a>
|
||||||
{/* </a>*/}
|
</div>
|
||||||
{/* </div>*/}
|
</div>
|
||||||
{/*</div>*/}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -12,17 +12,11 @@ export default function ProductProvision(props){
|
|||||||
const productTitle = props?.productData?.title;
|
const productTitle = props?.productData?.title;
|
||||||
const productDescription = props?.productData?.description;
|
const productDescription = props?.productData?.description;
|
||||||
const productID = props?.productData?.product_id
|
const productID = props?.productData?.product_id
|
||||||
const productUID = props?.productData?.product_uid
|
|
||||||
const productSubUID = props?.productData?.product_subscription_uid
|
const productSubUID = props?.productData?.product_subscription_uid
|
||||||
|
|
||||||
const reqData = {
|
|
||||||
product_id : productID,
|
|
||||||
product_subscription_uid: productSubUID
|
|
||||||
}
|
|
||||||
|
|
||||||
const {data:provision, isFetching, isError, error} = useQuery({
|
const {data:provision, isFetching, isError, error} = useQuery({
|
||||||
queryKey: queryKeys.myproduct_provision,
|
queryKey: queryKeys.myproduct_provision,
|
||||||
queryFn: () => productProvision(reqData)
|
queryFn: () => productProvision(productID)
|
||||||
})
|
})
|
||||||
|
|
||||||
const provisionData = provision?.data?.provision
|
const provisionData = provision?.data?.provision
|
||||||
|
|||||||
@@ -40,10 +40,8 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.mail-msg{
|
.mail-msg{
|
||||||
max-height: 500px;
|
max-height: 747px;
|
||||||
min-height: 400px;
|
overflow: hidden;
|
||||||
// max-height: 747px;
|
|
||||||
overflow-y: auto;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
@include laptop {
|
@include laptop {
|
||||||
max-height: 450px;
|
max-height: 450px;
|
||||||
|
|||||||
+2
-16
@@ -138,28 +138,14 @@ $event-padding: 10px;
|
|||||||
|
|
||||||
.fc-today-button.fc-button,
|
.fc-today-button.fc-button,
|
||||||
.fc-timeGridWeek-button.fc-button-active, .fc-timeGridDay-button.fc-button-active, .fc-dayGridMonth-button.fc-button-active{
|
.fc-timeGridWeek-button.fc-button-active, .fc-timeGridDay-button.fc-button-active, .fc-dayGridMonth-button.fc-button-active{
|
||||||
color: #fff !important;
|
color: #fff!important;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #8E54E9 !important;
|
background-color: #8E54E9!important;
|
||||||
text-transform: capitalize !important;
|
text-transform: capitalize !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fc-h-event,
|
|
||||||
.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,
|
.fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,
|
||||||
.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;
|
padding: 10px 2px !important;
|
||||||
background-color: #3788d8 !important;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fc-theme-standard .fc-popover{
|
|
||||||
overflow-y: auto !important;
|
|
||||||
// height: calc(100% - 50px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fc .fc-more-popover .fc-popover-body {
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 100px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* END OF CALENDER STYLE */
|
/* END OF CALENDER STYLE */
|
||||||
@@ -4,8 +4,7 @@ const queryKeys = {
|
|||||||
recentAction: ['recent-action'],
|
recentAction: ['recent-action'],
|
||||||
product: ['product-data'],
|
product: ['product-data'],
|
||||||
product_url: ['product_url'],
|
product_url: ['product_url'],
|
||||||
myproduct_provision: ['myproduct_provision'],
|
myproduct_provision: ['myproduct_provision']
|
||||||
calendar_events: ['calendar_events']
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default queryKeys
|
export default queryKeys
|
||||||
@@ -101,20 +101,15 @@ export const topBar = () => {
|
|||||||
return getAuxEnd(`/panel/account/bar`)
|
return getAuxEnd(`/panel/account/bar`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// FUNCTION TO GET CALENDAR EVENTS
|
|
||||||
export const getCalendarEvents = () => {
|
|
||||||
return getAuxEnd(`/panel/account/calendar`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
|
// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
|
||||||
export const recentActions = () => {
|
export const recentActions = () => {
|
||||||
return getAuxEnd(`/panel/account/actions`)
|
return getAuxEnd(`/panel/account/actions`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// FUNCTION TO GET MY PRODUCT PROVISION DATA
|
// FUNCTION TO GET MY PRODUCT PROVISION DATA
|
||||||
export const productProvision = (reqData) => {
|
export const productProvision = (productID) => {
|
||||||
const postData = { ...reqData }
|
const reqData = { product_id : productID}
|
||||||
return getAuxEnd(`/panel/myproduct/provision`, postData)
|
return getAuxEnd(`/panel/myproduct/provision`,reqData)
|
||||||
}
|
}
|
||||||
|
|
||||||
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
||||||
|
|||||||
Reference in New Issue
Block a user