Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
08665d51a7 | ||
 victor.ebuka
|
dff0bd72ed | ||
|
victorAnumudu
|
823ff83f88 | ||
|
victor.ebuka
|
82f0efe6e5 | ||
|
victorAnumudu
|
3eaf99f212 | ||
|
victor.ebuka
|
5d93817555 |
@@ -5,6 +5,12 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
|
|||||||
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
|
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
|
||||||
REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
|
REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
|
||||||
|
|
||||||
|
# login footer links
|
||||||
|
REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
|
||||||
|
REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
|
||||||
|
REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
|
||||||
|
REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
|
||||||
|
|
||||||
# Inactivity timeout/logout AT 10MINS
|
# Inactivity timeout/logout AT 10MINS
|
||||||
REACT_APP_TIMEOUT=600000
|
REACT_APP_TIMEOUT=600000
|
||||||
|
|
||||||
|
|||||||
@@ -5,5 +5,11 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
|
|||||||
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
|
REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
|
||||||
REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
|
REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
|
||||||
|
|
||||||
|
# login footer links
|
||||||
|
REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
|
||||||
|
REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
|
||||||
|
REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
|
||||||
|
REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
|
||||||
|
|
||||||
# Inactivity timeout/logout AT 10MINS
|
# Inactivity timeout/logout AT 10MINS
|
||||||
REACT_APP_TIMEOUT=600000
|
REACT_APP_TIMEOUT=600000
|
||||||
|
|||||||
@@ -4,5 +4,11 @@ REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
|
|||||||
REACT_APP_MAIN_API="https://api.mermsemr.com"
|
REACT_APP_MAIN_API="https://api.mermsemr.com"
|
||||||
REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
|
REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
|
||||||
|
|
||||||
|
# login footer links
|
||||||
|
REACT_APP_HOME_LINK='https://www.mermsemr.com/'
|
||||||
|
REACT_APP_ABOUT_LINK='https://www.mermsemr.com/about'
|
||||||
|
REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
|
||||||
|
REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
|
||||||
|
|
||||||
# Inactivity timeout/logout AT 10MINS
|
# Inactivity timeout/logout AT 10MINS
|
||||||
REACT_APP_TIMEOUT=600000
|
REACT_APP_TIMEOUT=600000
|
||||||
+27
@@ -9,3 +9,30 @@
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.register{
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-links{
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-links a {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0px 20px;
|
||||||
|
border-right: 2px solid;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-links a:nth-of-type(1){
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-links a:last-child{
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
+1
-1
@@ -11,7 +11,7 @@ function App() {
|
|||||||
refetchOnWindowFocus: false,
|
refetchOnWindowFocus: false,
|
||||||
retry: 3,
|
retry: 3,
|
||||||
// refetchOnMount: false,
|
// refetchOnMount: false,
|
||||||
staleTime: 3000
|
staleTime: Infinity // can also be a number in millisecond
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ export default function Login() {
|
|||||||
<div className="row no-gutters justify-content-center">
|
<div className="row no-gutters justify-content-center">
|
||||||
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
<div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||||
<div className="mt-5 d-flex">
|
<div className="mt-5 d-flex">
|
||||||
<div className="bg-white register p-5">
|
<div className="bg-white register px-5 pt-5 pb-3">
|
||||||
<h1 className="mb-2">MERMS Panel</h1>
|
<h1 className="mb-2">MERMS Panel</h1>
|
||||||
<p>Welcome back, please login to your account.</p>
|
<p>Welcome back, please login to your account.</p>
|
||||||
<form className="mt-3 mt-sm-5">
|
<form className="mt-3 mt-sm-5">
|
||||||
@@ -132,6 +132,13 @@ export default function Login() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="login-links">
|
||||||
|
<a href={process.env.REACT_APP_HOME_LINK}>Home</a>
|
||||||
|
<a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
|
||||||
|
<a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
|
||||||
|
<a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -85,6 +85,7 @@ export default function Calendar(){
|
|||||||
|
|
||||||
{category.map((item, index) => {
|
{category.map((item, index) => {
|
||||||
let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
|
let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
|
||||||
|
let circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
|
||||||
return (
|
return (
|
||||||
// <div key={index} className={`fc-event ${color}`} data-color={`${color}`}
|
// <div key={index} className={`fc-event ${color}`} data-color={`${color}`}
|
||||||
// // draggable={false}
|
// // draggable={false}
|
||||||
@@ -94,12 +95,26 @@ export default function Calendar(){
|
|||||||
// >
|
// >
|
||||||
// <span>{item.description}</span>
|
// <span>{item.description}</span>
|
||||||
// </div>
|
// </div>
|
||||||
<div key={index} className={`form-check ${color}`}>
|
|
||||||
<input className="form-check-input" type="radio" value={item.cid}
|
// <div key={index} className={`form-check ${color}`}>
|
||||||
id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
|
// <input className="form-check-input" type="radio" value={item.cid}
|
||||||
<label className={`w-100 form-check-label`} htmlFor={item.cid}>
|
// id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
|
||||||
{item.description}
|
// <label className={`w-100 form-check-label`} htmlFor={item.cid}>
|
||||||
</label>
|
// {item.description}
|
||||||
|
// </label>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
<div key={index} className={`form-check ${color}`} onClick={() => handleActiveCategory(item.cid)} style={{cursor: 'pointer'}}>
|
||||||
|
<div>
|
||||||
|
<span className="nav align-items-center">
|
||||||
|
<span>
|
||||||
|
<i className={`fa fa-circle-o pr-4 ${item.cid == activeCategory ? circleColor : 'text-light'}`}></i>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<span>{item?.description}</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,18 +14,34 @@ export default function Contacts(){
|
|||||||
queryFn: () => contactData()
|
queryFn: () => contactData()
|
||||||
})
|
})
|
||||||
|
|
||||||
const contactsData = contacts?.data?.calendar_data?.contacts
|
const contactsData = contacts?.data?.calendar_data?.contacts // LIST OF CONTACTS
|
||||||
|
const contactsCategory = contacts?.data?.calendar_data?.category // LIST OF CATEGORY
|
||||||
|
|
||||||
|
const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
|
||||||
|
|
||||||
const [activeContactUID, setActiveContactUID] = useState(null)
|
const [activeContactUID, setActiveContactUID] = useState(null)
|
||||||
|
|
||||||
const [activeDetail, setActiveDetail] = useState(null)
|
const [activeDetail, setActiveDetail] = useState(null)
|
||||||
|
|
||||||
|
const [filteredContactData, setFiltererdContactData] = useState(null)
|
||||||
|
|
||||||
const changeActiveUID = (uid) => {
|
const changeActiveUID = (uid) => {
|
||||||
setActiveContactUID(uid)
|
setActiveContactUID(uid)
|
||||||
let detail = contactsData.filter(item => item.uid == uid)
|
let detail = contactsData.filter(item => item.uid == uid)
|
||||||
setActiveDetail(detail)
|
setActiveDetail(detail)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const changeActiveCategoryUID = (id) => {
|
||||||
|
let filteredConData = []
|
||||||
|
setActiveCategoryUID(id)
|
||||||
|
if(id == '0'){
|
||||||
|
filteredConData = contactsData
|
||||||
|
}else{
|
||||||
|
filteredConData = contactsData.filter(item => item.category == id)
|
||||||
|
}
|
||||||
|
setFiltererdContactData(filteredConData)
|
||||||
|
changeActiveUID(filteredConData[0]?.uid)
|
||||||
|
}
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<>
|
<>
|
||||||
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
|
<BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
|
||||||
@@ -53,16 +69,16 @@ export default function Contacts(){
|
|||||||
<div className="col-md-4 col-xxl-2 col-md-4">
|
<div className="col-md-4 col-xxl-2 col-md-4">
|
||||||
<div className="mail-sidebar">
|
<div className="mail-sidebar">
|
||||||
<div className="row justify-content-center">
|
<div className="row justify-content-center">
|
||||||
<div className="col-12">
|
<div className="d-none col-12">
|
||||||
<div className="text-center mail-sidebar-title px-4">
|
<div className="text-center mail-sidebar-title px-4">
|
||||||
<a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
<a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="px-4 py-4">
|
<div className="px-4 py-4">
|
||||||
<ul className="pl-0">
|
<ul className="pl-0">
|
||||||
<li className="py-2">
|
<li className="py-2">
|
||||||
<a href="javascript:void(0)">
|
<a href="#">
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
<i className="fa fa-envelope-o text-primary pr-4"></i>
|
||||||
@@ -71,13 +87,13 @@ export default function Contacts(){
|
|||||||
<span>Inbox</span>
|
<span>Inbox</span>
|
||||||
</span>
|
</span>
|
||||||
<span className="nav-item ml-auto text-right">
|
<span className="nav-item ml-auto text-right">
|
||||||
<span className="badge badge-pill badge-primary float-right">0+</span>
|
<span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2">
|
<li className="py-2">
|
||||||
<a href="javascript:void(0)">
|
<a href="#">
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-paper-plane-o pr-4"></i>
|
<i className="fa fa-paper-plane-o pr-4"></i>
|
||||||
@@ -90,21 +106,36 @@ export default function Contacts(){
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul className="pl-0 mt-5">
|
<ul className="pl-0 mt-5">
|
||||||
<li className="py-2">
|
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
|
||||||
<a href="javascript:void(0)">
|
<div>
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-circle-o text-danger pr-4"></i>
|
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span>Personal</span>
|
<span>All</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2">
|
{contactsCategory && contactsCategory.map(item => (
|
||||||
<a href="javascript:void(0)">
|
<li key={item?.product_id} className="py-2" onClick={()=>changeActiveCategoryUID(item?.product_id)} style={{cursor: 'pointer'}}>
|
||||||
|
<div>
|
||||||
|
<span className="nav align-items-center">
|
||||||
|
<span>
|
||||||
|
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == item?.product_id ? 'text-primary' : 'text-warning'}`}></i>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<span>{item?.title}</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
{/* <li className="py-2">
|
||||||
|
<a href="#">
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
<i className="fa fa-circle-o pr-4 text-warning"></i>
|
||||||
@@ -116,7 +147,7 @@ export default function Contacts(){
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2">
|
<li className="py-2">
|
||||||
<a href="javascript:void(0)">
|
<a href="#">
|
||||||
<span className="nav align-items-center">
|
<span className="nav align-items-center">
|
||||||
<span>
|
<span>
|
||||||
<i className="fa fa-plus pr-4"></i>
|
<i className="fa fa-plus pr-4"></i>
|
||||||
@@ -126,7 +157,7 @@ export default function Contacts(){
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li> */}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -146,7 +177,7 @@ export default function Contacts(){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mail-msg scrollbar scroll_dark">
|
<div className="mail-msg scrollbar scroll_dark">
|
||||||
{contactsData && contactsData.map((contact, index)=> {
|
{contactsData && (filteredContactData || contactsData).map((contact, index)=> {
|
||||||
const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
|
const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
|
||||||
return (
|
return (
|
||||||
<div key={contact.uid} onClick={()=>changeActiveUID(contact.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
<div key={contact.uid} onClick={()=>changeActiveUID(contact.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
|
||||||
@@ -161,11 +192,16 @@ export default function Contacts(){
|
|||||||
<div className="mail-msg-item-titel justify-content-between">
|
<div className="mail-msg-item-titel justify-content-between">
|
||||||
<p>{contact.sender}</p>
|
<p>{contact.sender}</p>
|
||||||
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
|
||||||
<p className="d-none d-xl-block"><span>{getCustomTime(contact.added)}</span></p>
|
<p className="d-none d-xl-block"><span>{new Date(contact.added).toDateString()}</span></p>
|
||||||
</div>
|
</div>
|
||||||
<h5 className="mb-0 my-2">{contact.title}</h5>
|
<h5 className="mb-0 my-2">{contact.title}</h5>
|
||||||
<p>{contact.message.length < 150 ? contact.message : contact.message.substring(0,151) + '...' }</p>
|
<p>{contact.message.length < 100 ? contact.message : contact.message.substring(0,101) + ' ...' }</p>
|
||||||
<p className="d-xl-none"><span>{getCustomTime(contact.added)}</span></p>
|
<p className="d-xl-none">
|
||||||
|
<span>
|
||||||
|
{new Date(contact.added).toDateString()}
|
||||||
|
{/* {getCustomTime(contact.added)} */}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
@@ -184,7 +220,7 @@ export default function Contacts(){
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
|
<h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
|
||||||
<p>{activeContactUID ? getCustomTime(activeDetail[0].added) : getCustomTime(contactsData[0].added)}</p>
|
<p>{activeContactUID ? new Date(activeDetail[0].added).toDateString() : new Date(contactsData[0].added).toDateString()}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 d-flex justify-content-between">
|
<div className="mt-4 d-flex justify-content-between">
|
||||||
@@ -212,7 +248,7 @@ export default function Contacts(){
|
|||||||
<div className="bg-light mail-f px-4 py-3">
|
<div className="bg-light mail-f px-4 py-3">
|
||||||
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
<div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
|
||||||
<p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
|
<p>Click here to <a href="#editer" data-toggle="collapse" 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>
|
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div className="collapse" id="editer">
|
<div className="collapse" id="editer">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
|
|||||||
Reference in New Issue
Block a user