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

Merge branch 'profile-settings' of MERMS/MermsPanelReactJS into master

Browse Source
This commit is contained in:
Olusesan Ameye
2025-09-08 20:45:21 +00:00
committed by Gogs
parent 4409ed45f3 465a480f02
commit 6ed396a34c
7 changed files with 365 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/comments/Comments.js
+2 -2
View File
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
import { useMutation, useQuery } from "@tanstack/react-query"; import { useMutation, useQuery } from "@tanstack/react-query";
import { contactData } from "../../services/services"; import { commentsData } from "../../services/services";
import queryKeys from "../../services/queryKeys"; import queryKeys from "../../services/queryKeys";
import getCustomTime from "../../utils/getCustomTime"; import getCustomTime from "../../utils/getCustomTime";
@@ -22,7 +22,7 @@ export default function Comments() {
const getContactData = useMutation({ const getContactData = useMutation({
mutationFn: (reqData) => { mutationFn: (reqData) => {
return contactData(reqData); return commentsData(reqData);
}, },
onError: (error) => { onError: (error) => {
console.log(error); console.log(error);
src/component/home/DashPayments.jsx
+1 -1
View File
@@ -54,7 +54,7 @@ export default function DashPayments() {
{/* <th style={{width: '30px'}}>#</th> */} {/* <th style={{width: '30px'}}>#</th> */}
<th>Date</th> <th>Date</th>
<th style={{width: '130px'}}>Subscription</th> <th style={{width: '130px'}}>Description</th>
<th style={{width: '80px'}}>Amount</th> <th style={{width: '80px'}}>Amount</th>
</tr> </tr>
</thead> </thead>
src/component/settings/Settings.jsx
+244 -166
View File
@@ -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 BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage"; 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() { export default function Settings() {
const avtarImage = "avtar/merms-user.png"; 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 ( return (
<> <>
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/> <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 className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
{/*</div>*/} {/*</div>*/}
{isFetching ?
<div className="row account-contant"> <>
<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="col-12">
<div className="card card-statistics"> <p className="text-danger">{error?.message}</p>
<div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}> </div>
<div className="row no-gutters"> </div>
<div className="col-xl-3 pb-xl-0 pb-5 border-right"> :
<div className="page-account-profil pt-5"> <div className="row account-contant">
<div className="profile-img text-center rounded-circle"> <div className="col-12">
<div className="pt-5"> <div className="card card-statistics">
<div className="bg-img m-auto"> <div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
{/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/} <div className="row no-gutters">
{/* alt="users-avatar" />*/} <div className="col-xl-3 pb-xl-0 pb-5 border-right">
<img src={getImage(avtarImage)} <div className="page-account-profil pt-5">
className="img-fluid" alt="user"/> <div className="profile-img text-center rounded-circle">
</div> <div className="pt-5">
<div className="profile pt-4"> <div className="bg-img m-auto">
<h4 className="mb-1">Alice Williams</h4> {/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
<div style={{padding: '10px'}}> {/* alt="users-avatar" />*/}
<hr/> <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/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="profile-btn text-center"> <div className="profile-btn text-center">
<div> <div>
<button className="btn btn-light text-primary mb-2">Upload New Avatar <button className="btn btn-light text-primary mb-2">Upload New Avatar
</button> </button>
</div>
{/*<div>*/}
{/* <button className="btn btn-danger">Delete</button>*/}
{/*</div>*/}
</div> </div>
{/*<div>*/}
{/* <button className="btn btn-danger">Delete</button>*/}
{/*</div>*/}
</div> </div>
</div> </div>
</div> <div className="col-xl-5 col-md-6 col-12 border-t border-right">
<div className="col-xl-5 col-md-6 col-12 border-t border-right"> <div className="page-account-form">
<div className="page-account-form"> <div className="form-titel border-bottom p-3">
<div className="form-titel border-bottom p-3"> <h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
<h5 className="mb-0 py-2">Edit Your Personal Settings</h5> </div>
</div> <div className="p-4">
<div className="p-4"> <Formik
<form> initialValues={intialData?.personal_data}
<div className="form-row"> validationSchema={profileValidationSchema}
<div className="form-group col-md-12"> onSubmit={updateProfile}
<label htmlFor="name1">First Name</label> >
<input type="text" className="form-control" id="name1" {(props) => {
value="Alice"/> return (
</div> <Form className=''>
<div className="form-group col-md-12"> <div className="form-row">
<label htmlFor="name1">Last Name</label> <div className="form-group col-md-12">
<input type="text" className="form-control" id="name1" <label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
value="Williams"/> <input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
</div> </div>
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="name1">Account Name</label> <label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">*</span>}</label>
<input type="text" className="form-control" id="name1" <input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
value="This is the best hospital name"/> </div>
</div> <div className="form-group col-md-12">
{/*<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>
{/* <label htmlFor="title1">Email</label>*/} <input type="text" className="form-control" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
{/* <input type="text" className="form-control" id="title1"*/} </div>
{/* value="email@email.com" />*/} {/*<div className="form-group col-md-12">*/}
{/*</div>*/} {/* <label htmlFor="title1">Email</label>*/}
<div className="form-group col-md-12"> {/* <input type="text" className="form-control" name="title1"*/}
<label htmlFor="phone1">Phone Number</label> {/* value="email@email.com" />*/}
<input type="text" className="form-control" id="phone1" {/*</div>*/}
value="(01) 97 563 15613"/> <div className="form-group col-md-12">
</div> <label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
<div className="form-group col-md-12"> <input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
<label htmlFor="email1">Email</label> </div>
<input type="email" className="form-control" id="email1" <div className="form-group col-md-12">
value="alicewilliams@gmail.com"/> <label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
</div> <input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
</div> </div>
<div className="form-group"> </div>
<label htmlFor="add1">Address</label> <div className="form-group">
<input type="text" className="form-control" id="add1" <label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503"/> <input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
</div> </div>
{/*<div className="form-group">*/} {/*<div className="form-group">*/}
{/* <label htmlFor="add2">Address 2</label>*/} {/* <label htmlFor="add2">Address 2</label>*/}
{/* <input type="text" className="form-control" id="add2"*/} {/* <input type="text" className="form-control" id="add2"*/}
{/* value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>*/} {/* value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>*/}
{/*</div>*/} {/*</div>*/}
{/*<div className="form-row">*/} {/*<div className="form-row">*/}
{/* <div className="form-group col-md-4">*/} {/* <div className="form-group col-md-4">*/}
{/* <label htmlFor="inputState3">City</label>*/} {/* <label htmlFor="inputState3">City</label>*/}
{/* <select id="inputState3" className="form-control">*/} {/* <select id="inputState3" className="form-control">*/}
{/* <option>Choose...</option>*/} {/* <option>Choose...</option>*/}
{/* <option selected="">London</option>*/} {/* <option selected="">London</option>*/}
{/* <option>Montreal</option>*/} {/* <option>Montreal</option>*/}
{/* <option>Delhi</option>*/} {/* <option>Delhi</option>*/}
{/* <option>Tokyo</option>*/} {/* <option>Tokyo</option>*/}
{/* </select>*/} {/* </select>*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="form-group col-md-4">*/} {/* <div className="form-group col-md-4">*/}
{/* <label htmlFor="inputState4">State</label>*/} {/* <label htmlFor="inputState4">State</label>*/}
{/* <select id="inputState4" className="form-control">*/} {/* <select id="inputState4" className="form-control">*/}
{/* <option>Choose...</option>*/} {/* <option>Choose...</option>*/}
{/* <option selected="">England</option>*/} {/* <option selected="">England</option>*/}
{/* <option>California</option>*/} {/* <option>California</option>*/}
{/* <option>Texas</option>*/} {/* <option>Texas</option>*/}
{/* <option>Scotland</option>*/} {/* <option>Scotland</option>*/}
{/* </select>*/} {/* </select>*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="form-group col-md-4">*/} {/* <div className="form-group col-md-4">*/}
{/* <label htmlFor="inputZip">Zip</label>*/} {/* <label htmlFor="inputZip">Zip</label>*/}
{/* <input type="text" className="form-control" id="inputZip"*/} {/* <input type="text" className="form-control" id="inputZip"*/}
{/* value="EC1A 1BB" />*/} {/* value="EC1A 1BB" />*/}
{/* </div>*/} {/* </div>*/}
{/*</div>*/} {/*</div>*/}
{/*<div className="form-group">*/} {/*<div className="form-group">*/}
{/* <div className="form-check">*/} {/* <div className="form-check">*/}
{/* <input className="form-check-input" type="checkbox"*/} {/* <input className="form-check-input" type="checkbox"*/}
{/* id="gridCheck" />*/} {/* id="gridCheck" />*/}
{/* <label className="form-check-label" htmlFor="gridCheck">*/} {/* <label className="form-check-label" htmlFor="gridCheck">*/}
{/* I agree to receive email notification.*/} {/* I agree to receive email notification.*/}
{/* </label>*/} {/* </label>*/}
{/* </div>*/} {/* </div>*/}
{/*</div>*/} {/*</div>*/}
<div style={{textAlign: "right"}}> <div style={{textAlign: "right"}}>
<button type="submit" className="btn btn-primary">Update Profile <button type="submit" className="btn btn-primary">Update Profile
</button> </button>
</div> </div>
</Form>
</form> );
}}
</Formik>
</div>
</div> </div>
</div> </div>
</div> <div className="col-xl-4 col-md-6 border-t col-12">
<div className="col-xl-4 col-md-6 border-t col-12"> <div className="page-account-form">
<div className="page-account-form"> <div className="form-titel border-bottom p-3">
<div className="form-titel border-bottom p-3"> <h5 className="mb-0 py-2">Your External Link</h5>
<h5 className="mb-0 py-2">Your External Link</h5> </div>
</div> <div className="p-4">
<div className="p-4"> <Formik
<form> initialValues={intialData?.external_links}
<div className="form-group"> validationSchema={linksValidationSchema}
<label htmlFor="fb">Facebook URL:</label> onSubmit={updateLinks}
<input type="text" className="form-control" id="fb" >
value="https://www.facebook.com/"/> {(props) => {
</div> return (
<div className="form-group"> <Form className=''>
<label htmlFor="tr">Twitter URL:</label> <div className="form-group">
<input type="text" className="form-control" id="tr" <label htmlFor="fb">Facebook URL: {(props.errors.facebook_url && props.touched.facebook_url) && <span className="text-danger">*</span>}</label>
value="https://twitter.com/"/> <input type="text" className="form-control" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
</div> </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"> <div className="form-group">
<label htmlFor="br">Blogger URL:</label> <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" id="br" <input type="text" className="form-control" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
value="https://www.blogger.com"/> </div>
</div>
<div className="form-group"> <div className="form-group">
<label htmlFor="go">Google+ URL:</label> <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" id="go" <input type="text" className="form-control" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
value="https://plus.google.com/discover"/> </div>
</div>
<div className="form-group"> <div className="form-group">
<label htmlFor="li">LinkedIn URL:</label> <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" id="li" <input type="text" className="form-control" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
value="https://in.linkedin.com/"/> </div>
</div>
<div className="form-group"> <div className="form-group">
<label htmlFor="we">Website URL:</label> <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" id="we" <input type="text" className="form-control" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
value="https://yourwebsite.com"/> </div>
</div> <div style={{textAlign: "right"}}>
<div style={{textAlign: "right"}}> <button type="submit" className="btn btn-primary">Update Links
<button type="submit" className="btn btn-primary">Update Links </button>
</button> </div>
</div> </Form>
);
</form> }}
</Formik>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -197,8 +276,7 @@ export default function Settings() {
</div> </div>
</div> </div>
</div> </div>
</div> }
</> </>
) )
} }
src/component/traffic/Traffic.jsx
+2 -1
View File
@@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import TrafficChart from "./TrafficChart";
export default function Traffic() { export default function Traffic() {
@@ -31,7 +32,7 @@ export default function Traffic() {
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="apexchart-wrapper"> <div className="apexchart-wrapper">
<div id="apexdemo2"></div> {/* <TrafficChart /> */}
</div> </div>
</div> </div>
</div> </div>
src/component/traffic/TrafficChart.jsx
+98
View File
@@ -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
src/services/queryKeys.js
+1
View File
@@ -10,6 +10,7 @@ const queryKeys = {
myProductConfig: ['myproduct_config'], myProductConfig: ['myproduct_config'],
productTemplateData: ['product_template_data'], productTemplateData: ['product_template_data'],
subscriptions: ['subscriptions'], subscriptions: ['subscriptions'],
profile_data: ['profile_data'],
dashboard: ['dashboard'], dashboard: ['dashboard'],
topBar: ['top-bar'], topBar: ['top-bar'],
src/services/services.js
+17 -1
View File
@@ -76,6 +76,14 @@ export const topBar = (reqData) => {
return postAuxEnd(`/panel/account/bar`, postData, false) 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 // FUNCTION TO GET PRODUCT BY ID
export const MyProductData = (reqData) => { export const MyProductData = (reqData) => {
let postData = { let postData = {
@@ -99,7 +107,7 @@ export const getCalendarEvents = (reqData) => {
return postAuxEnd(`/panel/account/calendar`, postData, false) return postAuxEnd(`/panel/account/calendar`, postData, false)
} }
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION // FUNCTION TO GET CONTACT DATA
export const contactData = (reqData) => { export const contactData = (reqData) => {
let postData = { let postData = {
...reqData, ...reqData,
@@ -107,6 +115,14 @@ export const contactData = (reqData) => {
return postAuxEnd(`/panel/contacts`, postData, false) 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 // FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
export const productsURL = (reqData) => { export const productsURL = (reqData) => {
let postData = { let postData = {