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
+90 -66
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,
@@ -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,29 +46,29 @@ 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">
@@ -95,7 +95,9 @@ export default function Contacts(){
<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="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a> <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>
<div className="col-12"> <div className="col-12">
@@ -103,36 +105,42 @@ export default function Contacts(){
<ul className="pl-0"> <ul className="pl-0">
<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>
<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> <span
</span> className="badge badge-pill badge-primary float-right">{contactsData?.length}</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>
</span> </span>
</a> </a>
</li> </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"> <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>
@@ -145,7 +153,9 @@ export default function Contacts(){
</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"
onClick={() => changeActiveCategoryUID(`${item?.cid}`)}
style={{cursor: 'pointer'}}>
<div> <div>
<span className="nav align-items-center"> <span className="nav align-items-center">
<span> <span>
@@ -201,25 +211,31 @@ export default function Contacts(){
</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} onClick={()=>changeActiveUID(contact?.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}> <div key={contact?.uid}
onClick={() => changeActiveUID(contact?.uid)}
className={`mail-msg-item ${isActive && 'bg-light'}`}>
<a href="#"> <a href="#">
<div className="media align-items-center"> <div className="media align-items-center">
<div className="mr-3"> <div className="mr-3">
<div className="bg-img"> <div className="bg-img">
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" /> <img src={getImage("avtar/01.jpg")}
className="img-fluid" alt="user"/>
</div> </div>
</div> </div>
<div className="w-100"> <div className="w-100">
<div className="mail-msg-item-titel justify-content-between"> <div
<p>{contact?.sender}</p> 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">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">
<span style={{fontSize: '14px'}}>{new Date(contact?.added).toDateString()}</span>
</p>
</div> </div>
<h5 className="mb-0 my-2">{contact?.title}</h5> <h5 className="mb-0 my-2">{contact?.title}</h5>
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p> <p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0, 101) + ' ...'}</p>
<p className="d-xl-none"> <p className="d-xl-none">
<span> <span>
{new Date(contact?.added).toDateString()} {new Date(contact?.added).toDateString()}
@@ -240,10 +256,11 @@ export default function Contacts(){
<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>
<div> <div>
<h4 className="mb-0">{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4> <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> <p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p>
</div> </div>
</div> </div>
@@ -269,34 +286,41 @@ export default function Contacts(){
</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>*!/*/}
</div> {/* /!* <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>
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' : ''}`}>