contact scroll bar fixed

src/component/auth/CSignup.jsx

@@ -86,10 +86,10 @@ export default function CSignup() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white custom-bg">
+                <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
                         <div className="row no-gutters justify-content-center">
-                        <div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1 h-100-vh">
+                        <div className="col-11 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="bg-white register p-5">
                                     <h1 className="mb-2">MERMS Panel</h1>

src/component/auth/Forgetpwd2.jsx

@@ -10,7 +10,7 @@ import { recoverPWD } from '../../services/services';
 
 const validationSchema = Yup.object().shape({
     username: Yup.string()
-      .email("Wrong email format")
+    //   .email("Wrong email format")
     //   .matches(
     //     /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
     //     "Invalid email format"
@@ -43,14 +43,14 @@ export default function Forgetpwd2() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white">
+                <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
-                        <div className="row no-gutters">
+                        <div className="row no-gutters justify-content-center">
-                            <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1h">
-                                <div className="d-flex align-items-center h-100-vh">
+                                <div className="mt-5 d-flex">
-                                    <div className="login p-50">
+                                    <div className="bg-white register p-5">
-                                        <h1 className="mb-2">Recover Password</h1>
+                                        <h1 className="mb-2">MERMS Panel</h1>
-                                        <p>Please enter your email.</p>
+                                        <p>Please enter your username.</p>
                                         <Formik
                                         initialValues={initialValues}
                                         validationSchema={validationSchema}
@@ -64,8 +64,8 @@ export default function Forgetpwd2() {
                                                         <>
                                                             <div className="col-12">
                                                                 <div className="form-group">
-                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Email*</label>
+                                                                    <label className={`text-black fw-bold control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
-                                                                    <input type="email" name='username' className="form-control" placeholder="Email" value={props.values.username} onChange={props.handleChange} />
+                                                                    <input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
                                                                 </div>
                                                             </div>
                                                             {mutation.error &&
@@ -98,13 +98,13 @@ export default function Forgetpwd2() {
                                     </div>
                                 </div>
                             </div>
-                            <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
+                            {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
                                 <div className="row align-items-center h-100">
                                     <div className="col-7 mx-auto ">
-                                        {/* <img className="img-fluid" src={LoginImg} alt="" /> */}
+                                        <img className="img-fluid" src={LoginImg} alt="" />
                                     </div>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>

src/component/auth/Login2.jsx

@@ -66,12 +66,12 @@ export default function Login() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white">
+                <div className="vh-100 custom-bg">
                     <div className="container-fluid p-0">
-                        <div className="row no-gutters">
+                        <div className="row no-gutters justify-content-center">
-                            <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
-                                <div className="d-flex align-items-center h-100-vh">
+                                <div className="mt-5 d-flex">
-                                    <div className="login p-50">
+                                    <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
                                         <p>Welcome back, please login to your account.</p>
                                         <form className="mt-3 mt-sm-5">
@@ -135,13 +135,13 @@ export default function Login() {
                                     </div>
                                 </div>
                             </div>
-                            <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
+                            {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
                                 <div className="row align-items-center h-100">
                                     <div className="col-7 mx-auto ">
-                                        {/* <img className="img-fluid" src={LoginImg} alt="" /> */}
+                                        <img className="img-fluid" src={LoginImg} alt="" />
                                     </div>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>

src/component/auth/Signup2.jsx

@@ -56,104 +56,104 @@ export default function Signup2() {
     <div className="app">
         <div className="app-wrap">
             <div className="app-contant">
-                <div className="bg-white">
+                <div className="vh-100 bg-white custom-bg">
                     <div className="container-fluid p-0">
-                        <div className="row no-gutters">
+                        <div className="row no-gutters justify-content-center">
-                        <div className="col-sm-6 col-lg-5 col-xxl-3  align-self-center order-2 order-sm-1">
+                            <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
-                            <div className="d-flex align-items-center h-100-vh">
+                                <div className="mt-5 d-flex">
-                                <div className="register p-5">
+                                    <div className="bg-white 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-sm-6">
+                                                                <div className="col-12 col-md-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>
+                                                                <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.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
-                                                                    <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} />
-                                                                    <input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
+                                                                    </div>
                                                                 </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 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 text-end">
+                                                                {mutation.error &&
-                                                                <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
+                                                                    <>
-                                                            </div>
+                                                                    <div className="col-12">
-                                                        </>
+                                                                        <p className='text-danger'>{mutation.error.message}</p>
-                                                        :
+                                                                    </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="col-12 mt-3 text-end">
+                                                                    <button type='submit' className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Sign up'}</button>
+                                                                </div>
+                                                            </>
+                                                            :
+                                                            <div className='col-12'>
+                                                                <div className="rounded-2 d-flex flex-column justify-content-between align-items-center" style={{height: '200px', backgroundColor: '#F2FAF7'}}>
+                                                                    <h4 className='p-4 text-black'>Check your email to continue.</h4>
+                                                                    <Link to={siteLinks.login} className='p-2 text-primary' style={{color: '#6FCAEF'}}>Home</Link>
+                                                                </div>
                                                             </div>
+                                                        }
+                                                        
+                                                        <div className="col-12 mt-3">
+                                                            <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                         </div>
-                                                    }
-                                                    
-                                                    <div className="col-12 mt-3">
-                                                        <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
                                                     </div>
-                                                </div>
+                                                </Form>
-                                            </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 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>

src/component/calendar/Calendar.jsx

@@ -1,8 +1,13 @@
 import React, { useCallback, useState } from "react";
+import { useQuery } from '@tanstack/react-query'
+
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import EventCalendar from "./EventCalendar";
 import ExternalDraggable from "./ExternalDraggable";
 
+import { getCalendarEvents } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
+
 
 export default function Calendar(){
 
@@ -11,6 +16,15 @@ export default function Calendar(){
     //     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 = [
         {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')},
@@ -52,40 +66,56 @@ export default function Calendar(){
                         </div>
                         <div className="card-body">
                             <div className="row">
-                                <div className="col-xl-3">
+                            {isFetching ? 
-                                    <div id="external-events">
+                                <>
-                                        <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
+                                    <div className="col-12">
-                                            Add New Event
+                                        <p className='text-mute'>Loading...</p>
-                                        </button>
+                                    </div>
-                                        <p className="mt-3">
+                                </>
-                                            Drag and drop your event or click in the calendar.
+                                : isError ?
-                                        </p>
+                                <div className="col-12">
-                                        {/* {dummyEvents.map((item, index) => (
+                                    <p className='text-danger'>{error.message}</p>
-                                            <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
+                                </div>
-                                                draggable="true"
+                                :
-                                                onDragStart={() =>
+                                <>
-                                                handleDragStart({...item})
+                                    <div className="col-xl-3">
-                                                }
+                                        <div id="external-events">
-                                            >
+                                            {/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
-                                                <span></span> {item.title}
+                                                Add New Event
-                                            </div>
+                                            </button>
-                                        ))} */}
+                                            <p className="mt-3">
-                                        <ExternalDraggable dummyEvents={dummyEvents} />
+                                                Drag and drop your event or click in the calendar.
-                                        <div className="form-check">
+                                            </p> */}
-                                            <input className="form-check-input" type="checkbox" value={removeAfterDrop}
+                                            {/* {dummyEvents.map((item, index) => (
-                                                   id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
+                                                <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
-                                                <label className="form-check-label" htmlFor="defaultCheck1">
+                                                    draggable="true"
-                                                    Remove After Drop
+                                                    onDragStart={() =>
-                                                </label>
+                                                    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 className="col-xl-9">
+                                        <div className="event-calendar">
-                                    <div className="event-calendar">
+                                            <EventCalendar 
-                                        {/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
+                                                removeAfterDrop={removeAfterDrop} 
-                                        <EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
+                                                eventList={eventList}
+                                            />
+                                        </div>
                                     </div>
-                                </div>
+                                </>
+                            }
                             </div>
 
                         </div>

src/component/calendar/EventCalendar.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { formatDate } from '@fullcalendar/core';
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
@@ -6,9 +6,9 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { INITIAL_EVENTS, createEventId } from './event-utils';
 
-export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfterDrop, setDummyEvents}) {
+export default function EventCalendar({removeAfterDrop, eventList}) {
   const [weekendsVisible, setWeekendsVisible] = useState(true);
-  const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
+  const [currentEvents, setCurrentEvents] = useState([]);
 
   function handleWeekendsToggle() {
     setWeekendsVisible(!weekendsVisible);
@@ -51,9 +51,9 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
                 ...event
             }
             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))
-            }
+            // }
         }
   }
 
@@ -64,27 +64,32 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
   }
 
 
-  function handleEventClick(clickInfo) {
+  // function handleEventClick(clickInfo) {
-    if (
+  //   if (
-      confirm(
+  //     confirm(
-        `Are you sure you want to delete the event '${clickInfo.event.title}'`
+  //       `Are you sure you want to delete the event '${clickInfo.event.title}'`
-      )
+  //     )
-    ) {
+  //   ) {
-      clickInfo.event.remove();
+  //     clickInfo.event.remove();
-    }
+  //   }
-  }
+  // }
 
   function handleEvents(events) {
     // setCurrentEvents(events);
   }
 
+  useEffect(()=>{
+    let newEventList = eventList.map(item => ({...item, start: new Date(item?.start)}))
+    setCurrentEvents(newEventList)
+  },[eventList])
+
   return (
     <div className="demo-app">
       <div className="demo-app-main">
         <FullCalendar
           plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
           headerToolbar={{
-            left: 'prev next today',
+            left: 'prev,next,today',
             center: 'title',
             right: 'dayGridMonth,timeGridWeek,timeGridDay',
           }}         
@@ -96,17 +101,18 @@ export default function EventCalendar({draggedEvent, setDraggedEvent, removeAfte
           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
+          // select={handleDateSelect}
+          // eventClick={handleEventClick}
           /* you can update a remote database when these fire:
           eventAdd={function(){}}
           eventChange={function(){}}
           eventRemove={function(){}}
           */
 
-          eventRemove={removeEvent}
+          // eventBackgroundColor='purple'
+          // eventRemove={removeEvent}
           droppable= {true} // this allows things to be dropped onto the calendar
           drop={onDrop}
         />

src/component/calendar/ExternalDraggable.jsx

@@ -1,9 +1,16 @@
 import React, { useEffect, useRef } from "react";
 import { Draggable } from "@fullcalendar/interaction";
 
-const ExternalDraggable = ({dummyEvents}) => {
+const ExternalDraggable = ({category}) => {
   const eventContainerRef = useRef(null);
 
+  const events = [
+    {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
+    {id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
+    {id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
+    {id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
+]
+
   useEffect(() => {
     // Make the external events draggable
     const draggable = new Draggable(eventContainerRef.current, {
@@ -21,11 +28,15 @@ const ExternalDraggable = ({dummyEvents}) => {
 
   return (
     <div ref={eventContainerRef} className="external-events">
-      {dummyEvents.map((item, index) => (
+      {category && category.map((item, index) => {
-          <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} >
+        let color = index % 4 === 0 ? 'fc-event-success' : index % 3 === 0 ? 'fc-event-danger' : index % 2 === 0 ? 'fc-event-warning' : 'fc-event-primary'
-              {item.title}
+        return (
-          </div>
+            <div key={item?.cid || index} className={`fc-event ${color}`} data-color={`${color}`} >
-      ))}
+                {item.description}
+            </div>
+        )
+      } 
+      )}
     </div>
   );
 };

src/component/calendar/event-utils.js

@@ -2,19 +2,19 @@ let eventGuid = 0;
 let todayStr = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today
 
 export const INITIAL_EVENTS = [
-  // {
+  {
-  //   id: createEventId(),
+    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() {

src/component/comments/Comments.js

@@ -18,7 +18,7 @@ export default function Comments(){
                                         <div className="row justify-content-center">
                                             <div className="col-12">
                                                 <div className="text-center mail-sidebar-title px-4">
-                                                    <a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <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"><i className="fa fa-plus pl-2"></i></a>
                                                 </div>
                                             </div>
                                             <div className="col-12">

src/component/contacts/Contacts.js

@@ -18,7 +18,7 @@ export default function Contacts(){
                                         <div className="row justify-content-center">
                                             <div className="col-12">
                                                 <div className="text-center mail-sidebar-title px-4">
-                                                    <a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18">className= <i className="fa fa-plus pl-2"></i></a>
+                                                    <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>
                                                 </div>
                                             </div>
                                             <div className="col-12">

src/component/layout/layoutcom/UserHeader.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import getImage from "../../../utils/getImage";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import siteLinks from "../../../links/siteLinks";
 
@@ -83,31 +83,33 @@ export default function UserHeader(){
                                         </div>
                                     </div>
                                     <div className="p-4">
-                                        <a className="dropdown-item d-flex nav-link" href="#">
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.user}>
-                                            <i className="fa fa-user pr-2 text-success"></i> Profile</a>
+                                            <i className="fa fa-user pr-2 text-success"></i> Users</Link>
-                                        <a className="dropdown-item d-flex nav-link" href="#">
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.contacts}>
-                                            <i className="fa fa-envelope pr-2 text-primary"></i> Inbox
+                                            <i className="fa fa-envelope pr-2 text-primary"></i> Contacts
                                             <span className="badge badge-primary ml-auto">6</span>
-                                        </a>
+                                        </Link>
-                                        <a className="dropdown-item d-flex nav-link" href="#">
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.settings}>
                                             <i className=" ti ti-settings pr-2 text-info"></i> Settings
-                                        </a>
+                                        </Link>
                                         <a className="dropdown-item d-flex nav-link" href="#">
                                             <i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
-                                        <div className="row mt-2">
+
-                                            <div className="col">
+                                        {/*<div className="row mt-2">*/}
-                                                <a className="bg-light p-3 text-center d-block" href="#">
+                                        {/*    <div className="col">*/}
-                                                    <i className="fe fe-mail font-20 text-primary"></i>
+                                        {/*        <a className="bg-light p-3 text-center d-block" href="#">*/}
-                                                    <span className="d-block font-13 mt-2">My messages</span>
+                                        {/*            <i className="fe fe-mail font-20 text-primary"></i>*/}
-                                                </a>
+                                        {/*            <span className="d-block font-13 mt-2">My messages</span>*/}
-                                            </div>
+                                        {/*        </a>*/}
-                                            <div className="col">
+                                        {/*    </div>*/}
-                                                <a className="bg-light p-3 text-center d-block" href="#">
+                                        {/*    <div className="col">*/}
-                                                    <i className="fe fe-plus font-20 text-primary"></i>
+                                        {/*        <a className="bg-light p-3 text-center d-block" href="#">*/}
-                                                    <span className="d-block font-13 mt-2">Compose new</span>
+                                        {/*            <i className="fe fe-plus font-20 text-primary"></i>*/}
-                                                </a>
+                                        {/*            <span className="d-block font-13 mt-2">Compose new</span>*/}
-                                            </div>
+                                        {/*        </a>*/}
-                                        </div>
+                                        {/*    </div>*/}
+                                        {/*</div>*/}
+
                                     </div>
                                 </div>
                             </li>

src/component/product/ProductProvision.jsx

@@ -12,11 +12,17 @@ export default function ProductProvision(props){
     const productTitle  = props?.productData?.title;
     const productDescription  = props?.productData?.description;
     const productID = props?.productData?.product_id
+    const productUID = props?.productData?.product_uid
     const productSubUID = props?.productData?.product_subscription_uid
 
+    const reqData = {
+        product_id : productID,
+        product_subscription_uid: productSubUID
+    }
+
     const {data:provision, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.myproduct_provision,
-        queryFn: () => productProvision(productID)
+        queryFn: () => productProvision(reqData)
     })
 
     const provisionData = provision?.data?.provision

src/css/mail/_mail.scss

@@ -40,8 +40,10 @@
 	align-items: center;
 }
 .mail-msg{
-	max-height: 747px;
+	max-height: 500px;
-	overflow: hidden;
+	min-height: 400px;
+	// max-height: 747px;
+	overflow-y: auto;
 	outline: none;
 	@include laptop {
 		max-height: 450px;

src/css/style.scss

@@ -138,14 +138,28 @@ $event-padding: 10px;
 
 .fc-today-button.fc-button,
 .fc-timeGridWeek-button.fc-button-active, .fc-timeGridDay-button.fc-button-active, .fc-dayGridMonth-button.fc-button-active{
-  color: #fff!important;
+  color: #fff !important;
   border: none;
-  background-color: #8E54E9!important;
+  background-color: #8E54E9 !important;
   text-transform: capitalize !important;
 }
 
+.fc-h-event,
 .fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event,
 .fc-event.fc-event-draggable.fc-event-start.fc-event-end.fc-daygrid-event{
   padding: 10px 2px !important;
+  background-color: #3788d8 !important;
+  color: white;
 }
+
+.fc-theme-standard .fc-popover{
+  overflow-y: auto !important;
+  // height: calc(100% - 50px);
+}
+
+.fc .fc-more-popover .fc-popover-body {
+  overflow-y: auto;
+  height: 100px !important;
+}
+
 /* END OF CALENDER STYLE */

src/services/queryKeys.js

@@ -4,7 +4,8 @@ const queryKeys = {
     recentAction: ['recent-action'],
     product: ['product-data'],
     product_url: ['product_url'],
-    myproduct_provision: ['myproduct_provision']
+    myproduct_provision: ['myproduct_provision'],
+    calendar_events: ['calendar_events']
 }
 
 export default queryKeys

src/services/services.js

@@ -101,15 +101,20 @@ export const topBar = () => {
     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
 export const recentActions = () => {
     return getAuxEnd(`/panel/account/actions`)
 }
 
 // FUNCTION TO GET MY PRODUCT PROVISION DATA
-export const productProvision = (productID) => {
+export const productProvision = (reqData) => {
-    const reqData = { product_id : productID}
+    const postData = { ...reqData }
-    return getAuxEnd(`/panel/myproduct/provision`,reqData)
+    return getAuxEnd(`/panel/myproduct/provision`, postData)
 }
 
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION