merms office
This commit is contained in:
@@ -5,11 +5,8 @@ import queryKeys from '../../services/queryKeys'
|
|||||||
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
||||||
import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
|
import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
|
||||||
import Icons from '../Icons'
|
import Icons from '../Icons'
|
||||||
import { getBillings } from '../../services/siteServices'
|
import {getFilesUpload} from '../../services/siteServices'
|
||||||
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
|
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
|
||||||
// import formatNumber from '../../helpers/formatNumber'
|
|
||||||
// import Avatar from '../../assets/user_avatar.jpg'
|
|
||||||
|
|
||||||
|
|
||||||
export default function FileUploadCom() {
|
export default function FileUploadCom() {
|
||||||
|
|
||||||
@@ -42,13 +39,14 @@ export default function FileUploadCom() {
|
|||||||
page,
|
page,
|
||||||
...filterData
|
...filterData
|
||||||
}
|
}
|
||||||
return getBillings(reqData)
|
return getFilesUpload(reqData)
|
||||||
},
|
},
|
||||||
staleTime: 0 //0 mins
|
staleTime: 0 //0 mins
|
||||||
})
|
})
|
||||||
const billingData = data?.data?.payments // BILLINGS LIST
|
const billingData = data?.data?.file_list; // file_list
|
||||||
|
const media_server = data?.data?.media_server; // file_list
|
||||||
const pagination = data?.data?.pagination
|
const pagination = data?.data?.pagination
|
||||||
|
debugger;
|
||||||
return (
|
return (
|
||||||
<div className='w-full flex flex-col gap-8'>
|
<div className='w-full flex flex-col gap-8'>
|
||||||
<BreadcrumbCom title='Files' paths={['Dashboard', 'Files']}/>
|
<BreadcrumbCom title='Files' paths={['Dashboard', 'Files']}/>
|
||||||
@@ -62,20 +60,26 @@ export default function FileUploadCom() {
|
|||||||
<div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
|
<div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
|
||||||
<Icons name='filter' className='text-3xl'/>
|
<Icons name='filter' className='text-3xl'/>
|
||||||
<div className='w-full sm:max-w-48'>
|
<div className='w-full sm:max-w-48'>
|
||||||
<select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
|
<select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md'
|
||||||
|
onChange={handleFilter}>
|
||||||
<option value=''>All</option>
|
<option value=''>All</option>
|
||||||
<option value='option_name'>Option Name</option>
|
<option value='file_group'>File Group</option>
|
||||||
<option value='member_id'>Member ID</option>
|
<option value='member_id'>Member ID</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-full sm:max-w-48'>
|
<div className='w-full sm:max-w-48'>
|
||||||
<input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
|
<input name='id' value={filter?.id} disabled={!filter.type}
|
||||||
|
className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
|
||||||
|
onChange={handleFilter}/>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
|
<button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
|
||||||
|
className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/* end of filter section */}
|
{/* end of filter section */}
|
||||||
|
|
||||||
<TablePaginatedWrapper data={billingData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
|
<TablePaginatedWrapper data={billingData} isFetching={isFetching} setPage={setPage}
|
||||||
|
itemsPerPage={pagination?.limit} pagination={pagination}>
|
||||||
{({data}) => (
|
{({data}) => (
|
||||||
<>
|
<>
|
||||||
<table className="py-2 w-full text-sm">
|
<table className="py-2 w-full text-sm">
|
||||||
@@ -84,14 +88,15 @@ export default function FileUploadCom() {
|
|||||||
<th scope="col" className="px-2 py-2">
|
<th scope="col" className="px-2 py-2">
|
||||||
Added
|
Added
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" className="px-2">
|
|
||||||
Option Name
|
|
||||||
</th>
|
|
||||||
<th scope="col" className="px-2">
|
<th scope="col" className="px-2">
|
||||||
Member ID
|
Member ID
|
||||||
</th>
|
</th>
|
||||||
|
<th scope="col" className="px-2">
|
||||||
|
File Name
|
||||||
|
</th>
|
||||||
|
|
||||||
<th scope="col" className="px-2 text-right">
|
<th scope="col" className="px-2 text-right">
|
||||||
Amount
|
Group
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" className="px-2 text-right">
|
<th scope="col" className="px-2 text-right">
|
||||||
Status
|
Status
|
||||||
@@ -99,38 +104,54 @@ export default function FileUploadCom() {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
{(data && data.length > 0) ? data?.map((item, index) => {
|
||||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
const file_url = (media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
|
||||||
|
return (
|
||||||
|
<tr key={index}
|
||||||
|
className="py-2 border-t border-dashed border-slate-300">
|
||||||
<td className="px-2 py-2">
|
<td className="px-2 py-2">
|
||||||
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
<div
|
||||||
|
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
|
<div
|
||||||
|
className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2">
|
<td className="px-2">
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="text-base font-semibold">{item?.option_name}</div>
|
<div
|
||||||
|
className="text-base font-semibold">{item?.member_id}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2">
|
<td className="px-2">
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<div className="text-base font-semibold">{item?.member_id}</div>
|
<div
|
||||||
|
className="text-base font-semibold">
|
||||||
|
<a href={`${file_url}`} target='_blank'
|
||||||
|
rel="noreferrer">
|
||||||
|
{item?.filename}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="px-2">
|
||||||
|
<div className="text-right">
|
||||||
|
<div
|
||||||
|
className="text-base font-semibold">{item?.file_group}</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2">
|
<td className="px-2">
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<div className="text-base font-semibold">${item?.amount}</div>
|
<div
|
||||||
{/* <div className="font-normal text-gray-500">{item?.external_url}</div> */}
|
className="text-base font-semibold">{item?.status}</div>
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-2">
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-base font-semibold">{item?.status}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
:
|
:
|
||||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||||
<td className="px-3 py-2" colSpan={4}>
|
<td className="px-3 py-2" colSpan={4}>
|
||||||
@@ -143,7 +164,8 @@ export default function FileUploadCom() {
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</>
|
</>
|
||||||
)}
|
)
|
||||||
|
}
|
||||||
</TablePaginatedWrapper>
|
</TablePaginatedWrapper>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -88,6 +88,12 @@ export const getBillings = (reqData) => {
|
|||||||
return getAuxEnd(`/billings`, postData)
|
return getAuxEnd(`/billings`, postData)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// FUNCTION TO GET FILES
|
||||||
|
export const getFilesUpload = (reqData) => {
|
||||||
|
const postData = { ...reqData }
|
||||||
|
return getAuxEnd(`/file-uploads`, postData)
|
||||||
|
}
|
||||||
|
|
||||||
// FUNCTION TO GET SUBSCRIPTIONS
|
// FUNCTION TO GET SUBSCRIPTIONS
|
||||||
export const getSubscriptions = (reqData) => {
|
export const getSubscriptions = (reqData) => {
|
||||||
const postData = { ...reqData }
|
const postData = { ...reqData }
|
||||||
|
|||||||
Reference in New Issue
Block a user