Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
e9bc1c1318 | ||
 ameye
|
2543a91b19 | ||
|
victorAnumudu
|
4c38b0a31f | ||
|
ameye
|
6ed396a34c | ||
|
victorAnumudu
|
465a480f02 | ||
|
CHIEFSOFT\ameye
|
4409ed45f3 | ||
|
CHIEFSOFT\ameye
|
470c94ae5e | ||
|
CHIEFSOFT\ameye
|
52fd4275e9 | ||
|
CHIEFSOFT\ameye
|
0dadaf00b0 | ||
|
CHIEFSOFT\ameye
|
0fbe0f4c3f | ||
|
CHIEFSOFT\ameye
|
464182e583 | ||
|
ameye
|
517886df7e | ||
|
victorAnumudu
|
3db5d56410 | ||
|
CHIEFSOFT\ameye
|
6c107c8000 | ||
|
ameye
|
225a3d36e4 | ||
|
victorAnumudu
|
f66f92c58d | ||
|
CHIEFSOFT\ameye
|
599e8a7715 | ||
|
ameye
|
97b75e0d9b | ||
|
victorAnumudu
|
4bc985892e | ||
|
CHIEFSOFT\ameye
|
c951f925d8 | ||
|
CHIEFSOFT\ameye
|
1681ca1437 | ||
|
ameye
|
d2cb38f141 |
+43
-39
@@ -1,4 +1,4 @@
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import {Routes, Route} from 'react-router-dom';
|
||||
|
||||
import UserExist from './component/authorization/UserExist';
|
||||
import AuthLayout from './component/auth/AuthLayout';
|
||||
@@ -23,47 +23,51 @@ import SubscriptionPage from './views/SubscriptionPage';
|
||||
import OnboardPage from "./views/OnboardPage";
|
||||
import AccPWDResetPage from './views/AccPWDResetPage';
|
||||
import ProfileCompletePage from './views/ProfileCompletePage';
|
||||
import SubscribePage from './views/Subscribe'
|
||||
import SubscribePage from './views/Subscribe'
|
||||
import StartPage from "./views/StartPage";
|
||||
import TrafficPage from "./views/TrafficPage";
|
||||
|
||||
function AppRouters() {
|
||||
return (
|
||||
<div className="">
|
||||
<Routes>
|
||||
<Route element={<BearerToken />}>
|
||||
{/* auth routes wrapper */}
|
||||
<Route element={<AuthLayout />}>
|
||||
<Route path={siteLinks.home} element={<LoginPage />} />
|
||||
<Route path={siteLinks.login} element={<LoginPage />} />
|
||||
<Route path={siteLinks.signup} element={<SignupPage />} />
|
||||
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
|
||||
<Route path={siteLinks.csignup} element={<CSignupPage />} />
|
||||
<Route path={siteLinks.accreset} element={<AccPWDResetPage />} />
|
||||
<Route path={siteLinks.error} element={<LoginPage />} />
|
||||
</Route>
|
||||
return (
|
||||
<div className="">
|
||||
<Routes>
|
||||
<Route element={<BearerToken/>}>
|
||||
{/* auth routes wrapper */}
|
||||
<Route element={<AuthLayout/>}>
|
||||
<Route path={siteLinks.home} element={<LoginPage/>}/>
|
||||
<Route path={siteLinks.login} element={<LoginPage/>}/>
|
||||
<Route path={siteLinks.signup} element={<SignupPage/>}/>
|
||||
<Route path={siteLinks.forgetpwd} element={<ForgetpwdPage/>}/>
|
||||
<Route path={siteLinks.csignup} element={<CSignupPage/>}/>
|
||||
<Route path={siteLinks.accreset} element={<AccPWDResetPage/>}/>
|
||||
<Route path={siteLinks.error} element={<LoginPage/>}/>
|
||||
</Route>
|
||||
|
||||
{/* protected routes */}
|
||||
<Route element={<SocketIOContextProvider />}>
|
||||
<Route element={<UserExist />}>
|
||||
<Route path={siteLinks.dash} element={<HomePage />} />
|
||||
<Route path={siteLinks.profile_complete} element={<ProfileCompletePage />} />
|
||||
<Route path={siteLinks.product} element={<ProductPage />} />
|
||||
<Route path={siteLinks.reports} element={<ReportsPage />} />
|
||||
<Route path={siteLinks.comments} element={<CommentsPage />} />
|
||||
<Route path={siteLinks.contacts} element={<ContactsPage />} />
|
||||
<Route path={siteLinks.user} element={<UserPage />} />
|
||||
<Route path={siteLinks.subscription} element={<SubscriptionPage />} />
|
||||
<Route path={siteLinks.subscription_success} element={<SubscriptionPage />} />
|
||||
<Route path={siteLinks.onboard} element={<OnboardPage />} />
|
||||
<Route path={siteLinks.calendar} element={<CalendarPage />} />
|
||||
<Route path={siteLinks.settings} element={<SettingsPage />} />
|
||||
<Route path={siteLinks.subscribe} element={<SubscribePage />} />
|
||||
<Route path={siteLinks.help} element={<HelpPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
{/* protected routes */}
|
||||
<Route element={<SocketIOContextProvider/>}>
|
||||
<Route element={<UserExist/>}>
|
||||
<Route path={siteLinks.start} element={<StartPage/>}/>
|
||||
<Route path={siteLinks.dash} element={<HomePage/>}/>
|
||||
<Route path={siteLinks.traffic} element={<TrafficPage/>}/>
|
||||
<Route path={siteLinks.profile_complete} element={<ProfileCompletePage/>}/>
|
||||
<Route path={siteLinks.product} element={<ProductPage/>}/>
|
||||
<Route path={siteLinks.reports} element={<ReportsPage/>}/>
|
||||
<Route path={siteLinks.comments} element={<CommentsPage/>}/>
|
||||
<Route path={siteLinks.contacts} element={<ContactsPage/>}/>
|
||||
<Route path={siteLinks.user} element={<UserPage/>}/>
|
||||
<Route path={siteLinks.subscription} element={<SubscriptionPage/>}/>
|
||||
<Route path={siteLinks.subscription_success} element={<SubscriptionPage/>}/>
|
||||
<Route path={siteLinks.onboard} element={<OnboardPage/>}/>
|
||||
<Route path={siteLinks.calendar} element={<CalendarPage/>}/>
|
||||
<Route path={siteLinks.settings} element={<SettingsPage/>}/>
|
||||
<Route path={siteLinks.subscribe} element={<SubscribePage/>}/>
|
||||
<Route path={siteLinks.help} element={<HelpPage/>}/>
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AppRouters;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -66,7 +66,7 @@ export default function CSignup() {
|
||||
localStorage.setItem('room', room)
|
||||
localStorage.setItem('uid', uid)
|
||||
dispatch(updateUserDetails({ ...res?.data }));
|
||||
navigate('/dash') // later add redux to dispatch state
|
||||
navigate(siteLinks.start, {replace: true}) // later add redux to dispatch state
|
||||
},
|
||||
// onError: (err) => {
|
||||
// console.log('err', err)
|
||||
|
||||
@@ -93,13 +93,13 @@ export default function Login() {
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label text-black fw-bold">User Name*</label>
|
||||
<input maxLength={55} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
|
||||
<input maxLength={25} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className="control-label text-black fw-bold">Password*</label>
|
||||
<input maxLength={55} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
|
||||
<input maxLength={25} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
|
||||
+323
-532
@@ -1,558 +1,349 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { commentsData } from "../../services/services";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import getCustomTime from "../../utils/getCustomTime";
|
||||
|
||||
export default function Comments() {
|
||||
// const {data:contacts, isFetching, isError, error} = useQuery({
|
||||
// queryKey: queryKeys.contacts,
|
||||
// queryFn: () => contactData()
|
||||
// })
|
||||
|
||||
const [activeCategoryUID, setActiveCategoryUID] = useState("0"); // HOLDS VALUE OF THE ACTIVE CATEGORY
|
||||
|
||||
const [activeContactUID, setActiveContactUID] = useState("");
|
||||
const [activeDetail, setActiveDetail] = useState([]);
|
||||
|
||||
const [filteredContactData, setFiltererdContactData] = useState([]);
|
||||
|
||||
const getContactData = useMutation({
|
||||
mutationFn: (reqData) => {
|
||||
return commentsData(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 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(() => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem("token"), // USER TOKEN
|
||||
uid: localStorage.getItem("uid"), // USER UID
|
||||
};
|
||||
getContactData.mutate(reqData);
|
||||
}, []);
|
||||
|
||||
const contactsData = getContactData?.data?.data?.contacts; // LIST OF CONTACTS
|
||||
const contactsCategory = getContactData?.data?.data?.category; // LIST OF CATEGORY
|
||||
|
||||
return (
|
||||
<>
|
||||
<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+
|
||||
<>
|
||||
<BreadcrumbComBS title="Comments" paths={["Dashboard", "Comments"]} />
|
||||
{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"
|
||||
style={{ minHeight: "200px", 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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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 className={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
|
||||
<div className="mail-content border-right border-n h-100" style={{placeContent: 'center'}}>
|
||||
{/* <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>
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="mail-msg scrollbar scroll_dark">
|
||||
{ filteredContactData.length ?
|
||||
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>
|
||||
);
|
||||
})
|
||||
:
|
||||
<p className="text-center">Messages will appear here as soon as they are available for selection</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
/>
|
||||
{filteredContactData.length > 0 &&
|
||||
<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") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ export default function DashPayments() {
|
||||
{/* <th style={{width: '30px'}}>#</th> */}
|
||||
<th>Date</th>
|
||||
|
||||
<th style={{width: '130px'}}>Subscription</th>
|
||||
<th style={{width: '130px'}}>Description</th>
|
||||
<th style={{width: '80px'}}>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query'
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
// import getImage from "../../utils/getImage";
|
||||
import ProductStart from "./ProductStart";
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import {MyProductData} from "../../services/services";
|
||||
import ProductActive from "./ProductActive";
|
||||
import ProductProvision from "./ProductProvision";
|
||||
import {productConst} from "../../constants/products";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import siteLinks from '../../links/siteLinks';
|
||||
|
||||
export default function ProductFactory(){
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation();
|
||||
const pathname = location.pathname;
|
||||
|
||||
@@ -45,8 +47,9 @@ export default function ProductFactory(){
|
||||
</>
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
|
||||
<p className='text-danger'>{error?.message}</p>
|
||||
<button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
|
||||
@@ -1,158 +1,177 @@
|
||||
import React, {memo, useEffect, useMemo, useState} from 'react'
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { pageSettings } from "../../../services/services";
|
||||
import {useMutation, useQueryClient} from "@tanstack/react-query";
|
||||
import {pageSettings} from "../../../services/services";
|
||||
import SiteTemplateSelector from './SiteTemplateSelector';
|
||||
import NoYesBooleanDropdown from './NoYesBooleanDropdown';
|
||||
import { IoMdArrowDropdown } from 'react-icons/io';
|
||||
import {IoMdArrowDropdown} from 'react-icons/io';
|
||||
import queryKeys from '../../../services/queryKeys';
|
||||
import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
|
||||
|
||||
const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
|
||||
const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
|
||||
const [reqStatus, setReqStatus] = useState({error: null, message: ''})
|
||||
|
||||
|
||||
// const computeFieldData = useMemo(()=>{
|
||||
// const fieldData = {}
|
||||
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
||||
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
|
||||
// })
|
||||
// backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
||||
// fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
||||
// })
|
||||
// return fieldData
|
||||
// },[backendValues.data])
|
||||
|
||||
|
||||
const [fields, setFields] = useState({})
|
||||
// const computeFieldData = useMemo(()=>{
|
||||
// const fieldData = {}
|
||||
// Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
||||
// fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
|
||||
// })
|
||||
// backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
||||
// fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
||||
// })
|
||||
// return fieldData
|
||||
// },[backendValues.data])
|
||||
|
||||
useEffect(()=>{
|
||||
const fieldData = {}
|
||||
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
||||
fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
|
||||
})
|
||||
backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
||||
fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
||||
})
|
||||
setFields(fieldData)
|
||||
},[backendValues.data])
|
||||
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setFields(prev => ({...prev, [name]:value}))
|
||||
setFieldsChanged(true)
|
||||
}
|
||||
|
||||
const submitSettings = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return pageSettings(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if(res?.data?.resultCode != '0'){
|
||||
return setReqStatus({error: true, message: 'Unable to complete, try again later'})
|
||||
}
|
||||
setFieldsChanged(false)
|
||||
setReqStatus({error: false, message: 'Completed successfully'})
|
||||
},
|
||||
onError: (err) => {
|
||||
setReqStatus({error: true, message: 'Unable to complete, try again later'})
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.refetchQueries({ // refetches productProvision API call
|
||||
queryKey: [...queryKeys.settingsData],
|
||||
|
||||
const [fields, setFields] = useState({})
|
||||
|
||||
const sortedData = sortObjectByListOrder(data ? data : {}) // SORTED SETTINGSCONFIG
|
||||
|
||||
useEffect(() => {
|
||||
const fieldData = {}
|
||||
Object.entries(sortedData)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
||||
fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
|
||||
})
|
||||
setTimeout(()=>{
|
||||
setReqStatus({error: null, message: ''})
|
||||
},3000)
|
||||
},
|
||||
})
|
||||
backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
|
||||
fieldData[item?.setting_key?.toLowerCase().replaceAll(" ", "_")] = item?.setting_value
|
||||
})
|
||||
setFields(fieldData)
|
||||
}, [backendValues.data])
|
||||
|
||||
const handleSubmit = () => {
|
||||
const reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id,
|
||||
settings : {
|
||||
...fields
|
||||
}
|
||||
const handleChange = ({target: {name, value}}) => {
|
||||
setFields(prev => ({...prev, [name]: value}))
|
||||
setFieldsChanged(true)
|
||||
}
|
||||
submitSettings.mutate(reqData)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{backendValues?.isFetching || !backendValues?.data ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: backendValues?.isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{backendValues?.error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
{isCustom === true ?
|
||||
<SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
|
||||
:
|
||||
<div className="page-account-form">
|
||||
<div className="p-0" style={{ minHeight: '500px'}}>
|
||||
const submitSettings = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return pageSettings(fields)
|
||||
},
|
||||
onSuccess: (res) => {
|
||||
if (res?.data?.resultCode != '0') {
|
||||
return setReqStatus({error: true, message: 'Unable to complete, try again later'})
|
||||
}
|
||||
setFieldsChanged(false)
|
||||
setReqStatus({error: false, message: 'Completed successfully'})
|
||||
},
|
||||
onError: (err) => {
|
||||
setReqStatus({error: true, message: 'Unable to complete, try again later'})
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.refetchQueries({ // refetches productProvision API call
|
||||
queryKey: [...queryKeys.settingsData],
|
||||
})
|
||||
setTimeout(() => {
|
||||
setReqStatus({error: null, message: ''})
|
||||
}, 3000)
|
||||
},
|
||||
})
|
||||
|
||||
<form id='tab_form'>
|
||||
<div className="form-row">
|
||||
<>
|
||||
{Object.entries(data)?.map(([key, value]) => {
|
||||
let fieldName = value.name.toLowerCase().replaceAll(" ", "_")
|
||||
let fieldValue = fields[value.name.toLowerCase().replaceAll(" ", "_")]
|
||||
return (
|
||||
<div key={key} className="form-group col-md-12">
|
||||
<label htmlFor="name1">{value.name}</label>
|
||||
{value.controls == 'TEXT' ?
|
||||
<input name={fieldName} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
|
||||
:value.controls == 'TEXTAREA' ?
|
||||
<textarea name={fieldName} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fieldValue} onChange={handleChange} />
|
||||
: value.controls == 'SELECT_NO_YES' ?
|
||||
// <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange} />
|
||||
<div className='position-relative'>
|
||||
<select onChange={handleChange} name={fieldName} value={fieldValue} className="form-control">
|
||||
<option value=''>Select</option>
|
||||
<option value='0'>No</option>
|
||||
<option value='1'>Yes</option>
|
||||
</select>
|
||||
<IoMdArrowDropdown className='position-absolute w-auto' style={{top: '50%', right: '2px', transform: 'translateY(-50%)'}} />
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</>
|
||||
{reqStatus.message &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
<div className="form-group col-md-12" style={{textAlign:'right'}}>
|
||||
<button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
|
||||
const handleSubmit = () => {
|
||||
const reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid'), // USER UID
|
||||
product_id: productData?.product_id,
|
||||
settings: {
|
||||
...fields
|
||||
}
|
||||
}
|
||||
submitSettings.mutate(reqData)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{backendValues?.isFetching || !backendValues?.data ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-mute'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
: backendValues?.isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className='text-danger'>{backendValues?.error.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
{isCustom === true ?
|
||||
<SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom}
|
||||
productData={productData}/>
|
||||
:
|
||||
<div className="page-account-form">
|
||||
<div className="p-0" style={{minHeight: '500px'}}>
|
||||
|
||||
<form id='tab_form'>
|
||||
<div className="form-row">
|
||||
<>
|
||||
{Object.entries(sortedData)?.map(([key, value]) => {
|
||||
let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
|
||||
let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
|
||||
return (
|
||||
<div key={key} className="form-group col-md-12">
|
||||
<label htmlFor="name1">{value.name}</label>
|
||||
{value.controls === 'TEXT' ?
|
||||
<input name={fieldName} type="text"
|
||||
className="form-control" id={key}
|
||||
value={fieldValue} onChange={handleChange}/>
|
||||
: value.controls === 'TEXTAREA' ?
|
||||
<textarea name={fieldName} rows={5}
|
||||
style={{resize: 'none'}} type="text"
|
||||
className="form-control" id={key}
|
||||
value={fieldValue}
|
||||
onChange={handleChange}/>
|
||||
: value.controls === 'SELECT_NO_YES' ?
|
||||
// <NoYesBooleanDropdown name={fieldName} value={fieldValue} onChange={handleChange} />
|
||||
<div className='position-relative'>
|
||||
<select onChange={handleChange}
|
||||
name={fieldName} value={fieldValue}
|
||||
className="form-control">
|
||||
<option value=''>Select</option>
|
||||
<option value='0'>No</option>
|
||||
<option value='1'>Yes</option>
|
||||
</select>
|
||||
<IoMdArrowDropdown
|
||||
className='position-absolute w-auto'
|
||||
style={{
|
||||
top: '50%',
|
||||
right: '2px',
|
||||
transform: 'translateY(-50%)'
|
||||
}}/>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</>
|
||||
{reqStatus.message &&
|
||||
<>
|
||||
<div className="col-12">
|
||||
<p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
<div className="form-group col-md-12" style={{textAlign: 'right'}}>
|
||||
<button onClick={handleSubmit} type="button" className="btn btn-primary"
|
||||
disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { getSettingsData, getMyProductConfig } from '../../../services/services'
|
||||
import queryKeys from '../../../services/queryKeys';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
|
||||
|
||||
const Settings = memo(({productData}) => {
|
||||
|
||||
@@ -19,6 +20,7 @@ const Settings = memo(({productData}) => {
|
||||
}
|
||||
return getMyProductConfig(reqData)
|
||||
},
|
||||
staleTime: 0,
|
||||
})
|
||||
const settingsConfig = configData?.data?.settings_items
|
||||
// console.log('CONFIG DATA...', settingsConfig)
|
||||
@@ -53,12 +55,15 @@ const Settings = memo(({productData}) => {
|
||||
}
|
||||
return getSettingsData(reqData)
|
||||
},
|
||||
staleTime: 0,
|
||||
enabled: settingsConfig ? true : false
|
||||
})
|
||||
|
||||
const settingsData = {data: data?.data?.settings, isFetching, isError, error}
|
||||
// console.log('data', settingsData)
|
||||
|
||||
const sortedSettingsConfig = sortObjectByListOrder(settingsConfig ? settingsConfig : {}) // SORTED SETTINGSCONFIG
|
||||
|
||||
return (
|
||||
<>
|
||||
{configIsFetching ?
|
||||
@@ -79,7 +84,7 @@ const Settings = memo(({productData}) => {
|
||||
<div className="tab tab-vertical">
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<>
|
||||
{Object.entries(settingsConfig).map(([key, value], index) => (
|
||||
{Object.entries(sortedSettingsConfig).map(([key, value], index) => (
|
||||
<li key={key} className="nav-item">
|
||||
<a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
|
||||
id={key}
|
||||
@@ -99,7 +104,7 @@ const Settings = memo(({productData}) => {
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
<>
|
||||
{Object.entries(settingsConfig).map(([key, value], index) => (
|
||||
{Object.entries(sortedSettingsConfig).map(([key, value], index) => (
|
||||
<div key={key} className={`tab-pane fade ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
|
||||
// id={value.controls} role="tabpanel"
|
||||
// aria-labelledby={key}
|
||||
@@ -116,4 +121,4 @@ const Settings = memo(({productData}) => {
|
||||
}
|
||||
)
|
||||
|
||||
export default Settings
|
||||
export default Settings
|
||||
+244
-166
@@ -1,10 +1,68 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
import queryKeys from "../../services/queryKeys";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { profileDetails } from "../../services/services";
|
||||
|
||||
|
||||
|
||||
|
||||
const profileValidationSchema = Yup.object().shape({
|
||||
// firstname: Yup.string().required("firstname is required"),
|
||||
// lastname: Yup.string().required("lastname is required"),
|
||||
// email: Yup.string().required("email is required"),
|
||||
// account_name: Yup.string().required("account name is required"),
|
||||
// phone: Yup.string().required("phone is required"),
|
||||
// full_address: Yup.string().required("full address is required"),
|
||||
})
|
||||
|
||||
const linksValidationSchema = Yup.object().shape({
|
||||
// facebook_url: Yup.string().required("facebook is required"),
|
||||
// twitter_url: Yup.string().required("twitter is required"),
|
||||
// blogger_url: Yup.string().required("blog is required"),
|
||||
// google_url: Yup.string().required("google is required"),
|
||||
// linked_url: Yup.string().required("linkedin is required"),
|
||||
// website_url: Yup.string().required("website is required"),
|
||||
})
|
||||
|
||||
|
||||
export default function Settings() {
|
||||
const avtarImage = "avtar/merms-user.png";
|
||||
|
||||
const [intialData, setInitialData] = useState({
|
||||
external_links: {},
|
||||
personal_data: {},
|
||||
})
|
||||
|
||||
const {data:profileInfo, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.profile_data,
|
||||
queryFn: () => {
|
||||
let reqData = {
|
||||
token: localStorage.getItem('token'), // USER TOKEN
|
||||
uid: localStorage.getItem('uid') // USER UID
|
||||
}
|
||||
return profileDetails(reqData)
|
||||
}
|
||||
})
|
||||
// const profileData = profileInfo?.data // profile data
|
||||
useMemo(()=>{
|
||||
const data = profileInfo?.data
|
||||
setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
|
||||
},[profileInfo])
|
||||
// console.log('INI', intialData)
|
||||
|
||||
|
||||
const updateProfile = (values, helpers) => {
|
||||
console.log('Values', values)
|
||||
}
|
||||
|
||||
const updateLinks = (values, helpers) => {
|
||||
console.log('Values', values)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/>
|
||||
@@ -12,184 +70,205 @@ export default function Settings() {
|
||||
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
<div className="row account-contant">
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<p className="text-mute">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
|
||||
<div className="row no-gutters">
|
||||
<div className="col-xl-3 pb-xl-0 pb-5 border-right">
|
||||
<div className="page-account-profil pt-5">
|
||||
<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={getImage(avtarImage)}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">Alice Williams</h4>
|
||||
<div style={{padding: '10px'}}>
|
||||
<hr/>
|
||||
<p className="text-danger">{error?.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="row account-contant">
|
||||
<div className="col-12">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
|
||||
<div className="row no-gutters">
|
||||
<div className="col-xl-3 pb-xl-0 pb-5 border-right">
|
||||
<div className="page-account-profil pt-5">
|
||||
<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={getImage(avtarImage)}
|
||||
className="img-fluid" alt="user"/>
|
||||
</div>
|
||||
<div className="profile pt-4">
|
||||
<h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
|
||||
<div style={{padding: '10px'}}>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="profile-btn text-center">
|
||||
<div>
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
</button>
|
||||
<div className="profile-btn text-center">
|
||||
<div>
|
||||
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
||||
</button>
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <button className="btn btn-danger">Delete</button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
{/*<div>*/}
|
||||
{/* <button className="btn btn-danger">Delete</button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-md-6 col-12 border-t border-right">
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">First Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Alice"/>
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Last Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="Williams"/>
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Account Name</label>
|
||||
<input type="text" className="form-control" id="name1"
|
||||
value="This is the best hospital name"/>
|
||||
</div>
|
||||
{/*<div className="form-group col-md-12">*/}
|
||||
{/* <label htmlFor="title1">Email</label>*/}
|
||||
{/* <input type="text" className="form-control" id="title1"*/}
|
||||
{/* value="email@email.com" />*/}
|
||||
{/*</div>*/}
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number</label>
|
||||
<input type="text" className="form-control" id="phone1"
|
||||
value="(01) 97 563 15613"/>
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input type="email" className="form-control" id="email1"
|
||||
value="alicewilliams@gmail.com"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address</label>
|
||||
<input type="text" className="form-control" id="add1"
|
||||
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add2">Address 2</label>
|
||||
<input type="text" className="form-control" id="add2"
|
||||
value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>
|
||||
</div>
|
||||
<div className="col-xl-5 col-md-6 col-12 border-t border-right">
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Formik
|
||||
initialValues={intialData?.personal_data}
|
||||
validationSchema={profileValidationSchema}
|
||||
onSubmit={updateProfile}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className=''>
|
||||
<div className="form-row">
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="name1">Account Name {(props.errors.account_name && props.touched.account_name) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
|
||||
</div>
|
||||
{/*<div className="form-group col-md-12">*/}
|
||||
{/* <label htmlFor="title1">Email</label>*/}
|
||||
{/* <input type="text" className="form-control" name="title1"*/}
|
||||
{/* value="email@email.com" />*/}
|
||||
{/*</div>*/}
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group col-md-12">
|
||||
<label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
|
||||
</div>
|
||||
{/*<div className="form-group">*/}
|
||||
{/* <label htmlFor="add2">Address 2</label>*/}
|
||||
{/* <input type="text" className="form-control" id="add2"*/}
|
||||
{/* value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<div className="form-row">*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState3">City</label>*/}
|
||||
{/* <select id="inputState3" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">London</option>*/}
|
||||
{/* <option>Montreal</option>*/}
|
||||
{/* <option>Delhi</option>*/}
|
||||
{/* <option>Tokyo</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState4">State</label>*/}
|
||||
{/* <select id="inputState4" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">England</option>*/}
|
||||
{/* <option>California</option>*/}
|
||||
{/* <option>Texas</option>*/}
|
||||
{/* <option>Scotland</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputZip">Zip</label>*/}
|
||||
{/* <input type="text" className="form-control" id="inputZip"*/}
|
||||
{/* value="EC1A 1BB" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="form-group">*/}
|
||||
{/* <div className="form-check">*/}
|
||||
{/* <input className="form-check-input" type="checkbox"*/}
|
||||
{/* id="gridCheck" />*/}
|
||||
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
||||
{/* I agree to receive email notification.*/}
|
||||
{/* </label>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Profile
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
{/*<div className="form-row">*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState3">City</label>*/}
|
||||
{/* <select id="inputState3" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">London</option>*/}
|
||||
{/* <option>Montreal</option>*/}
|
||||
{/* <option>Delhi</option>*/}
|
||||
{/* <option>Tokyo</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputState4">State</label>*/}
|
||||
{/* <select id="inputState4" className="form-control">*/}
|
||||
{/* <option>Choose...</option>*/}
|
||||
{/* <option selected="">England</option>*/}
|
||||
{/* <option>California</option>*/}
|
||||
{/* <option>Texas</option>*/}
|
||||
{/* <option>Scotland</option>*/}
|
||||
{/* </select>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="form-group col-md-4">*/}
|
||||
{/* <label htmlFor="inputZip">Zip</label>*/}
|
||||
{/* <input type="text" className="form-control" id="inputZip"*/}
|
||||
{/* value="EC1A 1BB" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="form-group">*/}
|
||||
{/* <div className="form-check">*/}
|
||||
{/* <input className="form-check-input" type="checkbox"*/}
|
||||
{/* id="gridCheck" />*/}
|
||||
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
||||
{/* I agree to receive email notification.*/}
|
||||
{/* </label>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Profile
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4 col-md-6 border-t col-12">
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Your External Link</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<label htmlFor="fb">Facebook URL:</label>
|
||||
<input type="text" className="form-control" id="fb"
|
||||
value="https://www.facebook.com/"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="tr">Twitter URL:</label>
|
||||
<input type="text" className="form-control" id="tr"
|
||||
value="https://twitter.com/"/>
|
||||
</div>
|
||||
<div className="col-xl-4 col-md-6 border-t col-12">
|
||||
<div className="page-account-form">
|
||||
<div className="form-titel border-bottom p-3">
|
||||
<h5 className="mb-0 py-2">Your External Link</h5>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Formik
|
||||
initialValues={intialData?.external_links}
|
||||
validationSchema={linksValidationSchema}
|
||||
onSubmit={updateLinks}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className=''>
|
||||
<div className="form-group">
|
||||
<label htmlFor="fb">Facebook URL: {(props.errors.facebook_url && props.touched.facebook_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="tr">Twitter URL: {(props.errors.twitter_url && props.touched.twitter_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="br">Blogger URL:</label>
|
||||
<input type="text" className="form-control" id="br"
|
||||
value="https://www.blogger.com"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="br">Blogger URL: {(props.errors.blogger_url && props.touched.blogger_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="go">Google+ URL:</label>
|
||||
<input type="text" className="form-control" id="go"
|
||||
value="https://plus.google.com/discover"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="go">Google+ URL: {(props.errors.google_url && props.touched.google_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="li">LinkedIn URL:</label>
|
||||
<input type="text" className="form-control" id="li"
|
||||
value="https://in.linkedin.com/"/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="li">LinkedIn URL: {(props.errors.linked_url && props.touched.linked_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="we">Website URL:</label>
|
||||
<input type="text" className="form-control" id="we"
|
||||
value="https://yourwebsite.com"/>
|
||||
</div>
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Links
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div className="form-group">
|
||||
<label htmlFor="we">Website URL: {(props.errors.website_url && props.touched.website_url) && <span className="text-danger">*</span>}</label>
|
||||
<input type="text" className="form-control" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
|
||||
</div>
|
||||
<div style={{textAlign: "right"}}>
|
||||
<button type="submit" className="btn btn-primary">Update Links
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,8 +276,7 @@ export default function Settings() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import getImage from "../../utils/getImage";
|
||||
|
||||
export default function Start() {
|
||||
|
||||
const bgImg = getImage("side-banner.jpg");
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']}/>
|
||||
<div className="row">
|
||||
<div className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3"
|
||||
style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>Start with</h5>
|
||||
<h2 className="text-primary pt-3"><a href="/product/A000001">Personal Website</a></h2>
|
||||
<ul className="py-2">
|
||||
<li>post jobs</li>
|
||||
<li>advanced instructors search</li>
|
||||
<li>invite candidates</li>
|
||||
<li>post events</li>
|
||||
<li>cancel any time</li>
|
||||
</ul>
|
||||
<div className="pt-2"><a href="/product/A000001"
|
||||
className="btn btn-primary btn-round btn-sm">Start</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-3 col-md-6">
|
||||
<div className="card card-statistics text-center py-3">
|
||||
<div className="card-body pricing-content">
|
||||
<div className="pricing-content-card">
|
||||
<h5>Start with</h5>
|
||||
<h2 className="text-primary pt-3"><a href="/product/A000002">Business Website</a></h2>
|
||||
<ul className="py-2">
|
||||
<li>post jobs</li>
|
||||
<li>advanced instructors search</li>
|
||||
<li>invite candidates</li>
|
||||
<li>post events</li>
|
||||
<li>cancel any time</li>
|
||||
</ul>
|
||||
<div className="pt-2"><a href="/product/A000001"
|
||||
className="btn btn-primary btn-round btn-sm">Start</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-xl-3 col-md-6">
|
||||
{/*<div className="card card-statistics text-center py-3">*/}
|
||||
{/*<div className="card-body pricing-content">*/}
|
||||
{/*<div className="pricing-content-card">*/}
|
||||
{/* <h5>small</h5>*/}
|
||||
{/* <h2 className="text-primary pt-3">$80</h2>*/}
|
||||
{/* <p className="text-primary pb-3">/ Monthly</p>*/}
|
||||
{/* <ul className="py-2">*/}
|
||||
{/* <li>post jobs</li>*/}
|
||||
{/* <li>advanced instructors search</li>*/}
|
||||
{/* <li>invite candidates</li>*/}
|
||||
{/* <li>post events</li>*/}
|
||||
{/* <li>cancel any time</li>*/}
|
||||
{/* </ul>*/}
|
||||
{/* <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
||||
import TrafficChart from "./TrafficChart";
|
||||
|
||||
|
||||
export default function Traffic() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<BreadcrumbComBS title='Traffic' paths={['Dashboard', 'Traffic']}/>
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="card card-statistics" style={{minHeight: '350px', borderRadius: '10px', backgroundColor: 'aliceblue'}}>
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Site Traffic Monitoring</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title">Plot</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="apexchart-wrapper">
|
||||
<TrafficChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { useState } from "react";
|
||||
import ReactApexChart from "react-apexcharts";
|
||||
|
||||
const TrafficChart = () => {
|
||||
const [state, setState] = useState({
|
||||
|
||||
series: [
|
||||
{
|
||||
// name: "High - 2013",
|
||||
name: 'High',
|
||||
data: [28, 29, 33, 36, 32, 32, 33, 33, 36, 32, 32, 33]
|
||||
},
|
||||
{
|
||||
// name: "Low - 2013",
|
||||
name: 'Low',
|
||||
data: [12, 11, 14, 18, 17, 13, 13, 14, 18, 17, 13, 13]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
color: '#000',
|
||||
top: 18,
|
||||
left: 7,
|
||||
blur: 10,
|
||||
opacity: 0.5
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: ['#77B6EA', '#545454'],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
title: {
|
||||
text: 'Average High & Low Temperature',
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#e7e7e7',
|
||||
row: {
|
||||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 1
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
|
||||
title: {
|
||||
text: 'Month'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Temperature'
|
||||
},
|
||||
min: 5,
|
||||
max: 40
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
floating: true,
|
||||
offsetY: -25,
|
||||
offsetX: -5
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div id="chart">
|
||||
<ReactApexChart options={state.options} series={state.series} type="line" height={350} />
|
||||
</div>
|
||||
<div id="html-dist"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default TrafficChart
|
||||
@@ -0,0 +1,14 @@
|
||||
const sortObjectByListOrder = (data) => {
|
||||
const sortedEntriesByValue = Object.entries(data).sort((a, b) => {
|
||||
if(a[1].list_order > b[1].list_order){
|
||||
return 1
|
||||
}else{
|
||||
return -1
|
||||
}
|
||||
}); // Sorts numerically by value
|
||||
|
||||
const sortedObjectByValue = Object.fromEntries(sortedEntriesByValue);
|
||||
return sortedObjectByValue
|
||||
}
|
||||
|
||||
export default sortObjectByListOrder
|
||||
@@ -3,6 +3,8 @@ const siteLinks = {
|
||||
help: '/help',
|
||||
home: '/',
|
||||
dash: '/dash',
|
||||
traffic: '/traffic',
|
||||
start: '/start',
|
||||
profile_complete: '/profile-complete',
|
||||
product: '/product/*',
|
||||
contacts: '/contacts',
|
||||
|
||||
@@ -10,6 +10,7 @@ const queryKeys = {
|
||||
myProductConfig: ['myproduct_config'],
|
||||
productTemplateData: ['product_template_data'],
|
||||
subscriptions: ['subscriptions'],
|
||||
profile_data: ['profile_data'],
|
||||
|
||||
dashboard: ['dashboard'],
|
||||
topBar: ['top-bar'],
|
||||
|
||||
@@ -26,7 +26,8 @@ const postAuxEnd = (path, postData, media=false) => {
|
||||
return axios.post(`${basePath}${path}`, postData).then(res => {
|
||||
return res
|
||||
}).catch(err => {
|
||||
throw new Error(err.response.data.msg);
|
||||
// console.log('res', err.response.data)
|
||||
throw new Error(err.response.data.error_message);
|
||||
})
|
||||
}
|
||||
|
||||
@@ -75,6 +76,14 @@ export const topBar = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/bar`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PROFILE DATA
|
||||
export const profileDetails = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/account/profile`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PRODUCT BY ID
|
||||
export const MyProductData = (reqData) => {
|
||||
let postData = {
|
||||
@@ -98,7 +107,7 @@ export const getCalendarEvents = (reqData) => {
|
||||
return postAuxEnd(`/panel/account/calendar`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
|
||||
// FUNCTION TO GET CONTACT DATA
|
||||
export const contactData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
@@ -106,6 +115,14 @@ export const contactData = (reqData) => {
|
||||
return postAuxEnd(`/panel/contacts`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET COMMENTS DATA
|
||||
export const commentsData = (reqData) => {
|
||||
let postData = {
|
||||
...reqData,
|
||||
}
|
||||
return postAuxEnd(`/panel/comments`, postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
|
||||
export const productsURL = (reqData) => {
|
||||
let postData = {
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
import Start from "../component/start/Start";
|
||||
|
||||
|
||||
export default function StartPage(){
|
||||
return <Start />
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import Traffic from "../component/traffic/Traffic";
|
||||
|
||||
export default function TrafficPage() {
|
||||
return (
|
||||
<Traffic />
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user