added top margin to login links

.env

@@ -5,6 +5,12 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
 

.env.development

@@ -5,5 +5,11 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.production

@@ -4,5 +4,11 @@ REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://api.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
+
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

src/App.css

@@ -8,4 +8,27 @@
   background-image: url('./assets/bg/signup_bg.jpg') !important;
   background-size: cover;
   background-repeat: no-repeat;
+}
+
+.login-links{
+  margin-top: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.login-links a {
+  font-size: 15px;
+  font-weight: 700;
+  padding: 0px 20px;
+  border-right: 2px solid;
+  cursor: pointer;
+}
+
+.login-links a:nth-of-type(1){
+  padding-left: 0px;
+}
+
+.login-links a:last-child{
+  border: 0px;
 }

src/App.js

@@ -11,7 +11,7 @@ function App() {
         refetchOnWindowFocus: false,
         retry: 3,
         // refetchOnMount: false,
-        staleTime: 3000
+        staleTime: Infinity // can also be a number in millisecond
       },
     },
   })

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">
@@ -132,16 +132,23 @@ export default function Login() {
                                                 </div>
                                             </div>
                                         </div>
+
+                                        <div className="login-links">
+                                            <a href={process.env.REACT_APP_HOME_LINK}>Home</a>
+                                            <a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
+                                            <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
+                                            <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                            <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
+                            {/* <div className="custom-bg col-sm-6 col-xxl-9 col-lg-7 b-gradient o-hidden order-1 order-sm-2">
                                 <div className="row align-items-center h-100">
                                     <div className="col-7 mx-auto ">
-                                        {/* <img className="img-fluid" src={LoginImg} alt="" /> */}
+                                        <img className="img-fluid" src={LoginImg} alt="" />
                                     </div>
                                 </div>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </div>

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 React, { useCallback, useEffect, 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,14 +16,16 @@ export default function Calendar(){
     //     setDraggedEvent(event)
     // }
 
-    const events = [
+    const {data, isFetching, isError, error} = useQuery({
-        {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
+        queryKey: queryKeys.calendar_events,
-        {id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
+        queryFn: () => getCalendarEvents()
-        {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 receievedEvents = data?.data?.bar_data
+    const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
+    const eventList = receievedEvents?.list //EVENT LIST FROM API
+
+    const [activeCategory, setActiveCategory] = useState('1')
 
     const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
 
@@ -33,11 +40,14 @@ export default function Calendar(){
     const handleAddNewEvent = () => {
         if(newEvent.title && newEvent.color){
             const eventToAdd = {...newEvent}
-            setDummyEvents(prev => ([...prev, eventToAdd]))
+            // setDefaultCategory(prev => ([...prev, eventToAdd]))
             setNewEvent({title: '', color: ''})
         }
     }
 
+    const handleActiveCategory = (id) => {
+        setActiveCategory(id)
+    }
 
     return(
         <>
@@ -52,40 +62,87 @@ 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">
+                                        <p className='text-mute'>Loading...</p>
+                                    </div>
+                                </>
+                                : isError ?
+                                <div className="col-12">
+                                    <p className='text-danger'>{error.message}</p>
+                                </div>
+                                :
+                                <>
+                                    <div className="col-xl-3">
+                                       
+                                        {/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
                                             Add New Event
                                         </button>
                                         <p className="mt-3">
                                             Drag and drop your event or click in the calendar.
-                                        </p>
+                                        </p> */}
-                                        {/* {dummyEvents.map((item, index) => (
+
-                                            <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
+                                        {category.map((item, index) => {
-                                                draggable="true"
+                                            let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
-                                                onDragStart={() =>
+                                            let circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
-                                                handleDragStart({...item})
+                                            return (
-                                                }
+                                                // <div key={index} className={`fc-event ${color}`} data-color={`${color}`} 
-                                            >
+                                                //     // draggable={false}
-                                                <span></span> {item.title}
+                                                //     // onDragStart={() =>
-                                            </div>
+                                                //     // handleDragStart({...item})
-                                        ))} */}
+                                                //     // }
-                                        <ExternalDraggable dummyEvents={dummyEvents} />
+                                                // >
-                                        <div className="form-check">
+                                                //     <span>{item.description}</span>
+                                                // </div>
+
+                                                // <div key={index} className={`form-check ${color}`}>
+                                                //     <input className="form-check-input" type="radio" value={item.cid}
+                                                //         id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
+                                                //         <label className={`w-100 form-check-label`} htmlFor={item.cid}>
+                                                //         {item.description}
+                                                //         </label>
+                                                // </div>
+
+                                                <div key={index} className={`form-check ${color}`} onClick={() => handleActiveCategory(item.cid)} style={{cursor: 'pointer'}}>
+                                                    <div>
+                                                        <span className="nav align-items-center">
+                                                            <span>
+                                                                <i className={`fa fa-circle-o pr-4 ${item.cid == activeCategory ? circleColor : 'text-light'}`}></i>
+                                                            </span>
+                                                        <span>
+                                                            <span>{item?.description}</span>
+                                                        </span>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            )
+                                        }
+                                        )}
+
+                                        {/* <div id="external-events">
+                                            <ExternalDraggable category={category} />
+                                        </div> */}
+
+                                        {/* <div className="form-check">
                                             <input className="form-check-input" type="checkbox" value={removeAfterDrop}
-                                                   id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
+                                                id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
                                                 <label className="form-check-label" htmlFor="defaultCheck1">
                                                     Remove After Drop
                                                 </label>
+                                        </div> */}
+                                    </div>
+                                    <div className="col-xl-9">
+                                        <div className="event-calendar">
+                                            <EventCalendar 
+                                                removeAfterDrop={removeAfterDrop} 
+                                                eventList={eventList}
+                                                activeCategory={activeCategory}
+                                            />
                                         </div>
                                     </div>
-                                </div>
+                                </>
-                                <div className="col-xl-9">
+                            }
-                                    <div className="event-calendar">
-                                        {/* <EventCalendar draggedEvent={draggedEvent} setDraggedEvent={setDraggedEvent} /> */}
-                                        <EventCalendar removeAfterDrop={removeAfterDrop} setDummyEvents={setDummyEvents} />
-                                    </div>
-                                </div>
                             </div>
 
                         </div>

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, activeCategory}) {
   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,34 @@ 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)}))
+    let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
+    console.log('newEventList', newEventList)
+    setCurrentEvents(newEventList)
+  },[activeCategory])
+
   return (
     <div className="demo-app">
       <div className="demo-app-main">
         <FullCalendar
           plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
           headerToolbar={{
-            left: 'prev next today',
+            left: 'prev,next,today',
             center: 'title',
             right: 'dayGridMonth,timeGridWeek,timeGridDay',
           }}         
@@ -96,17 +103,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

@@ -1,354 +1,276 @@
-import React from "react";
+"use client"
+import React, { useEffect, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
+import { useQuery } from "@tanstack/react-query";
+import { contactData } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+import getCustomTime from "../../utils/getCustomTime";
 
 export default function Contacts(){
 
+    const {data:contacts, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.contacts,
+        queryFn: () => contactData()
+    })
+
+    const contactsData = contacts?.data?.calendar_data?.contacts // LIST OF CONTACTS
+    const contactsCategory = contacts?.data?.calendar_data?.category // LIST OF CATEGORY
+
+    const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
+
+    const [activeContactUID, setActiveContactUID] = useState(null)
+    const [activeDetail, setActiveDetail] = useState(null)
+
+    const [filteredContactData, setFiltererdContactData] = useState(null)
+
+    const changeActiveUID = (uid) => {
+        setActiveContactUID(uid)
+        let detail = contactsData.filter(item => item.uid == uid)
+        setActiveDetail(detail)
+    }
+
+    const changeActiveCategoryUID = (id) => {
+        let filteredConData = []
+        setActiveCategoryUID(id)
+        if(id == '0'){
+            filteredConData = contactsData
+        }else{
+            filteredConData = contactsData.filter(item => item.category == id)
+        }
+        setFiltererdContactData(filteredConData)
+        changeActiveUID(filteredConData[0]?.uid)
+    }
+
     return(
         <>
             <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
-            <div className="row">
+            {isFetching ? 
-                {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+                <>
-                <div className="col-12">
+                    <div className="row">
-                    <div className="card card-statistics mail-contant">
+                        <div className="col-12">
-                        <div className="card-body p-0">
+                            <p className='text-mute'>Loading...</p>
-                            <div className="row no-gutters">
+                        </div>
-                                <div className="col-md-4 col-xxl-2 col-md-4">
+                    </div>
-                                    <div className="mail-sidebar">
+                </>
-                                        <div className="row justify-content-center">
+                : isError ?
-                                            <div className="col-12">
+                <div className="row">
-                                                <div className="text-center mail-sidebar-title px-4">
+                    <div className="col-12">
-                                                    <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>
+                        <p className='text-danger'>{error.message}</p>
+                    </div>
+                </div>
+                :
+                <div className="row">
+                    {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+                    <div className="col-12">
+                        <div className="card card-statistics mail-contant">
+                            <div className="card-body p-0">
+                                <div className="row no-gutters">
+                                    <div className="col-md-4 col-xxl-2 col-md-4">
+                                        <div className="mail-sidebar">
+                                            <div className="row justify-content-center">
+                                                <div className="d-none col-12">
+                                                    <div className="text-center mail-sidebar-title px-4">
+                                                        <a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                            <div className="col-12">
-                                                <div className="px-4 py-4">
-                                                    <ul className="pl-0">
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-envelope-o text-primary pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Inbox</span>
-                                                                            </span>
-                                                                            <span className="nav-item ml-auto text-right">
-                                                                                             <span className="badge badge-pill badge-primary float-right">0+</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-paper-plane-o pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Replied Mail</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-
-                                                    </ul>
-                                                    <ul className="pl-0 mt-5">
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-circle-o text-danger pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Personal</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-circle-o pr-4 text-warning"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Work</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-plus pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Add Category</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="col-md-8  col-xxl-4 border-md-t">
-                                    <div className="mail-content  border-right border-n h-100">
-                                        <div className="mail-search border-bottom">
-                                            <div className="row align-items-center mx-0">
                                                 <div className="col-12">
-                                                    {/*<div className="form-group pt-3">*/}
+                                                    <div className="px-4 py-4">
-                                                    {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
+                                                        <ul className="pl-0">
-                                                    {/*        <i className="fa fa-search"></i>*/}
+                                                            <li className="py-2">
-                                                    {/*</div>*/}
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-envelope-o text-primary pr-4"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Inbox</span>
+                                                                                </span>
+                                                                                <span className="nav-item ml-auto text-right">
+                                                                                                <span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li>
+                                                            <li className="py-2">
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-paper-plane-o pr-4"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Replied Mail</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li>
+
+                                                        </ul>
+
+                                                        <ul className="pl-0 mt-5">
+                                                            <li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
+                                                                    <div>
+                                                                        <span className="nav align-items-center">
+                                                                            <span>
+                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
+                                                                            </span>
+                                                                        <span>
+                                                                            <span>All</span>
+                                                                        </span>
+                                                                        </span>
+                                                                    </div>
+                                                                </li>
+                                                            {contactsCategory && contactsCategory.map(item => (
+                                                                <li key={item?.product_id} className="py-2" onClick={()=>changeActiveCategoryUID(item?.product_id)} style={{cursor: 'pointer'}}>
+                                                                    <div>
+                                                                        <span className="nav align-items-center">
+                                                                            <span>
+                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == item?.product_id ? 'text-primary' : 'text-warning'}`}></i>
+                                                                            </span>
+                                                                        <span>
+                                                                            <span>{item?.title}</span>
+                                                                        </span>
+                                                                        </span>
+                                                                    </div>
+                                                                </li>
+                                                            ))}
+                                                            {/* <li className="py-2">
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-circle-o pr-4 text-warning"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Work</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li>
+                                                            <li className="py-2">
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-plus pr-4"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Add Category</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li> */}
+                                                        </ul>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="mail-msg scrollbar scroll_dark">
+                                    </div>
-                                            <div className="mail-msg-item">
+                                    <div className="col-md-8  col-xxl-4 border-md-t">
-                                                <a href="javascript:void(0)">
+                                        <div className="mail-content  border-right border-n h-100">
-                                                    <div className="media align-items-center">
+                                            <div className="mail-search border-bottom">
-                                                        <div className="mr-3">
+                                                <div className="row align-items-center mx-0">
-                                                            <div className="bg-img">
+                                                    <div className="col-12">
-                                                                <img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
+                                                        {/*<div className="form-group pt-3">*/}
-                                                            </div>
+                                                        {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
-                                                        </div>
+                                                        {/*        <i className="fa fa-search"></i>*/}
-                                                        <div className="w-100">
+                                                        {/*</div>*/}
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Martin smith</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
                                                     </div>
-                                                </a>
+                                                </div>
                                             </div>
-                                            <div className="mail-msg-item">
+                                            <div className="mail-msg scrollbar scroll_dark">
-                                                <a href="javascript:void(0)">
+                                                {contactsData && (filteredContactData || contactsData).map((contact, index)=> {
-                                                    <div className="media align-items-center">
+                                                    const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
-                                                        <div className="mr-3">
+                                                    return (
-                                                            <div className="bg-img">
+                                                        <div key={contact.uid} onClick={()=>changeActiveUID(contact.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
-                                                                <img  src={getImage("avtar/02.jpg")}  className="img-fluid" alt="user" />
+                                                            <a href="#">
-                                                            </div>
+                                                                <div className="media align-items-center">
+                                                                    <div className="mr-3">
+                                                                        <div className="bg-img">
+                                                                            <img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
+                                                                        </div>
+                                                                    </div>
+                                                                    <div className="w-100">
+                                                                        <div className="mail-msg-item-titel justify-content-between">
+                                                                            <p>{contact.sender}</p>
+                                                                            {/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
+                                                                            <p className="d-none d-xl-block"><span>{new Date(contact.added).toDateString()}</span></p>
+                                                                        </div>
+                                                                        <h5 className="mb-0 my-2">{contact.title}</h5>
+                                                                        <p>{contact.message.length < 100 ? contact.message : contact.message.substring(0,101) + ' ...' }</p>
+                                                                        <p className="d-xl-none">
+                                                                            <span>
+                                                                            {new Date(contact.added).toDateString()}
+                                                                            {/* {getCustomTime(contact.added)} */}
+                                                                            </span>
+                                                                        </p>
+                                                                    </div>
+                                                                </div>
+                                                            </a>
                                                         </div>
-                                                        <div className="w-100">
+                                                    )
-                                                            <div className="mail-msg-item-titel justify-content-between">
+                                                })}
-                                                                <p>DutcaPatrick</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Mobile app Designer </h5>
-                                                            <p>Very nice template, lots of pages and good documentation.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>m_morsch</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Landing page Designer</h5>
-                                                            <p>Excellent and at a great price... thank you very much!</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/04.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>AnnaHorno</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Re-Design ios app</h5>
-                                                            <p>Solved my theme problem in 10 minutes. We thank you.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/05.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Wdcorbitt</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Mobil UX/UI Designer</h5>
-                                                            <p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/06.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Anne Smith</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Jobly Opportunity</h5>
-                                                            <p>Mentor has so many features and layouts. Its a great choice.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/07.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Paul Flavius</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img src="assets/img/avtar/08.jpg" className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Sara Lisbon</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">UI Designer</h5>
-                                                            <p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img src="assets/img/avtar/09.jpg" className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Annahorno</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
+                                    <div className="col-xxl-6 border-t border-xxl-t">
-                                <div className="col-xxl-6 border-t border-xxl-t">
-                                    <div className="mail-chat py-5 px-5">
-                                        <div className="media align-items-center">
-                                            <div className="bg-img mr-3">
-                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                            </div>
-                                            <div>
-                                                <h4 className="mb-0">Dutca Patrick</h4>
-                                                <p>30 Min ago</p>
-                                            </div>
-                                        </div>
-                                        <div className="mt-4 d-flex justify-content-between">
-                                            <div>
-                                                <h3>Landing page Designer...</h3>
-                                            </div>
-                                            <div className="d-flex">
-                                                {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
-                                                {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <p className="my-4">hey adminjon...</p>
-                                            <p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
-                                            <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
-                                            <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
-                                            {/*<div className="my-5">*/}
-                                            {/*    <p>Have lovely Day,</p>*/}
-                                            {/*    <p>adminjon</p>*/}
-                                            {/*</div>*/}
-                                        </div>
-                                    </div>
 
-                                    <div className="bg-light mail-f px-4 py-3">
+                                        <div className="mail-chat py-5 px-5">
-                                        <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
+                                            <div className="media align-items-center">
-                                            <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
+                                                <div className="bg-img mr-3">
-                                            <a href="javascript:void(0)" className="text-primary"><i className="fa fa-microphone"></i></a>
+                                                    <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                        </div>
+                                                </div>
-                                        <div className="collapse" id="editer">
+                                                <div>
-                                            <div className="form-group">
+                                                    <h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
-                                                <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
+                                                    <p>{activeContactUID ? new Date(activeDetail[0].added).toDateString() : new Date(contactsData[0].added).toDateString()}</p>
+                                                </div>
                                             </div>
-                                        </div>
+                                            <div className="mt-4 d-flex justify-content-between">
-                                        <div className="collapse" id="forward">
+                                                <div>
-                                            <div className="form-group">
+                                                    <h3>{activeContactUID ? activeDetail[0].title : contactsData[0].title}</h3>
-                                                <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
+                                                </div>
-                                            </div>
+                                                <div className="d-flex">
-                                        </div>
+                                                    {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
-                                        <div className="d-flex align-items-center justify-content-between py-2">
+                                                    {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
-                                            <div>
+                                                </div>
-                                                {/*<ul className="nav">*/}
-                                                {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
-                                                {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
-                                                {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
-                                                {/*</ul>*/}
                                             </div>
                                             <div>
-                                                {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
+                                                <p>{activeContactUID ? activeDetail[0].message : contactsData[0].message}</p>
+                                                {/* <p className="my-4">hey adminjon...</p>
+                                                <p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
+                                                <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
+                                                <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
+                                                {/*<div className="my-5">*/}
+                                                {/*    <p>Have lovely Day,</p>*/}
+                                                {/*    <p>adminjon</p>*/}
+                                                {/*</div>*/}
+                                            </div>
+                                        </div>
+
+                                        <div className="bg-light mail-f px-4 py-3">
+                                            <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
+                                                <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
+                                                <a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
+                                            </div>
+                                            <div className="collapse" id="editer">
+                                                <div className="form-group">
+                                                    <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
+                                                </div>
+                                            </div>
+                                            <div className="collapse" id="forward">
+                                                <div className="form-group">
+                                                    <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
+                                                </div>
+                                            </div>
+                                            <div className="d-flex align-items-center justify-content-between py-2">
+                                                <div>
+                                                    {/*<ul className="nav">*/}
+                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
+                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
+                                                    {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
+                                                    {/*</ul>*/}
+                                                </div>
+                                                <div>
+                                                    {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -357,7 +279,7 @@ export default function Contacts(){
                         </div>
                     </div>
                 </div>
-            </div>
+            }
         </>
     )
 }

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/calendar/_calendar.scss

@@ -31,13 +31,14 @@
 .fc-event {
   border-radius: 2px;
   border: none;
-  cursor: move;
+  // cursor: move;
   font-size: 13px;
   margin: 5px 0px;
   padding: 10px 10px 10px 40px;
   text-align: left;
   position:relative;
   &:before {
+    display: none;
     content:'';
     position:absolute;
     width:15px;
@@ -49,6 +50,9 @@
     &-primary {
       @include hex-rgba($primary, 0.2);
       color:$primary;
+      & label {
+        color:$primary;
+      }
       &:before {
         @include hex-rgba($primary, 0.8);
       }
@@ -59,6 +63,9 @@
     &-warning {
       @include hex-rgba($warning, 0.2);
       color:$warning;
+      & label {
+        color:$warning;
+      }
       &:before {
         @include hex-rgba($warning, 0.8);
       }
@@ -69,6 +76,9 @@
     &-danger {
       @include hex-rgba($danger, 0.2);
       color:$danger;
+      & label {
+        color:$danger;
+      }
       &:before {
         @include hex-rgba($danger, 0.8);
       }
@@ -79,6 +89,9 @@
     &-success {
       @include hex-rgba($success, 0.2);
       color:$success;
+      & label {
+        color:$success;
+      }
       &:before {
         @include hex-rgba($success, 0.8);
       }

src/css/mail/_mail.scss

@@ -41,7 +41,7 @@
 }
 .mail-msg{
 	max-height: 747px;
-	overflow: hidden;
+	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,9 @@ const queryKeys = {
     recentAction: ['recent-action'],
     product: ['product-data'],
     product_url: ['product_url'],
-    myproduct_provision: ['myproduct_provision']
+    myproduct_provision: ['myproduct_provision'],
+    calendar_events: ['calendar_events'],
+    contacts: ['contacts']
 }
 
 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
@@ -117,6 +122,11 @@ export const productData = () => {
     return getAuxEnd(`/panel/account/products`)
 }
 
+// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+export const contactData = () => {
+    return getAuxEnd(`/panel/contacts`)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
 export const productsURL = () => {
     return getAuxEnd(`/panel/account/products/url`)

src/utils/getCustomTime.js

@@ -0,0 +1,13 @@
+function getCustomTime(dateStr) {
+    let date = new Date(dateStr);
+    
+    if(isNaN(date)){
+        return '00:00'
+    }
+    const hours = date.getHours()
+    const minutes = date.getMinutes()
+
+    return `${hours}:${minutes} ${hours >= 12  ? 'PM' : 'AM'}`
+  }
+  
+    export default getCustomTime