Compare commits

...

2 Commits

8 changed files with 135 additions and 36 deletions
+6
View File
@@ -5,6 +5,12 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
REACT_APP_MEDIA_SERVER="https://dev-media.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
REACT_APP_TIMEOUT=600000
+6
View File
@@ -5,5 +5,11 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
REACT_APP_MEDIA_SERVER="https://dev-media.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
REACT_APP_TIMEOUT=600000
+6
View File
@@ -4,5 +4,11 @@ REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
REACT_APP_MAIN_API="https://api.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
REACT_APP_TIMEOUT=600000
+23
View File
@@ -8,4 +8,27 @@
background-image: url('./assets/bg/signup_bg.jpg') !important;
background-size: cover;
background-repeat: no-repeat;
}
.login-links{
margin-top: 20px;
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
View File
@@ -11,7 +11,7 @@ function App() {
refetchOnWindowFocus: false,
retry: 3,
// refetchOnMount: false,
staleTime: 3000
staleTime: Infinity // can also be a number in millisecond
},
},
})
+7
View File
@@ -132,6 +132,13 @@ export default function Login() {
</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>
+21 -6
View File
@@ -85,6 +85,7 @@ export default function Calendar(){
{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 circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
return (
// <div key={index} className={`fc-event ${color}`} data-color={`${color}`}
// // draggable={false}
@@ -94,12 +95,26 @@ export default function Calendar(){
// >
// <span>{item.description}</span>
// </div>
<div key={index} className={`form-check ${color}`}>
<input className="form-check-input" type="radio" value={item.cid}
id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
<label className={`w-100 form-check-label`} htmlFor={item.cid}>
{item.description}
</label>
// <div key={index} className={`form-check ${color}`}>
// <input className="form-check-input" type="radio" value={item.cid}
// id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
// <label className={`w-100 form-check-label`} htmlFor={item.cid}>
// {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>
)
}
+65 -29
View File
@@ -14,18 +14,34 @@ export default function Contacts(){
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 [activeDetail, setActiveDetail] = useState(null)
const [filteredContactData, setFiltererdContactData] = useState(null)
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)
}
return(
<>
<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="mail-sidebar">
<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">
<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 className="col-12">
<div className="px-4 py-4">
<ul className="pl-0">
<li className="py-2">
<a href="javascript:void(0)">
<a href="#">
<span className="nav align-items-center">
<span>
<i className="fa fa-envelope-o text-primary pr-4"></i>
@@ -71,13 +87,13 @@ export default function Contacts(){
<span>Inbox</span>
</span>
<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>
</a>
</li>
<li className="py-2">
<a href="javascript:void(0)">
<a href="#">
<span className="nav align-items-center">
<span>
<i className="fa fa-paper-plane-o pr-4"></i>
@@ -90,21 +106,36 @@ export default function Contacts(){
</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)">
<li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
<div>
<span className="nav align-items-center">
<span>
<i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
</span>
<span>
<span>All</span>
</span>
</span>
</div>
</li>
{contactsCategory && contactsCategory.map(item => (
<li key={item?.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>
<i className="fa fa-circle-o pr-4 text-warning"></i>
@@ -116,7 +147,7 @@ export default function Contacts(){
</a>
</li>
<li className="py-2">
<a href="javascript:void(0)">
<a href="#">
<span className="nav align-items-center">
<span>
<i className="fa fa-plus pr-4"></i>
@@ -126,7 +157,7 @@ export default function Contacts(){
</span>
</span>
</a>
</li>
</li> */}
</ul>
</div>
</div>
@@ -146,7 +177,7 @@ export default function Contacts(){
</div>
</div>
<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)
return (
<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">
<p>{contact.sender}</p>
{/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
<p className="d-none d-xl-block"><span>{getCustomTime(contact.added)}</span></p>
<p className="d-none d-xl-block"><span>{new Date(contact.added).toDateString()}</span></p>
</div>
<h5 className="mb-0 my-2">{contact.title}</h5>
<p>{contact.message.length < 150 ? contact.message : contact.message.substring(0,151) + '...' }</p>
<p className="d-xl-none"><span>{getCustomTime(contact.added)}</span></p>
<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>
@@ -184,7 +220,7 @@ export default function Contacts(){
</div>
<div>
<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 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="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>
<a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
</div>
<div className="collapse" id="editer">
<div className="form-group">