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

profile details endpoint added #83

Merged
ameye merged 1 commits from profile-settings into master 2025-09-08 20:45:22 +00:00
Conversation 0 Commits 1 Files Changed 7
+365 -171
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
+124 -46
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,7 +70,21 @@ 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">
<div className="col-12">
<p className="text-mute">Loading...</p>
</div>
</div>
</>
: isError ?
<div className="row">
<div className="col-12">
<p className="text-danger">{error?.message}</p>
</div>
</div>
:
<div className="row account-contant"> <div className="row account-contant">
<div className="col-12"> <div className="col-12">
<div className="card card-statistics"> <div className="card card-statistics">
@@ -54,43 +126,44 @@ export default function Settings() {
<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">
<form> <Formik
initialValues={intialData?.personal_data}
validationSchema={profileValidationSchema}
onSubmit={updateProfile}
>
{(props) => {
return (
<Form className=''>
<div className="form-row"> <div className="form-row">
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="name1">First Name</label> <label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
<input type="text" className="form-control" id="name1" <input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
value="Alice"/>
</div> </div>
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="name1">Last 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="Williams"/>
</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">Account Name {(props.errors.account_name && props.touched.account_name) && <span className="text-danger">*</span>}</label>
<input type="text" className="form-control" id="name1" <input type="text" className="form-control" name="account_name" value={props.values?.account_name} 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="title1">Email</label>*/} {/* <label htmlFor="title1">Email</label>*/}
{/* <input type="text" className="form-control" id="title1"*/} {/* <input type="text" className="form-control" name="title1"*/}
{/* value="email@email.com" />*/} {/* value="email@email.com" />*/}
{/*</div>*/} {/*</div>*/}
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="phone1">Phone Number</label> <label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
<input type="text" className="form-control" id="phone1" <input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
value="(01) 97 563 15613"/>
</div> </div>
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="email1">Email</label> <label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
<input type="email" className="form-control" id="email1" <input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
value="alicewilliams@gmail.com"/>
</div> </div>
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="add1">Address</label> <label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
<input type="text" className="form-control" id="add1" <input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503"/>
</div> </div>
{/*<div className="form-group">*/} {/*<div className="form-group">*/}
{/* <label htmlFor="add2">Address 2</label>*/} {/* <label htmlFor="add2">Address 2</label>*/}
@@ -138,8 +211,10 @@ export default function Settings() {
<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>
@@ -149,47 +224,50 @@ export default function Settings() {
<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">
<form> <Formik
initialValues={intialData?.external_links}
validationSchema={linksValidationSchema}
onSubmit={updateLinks}
>
{(props) => {
return (
<Form className=''>
<div className="form-group"> <div className="form-group">
<label htmlFor="fb">Facebook URL:</label> <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" id="fb" <input type="text" className="form-control" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
value="https://www.facebook.com/"/>
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="tr">Twitter URL:</label> <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" id="tr" <input type="text" className="form-control" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
value="https://twitter.com/"/>
</div> </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>
@@ -198,7 +276,7 @@ export default function Settings() {
</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 = {