diff --git a/src/component/comments/Comments.js b/src/component/comments/Comments.js index 376a38e..c3448e3 100644 --- a/src/component/comments/Comments.js +++ b/src/component/comments/Comments.js @@ -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); diff --git a/src/component/home/DashPayments.jsx b/src/component/home/DashPayments.jsx index 8e44fd6..7412605 100644 --- a/src/component/home/DashPayments.jsx +++ b/src/component/home/DashPayments.jsx @@ -54,7 +54,7 @@ export default function DashPayments() { {/* # */} Date - Subscription + Description Amount diff --git a/src/component/settings/Settings.jsx b/src/component/settings/Settings.jsx index a535d2c..c79f5a5 100644 --- a/src/component/settings/Settings.jsx +++ b/src/component/settings/Settings.jsx @@ -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 ( <> @@ -12,184 +70,205 @@ export default function Settings() { {/*
Coming Soon
*/} {/**/} - -
+ {isFetching ? + <> +
+
+

Loading...

+
+
+ + : isError ? +
-
-
-
-
-
-
-
-
- {/*users-avatar*/} - user -
-
-

Alice Williams

-
-
+

{error?.message}

+
+
+ : +
+
+
+
+
+
+
+
+
+
+ {/*users-avatar*/} + user +
+
+

Alice Williams

+
+
+
-
-
-
- +
+
+ +
+ {/*
*/} + {/* */} + {/*
*/}
- {/*
*/} - {/* */} - {/*
*/}
-
-
-
-
-
Edit Your Personal Settings
-
-
-
-
-
- - -
-
- - -
-
- - -
- {/*
*/} - {/* */} - {/* */} - {/*
*/} -
- - -
-
- - -
-
-
- - -
- {/*
*/} - {/* */} - {/* */} - {/*
*/} +
+
+
+
Edit Your Personal Settings
+
+
+ + {(props) => { + return ( + +
+
+ + +
+
+ + +
+
+ + +
+ {/*
*/} + {/* */} + {/* */} + {/*
*/} +
+ + +
+
+ + +
+
+
+ + +
+ {/*
*/} + {/* */} + {/* */} + {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/*
*/} -
- -
- - + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/*
*/} +
+ +
+ + ); + }} + +
-
-
-
-
-
Your External Link
-
-
-
-
- - -
-
- - -
+
+
+
+
Your External Link
+
+
+ + {(props) => { + return ( + +
+ + +
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
-
- -
- - +
+ + +
+
+ +
+ + ); + }} + +
@@ -197,8 +276,7 @@ export default function Settings() {
-
- + } ) } \ No newline at end of file diff --git a/src/component/traffic/Traffic.jsx b/src/component/traffic/Traffic.jsx index 7d87964..2fe2949 100644 --- a/src/component/traffic/Traffic.jsx +++ b/src/component/traffic/Traffic.jsx @@ -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() {
-
+ {/* */}
diff --git a/src/component/traffic/TrafficChart.jsx b/src/component/traffic/TrafficChart.jsx new file mode 100644 index 0000000..18f0fff --- /dev/null +++ b/src/component/traffic/TrafficChart.jsx @@ -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 ( +
+
+ +
+
+
+ ); + } + + + + export default TrafficChart \ No newline at end of file diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index d5822ef..d7a0346 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -10,6 +10,7 @@ const queryKeys = { myProductConfig: ['myproduct_config'], productTemplateData: ['product_template_data'], subscriptions: ['subscriptions'], + profile_data: ['profile_data'], dashboard: ['dashboard'], topBar: ['top-bar'], diff --git a/src/services/services.js b/src/services/services.js index 82beb63..14e19a6 100644 --- a/src/services/services.js +++ b/src/services/services.js @@ -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 = {