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

formatted date string and image bug

Browse Source
This commit was merged in pull request #76.
This commit is contained in:
victorAnumudu
2025-08-30 22:30:45 +01:00
parent 519b6e5585
commit 17239f9ea8
7 changed files with 905 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/comments/Comments.js
+244 -58
View File
@@ -3,10 +3,9 @@ import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
export default function Comments() { export default function Comments() {
return ( return (
<> <>
<BreadcrumbComBS title='Comments' paths={['Dashboard', 'Comments']} /> <BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
<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">
@@ -18,7 +17,12 @@ export default function Comments(){
<div className="row justify-content-center"> <div className="row justify-content-center">
<div className="col-12"> <div className="col-12">
<div className="text-center mail-sidebar-title px-4"> <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"><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> </div>
<div className="col-12"> <div className="col-12">
@@ -34,7 +38,9 @@ export default function Comments(){
<span>Inbox</span> <span>Inbox</span>
</span> </span>
<span className="nav-item ml-auto text-right"> <span className="nav-item ml-auto text-right">
<span className="badge badge-pill badge-primary float-right">0+</span> <span className="badge badge-pill badge-primary float-right">
0+
</span>
</span> </span>
</span> </span>
</a> </a>
@@ -51,7 +57,6 @@ export default function Comments(){
</span> </span>
</a> </a>
</li> </li>
</ul> </ul>
<ul className="pl-0 mt-5"> <ul className="pl-0 mt-5">
<li className="py-2"> <li className="py-2">
@@ -102,7 +107,12 @@ export default function Comments(){
<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>
@@ -114,17 +124,29 @@ export default function Comments(){
<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 className="mail-msg-item-titel justify-content-between">
<p>Martin smith</p> <p>Martin smith</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>
</div> </div>
<h5 className="mb-0 my-2">Saas Designer</h5> <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>
<p className="d-xl-none">06:59 <span> PM </span></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>
</div> </div>
</a> </a>
@@ -134,17 +156,30 @@ export default function Comments(){
<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/02.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/02.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 className="mail-msg-item-titel justify-content-between">
<p>DutcaPatrick</p> <p>DutcaPatrick</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>
</div> </div>
<h5 className="mb-0 my-2">Mobile app Designer </h5> <h5 className="mb-0 my-2">
<p>Very nice template, lots of pages and good documentation.</p> Mobile app Designer{" "}
<p className="d-xl-none">06:59 <span> PM </span></p> </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>
</div> </div>
</a> </a>
@@ -154,17 +189,30 @@ export default function Comments(){
<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/03.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/03.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 className="mail-msg-item-titel justify-content-between">
<p>m_morsch</p> <p>m_morsch</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>
</div> </div>
<h5 className="mb-0 my-2">Landing page Designer</h5> <h5 className="mb-0 my-2">
<p>Excellent and at a great price... thank you very much!</p> Landing page Designer
<p className="d-xl-none">06:59 <span> PM </span></p> </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>
</div> </div>
</a> </a>
@@ -174,17 +222,28 @@ export default function Comments(){
<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/04.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/04.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 className="mail-msg-item-titel justify-content-between">
<p>AnnaHorno</p> <p>AnnaHorno</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>
</div> </div>
<h5 className="mb-0 my-2">Re-Design ios app</h5> <h5 className="mb-0 my-2">Re-Design ios app</h5>
<p>Solved my theme problem in 10 minutes. We thank you.</p> <p>
<p className="d-xl-none">06:59 <span> PM </span></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>
</div> </div>
</a> </a>
@@ -194,17 +253,30 @@ export default function Comments(){
<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/05.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/05.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 className="mail-msg-item-titel justify-content-between">
<p>Wdcorbitt</p> <p>Wdcorbitt</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>
</div> </div>
<h5 className="mb-0 my-2">Mobil UX/UI Designer</h5> <h5 className="mb-0 my-2">
<p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p> Mobil UX/UI Designer
<p className="d-xl-none">06:59 <span> PM </span></p> </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>
</div> </div>
</a> </a>
@@ -214,17 +286,28 @@ export default function Comments(){
<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/06.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/06.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 className="mail-msg-item-titel justify-content-between">
<p>Anne Smith</p> <p>Anne Smith</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>
</div> </div>
<h5 className="mb-0 my-2">Jobly Opportunity</h5> <h5 className="mb-0 my-2">Jobly Opportunity</h5>
<p>Mentor has so many features and layouts. Its a great choice.</p> <p>
<p className="d-xl-none">06:59 <span> PM </span></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>
</div> </div>
</a> </a>
@@ -234,17 +317,29 @@ export default function Comments(){
<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/07.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/07.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 className="mail-msg-item-titel justify-content-between">
<p>Paul Flavius</p> <p>Paul Flavius</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>
</div> </div>
<h5 className="mb-0 my-2">Saas Designer</h5> <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>
<p className="d-xl-none">06:59 <span> PM </span></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>
</div> </div>
</a> </a>
@@ -254,17 +349,29 @@ export default function Comments(){
<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/08.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/08.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 className="mail-msg-item-titel justify-content-between">
<p>Sara Lisbon</p> <p>Sara Lisbon</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>
</div> </div>
<h5 className="mb-0 my-2">UI Designer</h5> <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>
<p className="d-xl-none">06:59 <span> PM </span></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>
</div> </div>
</a> </a>
@@ -274,17 +381,28 @@ export default function Comments(){
<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/09.jpg")} className="img-fluid" alt="user" /> <img
src={getImage("avtar/09.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 className="mail-msg-item-titel justify-content-between">
<p>Annahorno</p> <p>Annahorno</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>
</div> </div>
<h5 className="mb-0 my-2">Saas Designer</h5> <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>
<p className="d-xl-none">06:59 <span> PM </span></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>
</div> </div>
</a> </a>
@@ -296,7 +414,11 @@ export default function Comments(){
<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">Dutca Patrick</h4> <h4 className="mb-0">Dutca Patrick</h4>
@@ -314,9 +436,27 @@ export default function Comments(){
</div> </div>
<div> <div>
<p className="my-4">hey adminjon...</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">
<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> I truly believe Augustine’s words are true and if you
<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> 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"> <div className="my-5">
<p>Have lovely Day,</p> <p>Have lovely Day,</p>
<p>adminjon</p> <p>adminjon</p>
@@ -335,29 +475,75 @@ export default function Comments(){
{/*</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>
<a href="javascript:void(0)" className="text-primary"><i className="fa fa-microphone"></i></a> 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="javascript:void(0)" className="text-primary">
<i className="fa fa-microphone"></i>
</a>
</div> </div>
<div className="collapse" id="editer"> <div className="collapse" id="editer">
<div className="form-group"> <div className="form-group">
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea> <textarea
className="form-control mt-3"
id="exampleFormControlTextarea1"
rows="3"
placeholder="Type here..."
></textarea>
</div> </div>
</div> </div>
<div className="collapse" id="forward"> <div className="collapse" id="forward">
<div className="form-group"> <div className="form-group">
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" /> <input
className="form-control mt-3"
id="exampleFormControl"
placeholder="Email Address"
/>
</div> </div>
</div> </div>
<div className="d-flex align-items-center justify-content-between py-2"> <div className="d-flex align-items-center justify-content-between py-2">
<div> <div>
<ul className="nav"> <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">
<li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li> <a href="javascript:void(0)">
<li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li> <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> </ul>
</div> </div>
<div> <div>
<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a> <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>
@@ -368,5 +554,5 @@ export default function Comments(){
</div> </div>
</div> </div>
</> </>
) );
} }
src/component/contacts/Contacts.js
+163 -160
View File
@@ -1,4 +1,4 @@
"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";
@@ -8,87 +8,87 @@ 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,
// queryFn: () => contactData() // queryFn: () => contactData()
// }) // })
const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
const [activeContactUID, setActiveContactUID] = useState('') const [activeContactUID, setActiveContactUID] = useState("");
const [activeDetail, setActiveDetail] = useState([]) const [activeDetail, setActiveDetail] = useState([]);
const [filteredContactData, setFiltererdContactData] = useState([])
const [filteredContactData, setFiltererdContactData] = useState([]);
const getContactData = useMutation({ const getContactData = useMutation({
mutationFn: (reqData) => { mutationFn: (reqData) => {
return contactData(reqData) return contactData(reqData);
}, },
onError: (error) => { onError: (error) => {
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);
} },
}) });
const changeActiveUID = (uid) => { const changeActiveUID = (uid) => {
setActiveContactUID(uid) setActiveContactUID(uid);
let detail = contactsData.filter(item => item.uid == uid) let detail = contactsData.filter((item) => item.uid == uid);
setActiveDetail(detail) setActiveDetail(detail);
} };
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 == `A00000${id}`);
}
setFiltererdContactData(filteredConData)
changeActiveUID(filteredConData[0]?.uid)
} }
setFiltererdContactData(filteredConData);
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">
<p className='text-mute'>Loading...</p> <p className="text-mute">Loading...</p>
</div> </div>
</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
style={{minHeight: '550px', borderRadius: '10px'}}> className="card card-statistics mail-contant"
style={{ minHeight: "550px", borderRadius: "10px" }}
>
<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">
@@ -96,9 +96,12 @@ 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="#" <a
className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i href="#"
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">
@@ -106,18 +109,17 @@ 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 <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 <span className="nav-item ml-auto text-right">
className="nav-item ml-auto text-right"> <span className="badge badge-pill badge-primary float-right">
<span {contactsData?.length}
className="badge badge-pill badge-primary float-right">{contactsData?.length}</span> </span>
</span> </span>
</span> </span>
</a> </a>
@@ -135,17 +137,24 @@ export default function Contacts() {
{/* </span>*/} {/* </span>*/}
{/* </a>*/} {/* </a>*/}
{/*</li>*/} {/*</li>*/}
</ul> </ul>
<ul className="pl-0 mt-5"> <ul className="pl-0 mt-5">
<li className="py-2" <li
onClick={() => changeActiveCategoryUID('0')} className="py-2"
style={{cursor: 'pointer'}}> onClick={() => changeActiveCategoryUID("0")}
style={{ cursor: "pointer" }}
>
<div> <div>
<span className="nav align-items-center"> <span className="nav align-items-center">
<span> <span>
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i> <i
className={`fa fa-circle-o pr-4 ${
activeCategoryUID == "0"
? "text-primary"
: "text-warning"
}`}
></i>
</span> </span>
<span> <span>
<span>All</span> <span>All</span>
@@ -153,14 +162,27 @@ export default function Contacts() {
</span> </span>
</div> </div>
</li> </li>
{contactsCategory && contactsCategory.map(item => ( {contactsCategory &&
<li key={item?.cid} className="py-2" contactsCategory.map((item) => (
onClick={() => changeActiveCategoryUID(`${item?.cid}`)} <li
style={{cursor: 'pointer'}}> 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>
<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>
</span> </span>
<span> <span>
<span>{item?.description}</span> <span>{item?.description}</span>
@@ -169,30 +191,6 @@ export default function Contacts() {
</div> </div>
</li> </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> </ul>
</div> </div>
</div> </div>
@@ -212,40 +210,70 @@ 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 &&
const isActive = (contact?.uid == activeContactUID) || (!activeContactUID && index == 0) filteredContactData?.map((contact, index) => {
const avtarImage = (contact?.category === undefined) ? "avtar/01.jpg" : "avtar/" + contact.category + ".png"; const isActive =
contact?.uid == activeContactUID ||
(!activeContactUID && index == 0);
const avtarImage =
contact?.category === undefined
? "avtar/01.jpg"
: "avtar/" + contact.category + ".png";
return ( return (
<div key={contact?.uid} <div
key={contact?.uid}
onClick={() => changeActiveUID(contact?.uid)} onClick={() => changeActiveUID(contact?.uid)}
className={`mail-msg-item ${isActive && 'bg-light'}`}> 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(avtarImage)} <img
className="img-fluid" alt="user"/> src={getImage(avtarImage)}
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>
<p><span style={{ <span
fontSize: '14px', style={{
color: '#148399', fontSize: "14px",
fontWeight: 'bolder' color: "#148399",
}}>{contact?.sender}</span></p> 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"> <p className="d-none d-xl-block">
<span <span style={{ fontSize: "14px" }}>
style={{fontSize: '14px'}}>{new Date(contact?.added).toDateString()}</span> {new Date(
contact?.added
).toDateString()}
</span>
</p> </p>
</div> </div>
<h5 className="mb-0 my-2">{contact?.title}</h5> <h5 className="mb-0 my-2">
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0, 101) + ' ...'}</p> {contact?.title}
</h5>
<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()}
{/* {getCustomTime(contact.added)} */} {/* {getCustomTime(contact.added)} */}
</span> </span>
</p> </p>
@@ -253,28 +281,43 @@ export default function Contacts() {
</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" <img
alt="user"/> src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : contactsData ? getImage("avtar/" + contactsData[0]?.category + ".png") : getImage("avtar/01.jpg")}
className="img-fluid"
alt="user"
/>
</div> </div>
<div> <div>
<h4 className="mb-0" <h4 className="mb-0" style={{ color: "#148399" }}>
style={{color: '#148399'}}>{activeContactUID ? activeDetail[0]?.sender : filteredContactData[0]?.sender}</h4> {activeContactUID
<p>{activeContactUID ? new Date(activeDetail[0]?.added).toDateString() : new Date(filteredContactData[0]?.added).toDateString()}</p> ? 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> </div>
<div className="mt-4 d-flex justify-content-between"> <div className="mt-4 d-flex justify-content-between">
<div> <div>
<h3>{activeContactUID ? activeDetail[0]?.title : filteredContactData[0]?.title}</h3> <h3>
{activeContactUID
? activeDetail[0]?.title
: filteredContactData[0]?.title}
</h3>
</div> </div>
<div className="d-flex"> <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-reply font-22 pr-3"></i></a>*/}
@@ -282,60 +325,20 @@ export default function Contacts() {
</div> </div>
</div> </div>
<div> <div>
<p>{activeContactUID ? activeDetail[0]?.message : filteredContactData[0]?.message}</p> <p>
{/* <p className="my-4">hey adminjon...</p> {activeContactUID
<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> ? activeDetail[0]?.message
<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> : filteredContactData[0]?.message}
<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>
{/*<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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
} </div>
</div>
)}
</> </>
) );
} }
src/component/home/TopBar.jsx
+7 -1
View File
@@ -57,6 +57,12 @@ export default function TopBar() {
<> <>
{data && data?.map((item, index)=>{ {data && data?.map((item, index)=>{
let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success' let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
let dataSpan = ''
if(item?.extra_style){
const data = item.data_span.split(' ')
dataSpan = `${data[0]} ${data[1]}`
}
return ( return (
<div key={item.id + index} className="col-sm-6 col-xxl-3"> <div key={item.id + index} className="col-sm-6 col-xxl-3">
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}> <div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
@@ -66,7 +72,7 @@ export default function TopBar() {
<div className="row p-3"> <div className="row p-3">
<div className="col"> <div className="col">
<h3 className="mb-0">{item?.value || 0}</h3> <h3 className="mb-0">{item?.value || 0}</h3>
<small className="d-block">{item?.data_span}</small> <small className="d-block">{item?.extra_style ? dataSpan : item?.data_span}</small>
</div> </div>
<div className="col text-right"> <div className="col text-right">
<h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5> <h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5>
src/component/layout/layoutcom/UserMenu.jsx
+2 -2
View File
@@ -16,7 +16,7 @@ export default function UserMenu() {
return ( return (
<> <>
<div className="sidebar-nav scrollbar scroll_dark"> <div className="sidebar-nav scrollbar scroll_dark">
<ul className="metismenu " id="sidebarNav"> <ul className="metismenu h-100" id="sidebarNav">
<li className="nav-static-title">Panel</li> <li className="nav-static-title">Panel</li>
<li className={`${pathname == siteLinks.dash ? 'active' : ''}`}> <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
<Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
@@ -54,7 +54,7 @@ export default function UserMenu() {
</li> </li>
<li className="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded"> <li className="sidebar-banner p-4 bg-gradient text-center m-3 mt-auto d-block rounded">
<h5 className="text-white mb-1">MERMS Panel</h5> <h5 className="text-white mb-1">MERMS Panel</h5>
<Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to='' onClick={logout}> Log Out</Link> <Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to='' onClick={logout}> Log Out</Link>
</li> </li>
src/component/subscription/Subscription.jsx
+2 -2
View File
@@ -6,7 +6,7 @@ import {useQuery} from '@tanstack/react-query';
import queryKeys from '../../services/queryKeys'; import queryKeys from '../../services/queryKeys';
import siteLinks from "../../links/siteLinks"; import siteLinks from "../../links/siteLinks";
import {Link, useNavigate} from 'react-router-dom' import {Link, useNavigate} from 'react-router-dom'
import getDateFromDateString from '../../helpers/GetDateFromDateString'; import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
export default function Subscription() { export default function Subscription() {
const navigate = useNavigate() const navigate = useNavigate()
@@ -58,7 +58,7 @@ export default function Subscription() {
</div> </div>
<div className="pt-2" style={{textAlign: 'left'}}> <div className="pt-2" style={{textAlign: 'left'}}>
<div style={{fontSize: '12px', fontWeight: 'bolder' , color: "#3E3699" }}> <div style={{fontSize: '12px', fontWeight: 'bolder' , color: "#3E3699" }}>
Next Payment: {getDateFromDateString(currentSubscription?.next_payment)} Next Payment: {getDateTimeFromDateString(currentSubscription?.next_payment)}
</div> </div>
</div> </div>
</div> </div>
src/helpers/getDateFromDateString.js
+17
View File
@@ -0,0 +1,17 @@
function getDateFromDateString(dateString) {
const date = new Date(dateString);
// Ensure the date is valid
if (isNaN(date)) {
return "Invalid date string";
}
// Get the year, month, and day
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed, so we add 1
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
export default getDateFromDateString
src/helpers/GetDateFromDateString.js → src/helpers/getDateTimeFromDateString.js
+2 -2
View File
@@ -1,4 +1,4 @@
function getDateFromDateString(dateString) { function getDateTimeFromDateString(dateString) {
const date = new Date(dateString); const date = new Date(dateString);
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -30,4 +30,4 @@ function getDateFromDateString(dateString) {
return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`; return `${dayName}, ${monthName} ${day}${getOrdinal(day)} ${year} ${hours}:${minutes}${ampm}`;
} }
export default getDateFromDateString export default getDateTimeFromDateString