MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

Improve contacts

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-08-30 12:46:32 -04:00
parent 292c8409d6
commit 858dd39936
2 changed files with 188 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/contacts/Contacts.js
+186 -162
View File
@@ -1,13 +1,13 @@
"use client" "use client"
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import { useMutation, useQuery } from "@tanstack/react-query"; import {useMutation, useQuery} from "@tanstack/react-query";
import { contactData } from "../../services/services"; import {contactData} from "../../services/services";
import queryKeys from "../../services/queryKeys"; import queryKeys from "../../services/queryKeys";
import getCustomTime from "../../utils/getCustomTime"; import getCustomTime from "../../utils/getCustomTime";
export default function Contacts(){ export default function Contacts() {
// const {data:contacts, isFetching, isError, error} = useQuery({ // const {data:contacts, isFetching, isError, error} = useQuery({
// queryKey: queryKeys.contacts, // queryKey: queryKeys.contacts,
@@ -21,7 +21,7 @@ export default function Contacts(){
const [filteredContactData, setFiltererdContactData] = useState([]) const [filteredContactData, setFiltererdContactData] = useState([])
const getContactData = useMutation({ const getContactData = useMutation({
mutationFn: (reqData) => { mutationFn: (reqData) => {
return contactData(reqData) return contactData(reqData)
@@ -30,7 +30,7 @@ export default function Contacts(){
console.log(error) console.log(error)
}, },
onSuccess: (res) => { onSuccess: (res) => {
if(res?.data?.resultCode != '0'){ if (res?.data?.resultCode != '0') {
throw({message: 'Something went wrong'}) throw({message: 'Something went wrong'})
} }
setFiltererdContactData(res?.data?.contacts) setFiltererdContactData(res?.data?.contacts)
@@ -46,30 +46,30 @@ export default function Contacts(){
const changeActiveCategoryUID = (id) => { const changeActiveCategoryUID = (id) => {
let filteredConData = [] let filteredConData = []
setActiveCategoryUID(id) setActiveCategoryUID(id)
if(id == '0'){ if (id == '0') {
filteredConData = contactsData filteredConData = contactsData
}else{ } else {
filteredConData = contactsData.filter(item => item.category == id) filteredConData = contactsData.filter(item => item.category == id)
} }
setFiltererdContactData(filteredConData) setFiltererdContactData(filteredConData)
changeActiveUID(filteredConData[0]?.uid) changeActiveUID(filteredConData[0]?.uid)
} }
useEffect(()=>{ useEffect(() => {
let reqData = { let reqData = {
token: localStorage.getItem('token'), // USER TOKEN token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid') // USER UID uid: localStorage.getItem('uid') // USER UID
} }
getContactData.mutate(reqData) getContactData.mutate(reqData)
},[]) }, [])
const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS const contactsData = getContactData?.data?.data?.contacts // LIST OF CONTACTS
const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY const contactsCategory = getContactData?.data?.data?.category // LIST OF CATEGORY
return( return (
<> <>
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} /> <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']}/>
{getContactData?.isPending ? {getContactData?.isPending ?
<> <>
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
@@ -78,61 +78,69 @@ export default function Contacts(){
</div> </div>
</> </>
: getContactData?.error ? : getContactData?.error ?
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<p className='text-danger'>{getContactData?.error?.message}</p> <p className='text-danger'>{getContactData?.error?.message}</p>
</div>
</div> </div>
</div> :
: <div className="row">
<div className="row"> {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/} <div className="col-12">
<div className="col-12"> <div className="card card-statistics mail-contant">
<div className="card card-statistics mail-contant"> <div className="card-body p-0">
<div className="card-body p-0"> <div className="row no-gutters">
<div className="row no-gutters"> <div className="col-md-4 col-xxl-2 col-md-4">
<div className="col-md-4 col-xxl-2 col-md-4"> <div className="mail-sidebar">
<div className="mail-sidebar"> <div className="row justify-content-center">
<div className="row justify-content-center"> <div className="d-none col-12">
<div className="d-none col-12"> <div className="text-center mail-sidebar-title px-4">
<div className="text-center mail-sidebar-title px-4"> <a href="#"
<a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a> 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> <div className="col-12">
<div className="col-12"> <div className="px-4 py-4">
<div className="px-4 py-4"> <ul className="pl-0">
<ul className="pl-0"> <li className="py-2">
<li className="py-2"> <a href="#">
<a href="#"> <span
<span className="nav align-items-center"> className="nav align-items-center">
<span> <span>
<i className="fa fa-envelope-o text-primary pr-4"></i> <i className="fa fa-envelope-o text-primary pr-4"></i>
</span> </span>
<span> <span>
<span>Inbox</span> <span>Inbox</span>
</span> </span>
<span className="nav-item ml-auto text-right"> <span
<span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span> className="nav-item ml-auto text-right">
<span
className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
</span> </span>
</span> </span>
</a> </a>
</li> </li>
<li className="py-2"> {/*<li className="py-2">*/}
<a href="#"> {/* <a href="#">*/}
<span className="nav align-items-center"> {/* <span*/}
<span> {/* className="nav align-items-center">*/}
<i className="fa fa-paper-plane-o pr-4"></i> {/* <span>*/}
</span> {/* <i className="fa fa-paper-plane-o pr-4"></i>*/}
<span> {/* </span>*/}
<span>Replied Mail</span> {/* <span>*/}
</span> {/* <span>Replied Mail</span>*/}
</span> {/* </span>*/}
</a> {/* </span>*/}
</li> {/* </a>*/}
{/*</li>*/}
</ul> </ul>
<ul className="pl-0 mt-5"> <ul className="pl-0 mt-5">
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}> <li className="py-2"
onClick={() => changeActiveCategoryUID('0')}
style={{cursor: 'pointer'}}>
<div> <div>
<span className="nav align-items-center"> <span className="nav align-items-center">
<span> <span>
@@ -144,9 +152,11 @@ export default function Contacts(){
</span> </span>
</div> </div>
</li> </li>
{contactsCategory && contactsCategory.map(item => ( {contactsCategory && contactsCategory.map(item => (
<li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`${item?.cid}`)} style={{cursor: 'pointer'}}> <li key={item?.cid} className="py-2"
<div> onClick={() => changeActiveCategoryUID(`${item?.cid}`)}
style={{cursor: 'pointer'}}>
<div>
<span className="nav align-items-center"> <span className="nav align-items-center">
<span> <span>
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == `${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i> <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>{item?.description}</span>
</span> </span>
</span> </span>
</div> </div>
</li> </li>
))} ))}
{/* <li className="py-2"> {/* <li className="py-2">
<a href="#"> <a href="#">
<span className="nav align-items-center"> <span className="nav align-items-center">
<span> <span>
@@ -182,127 +192,141 @@ export default function Contacts(){
</span> </span>
</a> </a>
</li> */} </li> */}
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="col-md-8 col-xxl-4 border-md-t">
<div className="col-md-8 col-xxl-4 border-md-t"> <div className="mail-content border-right border-n h-100">
<div className="mail-content border-right border-n h-100"> <div className="mail-search border-bottom">
<div className="mail-search border-bottom"> <div className="row align-items-center mx-0">
<div className="row align-items-center mx-0"> <div className="col-12">
<div className="col-12"> {/*<div className="form-group pt-3">*/}
{/*<div className="form-group pt-3">*/} {/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/} {/* <i className="fa fa-search"></i>*/}
{/* <i className="fa fa-search"></i>*/} {/*</div>*/}
{/*</div>*/} </div>
</div> </div>
</div> </div>
</div> <div className="mail-msg scrollbar scroll_dark">
<div className="mail-msg scrollbar scroll_dark"> {contactsData && filteredContactData?.map((contact, index) => {
{contactsData && filteredContactData?.map((contact, index)=> { const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0)
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0) return (
return ( <div key={contact?.uid}
<div key={contact?.uid} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}> onClick={() => changeActiveUID(contact?.uid)}
<a href="#"> className={`mail-msg-item ${isActive && 'bg-light'}`}>
<div className="media align-items-center"> <a href="#">
<div className="mr-3"> <div className="media align-items-center">
<div className="bg-img"> <div className="mr-3">
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" /> <div className="bg-img">
<img src={getImage("avtar/01.jpg")}
className="img-fluid" alt="user"/>
</div>
</div> </div>
</div> <div className="w-100">
<div className="w-100"> <div
<div className="mail-msg-item-titel justify-content-between"> className="mail-msg-item-titel justify-content-between">
<p>{contact?.sender}</p> <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">06:59 <span> PM </span></p> */}
<p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p> <p className="d-none d-xl-block">
</div> <span style={{fontSize: '14px'}}>{new Date(contact?.added).toDateString()}</span>
<h5 className="mb-0 my-2">{contact?.title}</h5> </p>
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p> </div>
<p className="d-xl-none"> <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> <span>
{new Date(contact?.added).toDateString()} {new Date(contact?.added).toDateString()}
{/* {getCustomTime(contact.added)} */} {/* {getCustomTime(contact.added)} */}
</span> </span>
</p> </p>
</div>
</div> </div>
</div> </a>
</a> </div>
</div> )
) })}
})} </div>
</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="mail-chat py-5 px-5">
<div className="media align-items-center"> <div className="media align-items-center">
<div className="bg-img mr-3"> <div className="bg-img mr-3">
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" /> <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>
<div> <div>
<h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4> <p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p>
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p> {/* <p className="my-4">hey adminjon...</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 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 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 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> */} <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">*/} {/*<div className="my-5">*/}
{/* <p>Have lovely Day,</p>*/} {/* <p>Have lovely Day,</p>*/}
{/* <p>adminjon</p>*/} {/* <p>adminjon</p>*/}
{/*</div>*/} {/*</div>*/}
</div>
</div> </div>
</div>
<div className="bg-light mail-f px-4 py-3"> {/*<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"> {/* <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> {/* <p>Click here to <a href="#editer" data-toggle="collapse"*/}
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a> {/* className="text-primary px-1">Reply</a>or<a*/}
</div> {/* href="#forward" data-toggle="collapse"*/}
<div className="collapse" id="editer"> {/* className="text-primary px-1">Forward</a></p>*/}
<div className="form-group"> {/* <a href="#" className="text-primary"><i*/}
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea> {/* className="fa fa-microphone"></i></a>*/}
</div> {/* </div>*/}
</div> {/* <div className="collapse" id="editer">*/}
<div className="collapse" id="forward"> {/* <div className="form-group">*/}
<div className="form-group"> {/* <textarea className="form-control mt-3"*/}
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" /> {/* id="exampleFormControlTextarea1" rows="3"*/}
</div> {/* placeholder="Type here..."></textarea>*/}
</div> {/* </div>*/}
<div className="d-flex align-items-center justify-content-between py-2"> {/* </div>*/}
<div> {/* <div className="collapse" id="forward">*/}
{/*<ul className="nav">*/} {/* <div className="form-group">*/}
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/} {/* <input className="form-control mt-3" id="exampleFormControl"*/}
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/} {/* placeholder="Email Address"/>*/}
{/* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/} {/* </div>*/}
{/*</ul>*/} {/* </div>*/}
</div> {/* <div className="d-flex align-items-center justify-content-between py-2">*/}
<div> {/* <div>*/}
{/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/} {/* /!*<ul className="nav">*!/*/}
</div> {/* /!* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*!/*/}
</div> {/* /!* <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> </div>
</div> </div>
</div> </div>
</div>
} }
</> </>
) )
src/component/layout/layoutcom/UserMenu.jsx
+2 -2
View File
@@ -30,8 +30,8 @@ export default function UserMenu() {
<ul id="collapseOne" className="collapse show" aria-labelledby="headingOne" data-bs-parent="#sidebarNav"> <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.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.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.contacts ? 'active' : ''}`}><Link to={siteLinks.contacts}>Sites Contacts</Link></li>
<li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Comments</Link></li> <li className={`${pathname == siteLinks.comments ? 'active' : ''}`}><Link to={siteLinks.comments}>Sites Comments</Link></li>
</ul> </ul>
</li> </li>
<li className={`${pathname == siteLinks.reports ? 'active' : ''}`}> <li className={`${pathname == siteLinks.reports ? 'active' : ''}`}>