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

product url added

Browse Source
This commit is contained in:
victorAnumudu
2024-12-15 07:34:38 +01:00
parent 0fbadd5b68
commit fe114433ff
4 changed files with 95 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/home/HomeSections.jsx
+2 -116
View File
@@ -3,42 +3,10 @@ import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import RecentActions from "./RecentActions";
import Products from "./Products";
import TopBar from "./TopBar";
// import { useQuery } from "@tanstack/react-query";
// import { accountDashboard } from "../../services/services";
// import queryKeys from "../../services/queryKeys";
// import MainLoaderBS from "../loaders/MainLoaderBS";
import ProductsURL from "./ProductsURL";
export default function HomeSections(){
// const {data:dashData, isFetching, isError} = useQuery({
// queryKey: queryKeys.dashboard,
// queryFn: async () => await accountDashboard()
// })
// if(isFetching){
// return(
// <>
// {/* <MainLoaderBS /> */}
// <div className="row">
// <div className="col-12">
// <p className='text-success'>Loading...</p>
// </div>
// </div>
// </>
// )
// }
// if(isError){
// return (
// <div className="row">
// <div className="col-12">
// <p className='text-danger'>Error occured! Please refresh to continue</p>
// </div>
// </div>
// )
// }
return <>
{/* <div className="row">
<div className="col-md-12 m-b-30">
@@ -75,90 +43,8 @@ export default function HomeSections(){
</div>
</div>
<div className="row">
<div className="col-xxl-8 m-b-30">
<div className="card card-statistics h-100 mb-0">
<div className="card-header d-flex align-items-center justify-content-between">
<div className="card-heading">
<h4 className="card-title">My Product URLs</h4>
</div>
<div className="dropdown">
{/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
</div>
</div>
<div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
<div className="datatable-wrapper table-responsive">
<table id="datatable" className="table table-borderless table-striped">
<thead>
<tr>
<th style={{width: '30px'}}>#</th>
<th>Description</th>
<ProductsURL />
<th style={{width: '100px'}}>Status</th>
<th style={{width: '40px'}}>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Description - URL(Clickable) </td>
<td><span className="badge badge-success-inverse">Active</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
<tr>
<td>2</td>
<td>Main Website - https://starterweb.0ach30996.mermsemr.com </td>
<td><span className="badge badge-success-inverse">Updating</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
<tr>
<td>3</td>
<td>Blog Site - https://starterblog.0ach30996.mermsemr.com </td>
<td><span className="badge badge-danger-inverse">Refreshing</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
<tr>
<td>4</td>
<td>Long Sleeve Bow Top</td>
<td><span className="badge badge-success-inverse">Active</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
<tr>
<td>5</td>
<td>Shine Stripe Long Sleeve Ruffle</td>
<td><span className="badge badge-success-inverse">Active</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
<tr>
<td>6</td>
<td>Long Sleeve Micro Thermal Shirt</td>
<td><span className="badge badge-info-inverse">info</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>In stock</th>
<th>Status</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div className="col-xxl-4 m-b-30">
<div className="card card-statistics h-100 mb-0 panel_round_c3">
<div className="card-header d-flex justify-content-between">
src/component/home/ProductsURL.jsx
+86
View File
@@ -0,0 +1,86 @@
import React from 'react'
import { productsURL } from '../../services/services'
import { useQuery } from '@tanstack/react-query'
import queryKeys from '../../services/queryKeys'
export default function ProductsURL() {
const {data:data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.product_url,
queryFn: () => productsURL()
})
const urlData = data?.data?.url_data?.url
return (
<>
<div className="col-xxl-8 m-b-30">
<div className="card card-statistics h-100 mb-0">
<div className="card-header d-flex align-items-center justify-content-between">
<div className="card-heading">
<h4 className="card-title">My Product URLs</h4>
</div>
<div className="dropdown">
{/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
</div>
</div>
<div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
<div className="datatable-wrapper table-responsive">
{isFetching ?
<>
<div className="col-12">
<div className="p-4">
<p className='text-mute'>Loading...</p>
</div>
</div>
</>
: isError ?
<div className="col-12">
<div className="p-4">
<p className='text-danger'>{error.message}</p>
</div>
</div>
:
<table id="datatable" className="table table-borderless table-striped">
<thead>
<tr>
<th style={{width: '30px'}}>#</th>
<th>Description</th>
<th style={{width: '100px'}}>Status</th>
<th style={{width: '40px'}}>Action</th>
</tr>
</thead>
<tbody>
{urlData && urlData.map((item, index) => {
let statusColor = item?.status == 'Active' ? 'badge-success-inverse' : item?.status == 'Updating' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
return (
<tr key={index}>
<td>{Number(item?.no) + Number(index)}</td>
<td>{item?.description} - <a href={item?.url} target='_blank'>{item?.url}</a></td>
<td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
<td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
</tr>
)
})}
</tbody>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>In stock</th>
<th>Status</th>
<th>Action</th>
</tr>
</tfoot>
</table>
}
</div>
</div>
</div>
</div>
</>
)
}
src/services/queryKeys.js
+2 -1
View File
@@ -1,7 +1,8 @@
const queryKeys = {
dashboard: ['dashboard'],
recentAction: ['recent-action'],
product: ['product-data']
product: ['product-data'],
product_url: ['product_url']
}
export default queryKeys
src/services/services.js
+5
View File
@@ -66,6 +66,11 @@ export const productData = () => {
return getAuxEnd(`/panel/account/products`)
}
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
export const productsURL = () => {
return getAuxEnd(`/panel/account/products/url`)
}
export const MyProductData = () => {
return getAuxEnd(`/panel/myproduct/dash`)
}