https validator added

src/App.css

@@ -52,3 +52,10 @@ button{
 .accordion-button, .accordion-button:not(.collapsed) {
   background-color: transparent!important;
 }
+
+@media (min-width: 992px) {
+  .modal-50 {
+    min-width: 50%;
+    max-width: 50%;
+  }
+}

src/component/home/Products.jsx

@@ -41,22 +41,27 @@ export default function Products() {
                 </div>
                 :
                 <div className="row m-b-20">
-                    {products && products.map((product, index) => (
+                    {products && products.map((product, index) =>
-                        <div key={product.uid+index} className={`col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0`}>
+                    {
+                        // let productName = product?.name?.length > 14 ? product?.name?.substring(0, 14) + '...' : product?.name
+                        return (
+                            <div key={product.uid+index} className={`col-12 col-lg-6 mb-2 mb-xxl-0`}>
                                 <Link to={productPath(product?.product_id)}  >
                                     <div className={`d-flex align-items-center extraProductCard  ${product?.icon_style}`} style={{borderColor:'black', borderWidth: '2px'}} >
                                         <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                             <i className={`fa ${product?.product_icon} text-primary`}></i>
                                         </div>
-                                    <div className="report-details">
+                                        <div className="report-details overflow-hidden">
                                             <p><span style={{fontWeight: 'bolder', color: '#00557A'}}>{product?.status_text}</span></p>
-                                        <h4><span className='text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
+                                            <h4><span className='w-100 d-inline-block text-truncate' style={{paddingLeft: '10px'}}>{product?.name}</span></h4>
                                         </div>
                                     </div>
                                 </Link>
     
                             </div>
-                    ))}
+                        )
+                    } 
+                    )}
                 </div>
             }
                 <div className="apexchart-wrapper">

src/component/mymedia/MyMedia.js

@@ -117,7 +117,7 @@ console.log('imageLink', imageLink)
 
             <div className="row">
                 <div className="col-xl-6 col-xxl-4 m-b-30">
-                    <div className="card card-statistics h-50 mb-0 widget-support-list">
+                    <div className="card card-statistics mb-0 widget-support-list">
                         <div className="card-header">
                             <div className="card-heading">
                                 <h4 className="card-title">Upload File</h4>
@@ -141,7 +141,8 @@ console.log('imageLink', imageLink)
                                             <div style={{width: '100%', textAlign: 'right'}}>
                                                 <button
                                                     className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0"
-                                                    onClick={handleUpload} disabled={!selectedFile || uploadFileMutation.isPending || uploadFileMutation.isSuccess}>
+                                                    onClick={handleUpload}
+                                                    disabled={!selectedFile || uploadFileMutation.isPending || uploadFileMutation.isSuccess}>
                                                     Upload
                                                 </button>
                                             </div>
@@ -180,15 +181,18 @@ console.log('imageLink', imageLink)
                                     <p className='text-danger'>{error?.message}</p>
                                 </div>
                                 :
-                            <div className="card-body scrollbar scroll_dark" style={{minHeight: '400px', maxHeight: '500px', overflowY: 'auto'}}>
+                                <div className="card-body scrollbar scroll_dark"
+                                     style={{minHeight: '400px', maxHeight: '500px', overflowY: 'auto'}}>
                                     {mediaFileList && mediaFileList?.file_list && mediaFileList?.file_list.map((item, index) => {
                                         const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
                                         const avtarImage =
                                             item?.file_type === undefined
                                                 ? "icons/01.png"
                                                 : "icons/" + item.file_type + ".png";
-                                    return (<div key={index} className={`widget-text ${imageLink == file_url && 'bg-light'}`}>
+                                        return (<div key={index}
-                                        <div className={`media align-items-center`} onClick={()=>setImageLink(file_url)} style={{cursor: 'pointer'}}>
+                                                     className={`widget-text ${imageLink == file_url && 'bg-light'}`}>
+                                            <div className={`media align-items-center`}
+                                                 onClick={() => setImageLink(file_url)} style={{cursor: 'pointer'}}>
                                                 <img src={getImage(avtarImage)}
                                                     // src={`assets/img/file-icon/${item.file_type}.png`}
                                                      className="img-fluid"
@@ -202,7 +206,8 @@ console.log('imageLink', imageLink)
                                                        className="btn btn-icon btn-round btn-outline-success">
                                                         <i className="ti ti-download"></i>
                                                     </a>
-                                                <a href="" className="btn btn-icon btn-round btn-outline-danger ml-2">
+                                                    <a href=""
+                                                       className="btn btn-icon btn-round btn-outline-danger ml-2">
                                                         <i className="ti ti-close"></i>
                                                     </a>
                                                 </div>
@@ -221,7 +226,8 @@ console.log('imageLink', imageLink)
                                 <h4 className="card-title">Preview</h4>
                             </div>
                         </div>
-                        <div className="card-body d-flex justify-content-center align-items-center pl-0 pr-0 scrollbar scroll_dark">
+                        <div
+                            className="card-body d-flex justify-content-center align-items-center pl-0 pr-0 scrollbar scroll_dark">
                             {imageLink &&
                                 <img className="w-100 h-auto" src={imageLink} alt='file-image'/>
                             }

src/component/product/ProductActive.jsx

@@ -66,7 +66,7 @@ export default function ProductActive({productData}){
                                         </button>
                                     </div>
                                 </div>
-                                <div className="card-body" style={{minHeight: '680px'}}>
+                                <div className="card-body" style={{minHeight: '600px', maxHeight: '600px'}}>
                                     <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                 </div>
                                 <div className="p-4 ml-auto">

src/component/product/settingsTab/Settings.jsx

@@ -5,6 +5,7 @@ import queryKeys from '../../../services/queryKeys';
 import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
 import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
+import TemplateConfigure from './TemplateConfigure';
 
 const Settings = memo(({productData}) => {
 
@@ -24,7 +25,7 @@ const Settings = memo(({productData}) => {
     })
     const settingsConfig = configData?.data?.settings_items
     // console.log('CONFIG DATA...', settingsConfig)
-
+    // console.log('configData', configData?.data?.subscription_template)
 
     const [fieldsChanged, setFieldsChanged] = useState(false)
 
@@ -81,12 +82,12 @@ const Settings = memo(({productData}) => {
                 </div>
             </div>
             :
-            <div className="tab tab-vertical">
+            <div className="d-flex">
-                <ul className="nav nav-tabs" role="tablist">
+                <ul className="bg-body-secondary flex-column nav" role="tablist" style={{width: '25%', minHeight: '670px', maxHeight: '670px'}}>
                     <>
                         {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <li key={key} className="nav-item">
-                            <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
+                            <p className={`text-black nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show bg-primary text-white'}`}
                                 id={key} 
                                 // data-bs-toggle="pill"
                                 // data-bs-target={`#${value.controls}`}
@@ -97,12 +98,27 @@ const Settings = memo(({productData}) => {
                                 onClick={()=>handleChangeTab(value.controls)}
                             >
                                 {value.title}
-                            </a>
+                            </p>
                             </li>
                         ))}
+                        {configData?.data?.subscription_template &&
+                            <li className="mt-auto nav-item">
+                                <p className={`text-black nav-link ${(activeTab == 'config_temp') && 'active show bg-primary text-white'}`}
+                                    // data-bs-toggle="pill"
+                                    // data-bs-target={`#${value.controls}`}
+                                    type="button" 
+                                    // role="tab"
+                                    // aria-controls={value.controls}
+                                    // aria-selected="true"
+                                    onClick={()=>handleChangeTab('config_temp')}
+                                >
+                                    Configure Template
+                                </p>
+                            </li>
+                        }
                     </>
                 </ul>
-                <div className="tab-content">
+                <div className="p-3 tab-content" style={{width: '75%'}}>
                     <>
                         {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
@@ -112,6 +128,10 @@ const Settings = memo(({productData}) => {
                                 <GeneralTab tabKey={key} name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
                             </div>
                         ))}
+                        <div className={`tab-pane fade  ${(activeTab == 'config_temp') && 'active show'}`}
+                        >
+                            <TemplateConfigure productData={productData} />
+                        </div>
                     </>
                 </div>
             </div>

src/component/product/settingsTab/TemplateConfigure.jsx

@@ -0,0 +1,130 @@
+import React, {memo, useState} from 'react'
+import getImage from "../../../utils/getImage";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {getTemplateConfig} from '../../../services/services';
+import {Link} from "react-router-dom";
+import siteLinks from "../../../links/siteLinks";
+import UploadModal from './UploadModal';
+
+const TemplateConfigure = ({productData}) => {
+
+    const [selectedSectionDetails, setSelectedSectionDetails] = useState({})
+
+    // /panel/myproduct/template-config
+
+    const queryClient = useQueryClient()
+
+    const {data: templateData, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.myTemplateConfig,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                product_id: productData?.product_id
+            }
+            return getTemplateConfig(reqData)
+        },
+        staleTime: 0
+    })
+
+    const templateResponse = templateData?.data
+    const templateImages = templateResponse?.template_images?.data;
+    // debugger;
+    console.log("templateResponse", templateResponse);
+    // const currentColorUID = templateResponse?.current_colorstyle_uid
+    // const color_styles = templateResponse?.color_styles
+    // const custom_template_name = templateResponse?.custom_template_name
+
+    return <>
+        <div className="card card-statistics">
+            {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="card-header">
+                            <div className="card-heading">
+                                <h4 className="card-title"
+                                    style={{textTransform: 'none'}}>{templateResponse?.template_name}</h4>
+                            </div>
+                        </div>
+
+
+                        <div>
+                            <div className="col-12">
+                                <div>
+                                    <div>
+                                        <div>
+                                            <h4>Image List</h4>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <ul className="list-unstyled">
+                                            {templateImages && templateImages.map(
+                                                (item) => {
+                                                    const currImage = item?.default_val;
+                                                    return (
+                                                        <li className="media">
+                                                            <div style={{
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                padding: '5px',
+                                                                backgroundColor: 'aliceblue',
+                                                                margin: '2px',
+                                                                maxHeight: '150px'
+                                                            }}>
+                                                                <div className='d-flex justify-content-center align-items-center' style={{padding: '6px', width: '120px', height: '100px'}}>
+                                                                    <img className="mb-xxs-0 img-fluid"
+                                                                    style={{height: 'auto', maxHeight: '100px'}}
+                                                                         src={currImage} alt="image"/>
+                                                                </div>
+
+                                                                <div className="media-body" style={{padding: '2px'}}>
+                                                                    <div style={{
+                                                                        display: 'flex',
+                                                                        flexDirection: 'column'
+                                                                    }}>
+                                                                        <div style={{textAlign: 'right',width: '100%'}}></div>
+                                                                        {/* [Change Image] */}
+                                                                        <label onClick={()=>setSelectedSectionDetails(item)} className='w-100 text-end' data-bs-toggle="modal" data-bs-target="#verticalCenter" style={{cursor: 'pointer'}}>[Change Image]</label>
+                                                                        {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
+                                                                        <div>
+                                                                            <h5 className="mt-0 mb-1">{item?.name}</h5>
+                                                                            {item?.description}
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+
+                                                        </li>
+                                                    )
+                                                }
+                                            )
+                                            }
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </>
+
+
+            } </div>
+            <UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} />
+    </>
+}
+
+export default TemplateConfigure

src/component/product/settingsTab/UploadModal.jsx

@@ -0,0 +1,168 @@
+import React, { useRef, useState } from 'react'
+import { Modal } from "bootstrap";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import queryKeys from '../../../services/queryKeys';
+import {getMediaFileList, templateMediaSet} from '../../../services/services';
+
+export default function UploadModal({productId, selectedSectionDetails}) {
+
+    const queryClient = useQueryClient()
+    
+    const [selectedFile, setSelectedFile] = useState('')
+
+    const handleSelectedFile = (file_uid) => {
+        // if(selectedFile.length && selectedFile.includes(file_uid)){
+        //     let indexOfItem = selectedFile.indexOf(file_uid)
+        //     let oldFiles = [...selectedFile]
+        //     oldFiles.splice(indexOfItem, 1)
+        //     setSelectedFile(oldFiles)
+        // }else{
+        //     setSelectedFile(prev => [...prev, file_uid])
+        // }
+        setSelectedFile(file_uid)
+    }
+
+    const modalRef = useRef(null)
+
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
+    const changeTemplateMediaSet = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.file_uid){
+                throw({message: 'Please select a file first!'})
+            }
+            return templateMediaSet(fields)
+            },
+        onSuccess: (res) => {
+            // console.log('res', res.data)
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription})
+            }
+            setSelectedFile('')
+            dismissModal() // to close modal
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.myTemplateConfig],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                changeTemplateMediaSet.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpload = () => {
+        let reqData = {
+            token: localStorage.getItem("token"), // USER TOKEN
+            uid: localStorage.getItem("uid"), // USER UID
+            product_id: productId,
+            file_uid: selectedFile,
+            image_id: selectedSectionDetails?.id
+        };
+        // console.log('reqData', reqData)
+        changeTemplateMediaSet.mutate(reqData)
+    }
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.my_files,
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid') // USER UID
+            }
+            return getMediaFileList(reqData)
+        }
+    })
+
+    const mediaFileList = data?.data
+    // console.log('mediaFileList', mediaFileList) //file_list
+
+  return (
+    <>
+        {/* Vertical Center Modal */}
+        <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="false">
+            <div className="modal-50 modal-dialog modal-dialog-centered modal-50" role="document">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h5 className="modal-title" style={{fontSize: '18px'}} id="verticalCenterTitle">Select New Picture</h5>
+                        <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div className="modal-body">
+                        {isFetching ? 
+                            <>
+                                <div className="col-12">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </>
+                            : isError ?
+                            <div className="col-12">
+                                <p className='text-danger'>{error?.message}</p>
+                            </div>
+                            :
+                            <div className='row g-5 justify-content-center'>
+                                {mediaFileList?.file_list?.length ?
+                                <>
+                                {mediaFileList?.file_list?.map(item => {
+                                    const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
+                                    return(
+                                        <div onClick={()=>handleSelectedFile(item?.file_uid)} className={`p-3 text-center col-4`} style={{cursor: 'pointer'}}>
+                                            <div className={`p-3 ${(selectedFile == item?.file_uid) && 'bg-light'}`} style={{Height: '250px'}}>
+                                                <img key={item?.file_uid} className="img-fluid" style={{}} src={file_url} alt='file-image' />
+                                            </div>
+                                        </div>
+                                    )
+                                    }) 
+                                }
+                                </>
+                                :
+                                <p>No File(s) found!</p>
+                                }
+                            </div>
+                        }
+                        {changeTemplateMediaSet.error &&
+                        <>
+                            <div className="col-12">
+                            <p className='text-danger'>{changeTemplateMediaSet.error.message}</p>
+                        </div>
+                        </>
+                        }
+                        {changeTemplateMediaSet.isSuccess &&
+                        <>
+                            <div className="col-12">
+                                <p className='text-success'>{'subscription is successful'}</p>
+                            </div>
+                        </>
+                        }
+
+                    </div>
+                    <div className="modal-footer">
+                        <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                        {selectedFile &&
+                            <button type="button" className="btn btn-primary" disabled={changeTemplateMediaSet?.isPending || changeTemplateMediaSet?.isSuccess} onClick={handleUpload}>{changeTemplateMediaSet?.isPending ? 'Applying...' : changeTemplateMediaSet?.isSuccess ? 'Applied' : 'Apply'}</button>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+        {/* END of Vertical Center Modal */}
+    </>
+  )
+}

src/component/reports/PaymentReportTable.jsx

@@ -1,7 +1,30 @@
-import React from "react";
+import React, {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {getPaymentReports} from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function PaymentReportTable() {
-    return (<>
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.payment_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getPaymentReports(reqData)
+        },
+        staleTime: 0
+    })
+
+    // console.log('DATA', data?.data)
+    const paymentReportData = data?.data?.payment || []
+
+    return (
+        <>
             <div className="row">
                 <div className="col-md-12 m-b-30">
                     <div className="d-block d-sm-flex flex-nowrap align-items-center">
@@ -12,6 +35,17 @@ export default function PaymentReportTable() {
                 </div>
             </div>
             <div className="row">
+                {isFetching ?
+                    <>
+                        <div className="col-12">
+                            <p className='text-mute'>Loading...</p>
+                        </div>
+                    </>
+                    : isError ?
+                        <div className="col-12">
+                            <p className='text-danger'>{error?.message}</p>
+                        </div>
+                        :
                         <div className="col-lg-12">
                             <div className="card card-statistics">
                                 <div className="card-body">
@@ -19,144 +53,28 @@ export default function PaymentReportTable() {
                                         <table id="export-table" className="table table-bordered">
                                             <thead className="thead-light">
                                             <tr>
+                                                <th>Added</th>
                                                 <th>Name</th>
-                                    <th>Position</th>
+                                                <th>Amount</th>
-                                    <th>Office</th>
+                                                <th>Status</th>
-                                    <th>Age</th>
-                                    <th>Start date</th>
-                                    <th>Salary</th>
                                             </tr>
                                             </thead>
                                             <tbody>
-                                <tr>
+                                                {paymentReportData.length > 0 ? paymentReportData.map((item, index) => {
-                                    <td>Tiger Nixon</td>
+                                                    return (
-                                    <td>System Architect</td>
+                                                        <tr key={index}>
-                                    <td>Edinburgh</td>
+                                                            <td>{item?.added}</td>
-                                    <td>61</td>
+                                                            <td>{item?.option_name}</td>
-                                    <td>2011/04/25</td>
+                                                            <td>{item?.currency}{item?.amount}</td>
-                                    <td>$320,800</td>
+                                                            <td>{item?.status}</td>
                                                         </tr>
+                                                    )
+                                                })
+                                                :
                                                 <tr>
-                                    <td>Garrett Winters</td>
+                                                    <td colSpan={4} className='text-center'>No data found</td>
-                                    <td>Accountant</td>
-                                    <td>Tokyo</td>
-                                    <td>63</td>
-                                    <td>2011/07/25</td>
-                                    <td>$170,750</td>
                                                 </tr>
-                                <tr>
+                                                }
-                                    <td>Ashton Cox</td>
-                                    <td>Junior Technical Author</td>
-                                    <td>San Francisco</td>
-                                    <td>66</td>
-                                    <td>2009/01/12</td>
-                                    <td>$86,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Cedric Kelly</td>
-                                    <td>Senior Javascript Developer</td>
-                                    <td>Edinburgh</td>
-                                    <td>22</td>
-                                    <td>2012/03/29</td>
-                                    <td>$433,060</td>
-                                </tr>
-                                <tr>
-                                    <td>Airi Satou</td>
-                                    <td>Accountant</td>
-                                    <td>Tokyo</td>
-                                    <td>33</td>
-                                    <td>2008/11/28</td>
-                                    <td>$162,700</td>
-                                </tr>
-                                <tr>
-                                    <td>Brielle Williamson</td>
-                                    <td>Integration Specialist</td>
-                                    <td>New York</td>
-                                    <td>61</td>
-                                    <td>2012/12/02</td>
-                                    <td>$372,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Herrod Chandler</td>
-                                    <td>Sales Assistant</td>
-                                    <td>San Francisco</td>
-                                    <td>59</td>
-                                    <td>2012/08/06</td>
-                                    <td>$137,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Rhona Davidson</td>
-                                    <td>Integration Specialist</td>
-                                    <td>Tokyo</td>
-                                    <td>55</td>
-                                    <td>2010/10/14</td>
-                                    <td>$327,900</td>
-                                </tr>
-                                <tr>
-                                    <td>Colleen Hurst</td>
-                                    <td>Javascript Developer</td>
-                                    <td>San Francisco</td>
-                                    <td>39</td>
-                                    <td>2009/09/15</td>
-                                    <td>$205,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Sonya Frost</td>
-                                    <td>Software Engineer</td>
-                                    <td>Edinburgh</td>
-                                    <td>23</td>
-                                    <td>2008/12/13</td>
-                                    <td>$103,600</td>
-                                </tr>
-                                <tr>
-                                    <td>Jena Gaines</td>
-                                    <td>Office Manager</td>
-                                    <td>London</td>
-                                    <td>30</td>
-                                    <td>2008/12/19</td>
-                                    <td>$90,560</td>
-                                </tr>
-                                <tr>
-                                    <td>Quinn Flynn</td>
-                                    <td>Support Lead</td>
-                                    <td>Edinburgh</td>
-                                    <td>22</td>
-                                    <td>2013/03/03</td>
-                                    <td>$342,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Charde Marshall</td>
-                                    <td>Regional Director</td>
-                                    <td>San Francisco</td>
-                                    <td>36</td>
-                                    <td>2008/10/16</td>
-                                    <td>$470,600</td>
-                                </tr>
-                                <tr>
-                                    <td>Haley Kennedy</td>
-                                    <td>Senior Marketing Designer</td>
-                                    <td>London</td>
-                                    <td>43</td>
-                                    <td>2012/12/18</td>
-                                    <td>$313,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Tatyana Fitzpatrick</td>
-                                    <td>Regional Director</td>
-                                    <td>London</td>
-                                    <td>19</td>
-                                    <td>2010/03/17</td>
-                                    <td>$385,750</td>
-                                </tr>
-                                <tr>
-                                    <td>Michael Silva</td>
-                                    <td>Marketing Designer</td>
-                                    <td>London</td>
-                                    <td>66</td>
-                                    <td>2012/11/27</td>
-                                    <td>$198,500</td>
-                                </tr>
-
                                             </tbody>
 
                                         </table>
@@ -164,7 +82,8 @@ export default function PaymentReportTable() {
                                 </div>
                             </div>
                         </div>
-        </div>
+                }
-
+            </div>
-    </>)
+        </>
+    )
 }

src/component/reports/ProductReportTable.jsx

@@ -1,7 +1,30 @@
-import React from "react";
+import React, {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {getProductReports} from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function ProductReportTable() {
-    return (<>
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.product_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getProductReports(reqData)
+        },
+        staleTime: 0
+    })
+
+    // console.log('DATA', data?.data)
+    const productReportData = data?.data?.product || []
+
+    return (
+        <>
 
             <div className="row">
                 <div className="col-md-12 m-b-30">
@@ -14,6 +37,17 @@ export default function ProductReportTable() {
             </div>
 
             <div className="row">
+                {isFetching ?
+                    <>
+                        <div className="col-12">
+                            <p className='text-mute'>Loading...</p>
+                        </div>
+                    </>
+                    : isError ?
+                        <div className="col-12">
+                            <p className='text-danger'>{error?.message}</p>
+                        </div>
+                        :
                         <div className="col-lg-12">
                             <div className="card card-statistics">
                                 <div className="card-body">
@@ -21,152 +55,36 @@ export default function ProductReportTable() {
                                         <table id="export-table" className="table table-bordered">
                                             <thead className="thead-light">
                                             <tr>
+                                                <th>ID</th>
+                                                <th>Added</th>
                                                 <th>Name</th>
-                                    <th>Position</th>
+                                                <th>Status</th>
-                                    <th>Office</th>
-                                    <th>Age</th>
-                                    <th>Start date</th>
-                                    <th>Salary</th>
                                             </tr>
                                             </thead>
                                             <tbody>
-                                <tr>
+                                                {productReportData.length > 0 ? productReportData.map((item, index) => {
-                                    <td>Tiger Nixon</td>
+                                                    return (
-                                    <td>System Architect</td>
+                                                        <tr key={index}>
-                                    <td>Edinburgh</td>
+                                                            <td>{item?.product_id}</td>
-                                    <td>61</td>
+                                                            <td>{item?.added}</td>
-                                    <td>2011/04/25</td>
+                                                            <td>{item?.product_name}</td>
-                                    <td>$320,800</td>
+                                                            <td>{item?.status}</td>
                                                         </tr>
+                                                    )
+                                                })
+                                                :
                                                 <tr>
-                                    <td>Garrett Winters</td>
+                                                    <td colSpan={4} className='text-center'>No data found</td>
-                                    <td>Accountant</td>
-                                    <td>Tokyo</td>
-                                    <td>63</td>
-                                    <td>2011/07/25</td>
-                                    <td>$170,750</td>
                                                 </tr>
-                                <tr>
+                                                }
-                                    <td>Ashton Cox</td>
-                                    <td>Junior Technical Author</td>
-                                    <td>San Francisco</td>
-                                    <td>66</td>
-                                    <td>2009/01/12</td>
-                                    <td>$86,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Cedric Kelly</td>
-                                    <td>Senior Javascript Developer</td>
-                                    <td>Edinburgh</td>
-                                    <td>22</td>
-                                    <td>2012/03/29</td>
-                                    <td>$433,060</td>
-                                </tr>
-                                <tr>
-                                    <td>Airi Satou</td>
-                                    <td>Accountant</td>
-                                    <td>Tokyo</td>
-                                    <td>33</td>
-                                    <td>2008/11/28</td>
-                                    <td>$162,700</td>
-                                </tr>
-                                <tr>
-                                    <td>Brielle Williamson</td>
-                                    <td>Integration Specialist</td>
-                                    <td>New York</td>
-                                    <td>61</td>
-                                    <td>2012/12/02</td>
-                                    <td>$372,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Herrod Chandler</td>
-                                    <td>Sales Assistant</td>
-                                    <td>San Francisco</td>
-                                    <td>59</td>
-                                    <td>2012/08/06</td>
-                                    <td>$137,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Rhona Davidson</td>
-                                    <td>Integration Specialist</td>
-                                    <td>Tokyo</td>
-                                    <td>55</td>
-                                    <td>2010/10/14</td>
-                                    <td>$327,900</td>
-                                </tr>
-                                <tr>
-                                    <td>Colleen Hurst</td>
-                                    <td>Javascript Developer</td>
-                                    <td>San Francisco</td>
-                                    <td>39</td>
-                                    <td>2009/09/15</td>
-                                    <td>$205,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Sonya Frost</td>
-                                    <td>Software Engineer</td>
-                                    <td>Edinburgh</td>
-                                    <td>23</td>
-                                    <td>2008/12/13</td>
-                                    <td>$103,600</td>
-                                </tr>
-                                <tr>
-                                    <td>Jena Gaines</td>
-                                    <td>Office Manager</td>
-                                    <td>London</td>
-                                    <td>30</td>
-                                    <td>2008/12/19</td>
-                                    <td>$90,560</td>
-                                </tr>
-                                <tr>
-                                    <td>Quinn Flynn</td>
-                                    <td>Support Lead</td>
-                                    <td>Edinburgh</td>
-                                    <td>22</td>
-                                    <td>2013/03/03</td>
-                                    <td>$342,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Charde Marshall</td>
-                                    <td>Regional Director</td>
-                                    <td>San Francisco</td>
-                                    <td>36</td>
-                                    <td>2008/10/16</td>
-                                    <td>$470,600</td>
-                                </tr>
-                                <tr>
-                                    <td>Haley Kennedy</td>
-                                    <td>Senior Marketing Designer</td>
-                                    <td>London</td>
-                                    <td>43</td>
-                                    <td>2012/12/18</td>
-                                    <td>$313,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Tatyana Fitzpatrick</td>
-                                    <td>Regional Director</td>
-                                    <td>London</td>
-                                    <td>19</td>
-                                    <td>2010/03/17</td>
-                                    <td>$385,750</td>
-                                </tr>
-                                <tr>
-                                    <td>Michael Silva</td>
-                                    <td>Marketing Designer</td>
-                                    <td>London</td>
-                                    <td>66</td>
-                                    <td>2012/11/27</td>
-                                    <td>$198,500</td>
-                                </tr>
-
                                             </tbody>
-
                                         </table>
                                     </div>
                                 </div>
                             </div>
                         </div>
-        </div>
+                }
-
+            </div>
-    </>)
+        </>
+    )
 }

src/component/reports/Reports.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import {useQuery} from "@tanstack/react-query";
 import queryKeys from "../../services/queryKeys";
@@ -11,6 +11,8 @@ import SystemReportTable from "./SystemReportTable";
 
 export default function Reports() {
 
+    const [activeTab, setActiveTab] = useState('payment')
+
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.topics,
         queryFn: () => {
@@ -36,9 +38,20 @@ export default function Reports() {
         <>
             <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']}/>
             <div className="row">
+            {isFetching ? 
+            <>
+                <div className="col-12">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </>
+            : isError ?
+            <div className="col-12">
+                <p className='text-danger'>{error?.message}</p>
+            </div>
+            :
             <div>
                 <div>
-                        <div className="card card-statistics" style={{minHeight: '550px'}}>
+                    <div className="card card-statistics" style={{minHeight: '500px'}}>
                         {/*<div className="card-header">*/}
                         {/*    <div className="card-heading">*/}
                         {/*        <h4 className="card-title"> Tab vertical </h4>*/}
@@ -51,7 +64,7 @@ export default function Reports() {
                                 <ul className="nav nav-tabs" id="myTab" role="tablist">
                                     {sortedReportTopicList && sortedReportTopicList.map((item, index) => {
                                         return (
-                                                <li key={index} className="nav-item" role="presentation">
+                                            <li key={index} className="nav-item" role="presentation" onClick={() => setActiveTab(item?.url)}>
                                                 <a className={`nav-link ${index == 0 && 'active'}`} id={`tab-${item?.url}`} href="#" data-bs-toggle="tab" data-bs-target={`#content-${item?.url}`} type="button" role="tab">
                                                     {item?.name}
                                                 </a>
@@ -61,14 +74,18 @@ export default function Reports() {
                                 </ul>
 
                                 {/* <!-- Tab Content --> */}
-                                    <div className="tab-content">
+                                {/* <div className="tab-content">
                                     {sortedReportTopicList && sortedReportTopicList.map((item, index) => {
                                         return (
-                                                <div key={index} className={`tab-pane fade show ${index == 0 && 'active'}`} id={`content-${item?.url}`} role="tabpanel">
+                                            <div key={index} className={`tab-pane fade show ${index == 0 && 'active'}`} id={`content-${item?.url}`} role="tabpanel" style={{minHeight: '400px'}}>
                                                 {renderedTable[item?.url]}
                                             </div>
                                         )
                                     })}
+                                </div> */}
+                                <div className="tab-content">
+                                    <div className={`tab-pane fade show active`} style={{minHeight: '400px'}}>
+                                        {renderedTable[activeTab]}
                                     </div>
                                 </div>
                             </div>
@@ -76,6 +93,8 @@ export default function Reports() {
                     </div>
                 </div>
             </div>
+            }
+            </div>
         </>
     )
 }

src/component/reports/SystemReportTable.jsx

@@ -1,7 +1,30 @@
-import React from "react";
+import React, {useState} from "react";
+import {useQuery} from "@tanstack/react-query";
+import {getSystemReports} from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function SystemReportTable() {
-    return (<>
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.system_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getSystemReports(reqData)
+        },
+        staleTime: 0
+    })
+
+    // console.log('DATA', data?.data)
+    const systemReportData = data?.data?.system || []
+
+    return (
+        <>
 
             <div className="row">
                 <div className="col-md-12 m-b-30">
@@ -14,6 +37,17 @@ export default function SystemReportTable() {
             </div>
 
             <div className="row">
+                {isFetching ?
+                    <>
+                        <div className="col-12">
+                            <p className='text-mute'>Loading...</p>
+                        </div>
+                    </>
+                    : isError ?
+                        <div className="col-12">
+                            <p className='text-danger'>{error?.message}</p>
+                        </div>
+                        :
                         <div className="col-lg-12">
                             <div className="card card-statistics">
                                 <div className="card-body">
@@ -21,152 +55,36 @@ export default function SystemReportTable() {
                                         <table id="export-table" className="table table-bordered">
                                             <thead className="thead-light">
                                             <tr>
-                                    <th>Name</th>
+                                                <th>Added</th>
-                                    <th>Position</th>
+                                                <th>Action Name</th>
-                                    <th>Office</th>
+                                                <th>Description</th>
-                                    <th>Age</th>
+                                                <th>Updated</th>
-                                    <th>Start date</th>
-                                    <th>Salary</th>
                                             </tr>
                                             </thead>
                                             <tbody>
-                                <tr>
+                                                {systemReportData.length > 0 ? systemReportData.map((item, index) => {
-                                    <td>Tiger Nixon</td>
+                                                    return (
-                                    <td>System Architect</td>
+                                                        <tr key={index}>
-                                    <td>Edinburgh</td>
+                                                            <td>{item?.added}</td>
-                                    <td>61</td>
+                                                            <td>{item?.action_name}</td>
-                                    <td>2011/04/25</td>
+                                                            <td>{item?.status_description}</td>
-                                    <td>$320,800</td>
+                                                            <td>{item?.updated}</td>
                                                         </tr>
+                                                    )
+                                                })
+                                                :
                                                 <tr>
-                                    <td>Garrett Winters</td>
+                                                    <td colSpan={4} className='text-center'>No data found</td>
-                                    <td>Accountant</td>
-                                    <td>Tokyo</td>
-                                    <td>63</td>
-                                    <td>2011/07/25</td>
-                                    <td>$170,750</td>
                                                 </tr>
-                                <tr>
+                                                }
-                                    <td>Ashton Cox</td>
-                                    <td>Junior Technical Author</td>
-                                    <td>San Francisco</td>
-                                    <td>66</td>
-                                    <td>2009/01/12</td>
-                                    <td>$86,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Cedric Kelly</td>
-                                    <td>Senior Javascript Developer</td>
-                                    <td>Edinburgh</td>
-                                    <td>22</td>
-                                    <td>2012/03/29</td>
-                                    <td>$433,060</td>
-                                </tr>
-                                <tr>
-                                    <td>Airi Satou</td>
-                                    <td>Accountant</td>
-                                    <td>Tokyo</td>
-                                    <td>33</td>
-                                    <td>2008/11/28</td>
-                                    <td>$162,700</td>
-                                </tr>
-                                <tr>
-                                    <td>Brielle Williamson</td>
-                                    <td>Integration Specialist</td>
-                                    <td>New York</td>
-                                    <td>61</td>
-                                    <td>2012/12/02</td>
-                                    <td>$372,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Herrod Chandler</td>
-                                    <td>Sales Assistant</td>
-                                    <td>San Francisco</td>
-                                    <td>59</td>
-                                    <td>2012/08/06</td>
-                                    <td>$137,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Rhona Davidson</td>
-                                    <td>Integration Specialist</td>
-                                    <td>Tokyo</td>
-                                    <td>55</td>
-                                    <td>2010/10/14</td>
-                                    <td>$327,900</td>
-                                </tr>
-                                <tr>
-                                    <td>Colleen Hurst</td>
-                                    <td>Javascript Developer</td>
-                                    <td>San Francisco</td>
-                                    <td>39</td>
-                                    <td>2009/09/15</td>
-                                    <td>$205,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Sonya Frost</td>
-                                    <td>Software Engineer</td>
-                                    <td>Edinburgh</td>
-                                    <td>23</td>
-                                    <td>2008/12/13</td>
-                                    <td>$103,600</td>
-                                </tr>
-                                <tr>
-                                    <td>Jena Gaines</td>
-                                    <td>Office Manager</td>
-                                    <td>London</td>
-                                    <td>30</td>
-                                    <td>2008/12/19</td>
-                                    <td>$90,560</td>
-                                </tr>
-                                <tr>
-                                    <td>Quinn Flynn</td>
-                                    <td>Support Lead</td>
-                                    <td>Edinburgh</td>
-                                    <td>22</td>
-                                    <td>2013/03/03</td>
-                                    <td>$342,000</td>
-                                </tr>
-                                <tr>
-                                    <td>Charde Marshall</td>
-                                    <td>Regional Director</td>
-                                    <td>San Francisco</td>
-                                    <td>36</td>
-                                    <td>2008/10/16</td>
-                                    <td>$470,600</td>
-                                </tr>
-                                <tr>
-                                    <td>Haley Kennedy</td>
-                                    <td>Senior Marketing Designer</td>
-                                    <td>London</td>
-                                    <td>43</td>
-                                    <td>2012/12/18</td>
-                                    <td>$313,500</td>
-                                </tr>
-                                <tr>
-                                    <td>Tatyana Fitzpatrick</td>
-                                    <td>Regional Director</td>
-                                    <td>London</td>
-                                    <td>19</td>
-                                    <td>2010/03/17</td>
-                                    <td>$385,750</td>
-                                </tr>
-                                <tr>
-                                    <td>Michael Silva</td>
-                                    <td>Marketing Designer</td>
-                                    <td>London</td>
-                                    <td>66</td>
-                                    <td>2012/11/27</td>
-                                    <td>$198,500</td>
-                                </tr>
-
                                             </tbody>
-
                                         </table>
                                     </div>
                                 </div>
                             </div>
                         </div>
-        </div>
+                }
-
+            </div>
-    </>)
+        </>
+    )
 }

src/component/settings/LinksForm.jsx

@@ -8,12 +8,12 @@ import queryKeys from '../../services/queryKeys';
 
 
 const linksValidationSchema = Yup.object().shape({
-    // facebook_url: Yup.string().required("facebook is required"),
+    facebook_url: Yup.string().matches(/^https:\/\/.+/,"URL must start with https://"),
-    // twitter_url: Yup.string().required("twitter is required"),
+    twitter_url: Yup.string().matches(/^https:\/\/.+/,"URL must start with https://"),
-    // blogger_url: Yup.string().required("blog is required"),
+    blogger_url: Yup.string().matches(/^https:\/\/.+/,"URL must start with https://"),
-    // google_url: Yup.string().required("google is required"),
+    google_url: Yup.string().matches(/^https:\/\/.+/,"URL must start with https://"),
-    // linked_url: Yup.string().required("linkedin is required"),
+    linked_url: Yup.string().matches(/^https:\/\/.+/,"URL must start with https://"),
-    // website_url: Yup.string().required("website is required"),
+    website_url: Yup.string().matches(/^https:\/\/.+/,"URL must start with https://"),
 })
 
 export default function LinksForm({data}) {
@@ -73,10 +73,10 @@ export default function LinksForm({data}) {
         let reqData = {
             token: localStorage.getItem('token'), // USER TOKEN
             uid: localStorage.getItem('uid'), // USER UID
-            ...infoToUpdate
+            url_list: {...infoToUpdate}
         }
-        console.log(reqData)
+        // console.log(reqData)
-        // updateLinksMutation.mutate(reqData)
+        updateLinksMutation.mutate(reqData)
     }
 
   return (
@@ -90,31 +90,31 @@ export default function LinksForm({data}) {
             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>
+                        <label htmlFor="fb">Facebook URL: {(props.errors.facebook_url && props.touched.facebook_url) && <span className="text-danger">{props.errors.facebook_url}</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>
+                        <label htmlFor="tr">Twitter URL: {(props.errors.twitter_url && props.touched.twitter_url) && <span className="text-danger">{props.errors.twitter_url}</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: {(props.errors.blogger_url && props.touched.blogger_url) && <span className="text-danger">*</span>}</label>
+                        <label htmlFor="br">Blogger URL: {(props.errors.blogger_url && props.touched.blogger_url) && <span className="text-danger">{props.errors.blogger_url}</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: {(props.errors.google_url && props.touched.google_url) && <span className="text-danger">*</span>}</label>
+                        <label htmlFor="go">Google+ URL: {(props.errors.google_url && props.touched.google_url) && <span className="text-danger">{props.errors.google_url}</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: {(props.errors.linked_url && props.touched.linked_url) && <span className="text-danger">*</span>}</label>
+                        <label htmlFor="li">LinkedIn URL: {(props.errors.linked_url && props.touched.linked_url) && <span className="text-danger">{props.errors.linked_url}</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: {(props.errors.website_url && props.touched.website_url) && <span className="text-danger">*</span>}</label>
+                        <label htmlFor="we">Website URL: {(props.errors.website_url && props.touched.website_url) && <span className="text-danger">{props.errors.website_url}</span>}</label>
                         <input type="text" className="form-control" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
                     </div>
                     <div style={{textAlign: "right"}}>
@@ -137,7 +137,7 @@ export default function LinksForm({data}) {
                         </button>
                     </div>
                     <div className="modal-body">
-                        <h5 className="text-center" style={{fontSize: '18px'}}>Are you sure, you want to update? gg</h5>
+                        <h5 className="text-center" style={{fontSize: '18px'}}>Are you sure, you want to update?</h5>
                         {(updateLinksMutation.error || updateLinksMutation.isSuccess) && (
                         <div className="col-12">
                             <p className={`p-2 text-center ${updateLinksMutation.isSuccess ? 'text-success' : 'text-danger'}`}>

src/component/settings/ProfileImage.jsx

@@ -1,17 +1,21 @@
 import React, { memo, useRef, useState } from 'react'
-// import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import getImage from '../../utils/getImage';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { uploadProfileImg } from '../../services/services';
 import queryKeys from '../../services/queryKeys';
+import { updateUserDetails } from '../../store/UserDetails'
 
 const ProfileImage = memo(({intialData}) => {
 
+    const dispatch = useDispatch()
+
     const queryClient = useQueryClient()
 
     const [selectedImg, setSelectedImg] = useState(null)
     
     // const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS FOR ACTIVE USER DETAILS
+
     const avtarImage = "avtar/merms-user.png";
 
       // browser profile img
@@ -26,23 +30,26 @@ const ProfileImage = memo(({intialData}) => {
 
     const uploadProfileMutation = useMutation({
         mutationFn: (fields) => {
-            if(!fields.img){
+            if(!fields.file){
                 throw new Error('Please, select an image')
             }
             return uploadProfileImg(fields)
         },
         onSuccess: (res) => {
-            if(res.data.resultCode != '0'){
+            console.log('res', res)
-                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
+            if(res?.data?.picture){
+                dispatch(updateUserDetails({ picture: res?.data?.picture }));
             }
+            // if(res.data.resultCode != '0'){
+            //     throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
+            // }
             // const account_name = res?.data?.personal_data?.account_name
-            // dispatch(updateUserDetails({ account_name }));
         },
         onSettled: ()=>{
             setTimeout(() => {
-                queryClient.refetchQueries({
+                // queryClient.refetchQueries({
-                    queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
+                //     queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
-                })
+                // })
                 uploadProfileMutation.reset()
             }, 3000);
         }
@@ -51,8 +58,8 @@ const ProfileImage = memo(({intialData}) => {
     const proceedToUpload = () => {
         let reqData = {
             token: localStorage.getItem('token'), // USER TOKEN
-            uid: localStorage.getItem('uid'), // USER UID
+            member_uid: localStorage.getItem('uid'), // USER UID
-            img: selectedImg
+            file: selectedImg
         }
         // console.log('reqData', reqData)
         uploadProfileMutation.mutate(reqData)
@@ -95,7 +102,7 @@ const ProfileImage = memo(({intialData}) => {
                         {selectedImg &&
                         <div>
                             <button onClick={proceedToUpload} disabled={uploadProfileMutation.isSuccess || uploadProfileMutation.isPending} className="btn btn-light text-primary mb-2">
-                                {uploadProfileMutation.isPaused ? 'Upload...' : 'Upload New Avatar'}
+                                {uploadProfileMutation.isPending ? 'Upload...' : 'Upload New Avatar'}
                             </button>
                         </div>
                         }

src/services/queryKeys.js

@@ -8,11 +8,15 @@ const queryKeys = {
     recentAction: ['recent-action'],
     settingsData: ['settings_data'],
     myProductConfig: ['myproduct_config'],
+    myTemplateConfig: ['mytemplate_config'],
     productTemplateData: ['product_template_data'],
     subscriptions: ['subscriptions'],
     profile_data: ['profile_data'],
     my_files: ['my_files'],
     topics: ['topics'],
+    payment_report: ['payment_report'],
+    product_report: ['product_report'],
+    system_report: ['system_report'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],

src/services/services.js

@@ -105,7 +105,7 @@ export const updateLinks = (reqData) => {
     let postData = {
         ...reqData,
     }
-    return null //postAuxEnd(`/panel/account/links-update`, postData, false)
+    return postAuxEnd(`/panel/account/profilelinks-update`, postData, false)
 }
 
 // FUNCTION TO GET PRODUCT BY ID
@@ -244,6 +244,14 @@ export const getProductColorStyles = (reqData) => {
     }
     return postAuxEnd(`/panel/account/products/color-styles`, postData, false)
 }
+
+export const getTemplateConfig = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-config`, postData, false)
+}
+
 // FUNCTION TO ACTIVATE TEMPLATE
 export const activateTemplate = (reqData) => {
     let postData = {
@@ -290,6 +298,14 @@ export const uploadFile = (reqData) => {
     return postAuxEnd(`/upload/webfiles`, postData, true)
 }
 
+// FUNCTION TO CHANGE TEMPLATE MEDIA SET
+export const templateMediaSet = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/template-media-set`, postData, false)
+}
+
 export const getReportsTopicsList = (reqData) => {
     let postData = {
         ...reqData,
@@ -297,6 +313,30 @@ export const getReportsTopicsList = (reqData) => {
     return postAuxEnd(`/panel/report/topics`, postData, false)
 }
 
+// FUNCTION TO GET PAYMENT REPORTS
+export const getPaymentReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/payment`, postData, false)
+}
+
+// FUNCTION TO GET PRODUCT REPORTS
+export const getProductReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/product`, postData, false)
+}
+
+// FUNCTION TO GET SYSTEM REPORTS
+export const getSystemReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/system`, postData, false)
+}
+
 // FUNCTION TO GET COMMON PRACTICE
 export const getCommonPractice = (reqData) => {
     let postData = {
@@ -318,8 +358,8 @@ export const uploadProfileImg = (reqData) => {
     let postData = {
         ...reqData,
     }
-    throw new Error('Opps')
+    return postAuxEnd(`/upload/profile-picture`, postData, true)
-    // return postAuxEnd(`/panel/account/profile-update`, postData, true)
+    // throw new Error('Opps')
 }
 
 

src/store/UserDetails.js

@@ -9,7 +9,7 @@ export const userSlice = createSlice({
   initialState,
   reducers: {
     updateUserDetails: (state, action) => {
-      state.userDetails = { ...action.payload };
+      state.userDetails = { ...state.userDetails, ...action.payload };
     },
   },
 });