Improve contacts
This commit is contained in:
CHIEFSOFT\ameye
+186
-162
@@ -1,13 +1,13 @@
|
||||
"use client"
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { contactData } from "../../services/services";
|
||||
import {useMutation, useQuery} from "@tanstack/react-query";
|
||||
import {contactData} from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import getCustomTime from "../../utils/getCustomTime";
|
||||
|
||||
export default function Contacts(){
|
||||
export default function Contacts() {
|
||||
|
||||
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.contacts,
|
||||
@@ -21,7 +21,7 @@ export default function Contacts(){
|
||||
|
||||
const [filteredContactData, setFiltererdContactData] = useState([])
|
||||
|
||||
|
||||
|
||||
const getContactData = useMutation({
|
||||
mutationFn: (reqData) => {
|
||||
return contactData(reqData)
|
||||
@@ -30,7 +30,7 @@ export default function Contacts(){
|
||||
console.log(error)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
if (res?.data?.resultCode != '0') {
|
||||
throw({message: 'Something went wrong'})
|
||||
}
|
||||
setFiltererdContactData(res?.data?.contacts)
|
||||
@@ -46,30 +46,30 @@ export default function Contacts(){
|
||||
const changeActiveCategoryUID = (id) => {
|
||||
let filteredConData = []
|
||||
setActiveCategoryUID(id)
|
||||
if(id == '0'){
|
||||
if (id == '0') {
|
||||
filteredConData = contactsData
|
||||
}else{
|
||||
} else {
|
||||
filteredConData = contactsData.filter(item => item.category == id)
|
||||
}
|
||||
setFiltererdContactData(filteredConData)
|
||||
changeActiveUID(filteredConData[0]?.uid)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
getContactData.mutate(reqData)
|
||||
},[])
|
||||
useEffect(() => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
getContactData.mutate(reqData)
|
||||
}, [])
|
||||
|
||||
const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS
|
||||
const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY
|
||||
|
||||
return(
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
|
||||
{getContactData?.isPending ?
|
||||
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']}/>
|
||||
{getContactData?.isPending ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
@@ -78,61 +78,69 @@ export default function Contacts(){
|
||||
</div>
|
||||
</>
|
||||
: getContactData?.error ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{getContactData?.error?.message}</p>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{getContactData?.error?.message}</p>
|
||||
</div>
|
||||
</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 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="#">
|
||||
<span className="nav align-items-center">
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span
|
||||
className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
||||
<span
|
||||
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>
|
||||
</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>
|
||||
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2"
|
||||
onClick={() => changeActiveCategoryUID('0')}
|
||||
style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
@@ -144,9 +152,11 @@ export default function Contacts(){
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{contactsCategory && contactsCategory.map(item => (
|
||||
<li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`${item?.cid}`)} style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
{contactsCategory && contactsCategory.map(item => (
|
||||
<li key={item?.cid} className="py-2"
|
||||
onClick={() => changeActiveCategoryUID(`${item?.cid}`)}
|
||||
style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == `${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i>
|
||||
@@ -155,10 +165,10 @@ export default function Contacts(){
|
||||
<span>{item?.description}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="py-2">
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
@@ -182,127 +192,141 @@ export default function Contacts(){
|
||||
</span>
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</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">*/}
|
||||
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
|
||||
{/* <i className="fa fa-search"></i>*/}
|
||||
{/*</div>*/}
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
{/*<div className="form-group pt-3">*/}
|
||||
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
|
||||
{/* <i className="fa fa-search"></i>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{contactsData && filteredContactData?.map((contact, index)=> {
|
||||
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
|
||||
return (
|
||||
<div key={contact?.uid} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||
<a href="#">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{contactsData && filteredContactData?.map((contact, index) => {
|
||||
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
|
||||
return (
|
||||
<div key={contact?.uid}
|
||||
onClick={() => changeActiveUID(contact?.uid)}
|
||||
className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||
<a href="#">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/01.jpg")}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>{contact?.sender}</p>
|
||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||
<p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">{contact?.title}</h5>
|
||||
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p>
|
||||
<p className="d-xl-none">
|
||||
<div className="w-100">
|
||||
<div
|
||||
className="mail-msg-item-titel justify-content-between">
|
||||
<p><span style={{fontSize: '14px' , color: '#148399', fontWeight:'bolder'}}>{contact?.sender}</span></p>
|
||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||
<p className="d-none d-xl-block">
|
||||
<span style={{fontSize: '14px'}}>{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)} */}
|
||||
{/* {getCustomTime(contact.added)} */}
|
||||
</span>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</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 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" style={{color: '#148399'}}>{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
||||
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>{activeContactUID ? activeDetail[0]?.title : filteredContactData[0]?.title}</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4>
|
||||
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>{activeContactUID ? activeDetail[0]?.title : filteredContactData[0]?.title}</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p>
|
||||
{/* <p className="my-4">hey adminjon...</p>
|
||||
<p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p>
|
||||
{/* <p className="my-4">hey adminjon...</p>
|
||||
<p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
|
||||
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
|
||||
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
|
||||
{/*<div className="my-5">*/}
|
||||
{/* <p>Have lovely Day,</p>*/}
|
||||
{/* <p>adminjon</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="my-5">*/}
|
||||
{/* <p>Have lovely Day,</p>*/}
|
||||
{/* <p>adminjon</p>*/}
|
||||
{/*</div>*/}
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -30,8 +30,8 @@ export default function UserMenu() {
|
||||
<ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav">
|
||||
<li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
|
||||
<li className={`${pathname == siteLinks.calendar ? 'active' : ''}`}><Link to={siteLinks.calendar}>Calendar</Link></li>
|
||||
<li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Contacts</Link></li>
|
||||
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li>
|
||||
<li className={`${pathname == siteLinks.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
|
||||
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Sites Comments</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>
|
||||
|
||||
Reference in New Issue
Block a user