profile details endpoint added #83

Merged
ameye merged 1 commits from profile-settings into master 2025-09-08 20:45:22 +00:00
7 changed files with 365 additions and 171 deletions
+2 -2
View File
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";
import { useMutation, useQuery } from "@tanstack/react-query";
import { contactData } from "../../services/services";
import { commentsData } from "../../services/services";
import queryKeys from "../../services/queryKeys";
import getCustomTime from "../../utils/getCustomTime";
@@ -22,7 +22,7 @@ export default function Comments() {
const getContactData = useMutation({
mutationFn: (reqData) => {
return contactData(reqData);
return commentsData(reqData);
},
onError: (error) => {
console.log(error);
+1 -1
View File
@@ -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>
+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 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">Alice Williams</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>
}
</>
)
}
+2 -1
View File
@@ -1,5 +1,6 @@
import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import TrafficChart from "./TrafficChart";
export default function Traffic() {
@@ -31,7 +32,7 @@ export default function Traffic() {
</div>
<div className="card-body">
<div className="apexchart-wrapper">
<div id="apexdemo2"></div>
{/* <TrafficChart /> */}
</div>
</div>
</div>
+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
+1
View File
@@ -10,6 +10,7 @@ const queryKeys = {
myProductConfig: ['myproduct_config'],
productTemplateData: ['product_template_data'],
subscriptions: ['subscriptions'],
profile_data: ['profile_data'],
dashboard: ['dashboard'],
topBar: ['top-bar'],
+17 -1
View File
@@ -76,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 = {
@@ -99,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,
@@ -107,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 = {