victorAnumudu
60 lines
2.8 KiB
React
60 lines
2.8 KiB
React
import React, { useState } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import queryKeys from '../../../services/queryKeys'
|
|
import { getRightSidebar } from '../../../services/siteServices'
|
|
import Icons from '../../Icons'
|
|
//import Orders from './Orders'
|
|
import Tickets from './Tickets'
|
|
import Tasks from './Tasks'
|
|
import RecentPaymentsBar from "./RecentPaymentsBar";
|
|
|
|
export default function RightAsideBar() {
|
|
|
|
let [active, setActive] = useState('orders')
|
|
|
|
const handleActiveMenu = (name) => {
|
|
let lowerStr = name.toLowerCase()
|
|
setActive(lowerStr)
|
|
}
|
|
|
|
const {data, isFetching, isError, error} = useQuery({
|
|
queryKey: [...queryKeys.right_sidebar],
|
|
queryFn: () => {
|
|
// const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
|
|
// const reqData = {
|
|
// page,
|
|
// ...filterData
|
|
// }
|
|
return getRightSidebar()
|
|
},
|
|
// staleTime: 0 //0 mins
|
|
})
|
|
const recentData = [] // RECENT LIST
|
|
|
|
// const recentData = data?.data // RECENT LIST
|
|
// const pagination = data?.data?.pagination
|
|
// console.log('RIGHT', data?.data)
|
|
|
|
return (
|
|
<div className='w-full h-full flex flex-col gap-8'>
|
|
{/* Menu */}
|
|
<div className='grid grid-cols-3 gap-8'>
|
|
<button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'orders' && 'scale-[1.2]'}`}>
|
|
<Icons name='dashboard' className='text-3xl' />
|
|
</button>
|
|
<button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'tickets' && 'scale-[1.2]'}`}>
|
|
<Icons name='settings' className='text-3xl' />
|
|
</button>
|
|
<button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'tasks' && 'scale-[1.2]'}`}>
|
|
<Icons name='dashboard' className='text-3xl' />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
{active === 'orders' && <RecentPaymentsBar data={recentData} isFetching={isFetching} isError={isError} error={error} />}
|
|
{active === 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error} />}
|
|
{active === 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
|
|
</div>
|
|
)
|
|
}
|