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/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>
</>
)
}