Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
17239f9ea8 | ||
|
CHIEFSOFT\ameye
|
519b6e5585 | ||
|
CHIEFSOFT\ameye
|
56fb97eda1 | ||
|
CHIEFSOFT\ameye
|
1abc998120 | ||
|
CHIEFSOFT\ameye
|
858dd39936 | ||
|
CHIEFSOFT\ameye
|
292c8409d6 | ||
|
CHIEFSOFT\ameye
|
45c457e210 | ||
|
CHIEFSOFT\ameye
|
1e7014172d | ||
|
CHIEFSOFT\ameye
|
98bf50fcde | ||
|
CHIEFSOFT\ameye
|
4385d8bec0 | ||
|
CHIEFSOFT\ameye
|
d1c86ec9b2 | ||
|
CHIEFSOFT\ameye
|
dae4862db2 | ||
|
CHIEFSOFT\ameye
|
d80bb55205 | ||
|
CHIEFSOFT\ameye
|
3205d5627e | ||
|
CHIEFSOFT\ameye
|
bfea6b956b | ||
|
CHIEFSOFT\ameye
|
4ec74ff895 | ||
 ameye
|
84b4523154 | ||
|
victorAnumudu
|
c19cfdd524 | ||
|
ameye
|
2476c491be | ||
|
victorAnumudu
|
ece281ef8a | ||
|
ameye
|
8ae0de1004 |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
+550
-364
@@ -2,371 +2,557 @@ import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
export default function Comments(){
|
||||
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Comments' paths={['Dashboard', 'Comments']} />
|
||||
<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="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">0+</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Sent Mail</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Personal</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Work</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-plus pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Add Category</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
<div className="form-group pt-3">
|
||||
<input type="text" className="form-control" id="search" placeholder="Search.." />
|
||||
<i className="fa fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Martin smith</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/02.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>DutcaPatrick</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Mobile app Designer </h5>
|
||||
<p>Very nice template, lots of pages and good documentation.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>m_morsch</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Landing page Designer</h5>
|
||||
<p>Excellent and at a great price... thank you very much!</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/04.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>AnnaHorno</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Re-Design ios app</h5>
|
||||
<p>Solved my theme problem in 10 minutes. We thank you.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/05.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Wdcorbitt</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Mobil UX/UI Designer</h5>
|
||||
<p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/06.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Anne Smith</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
|
||||
<p>Mentor has so many features and layouts. Its a great choice.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/07.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Paul Flavius</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/08.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Sara Lisbon</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">UI Designer</h5>
|
||||
<p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img src={getImage("avtar/09.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Annahorno</p>
|
||||
<p className="d-none d-xl-block">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
|
||||
<p className="d-xl-none">06:59 <span> PM </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">Dutca Patrick</h4>
|
||||
<p>30 Min ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>Landing page Designer...</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="my-4">hey adminjon...</p>
|
||||
<p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
|
||||
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
|
||||
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
|
||||
<div className="my-5">
|
||||
<p>Have lovely Day,</p>
|
||||
<p>adminjon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="d-md-flex px-5 py-4">*/}
|
||||
{/* <div className="flex-fill align-items-center">*/}
|
||||
{/* <div className="d-flex">*/}
|
||||
{/* <i className="ti ti-clip pr-3 font-22"></i>*/}
|
||||
{/* <p className="pr-3 font-weight-bold">Wireframe</p>*/}
|
||||
{/* <p>(220.MB)</p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></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="javascript:void(0)" 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>
|
||||
export default function Comments() {
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
||||
<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="col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="btn btn-primary btn-block py-3 font-weight-bold font-18"
|
||||
>
|
||||
<i className="fa fa-plus pl-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="px-4 py-4">
|
||||
<ul className="pl-0">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Inbox</span>
|
||||
</span>
|
||||
<span className="nav-item ml-auto text-right">
|
||||
<span className="badge badge-pill badge-primary float-right">
|
||||
0+
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Sent Mail</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Personal</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Work</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="javascript:void(0)">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-plus pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Add Category</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
<div className="form-group pt-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="search"
|
||||
placeholder="Search.."
|
||||
/>
|
||||
<i className="fa fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/01.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Martin smith</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>
|
||||
Since there is not an "all the above" category,
|
||||
I'll take the opportunity to enthusiastically
|
||||
congratulate you on the very high quality.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/02.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>DutcaPatrick</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
Mobile app Designer{" "}
|
||||
</h5>
|
||||
<p>
|
||||
Very nice template, lots of pages and good
|
||||
documentation.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/03.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>m_morsch</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
Landing page Designer
|
||||
</h5>
|
||||
<p>
|
||||
Excellent and at a great price... thank you very
|
||||
much!
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/04.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>AnnaHorno</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Re-Design ios app</h5>
|
||||
<p>
|
||||
Solved my theme problem in 10 minutes. We thank
|
||||
you.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/05.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Wdcorbitt</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">
|
||||
Mobil UX/UI Designer
|
||||
</h5>
|
||||
<p>
|
||||
Asked for information and received it EXTREMELY
|
||||
quickly. Great layout - good code - great price!{" "}
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/06.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Anne Smith</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Jobly Opportunity</h5>
|
||||
<p>
|
||||
Mentor has so many features and layouts. Its a
|
||||
great choice.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/07.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Paul Flavius</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>
|
||||
There are many people in the world with amazing
|
||||
talents who realize only a small percentage of
|
||||
their potential.{" "}
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/08.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Sara Lisbon</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">UI Designer</h5>
|
||||
<p>
|
||||
We can look a bit further back in time to Albert
|
||||
Einstein or even further back to Abraham
|
||||
Lincoln.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mail-msg-item">
|
||||
<a href="javascript:void(0)">
|
||||
<div className="media align-items-center">
|
||||
<div className="mr-3">
|
||||
<div className="bg-img">
|
||||
<img
|
||||
src={getImage("avtar/09.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>Annahorno</p>
|
||||
<p className="d-none d-xl-block">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">Saas Designer</h5>
|
||||
<p>
|
||||
One of the most difficult aspects of achieving
|
||||
success is staying motivated over the long haul.
|
||||
</p>
|
||||
<p className="d-xl-none">
|
||||
06:59 <span> PM </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img
|
||||
src={getImage("avtar/03.jpg")}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">Dutca Patrick</h4>
|
||||
<p>30 Min ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 d-flex justify-content-between">
|
||||
<div>
|
||||
<h3>Landing page Designer...</h3>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
|
||||
{/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="my-4">hey adminjon...</p>
|
||||
<p className="mb-2">
|
||||
I truly believe Augustine’s words are true and if you
|
||||
look at history you know it is true. There are many
|
||||
people in the world with amazing talents who realize
|
||||
only a small percentage of their potential. We all know
|
||||
people who live this truth.
|
||||
</p>
|
||||
<p>
|
||||
We also know those epic stories, those modern-day
|
||||
legends surrounding the early failures of such supremely
|
||||
successful folks as Michael Jordan and Bill Gates. We
|
||||
can look a bit further back in time to Albert Einstein
|
||||
or even further back to Abraham Lincoln. What made each
|
||||
of these people so successful? Motivation.
|
||||
</p>
|
||||
<p>
|
||||
We know this in our gut, but what can we do about it?
|
||||
How can we motivate ourselves? One of the most difficult
|
||||
aspects of achieving success is staying motivated over
|
||||
the long haul.
|
||||
</p>
|
||||
<div className="my-5">
|
||||
<p>Have lovely Day,</p>
|
||||
<p>adminjon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div className="d-md-flex px-5 py-4">*/}
|
||||
{/* <div className="flex-fill align-items-center">*/}
|
||||
{/* <div className="d-flex">*/}
|
||||
{/* <i className="ti ti-clip pr-3 font-22"></i>*/}
|
||||
{/* <p className="pr-3 font-weight-bold">Wireframe</p>*/}
|
||||
{/* <p>(220.MB)</p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="flex-fill text-left text-md-right"><a href="javascript:void(0)" className="text-primary"><i className="ti ti-download pr-2"></i><span>Download</span></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="javascript:void(0)" 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+322
-287
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
@@ -7,303 +7,338 @@ 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,
|
||||
// queryFn: () => contactData()
|
||||
// })
|
||||
|
||||
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.contacts,
|
||||
// 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 [activeDetail, setActiveDetail] = useState([]);
|
||||
|
||||
const [activeContactUID, setActiveContactUID] = useState('')
|
||||
const [activeDetail, setActiveDetail] = useState([])
|
||||
const [filteredContactData, setFiltererdContactData] = useState([]);
|
||||
|
||||
const [filteredContactData, setFiltererdContactData] = useState([])
|
||||
const getContactData = useMutation({
|
||||
mutationFn: (reqData) => {
|
||||
return contactData(reqData);
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error);
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if (res?.data?.resultCode != "0") {
|
||||
throw { message: "Something went wrong" };
|
||||
}
|
||||
setFiltererdContactData(res?.data?.contacts);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
const getContactData = useMutation({
|
||||
mutationFn: (reqData) => {
|
||||
return contactData(reqData)
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
throw({message: 'Something went wrong'})
|
||||
}
|
||||
setFiltererdContactData(res?.data?.contacts)
|
||||
}
|
||||
})
|
||||
const changeActiveUID = (uid) => {
|
||||
setActiveContactUID(uid);
|
||||
let detail = contactsData.filter((item) => item.uid == uid);
|
||||
setActiveDetail(detail);
|
||||
};
|
||||
|
||||
const changeActiveUID = (uid) => {
|
||||
setActiveContactUID(uid)
|
||||
let detail = contactsData.filter(item => item.uid == uid)
|
||||
setActiveDetail(detail)
|
||||
const changeActiveCategoryUID = (id) => {
|
||||
let filteredConData = [];
|
||||
setActiveCategoryUID(id);
|
||||
if (id == "0") {
|
||||
filteredConData = contactsData;
|
||||
} else {
|
||||
filteredConData = contactsData.filter((item) => item.category == `A00000${id}`);
|
||||
}
|
||||
setFiltererdContactData(filteredConData);
|
||||
changeActiveUID(filteredConData[0]?.uid);
|
||||
};
|
||||
|
||||
const changeActiveCategoryUID = (id) => {
|
||||
let filteredConData = []
|
||||
setActiveCategoryUID(id)
|
||||
if(id == '0'){
|
||||
filteredConData = contactsData
|
||||
}else{
|
||||
filteredConData = contactsData.filter(item => item.category == id)
|
||||
}
|
||||
setFiltererdContactData(filteredConData)
|
||||
changeActiveUID(filteredConData[0]?.uid)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
getContactData.mutate(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
|
||||
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">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: getContactData?.error ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{getContactData?.error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row">
|
||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics mail-contant">
|
||||
<div className="card-body p-0">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||
<div className="mail-sidebar">
|
||||
<div className="row justify-content-center">
|
||||
<div className="d-none col-12">
|
||||
<div className="text-center mail-sidebar-title px-4">
|
||||
<a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div 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>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Replied Mail</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<ul className="pl-0 mt-5">
|
||||
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>All</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{contactsCategory && contactsCategory.map(item => (
|
||||
<li key={item?.cid} className="py-2" onClick={()=>changeActiveCategoryUID(`A00000${item?.cid}`)} style={{cursor: 'pointer'}}>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == `A00000${item?.cid}` ? 'text-primary' : 'text-warning'}`}></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>{item?.description}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Work</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="py-2">
|
||||
<a href="#">
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i className="fa fa-plus pr-4"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>Add Category</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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 className="w-100">
|
||||
<div className="mail-msg-item-titel justify-content-between">
|
||||
<p>{contact?.sender}</p>
|
||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||
<p className="d-none d-xl-block"><span>{new Date(contact?.added).toDateString()}</span></p>
|
||||
</div>
|
||||
<h5 className="mb-0 my-2">{contact?.title}</h5>
|
||||
<p>{contact?.message?.length < 100 ? contact?.message : contact?.message.substring(0,101) + ' ...' }</p>
|
||||
<p className="d-xl-none">
|
||||
<span>
|
||||
{new Date(contact?.added).toDateString()}
|
||||
{/* {getCustomTime(contact.added)} */}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 border-t border-xxl-t">
|
||||
|
||||
<div className="mail-chat py-5 px-5">
|
||||
<div className="media align-items-center">
|
||||
<div className="bg-img mr-3">
|
||||
<img src={getImage("avtar/03.jpg")} className="img-fluid" alt="user" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-0">{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 className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
|
||||
<p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
|
||||
<p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
|
||||
{/*<div className="my-5">*/}
|
||||
{/* <p>Have lovely Day,</p>*/}
|
||||
{/* <p>adminjon</p>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-light mail-f px-4 py-3">
|
||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||||
<p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
|
||||
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
|
||||
</div>
|
||||
<div className="collapse" id="editer">
|
||||
<div className="form-group">
|
||||
<textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="collapse" id="forward">
|
||||
<div className="form-group">
|
||||
<input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between py-2">
|
||||
<div>
|
||||
{/*<ul className="nav">*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
|
||||
{/* <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
|
||||
{/*</ul>*/}
|
||||
</div>
|
||||
<div>
|
||||
{/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className="text-mute">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
) : getContactData?.error ? (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className="text-danger">{getContactData?.error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
{/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="card card-statistics mail-contant"
|
||||
style={{ minHeight: "550px", borderRadius: "10px" }}
|
||||
>
|
||||
<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 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>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/*<li className="py-2">*/}
|
||||
{/* <a href="#">*/}
|
||||
{/* <span*/}
|
||||
{/* className="nav align-items-center">*/}
|
||||
{/* <span>*/}
|
||||
{/* <i className="fa fa-paper-plane-o pr-4"></i>*/}
|
||||
{/* </span>*/}
|
||||
{/* <span>*/}
|
||||
{/* <span>Replied Mail</span>*/}
|
||||
{/* </span>*/}
|
||||
{/* </span>*/}
|
||||
{/* </a>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
|
||||
<ul className="pl-0 mt-5">
|
||||
<li
|
||||
className="py-2"
|
||||
onClick={() => changeActiveCategoryUID("0")}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div>
|
||||
<span className="nav align-items-center">
|
||||
<span>
|
||||
<i
|
||||
className={`fa fa-circle-o pr-4 ${
|
||||
activeCategoryUID == "0"
|
||||
? "text-primary"
|
||||
: "text-warning"
|
||||
}`}
|
||||
></i>
|
||||
</span>
|
||||
<span>
|
||||
<span>All</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{contactsCategory &&
|
||||
contactsCategory.map((item) => (
|
||||
<li
|
||||
key={item?.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>
|
||||
</span>
|
||||
<span>
|
||||
<span>{item?.description}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8 col-xxl-4 border-md-t">
|
||||
<div className="mail-content border-right border-n h-100">
|
||||
<div className="mail-search border-bottom">
|
||||
<div className="row align-items-center mx-0">
|
||||
<div className="col-12">
|
||||
{/*<div className="form-group pt-3">*/}
|
||||
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
|
||||
{/* <i className="fa fa-search"></i>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{contactsData &&
|
||||
filteredContactData?.map((contact, index) => {
|
||||
const isActive =
|
||||
contact?.uid == activeContactUID ||
|
||||
(!activeContactUID && index == 0);
|
||||
const avtarImage =
|
||||
contact?.category === undefined
|
||||
? "avtar/01.jpg"
|
||||
: "avtar/" + contact.category + ".png";
|
||||
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(avtarImage)}
|
||||
className="img-fluid"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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)} */}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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={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>
|
||||
<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>
|
||||
<p>
|
||||
{activeContactUID
|
||||
? activeDetail[0]?.message
|
||||
: filteredContactData[0]?.message}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -44,13 +44,13 @@ export default function Products() {
|
||||
{products && products.map((product, index) => (
|
||||
<div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
|
||||
<Link to={productPath(product?.product_id)} >
|
||||
<div className={`d-flex align-items-center extraProductCard ${product?.icon_style}`} >
|
||||
<div className={`d-flex align-items-center extraProductCard ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className={`fa ${product?.product_icon} text-primary`}></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>{product?.status_text}</p>
|
||||
<h4>{product?.name}</h4>
|
||||
<p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
|
||||
<h4><span style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -57,16 +57,22 @@ export default function TopBar() {
|
||||
<>
|
||||
{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 dataSpan = ''
|
||||
if(item?.extra_style){
|
||||
const data = item.data_span.split(' ')
|
||||
dataSpan = `${data[0]} ${data[1]}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={item.id + index} className="col-sm-6 col-xxl-3">
|
||||
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `}>
|
||||
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
|
||||
<div className="card-body p-0">
|
||||
<div className="d-flex m-b-0 ecommerce-contant-text h-100">
|
||||
<div className="w-100">
|
||||
<div className="row p-3">
|
||||
<div className="col">
|
||||
<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 className="col text-right">
|
||||
<h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5>
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function UserMenu() {
|
||||
return (
|
||||
<>
|
||||
<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={`${pathname == siteLinks.dash ? 'active' : ''}`}>
|
||||
<Link className="has-arrow" to='#' data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
@@ -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' : ''}`}>
|
||||
@@ -54,7 +54,7 @@ export default function UserMenu() {
|
||||
</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>
|
||||
<Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to='' onClick={logout}> Log Out</Link>
|
||||
</li>
|
||||
|
||||
@@ -20,7 +20,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backend
|
||||
fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
||||
})
|
||||
|
||||
console.log('fieldData', fieldData)
|
||||
// console.log('fieldData', fieldData)
|
||||
|
||||
const [fields, setFields] = useState(fieldData)
|
||||
|
||||
|
||||
@@ -6,28 +6,64 @@ import { getProductTemplateData } from '../../../services/services';
|
||||
|
||||
const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
|
||||
const {data:templateData, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.productTemplateData,
|
||||
queryFn: () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id
|
||||
}
|
||||
return getProductTemplateData(reqData)
|
||||
}
|
||||
})
|
||||
const {data:templateData, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.productTemplateData,
|
||||
queryFn: () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id
|
||||
}
|
||||
return getProductTemplateData(reqData)
|
||||
},
|
||||
staleTime: 0
|
||||
})
|
||||
|
||||
const settingsData = templateData?.data
|
||||
console.log('data Template', settingsData)
|
||||
const templateResponse = templateData?.data
|
||||
const templates = templateResponse?.templates
|
||||
|
||||
console.log("Page data == ", data)
|
||||
// console.log('data Template', templates)
|
||||
// console.log("Page data == ", data)
|
||||
return (
|
||||
<div className="page-account-form">
|
||||
<div className="p-0">
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row">
|
||||
<>
|
||||
{Object.entries(data)?.map(([key, value]) => (
|
||||
{!templates.length ?
|
||||
<p>No data Found</p>
|
||||
:
|
||||
templates.map(template => (
|
||||
<div key={template.template_uid} className="col-xl-6 col-sm-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body">
|
||||
<div className="text-center p-2">
|
||||
<div className="mb-2">
|
||||
<img src={getImage('file-icon/svg.png')} alt={template.title} />
|
||||
</div>
|
||||
<h4 className="mb-0">{template.title}</h4>
|
||||
<a href="#" className="btn btn-light">Activate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
{/* {Object.entries(data)?.map(([key, value]) => (
|
||||
<div key={key} className="col-xl-6 col-sm-6">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body">
|
||||
@@ -41,9 +77,10 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))} */}
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, {useEffect, useMemo, useState} from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
// import { useLocation } from "react-router-dom";
|
||||
// import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import {useMutation, useQuery} from "@tanstack/react-query";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { IoMdArrowDropdown } from "react-icons/io";
|
||||
import { completeProfile, getCommonPractice } from '../../services/services';
|
||||
import {IoMdArrowDropdown} from "react-icons/io";
|
||||
import {completeProfile, getCommonPractice} from '../../services/services';
|
||||
import siteLinks from "../../links/siteLinks";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { updateUserDetails } from "../../store/UserDetails";
|
||||
import { useDispatch } from "react-redux";
|
||||
import {useLocation, useNavigate} from "react-router-dom";
|
||||
import {updateUserDetails} from "../../store/UserDetails";
|
||||
import {useDispatch} from "react-redux";
|
||||
|
||||
|
||||
// const validationSchema = Yup.object().shape({
|
||||
@@ -26,51 +26,53 @@ import { useDispatch } from "react-redux";
|
||||
// };
|
||||
|
||||
|
||||
export default function ProfileCompleteCom(){
|
||||
export default function ProfileCompleteCom() {
|
||||
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const {state:{redirectLink}} = useLocation()
|
||||
const {state: {redirectLink}} = useLocation()
|
||||
|
||||
const [practices, setPractices] = useState([])
|
||||
|
||||
|
||||
const [initialValues, setInitialValues] = useState({
|
||||
practice: '',
|
||||
specialization: '',
|
||||
introduction: '',
|
||||
})
|
||||
|
||||
const specialties = useMemo(()=>{ // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
|
||||
const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES
|
||||
setInitialValues(prev => ({...prev, specialization: ''}))
|
||||
if(!initialValues.practice){
|
||||
if (!initialValues.practice) {
|
||||
return []
|
||||
}
|
||||
const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
|
||||
return specialtiesArr
|
||||
},[initialValues.practice])
|
||||
}, [initialValues.practice])
|
||||
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
const {practice, specialization} = fields
|
||||
if(!practice || !specialization){
|
||||
if (!practice || !specialization) {
|
||||
throw new Error('Please select both practice and specialization fields')
|
||||
}
|
||||
return completeProfile(fields)
|
||||
},
|
||||
onError: () => {
|
||||
setTimeout(()=>{mutation.reset()}, 4000)
|
||||
setTimeout(() => {
|
||||
mutation.reset()
|
||||
}, 4000)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res.data.resultCode != '0'){
|
||||
if (res.data.resultCode != '0') {
|
||||
throw({message: res?.data?.resultDescription})
|
||||
}
|
||||
dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed }));
|
||||
setTimeout(()=>{
|
||||
dispatch(updateUserDetails({profile_completed: res?.data?.profile_completed}));
|
||||
setTimeout(() => {
|
||||
navigate(redirectLink)
|
||||
},2000)
|
||||
}, 2000)
|
||||
// console.log('res', res)
|
||||
}
|
||||
})
|
||||
@@ -79,11 +81,11 @@ export default function ProfileCompleteCom(){
|
||||
mutationFn: (fields) => {
|
||||
return getCommonPractice(fields)
|
||||
},
|
||||
onError: ()=> {
|
||||
onError: () => {
|
||||
setPractices([])
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(!res?.data){
|
||||
if (!res?.data) {
|
||||
return setPractices([])
|
||||
}
|
||||
let returnPractices = Object.entries(res?.data).filter(([key, value]) => typeof value == 'object')?.map(item => item[1])
|
||||
@@ -91,8 +93,8 @@ export default function ProfileCompleteCom(){
|
||||
}
|
||||
})
|
||||
|
||||
const handlePracticeChange = ({target:{name, value}}) => {
|
||||
setInitialValues(prev => ({...prev, [name]:value}))
|
||||
const handlePracticeChange = ({target: {name, value}}) => {
|
||||
setInitialValues(prev => ({...prev, [name]: value}))
|
||||
}
|
||||
|
||||
const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE
|
||||
@@ -104,17 +106,17 @@ export default function ProfileCompleteCom(){
|
||||
mutation.mutate(reqData)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
commonPractices.mutate(reqData)
|
||||
},[])
|
||||
}, [])
|
||||
|
||||
return <>
|
||||
|
||||
<BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']} />
|
||||
<BreadcrumbComBS title='Tell us more about your practice.' paths={['Dashboard', 'Profile']}/>
|
||||
|
||||
{commonPractices?.isFetching ?
|
||||
<>
|
||||
@@ -130,87 +132,113 @@ export default function ProfileCompleteCom(){
|
||||
<p className='text-danger'>{commonPractices?.error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row pt-1">
|
||||
<div className="col-md-6 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
{/* <div className="card-header d-flex align-items-center justify-content-between">
|
||||
:
|
||||
<div className="row pt-1">
|
||||
<div className="col-md-6 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0" style={{borderRadius: '10px'}}>
|
||||
{/* <div className="card-header d-flex align-items-center justify-content-between">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">My Product URLs</h4>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* <div style={{minHeight: '400px'}}></div> */}
|
||||
<div className="card-body">
|
||||
<div className='h-100 row flex-column'>
|
||||
{/* <div className="row"> */}
|
||||
{/* <div style={{minHeight: '400px'}}></div> */}
|
||||
<div className="card-body">
|
||||
<div className='h-100 row flex-column'>
|
||||
{/* <div className="row"> */}
|
||||
<>
|
||||
<div className="">
|
||||
<div className="form-group position-relative">
|
||||
<label className={`text-black fw-bold control-label`}>Practice :</label>
|
||||
<div className="position-relative">
|
||||
<div className="position-relative">
|
||||
{/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
|
||||
<option value=''>Select</option>
|
||||
{practices.map((practice, index)=>(
|
||||
<option key={index} value={practice.practice}>{practice.practice}</option>
|
||||
))}
|
||||
</select> */}
|
||||
<select onChange={handlePracticeChange} name='practice' value={initialValues.practice} className="form-control">
|
||||
<select onChange={handlePracticeChange} name='practice'
|
||||
value={initialValues.practice} className="form-control">
|
||||
<option value=''>Select</option>
|
||||
{practices.map((practice, index)=>(
|
||||
<option key={index} value={practice.practice}>{practice.practice}</option>
|
||||
{practices.map((practice, index) => (
|
||||
<option key={index}
|
||||
value={practice.practice}>{practice.practice}</option>
|
||||
))}
|
||||
</select>
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
||||
top: '50%',
|
||||
right: '2px',
|
||||
transform: 'translateY(-50%)'
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<div className="form-group">
|
||||
<label className={`text-black fw-bold control-label`}>Specialization :</label>
|
||||
<label className={`text-black fw-bold control-label`}>Your
|
||||
Specialization :</label>
|
||||
<div className="position-relative">
|
||||
<select onChange={handlePracticeChange} name='specialization' value={initialValues.specialization} className="form-control">
|
||||
<select onChange={handlePracticeChange} name='specialization'
|
||||
value={initialValues.specialization}
|
||||
className="form-control">
|
||||
<option value=''>Select</option>
|
||||
{specialties.map((specialty, index)=>(
|
||||
{specialties.map((specialty, index) => (
|
||||
<option key={index} value={specialty}>{specialty}</option>
|
||||
))}
|
||||
</select>
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{
|
||||
top: '50%',
|
||||
right: '2px',
|
||||
transform: 'translateY(-50%)'
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<div className="form-group position-relative">
|
||||
<label className={`text-black fw-bold control-label`}>General Information :</label>
|
||||
<textarea name='introduction' rows={10} style={{resize: 'none'}} className="form-control" value={initialValues.introduction} onChange={handlePracticeChange} />
|
||||
<label className={`text-black fw-bold control-label`}>Other General
|
||||
Information :</label>
|
||||
<textarea name='introduction' rows={10} style={{resize: 'none'}}
|
||||
className="form-control" value={initialValues.introduction}
|
||||
onChange={handlePracticeChange}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<div className="form-group position-relativ'e">
|
||||
{/*<label className={`text-black fw-bold control-label`}>What we use this*/}
|
||||
{/* information for :</label>*/}
|
||||
<div style={{fontSize: '14px', borderRadius: '10px', backgroundColor: 'aliceblue', fontWeight:'bolder', padding: '15px' }}>
|
||||
MERMS A.I. agents use the information supplied to help generate useful entries for your product settings.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{(mutation.isError || mutation.isSuccess) &&
|
||||
<>
|
||||
<div className="">
|
||||
<p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
|
||||
</div>
|
||||
<div className="">
|
||||
<p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
<div className="mt-auto text-end">
|
||||
<button type='button' onClick={handleCompleteProfile} className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
|
||||
<button type='button' onClick={handleCompleteProfile}
|
||||
className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
|
||||
</div>
|
||||
</>
|
||||
{/* </div> */}
|
||||
{/* </div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 m-b-30">
|
||||
<div className="text-center img-block left-column wow fadeInRight">
|
||||
<img className="img-fluid" src={getImage('img-07.png')} alt="content-image" />
|
||||
<div className="col-md-6 m-b-30">
|
||||
<div className="text-center img-block left-column wow fadeInRight">
|
||||
<img className="img-fluid" src={getImage('tell-us-more.png')} alt="content-image"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>;
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
|
||||
export default function Settings(){
|
||||
|
||||
const avtarImage = "avtar/merms-user.png";
|
||||
return(
|
||||
<>
|
||||
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']} />
|
||||
@@ -22,41 +23,18 @@ export default function Settings(){
|
||||
<div className="profile-img text-center rounded-circle">
|
||||
<div className="pt-5">
|
||||
<div className="bg-img m-auto">
|
||||
<img src="assets/img/avtar/01.jpg" className="img-fluid"
|
||||
alt="users-avatar" />
|
||||
{/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
|
||||
{/* alt="users-avatar" />*/}
|
||||
<img src={getImage(avtarImage)}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">Alice Williams</h4>
|
||||
<p>Enthusiast</p>
|
||||
<div style={{padding: '10px'}}><hr /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-5 profile-counter">
|
||||
<ul className="nav justify-content-center text-center">
|
||||
<li className="nav-item border-right px-3">
|
||||
<div>
|
||||
<h4 className="mb-0">90</h4>
|
||||
<p>Post</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item border-right px-3">
|
||||
<div>
|
||||
<h4 className="mb-0">1.5K</h4>
|
||||
<p>Messages</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="nav-item px-3">
|
||||
<div>
|
||||
<h4 className="mb-0">4.4K</h4>
|
||||
<p>Members</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="profile-btn text-center">
|
||||
<div>
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
|
||||
@@ -6,7 +6,7 @@ import {useQuery} from '@tanstack/react-query';
|
||||
import queryKeys from '../../services/queryKeys';
|
||||
import siteLinks from "../../links/siteLinks";
|
||||
import {Link, useNavigate} from 'react-router-dom'
|
||||
import getDateFromDateString from '../../helpers/GetDateFromDateString';
|
||||
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
|
||||
|
||||
export default function Subscription() {
|
||||
const navigate = useNavigate()
|
||||
@@ -57,8 +57,8 @@ export default function Subscription() {
|
||||
<h2 className="text-primary pt-3">{currentSubscription?.display_name}</h2>
|
||||
</div>
|
||||
<div className="pt-2" style={{textAlign: 'left'}}>
|
||||
<div style={{fontSize: '10px'}}>
|
||||
Next Payment: {getDateFromDateString(currentSubscription?.next_payment)}
|
||||
<div style={{fontSize: '12px', fontWeight: 'bolder' , color: "#3E3699" }}>
|
||||
Next Payment: {getDateTimeFromDateString(currentSubscription?.next_payment)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,11 +84,19 @@ export default function Subscription() {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<button onClick={() => {
|
||||
navigate(siteLinks.subscribe, {state: {selectedSubscription: value, customerId: stripe_customer_id }})
|
||||
}}
|
||||
className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
|
||||
<div className="pt-2" style={{fontWeight: 'bolder'}}>
|
||||
{
|
||||
(currentSubscription?.display_name == value.option_name) ? 'Current Subscription' :
|
||||
<button onClick={() => {
|
||||
navigate(siteLinks.subscribe, {
|
||||
state: {
|
||||
selectedSubscription: value,
|
||||
customerId: stripe_customer_id
|
||||
}
|
||||
})
|
||||
}}
|
||||
className="btn btn-inverse-secondary btn-round btn-sm">Go {value.display_name}</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+7
-2
@@ -99,8 +99,13 @@ $event-padding: 10px;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
.billing{
|
||||
background-color: darkgoldenrod;
|
||||
color: white;
|
||||
background-color: #b9c2c5;
|
||||
color: #77117a;
|
||||
}
|
||||
|
||||
.next_billing{
|
||||
background-color: #cff1f0;
|
||||
color: #19548e;
|
||||
}
|
||||
.extraProductCard{
|
||||
background-color: aliceblue;
|
||||
|
||||
@@ -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
|
||||
@@ -1,4 +1,4 @@
|
||||
function getDateFromDateString(dateString) {
|
||||
function getDateTimeFromDateString(dateString) {
|
||||
const date = new Date(dateString);
|
||||
|
||||
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}`;
|
||||
}
|
||||
|
||||
export default getDateFromDateString
|
||||
export default getDateTimeFromDateString
|
||||
Reference in New Issue
Block a user